@citruslime/create-boilerplate 1.0.0-beta.12 → 1.0.0-beta.13

package/hooks/common.sh

@@ -0,0 +1,7 @@
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi

package/hooks/post-checkout

@@ -0,0 +1,11 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn_directory="$APPDATA\npm\node_modules\yarn\bin"
+
+if ! command -v "$yarn_directory\yarn" -v; then
+    npm install --global yarn
+fi
+
+"$yarn_directory\yarn" install -W

package/hooks/post-merge

@@ -0,0 +1,11 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn_directory="$APPDATA\npm\node_modules\yarn\bin"
+
+if ! command -v "$yarn_directory\yarn" -v; then
+    npm install --global yarn
+fi
+
+"$yarn_directory\yarn" install -W

package/hooks/pre-commit

@@ -0,0 +1,11 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn_directory="$APPDATA\npm\node_modules\yarn\bin"
+
+if ! command -v "$yarn_directory\yarn" -v; then
+    npm install --global yarn
+fi
+
+"$yarn_directory\yarn" pre-commit-lint

package/{main.js → main.mjs}

@@ -1,15 +1,17 @@
 #!/usr/bin/env node
 
-const { execSync } = require('child_process');
-const { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } = require('fs');
-const { join } = require('path');
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
 
-const { lightBlue, green, red } = require('kolorist');
-const parseArgs = require('minimist');
-const prompts = require('prompts');
+import { lightBlue, green, red } from 'kolorist';
+import parseArgs from 'minimist';
+import prompts from 'prompts';
 
 const argv = parseArgs(process.argv.slice(2));
 const cwd = process.cwd();
