create-ui0 0.1.3 → 0.1.5

package/dist/index.js

@@ -6,6 +6,8 @@ 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));
@@ -32,8 +34,9 @@ const FEATURES = [
     {
         id: 'flex',
         title: 'Flex layout',
-        deps: { '@ui0/flex': '^0.1.1' },
+        deps: { '@ui0/flex': '^0.1.4' },
         importLine: "import Flex from '@ui0/flex'",
+        cssLines: ["'@ui0/flex/style.css'"],
         section: `      <section>
         <h2>Flex</h2>
         <Flex items="center">
@@ -46,8 +49,9 @@ const FEATURES = [
     {
         id: 'button',
         title: 'Button component',
-        deps: { '@ui0/button': '^0.1.1' },
+        deps: { '@ui0/button': '^0.1.4' },
         importLine: "import Button from '@ui0/button'",
+        cssLines: ["'@ui0/button/style.css'"],
         section: `      <section>
         <h2>Button</h2>
         <Button>default</Button>
@@ -56,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.4', '@ui0/icons': '^0.1.4' },
         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>`
     }
 ];
@@ -125,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',
@@ -143,8 +157,8 @@ const run = async () => {
         if (!overwrite)
             process.exit(0);
     }
-    const { host } = (await prompts({
-        type: 'select',
+    const { host: pickedHost } = (await prompts({
+        type: argHost ? null : 'select',
         name: 'host',
         message: 'App host',
         choices: [
@@ -153,36 +167,57 @@ const run = async () => {
         ],
         initial: 0
     }, { onCancel }));
-    const { features } = (await prompts({
-        type: 'multiselect',
+    const host = argHost ?? pickedHost;
+    const { features: pickedFeatures } = (await prompts({
+        type: argFeatures ? null : 'multiselect',
         name: 'features',
-        message: host === 'nuxt' ? 'Demo sections to include' : 'Packages to include',
+        message: 'Packages to include',
         choices: FEATURES.map((f) => ({ title: f.title, value: f.id, selected: f.id !== 'icon' })),
         instructions: false
     }, { onCancel }));
-    // the nuxt flavour lives in its own template; @ui0/nuxt already carries
-    // every runtime package, so for nuxt the features only drive demo sections
+    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(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 (vite hosts only;
-    // the nuxt manifest already depends on @ui0/nuxt, which bundles the rest)
+    // 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;
-    if (host !== 'nuxt')
-        Object.assign(manifest.dependencies, ...picked.map((f) => f.deps));
+    Object.assign(manifest.dependencies, ...picked.map((f) => f.deps));
     writeFileSync(path.join(target, 'package.json'), JSON.stringify(manifest, null, 2) + '\n');
-    // app entry: src/App.vue (vite) or app/app.vue (nuxt) - inject the demo
-    // sections of the picked features; the nuxt module auto-registers the
-    // components, so no imports are added there
+    // 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 */', host === 'nuxt' ? '' : picked.map((f) => f.importLine).join('\n'))
-        .replace('/* FEATURE_SECTIONS */', picked.map((f) => f.section).join('\n\n'));
+        .replace('/* FEATURE_IMPORTS */', picked.map((f) => f.importLine).join('\n'))
+        .replace('/* FEATURE_SECTIONS */', picked.map((f) => (host === 'nuxt' ? (f.sectionNuxt ?? f.section) : f.section)).join('\n\n'));
     writeFileSync(appVue, app);
+    // 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') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ui0",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Scaffold a ui0 (Vue + @ui0) app - npm create ui0",
   "type": "module",
   "bin": {
@@ -14,7 +14,7 @@
   ],
   "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/package.json.tpl

@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "vue": "^3.5.45",
-    "@ui0/core": "^0.1.2",
-    "@ui0/theme": "^0.1.1"
+    "@ui0/core": "^0.1.5",
+    "@ui0/theme": "^0.1.5"
   },
   "devDependencies": {
-    "@ui0/types": "^0.1.2",
+    "@ui0/types": "^0.1.6",
     "@vitejs/plugin-vue": "^6.0.1",
     "sass-embedded": "^1.80.0",
     "typescript": "~6.0.3",

package/template/src/App.vue

@@ -4,41 +4,38 @@
       title="ui0 app"
       name="app"
     >
-      <main :class="$style.page">
-        <h1>ui0 app</h1>
-
-/* FEATURE_SECTIONS */
-      </main>
+      /* FEATURE_SECTIONS */
     </App>
   </ThemeProvider>
 </template>
 
 <script setup lang="ts">
-  import { App } from '@ui0/core'
-  import { ThemeProvider } from '@ui0/theme'
+import { App } from '@ui0/core'
+import { ThemeProvider } from '@ui0/theme'
 /* FEATURE_IMPORTS */
 </script>
 
 <style module lang="scss">
-  .page {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    padding: 32px;
-    font-family: system-ui, sans-serif;
+@value app from '@ui0/core/app';
+.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;
-    }
+  h1 {
+    font-size: 20px;
   }
-  .box {
-    padding: 12px 16px;
-    border: 1px solid rgba(127, 127, 127, 0.4);
-    border-radius: 6px;
+  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/app/app.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script setup lang="ts">
-  // ThemeProvider / Flex / Button / Icon are auto-registered by @ui0/nuxt
+  import { ThemeProvider } from '@ui0/theme/theme-provider'
+  /* FEATURE_IMPORTS */
 </script>
 
 <style module lang="scss">

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

@@ -1,7 +1,25 @@
+/* FEATURE_VITE_IMPORT */
 export default defineNuxtConfig({
   ssr: true,
   compatibilityDate: '2026-11-12',
   devtools: { enabled: false },
-  // theme css pipeline, core+theme runtime and component auto-imports
-  modules: ['@ui0/nuxt']
+  // 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

@@ -9,12 +9,14 @@
     "preview": "nuxt preview"
   },
   "dependencies": {
-    "@ui0/nuxt": "^0.1.0",
+    "@ui0/core": "^0.1.5",
+    "@ui0/nuxt": "^0.1.2",
+    "@ui0/theme": "^0.1.5",
     "nuxt": "^4.6.4",
     "vue": "^3.5.45"
   },
   "devDependencies": {
-    "@ui0/types": "^0.1.2",
+    "@ui0/types": "^0.1.6",
     "sass-embedded": "^1.80.0"
   }
 }