From 471e08bbc98e4f5bca600959fa367a108e4c2411 Mon Sep 17 00:00:00 2001 From: "Maarten A. Breddels" Date: Tue, 19 Dec 2023 13:45:10 +0100 Subject: [PATCH] fix: add more react modules to the import map My guess is this has changed in esm.sh, but we needed react/jsx-runtime for mui to work and the others seem to be needed for a package like threejs-fiber. --- package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++---- package.json | 2 ++ src/widget.tsx | 25 +++++++++++++++++------- 3 files changed, 66 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7de1daf..08e9f61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,24 +1,26 @@ { - "name": "jupyter-react", - "version": "0.1.0", + "name": "@widgetti/jupyter-react", + "version": "0.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "jupyter-react", - "version": "0.1.0", + "name": "@widgetti/jupyter-react", + "version": "0.3.0", "license": "BSD-3-Clause", "dependencies": { "@babel/preset-typescript": "^7.21.0", "@babel/standalone": "^7.21.3", "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6", "@types/react": "^18.0.29", + "@types/react-reconciler": "^0.28.8", "babel-plugin-import-map": "^1.0.0", "es-module-shims": "^1.7.0", "esbuild": "^0.17.14", "raw-loader": "^4.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-reconciler": "^0.29.0", "sucrase": "^3.30.0" }, "devDependencies": { @@ -3609,6 +3611,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-reconciler": { + "version": "0.28.8", + "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz", + "integrity": "sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -10738,6 +10748,21 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "node_modules/react-reconciler": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", + "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "engines": { + "node": ">=0.10.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -16714,6 +16739,14 @@ "@types/react": "*" } }, + "@types/react-reconciler": { + "version": "0.28.8", + "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz", + "integrity": "sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==", + "requires": { + "@types/react": "*" + } + }, "@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", @@ -22088,6 +22121,15 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "react-reconciler": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", + "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==", + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index ac763e5..5f654ae 100644 --- a/package.json +++ b/package.json @@ -53,12 +53,14 @@ "@babel/standalone": "^7.21.3", "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3 || ^4 || ^5 || ^6", "@types/react": "^18.0.29", + "@types/react-reconciler": "^0.28.8", "babel-plugin-import-map": "^1.0.0", "es-module-shims": "^1.7.0", "esbuild": "^0.17.14", "raw-loader": "^4.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-reconciler": "^0.29.0", "sucrase": "^3.30.0" }, "devDependencies": { diff --git a/src/widget.tsx b/src/widget.tsx index 7a1995a..3738c50 100644 --- a/src/widget.tsx +++ b/src/widget.tsx @@ -9,6 +9,9 @@ import { import * as React from 'react'; import { useEffect, useState } from 'react'; +import * as ReactJsxRuntime from 'react/jsx-runtime'; +import * as ReactReconcilerContants from "react-reconciler/constants"; +import * as ReactReconciler from "react-reconciler"; import * as ReactDOM from 'react-dom'; // @ts-ignore import * as ReactDOMClient from 'react-dom/client'; @@ -41,7 +44,7 @@ async function ensureImportShimLoaded() { } function autoExternalReactResolve(id: string, parentUrl: string, resolve: (arg0: any, arg1: any) => any) { - const shipsWith = (id == "react") || (id == "react-dom"); + const shipsWith = (id == "react") || (id == "react-dom") || (id == "react/jsx-runtime") || (id == "react-dom/client") || (id == "react-reconciler") || (id == "react-reconciler/constants"); const alreadyPatched = parentUrl.includes("?external=react,react-dom"); const parentIsEsmSh = parentUrl.startsWith("https://esm.sh/"); const isBlob = id.startsWith("blob:"); @@ -66,7 +69,14 @@ let react16ESMUrls : any = null; function ensureReactSetup(version: number) { if(version == 18) { if(react18ESMUrls == null) { - react18ESMUrls = {urlReact: expose(React), urlReactDom: expose(ReactDOM)}; + react18ESMUrls = { + "react": expose(React), + "react-dom": expose(ReactDOM), + "react/jsx-runtime": expose(ReactJsxRuntime), + "react-dom/client": expose(ReactDOMClient), + "react-reconciler": expose(ReactReconciler), + "react-reconciler/constants": expose(ReactReconcilerContants), + }; } return react18ESMUrls; } else if(version == 16) { @@ -202,18 +212,19 @@ export class ReactView extends DOMWidgetView { setScope(compiledCode); return; } - const {urlReact, urlReactDom} = ensureReactSetup(this.model.get("react_version")); + const reactImportMap = ensureReactSetup(this.model.get("react_version")); await ensureImportShimLoaded(); let finalCode = compiledCode; // @ts-ignore const importMapWidget = this.model.get("_import_map"); const importMap = { "imports": { - "react": urlReact, - "react-dom": urlReactDom, - ...importMapWidget["imports"] + ...reactImportMap, + ...importMapWidget["imports"], }, - "scopes": importMapWidget["scopes"] + "scopes": { + ...importMapWidget["scopes"] + } }; // @ts-ignore importShim.addImportMap(importMap);