feat(playground): playground

Author: a145789

playground/.gitignore

@@ -27,5 +27,5 @@ coverage
 *.sln
 *.sw?
 
-auto-components.d.ts
+components.d.ts
 auto-imports.d.ts

playground/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "run-p build-only",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
@@ -16,6 +16,9 @@
     "@unocss/reset": "^0.50.3",
     "@varlet/touch-emulator": "^2.8.5",
     "@varlet/ui": "^2.8.5",
+    "@vueuse/core": "^9.13.0",
+    "monaco-editor": "^0.36.1",
+    "theme-vitesse": "^0.6.3",
     "vue": "^3.2.47"
   },
   "devDependencies": {

playground/src/App.vue

@@ -1,80 +1,23 @@
 <script setup lang="ts">
-import { transformScript, FileType } from '../../src/index'
-import initSwc, { parseSync } from '@swc/wasm-web'
+import * as monaco from 'monaco-editor';
+import { useDark } from '@vueuse/core';
 
-const count = ref(0)
-
-const text = ref('')
-
-async function init() {
-  await initSwc()
-
-  const code = transformScript({
-    fileType: FileType.ts,
-    script: `
-    import { defineComponent, PropType, ref } from "vue"
-import Header from "../components/Header.vue"
-import Tab from "../components/Tab.vue"
-import touchdir from "vtouchdir"
-export default defineComponent({
-  name: 'App',
-  components: {
-    Header,
-    Tab,
-  },
-  directives: {
-    force: {},
-    touchdir,
-  },
-  props: {
-    items: Array as PropType<number[]>
-  },
-  emit: ["click"],
-  setup(props, { emit, attrs, slots: mySlots, expose }) {
-    const bar = ref(0)
-    expose({ bar })
-    emit("change");
-    return {
-      bar
-    }
-  }
-})`.trim(),
-    offset: 0,
-    parseSync: parseSync as any,
-    output: {
-      warn() {
-
-      },
-      log() {
-
-      },
-      success() {
-
-      },
-      error() {
-      }
-    }
-  })
-
-  if (code) {
-    text.value = code
-  }
-}
-
-init()
+const isDark = useDark()
+watchEffect(() => {
+  monaco.editor.setTheme(isDark.value ? 'vitesse-dark' : 'vitesse-light');
+})
 </script>
 
 <template>
-  <div>
-    <div>
-      {{ count }}
-      <var-button @click="count++" type="primary">click</var-button>
+  <div class="flex flex-col h-full">
+    <Header class="flex-shrink-0" />
+    <div class="flex-1 box-border pt-3px flex">
+      <Edit />
+
+      <div class="flex-shrink-0 w-2px bg-[rgba(0,0,0,0.2)] dark:bg-#ddd" />
+
+      <View />
     </div>
-    <var-paper :elevation="2">
-      <pre>
-              {{ text }}
-            </pre>
-    </var-paper>
   </div>
 </template>
 

playground/src/components/Edit.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { code, codeType } = useUrlKeepParams()
+
+const monaco = ref<{ setValue: (value: string) => void } | null>(null)
+
+const editCode = computed({
+  get() {
+    return atou(code.value)
+  },
+  set(value) {
+    code.value = utoa(value)
+  }
+})
+
+watch(() => codeType.value, () => {
+  code.value = ''
+  monaco.value?.setValue('')
+})
+
+const language = computed(() => {
+  return codeType.value === 'sfc' ? 'html' : 'javascript'
+})
+</script>
+
+<template>
+  <div class="h-full flex-1 flex flex-col">
+    <var-paper class="flex-shrink-0 px-30px flex items-center" :elevation="1" :height="36">
+      <var-radio-group v-model="codeType" class="text-14px">
+        <var-radio :checked-value="CodeType.SFC" icon-size="18px">
+          <span :class="TEXT_COLOR">SFC</span>
+        </var-radio>
+        <var-radio :checked-value="CodeType.SCRIPT" icon-size="18px">
+          <span :class="TEXT_COLOR">Script</span>
+        </var-radio>
+      </var-radio-group>
+    </var-paper>
+
+    <div class="flex-1 box-border pt-2px">
+      <Monaco v-model="editCode" :language="language" ref="monaco" />
+    </div>
+  </div>
+</template>

playground/src/components/Header.vue

@@ -0,0 +1,65 @@
+<script setup lang="tsx">
+import { StyleProvider, Themes } from '@varlet/ui';
+import { useDark, useToggle } from '@vueuse/core'
+import Share from './Share.vue'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+watchEffect(() => {
+  StyleProvider(isDark.value ? Themes.dark : null)
+})
+
+async function shareLink() {
+  await navigator.clipboard.writeText(location.href)
+  Snackbar.success('Sharable URL has been copied to clipboard.')
+}
+
+const handleIcon = computed(() => (
+  <>
+    <var-button round>
+      <var-icon name={isDark.value ? 'white-balance-sunny' : 'weather-night'} size={ICON_SIZE}
+        transition="300" onClick={() => toggleDark()} />
+    </var-button>
+
+    <var-button type="info" round>
+      <Share size={ICON_SIZE} onClick={() => shareLink()} title="share link" />
+    </var-button>
+
+    <var-link target="_blank" href="https://github.com/a145789/vue3-script-to-setup" underline="none">
+      <var-button type="success" round>
+        <var-icon name="github" size={ICON_SIZE} title="github" />
+      </var-button>
+    </var-link>
+  </>
+))
+
+const iconClass = 'text-#555 dark:text-#fff'
+</script>
+
+<template>
+  <var-paper :elevation="2" :height="50" class="px-25px">
+    <var-row align="center" justify="space-between" class="h-full">
+      <var-col :span="12" :xs="20">
+        <div class="font-500 text-20px" :class="TEXT_COLOR">Vue3 script to script-setup</div>
+      </var-col>
+      <var-col :span="12" :xs="2">
+        <var-space justify="flex-end" class="w-full hidden sm:flex" :class="iconClass">
+          <component :is="handleIcon" />
+        </var-space>
+
+        <var-menu>
+          <var-button round class="block sm:hidden">
+            <var-icon name="menu" :size="ICON_SIZE" :class="iconClass" />
+          </var-button>
+
+          <template #menu>
+            <div class="flex flex-col px-12px py-8px h-120px justify-between" :class="iconClass">
+              <component :is="handleIcon" />
+            </div>
+          </template>
+        </var-menu>
+      </var-col>
+    </var-row>
+  </var-paper>
+</template>

playground/src/components/Monaco.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="editorContainer" class="h-full w-full" />
+</template>
+
+<script lang="ts" setup>
+import * as monaco from 'monaco-editor';
+
+const props = defineProps<{ modelValue: string, language: 'typescript' | 'html', readOnly?: boolean }>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', code: string): void }>()
+
+const editorContainer = ref<HTMLElement | null>(null);
+const editor = shallowRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+
+onMounted(() => {
+  editor.value = monaco.editor.create(editorContainer.value!, {
+    value: props.modelValue,
+    language: props.language,
+    readOnly: props.readOnly,
+  });
+
+  editor.value.onDidChangeModelContent(() => {
+    emit("update:modelValue", editor.value!.getValue());
+  });
+});
+
+function setValue(value: string) {
+  editor.value?.setValue(value)
+}
+
+onUnmounted(() => {
+  editor.value?.dispose();
+});
+
+defineExpose({ setValue })
+</script>

playground/src/components/Share.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg :width="`${size}px`" :height="`${size}px`" viewBox="0 0 24 24">
+    <g fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="18" cy="5" r="3" />
+      <circle cx="6" cy="12" r="3" />
+      <circle cx="18" cy="19" r="3" />
+      <path d="M8.59 13.51l6.83 3.98" />
+      <path d="M15.41 6.51l-6.82 3.98" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ size: number }>()
+</script>

