From 02a5d868ad581233b156e35a96e4f6a3fa41d1c8 Mon Sep 17 00:00:00 2001 From: zjxxxxxxxxx <43126836+zjxxxxxxxxx@users.noreply.github.com> Date: Sun, 1 Dec 2024 20:26:40 +0800 Subject: [PATCH] chore: Update playgrounds --- README.md | 29 +- README.zh-CN.md | 29 +- package.json | 2 +- packages/client/src/bridge/treeOpenBridge.tsx | 38 +- packages/client/src/inspector/getBoxModel.ts | 68 +- .../client/src/inspector/inspectorEnable.ts | 3 +- packages/client/src/resolve/resolveUtil.ts | 2 +- packages/client/src/ui/OverlayUI.tsx | 9 +- packages/client/src/ui/TooltipUI.tsx | 8 +- packages/rollup/README.md | 8 +- packages/vite/README.md | 10 +- packages/webpack/README.md | 11 +- playground/rollup-react15/src/App.css | 43 - .../src/components/tree/SubTree1.tsx | 5 - .../src/components/tree/SubTree2.tsx | 5 - .../src/components/tree/SubTree3.tsx | 3 - .../src/components/tree/index.tsx | 5 - playground/rollup-react15/src/index.css | 85 -- playground/rollup-vue2/src/App.vue | 65 -- .../src/components/tree/SubTree3.vue | 9 - .../rollup-vue2/src/components/tree/index.vue | 17 - playground/rollup-vue2/src/style.css | 101 --- playground/vite-nuxt/app.vue | 58 -- .../vite-nuxt/components/tree/SubTree1.vue | 7 - .../vite-nuxt/components/tree/SubTree2.vue | 7 - .../vite-nuxt/components/tree/SubTree3.vue | 3 - .../vite-nuxt/components/tree/index.vue | 11 - playground/vite-react/src/App.css | 43 - .../src/components/tree/SubTree1.tsx | 5 - .../src/components/tree/SubTree2.tsx | 5 - .../src/components/tree/SubTree3.tsx | 3 - .../vite-react/src/components/tree/index.tsx | 5 - playground/vite-vue/src/App.vue | 55 -- .../vite-vue/src/components/tree/SubTree1.vue | 7 - .../vite-vue/src/components/tree/SubTree2.vue | 7 - .../vite-vue/src/components/tree/SubTree3.vue | 3 - .../vite-vue/src/components/tree/index.vue | 11 - playground/vite-vue/src/style.css | 101 --- .../src/components/tree/SubTree1.tsx | 5 - .../src/components/tree/SubTree2.tsx | 5 - .../src/components/tree/SubTree3.tsx | 3 - .../src/components/tree/index.tsx | 5 - playground/webpack-nextjs/src/pages/_app.tsx | 4 - playground/webpack-nuxt/.gitignore | 24 - playground/webpack-nuxt/.npmrc | 1 - playground/webpack-nuxt/app.vue | 58 -- .../webpack-nuxt/components/tree/SubTree1.vue | 7 - .../webpack-nuxt/components/tree/SubTree2.vue | 7 - .../webpack-nuxt/components/tree/SubTree3.vue | 3 - .../webpack-nuxt/components/tree/index.vue | 11 - playground/webpack-nuxt/nuxt.config.ts | 26 - playground/webpack-nuxt/package.json | 26 - playground/webpack-nuxt/plugins/vue-source.ts | 8 - playground/webpack-nuxt/public/nuxt.svg | 3 - playground/webpack-nuxt/tsconfig.json | 4 - playground/webpack-react/src/App.css | 26 - .../src/components/tree/SubTree1.tsx | 5 - .../src/components/tree/SubTree2.tsx | 5 - .../src/components/tree/SubTree3.tsx | 3 - .../src/components/tree/index.tsx | 5 - playground/webpack-vue/public/logo.png | Bin 5850 -> 0 bytes playground/webpack-vue/public/webpack.svg | 1 - playground/webpack-vue/src/App.vue | 55 -- .../webpack-vue/src/components/Notes.vue | 13 - .../src/components/tree/SubTree1.vue | 7 - .../src/components/tree/SubTree2.vue | 7 - .../src/components/tree/SubTree3.vue | 3 - .../webpack-vue/src/components/tree/index.vue | 11 - playground/webpack-vue/src/style.css | 101 --- .../rollup-react15/.gitignore | 0 .../rollup-react15/global.d.ts | 0 .../rollup-react15/index.html | 0 .../rollup-react15/package.json | 2 +- .../rollup-react15/public/logo.png | Bin .../rollup-react15/public/react.svg | 0 .../rollup-react15/public/rollup.svg | 0 .../rollup-react15/rollup.config.js | 5 +- .../rollup-react15/src/App.css | 91 +- .../rollup-react15/src/App.tsx | 14 +- .../rollup-react15/src/components/Notes.tsx | 0 .../src/components/TestComponentTree.tsx | 7 + .../src/components/TestCrossIframe.tsx | 3 + .../rollup-react15/src/index.tsx | 1 - .../rollup-react15/tsconfig.json | 0 .../rollup-vue2/.gitignore | 0 .../rollup-vue2/global.d.ts | 0 .../rollup-vue2/index.html | 4 +- .../rollup-vue2/package.json | 2 +- .../rollup-vue2/public/logo.png | Bin .../rollup-vue2/public/rollup.svg | 0 .../rollup-vue2/public/vue.svg | 0 .../rollup-vue2/rollup.config.js | 5 +- playgrounds/rollup-vue2/src/App.vue | 198 +++++ .../rollup-vue2/src/components/Notes.vue | 0 .../src/components/TestComponentTree.vue | 9 +- .../src/components/TestCrossIframe.vue | 9 +- .../rollup-vue2/src/main.ts | 1 - .../rollup-vue2/tsconfig.json | 0 .../vite-nuxt/.gitignore | 0 {playground => playgrounds}/vite-nuxt/.npmrc | 0 .../vite-nuxt/assets/app.css | 99 ++- .../vite-nuxt/components/Notes.vue | 0 .../vite-nuxt/nuxt.config.ts | 13 +- .../vite-nuxt/package.json | 2 +- playgrounds/vite-nuxt/pages/index.vue | 31 + .../vite-nuxt/pages/test-component-tree.vue | 3 + .../vite-nuxt/pages/test-cross-iframe.vue | 3 + .../vite-nuxt/plugins/vue-source.ts | 0 .../vite-nuxt/public/logo.png | Bin .../vite-nuxt/public/nuxt.svg | 0 .../vite-nuxt/public/vite.svg | 0 .../vite-nuxt/tsconfig.json | 0 .../vite-react/.gitignore | 0 .../vite-react/index.html | 0 .../vite-react/package.json | 2 +- .../vite-react/public/logo.png | Bin .../vite-react/public/react.svg | 0 .../vite-react/public/vite.svg | 0 .../vite-react/src/App.css | 75 +- .../vite-react/src/App.tsx | 16 +- .../vite-react/src/components/Notes.tsx | 0 .../src/components/TestComponentTree.tsx | 7 + .../src/components/TestCrossIframe.tsx | 3 + .../vite-react/src/main.tsx | 1 - .../vite-react/src/vite-env.d.ts | 0 .../vite-react/tsconfig.json | 0 .../vite-react/tsconfig.node.json | 0 .../vite-react/vite.config.ts | 9 +- .../vite-vue/.gitignore | 0 .../vite-vue/global.d.ts | 0 .../vite-vue/index.html | 2 +- .../vite-vue/package.json | 2 +- .../vite-vue/public/logo.png | Bin .../vite-vue/public/vite.svg | 0 .../vite-vue/public/vue.svg | 0 playgrounds/vite-vue/src/App.vue | 189 ++++ .../vite-vue/src/components/Notes.vue | 0 .../src/components/TestComponentTree.vue | 3 + .../src/components/TestCrossIframe.vue | 3 + .../vite-vue/src/main.ts | 3 +- .../vite-vue/src/vite-env.d.ts | 0 .../vite-vue/tsconfig.json | 0 .../vite-vue/tsconfig.node.json | 0 .../vite-vue/vite.config.ts | 9 +- .../webpack-nextjs/.gitignore | 0 .../webpack-nextjs/next.config.js | 7 +- .../webpack-nextjs/package.json | 2 +- .../webpack-nextjs/public/logo.png | Bin .../webpack-nextjs/public/webpack.svg | 0 .../webpack-nextjs/src/components/Notes.tsx | 0 .../webpack-nextjs/src/pages/_app.css | 37 +- playgrounds/webpack-nextjs/src/pages/_app.tsx | 15 + .../webpack-nextjs/src/pages/index.tsx | 14 +- .../src/pages/test-component-tree.tsx | 7 + .../src/pages/test-cross-iframe.tsx | 3 + .../webpack-nextjs/tsconfig.json | 0 .../webpack-react/.gitignore | 0 .../webpack-react/craco.config.js | 10 +- .../webpack-react/package.json | 2 +- .../webpack-react/public/index.html | 0 .../webpack-react}/public/logo.png | Bin .../webpack-react/public/react.svg | 0 .../webpack-react}/public/webpack.svg | 0 .../webpack-react/src/App.css | 77 +- .../webpack-react/src/App.tsx | 16 +- .../webpack-react/src/components/Notes.tsx | 0 .../src/components/TestComponentTree.tsx | 7 + .../src/components/TestCrossIframe.tsx | 3 + .../webpack-react/src/index.tsx | 5 +- .../webpack-react/src/react-app-env.d.ts | 0 .../webpack-react/tsconfig.json | 0 .../webpack-vue/.babelrc | 0 .../webpack-vue/.browserslistrc | 0 .../webpack-vue/.gitignore | 0 .../webpack-vue/global.d.ts | 0 .../webpack-vue/package.json | 2 +- .../webpack-vue/public/index.html | 7 +- .../webpack-vue}/public/logo.png | Bin .../webpack-vue/public/vue.svg | 0 .../webpack-vue}/public/webpack.svg | 0 playgrounds/webpack-vue/src/App.vue | 197 +++++ .../webpack-vue/src}/components/Notes.vue | 0 .../src/components/TestComponentTree.vue | 3 + .../src/components/TestCrossIframe.vue | 3 + .../webpack-vue/src/main.ts | 3 +- .../webpack-vue/tsconfig.json | 0 .../webpack-vue/vue.config.js | 10 +- pnpm-lock.yaml | 831 ++---------------- pnpm-workspace.yaml | 2 +- scripts/start.ts | 6 +- 190 files changed, 1283 insertions(+), 2140 deletions(-) delete mode 100644 playground/rollup-react15/src/App.css delete mode 100644 playground/rollup-react15/src/components/tree/SubTree1.tsx delete mode 100644 playground/rollup-react15/src/components/tree/SubTree2.tsx delete mode 100644 playground/rollup-react15/src/components/tree/SubTree3.tsx delete mode 100644 playground/rollup-react15/src/components/tree/index.tsx delete mode 100644 playground/rollup-react15/src/index.css delete mode 100644 playground/rollup-vue2/src/App.vue delete mode 100644 playground/rollup-vue2/src/components/tree/SubTree3.vue delete mode 100644 playground/rollup-vue2/src/components/tree/index.vue delete mode 100644 playground/rollup-vue2/src/style.css delete mode 100644 playground/vite-nuxt/app.vue delete mode 100644 playground/vite-nuxt/components/tree/SubTree1.vue delete mode 100644 playground/vite-nuxt/components/tree/SubTree2.vue delete mode 100644 playground/vite-nuxt/components/tree/SubTree3.vue delete mode 100644 playground/vite-nuxt/components/tree/index.vue delete mode 100644 playground/vite-react/src/App.css delete mode 100644 playground/vite-react/src/components/tree/SubTree1.tsx delete mode 100644 playground/vite-react/src/components/tree/SubTree2.tsx delete mode 100644 playground/vite-react/src/components/tree/SubTree3.tsx delete mode 100644 playground/vite-react/src/components/tree/index.tsx delete mode 100644 playground/vite-vue/src/App.vue delete mode 100644 playground/vite-vue/src/components/tree/SubTree1.vue delete mode 100644 playground/vite-vue/src/components/tree/SubTree2.vue delete mode 100644 playground/vite-vue/src/components/tree/SubTree3.vue delete mode 100644 playground/vite-vue/src/components/tree/index.vue delete mode 100644 playground/vite-vue/src/style.css delete mode 100644 playground/webpack-nextjs/src/components/tree/SubTree1.tsx delete mode 100644 playground/webpack-nextjs/src/components/tree/SubTree2.tsx delete mode 100644 playground/webpack-nextjs/src/components/tree/SubTree3.tsx delete mode 100644 playground/webpack-nextjs/src/components/tree/index.tsx delete mode 100644 playground/webpack-nextjs/src/pages/_app.tsx delete mode 100644 playground/webpack-nuxt/.gitignore delete mode 100644 playground/webpack-nuxt/.npmrc delete mode 100644 playground/webpack-nuxt/app.vue delete mode 100644 playground/webpack-nuxt/components/tree/SubTree1.vue delete mode 100644 playground/webpack-nuxt/components/tree/SubTree2.vue delete mode 100644 playground/webpack-nuxt/components/tree/SubTree3.vue delete mode 100644 playground/webpack-nuxt/components/tree/index.vue delete mode 100644 playground/webpack-nuxt/nuxt.config.ts delete mode 100644 playground/webpack-nuxt/package.json delete mode 100644 playground/webpack-nuxt/plugins/vue-source.ts delete mode 100644 playground/webpack-nuxt/public/nuxt.svg delete mode 100644 playground/webpack-nuxt/tsconfig.json delete mode 100644 playground/webpack-react/src/App.css delete mode 100644 playground/webpack-react/src/components/tree/SubTree1.tsx delete mode 100644 playground/webpack-react/src/components/tree/SubTree2.tsx delete mode 100644 playground/webpack-react/src/components/tree/SubTree3.tsx delete mode 100644 playground/webpack-react/src/components/tree/index.tsx delete mode 100644 playground/webpack-vue/public/logo.png delete mode 100644 playground/webpack-vue/public/webpack.svg delete mode 100644 playground/webpack-vue/src/App.vue delete mode 100644 playground/webpack-vue/src/components/Notes.vue delete mode 100644 playground/webpack-vue/src/components/tree/SubTree1.vue delete mode 100644 playground/webpack-vue/src/components/tree/SubTree2.vue delete mode 100644 playground/webpack-vue/src/components/tree/SubTree3.vue delete mode 100644 playground/webpack-vue/src/components/tree/index.vue delete mode 100644 playground/webpack-vue/src/style.css rename {playground => playgrounds}/rollup-react15/.gitignore (100%) rename {playground => playgrounds}/rollup-react15/global.d.ts (100%) rename {playground => playgrounds}/rollup-react15/index.html (100%) rename {playground => playgrounds}/rollup-react15/package.json (97%) rename {playground => playgrounds}/rollup-react15/public/logo.png (100%) rename {playground => playgrounds}/rollup-react15/public/react.svg (100%) rename {playground => playgrounds}/rollup-react15/public/rollup.svg (100%) rename {playground => playgrounds}/rollup-react15/rollup.config.js (95%) rename playground/webpack-react/src/style.css => playgrounds/rollup-react15/src/App.css (71%) rename {playground => playgrounds}/rollup-react15/src/App.tsx (69%) rename {playground => playgrounds}/rollup-react15/src/components/Notes.tsx (100%) create mode 100644 playgrounds/rollup-react15/src/components/TestComponentTree.tsx create mode 100644 playgrounds/rollup-react15/src/components/TestCrossIframe.tsx rename {playground => playgrounds}/rollup-react15/src/index.tsx (84%) rename {playground => playgrounds}/rollup-react15/tsconfig.json (100%) rename {playground => playgrounds}/rollup-vue2/.gitignore (100%) rename {playground => playgrounds}/rollup-vue2/global.d.ts (100%) rename {playground => playgrounds}/rollup-vue2/index.html (85%) rename {playground => playgrounds}/rollup-vue2/package.json (97%) rename {playground => playgrounds}/rollup-vue2/public/logo.png (100%) rename {playground => playgrounds}/rollup-vue2/public/rollup.svg (100%) rename {playground => playgrounds}/rollup-vue2/public/vue.svg (100%) rename {playground => playgrounds}/rollup-vue2/rollup.config.js (94%) create mode 100644 playgrounds/rollup-vue2/src/App.vue rename {playground => playgrounds}/rollup-vue2/src/components/Notes.vue (100%) rename playground/rollup-vue2/src/components/tree/SubTree1.vue => playgrounds/rollup-vue2/src/components/TestComponentTree.vue (50%) rename playground/rollup-vue2/src/components/tree/SubTree2.vue => playgrounds/rollup-vue2/src/components/TestCrossIframe.vue (50%) rename {playground => playgrounds}/rollup-vue2/src/main.ts (88%) rename {playground => playgrounds}/rollup-vue2/tsconfig.json (100%) rename {playground => playgrounds}/vite-nuxt/.gitignore (100%) rename {playground => playgrounds}/vite-nuxt/.npmrc (100%) rename playground/vite-nuxt/assets/style.css => playgrounds/vite-nuxt/assets/app.css (70%) rename {playground => playgrounds}/vite-nuxt/components/Notes.vue (100%) rename {playground => playgrounds}/vite-nuxt/nuxt.config.ts (69%) rename {playground => playgrounds}/vite-nuxt/package.json (96%) create mode 100644 playgrounds/vite-nuxt/pages/index.vue create mode 100644 playgrounds/vite-nuxt/pages/test-component-tree.vue create mode 100644 playgrounds/vite-nuxt/pages/test-cross-iframe.vue rename {playground => playgrounds}/vite-nuxt/plugins/vue-source.ts (100%) rename {playground => playgrounds}/vite-nuxt/public/logo.png (100%) rename {playground => playgrounds}/vite-nuxt/public/nuxt.svg (100%) rename {playground => playgrounds}/vite-nuxt/public/vite.svg (100%) rename {playground => playgrounds}/vite-nuxt/tsconfig.json (100%) rename {playground => playgrounds}/vite-react/.gitignore (100%) rename {playground => playgrounds}/vite-react/index.html (100%) rename {playground => playgrounds}/vite-react/package.json (96%) rename {playground => playgrounds}/vite-react/public/logo.png (100%) rename {playground => playgrounds}/vite-react/public/react.svg (100%) rename {playground => playgrounds}/vite-react/public/vite.svg (100%) rename playground/vite-react/src/index.css => playgrounds/vite-react/src/App.css (68%) rename {playground => playgrounds}/vite-react/src/App.tsx (67%) rename {playground => playgrounds}/vite-react/src/components/Notes.tsx (100%) create mode 100644 playgrounds/vite-react/src/components/TestComponentTree.tsx create mode 100644 playgrounds/vite-react/src/components/TestCrossIframe.tsx rename {playground => playgrounds}/vite-react/src/main.tsx (90%) rename {playground => playgrounds}/vite-react/src/vite-env.d.ts (100%) rename {playground => playgrounds}/vite-react/tsconfig.json (100%) rename {playground => playgrounds}/vite-react/tsconfig.node.json (100%) rename {playground => playgrounds}/vite-react/vite.config.ts (76%) rename {playground => playgrounds}/vite-vue/.gitignore (100%) rename {playground => playgrounds}/vite-vue/global.d.ts (100%) rename {playground => playgrounds}/vite-vue/index.html (92%) rename {playground => playgrounds}/vite-vue/package.json (95%) rename {playground => playgrounds}/vite-vue/public/logo.png (100%) rename {playground => playgrounds}/vite-vue/public/vite.svg (100%) rename {playground => playgrounds}/vite-vue/public/vue.svg (100%) create mode 100644 playgrounds/vite-vue/src/App.vue rename {playground => playgrounds}/vite-vue/src/components/Notes.vue (100%) create mode 100644 playgrounds/vite-vue/src/components/TestComponentTree.vue create mode 100644 playgrounds/vite-vue/src/components/TestCrossIframe.vue rename {playground => playgrounds}/vite-vue/src/main.ts (62%) rename {playground => playgrounds}/vite-vue/src/vite-env.d.ts (100%) rename {playground => playgrounds}/vite-vue/tsconfig.json (100%) rename {playground => playgrounds}/vite-vue/tsconfig.node.json (100%) rename {playground => playgrounds}/vite-vue/vite.config.ts (71%) rename {playground => playgrounds}/webpack-nextjs/.gitignore (100%) rename {playground => playgrounds}/webpack-nextjs/next.config.js (62%) rename {playground => playgrounds}/webpack-nextjs/package.json (96%) rename {playground => playgrounds}/webpack-nextjs/public/logo.png (100%) rename {playground => playgrounds}/webpack-nextjs/public/webpack.svg (100%) rename {playground => playgrounds}/webpack-nextjs/src/components/Notes.tsx (100%) rename {playground => playgrounds}/webpack-nextjs/src/pages/_app.css (91%) create mode 100644 playgrounds/webpack-nextjs/src/pages/_app.tsx rename playground/webpack-nextjs/src/App.tsx => playgrounds/webpack-nextjs/src/pages/index.tsx (81%) create mode 100644 playgrounds/webpack-nextjs/src/pages/test-component-tree.tsx create mode 100644 playgrounds/webpack-nextjs/src/pages/test-cross-iframe.tsx rename {playground => playgrounds}/webpack-nextjs/tsconfig.json (100%) rename {playground => playgrounds}/webpack-react/.gitignore (100%) rename {playground => playgrounds}/webpack-react/craco.config.js (59%) rename {playground => playgrounds}/webpack-react/package.json (97%) rename {playground => playgrounds}/webpack-react/public/index.html (100%) rename {playground/webpack-nuxt => playgrounds/webpack-react}/public/logo.png (100%) rename {playground => playgrounds}/webpack-react/public/react.svg (100%) rename {playground/webpack-nuxt => playgrounds/webpack-react}/public/webpack.svg (100%) rename playground/webpack-nuxt/assets/style.css => playgrounds/webpack-react/src/App.css (70%) rename {playground => playgrounds}/webpack-react/src/App.tsx (67%) rename {playground => playgrounds}/webpack-react/src/components/Notes.tsx (100%) create mode 100644 playgrounds/webpack-react/src/components/TestComponentTree.tsx create mode 100644 playgrounds/webpack-react/src/components/TestCrossIframe.tsx rename {playground => playgrounds}/webpack-react/src/index.tsx (56%) rename {playground => playgrounds}/webpack-react/src/react-app-env.d.ts (100%) rename {playground => playgrounds}/webpack-react/tsconfig.json (100%) rename {playground => playgrounds}/webpack-vue/.babelrc (100%) rename {playground => playgrounds}/webpack-vue/.browserslistrc (100%) rename {playground => playgrounds}/webpack-vue/.gitignore (100%) rename {playground => playgrounds}/webpack-vue/global.d.ts (100%) rename {playground => playgrounds}/webpack-vue/package.json (96%) rename {playground => playgrounds}/webpack-vue/public/index.html (79%) rename {playground/webpack-react => playgrounds/webpack-vue}/public/logo.png (100%) rename {playground => playgrounds}/webpack-vue/public/vue.svg (100%) rename {playground/webpack-react => playgrounds/webpack-vue}/public/webpack.svg (100%) create mode 100644 playgrounds/webpack-vue/src/App.vue rename {playground/webpack-nuxt => playgrounds/webpack-vue/src}/components/Notes.vue (100%) create mode 100644 playgrounds/webpack-vue/src/components/TestComponentTree.vue create mode 100644 playgrounds/webpack-vue/src/components/TestCrossIframe.vue rename {playground => playgrounds}/webpack-vue/src/main.ts (62%) rename {playground => playgrounds}/webpack-vue/tsconfig.json (100%) rename {playground => playgrounds}/webpack-vue/vue.config.js (59%) diff --git a/README.md b/README.md index 92ae1aa6..b74dca04 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ Whether you are a `React` developer, a `Vue` developer, or a developer who uses ### Use plugin -> The example uses [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) as a reference. In other cases, the only choice is different, and the usage is exactly the same. +> The example uses [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) as a reference. In other cases, the only choice is different, and the usage is exactly the same. First you need to install the plugin into the project. @@ -71,11 +71,7 @@ import OpenEditor from '@open-editor/vite'; export default defineConfig({ plugins: [ - react({ - babel: { - retainLines: true, - }, - }), + react(), OpenEditor({ // options }), @@ -189,17 +185,16 @@ window.addEventListener('openeditor', (e) => { ## Playgrounds -| Source code | Online trial | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | -| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | -| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | -| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | -| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | -| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | -| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | -| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | -| [`webpack/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt) | +| Source code | Online trial | +| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | +| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-vue2) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | +| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | +| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | +| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-nuxt) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | +| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | +| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | +| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | ## Thanks diff --git a/README.zh-CN.md b/README.zh-CN.md index f37a392d..f9e6b4e3 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -53,7 +53,7 @@ ### 使用插件 -> 示例以 [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) 作为参考，其他情况下只是选择不同而已，使用方式是完全一致的。 +> 示例以 [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) 作为参考，其他情况下只是选择不同而已，使用方式是完全一致的。 首先需要将插件安装到项目中。 @@ -71,11 +71,7 @@ import OpenEditor from '@open-editor/vite'; export default defineConfig({ plugins: [ - react({ - babel: { - retainLines: true, - }, - }), + react(), OpenEditor({ // options }), @@ -189,17 +185,16 @@ window.addEventListener('openeditor', (e) => { ## 演练场 -| 源代码 | 在线试玩 | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | -| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | -| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | -| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | -| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | -| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | -| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | -| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | -| [`webpack/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt) | +| 源代码 | 在线试玩 | +| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-react15) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | +| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-vue2) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | +| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | +| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | +| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-nuxt) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | +| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-react) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | +| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-nextjs) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | +| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-vue) | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | ## 致谢 diff --git a/package.json b/package.json index 2884434e..0491e6cc 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "install:ci": "pnpm install --ignore-scripts" }, "engines": { - "node": ">=20" + "node": ">=18" }, "packageManager": "pnpm@9.0.0", "keywords": [ diff --git a/packages/client/src/bridge/treeOpenBridge.tsx b/packages/client/src/bridge/treeOpenBridge.tsx index cf4797f8..fe7598f7 100644 --- a/packages/client/src/bridge/treeOpenBridge.tsx +++ b/packages/client/src/bridge/treeOpenBridge.tsx @@ -4,34 +4,36 @@ import { appendChild } from '../utils/dom'; import { onMessage, postMessage } from '../utils/message'; import { getOptions } from '../options'; import { resolveSource, type CodeSource } from '../resolve'; -import { TREE_OPEN_CROSS_IFRAME } from '../constants'; +import { CURRENT_INSPECT_ID, TREE_OPEN_CROSS_IFRAME } from '../constants'; import { on, off } from '../event'; -export const treeOpenBridge = crossIframeBridge<[CodeSource]>({ +export const treeOpenBridge = crossIframeBridge<[CodeSource, string]>({ setup() { - onMessage<[CodeSource]>(TREE_OPEN_CROSS_IFRAME, (args) => { + onMessage<[CodeSource, string]>(TREE_OPEN_CROSS_IFRAME, (args) => { treeOpenBridge.emit(args, isTopWindow); }); }, emitMiddlewares: [ - (_, next) => { - const { once } = getOptions(); + ([, activeId], next) => { + if (activeId === CURRENT_INSPECT_ID) { + const { once } = getOptions(); - const overlay =
; - const eventOpts = { - target: once ? overlay : window, - capture: true, - }; + const overlay =
; + const eventOpts = { + target: once ? overlay : window, + capture: true, + }; - const remove = () => { - off('pointerup', remove, eventOpts); - off('pointerout', remove, eventOpts); - overlay.remove(); - }; - on('pointerup', remove, eventOpts); - on('pointerout', remove, eventOpts); + const remove = () => { + off('pointerup', remove, eventOpts); + off('pointerout', remove, eventOpts); + overlay.remove(); + }; + on('pointerup', remove, eventOpts); + on('pointerout', remove, eventOpts); - appendChild(document.body, overlay); + appendChild(document.body, overlay); + } next(); }, diff --git a/packages/client/src/inspector/getBoxModel.ts b/packages/client/src/inspector/getBoxModel.ts index 57a9dc16..d87f6511 100644 --- a/packages/client/src/inspector/getBoxModel.ts +++ b/packages/client/src/inspector/getBoxModel.ts @@ -26,7 +26,7 @@ const IS_BORDER_WITH_ZOOM = !IS_FIREFOX; export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] { // When an invalid element or invisible element is encountered, empty is returned. if (!checkValidElement(el) || !checkVisibility(el)) { - return [getDefaultBoxRect(), getDefaultBoxLines()]; + return getDefaultBoxModel(); } const { @@ -48,9 +48,9 @@ export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] { // Negative values will cause the position to shift and should be ignored. const marginTop = withZoom(Math.max(get('margin-top'), 0)); - const marginLeft = withZoom(Math.max(get('margin-left'), 0)); const marginRight = withZoom(Math.max(get('margin-right'), 0)); const marginBottom = withZoom(Math.max(get('margin-bottom'), 0)); + const marginLeft = withZoom(Math.max(get('margin-left'), 0)); const borderTop = withZoom(get('border-top'), IS_BORDER_WITH_ZOOM); const borderRight = withZoom(get('border-right'), IS_BORDER_WITH_ZOOM); @@ -70,52 +70,46 @@ export function getBoxModel(el: HTMLElement | null): [BoxRect, BoxLines] { const positionHeight = height + marginTop + marginBottom; return [ + createBoxRect( + positionWidth, + positionHeight, + positionTop, + positionRight, + positionBottom, + positionLeft, + ), { - width: positionWidth, - height: positionHeight, - top: positionTop, - right: positionRight, - bottom: positionBottom, - left: positionLeft, + margin: createBoxLine(marginTop, marginRight, marginBottom, marginLeft), + border: createBoxLine(borderTop, borderRight, borderBottom, borderLeft), + padding: createBoxLine(paddingTop, paddingRight, paddingBottom, paddingLeft), }, + ]; +} + +export function getDefaultBoxModel(): [BoxRect, BoxLines] { + return [ + createBoxRect(), { - margin: { - top: marginTop, - right: marginRight, - left: marginLeft, - bottom: marginBottom, - }, - border: { - top: borderTop, - right: borderRight, - left: borderLeft, - bottom: borderBottom, - }, - padding: { - top: paddingTop, - right: paddingRight, - left: paddingLeft, - bottom: paddingBottom, - }, + margin: createBoxLine(), + border: createBoxLine(), + padding: createBoxLine(), }, ]; } -export function getDefaultBoxRect(): BoxRect { +function createBoxRect(width = 0, height = 0, top = 0, right = 0, bottom = 0, left = 0): BoxRect { return { - width: 0, - height: 0, - top: 0, - right: 0, - left: 0, - bottom: 0, + width, + height, + ...createBoxLine(top, right, bottom, left), }; } -export function getDefaultBoxLines(): BoxLines { +function createBoxLine(top = 0, right = 0, bottom = 0, left = 0): BoxLine { return { - margin: getDefaultBoxRect(), - border: getDefaultBoxRect(), - padding: getDefaultBoxRect(), + top, + right, + bottom, + left, }; } diff --git a/packages/client/src/inspector/inspectorEnable.ts b/packages/client/src/inspector/inspectorEnable.ts index da22fd74..741d6dfa 100644 --- a/packages/client/src/inspector/inspectorEnable.ts +++ b/packages/client/src/inspector/inspectorEnable.ts @@ -1,6 +1,7 @@ import { inspectorExitBridge, openEditorBridge, treeOpenBridge } from '../bridge'; import { getOptions } from '../options'; import { resolveSource } from '../resolve'; +import { CURRENT_INSPECT_ID } from '../constants'; import { setupListeners } from './setupListeners'; import { disableHoverCSS, enableHoverCSS } from './disableHoverCSS'; import { getActiveElement } from './getActiveElement'; @@ -21,7 +22,7 @@ export async function inspectorEnable() { cleanListeners = setupListeners({ onActive: () => renderUI(), - onOpenTree: (el) => treeOpenBridge.emit([resolveSource(el, true)]), + onOpenTree: (el) => treeOpenBridge.emit([resolveSource(el, true), CURRENT_INSPECT_ID]), onOpenEditor: (el) => openEditorBridge.emit([resolveSource(el).meta]), onExitInspect: () => inspectorExitBridge.emit(), }); diff --git a/packages/client/src/resolve/resolveUtil.ts b/packages/client/src/resolve/resolveUtil.ts index 8f83fef5..942bd12e 100644 --- a/packages/client/src/resolve/resolveUtil.ts +++ b/packages/client/src/resolve/resolveUtil.ts @@ -23,7 +23,7 @@ let glob: ReturnType; function filter(fileName: string) { const { ignoreComponents } = getOptions(); if (ignoreComponents) { - return !(glob ||= outmatch(ignoreComponents, { excludeDot: true }))(fileName); + return !(glob ||= outmatch(ignoreComponents, { excludeDot: false }))(fileName); } return true; } diff --git a/packages/client/src/ui/OverlayUI.tsx b/packages/client/src/ui/OverlayUI.tsx index e1086870..bf210820 100644 --- a/packages/client/src/ui/OverlayUI.tsx +++ b/packages/client/src/ui/OverlayUI.tsx @@ -1,10 +1,5 @@ import { CSS_util, applyStyle, addClass, removeClass } from '../utils/dom'; -import { - type BoxLines, - type BoxRect, - getDefaultBoxLines, - getDefaultBoxRect, -} from '../inspector/getBoxModel'; +import { type BoxLines, type BoxRect, getDefaultBoxModel } from '../inspector/getBoxModel'; import { inspectorEnableBridge, inspectorExitBridge, boxModelBridge } from '../bridge'; export function OverlayUI() { @@ -21,7 +16,7 @@ export function OverlayUI() { inspectorExitBridge.on(() => { removeClass(state.position, 'oe-overlay-show'); - updateBoxModel(getDefaultBoxRect(), getDefaultBoxLines()); + updateBoxModel(...getDefaultBoxModel()); }); boxModelBridge.on(updateBoxModel); diff --git a/packages/client/src/ui/TooltipUI.tsx b/packages/client/src/ui/TooltipUI.tsx index 7493a6e5..e073f744 100644 --- a/packages/client/src/ui/TooltipUI.tsx +++ b/packages/client/src/ui/TooltipUI.tsx @@ -62,12 +62,8 @@ export function TooltipUI() { } function updateRect(rect: BoxRect) { - const { - // window width excluding the scrollbar width - clientWidth: winW, - // window height excluding the scrollbar height - clientHeight: winH, - } = document.body; + // window (width|height) excluding the scrollbar (width|height) + const { clientWidth: winW, clientHeight: winH } = document.documentElement; const { width: rootW, height: rootH } = getDOMRect(state.root); const onTopArea = rect.top > rootH + safeArea.top + OFFSET * 2; diff --git a/packages/rollup/README.md b/packages/rollup/README.md index fd4fd814..970c5503 100644 --- a/packages/rollup/README.md +++ b/packages/rollup/README.md @@ -98,7 +98,7 @@ interface Options { ## Playgrounds -| Source code | Online trial | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | -| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | +| Source code | Online trial | +| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | +| [`rollup/react15`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-react15) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-react15) | +| [`rollup/vue2`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/rollup-vue2) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/rollup-vue2) | diff --git a/packages/vite/README.md b/packages/vite/README.md index 8412c739..3e8ee749 100644 --- a/packages/vite/README.md +++ b/packages/vite/README.md @@ -84,8 +84,8 @@ interface Options { ## Playgrounds -| Source code | Online trial | -| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | -| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | -| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | -| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | +| Source code | Online trial | +| ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | +| [`vite/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-react) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-react) | +| [`vite/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-vue) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-vue) | +| [`vite/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/vite-nuxt) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/vite-nuxt) | diff --git a/packages/webpack/README.md b/packages/webpack/README.md index c89da053..14385209 100644 --- a/packages/webpack/README.md +++ b/packages/webpack/README.md @@ -98,9 +98,8 @@ interface Options { ## Playgrounds -| Source code | Online trial | -| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | -| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | -| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | -| [`webpack/nuxt`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nuxt) | +| Source code | Online trial | +| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | +| [`webpack/react`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-react) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-react) | +| [`webpack/nextjs`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-nextjs) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-nextjs) | +| [`webpack/vue`](https://github.com/zjxxxxxxxxx/open-editor/tree/main/playgrounds/webpack-vue) | [StackBlitz](https://stackblitz.com/github/zjxxxxxxxxx/open-editor/tree/main/playground/webpack-vue) | diff --git a/playground/rollup-react15/src/App.css b/playground/rollup-react15/src/App.css deleted file mode 100644 index 369329eb..00000000 --- a/playground/rollup-react15/src/App.css +++ /dev/null @@ -1,43 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - width: 6em; - height: 6em; - padding: 1.5em; - overflow: hidden; - border-radius: 40px; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #fa383eaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); -} -.logo.open-editor:hover { - filter: drop-shadow(0 0 2em #000000aa); -} -@media (prefers-color-scheme: dark) { - .logo.open-editor:hover { - filter: drop-shadow(0 0 2em #ffffffaa); - } -} - -.card { - padding: 2em; - zoom: 2; -} - -.card > div { - zoom: 0.5; -} - -.read-the-docs { - color: #888; -} diff --git a/playground/rollup-react15/src/components/tree/SubTree1.tsx b/playground/rollup-react15/src/components/tree/SubTree1.tsx deleted file mode 100644 index 66555a6d..00000000 --- a/playground/rollup-react15/src/components/tree/SubTree1.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree2 from './SubTree2'; - -export default function SubTree1(): React.JSX.Element { - return ; -} diff --git a/playground/rollup-react15/src/components/tree/SubTree2.tsx b/playground/rollup-react15/src/components/tree/SubTree2.tsx deleted file mode 100644 index fa854c4a..00000000 --- a/playground/rollup-react15/src/components/tree/SubTree2.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree3 from './SubTree3'; - -export default function SubTree2(): React.JSX.Element { - return ; -} diff --git a/playground/rollup-react15/src/components/tree/SubTree3.tsx b/playground/rollup-react15/src/components/tree/SubTree3.tsx deleted file mode 100644 index b3a20d4c..00000000 --- a/playground/rollup-react15/src/components/tree/SubTree3.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function SubTree3(): React.JSX.Element { - return ; -} diff --git a/playground/rollup-react15/src/components/tree/index.tsx b/playground/rollup-react15/src/components/tree/index.tsx deleted file mode 100644 index e63e3aab..00000000 --- a/playground/rollup-react15/src/components/tree/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree1 from './SubTree1'; - -export default function Tree(): React.JSX.Element { - return ; -} diff --git a/playground/rollup-react15/src/index.css b/playground/rollup-react15/src/index.css deleted file mode 100644 index e796b16e..00000000 --- a/playground/rollup-react15/src/index.css +++ /dev/null @@ -1,85 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #202327; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #202327; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font-size: 12px; - line-height: 10px; - color: #e6edf3; - vertical-align: middle; - background-color: #161b22; - border: solid 1px rgba(110, 118, 129, 0.4); - border-radius: 6px; - box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } - kbd { - color: #1f2328; - background-color: #f6f8fa; - border: solid 1px rgba(175, 184, 193, 0.2); - box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); - } -} diff --git a/playground/rollup-vue2/src/App.vue b/playground/rollup-vue2/src/App.vue deleted file mode 100644 index d1f4dfc9..00000000 --- a/playground/rollup-vue2/src/App.vue +++ /dev/null @@ -1,65 +0,0 @@ - - - - - diff --git a/playground/rollup-vue2/src/components/tree/SubTree3.vue b/playground/rollup-vue2/src/components/tree/SubTree3.vue deleted file mode 100644 index 12e7863c..00000000 --- a/playground/rollup-vue2/src/components/tree/SubTree3.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/playground/rollup-vue2/src/components/tree/index.vue b/playground/rollup-vue2/src/components/tree/index.vue deleted file mode 100644 index e25a18aa..00000000 --- a/playground/rollup-vue2/src/components/tree/index.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - diff --git a/playground/rollup-vue2/src/style.css b/playground/rollup-vue2/src/style.css deleted file mode 100644 index 63217fb0..00000000 --- a/playground/rollup-vue2/src/style.css +++ /dev/null @@ -1,101 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #202327; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #202327; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; - zoom: 2; -} - -.card > div { - zoom: 0.5; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font-size: 12px; - line-height: 10px; - color: #e6edf3; - vertical-align: middle; - background-color: #161b22; - border: solid 1px rgba(110, 118, 129, 0.4); - border-radius: 6px; - box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } - kbd { - color: #1f2328; - background-color: #f6f8fa; - border: solid 1px rgba(175, 184, 193, 0.2); - box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); - } -} diff --git a/playground/vite-nuxt/app.vue b/playground/vite-nuxt/app.vue deleted file mode 100644 index d82e8035..00000000 --- a/playground/vite-nuxt/app.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - diff --git a/playground/vite-nuxt/components/tree/SubTree1.vue b/playground/vite-nuxt/components/tree/SubTree1.vue deleted file mode 100644 index 45f82bce..00000000 --- a/playground/vite-nuxt/components/tree/SubTree1.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/vite-nuxt/components/tree/SubTree2.vue b/playground/vite-nuxt/components/tree/SubTree2.vue deleted file mode 100644 index c443f7c5..00000000 --- a/playground/vite-nuxt/components/tree/SubTree2.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/vite-nuxt/components/tree/SubTree3.vue b/playground/vite-nuxt/components/tree/SubTree3.vue deleted file mode 100644 index b2a08a2d..00000000 --- a/playground/vite-nuxt/components/tree/SubTree3.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/playground/vite-nuxt/components/tree/index.vue b/playground/vite-nuxt/components/tree/index.vue deleted file mode 100644 index 85cc55c6..00000000 --- a/playground/vite-nuxt/components/tree/index.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/playground/vite-react/src/App.css b/playground/vite-react/src/App.css deleted file mode 100644 index a4754f1b..00000000 --- a/playground/vite-react/src/App.css +++ /dev/null @@ -1,43 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - width: 6em; - height: 6em; - padding: 1.5em; - overflow: hidden; - border-radius: 40px; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); -} -.logo.open-editor:hover { - filter: drop-shadow(0 0 2em #000000aa); -} -@media (prefers-color-scheme: dark) { - .logo.open-editor:hover { - filter: drop-shadow(0 0 2em #ffffffaa); - } -} - -.card { - padding: 2em; - zoom: 2; -} - -.card > div { - zoom: 0.5; -} - -.read-the-docs { - color: #888; -} diff --git a/playground/vite-react/src/components/tree/SubTree1.tsx b/playground/vite-react/src/components/tree/SubTree1.tsx deleted file mode 100644 index 051d2feb..00000000 --- a/playground/vite-react/src/components/tree/SubTree1.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree2 from './SubTree2'; - -export default function SubTree1() { - return ; -} diff --git a/playground/vite-react/src/components/tree/SubTree2.tsx b/playground/vite-react/src/components/tree/SubTree2.tsx deleted file mode 100644 index 651e77b4..00000000 --- a/playground/vite-react/src/components/tree/SubTree2.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree3 from './SubTree3'; - -export default function SubTree2() { - return ; -} diff --git a/playground/vite-react/src/components/tree/SubTree3.tsx b/playground/vite-react/src/components/tree/SubTree3.tsx deleted file mode 100644 index a5bbea3a..00000000 --- a/playground/vite-react/src/components/tree/SubTree3.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function SubTree3() { - return ; -} diff --git a/playground/vite-react/src/components/tree/index.tsx b/playground/vite-react/src/components/tree/index.tsx deleted file mode 100644 index 5b1e2bfd..00000000 --- a/playground/vite-react/src/components/tree/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree1 from './SubTree1'; - -export default function Tree() { - return ; -} diff --git a/playground/vite-vue/src/App.vue b/playground/vite-vue/src/App.vue deleted file mode 100644 index d854c6c8..00000000 --- a/playground/vite-vue/src/App.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - diff --git a/playground/vite-vue/src/components/tree/SubTree1.vue b/playground/vite-vue/src/components/tree/SubTree1.vue deleted file mode 100644 index 45f82bce..00000000 --- a/playground/vite-vue/src/components/tree/SubTree1.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/vite-vue/src/components/tree/SubTree2.vue b/playground/vite-vue/src/components/tree/SubTree2.vue deleted file mode 100644 index c443f7c5..00000000 --- a/playground/vite-vue/src/components/tree/SubTree2.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/vite-vue/src/components/tree/SubTree3.vue b/playground/vite-vue/src/components/tree/SubTree3.vue deleted file mode 100644 index b2a08a2d..00000000 --- a/playground/vite-vue/src/components/tree/SubTree3.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/playground/vite-vue/src/components/tree/index.vue b/playground/vite-vue/src/components/tree/index.vue deleted file mode 100644 index 85cc55c6..00000000 --- a/playground/vite-vue/src/components/tree/index.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/playground/vite-vue/src/style.css b/playground/vite-vue/src/style.css deleted file mode 100644 index 63217fb0..00000000 --- a/playground/vite-vue/src/style.css +++ /dev/null @@ -1,101 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #202327; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #202327; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; - zoom: 2; -} - -.card > div { - zoom: 0.5; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font-size: 12px; - line-height: 10px; - color: #e6edf3; - vertical-align: middle; - background-color: #161b22; - border: solid 1px rgba(110, 118, 129, 0.4); - border-radius: 6px; - box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } - kbd { - color: #1f2328; - background-color: #f6f8fa; - border: solid 1px rgba(175, 184, 193, 0.2); - box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); - } -} diff --git a/playground/webpack-nextjs/src/components/tree/SubTree1.tsx b/playground/webpack-nextjs/src/components/tree/SubTree1.tsx deleted file mode 100644 index 051d2feb..00000000 --- a/playground/webpack-nextjs/src/components/tree/SubTree1.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree2 from './SubTree2'; - -export default function SubTree1() { - return ; -} diff --git a/playground/webpack-nextjs/src/components/tree/SubTree2.tsx b/playground/webpack-nextjs/src/components/tree/SubTree2.tsx deleted file mode 100644 index 651e77b4..00000000 --- a/playground/webpack-nextjs/src/components/tree/SubTree2.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree3 from './SubTree3'; - -export default function SubTree2() { - return ; -} diff --git a/playground/webpack-nextjs/src/components/tree/SubTree3.tsx b/playground/webpack-nextjs/src/components/tree/SubTree3.tsx deleted file mode 100644 index a5bbea3a..00000000 --- a/playground/webpack-nextjs/src/components/tree/SubTree3.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function SubTree3() { - return ; -} diff --git a/playground/webpack-nextjs/src/components/tree/index.tsx b/playground/webpack-nextjs/src/components/tree/index.tsx deleted file mode 100644 index 5b1e2bfd..00000000 --- a/playground/webpack-nextjs/src/components/tree/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree1 from './SubTree1'; - -export default function Tree() { - return ; -} diff --git a/playground/webpack-nextjs/src/pages/_app.tsx b/playground/webpack-nextjs/src/pages/_app.tsx deleted file mode 100644 index ca6baed6..00000000 --- a/playground/webpack-nextjs/src/pages/_app.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import App from '../App'; -import './_app.css'; - -export default () => ; diff --git a/playground/webpack-nuxt/.gitignore b/playground/webpack-nuxt/.gitignore deleted file mode 100644 index 4a7f73a2..00000000 --- a/playground/webpack-nuxt/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Nuxt dev/build outputs -.output -.data -.nuxt -.nitro -.cache -dist - -# Node dependencies -node_modules - -# Logs -logs -*.log - -# Misc -.DS_Store -.fleet -.idea - -# Local env files -.env -.env.* -!.env.example diff --git a/playground/webpack-nuxt/.npmrc b/playground/webpack-nuxt/.npmrc deleted file mode 100644 index c483022c..00000000 --- a/playground/webpack-nuxt/.npmrc +++ /dev/null @@ -1 +0,0 @@ -shamefully-hoist=true \ No newline at end of file diff --git a/playground/webpack-nuxt/app.vue b/playground/webpack-nuxt/app.vue deleted file mode 100644 index 59b2081e..00000000 --- a/playground/webpack-nuxt/app.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - diff --git a/playground/webpack-nuxt/components/tree/SubTree1.vue b/playground/webpack-nuxt/components/tree/SubTree1.vue deleted file mode 100644 index 45f82bce..00000000 --- a/playground/webpack-nuxt/components/tree/SubTree1.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/webpack-nuxt/components/tree/SubTree2.vue b/playground/webpack-nuxt/components/tree/SubTree2.vue deleted file mode 100644 index c443f7c5..00000000 --- a/playground/webpack-nuxt/components/tree/SubTree2.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/webpack-nuxt/components/tree/SubTree3.vue b/playground/webpack-nuxt/components/tree/SubTree3.vue deleted file mode 100644 index b2a08a2d..00000000 --- a/playground/webpack-nuxt/components/tree/SubTree3.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/playground/webpack-nuxt/components/tree/index.vue b/playground/webpack-nuxt/components/tree/index.vue deleted file mode 100644 index 85cc55c6..00000000 --- a/playground/webpack-nuxt/components/tree/index.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/playground/webpack-nuxt/nuxt.config.ts b/playground/webpack-nuxt/nuxt.config.ts deleted file mode 100644 index 95249cff..00000000 --- a/playground/webpack-nuxt/nuxt.config.ts +++ /dev/null @@ -1,26 +0,0 @@ -import OpenEditorWebpackPlugin from '@open-editor/webpack'; -import VueSource from 'unplugin-vue-source/webpack'; - -// https://nuxt.com/docs/api/configuration/nuxt-config -export default defineNuxtConfig({ - app: { - head: { - title: 'Open Editor', - link: [ - { - rel: 'icon', - type: 'image/png', - href: '/logo.png', - }, - ], - }, - }, - css: ['~/assets/style.css'], - builder: 'webpack', - webpack: { - plugins: [new OpenEditorWebpackPlugin(), VueSource()], - }, - devServer: { - port: 4006, - }, -}); diff --git a/playground/webpack-nuxt/package.json b/playground/webpack-nuxt/package.json deleted file mode 100644 index 04e01c81..00000000 --- a/playground/webpack-nuxt/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "@playground/webpack-nuxt", - "private": true, - "type": "module", - "scripts": { - "build": "nuxt build", - "dev": "nuxt dev", - "generate": "nuxt generate", - "preview": "nuxt preview", - "postinstall": "nuxt prepare" - }, - "engines": { - "node": ">=20" - }, - "dependencies": { - "nuxt": "^3.11.2", - "unplugin-vue-source": "latest", - "vue": "^3.4.21", - "vue-router": "^4.3.0" - }, - "devDependencies": { - "@open-editor/webpack": "latest", - "@nuxt/webpack-builder": "^3.11.2", - "webpack-dev-middleware": "7.0.0" - } -} diff --git a/playground/webpack-nuxt/plugins/vue-source.ts b/playground/webpack-nuxt/plugins/vue-source.ts deleted file mode 100644 index d523054e..00000000 --- a/playground/webpack-nuxt/plugins/vue-source.ts +++ /dev/null @@ -1,8 +0,0 @@ -import VueSource from 'unplugin-vue-source/vue'; - -export default defineNuxtPlugin({ - name: 'vue-source', - async setup(nuxtApp) { - nuxtApp.vueApp.use(VueSource); - }, -}); diff --git a/playground/webpack-nuxt/public/nuxt.svg b/playground/webpack-nuxt/public/nuxt.svg deleted file mode 100644 index ead151fc..00000000 --- a/playground/webpack-nuxt/public/nuxt.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/playground/webpack-nuxt/tsconfig.json b/playground/webpack-nuxt/tsconfig.json deleted file mode 100644 index a746f2a7..00000000 --- a/playground/webpack-nuxt/tsconfig.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - // https://nuxt.com/docs/guide/concepts/typescript - "extends": "./.nuxt/tsconfig.json" -} diff --git a/playground/webpack-react/src/App.css b/playground/webpack-react/src/App.css deleted file mode 100644 index 3f56c6ae..00000000 --- a/playground/webpack-react/src/App.css +++ /dev/null @@ -1,26 +0,0 @@ -.logo { - width: 6em; - height: 6em; - padding: 1.5em; - overflow: hidden; - border-radius: 40px; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #1d78c1aa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); -} -.logo.open-editor:hover { - filter: drop-shadow(0 0 2em #000000aa); -} -@media (prefers-color-scheme: dark) { - .logo.open-editor:hover { - filter: drop-shadow(0 0 2em #ffffffaa); - } -} -.read-the-docs { - color: #888; -} diff --git a/playground/webpack-react/src/components/tree/SubTree1.tsx b/playground/webpack-react/src/components/tree/SubTree1.tsx deleted file mode 100644 index 051d2feb..00000000 --- a/playground/webpack-react/src/components/tree/SubTree1.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree2 from './SubTree2'; - -export default function SubTree1() { - return ; -} diff --git a/playground/webpack-react/src/components/tree/SubTree2.tsx b/playground/webpack-react/src/components/tree/SubTree2.tsx deleted file mode 100644 index 651e77b4..00000000 --- a/playground/webpack-react/src/components/tree/SubTree2.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree3 from './SubTree3'; - -export default function SubTree2() { - return ; -} diff --git a/playground/webpack-react/src/components/tree/SubTree3.tsx b/playground/webpack-react/src/components/tree/SubTree3.tsx deleted file mode 100644 index a5bbea3a..00000000 --- a/playground/webpack-react/src/components/tree/SubTree3.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function SubTree3() { - return ; -} diff --git a/playground/webpack-react/src/components/tree/index.tsx b/playground/webpack-react/src/components/tree/index.tsx deleted file mode 100644 index 5b1e2bfd..00000000 --- a/playground/webpack-react/src/components/tree/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import SubTree1 from './SubTree1'; - -export default function Tree() { - return ; -} diff --git a/playground/webpack-vue/public/logo.png b/playground/webpack-vue/public/logo.png deleted file mode 100644 index 03716369db19b99596177b606e6d3473f8d77ac6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5850 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 V$W8fD(5yaWZft#}@-jN+e*kTwc?|#n diff --git a/playground/webpack-vue/public/webpack.svg b/playground/webpack-vue/public/webpack.svg deleted file mode 100644 index ba863d38..00000000 --- a/playground/webpack-vue/public/webpack.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/playground/webpack-vue/src/App.vue b/playground/webpack-vue/src/App.vue deleted file mode 100644 index 3d5c5348..00000000 --- a/playground/webpack-vue/src/App.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - diff --git a/playground/webpack-vue/src/components/Notes.vue b/playground/webpack-vue/src/components/Notes.vue deleted file mode 100644 index e0fafe3b..00000000 --- a/playground/webpack-vue/src/components/Notes.vue +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/playground/webpack-vue/src/components/tree/SubTree1.vue b/playground/webpack-vue/src/components/tree/SubTree1.vue deleted file mode 100644 index 45f82bce..00000000 --- a/playground/webpack-vue/src/components/tree/SubTree1.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/webpack-vue/src/components/tree/SubTree2.vue b/playground/webpack-vue/src/components/tree/SubTree2.vue deleted file mode 100644 index c443f7c5..00000000 --- a/playground/webpack-vue/src/components/tree/SubTree2.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/playground/webpack-vue/src/components/tree/SubTree3.vue b/playground/webpack-vue/src/components/tree/SubTree3.vue deleted file mode 100644 index b2a08a2d..00000000 --- a/playground/webpack-vue/src/components/tree/SubTree3.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/playground/webpack-vue/src/components/tree/index.vue b/playground/webpack-vue/src/components/tree/index.vue deleted file mode 100644 index 85cc55c6..00000000 --- a/playground/webpack-vue/src/components/tree/index.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/playground/webpack-vue/src/style.css b/playground/webpack-vue/src/style.css deleted file mode 100644 index 63217fb0..00000000 --- a/playground/webpack-vue/src/style.css +++ /dev/null @@ -1,101 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #202327; - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #202327; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; - zoom: 2; -} - -.card > div { - zoom: 0.5; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font-size: 12px; - line-height: 10px; - color: #e6edf3; - vertical-align: middle; - background-color: #161b22; - border: solid 1px rgba(110, 118, 129, 0.4); - border-radius: 6px; - box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4); -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } - kbd { - color: #1f2328; - background-color: #f6f8fa; - border: solid 1px rgba(175, 184, 193, 0.2); - box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); - } -} diff --git a/playground/rollup-react15/.gitignore b/playgrounds/rollup-react15/.gitignore similarity index 100% rename from playground/rollup-react15/.gitignore rename to playgrounds/rollup-react15/.gitignore diff --git a/playground/rollup-react15/global.d.ts b/playgrounds/rollup-react15/global.d.ts similarity index 100% rename from playground/rollup-react15/global.d.ts rename to playgrounds/rollup-react15/global.d.ts diff --git a/playground/rollup-react15/index.html b/playgrounds/rollup-react15/index.html similarity index 100% rename from playground/rollup-react15/index.html rename to playgrounds/rollup-react15/index.html diff --git a/playground/rollup-react15/package.json b/playgrounds/rollup-react15/package.json similarity index 97% rename from playground/rollup-react15/package.json rename to playgrounds/rollup-react15/package.json index 1c50a4b6..bcf6a431 100644 --- a/playground/rollup-react15/package.json +++ b/playgrounds/rollup-react15/package.json @@ -6,7 +6,7 @@ "dev": "rollup -c -w --environment NODE_ENV:development" }, "engines": { - "node": ">=20" + "node": ">=18" }, "dependencies": { "react": "^15.7.0", diff --git a/playground/rollup-react15/public/logo.png b/playgrounds/rollup-react15/public/logo.png similarity index 100% rename from playground/rollup-react15/public/logo.png rename to playgrounds/rollup-react15/public/logo.png diff --git a/playground/rollup-react15/public/react.svg b/playgrounds/rollup-react15/public/react.svg similarity index 100% rename from playground/rollup-react15/public/react.svg rename to playgrounds/rollup-react15/public/react.svg diff --git a/playground/rollup-react15/public/rollup.svg b/playgrounds/rollup-react15/public/rollup.svg similarity index 100% rename from playground/rollup-react15/public/rollup.svg rename to playgrounds/rollup-react15/public/rollup.svg diff --git a/playground/rollup-react15/rollup.config.js b/playgrounds/rollup-react15/rollup.config.js similarity index 95% rename from playground/rollup-react15/rollup.config.js rename to playgrounds/rollup-react15/rollup.config.js index ffd25e03..1983d70b 100644 --- a/playground/rollup-react15/rollup.config.js +++ b/playgrounds/rollup-react15/rollup.config.js @@ -48,7 +48,10 @@ export default { svg({ base64: true, }), - OpenEditor(), + OpenEditor({ + once: true, + crossIframe: true, + }), liveServer({ port: 4000, wait: 1000, diff --git a/playground/webpack-react/src/style.css b/playgrounds/rollup-react15/src/App.css similarity index 71% rename from playground/webpack-react/src/style.css rename to playgrounds/rollup-react15/src/App.css index 3e033c15..52383cc6 100644 --- a/playground/webpack-react/src/style.css +++ b/playgrounds/rollup-react15/src/App.css @@ -12,6 +12,24 @@ -webkit-text-size-adjust: 100%; } +#root { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +body { + margin: 0; + padding: 0; +} + +iframe { + width: 240px; + height: 42px; + border: none; +} + a { font-weight: 500; color: #646cff; @@ -21,14 +39,6 @@ a:hover { color: #535bf2; } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - h1 { font-size: 3.2em; line-height: 1.1; @@ -52,22 +62,6 @@ button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } -.card { - padding: 2em; - zoom: 2; -} - -.card > div { - zoom: 0.5; -} - -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - kbd { display: inline-block; padding: 3px 5px; @@ -99,3 +93,52 @@ kbd { box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); } } + +.app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + width: 6em; + height: 6em; + padding: 1.5em; + overflow: hidden; + border-radius: 40px; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #fa383eaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafb); +} +.logo.open-editor:hover { + filter: drop-shadow(0 0 2em #000000aa); +} +@media (prefers-color-scheme: dark) { + .logo.open-editor:hover { + filter: drop-shadow(0 0 2em #ffffffaa); + } +} + +.card { + padding: 2em; + zoom: 2; +} + +.card > div { + zoom: 0.5; +} + +.read-the-docs { + color: #888; +} + +.test-button { + width: 240px; + height: 42px; +} diff --git a/playground/rollup-react15/src/App.tsx b/playgrounds/rollup-react15/src/App.tsx similarity index 69% rename from playground/rollup-react15/src/App.tsx rename to playgrounds/rollup-react15/src/App.tsx index 4f279a4a..f35664c4 100644 --- a/playground/rollup-react15/src/App.tsx +++ b/playgrounds/rollup-react15/src/App.tsx @@ -1,10 +1,18 @@ -import Tree from './components/tree'; +import TestCrossIframe from './components/TestCrossIframe'; +import TestComponentTree from './components/TestComponentTree'; import Notes from './components/Notes'; import './App.css'; export default function App(): React.JSX.Element { + if (location.pathname === '/test-cross-iframe') { + return ; + } + if (location.pathname === '/test-component-tree') { + return ; + } + return ( -
+

Rollup + React15

- +