some things working

2026-01-11 14:22:51 +00:00 · 2025-09-17 00:33:36 -04:00
parent 41d18ca898
commit b3eb42c348
26 changed files with 954 additions and 329 deletions
--- a/packages/react-native-xtermjs-webview/README.md
+++ b/packages/react-native-xtermjs-webview/README.md
@@ -1,69 +1,77 @@
 # React + TypeScript + Vite

-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with HMR and
+some ESLint rules.

 Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react)
+  uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc)
+  uses [SWC](https://swc.rs/) for Fast Refresh

 ## Expanding the ESLint configuration

-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+If you are developing a production application, we recommend updating the
+configuration to enable type-aware lint rules:

 ```js
 export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+	globalIgnores(['dist']),
+	{
+		files: ['**/*.{ts,tsx}'],
+		extends: [
+			// Other configs...

-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
+			// Remove tseslint.configs.recommended and replace with this
+			...tseslint.configs.recommendedTypeChecked,
+			// Alternatively, use this for stricter rules
+			...tseslint.configs.strictTypeChecked,
+			// Optionally, add this for stylistic rules
+			...tseslint.configs.stylisticTypeChecked,

-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+			// Other configs...
+		],
+		languageOptions: {
+			parserOptions: {
+				project: ['./tsconfig.node.json', './tsconfig.app.json'],
+				tsconfigRootDir: import.meta.dirname,
+			},
+			// other options...
+		},
+	},
+]);
 ```

-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+You can also install
+[eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x)
+and
+[eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom)
+for React-specific lint rules:

 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';

 export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+	globalIgnores(['dist']),
+	{
+		files: ['**/*.{ts,tsx}'],
+		extends: [
+			// Other configs...
+			// Enable lint rules for React
+			reactX.configs['recommended-typescript'],
+			// Enable lint rules for React DOM
+			reactDom.configs.recommended,
+		],
+		languageOptions: {
+			parserOptions: {
+				project: ['./tsconfig.node.json', './tsconfig.app.json'],
+				tsconfigRootDir: import.meta.dirname,
+			},
+			// other options...
+		},
+	},
+]);
 ```
--- a/packages/react-native-xtermjs-webview/eslint.config.js
+++ b/packages/react-native-xtermjs-webview/eslint.config.js
@@ -1,23 +1,27 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { globalIgnores, defineConfig } from 'eslint/config';

-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
+export default defineConfig([
+	globalIgnores(['dist']),
+	{
+		files: ['**/*.{ts,tsx}'],
+		extends: [
+			js.configs.recommended,
+			tseslint.configs.recommended,
+			reactHooks.configs['recommended-latest'],
+			reactRefresh.configs.vite,
+		],
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: globals.browser,
+			parserOptions: {
+				projectService: true,
+				tsconfigRootDir: import.meta.dirname,
+			},
+		},
+	},
+]);
--- a/packages/react-native-xtermjs-webview/package.json
+++ b/packages/react-native-xtermjs-webview/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-native-xtermjs-webview",
+  "name": "@fressh/react-native-xtermjs-webview",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@@ -9,11 +9,16 @@
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "fmt:check": "cross-env SORT_IMPORTS=true prettier --check .",
+    "fmt": "cross-env SORT_IMPORTS=true prettier --write .",
+    "eslint:check": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix --report-unused-disable-directives --max-warnings 0 .",
+    "typecheck": "tsc --noEmit",
    "preview": "vite preview"
  },
  "dependencies": {
-    "react-native-xtermjs-webview-internal": "workspace:*"
+    "@fressh/react-native-xtermjs-webview-internal": "workspace:*",
+    "js-base64": "^3.7.8"
  },
  "peerDependencies": {
    "react": "19.1.0",
@@ -21,6 +26,7 @@
    "react-native-webview": "13.15.0"
  },
  "devDependencies": {
+    "@epic-web/config": "^1.21.3",
    "@eslint/js": "^9.35.0",
    "@types/react": "~19.1.12",
    "@types/react-dom": "^19.1.7",
@@ -29,11 +35,14 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native-webview": "13.15.0",
    "typescript": "~5.9.2",
    "typescript-eslint": "^8.44.0",
-    "vite": "6.3.6"
+    "vite": "6.3.6",
+    "vite-plugin-dts": "^4.5.4"
  }
 }
--- a/packages/react-native-xtermjs-webview/prettier.config.mjs
+++ b/packages/react-native-xtermjs-webview/prettier.config.mjs
@@ -0,0 +1,14 @@
+import epicConfig from '@epic-web/config/prettier';
+// Sometimes this plugin can remove imports that are being edited.
+// As a workaround we will only use this in the cli. (pnpm run fmt)
+const sortImports = process.env.SORT_IMPORTS === 'true-never';
+
+/** @type {import("prettier").Options} */
+export default {
+	...epicConfig,
+	semi: true,
+	plugins: [
+		...(sortImports ? ['prettier-plugin-organize-imports'] : []),
+		...(epicConfig.plugins || []),
+	],
+};
--- a/packages/react-native-xtermjs-webview/src/index.tsx
+++ b/packages/react-native-xtermjs-webview/src/index.tsx
@@ -1,6 +1,49 @@
+import { useImperativeHandle, useRef, type ComponentProps } from 'react';
 import { WebView } from 'react-native-webview';
-import htmlString from 'react-native-xtermjs-webview-internal/dist/assets/index.html?raw';
+import htmlString from '@fressh/react-native-xtermjs-webview-internal/dist/index.html?raw';
+import { Base64 } from 'js-base64';

-export function XtermJsWebView() {
-	return <WebView originWhitelist={['*']} source={{ html: htmlString }} />;
+type StrictOmit<T, K extends keyof T> = Omit<T, K>;
+
+export type XtermWebViewHandle = {
+	write: (data: Uint8Array) => void;
+};
+const decoder = new TextDecoder('utf-8');
+
+export function XtermJsWebView({
+	ref,
+	...props
+}: StrictOmit<ComponentProps<typeof WebView>, 'source' | 'originWhitelist'> & {
+	ref: React.RefObject<XtermWebViewHandle | null>;
+}) {
+	const webViewRef = useRef<WebView>(null);
+
+	useImperativeHandle(ref, () => {
+		return {
+			write: (data) => {
+				const base64Data = Base64.fromUint8Array(data);
+				console.log('writing rn side', {
+					base64Data,
+					dataLength: data.length,
+				});
+
+				console.log(
+					'try to decode',
+					decoder.decode(Base64.toUint8Array(base64Data)),
+				);
+				webViewRef.current?.injectJavaScript(`
+					window?.terminalWriteBase64('${base64Data}');
+				`);
+			},
+		};
+	});
+
+	return (
+		<WebView
+			ref={webViewRef}
+			originWhitelist={['*']}
+			source={{ html: htmlString }}
+			{...props}
+		/>
+	);
 }
--- a/packages/react-native-xtermjs-webview/tsconfig.app.json
+++ b/packages/react-native-xtermjs-webview/tsconfig.app.json
@@ -1,27 +1,27 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "ES2022",
+		"useDefineForClassFields": true,
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,

-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,
+		"jsx": "react-jsx",

-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["src"]
 }
--- a/packages/react-native-xtermjs-webview/tsconfig.json
+++ b/packages/react-native-xtermjs-webview/tsconfig.json
@@ -1,7 +1,7 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.app.json" },
+		{ "path": "./tsconfig.node.json" }
+	]
 }
--- a/packages/react-native-xtermjs-webview/tsconfig.node.json
+++ b/packages/react-native-xtermjs-webview/tsconfig.node.json
@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2023",
+		"lib": ["ES2023"],
+		"module": "ESNext",
+		"skipLibCheck": true,

-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"moduleDetection": "force",
+		"noEmit": true,

-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"erasableSyntaxOnly": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts"]
 }
--- a/packages/react-native-xtermjs-webview/turbo.json
+++ b/packages/react-native-xtermjs-webview/turbo.json
@@ -0,0 +1,7 @@
+{
+	"extends": ["//"],
+	"tasks": {
+		"lint": {},
+		"lint:check": {}
+	}
+}
--- a/packages/react-native-xtermjs-webview/vite.config.ts
+++ b/packages/react-native-xtermjs-webview/vite.config.ts
@@ -1,21 +1,37 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import packageJson from './package.json'
-import { resolve } from 'path'
-
-
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';

 export default defineConfig({
-  plugins: [react()],
-  build: {
-    rollupOptions: {
-      external: Object.keys(packageJson.peerDependencies || {}),
-    },
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'ReactNativeXtermJsWebView',
-      formats: ['es'],
-      fileName: 'react-native-xtermjs-webview',
-    }
-  },
-})
+	plugins: [
+		react(),
+		dts({
+			tsconfigPath: './tsconfig.app.json',
+			// This makes dist/ look nice but breaks Cmd + Click
+			rollupTypes: false,
+			// We need this or the types defined in package.json will be missing
+			// If rollupTypes is true, this is forced true
+			insertTypesEntry: true,
+			compilerOptions: {
+				// This allows Cmd + Click from different packages in the monorepo
+				declarationMap: true,
+			},
+		}),
+	],
+	build: {
+		sourcemap: true,
+		rollupOptions: {
+			external: ['react', 'react/jsx-runtime', 'react-native-webview'],
+			// external: () => {
+			// 	fs.writeFileSync('dep.log', `${dep}\n`, { flag: 'a' });
+			// 	return false;
+			// }
+		},
+		lib: {
+			entry: resolve(__dirname, 'src/index.tsx'),
+			formats: ['es'],
+			fileName: () => 'index.js',
+		},
+	},
+});