+const codeDir = fileURLToPath(dirname(import.meta.url));
 
 const placeholdersToReplace = {
     /* eslint-disable @typescript-eslint/naming-convention */
@@ -260,7 +262,7 @@ function prepareDir (path, empty) {
  * @param {string} packageDir The directory of the new package.
  */
 function copyTemplate (packageDir) {
-    const templateDir = join(__dirname, 'template');
+    const templateDir = join(codeDir, 'template');
 
     forEachInDir(templateDir, (item) => copy(templateDir, packageDir, item));
 }
@@ -272,7 +274,7 @@ function copyTemplate (packageDir) {
  * @param {string} rootDir The relative path from the package directory to the root of the repository.
  */
 function copyHooks (packageDir, rootDir) {
-    const hooksDir = join(__dirname, 'hooks');
+    const hooksDir = join(codeDir, 'hooks');
     const huskyDir = join(cwd, packageDir, rootDir, '.husky');
 
     forEachInDir(hooksDir, (item) => copy(hooksDir, huskyDir, item));
@@ -385,5 +387,9 @@ function print (message, clearPrevious = false) {
     process.stdout.write(message);
 }
 
-init()
-    .catch(e => print(red(`\n${e.message}`)));
+try {
+    await init();
+}
+catch (e) {
+    print(`\n${red(e.message)}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@citruslime/create-boilerplate",
-    "version": "1.0.0-beta.12",
+    "version": "1.0.0-beta.13",
     "author": {
         "name": "Citrus-Lime Ltd",
         "url": "https://citruslime.com"
@@ -11,12 +11,13 @@
         "access": "public"
     },
     "files": [
-        "main.js",
-        "template-*"
+        "main.mjs",
+        "template",
+        "hooks"
     ],
-    "main": "main.js",
+    "main": "main.mjs",
     "bin": {
-        "create-boilerplate": "main.js"
+        "create-boilerplate": "main.mjs"
     },
     "engines": {
         "node": ">=14.0.0"

package/template/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+    "recommendations": [
+        "johnsoncodehk.volar",
+        "dbaeumer.vscode-eslint",
+        "stylelint.vscode-stylelint",
+        "bradlc.vscode-tailwindcss",
+        "editorconfig.editorconfig",
+        "antfu.iconify"
+    ]
+}

package/template/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+    "[css]": {
+        "editor.insertSpaces": false
+    },
+    "css.validate": false,
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true,
+        "source.fixAll.eslint": true,
+        "source.organizeImports": false
+    },
+    "editor.formatOnSave": true,
+    "editor.linkedEditing": true,
+    "eslint.validate": [
+        "html",
+        "javascript",
+        "typescript",
+        "vue"
+    ],
+    "files.encoding": "utf8",
+    "files.eol": "\n",
+    "files.exclude": {
+        "node_modules": true
+    },
+    "files.trimTrailingWhitespace": true,
+    "git.enableSmartCommit": true,
+    "git.pruneOnFetch": true,
+    "tailwindCSS.includeLanguages": {
+        "vue": "html"
+    }
+}

package/template/.vscode/template.code-workspace

@@ -0,0 +1,52 @@
+{
+    "folders": [
+        {
+            "name": "Root",
+            "path": ".."
+        },
+        {
+            "name": "Hooks",
+            "path": "../../.husky"
+        }
+    ],
+    "settings": {
+        "[css]": {
+            "editor.insertSpaces": false
+        },
+        "css.validate": false,
+        "editor.codeActionsOnSave": {
+            "source.fixAll": true,
+            "source.fixAll.eslint": true,
+            "source.organizeImports": false
+        },
+        "editor.formatOnSave": true,
+        "editor.linkedEditing": true,
+        "eslint.validate": [
+            "html",
+            "javascript",
+            "typescript",
+            "vue"
+        ],
+        "files.encoding": "utf8",
+        "files.eol": "\n",
+        "files.exclude": {
+            "node_modules": true
+        },
+        "files.trimTrailingWhitespace": true,
+        "git.enableSmartCommit": true,
+        "git.pruneOnFetch": true,
+        "tailwindCSS.includeLanguages": {
+            "vue": "html"
+        }
+    },
+    "extensions": {
+        "recommendations": [
+            "johnsoncodehk.volar",
+            "dbaeumer.vscode-eslint",
+            "stylelint.vscode-stylelint",
+            "bradlc.vscode-tailwindcss",
+            "editorconfig.editorconfig",
+            "antfu.iconify"
+        ]
+    }
+}

package/template/README.md

@@ -0,0 +1,11 @@
+# Citrus-Lime Boilerplate App
+
+This boilerplate should provide a good basis for creating a new Citrus-Lime web app.
+
+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.
+
+## Areas of Consideration
+
+Example code is provided in the state and views folders. It should be deleted or replaced, once development is started.

package/template/_editorconfig

@@ -0,0 +1,10 @@
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.css]
+indent_style = tab

package/template/_eslintignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+index.html

package/template/_eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: [ require.resolve('@citruslime/config/eslint') ]
+};

package/template/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+*.log

package/template/_lintstagedrc.json

@@ -0,0 +1,8 @@
+{
+    "./**/*.+(js|ts|vue)": [
+        "eslint --fix"
+    ],
+    "./**/*.(css|vue)": [
+        "stylelint --fix"
+    ]
+}

package/template/_stylelintignore

@@ -0,0 +1,2 @@
+**/dist
+**/node_modules

package/template/_stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: [ require.resolve('@citruslime/config/stylelint') ]
+};

package/template/index.html

@@ -0,0 +1,13 @@
+<!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>Citrus-Lime</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "[[PACKAGE_NAME]]",
+    "version": "0.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc --noEmit && vite build",
+        "serve": "vite preview",
+        "lint": "eslint . --ext .js,.ts,.vue --fix && stylelint **/*.{css,vue} --fix",
+        "pre-commit-lint": "yarn lint-staged",
+        "prepare": "cd [[REPOSITORY_ROOT]] && husky install"
+    }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

package/template/src/app.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>
+
+<style lang="postcss">
+@import '@citruslime/ui/style';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	@apply bg-off-white min-h-screen w-full;
+}
+</style>
+
+<template>
+    <cl-ui-app>
+        <template #header>
+            <cl-ui-header />
+        </template>
+
+        <template #navigation>
+            <cl-ui-navigation />
+        </template>
+
+        <router-view :key="route.fullPath" />
+    </cl-ui-app>
+</template>

package/template/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}

package/template/src/main.ts

@@ -0,0 +1,17 @@
+import ui from '@citruslime/ui';
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import { createApp } from 'vue';
+
+import app from './app.vue';
+import router from './router';
+
+const pinia = createPinia();
+
+pinia.use(piniaPluginPersistedstate);
+
+createApp(app)
+    .use(router)
+    .use(ui)
+    .use(pinia)
+    .mount('#app');

package/template/src/router/index.ts

@@ -0,0 +1,19 @@
+import generatedRoutes from 'virtual:generated-pages';
+import type { RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+export const routes: RouteRecordRaw[] = [
+    ...generatedRoutes,
+    {
+        name: 'not-found',
+        path: '/:pathMatch(.*)*',
+        redirect: '/'
+    }
+];
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes
+});
+
+export default router;

package/template/src/state/authentication/index.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+
+export const useAuthStore = defineStore('auth', {
+    state: () => ({
+        username: 'Nobody',
+        loginDate: null as Date | null
+    }),
+    persist: {
+        overwrite: true
+    }
+});

package/template/src/state/index.ts

@@ -0,0 +1 @@
+export * from './authentication';

package/template/src/views/dasboard/index.vue

@@ -0,0 +1,28 @@
+<route>
+{
+    path: '/'
+}
+</route>
+
+<script setup lang="ts">
+import { setLocaleMessages } from '@citruslime/ui';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+import { useAuthStore } from '@/state';
+
+const { username } = storeToRefs(useAuthStore());
+const { t } = useI18n();
+
+setLocaleMessages('en-GB', {
+    messages: {
+        greeting: 'Hello, {name}!'
+    }
+});
+</script>
+
+<template>
+    <div>
+        {{ t('messages.greeting', { name: username }) }}
+    </div>
+</template>

package/template/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [ require('@citruslime/theme') ],
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,ts,jsx,tsx}'
+    ]
+};

package/template/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "useDefineForClassFields": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "strict": true,
+        "jsx": "preserve",
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "lib": [
+            "esnext",
+            "dom"
+        ],
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.vue",
+        "./components.d.ts"
+    ]
+}

package/template/vite.config.ts

@@ -0,0 +1,68 @@
+import path from 'path';
+
+import vue from '@vitejs/plugin-vue';
+import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
+import components from 'unplugin-vue-components/vite';
+import { defineConfig } from 'vite';
+import mkcert from 'vite-plugin-mkcert';
+import pages from 'vite-plugin-pages';
+
+export default defineConfig({
+    plugins: [
+        vue(),
+        pages({
+            pagesDir: 'src/views',
+            extensions: [ 'vue' ]
+        }),
+        components({
+            dirs: [
+                'src/components',
+                'src/pages'
+            ],
+            dts: true,
+            resolvers: [ VueUseComponentsResolver() ]
+        }),
+        mkcert()
+    ],
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks (id) {
+                    if (id.includes('node_modules')) {
+                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
+                    }
+                }
+            }
+        }
+    },
+    define: {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        __VUE_I18N_FULL_INSTALL__: true,
+        __VUE_I18N_LEGACY_API__: false,
+        __INTLIFY_PROD_DEVTOOLS__: false
+        /* eslint-enable @typescript-eslint/naming-convention */
+    },
+    optimizeDeps: {
+        include: [ 'vue-i18n' ]
+    },
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'src'),
+            'vue-i18n': 'vue-i18n/dist/vue-i18n.esm-bundler.js'
+        }
+    },
+    server: {
+        open: true,
+        https: true,
+        /* eslint-disable array-bracket-spacing */
+        port: [[FRONTEND_PORT]],
+        /* eslint-enable array-bracket-spacing */
+        proxy: {
+            '/api': {
+                target: 'https://localhost:[[BACKEND_PORT]]',
+                secure: false,
+                rewrite: (path) => path.replace('/api', '')
+            }
+        }
+    }
+});