feat: playground

yjl9903 · Jan 29, 2023 · 885fdfa · 885fdfa
1 parent 6736b94
commit 885fdfa
Show file tree

Hide file tree

Showing 5 changed files with 639 additions and 3 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -7,7 +7,22 @@
   <title>Vite Plugin Sharedworker</title>
 </head>
 <body>
-  <div id="build-time"></div>
+  <div p4 space-y-4>
+    <div>
+      <input id="ia" type="number" value="1" class="border-1 border-base rounded py2 px2 outline-none">
+    </div>
+    <div>
+      <input id="ib" type="number" value="1" class="border-1 border-base rounded py2 px2 outline-none">
+    </div>
+    <div space-x-2>
+      <button id="add" class="button bg-green-200/60 hover:bg-green-200">ADD</button>
+      <button id="sub" class="button bg-red-200/60 hover:bg-red-200">SUB</button>
+    </div>
+    <div>
+      <span class="text-gray-500">Result:</span>
+      <span id="result"></span>
+    </div>
+  </div>
   <script type="module" src="/main.ts"></script>
 </body>
 </html>
diff --git a/playground/main.ts b/playground/main.ts
@@ -1,11 +1,33 @@
+import 'uno.css';
+import '@onekuma/reset/tailwind.css';
+
 import { add, sub } from './worker';
 
 async function bootstrap() {
   console.log(await add(1, 2));
   console.log(await sub(2, 1));
 }
 
+function register() {
+  const input1 = document.getElementById('ia')! as HTMLInputElement;
+  const input2 = document.getElementById('ib')! as HTMLInputElement;
+  const result = document.getElementById('result')!;
+
+  const addBtn = document.getElementById('add')!;
+  const subBtn = document.getElementById('sub')!;
+
+  addBtn.addEventListener('click', async () => {
+    const r = await add(+input1.value, +input2.value);
+    result.innerText = String(r);
+  });
+  subBtn.addEventListener('click', async () => {
+    const r = await sub(+input1.value, +input2.value);
+    result.innerText = String(r);
+  });
+}
+
 bootstrap();
+register();
 
 // const worker = new SharedWorker(new URL('./worker/index.ts', import.meta.url), {
 //   type: 'module',

diff --git a/playground/package.json b/playground/package.json
@@ -7,6 +7,8 @@
     "dev": "vite"
   },
   "devDependencies": {
+    "@onekuma/reset": "^0.1.4",
+    "unocss": "^0.49.1",
     "vite": "^4.0.4",
     "vite-plugin-info": "^0.4.0",
     "vite-plugin-sharedworker": "workspace:*"

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -1,8 +1,76 @@
 import { defineConfig } from 'vite';
 
+import {
+  presetUno,
+  presetIcons,
+  presetWebFonts,
+  presetTypography,
+  presetAttributify,
+  transformerDirectives,
+  transformerVariantGroup
+} from 'unocss';
+import Uno from 'unocss/vite';
+
 import BuildInfo from 'vite-plugin-info';
 import SharedWorkerClient from 'vite-plugin-sharedworker';
 
 export default defineConfig({
-  plugins: [BuildInfo(), SharedWorkerClient()]
+  plugins: [
+    BuildInfo(),
+    SharedWorkerClient(),
+    Uno({
+      presets: [
+        presetUno(),
+        presetAttributify(),
+        presetIcons({
+          scale: 1.1,
+          extraProperties: {
+            height: '1em',
+            'flex-shrink': '0',
+            display: 'inline-block'
+          }
+        }),
+        presetWebFonts({
+          provider: 'google',
+          fonts: {
+            sans: ['Inter', 'Noto Sans Simplified Chinese'],
+            mono: 'Input Mono'
+          }
+        }),
+        presetTypography()
+      ],
+      transformers: [transformerDirectives(), transformerVariantGroup()],
+      shortcuts: {
+        button: 'inline-flex items-center justify-center rounded-2 cursor-pointer select-none p2',
+        'border-base': 'border-gray/40 dark:border-gray/40',
+        'text-base-50': 'text-neutral-50 dark:text-light-50',
+        'text-base-100': 'text-neutral-100 dark:text-light-100',
+        'text-base-200': 'text-neutral-200 dark:text-light-200',
+        'text-base-300': 'text-neutral-300 dark:text-light-300',
+        'text-base-400': 'text-neutral-400 dark:text-light-400',
+        'text-base-500': 'text-neutral-500 dark:text-light-500',
+        'text-base-600': 'text-neutral-600 dark:text-light-600',
+        'text-base-700': 'text-neutral-700 dark:text-light-700',
+        'text-base-800': 'text-neutral-800 dark:text-light-800',
+        'text-base-900': 'text-neutral-900 dark:text-light-900'
+      },
+      theme: {
+        colors: {
+          'main-50': '#fafafa',
+          'main-100': '#f5f5f5',
+          'main-200': '#e5e5e5',
+          'main-300': '#d4d4d4',
+          'main-400': '#a3a3a3',
+          'main-500': '#737373',
+          'main-600': '#525252',
+          'main-700': '#404040',
+          'main-800': '#262626',
+          'main-900': '#171717'
+        },
+        boxShadow: {
+          box: '0 2px 3px rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 10%)'
+        }
+      }
+    })
+  ]
 });