From ed5b7d813de19d7e1ca9573ce3fbe3c583e33e87 Mon Sep 17 00:00:00 2001 From: Paul Korzhyk Date: Wed, 20 Aug 2025 22:14:13 +0300 Subject: [PATCH 1/4] Update README.md Fix typo, make section on bundled react more prominent --- README.md | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index efd08c6..b80d076 100644 --- a/README.md +++ b/README.md @@ -211,9 +211,32 @@ ipyreact.ValueWidget( ) ``` +### Importing ReactJS based libraries + +Imported libraries must require/import `react` and `react-dom` packages provided by `ipyreact`, otherwise things will break (see [FAQ](#faq)). +For esm.sh it can be achieved by adding `external=react,react-dom` to the URL: + +```python +import ipyreact + +class Doodle(ipyreact.ValueWidget): + _esm = """ + import { MeditatingDoodle } from "https://esm.sh/react-open-doodles?external=react,react-dom"; + import * as React from "react"; + + export default ({value, setValue}) => ( +
+ +
+ ); + """ +Doodle() +``` + + ### Import maps -However, the above code now has a direct link to "https://esm.sh/canvas-confetti@1.6.0" which makes the code very specific to esm.sh. +The above examples have direct links to esm.sh, e.g. "https://esm.sh/canvas-confetti@1.6.0". Which means version and CDN information is mebedded in every component's code. To address this, we also support [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to write code more independant of where the modules come from. @@ -230,7 +253,6 @@ define_import_map({ }) ``` -_Note that it is important to add `external=react,react-dom` for ReactJS based libraries, otherwise [esm.sh](https://esm.sh/#using-import-maps) would import ReactJS again_. Which means we can now write our ConfettiButton as: @@ -464,7 +486,7 @@ React render tree. For instance, if you see `"Cannot read properties of null (reading 'useReducer')"` it means that you are loading in your own ReactJS version. -If you use https://esh.sh, make sure you add `??external=react,react-dom` at the end of the url, so that your esm bundle doesn't include its own +If you use https://esh.sh, make sure you add `?external=react,react-dom` at the end of the url, so that your esm bundle doesn't include its own ReactJS version, but uses the one provided with ipyreact. If you make your own bundle using esbuild, make sure to add the `--external:react --external:react-dom` flags on the CLI. From 457022e4749279510820eb0dd81c64701caa4466 Mon Sep 17 00:00:00 2001 From: Paul Korzhyk Date: Wed, 20 Aug 2025 22:30:40 +0300 Subject: [PATCH 2/4] Fix new typo, remove unnecessary code --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b80d076..a611991 100644 --- a/README.md +++ b/README.md @@ -224,7 +224,7 @@ class Doodle(ipyreact.ValueWidget): import { MeditatingDoodle } from "https://esm.sh/react-open-doodles?external=react,react-dom"; import * as React from "react"; - export default ({value, setValue}) => ( + export default () => (
@@ -233,10 +233,9 @@ class Doodle(ipyreact.ValueWidget): Doodle() ``` - ### Import maps -The above examples have direct links to esm.sh, e.g. "https://esm.sh/canvas-confetti@1.6.0". Which means version and CDN information is mebedded in every component's code. +The above examples have direct links to esm.sh, e.g. "https://esm.sh/canvas-confetti@1.6.0". Which means version and CDN information is embedded in every component's code. To address this, we also support [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to write code more independant of where the modules come from. @@ -253,7 +252,6 @@ define_import_map({ }) ``` - Which means we can now write our ConfettiButton as: ```python From 0f13437d57ed68adc63a8809153e5beeb9c4bed8 Mon Sep 17 00:00:00 2001 From: Paul Korzhyk Date: Wed, 20 Aug 2025 23:12:04 +0300 Subject: [PATCH 3/4] fix wording about usage Co-authored-by: Maarten Breddels --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a611991..01e77a5 100644 --- a/README.md +++ b/README.md @@ -213,7 +213,7 @@ ipyreact.ValueWidget( ### Importing ReactJS based libraries -Imported libraries must require/import `react` and `react-dom` packages provided by `ipyreact`, otherwise things will break (see [FAQ](#faq)). +Imported libraries must use the `react` and `react-dom` packages provided by `ipyreact`, otherwise things will break (see [FAQ](#faq)). For esm.sh it can be achieved by adding `external=react,react-dom` to the URL: ```python From b933845ab94a92ada924bc97e3e28dadc504e82b Mon Sep 17 00:00:00 2001 From: Paul Korzhyk Date: Wed, 20 Aug 2025 23:13:42 +0300 Subject: [PATCH 4/4] make sure you -> make sure to --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 01e77a5..470e115 100644 --- a/README.md +++ b/README.md @@ -484,7 +484,7 @@ React render tree. For instance, if you see `"Cannot read properties of null (reading 'useReducer')"` it means that you are loading in your own ReactJS version. -If you use https://esh.sh, make sure you add `?external=react,react-dom` at the end of the url, so that your esm bundle doesn't include its own +If you use https://esh.sh, make sure to add `?external=react,react-dom` at the end of the url, so that your esm bundle doesn't include its own ReactJS version, but uses the one provided with ipyreact. If you make your own bundle using esbuild, make sure to add the `--external:react --external:react-dom` flags on the CLI.