feat(demo): add CodeSandbox integration

Added CodeSandbox integration to the PixiJSContainer component with separate functions for generating codesandbox parameters for a standalone Vue app and a component demo. Also updated the demo in the guide to use the PixiJSContainer component without an app.
hairyf · Jun 3, 2023 · 9f8a130 · 9f8a130
1 parent 6c9fa3f
commit 9f8a130
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 1 deletion.
diff --git a/docs/.vitepress/theme/components/PixiJSContainer/index.vue b/docs/.vitepress/theme/components/PixiJSContainer/index.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { useMessage } from 'naive-ui'
 import { Application } from 'vue3-pixi'
 import Card from '../Card/index.vue'
+import { getCodeSandboxParams, getWithAppCodeSandboxParams } from './utils'
 
 const props = withDefaults(
   defineProps<{
@@ -32,6 +33,10 @@ const highlightedHtml = computed(() => decodeURIComponent(isUsingTs.value ? prop
 const code = computed(() => isUsingTs.value ? sfcTsCode.value : sfcJsCode.value)
 const githubBlobURL = 'https://github.com/hairyf/vue3-pixi/blob/main/'
 
+const sandboxParams = computed(() => props.app
+  ? getWithAppCodeSandboxParams(code.value)
+  : getCodeSandboxParams(code.value))
+
 function onShowHighlighted() {
   showHighlighted.value = !showHighlighted.value
 }
@@ -54,7 +59,14 @@ async function onCopyCode() {
         <div class="cursor-pointer i-akar-icons-javascript-fill p-10px" :class="[!isUsingTs && 'text-amber']" @click="isUsingTs = false" />
       </div>
       <div class="flex gap-2">
-        <button v-tooltip="'Edit in CodeSandbox'" class="cursor-pointer p2 i-ph-codesandbox-logo text-17px" />
+        <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank" style="display: flex; padding: 0">
+          <input type="hidden" name="parameters" :value="sandboxParams">
+          <button
+            v-tooltip="'Edit in CodeSandbox'"
+            type="submit"
+            class="cursor-pointer p2 i-ph-codesandbox-logo text-17px"
+          />
+        </form>
         <button v-tooltip="'Edit on GitHub'" class="cursor-pointer p2 i-solar-pen-new-square-broken" @click="onOpenEditGithub" />
         <button v-tooltip="'Copy Code'" class="cursor-pointer p2 i-solar-copy-broken" @click="onCopyCode" />
         <button

diff --git a/docs/.vitepress/theme/components/PixiJSContainer/utils/index.ts b/docs/.vitepress/theme/components/PixiJSContainer/utils/index.ts
@@ -0,0 +1,109 @@
+import { getParameters } from 'codesandbox/lib/api/define'
+
+const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Naive UI Demo</title>
+    <style>
+      body {
+        padding: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+`
+
+const appVue = `<template>
+    <demo />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import Demo from "./Demo.vue";
+
+export default defineComponent({
+components: {
+  Demo,
+},
+});
+</script>`
+
+const appProviderVue = `<template>
+  <Application :width="300" :height="300">
+    <demo />
+  </Application>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { Application } from 'vue3-pixi'
+import Demo from "./Demo.vue";
+
+export default defineComponent({
+components: {
+  Demo,
+},
+});
+</script>`
+
+const mainJs = `import { createApp } from "vue";
+import App from "./App.vue";
+const app = createApp(App);
+app.mount("#app");
+`
+
+function getDependencies(code: string) {
+  return (code.match(/from '([^']+)'\n/g) || [])
+    .map(v => v.slice(6, v.length - 2))
+    .reduce((prevV, dep) => {
+      prevV[dep] = 'latest'
+      return prevV
+    }, {})
+}
+
+export function getWithAppCodeSandboxParams(code: string) {
+  return (getParameters as any)({
+    files: {
+      'package.json': {
+        content: {
+          dependencies: {
+            ...getDependencies(code),
+            'vue': 'next',
+            'vue-router': 'next',
+            'vue3-pixi': 'latest',
+          },
+          devDependencies: { '@vue/cli-plugin-babel': '~4.5.0', 'typescript': '~4.6.3' },
+        },
+      },
+      'index.html': { content: indexHtml },
+      'src/Demo.vue': { content: code },
+      'src/App.vue': { content: appProviderVue },
+      'src/main.js': { content: mainJs },
+    },
+  })
+}
+
+export function getCodeSandboxParams(code: string) {
+  return (getParameters as any)({
+    files: {
+      'package.json': {
+        content: {
+          dependencies: {
+            ...getDependencies(code),
+            'vue': 'next',
+            'vue-router': 'next',
+            'vue3-pixi': 'latest',
+          },
+          devDependencies: { '@vue/cli-plugin-babel': '~4.5.0', 'typescript': '~4.6.3' },
+        },
+      },
+      'index.html': { content: indexHtml },
+      'src/Demo.vue': { content: code },
+      'src/App.vue': { content: appVue },
+      'src/main.js': { content: mainJs },
+    },
+  })
+}
diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -0,0 +1,2 @@
+
+<demo src="./demo/basic.vue" :app="false" />