From 7ef8af341761eff109acb9cda1d767b23bbedd41 Mon Sep 17 00:00:00 2001 From: tajo Date: Sat, 16 Mar 2024 19:11:43 -0600 Subject: [PATCH] Use WebContainers+Vite for StackBlitz examples --- documentation-site/components/example.jsx | 97 +++++++++++++++++------ 1 file changed, 74 insertions(+), 23 deletions(-) diff --git a/documentation-site/components/example.jsx b/documentation-site/components/example.jsx index 0f085e9665..4a7e8a885f 100644 --- a/documentation-site/components/example.jsx +++ b/documentation-site/components/example.jsx @@ -90,42 +90,57 @@ function Example(props) { const data = await response.json(); const PACKAGE_JSON = { name: "stackblitz-baseui-example", - version: "0.0.0", private: true, + version: "0.0.0", + type: "module", + scripts: { + dev: "vite", + build: "tsc && vite build", + preview: "vite preview", + }, dependencies: { - "@types/react": "18.2.45", - "@types/react-dom": "18.2.18", baseui: data.version, - react: "18.2.0", - "react-dom": "18.2.0", - "react-scripts": "latest", + react: "^18.2.0", + "react-dom": "^18.2.0", "styletron-engine-monolithic": "^1.0.0", "styletron-react": ">=6", }, - scripts: { - start: "react-scripts start", - build: "react-scripts build", - test: "react-scripts test --env=jsdom", - eject: "react-scripts eject", + devDependencies: { + "@types/react": "^18.2.64", + "@types/react-dom": "^18.2.21", + "@vitejs/plugin-react": "^4.2.1", + typescript: "^5.2.2", + vite: "^5.1.6", }, }; sdk.openProject( { - dependencies: PACKAGE_JSON.dependencies, title: "BaseWeb Code Example", description: "Dynamically generated code example from baseweb.design", - template: "create-react-app", + template: "node", files: { - "index.html": `
`, - "index.tsx": `import { StrictMode } from 'react'; + "index.html": ` + + + + + + BaseWeb + Vite + React + TS + + +
+ + +`, + "src/main.tsx": `import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { Client as Styletron } from 'styletron-engine-monolithic'; import { Provider as StyletronProvider } from 'styletron-react'; import { LightTheme, BaseProvider } from 'baseui'; -import Example from './Example'; +import Example from './Example.tsx'; -const root = createRoot(document.getElementById('app')); +const root = createRoot(document.getElementById('root')!); const engine = new Styletron(); @@ -139,15 +154,51 @@ root.render( ); `, - "Example.tsx": code, + "src/Example.tsx": code, "tsconfig.json": `{ "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, "jsx": "react-jsx", - "lib": ["DOM", "ES2022"], - "moduleResolution": "node", - "target": "ES2022" - } + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +}`, + "tsconfig.node.json": `{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true + }, + "include": ["vite.config.ts"] }`, + "vite.config.ts": `import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) +`, "package.json": JSON.stringify(PACKAGE_JSON, null, 2), }, settings: { @@ -159,7 +210,7 @@ root.render( }, { newWindow: true, - openFile: ["Example.tsx"], + openFile: ["src/Example.tsx"], } ); }}