babel-plugin-nativedesktop 0.1.0

package/bun-plugin.js

@@ -0,0 +1,48 @@
+// Bun plugin — the `bun --hot` dev-path twin of the babel plugin. Loaded via
+// a `bunfig.toml` `preload` so it registers once per process (surviving hot
+// re-evals) and rewrites shared `.ts` source as Bun loads it.
+//
+// This is NOT the module-aliasing mechanism the docs reject: onLoad here never
+// touches the "react" module (Bun's resolver loads bare specifiers directly,
+// so onLoad does not fire for them). It fires for the IMPORTING source files
+// and edits the import specifier STRING inside them — a plain source
+// transform, so no ESM/CJS `provideFetch` conflict arises. See
+// docs/agents/README.md "HMR: what actually preserves state" and
+// packages/react/src/dev-react.ts.
+//
+// FILTER IS `.ts` ONLY — deliberately excludes `.tsx`/`.desktop.tsx`. Verified
+// empirically (M8-D8): Bun's runtime onLoad has no fall-through — a matched
+// file MUST return contents (returning undefined or a contents-less object
+// both error), and once a plugin returns contents for a file, `bun --hot`
+// drops that file from its watch set, so the file no longer hot-reloads.
+// Intercepting component `.tsx` files would therefore break their HMR. So we
+// intercept only shared, non-component `.ts` modules — the natural home of
+// cross-platform hooks (`import { useState } from "react"`). Such a `.ts` file
+// is pinned at first eval: editing it requires a restart to take effect, but a
+// `.tsx`/`.desktop.tsx` component that consumes it hot-reloads normally, and a
+// component re-eval never resurfaces the dispatcher crash because the shared
+// module's hooks stay bound to `@nativedesktop/react`. Desktop `.tsx`
+// components import hooks from `@nativedesktop/react` (or from shared `.ts`
+// hooks), never raw "react". The babel plugin (compiled path) has no watcher
+// to preserve, so it rewrites every extension.
+const { rewriteReactHookImports } = require("./rewrite.js");
+
+const DEBUG = process.env.ND_HOOK_REWRITE_DEBUG === "1";
+
+Bun.plugin({
+  name: "nativedesktop-hook-imports",
+  setup(build) {
+    build.onLoad({ filter: /\.ts$/ }, async (args) => {
+      const source = await Bun.file(args.path).text();
+      // Dependency source is returned verbatim (never skipped — onLoad cannot
+      // decline). Deps don't hot-reload anyway, so freezing them is harmless.
+      const skip = args.path.includes("/node_modules/") || args.path.includes("/dist/");
+      const contents = skip ? source : rewriteReactHookImports(source);
+      if (DEBUG) {
+        const state = skip ? "skip" : contents === source ? "nochange" : "rewrote";
+        console.error(`ND_HOOK_REWRITE ${state} path=${args.path}`);
+      }
+      return { contents, loader: args.loader };
+    });
+  },
+});

package/hooks.js

@@ -0,0 +1,21 @@
+// The React hook subset that `@nativedesktop/react` pins across `bun --hot`
+// re-evals (packages/react/src/dev-react.ts). A hook imported from raw "react"
+// resolves to a re-evaluated react instance whose dispatcher no reconciler
+// ever attached to -> "Invalid hook call". These names, and only these, get
+// their `from "react"` import redirected to `@nativedesktop/react`.
+module.exports.PINNED_HOOKS = [
+  "useState",
+  "useEffect",
+  "useLayoutEffect",
+  "useMemo",
+  "useCallback",
+  "useRef",
+  "useContext",
+  "useReducer",
+  "useTransition",
+  "useDeferredValue",
+  "useSyncExternalStore",
+  "useId",
+  "use",
+  "startTransition",
+];

package/index.js

