babel-plugin-rbl 0.0.1

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,109 @@
+# babel-plugin-rbl
+
+Lets you write [react-babylon-lite](https://github.com/brianzinn/react-babylon-lite) scenes with
+lowercase JSX intrinsics — `<box/>`, `<pbrMaterial/>`, `<arcRotateCamera/>` — instead of imported
+components, **without giving up tree-shaking**. It rewrites each known lowercase tag into a real
+component import at build time, so the module graph stays statically analyzable and unused feature
+areas still contribute zero bytes.
+
+```tsx
+// You write this:
+import 'react-babylon-lite/intrinsics';
+import { Canvas } from 'react-babylon-lite';
+
+<Canvas>
+  <arcRotateCamera radius={7} />
+  <hemisphericLight direction={[0, 1, 0]} />
+  <box size={2}>
+    <pbrMaterial baseColorFactor="#ff6a00" />
+  </box>
+</Canvas>;
+```
+
+```tsx
+// The plugin turns the tags into this (conceptually) before your React transform runs:
+import { Box as _Box, PbrMaterial as _PbrMaterial /* … */ } from 'react-babylon-lite/components';
+
+<_Box size={2}>
+  <_PbrMaterial baseColorFactor="#ff6a00" />
+</_Box>;
+```
+
+Because the output is ordinary named imports, the bundle is byte-for-byte what you'd get by
+importing the components yourself — proven by the same CI tree-shake gate the library uses. There
+is **no runtime name registry** (unlike an `extend()`-injection approach), so nothing defeats dead-
+code elimination.
+
+```bash
+pnpm add -D babel-plugin-rbl
+```
+
+## Setup
+
+Pick the entry point that matches your toolchain. Both do the identical rewrite.
+
+### Vite (recommended — works with oxc/SWC, `@vitejs/plugin-react` v6+, and Babel)
+
+`@vitejs/plugin-react` v6+ is oxc-based and has **no Babel hook**, so use the standalone
+`enforce: 'pre'` transform from the `/vite` subpath. It must run **before** the React plugin:
+
+```js
+// vite.config.js
+import react from '@vitejs/plugin-react';
+import reactBabylonLite from 'babel-plugin-rbl/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    reactBabylonLite(), // <box/> → <_Box/> first…
+    react(), //            …then the normal JSX/TS transform
+  ],
+});
+```
+
+It only touches `.jsx`/`.tsx` files that actually contain a known tag (cheap regex pre-filter),
+emits sourcemaps, and leaves the rewritten code as JSX/TS for your React plugin to compile as usual.
+
+### Babel toolchain (`babel.config.js`, or a Babel-based `@vitejs/plugin-react`)
+
+If you already run Babel, add the plugin directly:
+
+```js
+// babel.config.js
+export default {
+  plugins: ['babel-plugin-rbl'],
+};
+```
+
+```js
+// or via a Babel-based @vitejs/plugin-react
+react({ babel: { plugins: ['babel-plugin-rbl'] } });
+```
+
+## TypeScript
+
+Add the types-only import once (anywhere in your app, or in a `.d.ts`) so TypeScript accepts the
+lowercase tags and types their props (`position` → `Vec3Input`, etc.):
+
+```ts
+import 'react-babylon-lite/intrinsics';
+```
+
+It has zero runtime cost — it only augments the global JSX namespace. Without it, TypeScript reports
+the lowercase tags as unknown intrinsic elements.
+
+## What gets rewritten
+
+- Only the **known lowercase tags** are rewritten — the 30 elements generated from the
+  react-babylon-lite codegen manifest (the same list `react-babylon-lite/intrinsics` types), e.g.
+  `box`, `sphere`, `ground`, `arcRotateCamera`, `hemisphericLight`, `directionalLight`,
+  `standardMaterial`, `pbrMaterial`, `gridMaterial`, `pcfDirectionalShadowGenerator`, `transformNode`, …
+- Lowercase tags that **aren't** in the map (DOM elements like `<div/>`) and all capitalized
+  components pass through untouched.
+- One import is added per component per file (deduped).
+
+The plugin takes no options — imports always resolve from `react-babylon-lite/components`.
+
+## License
+
+[Unlicense](https://unlicense.org/) (public domain).

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "babel-plugin-rbl",
+  "version": "0.0.1",
+  "description": "Rewrites lowercase JSX intrinsics like <box/> into tree-shakeable react-babylon-lite component imports",
+  "author": "Brian Zinn <542756+brianzinn@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brianzinn/react-babylon-lite.git",
+    "directory": "packages/babel-plugin"
+  },
+  "homepage": "https://github.com/brianzinn/react-babylon-lite#readme",
+  "bugs": {
+    "url": "https://github.com/brianzinn/react-babylon-lite/issues"
+  },
+  "keywords": [
+    "babel-plugin",
+    "react",
+    "babylon-lite",
+    "react-babylon-lite"
+  ],
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./vite": {
+      "types": "./src/vite.d.ts",
+      "import": "./src/vite.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src"
+  ],
+  "license": "Unlicense",
+  "dependencies": {
+    "@babel/core": "^7.25.0",
+    "@babel/helper-module-imports": "^7.25.9",
+    "@babel/plugin-syntax-jsx": "^7.25.0",
+    "@babel/plugin-syntax-typescript": "^7.25.0"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/element-map.mjs

@@ -0,0 +1,34 @@
+// GENERATED FILE — do not edit. Regenerate with `pnpm codegen` (tools/codegen).
+/** Lowercase JSX element name → named export of react-babylon-lite/components. */
+export const elements = {
+  arcRotateCamera: 'ArcRotateCamera',
+  box: 'Box',
+  capsule: 'Capsule',
+  csmDirectionalShadowGenerator: 'CsmDirectionalShadowGenerator',
+  cylinder: 'Cylinder',
+  directionalLight: 'DirectionalLight',
+  disc: 'Disc',
+  esmDirectionalShadowGenerator: 'EsmDirectionalShadowGenerator',
+  extrudeShape: 'ExtrudeShape',
+  freeCamera: 'FreeCamera',
+  geospatialCamera: 'GeospatialCamera',
+  gridMaterial: 'GridMaterial',
+  ground: 'Ground',
+  hemisphericLight: 'HemisphericLight',
+  meshFromData: 'MeshFromData',
+  pbrMaterial: 'PbrMaterial',
+  pcfDirectionalShadowGenerator: 'PcfDirectionalShadowGenerator',
+  pcfSpotlightShadowGenerator: 'PcfSpotlightShadowGenerator',
+  plane: 'Plane',
+  pointLight: 'PointLight',
+  polyhedron: 'Polyhedron',
+  ribbon: 'Ribbon',
+  shaderMaterial: 'ShaderMaterial',
+  sphere: 'Sphere',
+  spotLight: 'SpotLight',
+  standardMaterial: 'StandardMaterial',
+  torus: 'Torus',
+  torusKnot: 'TorusKnot',
+  transformNode: 'TransformNode',
+  tube: 'Tube',
+};

package/src/index.d.ts

@@ -0,0 +1,6 @@
+/** Babel plugin: rewrites known lowercase JSX tags into react-babylon-lite component imports. */
+declare function reactBabylonLiteBabelPlugin(): {
+  name: string;
+  visitor: Record<string, unknown>;
+};
+export default reactBabylonLiteBabelPlugin;

package/src/index.js

@@ -0,0 +1,43 @@
+import { addNamed } from '@babel/helper-module-imports';
+import { elements } from './element-map.mjs';
+
+const SOURCE = 'react-babylon-lite/components';
+
+/**
+ * Rewrites known lowercase JSX tags (<box/>) into imports of the matching react-babylon-lite
+ * component (<_Box/> + `import { Box as _Box } from 'react-babylon-lite/components'`). The
+ * import graph stays statically analyzable, so tree-shaking works exactly as with hand-written
+ * component imports — no runtime name registry. Unknown lowercase tags (DOM elements) and
+ * capitalized components pass through untouched.
+ *
+ * Pair with `import 'react-babylon-lite/intrinsics'` (types-only) so TypeScript accepts the tags.
+ */
+export default function reactBabylonLiteBabelPlugin() {
+  return {
+    name: 'react-babylon-lite',
+    visitor: {
+      JSXOpeningElement(path, state) {
+        const nameNode = path.node.name;
+        if (nameNode.type !== 'JSXIdentifier') return;
+        const tag = nameNode.name;
+        if (!/^[a-z]/.test(tag)) return;
+        const exportName = elements[tag];
+        if (exportName === undefined) return;
+
+        // One import per component per file.
+        const imports = (state.rblImports ??= new Map());
+        let localName = imports.get(exportName);
+        if (localName === undefined) {
+          localName = addNamed(path, exportName, SOURCE, { nameHint: exportName }).name;
+          imports.set(exportName, localName);
+        }
+
+        nameNode.name = localName;
+        const closing = path.parent.closingElement;
+        if (closing !== null && closing !== undefined && closing.name.type === 'JSXIdentifier') {
+          closing.name.name = localName;
+        }
+      },
+    },
+  };
+}

package/src/vite.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Standalone Vite plugin (enforce: 'pre') for setups without a babel hook (oxc/SWC-based React
+ * plugins). Structurally assignable to Vite's Plugin type.
+ */
+declare function reactBabylonLiteVite(): {
+  name: string;
+  enforce: 'pre';
+  transform(code: string, id: string): Promise<{ code: string; map: unknown } | null>;
+};
+export default reactBabylonLiteVite;

package/src/vite.js

@@ -0,0 +1,40 @@
+import { transformAsync } from '@babel/core';
+import jsxSyntax from '@babel/plugin-syntax-jsx';
+import typescriptSyntax from '@babel/plugin-syntax-typescript';
+import { elements } from './element-map.mjs';
+import reactBabylonLiteBabelPlugin from './index.js';
+
+// Cheap pre-filter: only files that mention a known lowercase tag get the babel pass.
+const TAG_PATTERN = new RegExp(`<(?:${Object.keys(elements).join('|')})[\\s/>]`);
+
+/**
+ * Standalone Vite plugin (works with rolldown/oxc-based @vitejs/plugin-react v6+, which has no
+ * babel hook, and with SWC setups). Runs as an `enforce: 'pre'` transform that ONLY renames
+ * known lowercase JSX tags into component imports — output is still JSX/TS, so the regular
+ * React plugin compiles it as usual.
+ *
+ * Usage: `plugins: [reactBabylonLite(), react(), ...]`.
+ */
+export default function reactBabylonLiteVite() {
+  return {
+    name: 'react-babylon-lite',
+    enforce: 'pre',
+    async transform(code, id) {
+      const filename = id.split('?')[0];
+      if (!/\.[jt]sx$/.test(filename)) return null;
+      if (!TAG_PATTERN.test(code)) return null;
+
+      const syntaxPlugins = filename.endsWith('.tsx')
+        ? [[typescriptSyntax, { isTSX: true }], jsxSyntax]
+        : [jsxSyntax];
+      const result = await transformAsync(code, {
+        configFile: false,
+        babelrc: false,
+        filename,
+        sourceMaps: true,
+        plugins: [...syntaxPlugins, reactBabylonLiteBabelPlugin],
+      });
+      return result?.code != null ? { code: result.code, map: result.map } : null;
+    },
+  };
+}