Skip to content

Move react package to use vite #395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+326 −30
Draft

Move react package to use vite #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions docs/src/theme/ReactLiveScope/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,7 @@ const Cell = (props: any) => {
>
{() => {
// Keep the import via require in the BrowserOnly code block.
const {
Jupyter,
} = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
const {
Cell,
} = require('@datalayer/jupyter-react/lib/components/cell/Cell');
const { Jupyter, Cell } = require('@datalayer/jupyter-react');
return (
<>
<Jupyter
Expand Down
11 changes: 3 additions & 8 deletions packages/docusaurus-plugin/src/theme/JupyterCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,9 @@ const JupyterCell = (props: JupyterCellProps) => {
>
{() => {
// Keep the import via require and keep it into the BrowserOnly code block..
// const { JupyterReactTheme } = require('@datalayer/jupyter-react/lib/theme');
// const { useJupyter } = require('@datalayer/jupyter-react/lib/jupyter/JupyterContext');
const {
Jupyter,
} = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
const {
Cell,
} = require('@datalayer/jupyter-react/lib/components/cell/Cell');
// const { JupyterReactTheme } = require('@datalayer/jupyter-react');
// const { useJupyter } = require('@datalayer/jupyter-react');
const { Jupyter, Cell } = require('@datalayer/jupyter-react');
const {
jupyterServerUrl = 'https://oss.datalayer.run/api/jupyter-server',
jupyterServerToken = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
Expand Down
7 changes: 1 addition & 6 deletions packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,7 @@ const Cell = (props: any) => {
>
{() => {
// Keep the import via require in the BrowserOnly code block.
const {
Jupyter,
} = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
const {
Cell,
} = require('@datalayer/jupyter-react/lib/components/cell/Cell');
const { Jupyter, Cell } = require('@datalayer/jupyter-react');
return (
<>
<Jupyter
Expand Down
79 changes: 79 additions & 0 deletions packages/react/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!--
~ Copyright (c) 2021-2023 Datalayer, Inc.
~
~ MIT License
-->

<!doctype html>
<html>
<head>
<title>Jupyter React Example</title>
<script id="datalayer-config-data" type="application/json">
{
"jupyterServerUrl": "https://prod1.datalayer.run/api/jupyter-server",
"jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
"runUrl": "https://prod1.datalayer.run",
"token": "",
"cpuEnvironment": "python-cpu-env",
"gpuEnvironment": "pytorch-gpu-env",
"credits": 1
}
</script>
<script id="jupyter-config-data" type="application/json">
{
"appName": "Jupyter React",
"baseUrl": "https://oss.datalayer.run/api/jupyter-server",
"wsUrl": "wss://oss.datalayer.run/api/jupyter-server",
"token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
"appUrl": "/lab",
"themesUrl": "/lab/api/themes",
"disableRTC": false,
"terminalsAvailable": "false",
"mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
"mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
}
</script>
<script
data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
data-jupyter-widgets-cdn-only="true"
></script>
<link
rel="shortcut icon"
href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
type="image/x-icon"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet"
/>
</head>

<body>
<div id="root"></div>
<script type="module">
// Default entry point constant for better maintainability
const DEFAULT_ENTRY_POINT = 'notebookthemecolormode';

// Dynamically import the entry point based on environment variable
Copy link

Copilot AI Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The VITE_ENTRY environment variable is not documented. Add a comment explaining how to use this variable to switch between different entry points.

Suggested change
// Dynamically import the entry point based on environment variable
// Dynamically import the entry point based on environment variable
/**
* The VITE_ENTRY environment variable allows you to switch between different entry points for the application.
*
* To use a specific entry point, set VITE_ENTRY in your environment before starting Vite, e.g.:
* VITE_ENTRY=notebook npm run dev
*
* Valid values for VITE_ENTRY are:
* - app: loads /src/app/App.tsx
* - cell: loads /src/examples/Cell.tsx
* - console: loads /src/examples/Console.tsx
* - filebrowser: loads /src/examples/FileBrowser.tsx
* - notebook: loads /src/examples/Notebook.tsx
* - notebookthemecolormode: loads /src/examples/NotebookThemeColormode.tsx
* - terminal: loads /src/examples/Terminal.tsx
* - viewer: loads /src/examples/Viewer.tsx
*
* If VITE_ENTRY is not set, the default entry point is 'notebookthemecolormode'.
*/

Copilot uses AI. Check for mistakes.
const entryPoint = import.meta.env.VITE_ENTRY || DEFAULT_ENTRY_POINT;
const entryMap = {
app: '/src/app/App.tsx',
cell: '/src/examples/Cell.tsx',
console: '/src/examples/Console.tsx',
filebrowser: '/src/examples/FileBrowser.tsx',
notebook: '/src/examples/Notebook.tsx',
notebookthemecolormode: '/src/examples/NotebookThemeColormode.tsx',
terminal: '/src/examples/Terminal.tsx',
viewer: '/src/examples/Viewer.tsx',
};

const modulePath = entryMap[entryPoint] || entryMap[DEFAULT_ENTRY_POINT];
import(modulePath).then(module => {
console.log(`Loaded entry: ${entryPoint} from ${modulePath}`);
if (module.default) {
module.default();
}
});
</script>
</body>
</html>
26 changes: 18 additions & 8 deletions packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"description": "Jupyter React - React.js components 100% compatible with Jupyter.",
"license": "MIT",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"files": [
"lib/**/*.{css,d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
"style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
Expand All @@ -29,18 +30,21 @@
"access": "public"
},
"scripts": {
"build": "gulp resources-to-lib && tsc && webpack",
"build:lib": "tsc",
"build:prod": "gulp resources-to-lib && tsc && npm run clean && npm run build:lib",
"build": "gulp resources-to-lib && tsc --emitDeclarationOnly && cross-env BUILD_LIB=true vite build",
"build:lib": "cross-env BUILD_LIB=true vite build",
"build:types": "tsc --emitDeclarationOnly",
"build:prod": "gulp resources-to-lib && tsc --emitDeclarationOnly && npm run clean && npm run build:lib",
"build:tsc:watch:res": "gulp resources-to-lib-watch",
"build:tsc:watch:tsc": "tsc --watch",
"build:webpack": "cross-env BUILD_APP=true webpack-cli build",
"build:vite": "vite build",
"clean": "rimraf node_modules lib dist build tsconfig.tsbuildinfo",
"clean:all": "npm run clean:lib && npm run clean:labextension && npm run clean:lintcache",
"clean:labextension": "rimraf datalayer/labextension",
"clean:lib": "rimraf lib tsconfig.tsbuildinfo",
"clean:lintcache": "rimraf .eslintcache .stylelintcache",
"dev": "run-p -c 'start:*'",
"dev": "vite",
"dev:webpack": "run-p -c 'start:*'",
"eslint": "npm eslint:check --fix",
"eslint:check": "eslint . --cache --ext .ts,.tsx",
"example": "run-p -c 'start:*'",
Expand All @@ -51,10 +55,12 @@
"prettier": "npm prettier:base --write --list-different",
"prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
"prettier:check": "npm prettier:base --check",
"start": "run-p -c 'start:*'",
"preview": "vite preview",
"start": "vite",
"start:webpack": "webpack serve",
"start-noconfig": "cross-env NO_CONFIG=true webpack serve",
"start-local": "run-p -c 'start-local:*'",
"start-noconfig": "cross-env NO_CONFIG=true vite",
"start-noconfig:webpack": "cross-env NO_CONFIG=true webpack serve",
"start-local": "cross-env LOCAL_JUPYTER_SERVER=true vite",
"start-local:webpack": "cross-env LOCAL_JUPYTER_SERVER=true webpack serve",
"start-local:jupyter-server": "cd ./../.. && npm run jupyter:server",
"stylelint": "npm stylelint:check --fix",
Expand Down Expand Up @@ -237,7 +243,11 @@
"webpack": "^5.74.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.9.3",
"whatwg-fetch": "^3.6.2"
"whatwg-fetch": "^3.6.2",
"vite": "^5.4.0",
"@vitejs/plugin-react": "^4.6.0",
"vite-plugin-treat-umd-as-commonjs": "^0.1.4",
"buffer": "^6.0.3"
},
"eslintIgnore": [
"node_modules",
Expand Down
5 changes: 3 additions & 2 deletions packages/react/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
"exclude": ["node_modules", "src/example"],
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"baseUrl": "/",
"baseUrl": ".",
"rootDir": "./src",
"allowJs": false,
"allowSyntheticDefaultImports": true,
"composite": true,
"composite": false,
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"incremental": true,
"jsx": "react-jsx",
Expand Down
Loading
Loading