@citruslime/create-boilerplate 3.0.0-beta.2 → 3.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@citruslime/create-boilerplate",
   "type": "module",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "author": {
     "name": "Citrus-Lime Ltd",
     "url": "https://citruslime.com"
@@ -13,8 +13,7 @@
   },
   "files": [
     "main.js",
-    "template",
-    "hooks"
+    "template"
   ],
   "maintainers": [
     "Citrus-Lime"
@@ -24,7 +23,7 @@
     "create-boilerplate": "main.js"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=24.0.0"
   },
   "dependencies": {
     "kolorist": "^1.7.0",

package/template/README.md

@@ -1,11 +1,11 @@
-# Citrus-Lime Boilerplate App
+# [[PACKAGE_NAME]]
 
-This boilerplate should provide a good basis for creating a new Citrus-Lime web app.
+This project was scaffolded using the Citrus-Lime boilerplate scaffolding app (@citruslime/create-boilerplate).
 
 It makes use of the various @citruslime packages, as well as the current standards for a Vue 3 + TypeScript app and various helpful Vite plugins to make development easier.
 
-Linting is provided by default by a combination of ESLint and StyleLint.
+Linting is provided by a combination of ESLint and Stylelint via shared workspace config packages.
 
 ### Areas of Consideration
 
-Example code is provided in the state and views folders. It should be deleted or replaced, once development is started.
+The full template contains various example code that should be replaced/expanded upon, once development is started.

package/template/_editorconfig

@@ -1,3 +1,5 @@
+root = true
+
 [*]
 indent_style = space
 indent_size = 4
@@ -8,3 +10,6 @@ insert_final_newline = true
 
 [*.css]
 indent_style = tab
+
+[*.yml]
+indent_size = 2

package/template/_gitattributes

@@ -1,5 +1,8 @@
 * text eol=lf
 
-*.png binary
-*.jpg binary
+*.gif binary
 *.ico binary
+*.jpg binary
+*.jpeg binary
+*.png binary
+*.webp binary

package/template/_gitignore

@@ -4,16 +4,17 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
 
 node_modules
 .DS_Store
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
+
+.turbo/
 
 .vscode/*
-!.vscode/*.code-workspace
 !.vscode/settings.json
 !.vscode/extensions.json
 .idea
@@ -22,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+coverage/
+*.lcov

package/template/_husky/post-checkout

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+
+pnpm install

package/template/_husky/post-merge

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+
+pnpm install

package/template/_husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+
+pnpm exec lint-staged

package/template/apps/app/_lintstagedrc.js

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export default {
+    '*.{js,cjs,mjs,ts,cts,mts,vue}': ['eslint --fix'],
+    '*.{css,vue}': ['stylelint --fix']
+};

package/template/apps/app/_stylelint.config.js

@@ -0,0 +1,4 @@
+/** @type {import('stylelint').Config} */
+export default {
+    extends: ['@[[PACKAGE_NAME]]/config-stylelint']
+};

package/template/apps/app/eslint.config.js

@@ -0,0 +1,39 @@
+import path from 'node:path';
+
+import config from '@[[PACKAGE_NAME]]/config-eslint';
+
+import autoImports from './eslint-auto-imports.js';
+
+export default [
+    ...config,
+    {
+        languageOptions: {
+            ...autoImports,
+            parserOptions: {
+                projectService: {
+                    allowDefaultProject: ['*.js'],
+                    project: ['./tsconfig.json']
+                },
+                tsconfigRootDir: import.meta.dirname
+            }
+        },
+        settings: {
+            'import/resolver': {
+                typescript: {
+                    project: path.join(import.meta.dirname, 'tsconfig.json'),
+                    conditionNames: [
+                        'development',
+                        'module-sync',
+                        'types',
+                        'import',
+                        'require',
+                        'node',
+                        'browser',
+                        'default'
+                    ]
+                },
+                node: true
+            }
+        }
+    }
+];

package/template/apps/app/index.html

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

package/template/apps/app/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@[[PACKAGE_NAME]]/app",
+    "type": "module",
+    "version": "0.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "run-s typecheck build-only",
+        "build-only": "vite build",
+        "typecheck": "vue-tsc --noEmit",
+        "preview": "vite preview",
+        "lint": "eslint . --fix --cache && stylelint \"src/**/*.{css,vue}\" --fix --cache",
+        "test": "vitest run"
+    },
+    "dependencies": {
+        "@[[PACKAGE_NAME]]/utils": "workspace:*"
+    },
+    "devDependencies": {
+        "@[[PACKAGE_NAME]]/config-eslint": "workspace:*",
+        "@[[PACKAGE_NAME]]/config-stylelint": "workspace:*",
+        "@[[PACKAGE_NAME]]/config-typescript": "workspace:*"
+    }
+}

