feat: playground

playground/src/App.vue

@@ -1,38 +1,65 @@
-<script setup>
-import { watchEffect } from 'vue'
+<script setup lang="ts">
 import { Repl, ReplStore } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
 
-// retrieve some configuration options from the URL
-const query = new URLSearchParams(location.search)
-
+const hash = location.hash.slice(1)
 const store = new ReplStore({
-  // initialize repl with previously serialized state
-  serializedState: location.hash.slice(1),
-
-  // starts on the output pane (mobile only) if the URL has a showOutput query
-  showOutput: query.has('showOutput'),
-  // starts on a different tab on the output pane if the URL has a outputMode query
-  // and default to the "preview" tab
-  outputMode: query.get('outputMode') || 'preview',
-
-  // specify the default URL to import Vue runtime from in the sandbox
-  // default is the CDN link from jsdelivr.com with version matching Vue's version
-  // from peerDependency
-  defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js',
+  serializedState: hash,
+  showOutput: true,
+  outputMode: 'preview',
 })
 
-// persist state to URL hash
-watchEffect(() => history.replaceState({}, '', store.serialize()))
+if (!hash) {
+  store.setFiles({
+    'App.vue': `<script setup>
+const Leafer = LeaferUI.Leafer
+const Rect = LeaferUI.Rect
+
+const leafer = new Leafer({ view: window })
 
-// pre-set import map
-store.setImportMap({
-  imports: {
-    myLib: 'cdn link to esm build of myLib',
-  },
+const rect = new Rect({
+  x: 100,
+  y: 100,
+  width: 200,
+  height: 200,
+  fill: '#32cd79',
+  draggable: true,
 })
+
+leafer.add(rect)
+<\/script>`,
+  })
+}
+
+const previewOptions = {
+  headHTML: '<script src="https://unpkg.com/leafer-ui"><\/script>',
+}
+function share() {
+  const hash = store.serialize()
+  const shareUrl = location.origin + hash
+
+  navigator.clipboard.writeText(shareUrl)
+  alert('已复制分享链接')
+}
 </script>
 
 <template>
-  <Repl :store="store" :editor="Monaco" :show-compile-output="true" />
+  <button @click="share">
+    share
+  </button>
+  <Repl
+    :store="store"
+    :editor="Monaco"
+    :preview-options="previewOptions"
+    :show-compile-output="false"
+    :show-import-map="false"
+    :show-ts-config="false"
+    :clear-console="false"
+  />
 </template>
+
+<style>
+.vue-repl {
+  height: calc(100vh - 39px) !important;
+}
+</style>