create-ui0 0.1.2 → 0.1.4

package/dist/index.js

@@ -6,14 +6,20 @@ import prompts from 'prompts';
 /**
  * create-ui0 - scaffolds a ui0 (Vue + @ui0 packages) app.
  * Usage: npm create ui0 [dir]
+ *        npm create ui0 [dir] [vite|nuxt] [features]   (non-interactive;
+ *        features: comma list of flex,button,icon)
  */
 const templateDir = fileURLToPath(new URL('../template', import.meta.url));
+const templateNuxtDir = fileURLToPath(new URL('../template-nuxt', 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 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);
@@ -28,8 +34,9 @@ const FEATURES = [
     {
         id: 'flex',
         title: 'Flex layout',
-        deps: { '@ui0/flex': '^0.1.1' },
+        deps: { '@ui0/flex': '^0.1.3' },
         importLine: "import Flex from '@ui0/flex'",
+        cssLines: ["'@ui0/flex/style.css'"],
         section: `      <section>
         <h2>Flex</h2>
         <Flex items="center">
@@ -42,8 +49,9 @@ const FEATURES = [
     {
         id: 'button',
         title: 'Button component',
-        deps: { '@ui0/button': '^0.1.1' },
+        deps: { '@ui0/button': '^0.1.3' },
         importLine: "import Button from '@ui0/button'",
+        cssLines: ["'@ui0/button/style.css'"],
         section: `      <section>
         <h2>Button</h2>
         <Button>default</Button>
@@ -52,11 +60,19 @@ const FEATURES = [
     {
         id: 'icon',
         title: 'Icon component + ui0 icon pack',
-        deps: { '@ui0/icon': '^0.1.1', '@ui0/icons': '^0.1.1' },
+        deps: { '@ui0/icon': '^0.1.3', '@ui0/icons': '^0.1.3' },
         importLine: "import { Icon } from '@ui0/icon'",
+        cssLines: ["'@ui0/icon/style.css'", "'@ui0/icons/style.css'"],
         section: `      <section>
         <h2>Icon</h2>
         <Icon value="ui0/heart-alt" />
+      </section>`,
+        // the nuxt template also wires the svg loader, so the demo shows an
+        // app-local icon next to the built-in pack one
+        sectionNuxt: `      <section>
+        <h2>Icon</h2>
+        <Icon value="ui0/heart-alt" />
+        <Icon value="assets/icons/bookmark" />
       </section>`
     }
 ];
@@ -81,7 +97,12 @@ const runComponent = async () => {
         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 { 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`);
@@ -116,6 +137,8 @@ const run = async () => {
         return;
     }
     const argDir = process.argv[2];
+    const argHost = process.argv[3];
+    const argFeatures = process.argv[4]?.split(',').filter(Boolean);
     const { dir } = await prompts({
         type: argDir ? null : 'text',
         name: 'dir',
@@ -125,42 +148,88 @@ const run = async () => {
     const target = path.resolve(process.cwd(), argDir ?? dir);
     const name = path.basename(target);
     if (existsSync(target)) {
-        const { overwrite } = await prompts({ type: 'confirm', name: 'overwrite', message: `${name} exists - continue and fill missing files?`, initial: false }, { onCancel });
+        const { overwrite } = await prompts({
+            type: 'confirm',
+            name: 'overwrite',
+            message: `${name} exists - continue and fill missing files?`,
+            initial: false
+        }, { onCancel });
         if (!overwrite)
             process.exit(0);
     }
-    const { features } = (await prompts({
-        type: 'multiselect',
+    const { host: pickedHost } = (await prompts({
+        type: argHost ? null : 'select',
+        name: 'host',
+        message: 'App host',
+        choices: [
+            { title: 'Vite (SPA)', value: 'vite' },
+            { title: 'Nuxt (SSR, @ui0/nuxt)', value: 'nuxt' }
+        ],
+        initial: 0
+    }, { onCancel }));
+    const host = argHost ?? pickedHost;
+    const { features: pickedFeatures } = (await prompts({
+        type: argFeatures ? null : 'multiselect',
         name: 'features',
         message: 'Packages to include',
         choices: FEATURES.map((f) => ({ title: f.title, value: f.id, selected: f.id !== 'icon' })),
         instructions: false
     }, { onCancel }));
+    const features = argFeatures ?? pickedFeatures ?? [];
+    // the nuxt flavour lives in its own template, in manual-import mode
+    // (components: false): the picked features drive the imports in app.vue,
+    // the demo sections and the built styles in the nuxt css pipeline
+    const sourceDir = host === 'nuxt' ? templateNuxtDir : templateDir;
     mkdirSync(target, { recursive: true });
-    cpSync(templateDir, target, { recursive: true });
+    cpSync(sourceDir, target, { recursive: true });
     rmSync(path.join(target, 'package.json.tpl'));
     const picked = FEATURES.filter((f) => features.includes(f.id));
-    // package.json from the template manifest + chosen deps
-    const manifest = JSON.parse(readFileSync(path.join(templateDir, 'package.json.tpl'), 'utf8'));
+    // package.json from the template manifest + the chosen feature deps (the
+    // nuxt template pins @ui0/core + @ui0/theme itself for the manual imports)
+    const manifest = JSON.parse(readFileSync(path.join(sourceDir, 'package.json.tpl'), 'utf8'));
     manifest.name = name;
     Object.assign(manifest.dependencies, ...picked.map((f) => f.deps));
     writeFileSync(path.join(target, 'package.json'), JSON.stringify(manifest, null, 2) + '\n');
-    // App.vue: inject the demo sections of the picked features
-    const appVue = path.join(target, 'src/App.vue');
+    // app entry: src/App.vue (vite) or app/app.vue (nuxt) - inject the imports
+    // and the demo sections of the picked features
+    const appVue = path.join(target, host === 'nuxt' ? path.join('app', 'app.vue') : path.join('src', 'App.vue'));
     let app = readFileSync(appVue, 'utf8');
     app = app
         .replace('/* FEATURE_IMPORTS */', picked.map((f) => f.importLine).join('\n'))
-        .replace('/* FEATURE_SECTIONS */', picked.map((f) => f.section).join('\n\n'));
+        .replace('/* FEATURE_SECTIONS */', picked.map((f) => (host === 'nuxt' ? (f.sectionNuxt ?? f.section) : f.section)).join('\n\n'));
     writeFileSync(appVue, app);
-    // the icon pack registers itself as a vue plugin
-    const mainTs = path.join(target, 'src/main.ts');
-    let main = readFileSync(mainTs, 'utf8');
-    if (features.includes('icon')) {
-        main = main
-            .replace("import { createUi0 } from '@ui0/core'", "import Icons from '@ui0/icons'\nimport { createUi0 } from '@ui0/core'")
-            .replace('app.use(ui0)', 'app.use(ui0)\napp.use(Icons)');
+    // nuxt manual mode: the picked features' built styles join the css
+    // pipeline, the icon feature wires the svg loader (the template ships
+    // sample icons under assets/ - they need the configured dir to exist)
+    if (host === 'nuxt') {
+        const nuxtConfigPath = path.join(target, 'nuxt.config.ts');
+        const withIcons = features.includes('icon');
+        const configSrc = readFileSync(nuxtConfigPath, 'utf8')
+            .replace('/* FEATURE_VITE_IMPORT */', withIcons ? "import { fileURLToPath } from 'node:url'\n\nimport ViteUi0Icon from '@ui0/icon/vite'\n" : '')
+            .replace('/* FEATURE_VITE_PLUGINS */', 
+        // absolute on purpose: nuxt's vite root is the app/ dir, relative
+        // dirs would resolve against it. dir is the scan root - an svg at
+        // <dir>/icons/bookmark.svg is addressed 'assets/icons/bookmark'
+        withIcons ? "ViteUi0Icon({ dir: fileURLToPath(new URL('./assets', import.meta.url)) })" : '')
+            .replace('/* FEATURE_CSS */', 
+        // the placeholder trails the array's first entry - lead with a comma
+        picked.length ? `,\n    ${picked.flatMap((f) => f.cssLines ?? []).join(',\n    ')}` : '');
+        writeFileSync(nuxtConfigPath, configSrc);
+        if (!withIcons)
+            rmSync(path.join(target, 'assets'), { recursive: true, force: true });
+    }
+    // the icon pack registers itself as a vue plugin (vite hosts only - the
+    // nuxt module wires the icon framework and the pack itself)
+    if (host !== 'nuxt') {
+        const mainTs = path.join(target, 'src', 'main.ts');
+        let main = readFileSync(mainTs, 'utf8');
+        if (features.includes('icon')) {
+            main = main
+                .replace("import { createUi0 } from '@ui0/core'", "import Icons from '@ui0/icons'\nimport { createUi0 } from '@ui0/core'")
+                .replace('app.use(ui0)', 'app.use(ui0)\napp.use(Icons)');
+        }
+        writeFileSync(mainTs, main);
     }
-    writeFileSync(mainTs, main);
     console.log(`\nScaffolded ${name}:\n`);
     console.log(`  cd ${path.relative(process.cwd(), target)}`);
     console.log('  npm install');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ui0",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Scaffold a ui0 (Vue + @ui0) app - npm create ui0",
   "type": "module",
   "bin": {
@@ -9,11 +9,12 @@
   "files": [
     "dist",
     "template",
+    "template-nuxt",
     "template-component"
   ],
   "scripts": {
     "create:build": "tsc -p tsconfig.json",
-    "create:publish": "npm publish --access public"
+    "create:publish": "node ../../scripts/publish-packages.ts"
   },
   "dependencies": {
     "prompts": "^2.4.2"

package/template-nuxt/app/app.vue

@@ -0,0 +1,38 @@
+<template>
+  <ThemeProvider preset="app">
+    <main :class="$style.page">
+      <h1>ui0 app</h1>
+
+/* FEATURE_SECTIONS */
+    </main>
+  </ThemeProvider>
+</template>
+
+<script setup lang="ts">
+  import { ThemeProvider } from '@ui0/theme/theme-provider'
+  /* FEATURE_IMPORTS */
+</script>
+
+<style module lang="scss">
+  .page {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 32px;
+    font-family: system-ui, sans-serif;
+
+    h1 {
+      font-size: 20px;
+    }
+    h2 {
+      font-size: 14px;
+      opacity: 0.7;
+      margin-bottom: 8px;
+    }
+  }
+  .box {
+    padding: 12px 16px;
+    border: 1px solid rgba(127, 127, 127, 0.4);
+    border-radius: 6px;
+  }
+</style>

package/template-nuxt/assets/icons/bookmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960">
+  <path d="M629.531,180H330.469c-27.528,0-49.844,24.345-49.844,54.375V760L480,609.63,679.375,760V234.375C679.375,204.345,657.061,180,629.531,180Z"/>
+</svg>

package/template-nuxt/nuxt.config.ts

@@ -0,0 +1,25 @@
+/* FEATURE_VITE_IMPORT */
+export default defineNuxtConfig({
+  ssr: true,
+  compatibilityDate: '2026-11-12',
+  devtools: { enabled: false },
+  // built ui0 component styles ship in the head of every ssr response; the
+  // module pushes @ui0/core/style.css itself - one entry per ui0 component
+  // the app renders (app/app.vue imports them in code, manual mode below)
+  css: ['@ui0/theme/theme-provider/style.css'/* FEATURE_CSS */],
+  modules: ['@ui0/nuxt'],
+  ui0: {
+    // manual component imports: no auto-registration, the template imports
+    // Flex / Button / Icon / ThemeProvider in app/app.vue and lists their
+    // style.css above
+    components: false
+  },
+  vite: {
+    plugins: [
+      // the svg icon loader - only for the app's OWN icons (dir) and
+      // compositions (virtual); the built-in ui0 pack ships prebuilt from
+      // @ui0/icons and needs no loader
+      /* FEATURE_VITE_PLUGINS */
+    ]
+  }
+})

package/template-nuxt/package.json.tpl

@@ -0,0 +1,22 @@
+{
+  "name": "ui0-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@ui0/core": "^0.1.4",
+    "@ui0/nuxt": "^0.1.1",
+    "@ui0/theme": "^0.1.4",
+    "nuxt": "^4.6.4",
+    "vue": "^3.5.45"
+  },
+  "devDependencies": {
+    "@ui0/types": "^0.1.4",
+    "sass-embedded": "^1.80.0"
+  }
+}

package/template-nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // generated by nuxt (prepare) - the project config extends it
+  "extends": "./.nuxt/tsconfig.json"
+}

package/template-nuxt/ui0.config.ts

@@ -0,0 +1,23 @@
+import type { Ui0CoreConfig } from '@ui0/types'
+
+const config: Ui0CoreConfig = {
+  theme: {
+    default: 'app',
+    contracts: {
+      display: {}
+    },
+    presets: {
+      app: {
+        default: {
+          color: {
+            brand: ['rgb(86 59 177)', 4],
+            foreground: '#111',
+            background: '#fff'
+          }
+        }
+      }
+    }
+  }
+}
+
+export default config