package/template/{src → apps/app/src}/app.vue

@@ -3,13 +3,7 @@ const route = useRoute();
 </script>
 
 <style>
-/* stylelint-disable-next-line import-notation */
-@import 'tailwindcss';
-@import url('../../../ui/src/main.css');
-@import url('highlight.js/styles/base16/material-palenight.css');
-
-/* stylelint-disable-next-line at-rule-no-unknown */
-@reference '../../../theme/tailwind-theme.css';
+@reference '@/main.css';
 
 body {
 	@apply bg-off-white min-h-full w-full xl:min-h-screen;

package/template/apps/app/src/main.css

@@ -0,0 +1,6 @@
+@import url('@citruslime/ui/style');
+
+/* stylelint-disable-next-line import-notation */
+@import '@citruslime/theme';
+
+@source './**/*.{vue,js,ts,jsx,tsx}';

package/template/apps/app/src/main.ts

@@ -0,0 +1,17 @@
+import './main.css';
+import { i18n } from '@citruslime/ui';
+import { createPersistedState } from 'pinia-plugin-persistedstate';
+
+import app from './app.vue';
+import router from './router';
+
+const pinia = createPinia()
+    .use(createPersistedState({
+        key: id => `[[PACKAGE_NAME]]:${id}`
+    }));
+
+createApp(app)
+    .use(router)
+    .use(i18n)
+    .use(pinia)
+    .mount('#app');

package/template/{src/pages/dashboard/index.vue → apps/app/src/pages/dashboard.vue}

@@ -1,15 +1,13 @@
-<route lang="json">
-{
-    "path": "/"
-}
-</route>
-
 <script setup lang="ts">
 import { setLocaleMessages } from '@citruslime/ui';
 
 const { username } = storeToRefs(useAuthStore());
 const { t } = useI18n();
 
+definePage({
+    path: '/'
+});
+
 setLocaleMessages('en-GB', {
     messages: {
         greeting: 'Hello, {name}!'

package/template/{src/router/index.ts → apps/app/src/router.ts}

@@ -1,14 +1,19 @@
+import { routes, handleHotUpdate } from 'vue-router/auto-routes';
+
 const router = createRouter({
     history: createWebHashHistory(),
-    extendRoutes (routes) {
-        routes.push({
-            name: 'not-found',
+    routes: [
+        ...routes,
+        {
             path: '/:pathMatch(.*)*',
+            name: 'not-found',
             redirect: '/'
-        });
-
-        return routes;
-    }
+        }
+    ]
 });
 
+if (import.meta.hot) {
+    handleHotUpdate(router);
+}
+
 export default router;

package/template/apps/app/src/state/auth.ts

@@ -0,0 +1,11 @@
+export const useAuthStore = defineStore('auth', () => {
+    const username = ref<string>('[[DEFAULT_USERNAME]]');
+
+    return {
+        username
+    };
+}, {
+    persist: {
+        storage: sessionStorage
+    }
+});

package/template/{tsconfig.app.json → apps/app/tsconfig.app.json}

@@ -1,10 +1,10 @@
 {
-    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "extends": "@[[PACKAGE_NAME]]/config-typescript/vue.json",
     "include": [
         "auto-imports.d.ts",
         "components.d.ts",
         "env.d.ts",
-        "typed-router.d.ts",
+        "route-map.d.ts",
         "src/**/*.ts",
         "src/**/*.d.ts",
         "src/**/*.vue"
@@ -16,18 +16,16 @@
         "composite": true,
         "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
         "baseUrl": ".",
-        "lib": [
-            "ESNext",
-            "DOM",
-            "DOM.Iterable"
-        ],
         "paths": {
             "@/*": [
                 "./src/*"
             ]
         },
         "types": [
-            "unplugin-vue-router/client"
+            "vite/client"
+        ],
+        "customConditions": [
+            "development"
         ]
     }
-}
+}

package/template/{tsconfig.json → apps/app/tsconfig.json}

@@ -6,9 +6,6 @@
         },
         {
             "path": "./tsconfig.app.json"
-        },
-        {
-            "path": "./tsconfig.vitest.json"
         }
     ]
-}
+}

