feat: add codesandbox plugin

jsconfig.json

@@ -27,6 +27,7 @@
       "@opentiny/tiny-engine-toolbar-logo": ["packages/toolbars/logo/index"],
       "@opentiny/tiny-engine-toolbar-media": ["packages/toolbars/media/index"],
       "@opentiny/tiny-engine-toolbar-preview": ["packages/toolbars/preview/index"],
+      "@opentiny/tiny-engine-toolbar-codesandbox": ["packages/toolbars/codesandbox/index"],
       "@opentiny/tiny-engine-toolbar-generate-vue": ["packages/toolbars/generate-vue/index"],
       "@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
       "@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"],
@@ -57,6 +58,7 @@
       "@opentiny/tiny-engine-toolbar-logo/*": ["packages/toolbars/logo/*"],
       "@opentiny/tiny-engine-toolbar-media/*": ["packages/toolbars/media/*"],
       "@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"],
+      "@opentiny/tiny-engine-toolbar-codesandbox/*": ["packages/toolbars/codesandbox/*"],
       "@opentiny/tiny-engine-toolbar-clean/*": ["packages/toolbars/clean/*"],
       "@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"],
       "@opentiny/tiny-engine-theme-dark/*": ["packages/theme/dark/*"],

packages/controller/js/preview.js

@@ -15,13 +15,14 @@ import { isDevelopEnv } from './environments'
 import useResource from '../src/useResource'
 // prefer old unicode hacks for backward compatibility
 
-const { COMPONENT_NAME } = constants
+const { COMPONENT_NAME, PREVIEW_SANDBOX } = constants
 
 export const utoa = (string) => btoa(unescape(encodeURIComponent(string)))
 
 export const atou = (base64) => decodeURIComponent(escape(atob(base64)))
 