@@ -0,0 +1,52 @@
+// babel-plugin-nativedesktop — compiled/production path (M8-D8).
+//
+// Rewrites named React-hook imports `from "react"` to `from
+// "@nativedesktop/react"` so shared, platform-agnostic hooks (authored the
+// normal way, `import { useState } from "react"`, because web/React-Native
+// also consume them) resolve to the HMR-pinned, reconciler-attached react
+// instance when compiled into a NativeDesktop app. Only the hook subset
+// dev-react.ts pins is moved; default/namespace/type-only specifiers stay on
+// "react". See hooks.js for the list; bun-plugin.js is the `bun --hot`
+// counterpart for the dev path (babel does not run under `bun --hot`).
+const { PINNED_HOOKS } = require("./hooks.js");
+
+const HOOK_SET = new Set(PINNED_HOOKS);
+const ND_SOURCE = "@nativedesktop/react";
+
+module.exports = function babelPluginNativedesktop({ types: t }) {
+  return {
+    name: "nativedesktop-hook-imports",
+    visitor: {
+      ImportDeclaration(path) {
+        const node = path.node;
+        if (node.source.value !== "react") return;
+        // `import type { … } from "react"` — leave type-only imports alone.
+        if (node.importKind === "type") return;
+
+        const hookSpecifiers = [];
+        const restSpecifiers = [];
+        for (const spec of node.specifiers) {
+          if (
+            t.isImportSpecifier(spec) &&
+            spec.importKind !== "type" &&
+            t.isIdentifier(spec.imported) &&
+            HOOK_SET.has(spec.imported.name)
+          ) {
+            hookSpecifiers.push(spec);
+          } else {
+            restSpecifiers.push(spec);
+          }
+        }
+        if (hookSpecifiers.length === 0) return;
+
+        const ndImport = t.importDeclaration(hookSpecifiers, t.stringLiteral(ND_SOURCE));
+        if (restSpecifiers.length > 0) {
+          node.specifiers = restSpecifiers;
+          path.insertAfter(ndImport);
+        } else {
+          path.replaceWith(ndImport);
+        }
+      },
+    },
+  };
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "babel-plugin-nativedesktop",
+  "version": "0.1.0",
+  "description": "Babel plugin rewriting react hook imports to @nativedesktop/react for shared-logic packages",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FormalSnake/NativeDesktop.git",
+    "directory": "packages/babel-plugin-nativedesktop"
+  },
+  "homepage": "https://github.com/FormalSnake/NativeDesktop#readme",
+  "bugs": "https://github.com/FormalSnake/NativeDesktop/issues",
+  "publishConfig": {
+  "access": "public"
+},
+"main": "index.js",
+"exports": {
+  ".": "./index.js",
+  "./bun-plugin": "./bun-plugin.js"
+},
+"files": ["index.js", "bun-plugin.js", "rewrite.js", "hooks.js"]
+}

package/rewrite.js

@@ -0,0 +1,51 @@
+// String-level twin of the babel plugin's ImportDeclaration transform, for
+// the `bun --hot` dev path (bun-plugin.js) where babel never runs. Bun's
+// onLoad hands us raw source text, not an AST, so this rewrites the import
+// clause textually. Scoped to well-formed TS/TSX import statements: only
+// `import [Default,] { … } from "react"` shapes are touched, never
+// `import type …`, `import React from "react"`, or `import * as React`.
+const { PINNED_HOOKS } = require("./hooks.js");
+
+const HOOK_SET = new Set(PINNED_HOOKS);
+const ND_SOURCE = "@nativedesktop/react";
+
+// `[^{}]*` cannot cross a brace, so it can never swallow a neighbouring
+// import statement's clause even when semicolons are elided (ASI). The
+// `(?!type\b)` guard skips `import type { … } from "react"`.
+const REACT_NAMED_IMPORT = /import\s+(?!type\b)(?:([A-Za-z_$][\w$]*)\s*,\s*)?\{([^{}]*)\}\s*from\s*(['"])react\3\s*;?/g;
+
+function rewriteReactHookImports(code) {
+  if (!code.includes('"react"') && !code.includes("'react'")) return code;
+  return code.replace(REACT_NAMED_IMPORT, (match, defaultImport, named, quote) => {
+    const specs = named
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+
+    const hookSpecs = [];
+    const restSpecs = [];
+    for (const spec of specs) {
+      if (/^type\s/.test(spec)) {
+        restSpecs.push(spec);
+        continue;
+      }
+      const imported = spec.split(/\s+as\s+/)[0].trim();
+      if (HOOK_SET.has(imported)) hookSpecs.push(spec);
+      else restSpecs.push(spec);
+    }
+    if (hookSpecs.length === 0) return match;
+
+    const out = [];
+    if (defaultImport && restSpecs.length) {
+      out.push(`import ${defaultImport}, { ${restSpecs.join(", ")} } from ${quote}react${quote};`);
+    } else if (defaultImport) {
+      out.push(`import ${defaultImport} from ${quote}react${quote};`);
+    } else if (restSpecs.length) {
+      out.push(`import { ${restSpecs.join(", ")} } from ${quote}react${quote};`);
+    }
+    out.push(`import { ${hookSpecs.join(", ")} } from ${quote}${ND_SOURCE}${quote};`);
+    return out.join(" ");
+  });
+}
+
+module.exports = { rewriteReactHookImports };