docs: site add codesandbox support (#665)

fix #348
IDuxFE · Dec 25, 2021 · e83fc6d · e83fc6d
1 parent 1eafdf6
commit e83fc6d
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 1 deletion.
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@idux/cdk": "^1.0.0-alpha.0",
     "@idux/components": "^1.0.0-alpha.0",
-    "@idux/pro": "^1.0.0-alpha.0"
+    "@idux/pro": "^1.0.0-alpha.0",
+    "codesandbox": "^2.2.3"
   }
 }
diff --git a/packages/site/src/components/global/GlobalCodeBox.vue b/packages/site/src/components/global/GlobalCodeBox.vue
@@ -10,6 +10,7 @@
             <slot name="description"></slot>
           </div>
           <div class="global-code-box-actions">
+            <GlobalCodeSandbox :code="code" />
             <IxTooltip :title="lang === 'zh' ? '在 GitHub 上编辑此示例' : 'Edit this demo on GitHub'">
               <a :href="editHref" class="global-code-box-edit" target="_blank" rel="noopener noreferrer">
                 <IxIcon name="edit" />

diff --git a/packages/site/src/components/global/GlobalCodeSandbox.vue b/packages/site/src/components/global/GlobalCodeSandbox.vue
@@ -0,0 +1,43 @@
+<template>
+  <IxTooltip :title="lang === 'zh' ? '在 CodeSandbox 中打开' : 'Open on CodeSandbox'">
+    <IxIcon name="code" @click="onClick" />
+  </IxTooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from 'vue'
+
+import { appContextToken } from '../../context'
+import { getCsbParams } from '../../global/codesandbox'
+
+export default defineComponent({
+  name: 'GlobalCodeSandbox',
+  props: {
+    code: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const { lang } = inject(appContextToken)!
+
+    const onClick = () => {
+      const div = document.createElement('div')
+      div.style.display = 'none'
+
+      const parameters = getCsbParams(props.code)
+      const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`
+      div.innerHTML = `<a href=${url} target="_blank" rel="noopener noreferrer"></a>`
+
+      document.body.appendChild(div)
+      div.querySelector<HTMLElement>('a')?.click()
+      document.body.removeChild(div)
+    }
+
+    return {
+      onClick,
+      lang,
+    }
+  },
+})
+</script>
diff --git a/packages/site/src/global/codesandbox.ts b/packages/site/src/global/codesandbox.ts
@@ -0,0 +1,176 @@
+import { getParameters } from 'codesandbox/lib/api/define'
+
+export const getCsbParams = (code: string): string => {
+  return getParameters({
+    template: 'node',
+    files: {
+      'package.json': {
+        content: {
+          scripts: {
+            dev: 'vite',
+          },
+          dependencies: {
+            vue: 'next',
+            '@idux/components': 'latest',
+            '@idux/pro': 'latest',
+            '@idux/cdk': 'latest',
+          },
+          devDependencies: {
+            '@vitejs/plugin-vue': 'latest',
+            less: 'latest',
+            typescript: 'latest',
+            vite: 'latest',
+          },
+        },
+        isBinary: false,
+      },
+      'tsconfig.json': {
+        content: tsconfigJson,
+        isBinary: false,
+      },
+      'vite.config.ts': {
+        content: viteConfigTs,
+        isBinary: false,
+      },
+      'index.html': {
+        content: indexHtml,
+        isBinary: false,
+      },
+      'src/Demo.vue': {
+        content: decodeURIComponent(code),
+        isBinary: false,
+      },
+      'src/App.vue': {
+        content: appVue,
+        isBinary: false,
+      },
+      'src/main.ts': {
+        content: mainTs,
+        isBinary: false,
+      },
+      'src/idux.ts': {
+        content: iduxTs,
+        isBinary: false,
+      },
+      'src/env.d.ts': {
+        content: envDTs,
+        isBinary: false,
+      },
+    },
+  })
+}
+
+const indexHtml = `
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>`
+
+const mainTs = `
+import { createApp } from 'vue';
+import Idux from './idux';
+import App from './App.vue';
+createApp(App).use(Idux).mount('#app');`
+
+const appVue = `
+<template>
+  <IxDrawerProvider ref="drawerProviderRef">
+  <IxModalProvider ref="modalProviderRef">
+    <IxNotificationProvider>
+      <IxMessageProvider>
+        <Demo />
+      </IxMessageProvider>
+    </IxNotificationProvider>
+  </IxModalProvider>
+  </IxDrawerProvider>
+</template>
+<script>
+import { defineComponent } from 'vue';
+import Demo from './Demo.vue';
+
+export default defineComponent({
+  components: {
+    Demo,
+  },
+});
+</script>
+<style>
+#app {
+  margin-top: 40px;
+  margin-left: 20px;
+}
+</style>`
+
+const iduxTs = `
+import { App } from 'vue';
+import IduxCdk from '@idux/cdk';
+import IduxComponents from '@idux/components';
+import IduxPro from '@idux/pro';
+
+import '@idux/components/default.min.css';
+import '@idux/pro/default.min.css';
+
+// import { useLocale, en_US } from '@idux/components/i18n';
+// useLocale(en_US);
+
+import {
+  IDUX_ICON_DEPENDENCIES,
+  addIconDefinitions
+} from '@idux/components/icon';
+
+addIconDefinitions(IDUX_ICON_DEPENDENCIES);
+
+const install = (app: App) => {
+  app.use(IduxCdk).use(IduxComponents).use(IduxPro);
+};
+
+export default { install };`
+
+const envDTs = `
+/// <reference types="vite/client" />
+/// <reference types="@idux/cdk/types" />
+/// <reference types="@idux/components/types" />
+/// <reference types="@idux/pro/types" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}`
+
+const tsconfigJson = `
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}`
+
+const viteConfigTs = `
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        additionalData: "@import '@idux/components/style/variable/index.less';",
+      },
+    },
+  },
+})`