package/template/apps/app/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+    "extends": "@[[PACKAGE_NAME]]/config-typescript/node.json",
+    "include": [
+        "vite.config.*"
+    ],
+    "compilerOptions": {
+        "composite": true,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "types": [
+            "node"
+        ]
+    }
+}

package/template/{vite.config.ts → apps/app/vite.config.ts}

@@ -1,73 +1,104 @@
 import { fileURLToPath, URL } from 'node:url';
 
+import { utilsPlugin } from '@[[PACKAGE_NAME]]/utils/plugin';
+import { utilsResolver } from '@[[PACKAGE_NAME]]/utils/resolver';
 import { CitrusLimeUI } from '@citruslime/ui';
+import vueI18n from '@intlify/unplugin-vue-i18n/vite';
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import autoImport from 'unplugin-auto-import/vite';
 import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
 import components from 'unplugin-vue-components/vite';
-import { VueRouterAutoImports, getPascalCaseRouteName } from 'unplugin-vue-router';
-import router from 'unplugin-vue-router/vite';
 import { defineConfig } from 'vite';
 import mkcert from 'vite-plugin-mkcert';
+import vueDevTools from 'vite-plugin-vue-devtools';
+import { VueRouterAutoImports, getPascalCaseRouteName } from 'vue-router/unplugin';
+import router from 'vue-router/vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
     plugins: [
+        utilsPlugin(),
+        tailwindcss({
+            optimize: {
+                minify: mode === 'production'
+            }
+        }),
+        vueI18n({
+            fullInstall: false,
+            runtimeOnly: false,
+            compositionOnly: true
+        }),
         autoImport({
             dts: true,
+            resolvers: [utilsResolver()],
             dirs: [
-                'src/router/**',
-                'src/state/**'
+                'src/**/*.ts',
+                'src/**/*.vue'
             ],
             imports: [
                 '@vueuse/core',
                 'pinia',
                 'vue',
                 'vue-i18n',
+                'vue-router',
                 VueRouterAutoImports,
                 {
-                    from: 'vue-router/auto',
+                    from: 'vue-router',
                     imports: [
                         'createRouter',
                         'createWebHashHistory'
                     ]
                 },
                 {
-                    from: 'vue-router/auto',
-                    imports: ['RouteRecordRaw'],
-                    type: true
+                    from: 'luxon',
+                    imports: ['DateTime']
                 },
                 {
                     from: 'luxon',
-                    imports: ['DateTime']
+                    imports: ['DateTimeMaybeValid'],
+                    type: true
                 }
             ],
             eslintrc: {
                 enabled: true,
-                filepath: '.eslintrc-auto-import.json',
-                globalsPropValue: true
+                filepath: 'eslint-auto-imports.js',
+                globalsPropValue: 'readonly'
             },
             vueTemplate: true
         }),
         components({
             dts: true,
             dirs: ['src/components'],
+            types: [
+                {
+                    from: 'vue-router',
+                    names: [
+                        'RouterLink',
+                        'RouterView'
+                    ]
+                }
+            ],
             resolvers: [
                 VueUseComponentsResolver(),
                 CitrusLimeUI()
             ]
         }),
         router({
+            dts: 'route-map.d.ts',
             routesFolder: 'src/pages',
             extensions: ['.vue'],
             getRouteName: getPascalCaseRouteName
         }),
         vue(),
-        mkcert()
+        mkcert(),
+        vueDevTools({
+            componentInspector: false
+        })
     ],
     build: {
         rollupOptions: {
             output: {
-                manualChunks (id) {
+                manualChunks (id: string): string | undefined {
                     if (id.includes('node_modules')) {
                         if (id.includes('.pnpm')) {
                             return id.toString().split('node_modules/.pnpm')[1].split('/')[1].toString();
@@ -86,22 +117,21 @@ export default defineConfig({
             'vue-i18n'
         ]
     },
-    /* eslint-disable @typescript-eslint/naming-convention */
-    define: {
-        __VUE_I18N_FULL_INSTALL__: true,
-        __VUE_I18N_LEGACY_API__: false,
-        __INTLIFY_PROD_DEVTOOLS__: false
-    },
     resolve: {
         alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
-            'vue-i18n': 'vue-i18n/dist/vue-i18n.esm-bundler.js'
-        }
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        },
+        conditions: mode === 'development' ?
+            [
+                'development',
+                'import',
+                'module',
+                'browser',
+                'default'
+            ] :
+            undefined
     },
     server: {
-        open: true,
-        port: '[[FRONTEND_PORT]]',
         proxy: '[[PROXY]]'
     }
-    /* eslint-enable @typescript-eslint/naming-convention */
-});
+}));

