{`v:${floatArray[0]}`}
15 | };
16 | """
17 |
18 |
19 | def test_material_ui(solara_test, assert_solara_snapshot, page_session: playwright.sync_api.Page):
20 | class SerializeTest(ipyreact.ReactWidget):
21 | _esm = code
22 |
23 | ar = np.array([42.0], dtype=np.float32)
24 | b = SerializeTest(props={"floatArrayDataView": memoryview(ar)})
25 | display(b)
26 |
27 | page_session.locator("text=42").wait_for()
28 |
--------------------------------------------------------------------------------
/tests/ui/event_test.py:
--------------------------------------------------------------------------------
1 | import playwright.sync_api
2 | import traitlets
3 | from IPython.display import display
4 |
5 | import ipyreact
6 |
7 |
8 | class ButtonWithHandler(ipyreact.ReactWidget):
9 | label = traitlets.Unicode("Click me").tag(sync=True)
10 | _esm = """
11 | import * as React from "react";
12 | export default function({on_click, label}) {
13 | return
16 | };
17 | """
18 |
19 | def event_on_click(self):
20 | self.label = "Clicked"
21 |
22 |
23 | def test_event(solara_test, page_session: playwright.sync_api.Page):
24 | b = ButtonWithHandler()
25 | display(b)
26 | button = page_session.locator(".event-button")
27 | button.click()
28 | page_session.locator(".event-button >> text=Clicked").wait_for()
29 | assert b.label == "Clicked"
30 |
--------------------------------------------------------------------------------
/docs/make.bat:
--------------------------------------------------------------------------------
1 | @ECHO OFF
2 |
3 | pushd %~dp0
4 |
5 | REM Command file for Sphinx documentation
6 |
7 | if "%SPHINXBUILD%" == "" (
8 | set SPHINXBUILD=sphinx-build
9 | )
10 | set SOURCEDIR=source
11 | set BUILDDIR=build
12 | set SPHINXPROJ=ipyreact
13 |
14 | if "%1" == "" goto help
15 |
16 | %SPHINXBUILD% >NUL 2>NUL
17 | if errorlevel 9009 (
18 | echo.
19 | echo.The 'sphinx-build' command was not found. Make sure you have Sphinx
20 | echo.installed, then set the SPHINXBUILD environment variable to point
21 | echo.to the full path of the 'sphinx-build' executable. Alternatively you
22 | echo.may add the Sphinx directory to PATH.
23 | echo.
24 | echo.If you don't have Sphinx installed, grab it from
25 | echo.http://sphinx-doc.org/
26 | exit /b 1
27 | )
28 |
29 | %SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS%
30 | goto end
31 |
32 | :help
33 | %SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS%
34 |
35 | :end
36 | popd
37 |
--------------------------------------------------------------------------------
/tests/ui/jupyter_test.py:
--------------------------------------------------------------------------------
1 | import playwright.sync_api
2 | from IPython.display import display
3 |
4 |
5 | def test_widget_ipyreact(ipywidgets_runner, page_session: playwright.sync_api.Page, assert_solara_snapshot):
6 | def kernel_code():
7 | import ipyreact
8 |
9 | class Counter(ipyreact.ReactWidget):
10 | _esm = """
11 | import * as React from "react";
12 |
13 | export default function({value, setValue, debug}) {
14 | return
17 | };"""
18 |
19 | c = Counter()
20 | display(c)
21 |
22 | ipywidgets_runner(kernel_code)
23 | counter = page_session.locator(".counter-widget")
24 | counter.click()
25 | page_session.locator("text=1 clicks").wait_for()
26 | assert_solara_snapshot(counter.screenshot())
27 |
--------------------------------------------------------------------------------
/src/__tests__/index.spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Jupyter Development Team.
2 | // Distributed under the terms of the Modified BSD License.
3 |
4 | // Add any needed widget imports here (or from controls)
5 | // import {} from '@jupyter-widgets/base';
6 |
7 | import { createTestModel } from "./utils";
8 |
9 | import { ExampleModel } from "..";
10 |
11 | describe("Example", () => {
12 | describe("ExampleModel", () => {
13 | it("should be createable", () => {
14 | const model = createTestModel(ExampleModel);
15 | expect(model).toBeInstanceOf(ExampleModel);
16 | expect(model.get("value")).toEqual("Hello World");
17 | });
18 |
19 | it("should be createable with a value", () => {
20 | const state = { value: "Foo Bar!" };
21 | const model = createTestModel(ExampleModel, state);
22 | expect(model).toBeInstanceOf(ExampleModel);
23 | expect(model.get("value")).toEqual("Foo Bar!");
24 | });
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/docs/source/develop-install.rst:
--------------------------------------------------------------------------------
1 |
2 | Developer install
3 | =================
4 |
5 |
6 | To install a developer version of ipyreact, you will first need to clone
7 | the repository::
8 |
9 | git clone https://github.com/\widgetti/ipyreact
10 | cd ipyreact
11 |
12 | Next, install it with a develop install using pip::
13 |
14 | pip install -e .
15 |
16 |
17 | If you are planning on working on the JS/frontend code, you should also do
18 | a link installation of the extension::
19 |
20 | jupyter nbextension install [--sys-prefix / --user / --system] --symlink --py ipyreact
21 |
22 | jupyter nbextension enable [--sys-prefix / --user / --system] --py ipyreact
23 |
24 | with the `appropriate flag`_. Or, if you are using Jupyterlab::
25 |
26 | jupyter labextension install .
27 |
28 |
29 | .. links
30 |
31 | .. _`appropriate flag`: https://jupyter-notebook.readthedocs.io/en/stable/extending/frontend_extensions.html#installing-and-enabling-extensions
32 |
--------------------------------------------------------------------------------
/ipyreact/nbextension/extension.js:
--------------------------------------------------------------------------------
1 | // Entry point for the notebook bundle containing custom model definitions.
2 | //
3 | define(function () {
4 | "use strict";
5 |
6 | window["requirejs"].config({
7 | map: {
8 | "*": {
9 | "@widgetti/jupyter-react": "nbextensions/jupyter-react/index",
10 | // 'jupyter-react16': 'nbextensions/ipyreact/index16',
11 | },
12 | },
13 | });
14 | // Export the required load_ipython_extension function
15 | return {
16 | load_ipython_extension: function () {
17 | require(["notebook/js/codecell"], function (codecell) {
18 | codecell.CodeCell.options_default.highlight_modes[
19 | "text/typescript-jsx"
20 | ] = { reg: [/^%%(ipy)?react/] };
21 | IPython.notebook.events.one("kernel_ready.Kernel", function () {
22 | IPython.notebook.get_cells().map(function (cell) {
23 | if (cell.cell_type == "code") {
24 | cell.auto_highlight();
25 | }
26 | });
27 | });
28 | });
29 | },
30 | };
31 | });
32 |
--------------------------------------------------------------------------------
/tests/ui/library_test.py:
--------------------------------------------------------------------------------
1 | import playwright.sync_api
2 | from IPython.display import display
3 |
4 | code = """
5 | import {Button} from '@mui/material';
6 | import * as React from "react";
7 |
8 | export default function({value, setValue, debug}) {
9 | return
12 | };
13 | """
14 |
15 |
16 | def test_material_ui(solara_test, assert_solara_snapshot, page_session: playwright.sync_api.Page):
17 | # this can be removed if solara adds support to ipyreact/ipyesm
18 | import ipyreact.importmap
19 |
20 | ipyreact.importmap._import_map_widget = None
21 | ipyreact.importmap._update_import_map()
22 |
23 | class Button(ipyreact.ReactWidget):
24 | _esm = code
25 |
26 | b = Button()
27 | display(b)
28 |
29 | button = page_session.locator("text=0 times")
30 | button.click()
31 | button = page_session.locator("text=1 times")
32 | button.wait_for()
33 | page_session.wait_for_timeout(300) # wait for animation
34 | assert_solara_snapshot(button.screenshot())
35 |
--------------------------------------------------------------------------------
/docs/source/installing.rst:
--------------------------------------------------------------------------------
1 |
2 | .. _installation:
3 |
4 | Installation
5 | ============
6 |
7 |
8 | The simplest way to install ipyreact is via pip::
9 |
10 | pip install ipyreact
11 |
12 | or via conda::
13 |
14 | conda install ipyreact
15 |
16 |
17 | If you installed via pip, and notebook version < 5.3, you will also have to
18 | install / configure the front-end extension as well. If you are using classic
19 | notebook (as opposed to Jupyterlab), run::
20 |
21 | jupyter nbextension install [--sys-prefix / --user / --system] --py ipyreact
22 |
23 | jupyter nbextension enable [--sys-prefix / --user / --system] --py ipyreact
24 |
25 | with the `appropriate flag`_. If you are using Jupyterlab, install the extension
26 | with::
27 |
28 | jupyter labextension install jupyter-react
29 |
30 | If you are installing using conda, these commands should be unnecessary, but If
31 | you need to run them the commands should be the same (just make sure you choose the
32 | `--sys-prefix` flag).
33 |
34 |
35 | .. links
36 |
37 | .. _`appropriate flag`: https://jupyter-notebook.readthedocs.io/en/stable/extending/frontend_extensions.html#installing-and-enabling-extensions
38 |
--------------------------------------------------------------------------------
/examples/children.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": null,
6 | "id": "a828d6c2",
7 | "metadata": {},
8 | "outputs": [],
9 | "source": [
10 | "import ipyreact\n",
11 | "import ipywidgets as widgets\n",
12 | "\n",
13 | "ipyreact.Widget(_type=\"div\", children=[\n",
14 | " \"normal text\",\n",
15 | " ipyreact.Widget(_type=\"button\", children=[\"nested react widgets\"]),\n",
16 | " widgets.FloatSlider(description=\"regular ipywidgets\")\n",
17 | "])"
18 | ]
19 | },
20 | {
21 | "cell_type": "code",
22 | "execution_count": null,
23 | "id": "6b9e745b",
24 | "metadata": {},
25 | "outputs": [],
26 | "source": []
27 | }
28 | ],
29 | "metadata": {
30 | "kernelspec": {
31 | "display_name": "Python 3 (ipykernel)",
32 | "language": "python",
33 | "name": "python3"
34 | },
35 | "language_info": {
36 | "codemirror_mode": {
37 | "name": "ipython",
38 | "version": 3
39 | },
40 | "file_extension": ".py",
41 | "mimetype": "text/x-python",
42 | "name": "python",
43 | "nbconvert_exporter": "python",
44 | "pygments_lexer": "ipython3",
45 | "version": "3.9.16"
46 | }
47 | },
48 | "nbformat": 4,
49 | "nbformat_minor": 5
50 | }
51 |
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Build the JupyterLite site
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request:
8 | branches:
9 | - "*"
10 |
11 | jobs:
12 | build:
13 | runs-on: ubuntu-latest
14 | steps:
15 | - name: Checkout
16 | uses: actions/checkout@v3
17 | - name: Setup Python
18 | uses: actions/setup-python@v4
19 | with:
20 | python-version: "3.10"
21 | - name: Install the dependencies
22 | run: |
23 | python -m pip install -r .jupyterlite/requirements.txt
24 | - name: Build the JupyterLite site
25 | run: |
26 | cp README.md examples
27 | jupyter lite build --contents examples --output-dir dist
28 | - name: Upload artifact
29 | uses: actions/upload-pages-artifact@v1
30 | with:
31 | path: ./dist
32 |
33 | deploy:
34 | needs: build
35 | if: github.ref == 'refs/heads/master'
36 | permissions:
37 | pages: write
38 | id-token: write
39 |
40 | environment:
41 | name: github-pages
42 | url: ${{ steps.deployment.outputs.page_url }}
43 |
44 | runs-on: ubuntu-latest
45 | steps:
46 | - name: Deploy to GitHub Pages
47 | id: deployment
48 | uses: actions/deploy-pages@v1
49 |
--------------------------------------------------------------------------------
/src/plugin.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Maarten A. Breddels
2 | // Distributed under the terms of the Modified BSD License.
3 |
4 | import { Application, IPlugin } from "@lumino/application";
5 |
6 | import { Widget } from "@lumino/widgets";
7 |
8 | import { IJupyterWidgetRegistry } from "@jupyter-widgets/base";
9 |
10 | import * as widgetExports from "./widget";
11 |
12 | import { MODULE_NAME, MODULE_VERSION } from "./version";
13 |
14 | const EXTENSION_ID = "@widgetti/jupyter-react:plugin";
15 |
16 | /**
17 | * The example plugin.
18 | */
19 | const examplePlugin: IPlugin\n",
47 | "
\n", 48 | " Is number even? {message} \n", 49 | "
\n",
50 | " };\"\"\"\n",
51 | "w = EvenOddWidget()\n",
52 | "w"
53 | ]
54 | },
55 | {
56 | "cell_type": "code",
57 | "execution_count": null,
58 | "id": "d52fbf41",
59 | "metadata": {},
60 | "outputs": [],
61 | "source": []
62 | }
63 | ],
64 | "metadata": {
65 | "kernelspec": {
66 | "display_name": "Python 3 (ipykernel)",
67 | "language": "python",
68 | "name": "python3"
69 | },
70 | "language_info": {
71 | "codemirror_mode": {
72 | "name": "ipython",
73 | "version": 3
74 | },
75 | "file_extension": ".py",
76 | "mimetype": "text/x-python",
77 | "name": "python",
78 | "nbconvert_exporter": "python",
79 | "pygments_lexer": "ipython3",
80 | "version": "3.9.16"
81 | }
82 | },
83 | "nbformat": 4,
84 | "nbformat_minor": 5
85 | }
86 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Byte-compiled / optimized / DLL files
2 | __pycache__/
3 | *.py[cod]
4 | *$py.class
5 |
6 | # C extensions
7 | *.so
8 |
9 | # Distribution / packaging
10 | .Python
11 | env/
12 | build/
13 | develop-eggs/
14 | dist/
15 | downloads/
16 | eggs/
17 | .eggs/
18 | lib/
19 | lib64/
20 | parts/
21 | sdist/
22 | var/
23 | *.egg-info/
24 | .installed.cfg
25 | *.egg
26 |
27 | # PyInstaller
28 | # Usually these files are written by a python script from a template
29 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
30 | *.manifest
31 | *.spec
32 |
33 | # Installer logs
34 | pip-log.txt
35 | pip-delete-this-directory.txt
36 |
37 | # Unit test / coverage reports
38 | htmlcov/
39 | .tox/
40 | .coverage
41 | .coverage.*
42 | .cache
43 | nosetests.xml
44 | coverage.xml
45 | *,cover
46 | .hypothesis/
47 |
48 | # Translations
49 | *.mo
50 | *.pot
51 |
52 | # Django stuff:
53 | *.log
54 | local_settings.py
55 |
56 | # Flask instance folder
57 | instance/
58 |
59 | # Scrapy stuff:
60 | .scrapy
61 |
62 | # Sphinx documentation
63 | docs/_build/
64 | docs/source/_static/embed-bundle.js
65 | docs/source/_static/embed-bundle.js.map
66 |
67 | # PyBuilder
68 | target/
69 |
70 | # IPython Notebook
71 | .ipynb_checkpoints
72 |
73 | # pyenv
74 | .python-version
75 |
76 | # celery beat schedule file
77 | celerybeat-schedule
78 |
79 | # dotenv
80 | .env
81 |
82 | # virtualenv
83 | venv/
84 | ENV/
85 |
86 | # Spyder project settings
87 | .spyderproject
88 |
89 | # Rope project settings
90 | .ropeproject
91 |
92 | # =========================
93 | # Operating System Files
94 | # =========================
95 |
96 | # OSX
97 | # =========================
98 |
99 | .DS_Store
100 | .AppleDouble
101 | .LSOverride
102 |
103 | # Thumbnails
104 | ._*
105 |
106 | # Files that might appear in the root of a volume
107 | .DocumentRevisions-V100
108 | .fseventsd
109 | .Spotlight-V100
110 | .TemporaryItems
111 | .Trashes
112 | .VolumeIcon.icns
113 |
114 | # Directories potentially created on remote AFP share
115 | .AppleDB
116 | .AppleDesktop
117 | Network Trash Folder
118 | Temporary Items
119 | .apdisk
120 |
121 | # Windows
122 | # =========================
123 |
124 | # Windows image file caches
125 | Thumbs.db
126 | ehthumbs.db
127 |
128 | # Folder config file
129 | Desktop.ini
130 |
131 | # Recycle Bin used on file shares
132 | $RECYCLE.BIN/
133 |
134 | # Windows Installer files
135 | *.cab
136 | *.msi
137 | *.msm
138 | *.msp
139 |
140 | # Windows shortcuts
141 | *.lnk
142 |
143 |
144 | # NPM
145 | # ----
146 |
147 | **/node_modules/
148 | ipyreact/nbextension/index.*
149 |
150 | # Coverage data
151 | # -------------
152 | **/coverage/
153 |
154 | # Packed lab extensions
155 | ipyreact/labextension
156 |
--------------------------------------------------------------------------------
/examples/events.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": null,
6 | "id": "a7ea28e1",
7 | "metadata": {},
8 | "outputs": [],
9 | "source": [
10 | "import ipyreact\n",
11 | "ipyreact.Widget(_type=\"button\", children=[\"click me\"], events={\"onClick\": print})"
12 | ]
13 | },
14 | {
15 | "cell_type": "code",
16 | "execution_count": null,
17 | "id": "83522980",
18 | "metadata": {},
19 | "outputs": [],
20 | "source": [
21 | "import ipyreact\n",
22 | "import traitlets\n",
23 | "\n",
24 | "class ButtonWithHandler(ipyreact.ReactWidget):\n",
25 | " # extra trait\n",
26 | " label = traitlets.Unicode(\"Click me\").tag(sync=True)\n",
27 | " _esm = \"\"\"\n",
28 | " import * as React from \"react\";\n",
29 | "\n",
30 | " export default function({on_click, on_pass_data, label}) {\n",
31 | " // make sure the arguments passed matches the\n",
32 | " // python function\n",
33 | " return \\\n",
34 | " \n", 48 | " Is number even? {message} \n", 49 | "
\n",
35 | " \n",
38 | " \n",
41 | "
\n",
42 | " };\n",
43 | " \"\"\"\n",
44 | " \n",
45 | " # all on_* methods are automatically available from the frontend\n",
46 | " # with the same name as a prop\n",
47 | " def event_on_click(self):\n",
48 | " self.label = \"Clicked\"\n",
49 | "\n",
50 | " # an optional argument can be passed\n",
51 | " # an optional third argument can contain buffers (not used here)\n",
52 | " def event_on_pass_data(self, data):\n",
53 | " print(data)\n",
54 | " self.label = f'Clicked \"Pass data\" at {data[\"x\"]},{data[\"y\"]} when label was {data[\"label\"]}'\n",
55 | " \n",
56 | "b = ButtonWithHandler(debug=True)\n",
57 | "b"
58 | ]
59 | },
60 | {
61 | "cell_type": "code",
62 | "execution_count": null,
63 | "id": "b09c0518",
64 | "metadata": {},
65 | "outputs": [],
66 | "source": []
67 | }
68 | ],
69 | "metadata": {
70 | "dca-init": true,
71 | "kernelspec": {
72 | "display_name": "Python 3 (ipykernel)",
73 | "language": "python",
74 | "name": "python3"
75 | },
76 | "language_info": {
77 | "codemirror_mode": {
78 | "name": "ipython",
79 | "version": 3
80 | },
81 | "file_extension": ".py",
82 | "mimetype": "text/x-python",
83 | "name": "python",
84 | "nbconvert_exporter": "python",
85 | "pygments_lexer": "ipython3",
86 | "version": "3.9.16"
87 | }
88 | },
89 | "nbformat": 4,
90 | "nbformat_minor": 5
91 | }
92 |
--------------------------------------------------------------------------------
/src/__tests__/utils.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Jupyter Development Team.
2 | // Distributed under the terms of the Modified BSD License.
3 |
4 | import * as widgets from "@jupyter-widgets/base";
5 | import * as baseManager from "@jupyter-widgets/base-manager";
6 | import * as services from "@jupyterlab/services";
7 |
8 | let numComms = 0;
9 |
10 | export class MockComm implements widgets.IClassicComm {
11 | constructor() {
12 | this.comm_id = `mock-comm-id-${numComms}`;
13 | numComms += 1;
14 | }
15 | on_close(fn: ((x?: any) => void) | null): void {
16 | this._on_close = fn;
17 | }
18 | on_msg(fn: (x?: any) => void): void {
19 | this._on_msg = fn;
20 | }
21 | _process_msg(msg: services.KernelMessage.ICommMsgMsg): void | Promise
27 |
32 | );
33 | }
34 | // @ts-ignore
35 | return this.props.children;
36 | }
37 | }
38 |
39 | export function JupyterWidget({
40 | widget,
41 | view,
42 | }: {
43 | widget: WidgetModel;
44 | view: DOMWidgetView;
45 | }) {
46 | const [element, setElement] = React.useStateError
;{error}
28 |
31 | widget placeholder
;
104 | }
105 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { transform } from "sucrase";
2 |
3 | const muiStyleFix = `
4 | // This is a specific 'fix' for the notebook only, since its fontsize is non-16
5 | import React from 'react';
6 | // import PropTypes from 'prop-types';
7 | // import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
8 | import Typography from '@mui/material/Typography';
9 | import { createTheme, ThemeProvider } from '@mui/material/styles';
10 |
11 | const theme = createTheme({
12 | typography: {
13 | // Tell Material-UI what the font-size on the html element is.
14 | htmlFontSize: 10,
15 | useNextVariants: true,
16 | },
17 | });
18 |
19 | function FontSizeTheme({ children }) {
20 | return (
21 | `
460 | which can affect the layout of your application. When ipyreact provides React, we can build a true ReactJS application with a normal/true
461 | React render tree.
462 |
463 | ## I get a React error
464 |
465 | For instance, if you see `"Cannot read properties of null (reading 'useReducer')"` it means that you are loading in your own ReactJS version.
466 |
467 | 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
468 | ReactJS version, but uses the one provided with ipyreact.
469 |
470 | If you make your own bundle using esbuild, make sure to add the `--external:react --external:react-dom` flags on the CLI.
471 |
--------------------------------------------------------------------------------
/src/widget.tsx:
--------------------------------------------------------------------------------
1 | // Copyright (c) Maarten A. Breddels
2 | // Distributed under the terms of the Modified BSD License.
3 |
4 | import {
5 | WidgetModel,
6 | DOMWidgetModel,
7 | DOMWidgetView,
8 | ISerializers,
9 | unpack_models,
10 | } from "@jupyter-widgets/base";
11 |
12 | import * as React from "react";
13 | import { useEffect, useState } from "react";
14 | import * as ReactJsxRuntime from "react/jsx-runtime";
15 | import * as ReactReconcilerContants from "react-reconciler/constants";
16 | import * as ReactReconciler from "react-reconciler";
17 | import * as ReactDOM from "react-dom";
18 | // @ts-ignore
19 | import * as ReactDOMClient from "react-dom/client";
20 | // @ts-ignore
21 | import "../css/widget.css";
22 | import { eventToObject, expose, loadScript, setUpMuiFixModule } from "./utils";
23 | import { MODULE_NAME, MODULE_VERSION } from "./version";
24 | // import * as Babel from '@babel/standalone';
25 | // TODO: find a way to ship es-module-shims with the widget
26 | // @ts-ignore
27 | // import 'es-module-shims';
28 | import { transform } from "sucrase";
29 | import { ErrorBoundary, JupyterWidget } from "./components";
30 | import { Root } from "react-dom/client";
31 | import { ModelDestroyOptions } from "backbone";
32 | import { isEqual } from "lodash";
33 |
34 | declare function importShim(
35 | specifier: string,
36 | parentUrl?: string,
37 | ): Promise<{ default: Default } & Exports>;
38 |
39 | declare namespace importShim {
40 | const resolve: (id: string, parentURL?: string) => string;
41 | const addImportMap: (importMap: Partial) => void;
42 | const getImportMap: () => any;
43 | }
44 |
45 | const moduleFunctions: any = {};
46 | const modules: any = {};
47 |
48 | function provideModule(moduleName: string, module: any) {
49 | if (module instanceof Error) {
50 | if (moduleFunctions[moduleName]) {
51 | moduleFunctions[moduleName].reject(module);
52 | } else {
53 | modules[moduleName] = Promise.reject(module);
54 | }
55 | } else {
56 | if (moduleFunctions[moduleName]) {
57 | moduleFunctions[moduleName].resolve(module);
58 | } else {
59 | modules[moduleName] = Promise.resolve(module);
60 | }
61 | }
62 | }
63 |
64 | function requestModule(moduleName: string) {
65 | if (!modules[moduleName]) {
66 | modules[moduleName] = new Promise((resolve, reject) => {
67 | moduleFunctions[moduleName] = { resolve, reject };
68 | });
69 | }
70 | return modules[moduleName];
71 | }
72 |
73 | let importMapConfigurationResolver: any = null;
74 | let importMapConfigurationPromise: any = null;
75 |
76 | function provideImportMapConfiguration() {
77 | if (importMapConfigurationResolver) {
78 | importMapConfigurationResolver();
79 | } else {
80 | importMapConfigurationPromise = Promise.resolve();
81 | }
82 | }
83 |
84 | function requestImportMapConfiguration() {
85 | if (!importMapConfigurationPromise) {
86 | importMapConfigurationPromise = new Promise((resolve) => {
87 | importMapConfigurationResolver = resolve;
88 | });
89 | }
90 | }
91 |
92 | // @ts-ignore
93 | // const react16Code = require('!!raw-loader!./react16.js');
94 | // import react16Code from 'raw-loader!./react16.mjs';
95 | // console.log(react16Code)
96 |
97 | // this will do for now
98 | let importShimLoaded: any = null;
99 | async function ensureImportShimLoaded() {
100 | if (importShimLoaded == null) {
101 | importShimLoaded = loadScript(
102 | "module",
103 | "https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js",
104 | );
105 | }
106 | return await importShimLoaded;
107 | }
108 |
109 | // function autoExternalReactResolve(
110 | // id: string,
111 | // parentUrl: string,
112 | // resolve: (arg0: any, arg1: any) => any,
113 | // ) {
114 | // const shipsWith =
115 | // id == "react" ||
116 | // id == "react-dom" ||
117 | // id == "react/jsx-runtime" ||
118 | // id == "react-dom/client" ||
119 | // id == "react-reconciler" ||
120 | // id == "react-reconciler/constants";
121 | // const alreadyPatched = parentUrl.includes("?external=react,react-dom");
122 | // const parentIsEsmSh = parentUrl.startsWith("https://esm.sh/");
123 | // const isBlob = id.startsWith("blob:");
124 | // if (!shipsWith && !id.includes("://") && !parentIsEsmSh) {
125 | // id = "https://esm.sh/" + id;
126 | // }
127 | // if (!shipsWith && !alreadyPatched && !isBlob) {
128 | // id = id + "?external=react,react-dom";
129 | // }
130 | // return resolve(id, parentUrl);
131 | // }
132 |
133 | // @ts-ignore
134 | window.esmsInitOptions = {
135 | shimMode: true,
136 | mapOverrides: true,
137 | // resolve: (
138 | // id: string,
139 | // parentUrl: string,
140 | // resolve: (id: string, parentUrl: string) => any,
141 | // ) => autoExternalReactResolve(id, parentUrl, resolve),
142 | };
143 |
144 | let react18ESMUrls: any = null;
145 | let react16ESMUrls: any = null;
146 |
147 | function ensureReactSetup(version: number) {
148 | if (version == 18) {
149 | if (react18ESMUrls == null) {
150 | react18ESMUrls = {
151 | react: expose(React),
152 | "react-dom": expose(ReactDOM),
153 | "react/jsx-runtime": expose(ReactJsxRuntime),
154 | "react-dom/client": expose(ReactDOMClient),
155 | "react-reconciler": expose(ReactReconciler),
156 | "react-reconciler/constants": expose(ReactReconcilerContants),
157 | };
158 | }
159 | return react18ESMUrls;
160 | } else if (version == 16) {
161 | if (react16ESMUrls == null) {
162 | // react16ESMUrls = {urlReact: expose(React16), urlReactDom: expose(ReactDOM16)};
163 | }
164 | return react16ESMUrls;
165 | }
166 | }
167 |
168 | class ComponentData {
169 | component: any;
170 | key: string;
171 |
172 | constructor(component: any, key: string) {
173 | this.component = component;
174 | this.key = key;
175 | }
176 |
177 | asElement(view: DOMWidgetView) {
178 | return React.createElement(this.component, { view, key: this.key });
179 | }
180 | }
181 |
182 | const widgetToReactComponent = async (widget: WidgetModel) => {
183 | if (widget instanceof ReactModel) {
184 | return new ComponentData(await widget.component, widget.model_id);
185 | } else {
186 | return new ComponentData(
187 | ({ view }: { view: DOMWidgetView }) => JupyterWidget({ widget, view }),
188 | widget.model_id,
189 | );
190 | }
191 | };
192 |
193 | const isPlainObject = (value: any) =>
194 | value && [undefined, Object].includes(value.constructor);
195 |
196 | const entriesToObj = (acc: any, [key, value]: any[]) => {
197 | acc[key] = value;
198 | return acc;
199 | };
200 |
201 | async function replaceWidgetWithComponent(
202 | data: any,
203 | get_model: (model_id: string) => Promise,
204 | ): Promise {
205 | const type = typeof data;
206 | if (type === "string" && data.startsWith("IPY_MODEL_")) {
207 | const modelId = data.substring("IPY_MODEL_".length);
208 | const model = await get_model(modelId);
209 | return widgetToReactComponent(model);
210 | }
211 | if (
212 | ["string", "number", "boolean", "bigint"].includes(type) ||
213 | data == null
214 | ) {
215 | return data;
216 | }
217 | if (data instanceof WidgetModel) {
218 | return widgetToReactComponent(data);
219 | }
220 | if (Array.isArray(data)) {
221 | return Promise.all(
222 | data.map(async (d) => replaceWidgetWithComponent(d, get_model)),
223 | );
224 | }
225 | if (isPlainObject(data)) {
226 | return (
227 | await Promise.all(
228 | Object.entries(data).map(async ([key, value]) => [
229 | key,
230 | await replaceWidgetWithComponent(value, get_model),
231 | ]),
232 | )
233 | ).reduce(entriesToObj, {});
234 | }
235 | return data;
236 | }
237 |
238 | function replaceComponentWithElement(data: any, view: DOMWidgetView): any {
239 | const type = typeof data;
240 | if (
241 | ["string", "number", "boolean", "bigint"].includes(type) ||
242 | data == null
243 | ) {
244 | return data;
245 | }
246 | if (data instanceof ComponentData) {
247 | return data.asElement(view);
248 | }
249 | if (Array.isArray(data)) {
250 | return data.map((d) => replaceComponentWithElement(d, view));
251 | }
252 | if (isPlainObject(data)) {
253 | const entriesToObj = (acc: any, [key, value]: any[]) => {
254 | acc[key] = value;
255 | return acc;
256 | };
257 | return Object.entries(data)
258 | .map(([key, value]) => [key, replaceComponentWithElement(value, view)])
259 | .reduce(entriesToObj, {});
260 | }
261 | return data;
262 | }
263 |
264 | export class Module extends WidgetModel {
265 | defaults() {
266 | return {
267 | ...super.defaults(),
268 | _model_name: Module.model_name,
269 | _model_module: Module.model_module,
270 | _model_module_version: Module.model_module_version,
271 | _view_name: Module.view_name,
272 | _view_module: Module.view_module,
273 | _view_module_version: Module.view_module_version,
274 | };
275 | }
276 | initialize(attributes: any, options: any): void {
277 | super.initialize(attributes, options);
278 | this.addModule();
279 | }
280 | destroy(options?: any): any {
281 | if (this.codeUrl) {
282 | URL.revokeObjectURL(this.codeUrl);
283 | }
284 | return super.destroy(options);
285 | }
286 | async updateImportMap() {
287 | await ensureImportShimLoaded();
288 | await requestImportMapConfiguration();
289 | const reactImportMap = ensureReactSetup(this.get("react_version"));
290 | const importMap = {
291 | imports: {
292 | ...reactImportMap,
293 | },
294 | };
295 | importShim.addImportMap(importMap);
296 | }
297 | async addModule() {
298 | const code = this.get("code");
299 | let name = this.get("name");
300 | try {
301 | if (this.codeUrl) {
302 | URL.revokeObjectURL(this.codeUrl);
303 | }
304 | this.codeUrl = URL.createObjectURL(
305 | new Blob([code], { type: "text/javascript" }),
306 | );
307 | let dependencies = this.get("dependencies") || [];
308 | this.set(
309 | "status",
310 | "Waiting for dependencies: " + dependencies.join(", "),
311 | );
312 | await Promise.all(dependencies.map((x: any) => requestModule(x)));
313 | await ensureImportShimLoaded();
314 | await this.updateImportMap();
315 | this.set("status", "Loading module...");
316 | let module = await importShim(this.codeUrl);
317 | importShim.addImportMap({ imports: { [name]: this.codeUrl } });
318 | this.set("status", "Loaded module!");
319 | provideModule(name, module);
320 | } catch (e) {
321 | console.error(e);
322 | provideModule(name, e);
323 | this.set("status", "Error loading module: " + e);
324 | }
325 | }
326 |
327 | static model_name = "Module";
328 | static model_module = MODULE_NAME;
329 | static model_module_version = MODULE_VERSION;
330 | static view_name = "ModuleView"; // Set to null if no view
331 | static view_module = MODULE_NAME; // Set to null if no view
332 | static view_module_version = MODULE_VERSION;
333 | private codeUrl: string | null;
334 | }
335 |
336 | export class ModuleView extends DOMWidgetView {
337 | private root: Root | null = null;
338 |
339 | async render() {
340 | this.el.classList.add("jupyter-react-widget");
341 | this.root = ReactDOMClient.createRoot(this.el);
342 | const Component = () => {
343 | const [status, setStatus] = useState(this.model.get("status"));
344 | useEffect(() => {
345 | this.listenTo(this.model, "change:status", () => {
346 | setStatus(this.model.get("status"));
347 | });
348 | return () => {
349 | this.stopListening(this.model, "change:status");
350 | };
351 | }, []);
352 | const name = this.model.get("name");
353 | return (
354 | ) {
491 | // this makes sure that callbacks and _initialSetup are executed in order
492 | // and not in parallel, which can lead to race conditions
493 | this.queue = this.queue.then(async () => {
494 | await fn();
495 | });
496 | return this.queue;
497 | }
498 | async _initialSetup() {
499 | await this.enqueue(async () => {
500 | await this.updateImportMap();
501 | this.compileCode();
502 | try {
503 | let component: any = await this.createWrapperComponent();
504 | this.resolveComponent(component);
505 | } catch (e) {
506 | console.error(e);
507 | this.rejectComponent(e);
508 | }
509 | });
510 | // await this.createComponen();
511 | }
512 | async updateImportMap() {
513 | await ensureImportShimLoaded();
514 | await requestImportMapConfiguration();
515 | const reactImportMap = ensureReactSetup(this.get("_react_version"));
516 | const importMap = {
517 | imports: {
518 | ...reactImportMap,
519 | },
520 | };
521 | importShim.addImportMap(importMap);
522 | }
523 | compileCode() {
524 | // using babel is a bit of an art, so leaving this code for if we
525 | // want to switch back to babel. However, babel is very large compared
526 | // to sucrase
527 | // Babel.registerPreset("my-preset", {
528 | // presets: [
529 | // [Babel.availablePresets["react"]],
530 | // // [Babel.availablePresets["typescript"], { allExtensions: true }],
531 | // ]
532 | // });
533 | // Babel.registerPlugin("importmap", pluginImport());
534 | const code = this.get("_esm");
535 | this.compileError = null;
536 | if (!code) {
537 | this.compiledCode = null;
538 | return;
539 | }
540 | if (this.get("_debug")) {
541 | console.log("original code:\n", code);
542 | }
543 | try {
544 | // using babel:
545 | // return Babel.transform(code, { presets: ["react", "es2017"], plugins: ["importmap"] }).code;
546 | // using sucrase:
547 | this.compiledCode = transform(code, {
548 | transforms: ["jsx", "typescript"],
549 | filePath: "test.tsx",
550 | }).code;
551 | if (this.get("_debug")) {
552 | console.log("compiledCode:\n", this.compiledCode);
553 | }
554 | } catch (e) {
555 | console.error(e);
556 | this.compileError = e;
557 | }
558 | }
559 | async updateComponentToWrap() {
560 | try {
561 | let component: any = await this.createComponentToWrap();
562 | this.currentComponentToWrapOrError = component;
563 | this.trigger("component", component);
564 | } catch (e) {
565 | console.error(e);
566 | this.trigger("component", e);
567 | }
568 | }
569 | async createComponentToWrap() {
570 | let moduleName = this.get("_module");
571 | let type = this.get("_type");
572 | let _dependencies = this.get("_dependencies") || [];
573 | await Promise.all(_dependencies.map((x: any) => requestModule(x)));
574 | if (this.compileError) {
575 | return () => ;
836 | private resolveComponent: (value: any) => void;
837 | private rejectComponent: (value: any) => void;
838 | private compiledCode: string | null = null;
839 | private compileError: any | null = null;
840 | private codeUrl: string | null = null;
841 | // this used so that the WrapperComponent can be rendered synchronously,
842 | private currentComponentToWrapOrError: any = null;
843 | private queue: Promise;
844 |
845 | static model_name = "ReactModel";
846 | static model_module = MODULE_NAME;
847 | static model_module_version = MODULE_VERSION;
848 | static view_name = "ReactView"; // Set to null if no view
849 | static view_module = MODULE_NAME; // Set to null if no view
850 | static view_module_version = MODULE_VERSION;
851 | }
852 |
853 | export class ReactView extends DOMWidgetView {
854 | private root: Root | null = null;
855 |
856 | async render() {
857 | this.el.classList.add("jupyter-react-widget");
858 | // using babel is a bit of an art, so leaving this code for if we
859 | this.root = ReactDOMClient.createRoot(this.el);
860 | const Component: any = await (this.model as ReactModel).component;
861 | this.root.render(
862 |
863 | ,
865 | );
866 | }
867 |
868 | remove() {
869 | this.root?.unmount();
870 | }
871 | }
872 |
--------------------------------------------------------------------------------
/examples/full_tutorial.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "id": "d8ec9a76-0819-463d-8955-55789ee36400",
6 | "metadata": {},
7 | "source": [
8 | "# Ipyreact walkthrough"
9 | ]
10 | },
11 | {
12 | "cell_type": "markdown",
13 | "id": "083f2dc7-c0ec-482f-a720-aa2896ad193e",
14 | "metadata": {
15 | "tags": []
16 | },
17 | "source": [
18 | "Welcome to this ipyreact walkthrough! \n",
19 | "The tutorial will be based on a very simple react button to show all the ipyreact features. \n",
20 | "\n",
21 | "**Content** \n",
22 | "* use the %react cell magic\n",
23 | "* write a widget\n",
24 | "* style this with CSS\n",
25 | "* add parameters to your widgets (traitlets)\n",
26 | "* interact with these parameters\n",
27 | "* simple traitlet oberservation using `change`\n",
28 | "* observe a traitlet and call python function\n",
29 | "* observe a traitlet and call JavaScript function\n",
30 | "* call python functions from JavaScript\n",
31 | "* loading components from external files\n",
32 | "* enable hot reloading \n",
33 | "* enable autocompletion in IDEs\n",
34 | "* print a message at class initialization"
35 | ]
36 | },
37 | {
38 | "cell_type": "markdown",
39 | "id": "06cb067d-0aea-4851-827d-d07f22466693",
40 | "metadata": {},
41 | "source": [
42 | "First, we will use the **`%react` magic** from ipyreact. \n",
43 | "The following line registers the cellmagic:"
44 | ]
45 | },
46 | {
47 | "cell_type": "code",
48 | "execution_count": null,
49 | "id": "de17b188",
50 | "metadata": {
51 | "scrolled": true
52 | },
53 | "outputs": [],
54 | "source": [
55 | "%pip install -q ipyreact\n",
56 | "# This line is for JupyterLite (if this takes more than 10 seconds, something probably hung, restart the kernel and run this cell again)"
57 | ]
58 | },
59 | {
60 | "cell_type": "code",
61 | "execution_count": null,
62 | "id": "8d85f911",
63 | "metadata": {},
64 | "outputs": [],
65 | "source": [
66 | "%load_ext ipyreact"
67 | ]
68 | },
69 | {
70 | "cell_type": "code",
71 | "execution_count": null,
72 | "id": "c70f7253-98d5-4131-bf6b-1ac3433e2985",
73 | "metadata": {
74 | "tags": []
75 | },
76 | "outputs": [],
77 | "source": [
78 | "%%react\n",
79 | "\n",
80 | "import * as React from \"react\";\n",
81 | "\n",
82 | "export default function MyButton() {\n",
83 | " return ( < button > X < /button>);\n",
84 | "}"
85 | ]
86 | },
87 | {
88 | "cell_type": "markdown",
89 | "id": "4b51d34f-8abc-4b7b-936e-6d582a1b64fe",
90 | "metadata": {},
91 | "source": [
92 | "Great, here we can see react code rendering in the jupyter notebook! \n",
93 | "Next, we **convert this into a widget.** \n",
94 | "For that, we need the code in a `_esm` string inside a class that inherits from `ipyreact.Widget`. \n",
95 | "`esm` is short for for EcmaScript module, and thats standard for structuring JavaScript code in reusable components."
96 | ]
97 | },
98 | {
99 | "cell_type": "code",
100 | "execution_count": null,
101 | "id": "7c70385c-638e-482b-80e1-6f27614da867",
102 | "metadata": {
103 | "tags": []
104 | },
105 | "outputs": [],
106 | "source": [
107 | "import ipyreact\n",
108 | "\n",
109 | "class MyExampleWidget(ipyreact.Widget):\n",
110 | " _esm = \"\"\"\n",
111 | " import * as React from \"react\";\n",
112 | "\n",
113 | " export default function MyButton() {\n",
114 | " return \n",
872 | " );\n",
873 | " }\"\"\"\n",
874 | "MyExampleWidget(my_width=300)"
875 | ]
876 | },
877 | {
878 | "cell_type": "markdown",
879 | "id": "38cfce36",
880 | "metadata": {},
881 | "source": [
882 | "And this screenshots shows that autocompletion works now: \n",
883 | "![](\"autocomplete_screenshot.png\")
"
884 | ]
885 | },
886 | {
887 | "cell_type": "markdown",
888 | "id": "bae77944-e0dd-49c4-bd27-b401d7bbef1b",
889 | "metadata": {},
890 | "source": [
891 | "Now we want to **print a message at class initialization** that says \"Button was initialized with width 300px!\" \n",
892 | "That is possible with the following code pattern using calling the `super` method."
893 | ]
894 | },
895 | {
896 | "cell_type": "code",
897 | "execution_count": null,
898 | "id": "124771ca-8271-4b5e-9f5d-ee792442665b",
899 | "metadata": {
900 | "tags": []
901 | },
902 | "outputs": [],
903 | "source": [
904 | "import ipyreact\n",
905 | "from traitlets import Int, signature_has_traits\n",
906 | "\n",
907 | "# 🪄🪄🪄 this is an advanced example, feel free to skip 🪄🪄🪄\n",
908 | "\n",
909 | "@signature_has_traits\n",
910 | "class MyExampleWidget(ipyreact.Widget):\n",
911 | " def __init__(self, **kwargs):\n",
912 | " super().__init__(**kwargs)\n",
913 | " self.print_welcome_message()\n",
914 | "\n",
915 | " def print_welcome_message(self):\n",
916 | " print(f\"Button was initilized with width of {self.my_width}px \")\n",
917 | "\n",
918 | " my_width = Int(23).tag(sync=True)\n",
919 | "\n",
920 | " _esm = \"\"\"\n",
921 | " import * as React from \"react\";\n",
922 | "\n",
923 | " export default function MyButton({ my_width }) {\n",
924 | " return (\n",
925 | " \n",
932 | " {\" \"}\n",
933 | " Width of {my_width} px{\" \"}\n",
934 | " \n",
935 | " );\n",
936 | " }\"\"\"\n",
937 | "\n",
938 | "MyExampleWidget(my_width=200)"
939 | ]
940 | }
941 | ],
942 | "metadata": {
943 | "kernelspec": {
944 | "display_name": "Python 3 (ipykernel)",
945 | "language": "python",
946 | "name": "python3"
947 | },
948 | "language_info": {
949 | "codemirror_mode": {
950 | "name": "ipython",
951 | "version": 3
952 | },
953 | "file_extension": ".py",
954 | "mimetype": "text/x-python",
955 | "name": "python",
956 | "nbconvert_exporter": "python",
957 | "pygments_lexer": "ipython3",
958 | "version": "3.9.16"
959 | }
960 | },
961 | "nbformat": 4,
962 | "nbformat_minor": 5
963 | }
964 |
--------------------------------------------------------------------------------
355 | {name} status: {status}
356 |
357 | );
358 | };
359 | this.root.render(
436 | importmap:
437 | {importMapJson}
438 |
439 | );
440 | };
441 | this.root.render({this.compileError.message};
576 | } else {
577 | let module: any = null;
578 | // html element like div or button
579 | if (!moduleName && !this.compiledCode && type) {
580 | return type;
581 | }
582 |
583 | if (!this.compiledCode && !moduleName && !type) {
584 | return () => (
585 | no component provided, pass _esm, or _module and _type
586 | );
587 | } else if (this.compiledCode) {
588 | if (this.codeUrl) {
589 | URL.revokeObjectURL(this.codeUrl);
590 | }
591 | this.codeUrl = URL.createObjectURL(
592 | new Blob([this.compiledCode], { type: "text/javascript" }),
593 | );
594 | module = await importShim(this.codeUrl);
595 | if (!module) {
596 | throw new Error(`Error loading module`);
597 | }
598 | } else {
599 | module = await importShim(moduleName);
600 | if (!module) {
601 | throw new Error(`no module found with name ${moduleName}`);
602 | }
603 | }
604 | let component = module[type || "default"];
605 | if (!component) {
606 | if (type) {
607 | throw new Error(`no component ${type} found in module ${moduleName}`);
608 | } else {
609 | throw new Error(`
610 | no component found in module ${moduleName} (it should be exported as default)`);
611 | }
612 | } else {
613 | if (this.compiledCode) {
614 | const needsMuiFix = this.compiledCode.indexOf("@mui") !== -1;
615 | if (needsMuiFix) {
616 | let muiFix = await setUpMuiFixModule();
617 | const componentToWrap = component;
618 | // console.log("muiFix", muiFix);
619 | // @ts-ignore
620 | component = (props: any) => {
621 | // console.log("component wrapper fix", props)
622 | // return componentToWrap(props);
623 | return muiFix.styleWrapper(componentToWrap(props));
624 | };
625 | }
626 | }
627 | return component;
628 | }
629 | }
630 | }
631 | async createWrapperComponent() {
632 | // we wrap the component in a wrapper that puts in all the props from the
633 | // widget model, and handles events, etc
634 |
635 | const get_model = this.widget_manager.get_model.bind(this.widget_manager);
636 | let initialChildrenComponents = await replaceWidgetWithComponent(
637 | { children: this.get("children") },
638 | get_model,
639 | );
640 | // const resolveFormatters = async () => {
641 | // let formatterDict = this.get("formatters") || {};
642 | // let formatterModules : any = {};
643 | // for (const key of Object.keys(formatterDict)) {
644 | // // @ts-ignore
645 | // let module = await importShim(formatterDict[key]);
646 | // formatterModules[key] = module;
647 | // }
648 | // return formatterModules;
649 | // }
650 |
651 | // let formatterModules = await resolveFormatters();
652 | // console.log("formatterModules", formatterModules);
653 | const initialModelProps = await replaceWidgetWithComponent(
654 | this.get("props"),
655 | get_model,
656 | );
657 | try {
658 | this.currentComponentToWrapOrError = await this.createComponentToWrap();
659 | } catch (e) {
660 | this.currentComponentToWrapOrError = e;
661 | }
662 |
663 | const isSpecialProp = (key: string) => {
664 | const specialProps = [
665 | "children",
666 | "props",
667 | "tabbable",
668 | "layout",
669 | "tooltip",
670 | ];
671 | if (specialProps.find((x) => x === key)) {
672 | return true;
673 | }
674 | if (key.startsWith("_")) {
675 | return true;
676 | }
677 | return false;
678 | };
679 |
680 | const WrapperComponent = ({ view, ...parentProps }: { view: any }) => {
681 | const [component, setComponent] = useState(
682 | () => this.currentComponentToWrapOrError,
683 | );
684 | React.useEffect(() => {
685 | this.listenTo(this, "component", (component) => {
686 | console.log("set component", component);
687 | setComponent(() => component);
688 | });
689 | return () => {
690 | this.stopListening(this, "component");
691 | };
692 | }, []);
693 | const [childrenComponents, setChildrenComponents] = useState(
694 | initialChildrenComponents,
695 | );
696 | const updateChildren = () => {
697 | console.log("update children");
698 | this.enqueue(async () => {
699 | setChildrenComponents(
700 | await replaceWidgetWithComponent(
701 | { children: this.get("children") },
702 | get_model,
703 | ),
704 | );
705 | });
706 | };
707 | const [modelProps, setModelProps] = useState(initialModelProps);
708 | const updateModelProps = () => {
709 | this.enqueue(async () => {
710 | setModelProps(
711 | await replaceWidgetWithComponent(this.get("props"), get_model),
712 | );
713 | });
714 | };
715 | useEffect(() => {
716 | this.listenTo(this, "change:props", updateModelProps);
717 | this.listenTo(this, "change:children", updateChildren);
718 | for (const key of Object.keys(this.attributes)) {
719 | if (isSpecialProp(key)) {
720 | continue;
721 | }
722 | this.listenTo(this, `change:${key}`, updateChildren);
723 | }
724 | // If props or children were updated while we were initializing the view,
725 | // we want to do a rerender
726 | const checkPropsChange = async () => {
727 | const [currentProps, currentChildren] = await Promise.all([
728 | replaceWidgetWithComponent(this.get("props"), get_model),
729 | replaceWidgetWithComponent(
730 | { children: this.get("children") },
731 | get_model,
732 | ),
733 | ]);
734 | if (!isEqual(currentProps, initialModelProps)) {
735 | updateModelProps();
736 | }
737 | if (!isEqual(currentChildren, initialChildrenComponents)) {
738 | updateChildren();
739 | }
740 | };
741 | this.enqueue(checkPropsChange);
742 | return () => {
743 | this.stopListening(this, "change:props", updateModelProps);
744 | this.stopListening(this, "change:children", updateChildren);
745 | for (const key of Object.keys(this.attributes)) {
746 | if (isSpecialProp(key)) {
747 | continue;
748 | }
749 | this.stopListening(this, `change:${key}`, updateChildren);
750 | }
751 | };
752 | }, []);
753 | const events: any = {};
754 | for (const event_name of this.attributes["_event_names"]) {
755 | const handler = (value: any, buffers: any) => {
756 | if (buffers) {
757 | const validBuffers =
758 | buffers instanceof Array && buffers[0] instanceof ArrayBuffer;
759 | if (!validBuffers) {
760 | console.warn("second argument is not an BufferArray[View] array");
761 | buffers = undefined;
762 | }
763 | }
764 | const saveValue = eventToObject(value);
765 | console.log("sending", event_name, saveValue, view);
766 | this.send(
767 | { event_name, data: saveValue },
768 | this.callbacks(view),
769 | buffers,
770 | );
771 | };
772 | events[event_name] = handler;
773 | }
774 | // React.createElement('div', {"aria-activedescendant": "foo"}})
775 | //
776 | // for (const key of Object.keys(modelProps)) {
777 | // if(formatterModules[key]) {
778 | // modelProps[key] = formatterModules[key].py2js(modelProps[key]);
779 | // }
780 | // }
781 | // console.log("children", children);
782 | const childrenProps = replaceComponentWithElement(
783 | childrenComponents,
784 | view,
785 | );
786 | if (childrenProps.children && childrenProps.children.length === 1) {
787 | childrenProps.children = childrenProps.children[0];
788 | }
789 | // useEffect(() => {
790 | // // force render every 2 seconds
791 | // const interval = setInterval(() => {
792 | // forceRerender();
793 | // }, 2000);
794 | // return () => {
795 | // clearInterval(interval);
796 | // }
797 | // }, []);
798 | //const [r//]
799 | const backboneProps: any = {};
800 | for (const key of Object.keys(this.attributes)) {
801 | if (isSpecialProp(key)) {
802 | continue;
803 | }
804 | backboneProps[key] = this.get(key);
805 | backboneProps["set" + key.charAt(0).toUpperCase() + key.slice(1)] = (
806 | value: any,
807 | ) => {
808 | this.set(key, value);
809 | // this.touch();
810 | this.save_changes(this.callbacks(view));
811 | };
812 | }
813 |
814 | const props = {
815 | ...replaceComponentWithElement(modelProps, view),
816 | ...backboneProps,
817 | ...parentProps,
818 | ...events,
819 | ...childrenProps,
820 | };
821 |
822 | if (component instanceof Error) {
823 | throw component;
824 | }
825 | return React.createElement(component, props);
826 | };
827 | return WrapperComponent;
828 | }
829 | destroy(options?: ModelDestroyOptions | undefined): false | JQueryXHR {
830 | if (this.codeUrl) {
831 | URL.revokeObjectURL(this.codeUrl);
832 | }
833 | return super.destroy(options);
834 | }
835 | public component: Promise"
884 | ]
885 | },
886 | {
887 | "cell_type": "markdown",
888 | "id": "bae77944-e0dd-49c4-bd27-b401d7bbef1b",
889 | "metadata": {},
890 | "source": [
891 | "Now we want to **print a message at class initialization** that says \"Button was initialized with width 300px!\" \n",
892 | "That is possible with the following code pattern using calling the `super` method."
893 | ]
894 | },
895 | {
896 | "cell_type": "code",
897 | "execution_count": null,
898 | "id": "124771ca-8271-4b5e-9f5d-ee792442665b",
899 | "metadata": {
900 | "tags": []
901 | },
902 | "outputs": [],
903 | "source": [
904 | "import ipyreact\n",
905 | "from traitlets import Int, signature_has_traits\n",
906 | "\n",
907 | "# 🪄🪄🪄 this is an advanced example, feel free to skip 🪄🪄🪄\n",
908 | "\n",
909 | "@signature_has_traits\n",
910 | "class MyExampleWidget(ipyreact.Widget):\n",
911 | " def __init__(self, **kwargs):\n",
912 | " super().__init__(**kwargs)\n",
913 | " self.print_welcome_message()\n",
914 | "\n",
915 | " def print_welcome_message(self):\n",
916 | " print(f\"Button was initilized with width of {self.my_width}px \")\n",
917 | "\n",
918 | " my_width = Int(23).tag(sync=True)\n",
919 | "\n",
920 | " _esm = \"\"\"\n",
921 | " import * as React from \"react\";\n",
922 | "\n",
923 | " export default function MyButton({ my_width }) {\n",
924 | " return (\n",
925 | "