From 64c873fbedcaddde643e169a98c7861e085442d7 Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Mon, 9 Sep 2024 15:15:44 +0200 Subject: [PATCH] docs: context and state (#303) * docs: context and state * Handling uncaught runtime error in promise when executing code in output (#302) * Added notifyOnComplete paramater for code execution enabling to send model notifications only when all code execution completed * Fixed missing metadata parameter for OutputExecutor * Fixed JSONObject initialization * Fixed uncaught runtime exception in promise when code execution error occurs in Output --------- Co-authored-by: Sergey Kadnikov * bump: version --------- Co-authored-by: Sok82 Developer Co-authored-by: Sergey Kadnikov --- docs/docs/components/context/index.mdx | 30 ++++++++++++++++++++++---- docs/docs/state/index.mdx | 8 +++++-- docs/docs/state/redux.mdx | 8 ------- docs/docs/state/zustand.mdx | 8 +++++++ packages/react/package.json | 2 +- 5 files changed, 41 insertions(+), 15 deletions(-) delete mode 100644 docs/docs/state/redux.mdx create mode 100644 docs/docs/state/zustand.mdx diff --git a/docs/docs/components/context/index.mdx b/docs/docs/components/context/index.mdx index 1d16ceeb..8466de9a 100644 --- a/docs/docs/components/context/index.mdx +++ b/docs/docs/components/context/index.mdx @@ -2,9 +2,30 @@ description: The Context component. --- -# 🪐 Jupyter Context +# 🪐 Context -Every component must be wrapped inside a Jupyter Context. +Every component should be wrapped inside a Context to get the needed CSS. + +```tsx +root.render( + + + +); +``` + +If you prefer to not wrap in a Context, you can just use the JupyterLabCss component. + +```tsx +root.render( + <> + + + +); +``` + +We also have a more evolved Context that allows you to specify behaviour for the kernels. ```tsx root.render( @@ -30,10 +51,11 @@ The Jupyter Context has the following properties. - `collaborative` - `defaultKernelName` -- `injectableStore`: Read more about the [State](/docs/state) +- `injectableStore` - Read more about the [State](/docs/state) - `jupyterServerUrl` - Read also [Deployment](/docs/deployments/jupyter-server) - `jupyterServerToken` - Read also [Deployment](/docs/deployments/jupyter-server) -- `lite` +- `initCode` - The code to run on the Kernel when it is ready. +- `lite` - Use a pyodide (in browser) Kernel. - `loadJupyterCss` - `startDefaultKernel` - `terminals` diff --git a/docs/docs/state/index.mdx b/docs/docs/state/index.mdx index b888e043..411f36b8 100644 --- a/docs/docs/state/index.mdx +++ b/docs/docs/state/index.mdx @@ -7,6 +7,10 @@ sidebar_position: 1 As an application developer, you may already have a Redux store. You can simply inject the Jupyter UI store in your own store. -For now, we support [Redux](/docs/state/redux) to manage the application state. +For now, we support [Zustand](/docs/state/zustand) to manage the application state. -We are considering other stores like `Mobx` or `Zustand`, please share thoughts and requirements on [this issue](https://github.com/datalayer/jupyter-ui/issues/50). +## Deprecated Redux + +We have been considering other stores like `Mobx`, please share thoughts and requirements on [this issue](https://github.com/datalayer/jupyter-ui/issues/50). + +Redux was harder to play with, see e.g. the [Notebook Injectable Redux Store example](https://github.com/datalayer/jupyter-ui/tree/14e45c0928f724d2899d0f031e1d9451886df624/packages/react/src/examples/NotebookInjectableReduxStore.tsx) to inject your own Redux state, reducers and epics in the Jupyter React Redux store. diff --git a/docs/docs/state/redux.mdx b/docs/docs/state/redux.mdx deleted file mode 100644 index 8bc74af3..00000000 --- a/docs/docs/state/redux.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Redux State -sidebar_position: 1 ---- - -# Redux - -Please have a look at the [Notebook Injectable Redux Store example](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/NotebookInjectableReduxStore.tsx) to inject your own Redux state, reducers and epics in the Jupyter React Redux store. diff --git a/docs/docs/state/zustand.mdx b/docs/docs/state/zustand.mdx new file mode 100644 index 00000000..4273e489 --- /dev/null +++ b/docs/docs/state/zustand.mdx @@ -0,0 +1,8 @@ +--- +title: Zustand State +sidebar_position: 1 +--- + +## Zustand State + +Zustand State. diff --git a/packages/react/package.json b/packages/react/package.json index a6be5bd4..efb75a85 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@datalayer/jupyter-react", - "version": "0.18.4", + "version": "0.18.5", "description": "Jupyter React - React.js components 100% compatible with Jupyter.", "license": "MIT", "main": "lib/index.js",