playground/src/components/View.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+const { code: originCode, codeType, propsNotOnlyTs } = useUrlKeepParams()
+
+const output = {
+  warn(message: string) {
+    Snackbar.warning(message)
+  },
+  error(message: string) {
+    Snackbar.error(message)
+  },
+  log(message: string) {
+    Snackbar.info(message)
+  },
+  success(message: string) {
+    Snackbar.success(message)
+  },
+}
+
+const code = useTransform(codeType, computed(() => atou(originCode.value)), computed(() => Boolean(Number(propsNotOnlyTs.value))), output)
+
+const language = computed(() => {
+  return codeType.value === 'sfc' ? 'html' : 'javascript'
+})
+
+const { copy } = useClipboard()
+
+function copyCode() {
+  copy(code.value)
+
+  output.success(`Copied code to clipboard!`)
+}
+
+const monaco = ref<{ setValue: (value: string) => void } | null>(null)
+watchEffect(() => {
+  monaco.value?.setValue(code.value)
+})
+</script>
+
+<template>
+  <div class="h-full flex-1 flex flex-col">
+    <var-paper class="flex-shrink-0 px-30px flex items-center justify-end" :elevation="1" :height="36">
+      <var-checkbox v-model="propsNotOnlyTs" checked-value="1" unchecked-value="0">
+        <span :class="TEXT_COLOR">PropsNotOnlyTs</span>
+      </var-checkbox>
+      <var-button type="warning" round class="ml-6px">
+        <var-icon name="content-copy" :size="16" title="copy code" @click="copyCode" />
+      </var-button>
+    </var-paper>
+
+    <div class="flex-1 box-border pt-2px">
+      <Monaco v-model="code" :language="language" read-only ref="monaco" />
+    </div>
+  </div>
+</template>

playground/src/composables/encode.ts

@@ -0,0 +1,13 @@
+export function utoa(data: string): string {
+  if (!data) {
+    return "";
+  }
+  return btoa(unescape(encodeURIComponent(data)));
+}
+
+export function atou(base64: string): string {
+  if (!base64) {
+    return "";
+  }
+  return decodeURIComponent(escape(atob(base64)));
+}

playground/src/composables/store.ts

@@ -0,0 +1,32 @@
+import { CodeType } from "@/constants";
+import { useUrlSearchParams } from "@vueuse/core";
+
+export function createStore<T extends object>(cb: () => T) {
+  const value = cb();
+
+  return () => toRefs(value);
+}
+
+const initialValue: {
+  code: string;
+  codeType: CodeType;
+  propsNotOnlyTs: "0" | "1";
+} = {
+  code: "",
+  codeType: CodeType.SFC,
+  propsNotOnlyTs: "0",
+};
+export const useUrlKeepParams = createStore(() => {
+  const params = useUrlSearchParams("hash-params", {
+    initialValue,
+  });
+
+  const keys = Object.keys(initialValue) as (keyof typeof initialValue)[];
+  for (const key of keys) {
+    if (!(key in params)) {
+      (params as any)[key] = initialValue[key];
+    }
+  }
+
+  return params;
+});