@skirtle/create-vue-lib 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -5697,7 +5697,7 @@ var import_picocolors = __toESM(require_picocolors(), 1);
 // package.json
 var package_default = {
   name: "@skirtle/create-vue-lib",
-  version: "0.0.8",
+  version: "0.0.10",
   author: "skirtle",
   license: "MIT",
   description: "Create a library using Vue and Vite",
@@ -5912,10 +5912,12 @@ async function init() {
     console.log((0, import_picocolors.red)("Invalid GitHub path: " + rawGithubPath));
     process.exit(1);
   }
+  const includeTailwind = await togglePrompt("Include Tailwind CSS?");
   const includeEsLint = await togglePrompt("Include ESLint?", true);
   const includeEsLintStylistic = await togglePromptIf(includeEsLint, "Include ESLint Stylistic for formatting?", includeEsLint);
   const includeVitest = await togglePromptIf(extended, "Include Vitest for testing?", true);
   const includeDocs = await togglePrompt("Include VitePress for documentation?", true);
+  const includeVpRaw = includeDocs && await togglePromptIf(extended, "Include support for vp-raw in VitePress?", includeTailwind);
   const includeGithubPages = includeDocs && await togglePrompt("Include GitHub Pages config for documentation?");
   const includePlayground = await togglePrompt("Include playground application for development?", true);
   const includeGithubCi = await togglePrompt("Include GitHub CI configuration?", !!githubPath);
@@ -5980,7 +5982,9 @@ async function init() {
     includeVitest,
     includeGithubCi,
     includeAtAliases,
-    includeTestVariable
+    includeTestVariable,
+    includeTailwind,
+    includeVpRaw
   };
   copyTemplate("base", config);
   if (config.includeDocs) {
@@ -6001,6 +6005,12 @@ async function init() {
   if (config.includeGithubCi) {
     copyTemplate("ci", config);
   }
+  if (config.includeTailwind) {
+    copyTemplate("tailwind", config);
+  }
+  if (config.includeVpRaw) {
+    copyTemplate("vp-raw", config);
+  }
   console.log();
   console.log(`${(0, import_picocolors.bgGreen)((0, import_picocolors.bold)((0, import_picocolors.black)("DONE")))} Project created`);
   console.log();
@@ -6057,16 +6067,14 @@ function copyFiles(templateFile, config) {
     const template = fs.readFileSync(templatePath, "utf-8");
     const target = targetPath.replace(/\.ejs$/, "");
     let content = import_ejs.default.render(template, { config });
-    if (/\.(json|m?[jt]s)$/.test(target)) {
+    if (/\.(json|m?[jt]s|vue)$/.test(target)) {
+      content = content.trim() + "\n";
       content = content.replace(/ +\n/g, "\n");
       content = content.replace(/\n\n+/g, "\n\n");
       content = content.replace(/, *(?:\n+(\n\s*)|(\s*))([}\])])/g, "$1$2$3");
+      content = content.replace(/([{[(]\n)\n+/g, "$1");
     }
     fs.writeFileSync(target, content);
-  } else if (["package.json", "vite.config.mts", "config.mts", "index.md", "introduction.md", "App.vue", "tsconfig.app.json", "env.d.ts"].includes(filename)) {
-    const template = fs.readFileSync(templatePath, "utf-8");
-    const content = template.replace(/@projectName@/g, config.mainPackageDirName).replace(new RegExp(`@(${Object.keys(config).join("|")})@`, "g"), (all, setting) => `${config[setting] ?? all}`);
-    fs.writeFileSync(targetPath, content);
   } else {
     fs.copyFileSync(templatePath, targetPath);
   }

package/dist/template/base/config/.vscode/settings.json.ejs

@@ -3,7 +3,7 @@
   "explorer.fileNesting.patterns": {
     "tsconfig.json": "tsconfig.*.json, env.d.ts",
     "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
-    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
   },
   <%_ if (config.includeEsLint) { _%>
   "editor.codeActionsOnSave": {

package/dist/template/base/config/package.json.ejs

@@ -7,23 +7,23 @@
   },
   "devDependencies": {
     <%_ if (config.includeEsLint) { _%>
-    "@eslint/compat": "^1.2.7",
+    "@eslint/compat": "^1.2.8",
     <%_ if (config.includeEsLintStylistic) { _%>
     "@stylistic/eslint-plugin": "^4.2.0",
     <%_ } _%>
-    "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.13.9",
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.13.14",
     <%_ if (config.includeVitest) { _%>
-    "@vitest/eslint-plugin": "^1.1.36",
+    "@vitest/eslint-plugin": "^1.1.38",
     <%_ } _%>
     "@vue/eslint-config-typescript": "^14.5.0",
-    "eslint": "^9.21.0",
+    "eslint": "^9.22.0",
     "eslint-plugin-vue": "~10.0.0",
     "jiti": "^2.4.2",
-    "lint-staged": "^15.4.3",
+    "lint-staged": "^15.5.0",
     "npm-run-all2": "^7.0.2",
     <%_ } _%>
-    "simple-git-hooks": "^2.11.1",
+    "simple-git-hooks": "^2.12.1",
     <%_ if (config.includeEsLint) { _%>
     "typescript": "~5.8.0"
     <%_ } _%>

package/dist/template/base/config/packages/@projectName@/{src/global.d.ts.ejs → env.d.ts.ejs}

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 declare const __DEV__: boolean
 <%_ if (config.includeTestVariable) { _%>
 declare const __TEST__: boolean

package/dist/template/base/config/packages/@projectName@/package.json.ejs

@@ -39,25 +39,31 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^6.0.2",
-    "@tsconfig/node22": "^22.0.0",
+    <%_ if (config.includeTailwind) { _%>
+    "@tailwindcss/vite": "^4.1.5",
+    <%_ } _%>
+    "@tsconfig/node22": "^22.0.1",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.13.9",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@types/node": "^22.13.14",
+    "@vitejs/plugin-vue": "^5.2.3",
     <%_ if (config.includeVitest) { _%>
-    "@vitest/coverage-v8": "^3.0.8",
+    "@vitest/coverage-v8": "^3.1.1",
     "@vue/test-utils": "^2.4.6",
     <%_ } _%>
     "@vue/tsconfig": "^0.7.0",
     "copyfiles": "^2.4.1",
     "jsdom": "^26.0.0",
     "npm-run-all2": "^7.0.2",
-    "publint": "^0.3.8",
+    "publint": "^0.3.9",
     "rimraf": "^5.0.1",
+    <%_ if (config.includeTailwind) { _%>
+    "tailwindcss": "^4.1.5",
+    <%_ } _%>
     "typescript": "~5.8.0",
-    "vite": "^6.2.1",
+    "vite": "^6.2.4",
     "vite-plugin-dts": "^4.5.3",
     <%_ if (config.includeVitest) { _%>
-    "vitest": "^3.0.8",
+    "vitest": "^3.1.1",
     <%_ } _%>
     "vue": "^3.5.13",
     "vue-tsc": "^2.2.8"

package/dist/template/base/config/packages/@projectName@/vite.config.mts.ejs

@@ -4,6 +4,9 @@ import { defineConfig, type UserConfig } from 'vite'
 import replace from '@rollup/plugin-replace'
 import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
+<%_ if (config.includeTailwind) { _%>
+import tailwindcss from '@tailwindcss/vite'
+<%_ } _%>
 
 export default defineConfig(({ mode }): UserConfig => {
   if (mode !== 'production' && mode !== 'development' && mode !== 'neutral' && mode !== 'test') {
@@ -38,6 +41,9 @@ export default defineConfig(({ mode }): UserConfig => {
           prodDevtools: mode === 'development'
         }
       }),
+      <%_ if (config.includeTailwind) { _%>
+      tailwindcss(),
+      <%_ } _%>
       dtsPlugin
     ],
 

package/dist/template/base/examples/packages/@projectName@/src/components/ExampleComponent.vue.ejs

@@ -2,22 +2,20 @@
 import { ref } from 'vue'
 
 if (__DEV__) {
-  console.log('dev: creating ExampleComponent')
-  <%_ if (config.includeTestVariable) { _%>
-  console.log(`__TEST__: ${__TEST__}`)
-  <%_ } _%>
+  console.log('[<%- config.scopedPackageName %>] creating ExampleComponent')
 }
 
 const msg = ref('Hello world!')
 </script>
 
 <template>
-  <div class="outer">
-    <input v-model="msg">
+  <div class="outer<%- config.includeTailwind ? ' border-1 border-solid border-green-700 p-5' : '' %>">
+    <input v-model="msg"<%- config.includeTailwind ? ' class="border-1 border-solid border-neutral-500 px-1 py-0.5"' : '' %>>
     <p>{{ msg }}</p>
   </div>
 </template>
 
+<%_ if (!config.includeTailwind) { _%>
 <style scoped>
 .outer {
   border: 1px solid green;
@@ -29,3 +27,4 @@ const msg = ref('Hello world!')
   padding: 2px 4px;
 }
 </style>
+<%_ } _%>

package/dist/template/base/examples/packages/@projectName@/src/components/{MyPanel.vue → MyPanel.vue.ejs}

@@ -1,28 +1,34 @@
 <script setup lang="ts">
+import { provide } from 'vue'
 import MyPanelSection from './MyPanelSection.vue'
 
 defineProps<{
   title?: string
   footer?: string
 }>()
+
+if (__DEV__) {
+  provide('MyPanel', true)
+}
 </script>
 
 <template>
-  <div class="panel">
+  <div class="panel<%- config.includeTailwind ? ' border-1 border-solid border-[#34495e] rounded-[5px] flex flex-col font-sans overflow-hidden [&>*+*]:border-t-1 [&>*+*]:border-t-solid [&>*+*]:border-t-[#34495e] [&>.panel-section:first-child]:rounded-t-[5px] [&>.panel-section:last-child]:rounded-b-[5px]' : '' %>">
     <slot name="header">
-      <MyPanelSection v-if="title" class="panel-header">{{ title }}</MyPanelSection>
+      <MyPanelSection v-if="title" class="panel-header<%- config.includeTailwind ? ' bg-[#34495e] inset-ring inset-ring-white text-white tracking-wide text-shadow-sm' : '' %>">{{ title }}</MyPanelSection>
     </slot>
     <slot name="body">
-      <MyPanelSection class="panel-body">
+      <MyPanelSection class="panel-body<%- config.includeTailwind ? ' flex-auto overflow-auto' : '' %>">
         <slot />
       </MyPanelSection>
     </slot>
     <slot name="footer">
-      <MyPanelSection v-if="footer" class="panel-footer">{{ footer }}</MyPanelSection>
+      <MyPanelSection v-if="footer" class="panel-footer<%- config.includeTailwind ? ' bg-[#34495e] inset-ring inset-ring-white text-white tracking-wide text-shadow-sm' : '' %>">{{ footer }}</MyPanelSection>
     </slot>
   </div>
 </template>
 
+<%_ if (!config.includeTailwind) { _%>
 <style scoped>
 .panel {
   border: 1px solid #34495e;
@@ -60,3 +66,4 @@ defineProps<{
   overflow: auto;
 }
 </style>
+<%_ } _%>

package/dist/template/base/examples/packages/@projectName@/src/components/MyPanelSection.vue.ejs

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { inject, provide } from 'vue'
+
+if (__DEV__) {
+  const insideMyPanel = inject('MyPanel', false)
+
+  if (!insideMyPanel) {
+    console.warn('[<%- config.scopedPackageName %>] MyPanelSection can only be used inside MyPanel')
+  }
+
+  provide('MyPanel', false)
+}
+</script>
+
+<template>
+  <div class="panel-section<%- config.includeTailwind ? ' p-2' : '' %>">
+    <slot />
+  </div>
+</template>
+
+<%_ if (!config.includeTailwind) { _%>
+<style scoped>
+.panel-section {
+  padding: 10px;
+}
+</style>
+<%_ } _%>

package/dist/template/base/examples/packages/@projectName@/src/index.ts.ejs

@@ -0,0 +1,14 @@
+<%_ if (config.includeTailwind) { _%>
+import './index.css'
+
+<%_ } _%>
+export { default as ExampleComponent } from './components/ExampleComponent.vue'
+export { default as MyPanel } from './components/MyPanel.vue'
+export { default as MyPanelSection } from './components/MyPanelSection.vue'
+
+if (__DEV__) {
+  console.log('[<%- config.scopedPackageName %>] dev mode')
+  <%_ if (config.includeTestVariable) { _%>
+  console.log(`[<%- config.scopedPackageName %>] __TEST__: ${__TEST__}`)
+  <%_ } _%>
+}

package/dist/template/playground/config/packages/playground/env.d.ts.ejs

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+import '../<%- config.mainPackageDirName %>/env.d.ts'

package/dist/template/playground/config/packages/playground/{package.json → package.json.ejs}

@@ -5,14 +5,20 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.13.9",
-    "@vitejs/plugin-vue": "^5.2.1",
+    <%_ if (config.includeTailwind) { _%>
+    "@tailwindcss/vite": "^4.1.5",
+    <%_ } _%>
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.13.14",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
     "npm-run-all2": "^7.0.2",
     "rimraf": "^5.0.1",
+    <%_ if (config.includeTailwind) { _%>
+    "tailwindcss": "^4.1.5",
+    <%_ } _%>
     "typescript": "~5.8.0",
-    "vite": "^6.2.1",
+    "vite": "^6.2.4",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vue-tsc": "^2.2.8"
   },

package/dist/template/playground/config/packages/playground/vite.config.mts.ejs

@@ -3,6 +3,9 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig, type UserConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+<%_ if (config.includeTailwind) { _%>
+import tailwindcss from '@tailwindcss/vite'
+<%_ } _%>
 
 <%_ if (config.includeAtAliases) { _%>
 const librarySrc = fileURLToPath(new URL('../<%- config.mainPackageDirName %>/src/', import.meta.url))
@@ -12,6 +15,9 @@ const playgroundSrc = fileURLToPath(new URL('./src/', import.meta.url))
 export default defineConfig(({ mode }): UserConfig => ({
   plugins: [
     vue(),
+    <%_ if (config.includeTailwind) { _%>
+    tailwindcss(),
+    <%_ } _%>
     vueDevTools()
   ],
 
@@ -21,11 +27,13 @@ export default defineConfig(({ mode }): UserConfig => ({
       {
         find: '@',
         replacement: '@',
-        customResolver(source, importer) {
-          return source.replace(
+        customResolver(source, importer, options) {
+          const filePath = source.replace(
             /^@\//,
             importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
           )
+
+          return this.resolve(filePath, importer, options)
         }
       }, {
         find: '<%- config.scopedPackageName %>',

package/dist/template/playground/examples/packages/playground/src/{App.vue → App.vue.ejs}

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ExampleComponent, MyPanel } from '@scopedPackageName@'
+import { ExampleComponent, MyPanel } from '<%- config.scopedPackageName %>'
 </script>
 
 <template>
-  <div class="main">
+  <div class="main<%- config.includeTailwind ? ' flex flex-col max-w-75 gap-2.5 m-2.5' : '' %>">
     <ExampleComponent />
     <MyPanel title="Panel title" footer="Panel footer">
       Header and footer
@@ -20,6 +20,7 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
   </div>
 </template>
 
+<%_ if (!config.includeTailwind) { _%>
 <style scoped>
 .main {
   max-width: 300px;
@@ -29,3 +30,4 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
   margin-top: 10px;
 }
 </style>
+<%_ } _%>

package/dist/template/tailwind/examples/packages/@projectName@/src/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@source ".";

package/dist/template/vitepress/config/packages/docs/.vitepress/config.mts.ejs

@@ -1,10 +1,13 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfigWithTheme } from 'vitepress'
+<%_ if (config.includeTailwind) { _%>
+import tailwindcss from '@tailwindcss/vite'
+<%_ } _%>
 
 <%_ if (config.includeAtAliases) { _%>
 const librarySrc = fileURLToPath(new URL('../../<%- config.mainPackageDirName %>/src/', import.meta.url))
-const playgroundSrc = fileURLToPath(new URL('../src/', import.meta.url))
+const docsSrc = fileURLToPath(new URL('../src/', import.meta.url))
 <%_ } _%>
 
 export default ({ mode }: { mode: string }) => defineConfigWithTheme({
@@ -34,17 +37,25 @@ export default ({ mode }: { mode: string }) => defineConfigWithTheme({
   <%_ } _%>
 
   vite: {
+    <%_ if (config.includeTailwind) { _%>
+    plugins: [
+      tailwindcss()
+    ],
+    <%_ } _%>
+
     resolve: {
       <%_ if (config.includeAtAliases) { _%>
       alias: [
         {
           find: '@',
           replacement: '@',
-          customResolver(source, importer) {
-            return source.replace(
+          customResolver(source, importer, options) {
+            const filePath = source.replace(
               /^@\//,
-              importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
+              importer?.startsWith(librarySrc) ? librarySrc : docsSrc
             )
+
+            return this.resolve(filePath, importer, options)
           }
         }, {
           find: '<%- config.scopedPackageName %>',

package/dist/template/vitepress/config/packages/docs/env.d.ts.ejs

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+import '../<%- config.mainPackageDirName %>/env.d.ts'

package/dist/template/vitepress/config/packages/docs/{package.json → package.json.ejs}

@@ -5,11 +5,20 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.13.9",
+    <%_ if (config.includeTailwind) { _%>
+    "@tailwindcss/vite": "^4.1.5",
+    <%_ } _%>
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.13.14",
     "@vue/tsconfig": "^0.7.0",
     "npm-run-all2": "^7.0.2",
-    "rimraf": "^6.0.1",
+    <%_ if (config.includeVpRaw) { _%>
+    "postcss": "^8.5.3",
+    <%_ } _%>
+    "rimraf": "^5.0.1",
+    <%_ if (config.includeTailwind) { _%>
+    "tailwindcss": "^4.1.5",
+    <%_ } _%>
     "typescript": "~5.8.0",
     "vitepress": "^1.6.3",
     "vue-tsc": "^2.2.8"

package/dist/template/vitepress/examples/packages/docs/src/{index.md → index.md.ejs}

@@ -1,11 +1,11 @@
 ---
 layout: home
 
-title: @unscopedPackageName@
+title: <%- config.unscopedPackageName %>
 titleTemplate: Title template
 
 hero:
-  name: @unscopedPackageName@
+  name: <%- config.unscopedPackageName %>
   text: Description
   tagline: Tag line!
   actions:
@@ -14,7 +14,7 @@ hero:
       link: /introduction
     - theme: alt
       text: View on GitHub
-      link: https://github.com/@githubPath@
+      link: https://github.com/<%- config.githubPath %>
     - theme: alt
       text: See a demo
       link: https://play.vuejs.org/

package/dist/template/vitepress/examples/packages/docs/src/{introduction.md → introduction.md.ejs}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ExampleComponent, MyPanel } from '@scopedPackageName@'
+import { ExampleComponent, MyPanel } from '<%- config.scopedPackageName %>'
 </script>
 
 <style scoped>
@@ -10,6 +10,9 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
 
 # Introduction
 
+<%_ if (config.includeVpRaw) { _%>
+::: raw
+<%_ } _%>
 <ExampleComponent />
 
 <MyPanel title="Panel title" footer="Panel footer">
@@ -27,3 +30,6 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
 <MyPanel>
   No header or footer
 </MyPanel>
+<%_ if (config.includeVpRaw) { _%>
+:::
+<%_ } _%>

package/dist/template/vp-raw/config/packages/docs/postcss.config.mjs

@@ -0,0 +1,10 @@
+import { postcssIsolateStyles } from 'vitepress'
+
+export default {
+  plugins: [
+    // See https://vitepress.dev/guide/markdown#raw
+    postcssIsolateStyles({
+      includeFiles: [/base\.css/, /vp-doc\.css/]
+    })
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skirtle/create-vue-lib",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "skirtle",
   "license": "MIT",
   "description": "Create a library using Vue and Vite",

package/dist/template/base/config/packages/@projectName@/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/dist/template/base/examples/packages/@projectName@/src/components/MyPanelSection.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div class="panel-section">
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.panel-section {
-  padding: 10px;
-}
-</style>

package/dist/template/base/examples/packages/@projectName@/src/index.ts

@@ -1,3 +0,0 @@
-export { default as ExampleComponent } from './components/ExampleComponent.vue'
-export { default as MyPanel } from './components/MyPanel.vue'
-export { default as MyPanelSection } from './components/MyPanelSection.vue'

package/dist/template/playground/config/packages/playground/env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-
-import '../@projectName@/src/global.d.ts'

package/dist/template/vitepress/config/packages/docs/env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-
-import '../@projectName@/src/global.d.ts'