create-ui0 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import prompts from 'prompts';
@@ -7,6 +7,21 @@ import prompts from 'prompts';
  * Usage: npm create ui0 [dir]
  */
 const templateDir = fileURLToPath(new URL('../template', import.meta.url));
+const componentTemplateDir = fileURLToPath(new URL('../template-component', import.meta.url));
+const toKebab = (s) => s
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+const toPascal = (s) => s.split(/[-\s_]+/).map((w) => w[0].toUpperCase() + w.slice(1)).join('');
+const toCamel = (s) => {
+    const p = toPascal(s);
+    return p[0].toLowerCase() + p.slice(1);
+};
+/** substitutes {%kebab%} / {%Pascal%} / {%camel%} in a template file's content */
+const substitute = (content, name) => content
+    .replaceAll('{%kebab%}', toKebab(name))
+    .replaceAll('{%Pascal%}', toPascal(name))
+    .replaceAll('{%camel%}', toCamel(name));
 /** selectable template features - each adds deps (and a demo section) */
 const FEATURES = [
     {
@@ -48,7 +63,57 @@ const onCancel = () => {
     console.log('aborted');
     process.exit(0);
 };
+/**
+ * `create-ui0 component [Name]` - scaffolds a single component folder from
+ * template-component/ into the project at cwd (src/components/<kebab>/).
+ */
+const runComponent = async () => {
+    const argName = process.argv[3];
+    const { name } = await prompts({ type: argName ? null : 'text', name: 'name', message: 'Component name (PascalCase, e.g. MyButton)' }, { onCancel });
+    const componentName = argName ?? name;
+    if (!componentName)
+        onCancel();
+    const kebab = toKebab(componentName);
+    const { target } = await prompts({
+        type: 'text',
+        name: 'target',
+        message: 'Target directory',
+        initial: path.join('src', 'components', kebab)
+    }, { onCancel });
+    const { spec } = await prompts({ type: 'confirm', name: 'spec', message: 'Include a vitest spec (adds vitest + @vue/test-utils to devDependencies)?', initial: false }, { onCancel });
+    const dir = path.resolve(process.cwd(), target);
+    if (existsSync(dir)) {
+        console.error(`${target} already exists`);
+        process.exit(1);
+    }
+    mkdirSync(dir, { recursive: true });
+    const files = readdirSync(componentTemplateDir).filter((f) => spec || f !== 'name.spec.ts');
+    for (const file of files) {
+        const content = substitute(readFileSync(path.join(componentTemplateDir, file), 'utf8'), componentName);
+        writeFileSync(path.join(dir, file.replace(/^name\./, `${kebab}.`)), content);
+    }
+    if (spec) {
+        const manifestPath = path.join(process.cwd(), 'package.json');
+        if (existsSync(manifestPath)) {
+            const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+            manifest.devDependencies = {
+                ...manifest.devDependencies,
+                '@vue/test-utils': '^2.4.6',
+                'happy-dom': '^15.0.0',
+                vitest: '^5.0.5'
+            };
+            writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
+        }
+    }
+    console.log(`\nCreated ${target}:`);
+    for (const file of files)
+        console.log(`  ${file.replace(/^name\./, `${kebab}.`)}`);
+};
 const run = async () => {
+    if (process.argv[2] === 'component') {
+        await runComponent();
+        return;
+    }
     const argDir = process.argv[2];
     const { dir } = await prompts({
         type: argDir ? null : 'text',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ui0",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Scaffold a ui0 (Vue + @ui0) app - npm create ui0",
   "type": "module",
   "bin": {
@@ -8,7 +8,8 @@
   },
   "files": [
     "dist",
-    "template"
+    "template",
+    "template-component"
   ],
   "scripts": {
     "create:build": "tsc -p tsconfig.json",

package/template/package.json.tpl

@@ -17,6 +17,7 @@
     "@ui0/types": "^0.1.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "sass-embedded": "^1.80.0",
+    "typescript": "~6.0.3",
     "vite": "^8.3.5"
   }
 }

package/template-component/name.module.css

@@ -0,0 +1,3 @@
+.{%camel%} {
+  /* component base styles */
+}

package/template-component/name.spec.ts

@@ -0,0 +1,12 @@
+// @vitest-environment happy-dom
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import {%Pascal%} from './{%kebab%}.vue'
+
+describe('{%kebab%}', () => {
+  it('renders', () => {
+    const wrapper = mount({%Pascal%})
+    expect(wrapper.find('[data-0="{%kebab%}"]').exists()).toBe(true)
+  })
+})

package/template-component/name.types.ts

@@ -0,0 +1,7 @@
+export interface {%Pascal%}Props {
+  // add props here
+}
+
+export interface {%Pascal%}Slots {
+  default: () => void
+}

package/template-component/name.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    data-0="{%kebab%}"
+    :class="$styles.{%camel%}">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useCssModule } from 'vue'
+
+  import type { {%Pascal%}Props } from './{%kebab%}.types'
+  import './{%kebab%}.module.css'
+
+  const props = withDefaults(defineProps<{%Pascal%}Props>(), {})
+  const $styles = useCssModule()
+</script>