ipyreact 0.4.0__tar.gz → 0.4.2__tar.gz

{ipyreact-0.4.0 → ipyreact-0.4.2}/.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.4.0
+current_version = 0.4.2
 commit = True
 tag = True
 message = chore: bump version {current_version} → {new_version}

ipyreact-0.4.2/.jupyterlite/requirements.txt

@@ -0,0 +1,4 @@
+jupyterlite
+jupyterlab
+ipyreact
+jupyterlite-pyodide-kernel

{ipyreact-0.4.0 → ipyreact-0.4.2}/PKG-INFO

@@ -1,6 +1,6 @@
-Metadata-Version: 2.1
+Metadata-Version: 2.3
 Name: ipyreact
-Version: 0.4.0
+Version: 0.4.2
 Summary: React for ipywidgets that just works
 Project-URL: Homepage, https://github.com/widgetti/ipyreact
 Author-email: "Maarten A. Breddels" <maartenbreddels@gmail.com>
@@ -293,11 +293,11 @@ define_import_map({
     "@mui/material": "https://esm.sh/@mui/material@5.11.10?external=react,react-dom",
     "@mui/material/": "https://esm.sh/@mui/material@5.11.10&external=react,react-dom/",
     "@mui/icons-material/": "https://esm.sh/@mui/icons-material/?external=react,react-dom",
-    "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0?external=react,react-dom",
+    "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0",
 })
 ```
 
-_Note that it is important to add `external=react,react-dom`, otherwise [esm.sh](https://esm.sh/#using-import-maps) would import ReactJS again_.
+_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:
 
@@ -414,7 +414,7 @@ import traitlets
 
 class Slider(ipyreact.ValueWidget):
     _esm = """
-
+    import * as React from "react";
     import {Slider} from "antd-minimal"
 
     export default ({value, setValue, ...rest}) => {
@@ -445,12 +445,19 @@ Test this out in the notebook:
 [![JupyterLight](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://widgetti.github.io/ipyreact/lab/?path=antd/antd.ipynb)
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/widgetti/ipyreact/HEAD?labpath=examples%2Fantd%2Fantd.ipynb)
 
+### Bundled ES modules for threejs
+
+See this notebook for a 3D WebGL threejs-fiber example
+
+[![JupyterLight](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://widgetti.github.io/ipyreact/lab/?path=threejs-fiber/threejs-fiber.ipynb)
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/widgetti/ipyreact/HEAD?labpath=examples%2Fthreejs-fiber%2Fthreejs-fiber.ipynb)
+
 ## Development Installation
 
 Create a dev environment:
 
 ```bash
-conda create -n ipyreact-dev -c conda-forge nodejs yarn python jupyterlab
+conda create -n ipyreact-dev -c conda-forge nodejs yarn python 'jupyterlab<4'
 conda activate ipyreact-dev
 ```
 
@@ -481,6 +488,11 @@ the `install` command every time that you rebuild your extension. For certain in
 you might also need another flag instead of `--sys-prefix`, but we won't cover the meaning
 of those flags here.
 
+## Binary data transport
+
+Binary data such as NumPy arrays, or Arrow data can be efficiently transported to the frontend.
+Props support object that support the buffer interface. See [this test as an example](https://github.com/widgetti/ipyreact/tree/master/tests/ui/serialize_test.py).
+
 ### How to see your changes
 
 #### Typescript:
@@ -500,3 +512,26 @@ After a change wait for the build to finish and then refresh your browser and th
 #### Python:
 
 If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
+
+# FAQ
+
+## Which version of React do you use.
+
+We currently only support React 18. Although we have some scaffolding in place to support different version, we do not have funding to support both.
+
+## Why does ipyreact provides React?
+
+If several ReactJS components need to be composed into a single React app, they need to share the same React context. This makes it possible
+for features such as React's [useContext](https://react.dev/reference/react/useContext) to work across the whole React tree.
+If every library brings its own React, they cannot communicate using this. Also, every child would need to be nested in its own `<div>`
+which can affect the layout of your application. When ipyreact provides React, we can build a true ReactJS application with a normal/true
+React render tree.
+
+## I get a React error
+
+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
+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.

{ipyreact-0.4.0 → ipyreact-0.4.2}/README.md

@@ -226,11 +226,11 @@ define_import_map({
     "@mui/material": "https://esm.sh/@mui/material@5.11.10?external=react,react-dom",
     "@mui/material/": "https://esm.sh/@mui/material@5.11.10&external=react,react-dom/",
     "@mui/icons-material/": "https://esm.sh/@mui/icons-material/?external=react,react-dom",
-    "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0?external=react,react-dom",
+    "canvas-confetti": "https://esm.sh/canvas-confetti@1.6.0",
 })
 ```
 
