@skirtle/create-vue-lib 0.0.0

package/dist/template/base/config/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/dist/template/base/config/README.md.ejs

@@ -0,0 +1,5 @@
+# <%- config.scopedPackageName %>
+
+Project description
+
+## License

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

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "clean": "pnpm run -r clean",
+    "build": "pnpm run -r build",
+    "type-check": "pnpm run -r type-check",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    <%_ if (config.includePlayground) { _%>
+    "dev": "pnpm run --filter ./packages/playground -r dev",
+    <%_ } _%>
+    <%_ if (config.includeDocs) { _%>
+    "docs:dev": "pnpm run --filter ./packages/docs -r dev",
+    "docs:build": "pnpm run --filter ./packages/docs -r build",
+    <%_ } _%>
+    "test:unit": "pnpm run --filter ./packages/<%- config.mainPackageDirName %> -r test:unit",
+    "coverage": "pnpm run --filter ./packages/<%- config.mainPackageDirName %> -r coverage",
+    "preinstall": "node scripts/preinstall.js",
+    "postinstall": "simple-git-hooks"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm run type-check && pnpm exec lint-staged"
+  },
+  "lint-staged": {
+    "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --fix"
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^8.23.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "lint-staged": "^15.4.3",
+    "simple-git-hooks": "^2.11.1"
+  }
+}

package/dist/template/base/config/packages/@projectName@/README.md.ejs

@@ -0,0 +1,5 @@
+# <%- config.scopedPackageName %>
+
+Project description
+
+## License

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

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

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

@@ -0,0 +1,73 @@
+{
+  "private": true,
+  "name": "@scopedPackageName@",
+  "version": "0.0.0",
+  "author": "",
+  "license": "",
+  "description": "",
+  "keywords": [],
+  "homepage": "@homepageUrl@",
+  "bugs": "@githubIssues@",
+  "repository": {
+    "type": "git",
+    "url": "@githubRepository@"
+  },
+  "sideEffects": false,
+  "main": "dist/@unscopedPackageName@.cjs",
+  "module": "dist/@unscopedPackageName@.esm-bundler.mjs",
+  "unpkg": "dist/@unscopedPackageName@.global.dev.js",
+  "jsdelivr": "dist/@unscopedPackageName@.global.dev.js",
+  "types": "dist/@unscopedPackageName@.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/@unscopedPackageName@.d.ts",
+      "import": "./dist/@unscopedPackageName@.esm-bundler.mjs",
+      "require": "./dist/@unscopedPackageName@.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.2",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.10.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "jsdom": "^26.0.0",
+    "rimraf": "^5.0.1",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.2",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0",
+
+    "@vitest/eslint-plugin": "1.1.25",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^7.0.2",
+    "vite-plugin-vue-devtools": "^7.7.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist && rimraf coverage",
+    "test:unit": "vitest --environment jsdom",
+    "coverage": "vitest run --coverage --environment jsdom",
+    "build": "rimraf dist && pnpm build-dev && pnpm build-neutral && pnpm build-prod && pnpm type-check",
+    "build-dev": "vite build --mode development",
+    "build-neutral": "vite build --mode neutral",
+    "build-prod": "vite build --mode production",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "preinstall": "node ../../scripts/preinstall.js"
+  }
+}

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

@@ -0,0 +1 @@
+declare let __DEV__: boolean

package/dist/template/base/config/packages/@projectName@/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/dist/template/base/config/packages/@projectName@/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/dist/template/base/config/packages/@projectName@/tsconfig.vitest.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

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

@@ -0,0 +1,75 @@
+import { resolve } from 'node:path'
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import replace from '@rollup/plugin-replace'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(({ mode }) => {
+  if (mode !== 'production' && mode !== 'development' && mode !== 'neutral' && mode !== 'test') {
+    throw new Error(`Unknown mode: ${mode}`)
+  }
+
+  const dtsPlugin = mode === 'neutral' ? dts({
+    rollupTypes: true,
+    tsconfigPath: './tsconfig.app.json'
+  }) : null
+
+  return {
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          __DEV__: mode === 'production' ? 'false' : mode === 'development' ? 'true' : '!(process.env.NODE_ENV === "production")'
+        }
+      }),
+      vue(),
+      dtsPlugin
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    build: {
+      target: 'es2019',
+      emptyOutDir: false,
+      minify: mode === 'production',
+      lib: {
+        entry: resolve(__dirname, 'src/index.ts'),
+        name: '@globalVariableName@',
+        formats: mode === 'neutral' ? ['cjs', 'es'] : ['es', 'iife'],
+
+        fileName(format) {
+          let name = '@unscopedPackageName@'
+          let extension = 'js'
+
+          if (format === 'iife') {
+            name += '.global'
+          } else if (format === 'es') {
+            name += '.esm-' + (mode === 'neutral' ? 'bundler' : 'browser')
+          }
+
+          if (mode === 'production') {
+            name += '.prod'
+          } else if (mode === 'development') {
+            name += '.dev'
+          } else if (mode === 'neutral') {
+            extension = format === 'cjs' ? 'cjs' : 'mjs'
+          }
+
+          return `${name}.${extension}`
+        }
+      },
+      rollupOptions: {
+        external: ['vue'],
+        output: {
+          globals: {
+            vue: 'Vue'
+          }
+        }
+      }
+    }
+  }
+})

package/dist/template/base/config/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/dist/template/base/config/scripts/preinstall.js

@@ -0,0 +1,6 @@
+if (!/pnpm/.test(process.env.npm_execpath || '')) {
+  console.warn(
+    '\u001b[33mThis project requires using pnpm as the package manager.\u001b[39m\n'
+  )
+  process.exit(1)
+}

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

