feat(dx): add new dev script behavior

tailored towards the examples within the library
stacksjs · Apr 28, 2022 · 680a333 · 680a333
1 parent 08c58dc
commit 680a333
Show file tree

Hide file tree

Showing 13 changed files with 1,117 additions and 188 deletions.
diff --git a/.scripts/run-example.js b/.scripts/run-example.js
@@ -0,0 +1,59 @@
+/**
+ * Thanks: https://github.com/vitebook/vitebook/tree/main/.scripts
+ */
+
+import { spawn } from 'child_process';
+import { readdirSync, readFileSync } from 'fs';
+import Prompts from 'prompts';
+import path from 'upath';
+import minimist from 'minimist';
+import { fileURLToPath } from 'url';
+
+const { prompts } = Prompts;
+
+const args = minimist(process.argv.slice(2));
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const examplesDir = path.resolve(__dirname, '../examples');
+
+const examples = readdirSync(examplesDir).filter(
+  (dirName) => !dirName.startsWith('.'),
+);
+
+const exampleArg = args._[0];
+
+const exampleArgIndex = examples.findIndex((example) => example === exampleArg);
+
+const exampleIndex =
+  exampleArgIndex >= 0
+    ? exampleArgIndex
+    : await prompts.select({
+        message: 'Pick an example',
+        choices: examples,
+        initial: 0,
+      });
+
+const example = examples[exampleIndex];
+const exampleDir = path.resolve(examplesDir, example);
+const relativePathToExample = path.relative(process.cwd(), exampleDir);
+const examplePkgPath = path.resolve(exampleDir, 'package.json');
+const examplePkgContent = JSON.parse(readFileSync(examplePkgPath).toString());
+
+const scripts = Object.keys(examplePkgContent.scripts);
+const scriptArg = args.script;
+const scriptArgIndex = scripts.findIndex((script) => script === scriptArg);
+
+const scriptIndex =
+  scriptArgIndex >= 0
+    ? scriptArgIndex
+    : await prompts.select({
+        message: 'Pick a script',
+        choices: scripts,
+        initial: 0,
+      });
+
+const script = scripts[scriptIndex];
+
+spawn('npm', ['run', script, `--prefix=${relativePathToExample}`], {
+  stdio: 'inherit',
+});
diff --git a/examples/hello-world/.gitignore b/examples/hello-world/.gitignore
@@ -0,0 +1,3 @@
+.cache
+.temp
+dist/
diff --git a/examples/hello-world/App.vue b/examples/hello-world/App.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { HelloWorld } from '../../src/index'
+</script>
+
+<template>
+  <HelloWorld />
+</template>
diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md
@@ -0,0 +1,10 @@
+# Hello World
+
+This directory contains a simple "Hello World" component usage example.
+
+## Commands
+
+```shell
+# run dev server
+pnpm run dev
+```
diff --git a/index.html → examples/hello-world/index.html b/index.html → examples/hello-world/index.html
@@ -2,17 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/logo.svg" />
+    <link rel="icon" href="./logo.svg" />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Playground</title>
   </head>
   <body>
     <div id="app"></div>
-    <script>
-      // Work-around node polyfills missing in Vite.
-      window.global = window;
-    </script>
-    <script type="module" src="./src/index.ts"></script>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>
diff --git a/examples/hello-world/index.js b/examples/hello-world/index.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/hello-world/logo.svg b/examples/hello-world/logo.svg
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
@@ -0,0 +1,25 @@
+{
+    "name": "@openweb/vue-example",
+    "version": "0.3.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "preinstall": "node ../../.scripts/check-for-pnpm.js && node ../../.scripts/check-node-version.js",
+        "dev": "vite dev --open --port=3333"
+    },
+    "dependencies": {
+        "vue": "^3.0.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^2.3.1",
+        "@vue/compiler-sfc": "^3.2.26",
+        "autoprefixer": "^10.4.5",
+        "postcss": "^8.4.12",
+        "tailwindcss": "^3.0.24",
+        "vite": "^2.8.0"
+    },
+    "engines": {
+        "node": ">=v16.15.0",
+        "pnpm": ">=6.32.11"
+    }
+}