Move react package to use vite

[goanpeca]

No description provided.

[Copilot]

Pull Request Overview

This PR migrates the React package from webpack to Vite as the build tool, updating configuration files and build scripts accordingly.

Key changes:

• Replace webpack with Vite for both development and production builds
• Update TypeScript configuration for Vite compatibility
• Simplify import paths by removing explicit lib/ directory references

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/vite.config.ts	New Vite configuration with library build support and development server setup
packages/react/tsconfig.json	Updated TypeScript config for Vite compatibility (baseUrl and composite changes)
packages/react/package.json	Updated build scripts to use Vite instead of webpack and added Vite dependencies
packages/react/index.html	New HTML entry point for Vite development server with dynamic module loading
packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx	Simplified import paths to use package root instead of lib/ subdirectory
packages/docusaurus-plugin/src/theme/JupyterCell.tsx	Simplified import paths to use package root instead of lib/ subdirectory
docs/src/theme/ReactLiveScope/index.tsx	Simplified import paths to use package root instead of lib/ subdirectory

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

[nitpick] The comment suggests TypeScript output should be preserved, but with Vite handling the build, this comment may be misleading. Consider clarifying what specific output needs to be preserved or if this setting is still necessary.

Suggested change

	emptyOutDir: false, // Don't clean TypeScript output
	emptyOutDir: false, // Prevents cleaning the output directory before build; set to false if you need to preserve files from previous builds (e.g., TypeScript output)

[Copilot]

[nitpick] The FORMAT_EXTENSION_MAP constant is only used once in the fileName function. Consider inlining this mapping or moving it outside the function scope for better reusability.

Suggested change

	const FORMAT_EXTENSION_MAP: Record<string, string> = {
	es: 'js',
	cjs: 'cjs',
	};
	const ext = FORMAT_EXTENSION_MAP[format] || 'js';
	const ext = (format === 'cjs') ? 'cjs' : 'js';

[Copilot]

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'.
	*/

[echarles]

@goanpeca Does pyodide (NotebookLite example) still work this vite.js config (for ref, I think that config works for pyodide https://github.com/datalayer-examples/jupyter-react-vite-example/blob/main/vite.config.ts)

[goanpeca]

@goanpeca Does pyodide (NotebookLite example) still work this vite.js config (for ref, I think that config works for pyodide https://github.com/datalayer-examples/jupyter-react-vite-example/blob/main/vite.config.ts)

I will check!