create-ui0 0.1.4 → 0.1.6

package/dist/index.js

@@ -34,7 +34,7 @@ const FEATURES = [
     {
         id: 'flex',
         title: 'Flex layout',
-        deps: { '@ui0/flex': '^0.1.3' },
+        deps: { '@ui0/flex': '^0.1.4' },
         importLine: "import Flex from '@ui0/flex'",
         cssLines: ["'@ui0/flex/style.css'"],
         section: `      <section>
@@ -49,7 +49,7 @@ const FEATURES = [
     {
         id: 'button',
         title: 'Button component',
-        deps: { '@ui0/button': '^0.1.3' },
+        deps: { '@ui0/button': '^0.1.4' },
         importLine: "import Button from '@ui0/button'",
         cssLines: ["'@ui0/button/style.css'"],
         section: `      <section>
@@ -60,7 +60,7 @@ const FEATURES = [
     {
         id: 'icon',
         title: 'Icon component + ui0 icon pack',
-        deps: { '@ui0/icon': '^0.1.3', '@ui0/icons': '^0.1.3' },
+        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>
@@ -80,6 +80,28 @@ const onCancel = () => {
     console.log('aborted');
     process.exit(0);
 };
+/** the @ui0 specs a template manifest carries (deps + devDeps merged) */
+const ui0Specs = (manifest) => Object.entries({ ...manifest.dependencies, ...manifest.devDependencies }).filter(([name]) => name.startsWith('@ui0/'));
+/**
+ * startup banner: own version + the @ui0 package specs the scaffold can
+ * pull (base template deps, per-feature deps, the nuxt host additions) -
+ * everything read from the manifests/FEATURES, never hardcoded
+ */
+const showBanner = () => {
+    const own = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
+    const base = JSON.parse(readFileSync(path.join(templateDir, 'package.json.tpl'), 'utf8'));
+    const nuxt = JSON.parse(readFileSync(path.join(templateNuxtDir, 'package.json.tpl'), 'utf8'));
+    const baseDeps = ui0Specs(base);
+    const nuxtExtra = ui0Specs(nuxt).filter(([name]) => !baseDeps.some(([baseName]) => baseName === name));
+    console.log(`\ncreate-ui0 v${own.version}\n`);
+    console.log(`  always: ${baseDeps.map(([n, s]) => `${n} ${s}`).join(', ')}`);
+    for (const feature of FEATURES) {
+        console.log(`  ${feature.id}: ${Object.entries(feature.deps).map(([n, s]) => `${n} ${s}`).join(', ')}`);
+    }
+    if (nuxtExtra.length)
+        console.log(`  nuxt adds: ${nuxtExtra.map(([n, s]) => `${n} ${s}`).join(', ')}`);
+    console.log();
+};
 /**
  * `create-ui0 component [Name]` - scaffolds a single component folder from
  * template-component/ into the project at cwd (src/components/<kebab>/).
@@ -139,6 +161,7 @@ const run = async () => {
     const argDir = process.argv[2];
     const argHost = process.argv[3];
     const argFeatures = process.argv[4]?.split(',').filter(Boolean);
+    showBanner();
     const { dir } = await prompts({
         type: argDir ? null : 'text',
         name: 'dir',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ui0",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Scaffold a ui0 (Vue + @ui0) app - npm create ui0",
   "type": "module",
   "bin": {

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-component/name.vue

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

package/template-nuxt/package.json.tpl

@@ -9,14 +9,14 @@
     "preview": "nuxt preview"
   },
   "dependencies": {
-    "@ui0/core": "^0.1.4",
-    "@ui0/nuxt": "^0.1.1",
-    "@ui0/theme": "^0.1.4",
+    "@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.4",
+    "@ui0/types": "^0.1.6",
     "sass-embedded": "^1.80.0"
   }
 }