@skirtle/create-vue-lib 0.0.9 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/index.cjs +20 -12
  2. package/dist/template/base/config/.vscode/settings.json.ejs +1 -1
  3. package/dist/template/base/config/package.json.ejs +13 -13
  4. package/dist/template/base/config/packages/@projectName@/package.json.ejs +19 -13
  5. package/dist/template/base/config/packages/@projectName@/vite.config.mts.ejs +6 -0
  6. package/dist/template/base/examples/packages/@projectName@/src/components/ExampleComponent.vue.ejs +4 -2
  7. package/dist/template/base/examples/packages/@projectName@/src/components/{MyPanel.vue → MyPanel.vue.ejs} +6 -4
  8. package/dist/template/base/examples/packages/@projectName@/src/components/MyPanelSection.vue.ejs +3 -1
  9. package/dist/template/base/examples/packages/@projectName@/src/index.ts.ejs +4 -0
  10. package/dist/template/ci/config/.github/workflows/ci.yml.ejs +4 -2
  11. package/dist/template/gh-pages/config/.github/workflows/pages.yml.ejs +6 -1
  12. package/dist/template/playground/config/packages/playground/env.d.ts.ejs +3 -0
  13. package/dist/template/playground/config/packages/playground/package.json.ejs +33 -0
  14. package/dist/template/playground/config/packages/playground/vite.config.mts.ejs +20 -5
  15. package/dist/template/playground/examples/packages/playground/src/{App.vue → App.vue.ejs} +4 -2
  16. package/dist/template/tailwind/examples/packages/@projectName@/src/index.css +3 -0
  17. package/dist/template/vitepress/config/packages/docs/.vitepress/config.mts.ejs +24 -6
  18. package/dist/template/vitepress/config/packages/docs/env.d.ts.ejs +3 -0
  19. package/dist/template/vitepress/config/packages/docs/{package.json → package.json.ejs} +14 -5
  20. package/dist/template/vitepress/examples/packages/docs/src/{index.md → index.md.ejs} +3 -3
  21. package/dist/template/vitepress/examples/packages/docs/src/{introduction.md → introduction.md.ejs} +7 -1
  22. package/dist/template/vp-raw/config/packages/docs/postcss.config.mjs +10 -0
  23. package/package.json +6 -6
  24. package/dist/template/playground/config/packages/playground/env.d.ts +0 -3
  25. package/dist/template/playground/config/packages/playground/package.json +0 -27
  26. package/dist/template/vitepress/config/packages/docs/env.d.ts +0 -3
package/dist/index.cjs CHANGED
@@ -5697,7 +5697,7 @@ var import_picocolors = __toESM(require_picocolors(), 1);
5697
5697
  // package.json
