feat(plugin): add toolbar codesandbox plugin

designer-demo/registry.js

@@ -22,6 +22,7 @@ import {
   Save,
   Clean,
   Preview,
+  Codesandbox,
   GenerateCode,
   Refresh,
   Collaboration,
@@ -65,7 +66,7 @@ export default {
         center: ['engine.toolbars.media'],
         right: [
           ['engine.toolbars.redoundo', 'engine.toolbars.clean'],
-          ['engine.toolbars.preview'],
+          ['engine.toolbars.preview', 'engine.toolbars.codesandbox'],
           ['engine.toolbars.generate-code', 'engine.toolbars.save']
         ],
         collapse: [
@@ -94,6 +95,7 @@ export default {
     Collaboration,
     Clean,
     Preview,
+    Codesandbox,
     Refresh,
     GenerateCode,
     Save,

designer-demo/vite.config.js

@@ -16,6 +16,9 @@ export default defineConfig((configEnv) => {
     publicDir: path.resolve(__dirname, './public'),
     server: {
       port: 8090
+    },
+    define: {
+      process: {}
     }
   }
 

jsconfig.json

@@ -29,6 +29,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-code": ["packages/toolbars/generate-code/index"],
       "@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
       "@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"],
@@ -58,6 +59,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/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -43,6 +43,7 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-toolbar-logout': path.resolve(basePath, 'packages/toolbars/logout/index.js'),
     '@opentiny/tiny-engine-toolbar-media': path.resolve(basePath, 'packages/toolbars/media/index.js'),
     '@opentiny/tiny-engine-toolbar-preview': path.resolve(basePath, 'packages/toolbars/preview/index.js'),
+    '@opentiny/tiny-engine-toolbar-codesandbox': path.resolve(basePath, 'packages/toolbars/codesandbox/index.js'),
     '@opentiny/tiny-engine-toolbar-generate-code': path.resolve(basePath, 'packages/toolbars/generate-code/index.js'),
     '@opentiny/tiny-engine-toolbar-refresh': path.resolve(basePath, 'packages/toolbars/refresh/index.js'),
     '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(basePath, 'packages/toolbars/redoundo/index.js'),

packages/design-core/index.js

@@ -12,6 +12,7 @@ export { default as Redoundo, HistoryService } from '@opentiny/tiny-engine-toolb
 export { default as Save } from '@opentiny/tiny-engine-toolbar-save'
 export { default as Clean } from '@opentiny/tiny-engine-toolbar-clean'
 export { default as Preview } from '@opentiny/tiny-engine-toolbar-preview'
+export { default as Codesandbox } from '@opentiny/tiny-engine-toolbar-codesandbox'
 export { default as GenerateCode, SaveLocalService } from '@opentiny/tiny-engine-toolbar-generate-code'
 export { default as Refresh } from '@opentiny/tiny-engine-toolbar-refresh'
 export { default as Collaboration } from '@opentiny/tiny-engine-toolbar-collaboration'

packages/design-core/package.json

@@ -45,6 +45,7 @@
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-configurator": "workspace:*",
+    "@opentiny/tiny-engine-dsl-vue": "workspace:^",
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-layout": "workspace:~",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
@@ -72,6 +73,7 @@
     "@opentiny/tiny-engine-theme-light": "workspace:*",
     "@opentiny/tiny-engine-toolbar-breadcrumb": "workspace:*",
     "@opentiny/tiny-engine-toolbar-clean": "workspace:*",
+    "@opentiny/tiny-engine-toolbar-codesandbox": "workspace:*",
     "@opentiny/tiny-engine-toolbar-collaboration": "workspace:*",
     "@opentiny/tiny-engine-toolbar-fullscreen": "workspace:*",
     "@opentiny/tiny-engine-toolbar-generate-code": "workspace:*",
@@ -93,6 +95,7 @@
     "@vue/babel-plugin-jsx": "^1.2.5",
     "@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/toolbars/codesandbox/index.js

@@ -0,0 +1,7 @@
+import entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry
+}

packages/toolbars/codesandbox/meta.js

@@ -0,0 +1,11 @@
+export default {
+  id: 'engine.toolbars.codesandbox',
+  type: 'toolbars',
+  title: 'codesandbox',
+  options: {
+    icon: {
+      default: 'code-sandbox'
+    },
+    renderType: 'icon'
+  }
+}

packages/toolbars/codesandbox/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@opentiny/tiny-engine-toolbar-codesandbox",
+  "version": "2.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/toolbars/codesandbox"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
+  "dependencies": {
+    "@opentiny/tiny-engine-canvas": "workspace:*",
+    "@opentiny/tiny-engine-common": "workspace:*",
+    "@opentiny/tiny-engine-utils": "workspace:*",
+    "codesandbox": "^2.2.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "vite": "^5.4.2"
+  },
+  "peerDependencies": {
+    "@opentiny/vue": "^3.14.0",
+    "vue": "^3.4.15"
+  }
+}

packages/toolbars/codesandbox/src/Main.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="toolbar-save">
+    <toolbar-base
+      content="CodeSandbox"
+      :icon="options.icon.default || options.icon"
+      :options="options"
+      @click-api="preview"
+    >
+    </toolbar-base>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue'
+import { useLayout, useNotify, useSaveLocal } from '@opentiny/tiny-engine-meta-register'
+import { ToolbarBase } from '@opentiny/tiny-engine-common'
+import { getParameters } from 'codesandbox/lib/api/define'
+import { codesandboxFiles } from './codesandboxFiles'
+
+export default {
+  components: {
+    ToolbarBase
+  },
+  props: {
+    options: {
+      type: String,
+      default: ''
+    }
+  },
+  setup() {
+    const state = reactive({
+      generating: false
+    })
+
+    const preview = async () => {
+      if (useLayout().isEmptyPage()) {
+        useNotify({
+          type: 'warning',
+          message: '请先创建页面'
+        })
+
+        return
+      }
+
+      try {
+        const [_, fileRes] = await useSaveLocal().getPreGenerateInfo()
+
+        const files = {}
+        fileRes.forEach((file) => {
+          // 使用 pnpm 包管理
+          if (file.filePath === 'README.md') {
+            files[file.filePath] = { content: file.fileContent.replace(/npm /g, 'pnpm ') }
+          } else {
+            files[file.filePath] = { content: file.fileContent }
+          }
+        })
+        Object.assign(files, codesandboxFiles)
+
+        const parameters = getParameters({ files, template: 'vue-cli' })
+        const form = document.createElement('form')
+        form.method = 'POST'
+        form.action = 'https://codesandbox.io/api/v1/sandboxes/define'
+        form.target = '_blank'
+        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)
+        state.generating = false
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error)
+        useNotify({ type: 'error', title: '代码生成失败', message: error?.message || error })
+        state.generating = false
+      }
+    }
+
+    return {
+      preview
+    }
+  }
+}
+</script>

packages/toolbars/codesandbox/src/codesandboxFiles.js

@@ -0,0 +1,27 @@
+export const codesandboxFiles = {
+  '.codesandbox/tasks.json': {
+    content: String.raw`{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+  {
+    "name": "pnpm install",
+    "command": "pnpm install"
+  }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+  "install-dependencies": {
+    "name": "Install Dependencies",
+    "command": "pnpm install"
+  },
+  "start-app": {
+    "name": "Run Dev Server",
+    "command": "pnpm run dev",
+    "runAtStart": true
+  }
+  }
+  }
+  `
+  }
+}

packages/toolbars/codesandbox/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  publicDir: false,
+  resolve: {},
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, './index.js'),
+      name: 'toolbar-codesandbox',
+      fileName: () => 'index.js',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
+    }
+  }
+})