-_Note that it is important to add `external=react,react-dom`, otherwise [esm.sh](https://esm.sh/#using-import-maps) would import ReactJS again_.
+_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:
 
@@ -347,7 +347,7 @@ import traitlets
 
 class Slider(ipyreact.ValueWidget):
     _esm = """
-
+    import * as React from "react";
     import {Slider} from "antd-minimal"
 
     export default ({value, setValue, ...rest}) => {
@@ -378,12 +378,19 @@ Test this out in the notebook:
 [![JupyterLight](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://widgetti.github.io/ipyreact/lab/?path=antd/antd.ipynb)
 [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/widgetti/ipyreact/HEAD?labpath=examples%2Fantd%2Fantd.ipynb)
 
+### Bundled ES modules for threejs
+
+See this notebook for a 3D WebGL threejs-fiber example
+
+[![JupyterLight](https://jupyterlite.rtfd.io/en/latest/_static/badge.svg)](https://widgetti.github.io/ipyreact/lab/?path=threejs-fiber/threejs-fiber.ipynb)
+[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/widgetti/ipyreact/HEAD?labpath=examples%2Fthreejs-fiber%2Fthreejs-fiber.ipynb)
+
 ## Development Installation
 
 Create a dev environment:
 
 ```bash
-conda create -n ipyreact-dev -c conda-forge nodejs yarn python jupyterlab
+conda create -n ipyreact-dev -c conda-forge nodejs yarn python 'jupyterlab<4'
 conda activate ipyreact-dev
 ```
 
@@ -414,6 +421,11 @@ the `install` command every time that you rebuild your extension. For certain in
 you might also need another flag instead of `--sys-prefix`, but we won't cover the meaning
 of those flags here.
 
+## Binary data transport
+
+Binary data such as NumPy arrays, or Arrow data can be efficiently transported to the frontend.
+Props support object that support the buffer interface. See [this test as an example](https://github.com/widgetti/ipyreact/tree/master/tests/ui/serialize_test.py).
+
 ### How to see your changes
 
 #### Typescript:
@@ -433,3 +445,26 @@ After a change wait for the build to finish and then refresh your browser and th
 #### Python:
 
 If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
+
+# FAQ
+
+## Which version of React do you use.
+
+We currently only support React 18. Although we have some scaffolding in place to support different version, we do not have funding to support both.
+
+## Why does ipyreact provides React?
+
+If several ReactJS components need to be composed into a single React app, they need to share the same React context. This makes it possible
+for features such as React's [useContext](https://react.dev/reference/react/useContext) to work across the whole React tree.
+If every library brings its own React, they cannot communicate using this. Also, every child would need to be nested in its own `<div>`
+which can affect the layout of your application. When ipyreact provides React, we can build a true ReactJS application with a normal/true
+React render tree.
+
+## I get a React error
+
+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
+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.

{ipyreact-0.4.0 → ipyreact-0.4.2}/examples/antd/antd.ipynb

@@ -33,6 +33,17 @@
     "Now we can define the module with a custom name (we call it antd-minimal)."
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ea16141d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%pip install -q ipyreact\n",
+    "# This line is needed for JupyterLite"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -97,7 +108,7 @@
     "\n",
     "class Slider(ipyreact.ValueWidget):\n",
     "    _esm = \"\"\"\n",
-    "    \n",
+    "    import * as React from \"react\";\n",
     "    import {Slider} from \"antd-minimal\"\n",
     "    \n",
     "    export default ({value, setValue, ...rest}) => {\n",
@@ -147,14 +158,6 @@
    "source": [
     "s.value = 10"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c09ae51b",
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {

{ipyreact-0.4.0 → ipyreact-0.4.2}/examples/full_tutorial.ipynb

@@ -776,11 +776,13 @@
     "    \"@mui/material\": \"https://esm.sh/@mui/material@5.11.10?external=react,react-dom\",\n",
     "    \"@mui/material/\": \"https://esm.sh/@mui/material@5.11.10&external=react,react-dom/\",\n",
     "    \"@mui/icons-material/\": \"https://esm.sh/@mui/icons-material/?external=react,react-dom\",\n",
-    "    \"canvas-confetti\": \"https://esm.sh/canvas-confetti@1.6.0?external=react,react-dom\",\n",
+    "    \"canvas-confetti\": \"https://esm.sh/canvas-confetti@1.6.0\",\n",
     "})\n",
     "\n",
     "```\n",
     "\n",
+    "_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_.\n",
+    "\n",
     "Which means we can now write our ConfettiButton as:\n"
    ]
   },
@@ -820,7 +822,8 @@
    "source": [
     "## Advanced\n",
     "\n",
-    " * [Bundled ES modules (ant design example)](./antd/antd.ipynb)"
+    " * [Bundled ES modules (ant design example)](./antd/antd.ipynb)\n",
+    " * [Bundled ES modules for threejs (3D WebGL threejs-fiber example)](./threejs-fiber/threejs-fiber.ipynb)"
    ]
   },
   {