From 3e6a08084ddd3c128974fde94d50592809083c9c Mon Sep 17 00:00:00 2001 From: izkizk8 Date: Mon, 10 Jun 2024 23:11:26 +0800 Subject: [PATCH 1/5] docs(demo): enable demo --- doc-site/.dumi/app.ts | 146 ++++++++++++++++++++ doc-site/.dumi/theme/builtins/Previewer.tsx | 2 +- doc-site/docs/demo/utils.ts | 15 +- 3 files changed, 158 insertions(+), 5 deletions(-) create mode 100644 doc-site/.dumi/app.ts diff --git a/doc-site/.dumi/app.ts b/doc-site/.dumi/app.ts new file mode 100644 index 00000000..a59ed489 --- /dev/null +++ b/doc-site/.dumi/app.ts @@ -0,0 +1,146 @@ +import { type IPreviewerProps } from 'dumi'; +import { type Project } from '@stackblitz/sdk'; + +export function modifyStackBlitzData(memo: Project, props: IPreviewerProps) { + // if use default template: 'create-react-app', demo won't install dependencies automatically + memo.template = 'node'; + Object.entries(memo.files).forEach(([name, content]) => { + if (name !== 'index.html' && name !== 'package.json') { + memo.files[`src/${name}`] = content; + } + delete memo.files[name]; + }); + Object.entries(template).forEach(([name, content]) => { + if (name === 'package.json') { + const packageJson = JSON.parse(content); + const npmDeps = Object.entries(props.asset.dependencies || {}) + .filter(([key, value]) => value.type === 'NPM') + .reduce((acc: { [key: string]: any }, [key, value]) => { + acc[key] = value.value; + return acc; + }, {}); + packageJson.dependencies = { ...npmDeps, ...packageJson.dependencies }; + content = JSON.stringify(packageJson, null, 2); + } + memo.files[name] = content; + }); + + return memo; +} + +const template = { + '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", + + /* 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()], +}); +`, + 'index.html': ` + + + + + + + Vite + React + TS + + +
+ + + +`, + 'package.json': ` +{ + "name": "An auto-generated demo by dumi", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.66", + "@types/react-dom": "^18.2.22", + "@typescript-eslint/eslint-plugin": "^7.2.0", + "@typescript-eslint/parser": "^7.2.0", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.57.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.6", + "typescript": "^5.2.2", + "vite": "^5.2.0" + } +} +`, + '.eslintrc.cjs': ` +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} +` +} diff --git a/doc-site/.dumi/theme/builtins/Previewer.tsx b/doc-site/.dumi/theme/builtins/Previewer.tsx index 3da33e82..d791ce6c 100644 --- a/doc-site/.dumi/theme/builtins/Previewer.tsx +++ b/doc-site/.dumi/theme/builtins/Previewer.tsx @@ -1,5 +1,5 @@ // @ts-nocheck import Previewer from 'dumi/theme-default/builtins/Previewer'; export default (props) => { - return ; + return ; }; diff --git a/doc-site/docs/demo/utils.ts b/doc-site/docs/demo/utils.ts index 36b97ac2..e160b885 100644 --- a/doc-site/docs/demo/utils.ts +++ b/doc-site/docs/demo/utils.ts @@ -1,18 +1,25 @@ +const BASE_URL = 'https://bilibili.github.io/WebAV'; export function assetsPrefix>( - assetsURL: T + assetsURL: T, ): T { + const base = + window.location.hostname.includes('webcontainer.io') || + window.location.hostname.includes('stackblitz.io') || + window.location.hostname.includes('csb.app') + ? BASE_URL + : ''; const prefix = process.env.NODE_ENV === 'development' ? '/' : '/WebAV/'; if (Array.isArray(assetsURL)) { - return assetsURL.map((url) => `${prefix}${url}`) as T; + return assetsURL.map((url) => `${base}${prefix}${url}`) as T; } return Object.fromEntries( - Object.entries(assetsURL).map(([k, v]) => [k, `${prefix}${v}`]) + Object.entries(assetsURL).map(([k, v]) => [k, `${base}${prefix}${v}`]), ) as T; } export async function createFileWriter( - extName = 'mp4' + extName = 'mp4', ): Promise { const fileHandle = await window.showSaveFilePicker({ suggestedName: `WebAV-export-${Date.now()}.${extName}`, From 7a34dbe37a8ba9ced5455c3fd91f184d9e6a5e7b Mon Sep 17 00:00:00 2001 From: hughfenghen Date: Tue, 11 Jun 2024 15:41:21 +0800 Subject: [PATCH 2/5] docs(demo): some demo not working on StackBlitz --- doc-site/.dumi/app.ts | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/doc-site/.dumi/app.ts b/doc-site/.dumi/app.ts index a59ed489..f900dc92 100644 --- a/doc-site/.dumi/app.ts +++ b/doc-site/.dumi/app.ts @@ -72,10 +72,17 @@ const template = { 'vite.config.ts': ` import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import fixReactVirtualized from 'esbuild-plugin-react-virtualized'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + optimizeDeps: { + esbuildOptions: { + // 仅用于修复视频剪辑 demo，时间轴模块的依赖 @xzdarcy/react-timeline-editor 的 导入问题 + plugins: [fixReactVirtualized], + }, + }, }); `, 'index.html': ` @@ -86,6 +93,7 @@ export default defineConfig({ Vite + React + TS +
@@ -107,7 +115,8 @@ export default defineConfig({ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "antd": "^5.11.5" }, "devDependencies": { "@types/react": "^18.2.66", @@ -119,6 +128,9 @@ export default defineConfig({ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "typescript": "^5.2.2", + "esbuild-plugin-react-virtualized": "^1.0.4", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.1", "vite": "^5.2.0" } } @@ -142,5 +154,24 @@ module.exports = { ], }, } -` +`, +'tailwind.config.js': ` +module.exports = { + theme: {}, + variants: {}, + plugins: [], + content: [ + './src/**/*.tsx', + ], +}`, +'src/index.css': ` + @tailwind components; + @tailwind utilities; +`, +'postcss.config.js': ` +export default { + plugins: { + tailwindcss: {}, + }, +};` } From 21def2b647260120f54bfacbfe0e0c670764e7b7 Mon Sep 17 00:00:00 2001 From: izkizk8 Date: Tue, 11 Jun 2024 22:57:03 +0800 Subject: [PATCH 3/5] docs(demo): remove demo template linting --- doc-site/.dumi/app.ts | 32 +++----------------------------- 1 file changed, 3 insertions(+), 29 deletions(-) diff --git a/doc-site/.dumi/app.ts b/doc-site/.dumi/app.ts index f900dc92..c5cd00a2 100644 --- a/doc-site/.dumi/app.ts +++ b/doc-site/.dumi/app.ts @@ -110,7 +110,6 @@ export default defineConfig({ "scripts": { "dev": "vite", "build": "tsc && vite build", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { @@ -121,12 +120,7 @@ export default defineConfig({ "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", - "@typescript-eslint/eslint-plugin": "^7.2.0", - "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", - "eslint": "^8.57.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.6", "typescript": "^5.2.2", "esbuild-plugin-react-virtualized": "^1.0.4", "postcss": "^8.4.38", @@ -135,27 +129,7 @@ export default defineConfig({ } } `, - '.eslintrc.cjs': ` -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, -} -`, -'tailwind.config.js': ` + 'tailwind.config.js': ` module.exports = { theme: {}, variants: {}, @@ -164,11 +138,11 @@ module.exports = { './src/**/*.tsx', ], }`, -'src/index.css': ` + 'src/index.css': ` @tailwind components; @tailwind utilities; `, -'postcss.config.js': ` + 'postcss.config.js': ` export default { plugins: { tailwindcss: {}, From b1ee37aff2ef3806b34024a3511111df6370c157 Mon Sep 17 00:00:00 2001 From: izkizk8 Date: Wed, 12 Jun 2024 22:45:53 +0800 Subject: [PATCH 4/5] docs(demo): enable demo template for csb --- doc-site/.dumi/app.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/doc-site/.dumi/app.ts b/doc-site/.dumi/app.ts index c5cd00a2..898ab0d7 100644 --- a/doc-site/.dumi/app.ts +++ b/doc-site/.dumi/app.ts @@ -1,14 +1,25 @@ import { type IPreviewerProps } from 'dumi'; import { type Project } from '@stackblitz/sdk'; +import { IFiles } from 'codesandbox-import-utils/lib/api/define'; export function modifyStackBlitzData(memo: Project, props: IPreviewerProps) { // if use default template: 'create-react-app', demo won't install dependencies automatically memo.template = 'node'; + return createTemplate(memo, props, true); +} + +export function modifyCodeSandboxData(memo: { files: IFiles }, props: IPreviewerProps) { + return createTemplate(memo, props, false); +} + +function createTemplate(memo: { files: IFiles } | Project, props: IPreviewerProps, isStackBlitz: boolean) { Object.entries(memo.files).forEach(([name, content]) => { if (name !== 'index.html' && name !== 'package.json') { memo.files[`src/${name}`] = content; } - delete memo.files[name]; + if (name !== 'sandbox.config.json') { + delete memo.files[name]; + } }); Object.entries(template).forEach(([name, content]) => { if (name === 'package.json') { @@ -22,7 +33,7 @@ export function modifyStackBlitzData(memo: Project, props: IPreviewerProps) { packageJson.dependencies = { ...npmDeps, ...packageJson.dependencies }; content = JSON.stringify(packageJson, null, 2); } - memo.files[name] = content; + memo.files[name] = isStackBlitz ? content : { content: content, isBinary: false }; }); return memo; From fe87df5ab276696bc5236902211585ba3e3e898d Mon Sep 17 00:00:00 2001 From: izkizk8 Date: Sat, 15 Jun 2024 15:20:49 +0800 Subject: [PATCH 5/5] fix(demo): disable csb --- doc-site/.dumi/app.ts | 16 ++++++++++++---- doc-site/.dumi/theme/builtins/Previewer.tsx | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/doc-site/.dumi/app.ts b/doc-site/.dumi/app.ts index 898ab0d7..12b77d07 100644 --- a/doc-site/.dumi/app.ts +++ b/doc-site/.dumi/app.ts @@ -14,12 +14,20 @@ export function modifyCodeSandboxData(memo: { files: IFiles }, props: IPreviewer function createTemplate(memo: { files: IFiles } | Project, props: IPreviewerProps, isStackBlitz: boolean) { Object.entries(memo.files).forEach(([name, content]) => { + if (name === 'sandbox.config.json') { + memo.files[name] = { + content: JSON.stringify({ + template: 'node', + startScript: 'dev', + }, null, 2), + isBinary: false, + }; + return; + } if (name !== 'index.html' && name !== 'package.json') { memo.files[`src/${name}`] = content; } - if (name !== 'sandbox.config.json') { - delete memo.files[name]; - } + delete memo.files[name]; }); Object.entries(template).forEach(([name, content]) => { if (name === 'package.json') { @@ -114,7 +122,7 @@ export default defineConfig({ `, 'package.json': ` { - "name": "An auto-generated demo by dumi", + "name": "demo", "private": true, "version": "0.0.0", "type": "module", diff --git a/doc-site/.dumi/theme/builtins/Previewer.tsx b/doc-site/.dumi/theme/builtins/Previewer.tsx index d791ce6c..b08dba26 100644 --- a/doc-site/.dumi/theme/builtins/Previewer.tsx +++ b/doc-site/.dumi/theme/builtins/Previewer.tsx @@ -1,5 +1,5 @@ // @ts-nocheck import Previewer from 'dumi/theme-default/builtins/Previewer'; export default (props) => { - return ; + return ; };