jd-solanki · IcetCode · Jun 13, 2023 · Jun 13, 2023 · Jun 13, 2023 · Jun 13, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -120,4 +120,17 @@ module.exports = {
       },
     },
   },
+  overrides: [
+    {
+      files: ['playground/**/*'],
+      settings: {
+        'import/resolver': {
+          typescript: {
+            alwaysTryTypes: true,
+            project: './playground/tsconfig.json',
+          },
+        },
+      },
+    },
+  ],
 }
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "build": "tsx ./scripts/build.ts",
     "docs:dev": "pnpm --filter @anu-vue/documentation dev",
     "docs:build": "pnpm --filter anu-vue build && pnpm --filter @anu-vue/preset-theme-default build && pnpm --filter @anu-vue/documentation build",
+    "play:dev": "pnpm --filter anu-playground dev",
     "clean": "rimraf packages/anu-vue/dist && rimraf packages/anu-vue/component-meta && rimraf packages/anu-nuxt/dist && rimraf packages/anu-nuxt/playground/.nuxt && rimraf packages/preset-theme-default/dist && rimraf docs/.vitepress/dist && rimraf packages/.vitepress/cache",
     "release": "bumpp package.json packages/**/package.json",
     "lint": "pnpm --filter anu-vue lint",

diff --git a/playground/README.md b/playground/README.md
@@ -0,0 +1,11 @@
+# Anu Playground
+
+## Todos
+-[ ] Better UI
+-[ ] Support `anu-vue` edge version
+-[ ] Add an entry file for initializing `anu`
+
+## Credits
+- [vuejs/repl](https://github.com/vuejs/repl)
+- [element-plus-playground](https://github.com/element-plus/element-plus-playground)
+
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg" href="src/assets/logo.svg" />
+    <title>Anu | Playground</title>
+    <script>
+      // process shim for old versions of @vue/compiler-sfc dependency
+      window.process = { env: {} }
+    </script>
+    <script type="module" src="./src/main.ts"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "anu-playground",
+  "version": "0.0.1",
+  "description": "Anu Playground",
+  "keywords": [
+    "anu",
+    "anu-vue",
+    "playground",
+    "repl"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0",
+    "lint:fix": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 --fix",
+    "release": "bumpp"
+  },
+  "dependencies": {
+    "anu-vue": "npm:anu-vue-edge@latest",
+    "@anu-vue/preset-theme-default": "npm:@anu-vue/preset-theme-default-edge@latest",
+    "@vue/repl": "^2.5.5",
+    "@vueuse/core": "^10.2.1",
+    "compare-versions": "^5.0.3",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@iconify-json/bx": "^1.1.6",
+    "@iconify-json/ri": "^1.1.9",
+    "@types/node": "^20.4.4",
+    "@unocss/transformer-directives": "^0.51.12",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/runtime-core": "^3.3.4",
+    "@vue/tsconfig": "^0.4.0",
+    "bumpp": "^9.1.1",
+    "local-pkg": "^0.4.3",
+    "sass": "^1.63.4",
+    "typescript": "^5.1.3",
+    "unocss": "^0.51.13",
+    "@unocss/reset": "^0.51.13",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.4.7",
+    "vite-plugin-inspect": "^0.7.28",
+    "vue-tsc": "^1.6.5"
+  }
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Repl } from '@vue/repl'
+import { ALoader } from 'anu-vue'
+import Monaco from '@vue/repl/monaco-editor'
+import Header from '@/components/Header.vue'
+
+const loading = ref(true)
+const dark = useDark()
+const store = useStore({
+  serializedState: location.hash.slice(1),
+})
+
+store.init().then(() => (loading.value = false))
+
+// eslint-disable-next-line no-console
+console.log('Store:', store)
+
+// persist state
+watchEffect(() =>
+  history.replaceState({}, '', `#${store.serialize()}`),
+)
+</script>
+
+<template>
+  <div v-if="!loading">
+    <Header :store="store" />
+    <div class="repl-container">
+      <Repl
+        ref="repl"
+        :theme="dark ? 'dark' : 'light'"
+        :editor="Monaco"
+        :store="store"
+        :show-compile-output="true"
+        :auto-resize="true"
+        :clear-console="false"
+      />
+    </div>
+  </div>
+  <template v-else>
+    <ALoader
+      :loading="loading"
+      full-page
+    />
+    <div class="h-100vh" />
+  </template>
+</template>
+
+<style>
+body {
+  --at-apply: m-none text-14px;
+}
+
+.repl-container {
+  height: calc(100vh - var(--nav-height));
+}
+
+.vue-repl {
+  --color-branding: rgb(155, 85, 253)!important;
+  --color-branding-dark: rgb(155, 85, 253)!important;
+}
+</style>
diff --git a/playground/src/assets/logo.svg b/playground/src/assets/logo.svg