package/template/package.json

@@ -1,16 +1,17 @@
 {
     "name": "[[PACKAGE_NAME]]",
-    "type": "module",
-    "version": "0.0.0",
     "private": true,
+    "type": "module",
+    "engines": {
+        "node": ">=24"
+    },
+    "packageManager": "pnpm@10.29.3",
     "scripts": {
-        "dev": "vite",
-        "build": "run-s build-only type-check",
-        "build-only": "vite build",
-        "type-check": "vue-tsc --noEmit",
-        "serve": "vite preview",
-        "lint": "eslint . --fix --cache && stylelint **/*.{css,vue} --fix --cache",
-        "pre-commit-lint": "[[PACKAGE_MANAGER]] lint-staged",
-        "prepare": "cd [[ROOT_DIR]] && husky"
+        "dev": "turbo run dev",
+        "build": "turbo run build",
+        "lint": "turbo run lint",
+        "test": "turbo run test",
+        "typecheck": "turbo run typecheck",
+        "prepare": "cd [[GIT_ROOT]] && husky"
     }
 }

package/template/packages/config-eslint/_lintstagedrc.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export default {
+    '*.{js,cjs,mjs}': ['eslint --fix']
+};

package/template/packages/config-eslint/eslint.config.js

@@ -0,0 +1 @@
+export { default } from '@citruslime/config/eslint';

package/template/packages/config-eslint/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "@[[PACKAGE_NAME]]/config-eslint",
+    "type": "module",
+    "version": "0.0.0",
+    "private": true,
+    "main": "eslint.config.js",
+    "exports": {
+        ".": "./eslint.config.js"
+    }
+}

package/template/packages/config-stylelint/_lintstagedrc.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export default {
+    '*.{js,cjs,mjs}': ['eslint --fix']
+};

package/template/packages/config-stylelint/eslint.config.js

@@ -0,0 +1 @@
+export { default } from '@[[PACKAGE_NAME]]/config-eslint';

package/template/packages/config-stylelint/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@[[PACKAGE_NAME]]/config-stylelint",
+    "type": "module",
+    "version": "0.0.0",
+    "private": true,
+    "main": "index.js",
+    "exports": {
+        ".": "./index.js"
+    },
+    "devDependencies": {
+        "@[[PACKAGE_NAME]]/config-eslint": "workspace:*"
+    }
+}

package/template/packages/config-typescript/node.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@tsconfig/node24/tsconfig.json",
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "forceConsistentCasingInFileNames": true,
+        "preserveWatchOutput": true
+    },
+    "exclude": [
+        "node_modules",
+        "dist",
+        ".turbo"
+    ]
+}

package/template/packages/config-typescript/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "@[[PACKAGE_NAME]]/config-typescript",
+    "version": "0.0.0",
+    "private": true,
+    "exports": {
+        "./node.json": "./node.json",
+        "./vue.json": "./vue.json"
+    }
+}

package/template/packages/config-typescript/vue.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+        "isolatedModules": true,
+        "preserveWatchOutput": true,
+        "lib": [
+            "ES2023",
+            "DOM",
+            "DOM.Iterable"
+        ]
+    },
+    "exclude": [
+        "node_modules",
+        "dist",
+        ".turbo"
+    ]
+}