move reactjs re-export stubs to their own files

Author: Archmonger

.gitignore

@@ -1,5 +1,5 @@
 # --- Build Artifacts ---
-src/reactpy/static/index.js*
+src/reactpy/static/*.js*
 src/reactpy/static/morphdom/
 src/reactpy/static/pyscript/
 

src/build_scripts/clean_js_dir.py

@@ -13,29 +13,30 @@
 
 # Get the path to the JS source directory
 js_src_dir = pathlib.Path(__file__).parent.parent / "js"
-
-# Get the paths to all `dist` folders in the JS source directory
-dist_dirs = glob.glob(str(js_src_dir / "**/dist"), recursive=True)
-
-# Get the paths to all `node_modules` folders in the JS source directory
-node_modules_dirs = glob.glob(str(js_src_dir / "**/node_modules"), recursive=True)
-
-# Get the paths to all `tsconfig.tsbuildinfo` files in the JS source directory
-tsconfig_tsbuildinfo_files = glob.glob(
-    str(js_src_dir / "**/tsconfig.tsbuildinfo"), recursive=True
-)
+static_output_dir = pathlib.Path(__file__).parent.parent / "reactpy" / "static"
 
 # Delete all `dist` folders
+dist_dirs = glob.glob(str(js_src_dir / "**/dist"), recursive=True)
 for dist_dir in dist_dirs:
     with contextlib.suppress(FileNotFoundError):
         shutil.rmtree(dist_dir)
 
 # Delete all `node_modules` folders
+node_modules_dirs = glob.glob(str(js_src_dir / "**/node_modules"), recursive=True)
 for node_modules_dir in node_modules_dirs:
     with contextlib.suppress(FileNotFoundError):
         shutil.rmtree(node_modules_dir)
 
 # Delete all `tsconfig.tsbuildinfo` files
+tsconfig_tsbuildinfo_files = glob.glob(
+    str(js_src_dir / "**/tsconfig.tsbuildinfo"), recursive=True
+)
 for tsconfig_tsbuildinfo_file in tsconfig_tsbuildinfo_files:
     with contextlib.suppress(FileNotFoundError):
         os.remove(tsconfig_tsbuildinfo_file)
+
+# Delete all `index-*.js` files
+index_js_files = glob.glob(str(static_output_dir / "index-*.js*"))
+for index_js_file in index_js_files:
+    with contextlib.suppress(FileNotFoundError):
+        os.remove(index_js_file)

src/js/packages/@reactpy/app/package.json

@@ -13,7 +13,7 @@
   "license": "MIT",
   "name": "@reactpy/app",
   "scripts": {
-    "build": "bun build \"src/index.ts\" --outdir=\"../../../../reactpy/static/\" --minify --sourcemap=\"linked\"",
+    "build": "bun build \"src/index.ts\" \"src/react.ts\" \"src/react-dom.ts\" \"src/react-jsx-runtime.ts\" --outdir=\"../../../../reactpy/static/\" --minify --sourcemap=\"linked\" --splitting",
     "checkTypes": "tsc --noEmit"
   }
 }

src/js/packages/@reactpy/app/src/index.ts

@@ -1,8 +1 @@
-export {
-  mountReactPy,
-  React,
-  ReactDOM,
-  jsx,
-  jsxs,
-  Fragment,
-} from "@reactpy/client";
+export { mountReactPy } from "@reactpy/client";

src/js/packages/@reactpy/app/src/react-dom.ts

@@ -0,0 +1,6 @@
+import ReactDOM from "preact/compat";
+
+// @ts-ignore
+export * from "preact/compat";
+
+export default ReactDOM;

src/js/packages/@reactpy/app/src/react-jsx-runtime.ts

@@ -0,0 +1 @@
+export * from "preact/jsx-runtime";

src/js/packages/@reactpy/app/src/react.ts

@@ -0,0 +1,6 @@
+import React from "preact/compat";
+
+// @ts-ignore
+export * from "preact/compat";
+
+export default React;

src/js/packages/@reactpy/app/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "composite": true,
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "esModuleInterop": true
   },
   "extends": "../../../tsconfig.json",
   "include": ["src"],

src/reactpy/web/__init__.py

@@ -8,6 +8,9 @@
     reactjs_component_from_string,
     reactjs_component_from_url,
 )
+from reactpy.web.utils import (
+    reactjs_import_map,
+)
 
 __all__ = [
     "export",
@@ -18,4 +21,5 @@
     "reactjs_component_from_npm",
     "reactjs_component_from_string",
     "reactjs_component_from_url",
+    "reactjs_import_map",
 ]

src/reactpy/web/module.py

@@ -146,6 +146,9 @@ def reactjs_component_from_npm(
 ) -> VdomConstructor | list[VdomConstructor]:
     """Import a component from an NPM package.
 
+    Is is mandatory to load `reactpy.web.reactjs_import_map()` on your page before using this
+    function. It is recommended to put this within your HTML <head> content.
+
     Parameters:
         package:
             The name of the NPM package.