@@ -0,0 +1,4 @@
+{
+  "files": [".eslintrc.cjs"],
+  "include": ["scripts/**/*"]
+}

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+if (__DEV__) {
+  console.log('dev: creating Example component')
+}
+
+const msg = ref('Hello world!')
+</script>
+
+<template>
+  <div class="outer">
+    <input v-model="msg">
+    <p>{{ msg }}</p>
+  </div>
+</template>
+
+<style scoped>
+.outer {
+  border: 1px solid green;
+  padding: 20px;
+}
+
+.outer input {
+  border: 1px solid #777;
+  padding: 2px 4px;
+}
+</style>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import MyPanelSection from './MyPanelSection.vue'
+
+defineProps<{
+  title?: string
+  footer?: string
+}>()
+</script>
+
+<template>
+  <div class="panel">
+    <slot name="header">
+      <MyPanelSection v-if="title" class="panel-header">{{ title }}</MyPanelSection>
+    </slot>
+    <slot name="body">
+      <MyPanelSection class="panel-body">
+        <slot />
+      </MyPanelSection>
+    </slot>
+    <slot name="footer">
+      <MyPanelSection v-if="footer" class="panel-footer">{{ footer }}</MyPanelSection>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.panel {
+  border: 1px solid #34495e;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  overflow: hidden;
+}
+
+.panel > * + * {
+  border-top: 1px solid #34495e;
+}
+
+.panel-header, .panel-footer {
+  background: #34495e;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  color: #fff;
+  letter-spacing: 0.5px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+.panel-section:first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.panel-section:last-child {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.panel-body {
+  flex: auto;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,15 @@
+<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/components/__tests__/MyPanel.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MyPanel from '../MyPanel.vue'
+
+describe('MyPanel', () => {
+  test('Just a body', () => {
+    const wrapper = mount(MyPanel)
+
+    expect(wrapper.findAll('.panel-section')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-body')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-footer')).toHaveLength(0)
+    expect(wrapper.findAll('.panel-header')).toHaveLength(0)
+  })
+
+  test('title prop', () => {
+    const wrapper = mount(MyPanel, {
+      props: {
+        title: 'Title'
+      }
+    })
+
+    expect(wrapper.findAll('.panel-section')).toHaveLength(2)
+    expect(wrapper.findAll('.panel-body')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-footer')).toHaveLength(0)
+    expect(wrapper.findAll('.panel-header')).toHaveLength(1)
+
+    expect(wrapper.get('.panel-header').text()).toBe('Title')
+  })
+
+  test('footer prop', () => {
+    const wrapper = mount(MyPanel, {
+      props: {
+        footer: 'Footer'
+      }
+    })
+
+    expect(wrapper.findAll('.panel-section')).toHaveLength(2)
+    expect(wrapper.findAll('.panel-body')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-footer')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-header')).toHaveLength(0)
+
+    expect(wrapper.get('.panel-footer').text()).toBe('Footer')
+  })
+
+  test('title and footer props', () => {
+    const wrapper = mount(MyPanel, {
+      props: {
+        title: 'Both title',
+        footer: 'and footer'
+      }
+    })
+
+    expect(wrapper.findAll('.panel-section')).toHaveLength(3)
+    expect(wrapper.findAll('.panel-body')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-footer')).toHaveLength(1)
+    expect(wrapper.findAll('.panel-header')).toHaveLength(1)
+
+    expect(wrapper.get('.panel-header').text()).toBe('Both title')
+    expect(wrapper.get('.panel-footer').text()).toBe('and footer')
+  })
+})

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

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

package/dist/template/gh-pages/config/.github/workflows/pages.yml

@@ -0,0 +1,55 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm run docs:build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload docs dist directory
+          path: './packages/docs/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

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

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

package/dist/template/playground/config/packages/playground/package.json

@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite --port 5051",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "build-only": "vite build",
+    "build": "pnpm run type-check && pnpm run build-only",
+    "preview": "vite preview --port 4051",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.10.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "rimraf": "^5.0.1",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-vue-devtools": "^7.7.0",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/dist/template/playground/config/packages/playground/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.playground.app.tsbuildinfo",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@scopedPackageName@": ["../@projectName@/src/index.ts"]
+    }
+  }
+}

package/dist/template/playground/config/packages/playground/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/dist/template/playground/config/packages/playground/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "../../node_modules/.tmp/tsconfig.playground.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

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

@@ -0,0 +1,22 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@scopedPackageName@': fileURLToPath(new URL('../@projectName@/src/index.ts', import.meta.url))
+    },
+  },
+
+  define: {
+    __DEV__: JSON.stringify(mode !== 'production')
+  }
+}))

package/dist/template/playground/examples/packages/playground/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Playground</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>

package/dist/template/playground/examples/packages/playground/src/App.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Example as ExampleComponent, MyPanel } from '@scopedPackageName@'
+</script>
+
+<template>
+  <div class="main">
+    <ExampleComponent />
+    <MyPanel title="Panel title" footer="Panel footer">
+      Header and footer
+    </MyPanel>
+    <MyPanel title="Panel title">
+      Just a header
+    </MyPanel>
+    <MyPanel footer="Panel footer">
+      Just a footer
+    </MyPanel>
+    <MyPanel>
+      No header or footer
+    </MyPanel>
+  </div>
+</template>
+
+<style scoped>
+.main > * + * {
+  margin-top: 10px;
+  max-width: 300px;
+}
+</style>