5698
5698
  var package_default = {
5699
5699
  name: "@skirtle/create-vue-lib",
5700
- version: "0.0.9",
5700
+ version: "0.1.0",
5701
5701
  author: "skirtle",
5702
5702
  license: "MIT",
5703
5703
  description: "Create a library using Vue and Vite",
@@ -5717,18 +5717,18 @@ var package_default = {
5717
5717
  "dist"
5718
5718
  ],
5719
5719
  devDependencies: {
5720
- "@tsconfig/node22": "^22.0.0",
5720
+ "@tsconfig/node22": "^22.0.2",
5721
5721
  "@types/ejs": "^3.1.5",
5722
- "@types/node": "^22.13.9",
5722
+ "@types/node": "^22.16.5",
5723
5723
  "@types/prompts": "^2.4.9",
5724
5724
  copyfiles: "^2.4.1",
5725
5725
  ejs: "^3.1.10",
5726
- "npm-run-all2": "^7.0.2",
5726
+ "npm-run-all2": "^8.0.4",
5727
5727
  picocolors: "^1.1.1",
5728
5728
  prompts: "^2.4.2",
5729
- publint: "^0.3.8",
5729
+ publint: "^0.3.12",
5730
5730
  rimraf: "^6.0.1",
5731
- tsup: "^8.4.0",
5731
+ tsup: "^8.5.0",
5732
5732
  typescript: "~5.8.0"
5733
5733
  },
5734
5734
  scripts: {
@@ -5912,10 +5912,12 @@ async function init() {
5912
5912
  console.log((0, import_picocolors.red)("Invalid GitHub path: " + rawGithubPath));
5913
5913
  process.exit(1);
5914
5914
  }
5915
+ const includeTailwind = await togglePrompt("Include Tailwind CSS?");
5915
5916
  const includeEsLint = await togglePrompt("Include ESLint?", true);
5916
5917
  const includeEsLintStylistic = await togglePromptIf(includeEsLint, "Include ESLint Stylistic for formatting?", includeEsLint);
5917
5918
  const includeVitest = await togglePromptIf(extended, "Include Vitest for testing?", true);
5918
5919
  const includeDocs = await togglePrompt("Include VitePress for documentation?", true);
5920
+ const includeVpRaw = includeDocs && await togglePromptIf(extended, "Include support for vp-raw in VitePress?", includeTailwind);
5919
5921
  const includeGithubPages = includeDocs && await togglePrompt("Include GitHub Pages config for documentation?");
5920
5922
  const includePlayground = await togglePrompt("Include playground application for development?", true);
5921
5923
  const includeGithubCi = await togglePrompt("Include GitHub CI configuration?", !!githubPath);
@@ -5980,7 +5982,9 @@ async function init() {
5980
5982
  includeVitest,
5981
5983
  includeGithubCi,
5982
5984
  includeAtAliases,
5983
- includeTestVariable
5985
+ includeTestVariable,
5986
+ includeTailwind,
5987
+ includeVpRaw
5984
5988
  };
5985
5989
  copyTemplate("base", config);
5986
5990
  if (config.includeDocs) {
@@ -6001,6 +6005,12 @@ async function init() {
6001
6005
  if (config.includeGithubCi) {
6002
6006
  copyTemplate("ci", config);
6003
6007
  }
6008
+ if (config.includeTailwind) {
6009
+ copyTemplate("tailwind", config);
6010
+ }
6011
+ if (config.includeVpRaw) {
6012
+ copyTemplate("vp-raw", config);
6013
+ }
6004
6014
  console.log();
6005
6015
  console.log(`${(0, import_picocolors.bgGreen)((0, import_picocolors.bold)((0, import_picocolors.black)("DONE")))} Project created`);
6006
6016
  console.log();
@@ -6057,16 +6067,14 @@ function copyFiles(templateFile, config) {
6057
6067
  const template = fs.readFileSync(templatePath, "utf-8");
6058
6068
  const target = targetPath.replace(/\.ejs$/, "");
6059
6069
  let content = import_ejs.default.render(template, { config });
6060
- if (/\.(json|m?[jt]s)$/.test(target)) {
6070
+ if (/\.(json|m?[jt]s|vue)$/.test(target)) {
6071
+ content = content.trim() + "\n";
6061
6072
  content = content.replace(/ +\n/g, "\n");
6062
6073
  content = content.replace(/\n\n+/g, "\n\n");
6063
6074
  content = content.replace(/, *(?:\n+(\n\s*)|(\s*))([}\])])/g, "$1$2$3");
6075
+ content = content.replace(/([{[(]\n)\n+/g, "$1");
6064
6076
  }
6065
6077
  fs.writeFileSync(target, content);
6066
- } else if (["package.json", "vite.config.mts", "config.mts", "index.md", "introduction.md", "App.vue", "tsconfig.app.json", "env.d.ts"].includes(filename)) {
6067
- const template = fs.readFileSync(templatePath, "utf-8");
6068
- const content = template.replace(/@projectName@/g, config.mainPackageDirName).replace(new RegExp(`@(${Object.keys(config).join("|")})@`, "g"), (all, setting) => `${config[setting] ?? all}`);
6069
- fs.writeFileSync(targetPath, content);
6070
6078
  } else {
6071
6079
  fs.copyFileSync(templatePath, targetPath);
6072
6080
  }
@@ -3,7 +3,7 @@
3
3
  "explorer.fileNesting.patterns": {
4
4
  "tsconfig.json": "tsconfig.*.json, env.d.ts",
5
5
  "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
6
- "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
6
+ "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
7
7
  },
8
8
  <%_ if (config.includeEsLint) { _%>
9
9
  "editor.codeActionsOnSave": {
@@ -1,29 +1,29 @@
1
1
  {
2
2
  "private": true,
3
3
  "type": "module",
4
- "packageManager": "pnpm@9.15.4",
4
+ "packageManager": "pnpm@10.13.1",
5
5
  "engines": {
6
- "node": ">=v18.3.0"
6
+ "node": "^20.19.0 || >=22.12.0"
7
7
  },
8
8
  "devDependencies": {
9
9
  <%_ if (config.includeEsLint) { _%>
10
- "@eslint/compat": "^1.2.7",
10
+ "@eslint/compat": "^1.3.1",
11
11
  <%_ if (config.includeEsLintStylistic) { _%>
12
- "@stylistic/eslint-plugin": "^4.2.0",
12
+ "@stylistic/eslint-plugin": "^5.2.2",
13
13
  <%_ } _%>
14
- "@tsconfig/node22": "^22.0.0",
15
- "@types/node": "^22.13.9",
14
+ "@tsconfig/node22": "^22.0.2",
15
+ "@types/node": "^22.16.5",
16
16
  <%_ if (config.includeVitest) { _%>
17
- "@vitest/eslint-plugin": "^1.1.36",
17
+ "@vitest/eslint-plugin": "^1.3.4",
18
18
  <%_ } _%>
19
- "@vue/eslint-config-typescript": "^14.5.0",
20
- "eslint": "^9.21.0",
21
- "eslint-plugin-vue": "~10.0.0",
19
+ "@vue/eslint-config-typescript": "^14.6.0",
20
+ "eslint": "^9.31.0",
21
+ "eslint-plugin-vue": "~10.3.0",
22
22
  "jiti": "^2.4.2",
23
- "lint-staged": "^15.4.3",
24
- "npm-run-all2": "^7.0.2",
23
+ "lint-staged": "^16.1.2",
24
+ "npm-run-all2": "^8.0.4",
25
25
  <%_ } _%>
26
- "simple-git-hooks": "^2.11.1",
26
+ "simple-git-hooks": "^2.13.0",
27
27
  <%_ if (config.includeEsLint) { _%>
28
28
  "typescript": "~5.8.0"
29
29
  <%_ } _%>
@@ -39,28 +39,34 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@rollup/plugin-replace": "^6.0.2",
42
- "@tsconfig/node22": "^22.0.0",
42
+ <%_ if (config.includeTailwind) { _%>
43
+ "@tailwindcss/vite": "^4.1.11",
44
+ <%_ } _%>
45
+ "@tsconfig/node22": "^22.0.2",
43
46
  "@types/jsdom": "^21.1.7",
44
- "@types/node": "^22.13.9",
45
- "@vitejs/plugin-vue": "^5.2.1",
47
+ "@types/node": "^22.16.5",
48
+ "@vitejs/plugin-vue": "^6.0.1",
46
49
  <%_ if (config.includeVitest) { _%>
47
- "@vitest/coverage-v8": "^3.0.8",
50
+ "@vitest/coverage-v8": "^3.2.4",
48
51
  "@vue/test-utils": "^2.4.6",
49
52
  <%_ } _%>
50
53
  "@vue/tsconfig": "^0.7.0",
51
54
  "copyfiles": "^2.4.1",
52
- "jsdom": "^26.0.0",
53
- "npm-run-all2": "^7.0.2",
54
- "publint": "^0.3.8",
55
- "rimraf": "^5.0.1",
55
+ "jsdom": "^26.1.0",
56
+ "npm-run-all2": "^8.0.4",
57
+ "publint": "^0.3.12",
58
+ "rimraf": "^6.0.1",
59
+ <%_ if (config.includeTailwind) { _%>
60
+ "tailwindcss": "^4.1.11",
61
+ <%_ } _%>
56
62
  "typescript": "~5.8.0",
57
- "vite": "^6.2.1",
58
- "vite-plugin-dts": "^4.5.3",
63
+ "vite": "^7.0.6",
64
+ "vite-plugin-dts": "^4.5.4",
59
65
  <%_ if (config.includeVitest) { _%>
60
- "vitest": "^3.0.8",
66
+ "vitest": "^3.2.4",
61
67
  <%_ } _%>
62
- "vue": "^3.5.13",
63
- "vue-tsc": "^2.2.8"
68
+ "vue": "^3.5.18",
69
+ "vue-tsc": "^3.0.4"
64
70
  },
65
71
  "scripts": {
66
72
  "clean:dist": "rimraf dist",
@@ -4,6 +4,9 @@ import { defineConfig, type UserConfig } from 'vite'
4
4
  import replace from '@rollup/plugin-replace'
5
5
  import vue from '@vitejs/plugin-vue'
6
6
  import dts from 'vite-plugin-dts'
7
+ <%_ if (config.includeTailwind) { _%>
8
+ import tailwindcss from '@tailwindcss/vite'
9
+ <%_ } _%>
7
10
 
8
11
  export default defineConfig(({ mode }): UserConfig => {
9
12
  if (mode !== 'production' && mode !== 'development' && mode !== 'neutral' && mode !== 'test') {
@@ -38,6 +41,9 @@ export default defineConfig(({ mode }): UserConfig => {
38
41
  prodDevtools: mode === 'development'
39
42
  }
40
43
  }),
44
+ <%_ if (config.includeTailwind) { _%>
45
+ tailwindcss(),
46
+ <%_ } _%>
41
47
  dtsPlugin
42
48
  ],
43
49
 
@@ -9,12 +9,13 @@ const msg = ref('Hello world!')
9
9
  </script>
10
10
 
11
11
  <template>
12
- <div class="outer">
13
- <input v-model="msg">
12
+ <div class="outer<%- config.includeTailwind ? ' border-1 border-solid border-green-700 p-5' : '' %>">
13
+ <input v-model="msg"<%- config.includeTailwind ? ' class="border-1 border-solid border-neutral-500 px-1 py-0.5"' : '' %>>
14
14
  <p>{{ msg }}</p>
15
15
  </div>
16
16
  </template>
17
17
 
18
+ <%_ if (!config.includeTailwind) { _%>
18
19
  <style scoped>
19
20
  .outer {
20
21
  border: 1px solid green;
@@ -26,3 +27,4 @@ const msg = ref('Hello world!')
26
27
  padding: 2px 4px;
27
28
  }
28
29
  </style>
30
+ <%_ } _%>
@@ -13,21 +13,22 @@ if (__DEV__) {
13
13
  </script>
14
14
 
15
15
  <template>
16
- <div class="panel">
16
+ <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]' : '' %>">
17
17
  <slot name="header">
18
- <MyPanelSection v-if="title" class="panel-header">{{ title }}</MyPanelSection>
18
+ <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>
19
19
  </slot>
20
20
  <slot name="body">
21
- <MyPanelSection class="panel-body">
21
+ <MyPanelSection class="panel-body<%- config.includeTailwind ? ' flex-auto overflow-auto' : '' %>">
22
22
  <slot />
23
23
  </MyPanelSection>
24
24
  </slot>
25
25
  <slot name="footer">
26
- <MyPanelSection v-if="footer" class="panel-footer">{{ footer }}</MyPanelSection>
26
+ <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>
27
27
  </slot>
28
28
  </div>
29
29
  </template>
30
30
 
31
+ <%_ if (!config.includeTailwind) { _%>
31
32
  <style scoped>
32
33
  .panel {
33
34
  border: 1px solid #34495e;
@@ -65,3 +66,4 @@ if (__DEV__) {
65
66
  overflow: auto;
66
67
  }
67
68
  </style>
69
+ <%_ } _%>
@@ -13,13 +13,15 @@ if (__DEV__) {
13
13
  </script>
14
14
 
15
15
  <template>
16
- <div class="panel-section">
16
+ <div class="panel-section<%- config.includeTailwind ? ' p-2' : '' %>">
17
17
  <slot />
18
18
  </div>
19
19
  </template>
20
20
 
21
+ <%_ if (!config.includeTailwind) { _%>
21
22
  <style scoped>
22
23
  .panel-section {
23
24
  padding: 10px;
24
25
  }
25
26
  </style>
27
+ <%_ } _%>
@@ -1,3 +1,7 @@
1
+ <%_ if (config.includeTailwind) { _%>
2
+ import './index.css'
3
+
4
+ <%_ } _%>
1
5
  export { default as ExampleComponent } from './components/ExampleComponent.vue'
2
6
  export { default as MyPanel } from './components/MyPanel.vue'
3
7
  export { default as MyPanelSection } from './components/MyPanelSection.vue'
@@ -2,9 +2,11 @@ name: CI
2
2
 
3
3
  on:
4
4
  push:
5
- branches: ['main']
5
+ branches:
6
+ - main
6
7
  pull_request:
7
- branches: ['main']
8
+ branches:
9
+ - main
8
10
 
9
11
  jobs:
10
12
  ci:
@@ -4,7 +4,12 @@ name: Deploy to GitHub Pages
4
4
  on:
5
5
  # Runs on pushes targeting the default branch
6
6
  push:
7
- branches: ['main']
7
+ branches:
8
+ - main
9
+ <%_ if (config.includePlayground) { _%>
10
+ paths-ignore:
11
+ - '<%- config.packagesDir %>playground/**'
12
+ <%_ } _%>
8
13
 
9
14
  # Allows you to run this workflow manually from the Actions tab
10
15
  workflow_dispatch:
@@ -0,0 +1,3 @@
1
+ /// <reference types="vite/client" />
2
+
3
+ import '../<%- config.mainPackageDirName %>/env.d.ts'
@@ -0,0 +1,33 @@
1
+ {
2
+ "private": true,
3
+ "type": "module",
4
+ "dependencies": {
5
+ "vue": "^3.5.18"
6
+ },
7
+ "devDependencies": {
8
+ <%_ if (config.includeTailwind) { _%>
9
+ "@tailwindcss/vite": "^4.1.11",
10
+ <%_ } _%>
11
+ "@tsconfig/node22": "^22.0.2",
12
+ "@types/node": "^22.16.5",
13
+ "@vitejs/plugin-vue": "^6.0.1",
14
+ "@vue/tsconfig": "^0.7.0",
15
+ "npm-run-all2": "^8.0.4",
16
+ "rimraf": "^6.0.1",
17
+ <%_ if (config.includeTailwind) { _%>
18
+ "tailwindcss": "^4.1.11",
19
+ <%_ } _%>
20
+ "typescript": "~5.8.0",
21
+ "vite": "^7.0.6",
22
+ "vite-plugin-vue-devtools": "^8.0.0",
23
+ "vue-tsc": "^3.0.4"
24
+ },
25
+ "scripts": {
26
+ "clean": "rimraf dist",
27
+ "dev": "vite --port 5051",
28
+ "type-check": "vue-tsc --build",
29
+ "build:only": "vite build",
30
+ "build": "run-p -c type-check \"build:only {@}\" --",
31
+ "preview": "vite preview --port 4051"
32
+ }
33
+ }
@@ -1,8 +1,14 @@
1
+ <%_ if (config.includeAtAliases) { _%>
2
+ import { relative, sep as pathSeparator } from 'node:path'
3
+ <%_ } _%>
1
4
  import { fileURLToPath, URL } from 'node:url'
2
5
 
3
6
  import { defineConfig, type UserConfig } from 'vite'
4
7
  import vue from '@vitejs/plugin-vue'
5
8
  import vueDevTools from 'vite-plugin-vue-devtools'
9
+ <%_ if (config.includeTailwind) { _%>
10
+ import tailwindcss from '@tailwindcss/vite'
11
+ <%_ } _%>
6
12
 
7
13
  <%_ if (config.includeAtAliases) { _%>
8
14
  const librarySrc = fileURLToPath(new URL('../<%- config.mainPackageDirName %>/src/', import.meta.url))
@@ -12,6 +18,9 @@ const playgroundSrc = fileURLToPath(new URL('./src/', import.meta.url))
12
18
  export default defineConfig(({ mode }): UserConfig => ({
13
19
  plugins: [
14
20
  vue(),
21
+ <%_ if (config.includeTailwind) { _%>
22
+ tailwindcss(),
23
+ <%_ } _%>
15
24
  vueDevTools()
16
25
  ],
17
26
 
@@ -21,11 +30,17 @@ export default defineConfig(({ mode }): UserConfig => ({
21
30
  {
22
31
  find: '@',
23
32
  replacement: '@',
24
- customResolver(source, importer) {
25
- return source.replace(
26
- /^@\//,
27
- importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
28
- )
33
+ customResolver(source, importer, options) {
34
+ let target = playgroundSrc
35
+
36
+ // If the importer is inside librarySrc we resolve @ to that path
37
+ if (importer && relative(importer, librarySrc).split(pathSeparator).every(p => p === '..')) {
38
+ target = librarySrc
39
+ }
40
+
41
+ const filePath = source.replace(/^@\//, target)
42
+
43
+ return this.resolve(filePath, importer, options)
29
44
  }
30
45
  }, {
31
46
  find: '<%- config.scopedPackageName %>',
@@ -1,9 +1,9 @@
1
1
  <script setup lang="ts">
2
- import { ExampleComponent, MyPanel } from '@scopedPackageName@'
2
+ import { ExampleComponent, MyPanel } from '<%- config.scopedPackageName %>'
3
3
  </script>
4
4
 
5
5
  <template>
6
- <div class="main">
6
+ <div class="main<%- config.includeTailwind ? ' flex flex-col max-w-75 gap-2.5 m-2.5' : '' %>">
7
7
  <ExampleComponent />
8
8
  <MyPanel title="Panel title" footer="Panel footer">
9
9
  Header and footer
@@ -20,6 +20,7 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
20
20
  </div>
21
21
  </template>
22
22
 
23
+ <%_ if (!config.includeTailwind) { _%>
23
24
  <style scoped>
24
25
  .main {
25
26
  max-width: 300px;
@@ -29,3 +30,4 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
29
30
  margin-top: 10px;
30
31
  }
31
32
  </style>
33
+ <%_ } _%>
@@ -0,0 +1,3 @@
1
+ @import "tailwindcss";
2
+
3
+ @source ".";
@@ -1,10 +1,16 @@
1
+ <%_ if (config.includeAtAliases) { _%>
2
+ import { relative, sep as pathSeparator } from 'node:path'
3
+ <%_ } _%>
1
4
  import { fileURLToPath, URL } from 'node:url'
2
5
 
3
6
  import { defineConfigWithTheme } from 'vitepress'
7
+ <%_ if (config.includeTailwind) { _%>
8
+ import tailwindcss from '@tailwindcss/vite'
9
+ <%_ } _%>
4
10
 
5
11
  <%_ if (config.includeAtAliases) { _%>
6
12
  const librarySrc = fileURLToPath(new URL('../../<%- config.mainPackageDirName %>/src/', import.meta.url))
7
- const playgroundSrc = fileURLToPath(new URL('../src/', import.meta.url))
13
+ const docsSrc = fileURLToPath(new URL('../src/', import.meta.url))
8
14
  <%_ } _%>
9
15
 
10
16
  export default ({ mode }: { mode: string }) => defineConfigWithTheme({
@@ -34,17 +40,29 @@ export default ({ mode }: { mode: string }) => defineConfigWithTheme({
34
40
  <%_ } _%>
35
41
 
36
42
  vite: {
43
+ <%_ if (config.includeTailwind) { _%>
44
+ plugins: [
45
+ tailwindcss()
46
+ ],
47
+ <%_ } _%>
48
+
37
49
  resolve: {
38
50
  <%_ if (config.includeAtAliases) { _%>
39
51
  alias: [
40
52
  {
41
53
  find: '@',
42
54
  replacement: '@',
43
- customResolver(source, importer) {
44
- return source.replace(
45
- /^@\//,
46
- importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
47
- )
55
+ customResolver(source, importer, options) {
56
+ let target = docsSrc
57
+
58
+ // If the importer is inside librarySrc we resolve @ to that path
59
+ if (importer && relative(importer, librarySrc).split(pathSeparator).every(p => p === '..')) {
60
+ target = librarySrc
61
+ }
62
+
63
+ const filePath = source.replace(/^@\//, target)
64
+
65
+ return this.resolve(filePath, importer, options)
48
66
  }
49
67
  }, {
50
68
  find: '<%- config.scopedPackageName %>',
@@ -0,0 +1,3 @@
1
+ /// <reference types="vite/client" />
2
+
3
+ import '../<%- config.mainPackageDirName %>/env.d.ts'
@@ -2,17 +2,26 @@
2
2
  "private": true,
3
3
  "type": "module",
4
4
  "dependencies": {
5
- "vue": "^3.5.13"
5
+ "vue": "^3.5.18"
6
6
  },
7
7
  "devDependencies": {
8
- "@tsconfig/node22": "^22.0.0",
9
- "@types/node": "^22.13.9",
8
+ <%_ if (config.includeTailwind) { _%>
9
+ "@tailwindcss/vite": "^4.1.11",
10
+ <%_ } _%>
11
+ "@tsconfig/node22": "^22.0.2",
12
+ "@types/node": "^22.16.5",
10
13
  "@vue/tsconfig": "^0.7.0",
11
- "npm-run-all2": "^7.0.2",
14
+ "npm-run-all2": "^8.0.4",
15
+ <%_ if (config.includeVpRaw) { _%>
16
+ "postcss": "^8.5.6",
17
+ <%_ } _%>
12
18
  "rimraf": "^6.0.1",
19
+ <%_ if (config.includeTailwind) { _%>
20
+ "tailwindcss": "^4.1.11",
21
+ <%_ } _%>
13
22
  "typescript": "~5.8.0",
14
23
  "vitepress": "^1.6.3",
15
- "vue-tsc": "^2.2.8"
24
+ "vue-tsc": "^3.0.4"
16
25
  },
17
26
  "scripts": {
18
27
  "clean": "rimraf dist .vitepress/cache",
@@ -1,11 +1,11 @@
1
1
  ---
2
2
  layout: home
3
3
 
4
- title: @unscopedPackageName@
4
+ title: <%- config.unscopedPackageName %>
5
5
  titleTemplate: Title template
6
6
 
7
7
  hero:
8
- name: @unscopedPackageName@
8
+ name: <%- config.unscopedPackageName %>
9
9
  text: Description
10
10
  tagline: Tag line!
11
11
  actions:
@@ -14,7 +14,7 @@ hero:
14
14
  link: /introduction
15
15
  - theme: alt
16
16
  text: View on GitHub
17
- link: https://github.com/@githubPath@
17
+ link: https://github.com/<%- config.githubPath %>
18
18
  - theme: alt
19
19
  text: See a demo
20
20
  link: https://play.vuejs.org/
@@ -1,5 +1,5 @@
1
1
  <script setup lang="ts">
2
- import { ExampleComponent, MyPanel } from '@scopedPackageName@'
2
+ import { ExampleComponent, MyPanel } from '<%- config.scopedPackageName %>'
3
3
  </script>
4
4
 
5
5
  <style scoped>
@@ -10,6 +10,9 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
10
10
 
11
11
  # Introduction
12
12
 
13
+ <%_ if (config.includeVpRaw) { _%>
14
+ ::: raw
15
+ <%_ } _%>
13
16
  <ExampleComponent />
14
17
 
15
18
  <MyPanel title="Panel title" footer="Panel footer">
@@ -27,3 +30,6 @@ import { ExampleComponent, MyPanel } from '@scopedPackageName@'
27
30
  <MyPanel>
28
31
  No header or footer
29
32
  </MyPanel>
33
+ <%_ if (config.includeVpRaw) { _%>
34
+ :::
35
+ <%_ } _%>
@@ -0,0 +1,10 @@
1
+ import { postcssIsolateStyles } from 'vitepress'
2
+
3
+ export default {
4
+ plugins: [
5
+ // See https://vitepress.dev/guide/markdown#raw
6
+ postcssIsolateStyles({
7
+ includeFiles: [/base\.css/, /vp-doc\.css/]
8
+ })
9
+ ]
10
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skirtle/create-vue-lib",
3
- "version": "0.0.9",
3
+ "version": "0.1.0",
4
4
  "author": "skirtle",
5
5
  "license": "MIT",
6
6
  "description": "Create a library using Vue and Vite",
@@ -26,18 +26,18 @@
26
26
  "dist"
27
27
  ],
28
28
  "devDependencies": {
29
- "@tsconfig/node22": "^22.0.0",
29
+ "@tsconfig/node22": "^22.0.2",
30
30
  "@types/ejs": "^3.1.5",
31
- "@types/node": "^22.13.9",
31
+ "@types/node": "^22.16.5",
32
32
  "@types/prompts": "^2.4.9",
33
33
  "copyfiles": "^2.4.1",
34
34
  "ejs": "^3.1.10",
35
- "npm-run-all2": "^7.0.2",
35
+ "npm-run-all2": "^8.0.4",
36
36
  "picocolors": "^1.1.1",
37
37
  "prompts": "^2.4.2",
38
- "publint": "^0.3.8",
38
+ "publint": "^0.3.12",
39
39
  "rimraf": "^6.0.1",
40
- "tsup": "^8.4.0",
40
+ "tsup": "^8.5.0",
41
41
  "typescript": "~5.8.0"
42
42
  },
43
43
  "scripts": {
@@ -1,3 +0,0 @@
1
- /// <reference types="vite/client" />
2
-
3
- import '../@projectName@/env.d.ts'
@@ -1,27 +0,0 @@
1
- {
2
- "private": true,
3
- "type": "module",
4
- "dependencies": {
5
- "vue": "^3.5.13"
6
- },
7
- "devDependencies": {
8
- "@tsconfig/node22": "^22.0.0",
9
- "@types/node": "^22.13.9",
10
- "@vitejs/plugin-vue": "^5.2.1",
11
- "@vue/tsconfig": "^0.7.0",
12
- "npm-run-all2": "^7.0.2",
13
- "rimraf": "^5.0.1",
14
- "typescript": "~5.8.0",
15
- "vite": "^6.2.1",
16
- "vite-plugin-vue-devtools": "^7.7.2",
17
- "vue-tsc": "^2.2.8"
18
- },
19
- "scripts": {
20
- "clean": "rimraf dist",
21
- "dev": "vite --port 5051",
22
- "type-check": "vue-tsc --build",
23
- "build:only": "vite build",
24
- "build": "run-p -c type-check \"build:only {@}\" --",
25
- "preview": "vite preview --port 4051"
26
- }
27
- }
@@ -1,3 +0,0 @@
1
- /// <reference types="vite/client" />
2
-
3
- import '../@projectName@/env.d.ts'