-const open = (params = {}) => {
+const getParams = (_params, type, sandbox) => {
+  const params = Object.assign({ type, sandbox }, _params)
   const paramsMap = new URLSearchParams(location.search)
   params.app = paramsMap.get('id')
   params.tenant = paramsMap.get('tenant')
@@ -30,7 +31,10 @@ const open = (params = {}) => {
     .filter((item) => item.script)
     .reduce((pre, cur) => ({ ...pre, [cur.package]: cur.script }), {})
   params.styles = [...styles]
+  return params
+}
 
+const open = (params = {}) => {
   const href = window.location.href.split('?')[0] || './'
   const tenant = new URLSearchParams(location.search).get('tenant') || ''
   let openUrl = ''
@@ -46,12 +50,10 @@ const open = (params = {}) => {
   aTag.click()
 }
 
-export const previewPage = (params = {}) => {
-  params.type = COMPONENT_NAME.Page
-  open(params)
+export const previewPage = (params = {}, sandbox = PREVIEW_SANDBOX.Web) => {
+  open(getParams(params, COMPONENT_NAME.Page, sandbox))
 }
 
-export const previewBlock = (params = {}) => {
-  params.type = COMPONENT_NAME.Block
-  open(params)
+export const previewBlock = (params = {}, sandbox = PREVIEW_SANDBOX.Web) => {
+  open(getParams(params, COMPONENT_NAME.Block, sandbox))
 }

packages/design-core/config/addons.js

@@ -20,6 +20,7 @@ import Redoundo from '@opentiny/tiny-engine-toolbar-redoundo'
 import Save from '@opentiny/tiny-engine-toolbar-save'
 import Clean from '@opentiny/tiny-engine-toolbar-clean'
 import Preview from '@opentiny/tiny-engine-toolbar-preview'
+import CodeSandbox from '@opentiny/tiny-engine-toolbar-codesandbox'
 import GenerateVue from '@opentiny/tiny-engine-toolbar-generate-vue'
 import Refresh from '@opentiny/tiny-engine-toolbar-refresh'
 import Collaboration from '@opentiny/tiny-engine-toolbar-collaboration'
@@ -56,6 +57,7 @@ const addons = {
     Save,
     GenerateVue,
     Preview,
+    CodeSandbox,
     Redoundo,
     Fullscreen,
     Checkinout,

packages/design-core/package.json

@@ -72,6 +72,7 @@
     "@opentiny/tiny-engine-toolbar-logout": "workspace:*",
     "@opentiny/tiny-engine-toolbar-media": "workspace:*",
     "@opentiny/tiny-engine-toolbar-preview": "workspace:*",
+    "@opentiny/tiny-engine-toolbar-codesandbox": "workspace:*",
     "@opentiny/tiny-engine-toolbar-redoundo": "workspace:*",
     "@opentiny/tiny-engine-toolbar-refresh": "workspace:*",
     "@opentiny/tiny-engine-toolbar-save": "workspace:*",
@@ -85,6 +86,7 @@
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/repl": "^2.9.0",
     "@vueuse/core": "^9.6.0",
+    "codesandbox": "^2.2.3",
     "element-resize-detector": "^1.2.4",
     "eslint-linter-browserify": "8.57.0",
     "file-saver": "^2.0.5",

packages/design-core/preview.html

@@ -5,6 +5,110 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Design Core Preview</title>
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .loading {
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        position: absolute;
+      }
+
+      .loading .loadingco {
+        width: 200px;
+        height: 80px;
+        text-align: center;
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .loading h2 {
+        color: #666;
+        margin: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 20px;
+        font-weight: 400;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+
+      .loading span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 0.6em;
+        height: 0.6em;
+        margin: 0.19em;
+        background: #007db6;
+        border-radius: 0.6em;
+        -webkit-animation: loading 1s infinite alternate;
+        animation: loading 1s infinite alternate;
+      }
+
+      .loading span:nth-of-type(2) {
+        background: #008fb2;
+        -webkit-animation-delay: 0.2s;
+        animation-delay: 0.2s;
+      }
+
+      .loading span:nth-of-type(3) {
+        background: #009b9e;
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+      }
+
+      .loading span:nth-of-type(4) {
+        background: #00a77d;
+        -webkit-animation-delay: 0.6s;
+        animation-delay: 0.6s;
+      }
+
+      .loading span:nth-of-type(5) {
+        background: #00b247;
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+      }
+
+      .loading span:nth-of-type(6) {
+        background: #5ab027;
+        -webkit-animation-delay: 1s;
+        animation-delay: 1s;
+      }
+
+      .loading span:nth-of-type(7) {
+        background: #a0b61e;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+      }
+
+      @-webkit-keyframes loading {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes loading {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>

packages/design-core/src/preview/src/App.vue

@@ -1,13 +1,33 @@
 <template>
-  <Toolbar v-if="showToolbar" />
-  <Preview />
+  <div v-if="redirect" class="loading">
+    <div class="loadingco">
+      <h2>Loading</h2>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <template v-else>
+    <Toolbar v-if="showToolbar" />
+    <Preview />
+  </template>
 </template>
 
 <script>
 import { useDebugSwitch } from './preview/debugSwitch'
+import usePreview from './preview/usePreview'
 import Preview from './preview/Preview.vue'
+import { codesandboxFiles } from './preview/codesandboxFiles'
 import Toolbar from './Toolbar.vue'
+import { constants } from '@opentiny/tiny-engine-utils'
 import '@opentiny/tiny-engine-theme'
+import { getParameters } from 'codesandbox/lib/api/define'
+
+const { PREVIEW_SANDBOX } = constants
 
 export default {
   components: {
@@ -22,6 +42,105 @@ export default {
   },
   setup() {
     useDebugSwitch()
+    const [sandbox] = usePreview((sandbox, prejectName, srcFiles) => {
+      if (sandbox === PREVIEW_SANDBOX.CodeSandbox) {
+        const files = Object.assign({}, codesandboxFiles)
+        Object.keys(srcFiles).forEach((key) => {
+          if (key === 'tsconfig.json') {
+            return
+          }
+          if (key === 'import-map.json') {
+            const deps = { 'core-js': '^3.8.3' }
+            const dependencies = JSON.parse(srcFiles[key]).imports
+            Object.keys(dependencies).forEach((key) => {
+              if (key === 'vue/server-renderer') {
+                return
+              }
+              const name = key
+                .split('/')
+                .filter((s) => s)
+                .join('/')
+              const version = dependencies[key].match(new RegExp(String.raw`https://unpkg.com/.+@([~^]?[0-9]+.*?)/`))[1]
+              dependencies[key] = version.split('.')
+              if (dependencies[key].length < 3) {
+                for (let index = 0; index < 3; index++) {
+                  dependencies[key][index] = dependencies[key][index] ?? '0'
+                }
+                deps[name] = (dependencies[key][0].match(/[~^]/) ? '' : '~') + dependencies[key].join('.')
+              } else {
+                deps[name] = dependencies[key].join('.')
+              }
+            })
+            files['package.json'] = {
+              content: {
+                name: prejectName,
+                version: '0.0.0',
+                private: true,
+                scripts: {
+                  build: 'vite build',
+                  dev: 'vite --host',
+                  lint: 'pnpm run lint:js && pnpm run lint:style',
+                  'lint:fix': 'pnpm run lint:js -- --fix && pnpm run lint:style -- --fix',
+                  'lint:js': 'eslint --ext .js,.vue --ignore-path .gitignore src',
+                  'lint:style': 'stylelint **/*.{vue,css} --ignore-path .gitignore',
+                  serve: 'vite preview'
+                },
+                dependencies: deps,
+                devDependencies: {
+                  '@vitejs/plugin-vue': '^2.3.2',
+                  autoprefixer: '^10.4.7',
+                  eslint: '^8.15.0',
+                  'eslint-config-airbnb-base': '^15.0.0',
+                  'eslint-import-resolver-alias': '^1.1.2',
+                  'eslint-plugin-import': '^2.26.0',
+                  'eslint-plugin-tailwindcss': '^3.5.0',
+                  'eslint-plugin-vue': '^8.7.1',
+                  postcss: '^8.4.13',
+                  'postcss-html': '^1.4.1',
+                  stylelint: '^14.8.2',
+                  'stylelint-config-rational-order': '^0.1.2',
+                  'stylelint-config-recommended-vue': '^1.4.0',
+                  'stylelint-config-standard': '^25.0.0',
+                  tailwindcss: '^3.0.24',
+                  vite: '^2.9.8',
+                  'vite-plugin-eslint': '^1.6.0',
+                  'vite-plugin-stylelint': '^2.2.1',
+                  'vite-svg-loader': '^3.3.0'
+                }
+              }
+            }
+          } else {
+            files['src/' + key] = {
+              content: srcFiles[key]
+            }
+          }
+        })
+
+        const parameters = getParameters({ files, template: 'vue-cli' })
+        const form = document.createElement('form')
+        form.method = 'POST'
+        form.action = 'https://codesandbox.io/api/v1/sandboxes/define'
+        const parametersInput = document.createElement('input')
+        parametersInput.name = 'parameters'
+        parametersInput.value = parameters
+        const queryInput = document.createElement('input')
+        queryInput.name = 'query'
+        queryInput.value = 'module=/src/App.vue'
+        const environmentInput = document.createElement('input')
+        environmentInput.name = 'environment'
+        environmentInput.value = 'server'
+        form.appendChild(parametersInput)
+        form.appendChild(queryInput)
+        form.appendChild(environmentInput)
+        document.body.append(form)
+        form.submit()
+        document.body.removeChild(form)
+      }
+    })
+
+    return {
+      redirect: sandbox !== PREVIEW_SANDBOX.Web
+    }
   }
 }
 </script>