@citruslime/create-boilerplate 1.6.0 → 2.0.0-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # Citrus-Lime UI Library Create Boilerplate Script
 
-A create package script for initialising new Citrus-Lime web apps.
+A create package script for initialising new apps with the Citrus-Lime default configuration.
 
 ![version](https://img.shields.io/npm/v/@citruslime/create-boilerplate/latest)
 ![version next](https://img.shields.io/npm/v/@citruslime/create-boilerplate/next)
@@ -10,7 +10,7 @@ A create package script for initialising new Citrus-Lime web apps.
 - 📌 [Citrus-Lime Ltd](https://www.citruslime.com)
 
 
-`npm init @citruslime/boilerplate TargetDirectory`
+`pnpm create @citruslime/boilerplate TargetDirectory`
 
 or
 
@@ -18,7 +18,7 @@ or
 
 or
 
-`pnpm create @citruslime/boilerplate TargetDirectory`
+`npm init @citruslime/boilerplate TargetDirectory`
 
 - **TargetDirectory**
   - A relative folder path for the script to create the boilerplate app
@@ -26,4 +26,4 @@ or
 
 e.g.
 
-`yarn create @citruslime/boilerplate ./ui/customer`
+`pnpm create @citruslime/boilerplate ./ui/customer`

package/hooks/post-checkout

@@ -1,11 +1,8 @@
 #!/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
+if ! command -v pnpm; then
+    choco install pnpm -y
 fi
 
-"$yarn_directory\yarn" install --cwd "[[PACKAGE_DIR]]"
+pnpm install -w -C "[[PACKAGE_DIR]]"

package/hooks/post-merge

@@ -1,11 +1,8 @@
 #!/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
+if ! command -v pnpm; then
+    choco install pnpm -y
 fi
 
-"$yarn_directory\yarn" install --cwd "[[PACKAGE_DIR]]"
+pnpm install -w -C "[[PACKAGE_DIR]]"

package/hooks/pre-commit

@@ -1,11 +1,8 @@
 #!/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
+if ! command -v pnpm; then
+    choco install pnpm -y
 fi
 
-"$yarn_directory\yarn" --cwd "[[PACKAGE_DIR]]" pre-commit-lint
+pnpm -C "[[PACKAGE_DIR]]" pre-commit-lint

package/{main.mjs → main.js}

@@ -1,11 +1,10 @@
 #!/usr/bin/env node
-
 import { execSync } from 'node:child_process';
 import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import { join, relative } from 'node:path';
 import { fileURLToPath, URL } from 'node:url';
 
-import { green, lightBlue, lightYellow, red } from 'kolorist';
+import { green, lightBlue, red } from 'kolorist';
 import parseArgs from 'minimist';
 import prompts from 'prompts';
 
@@ -29,12 +28,11 @@ const filesToRename = {
     _gitattributes: '.gitattributes',
     _gitignore: '.gitignore',
     _editorconfig: '.editorconfig',
-    _eslintignore: '.eslintignore',
-    '_eslintrc.cjs': '.eslintrc.cjs',
-    '_lintstagedrc.json': '.lintstagedrc.json',
+    '_lintstagedrc.js': '.lintstagedrc.js',
     _stylelintignore: '.stylelintignore',
-    '_stylelintrc.cjs': '.stylelintrc.cjs',
-    'template.code-workspace': 'citrus-lime.code-workspace'
+    '_stylelint.config.js': 'stylelint.config.js',
+    'template.code-workspace': 'citrus-lime.code-workspace',
+    _npmrc: '.npmrc'
     /* eslint-enable @typescript-eslint/naming-convention */
 };
 
@@ -42,6 +40,9 @@ const dependenciesToInstall = [
     {
         name: '@citruslime/ui'
     },
+    {
+        name: '@citruslime/utils'
+    },
     {
         name: '@vueuse/core'
     },
@@ -69,7 +70,11 @@ const dependenciesToInstall = [
         dev: true
     },
     {
-        name: '@tsconfig/node18',
+        name: '@tsconfig/node20',
+        dev: true
+    },
+    {
+        name: '@types/jsdom',
         dev: true
     },
     {
@@ -153,17 +158,17 @@ async function init () {
             type: 'text',
             name: 'packageName',
             message: 'Enter a name for the project:',
-            validate: (value) => /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(value) || 'Invalid package name'
+            validate: value => /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(value) || 'Invalid package name'
         },
         {
             type: packageDir ? null : 'text',
             name: 'packageDir',
             message: 'Enter a directory for the project:',
             initial: '.',
-            onState: (state) => packageDir = state.value
+            onState: state => packageDir = state.value
         },
         {
-            type: () => !existsSync(packageDir) || readdirSync(packageDir).length === 0 ? null : 'confirm',
+            type: () => directoryValid(packageDir) ? null : 'confirm',
             name: 'empty',
             message: () => `${packageDir === '.' ? 'Current directory' : `Target directory "${packageDir}"`} is not empty. Remove existing files and continue?`
         },
@@ -184,7 +189,7 @@ async function init () {
             initial: true
         },
         {
-            type: (prev) => prev ? 'text' : null,
+            type: prev => prev ? 'text' : null,
             name: 'backendPort',
             message: 'Enter the port that the backend server runs on:',
             initial: 0
@@ -194,14 +199,14 @@ async function init () {
             name: 'packageManager',
             message: 'Select a package manager:',
             choices: [
-                {
-                    title: 'yarn',
-                    value: 'yarn'
-                },
                 {
                     title: 'pnpm',
                     value: 'pnpm'
                 },
+                {
+                    title: 'yarn',
+                    value: 'yarn'
+                },
                 {
                     title: 'npm',
                     value: 'npm'
@@ -217,7 +222,7 @@ async function init () {
 
     packageDir = packageDir.toString();
 
-    setReplacements(packageName, packageDir, rootDir, backendPort ?? 0);
+    setReplacements(packageName, packageDir, rootDir, backendPort ?? 0, packageManager);
     prepareDir(join(cwd, packageDir), empty);
     copyTemplate(packageDir);
 
@@ -230,6 +235,22 @@ async function init () {
     print(green(`Package ${packageName} has been successfully initialised in ${packageDir}.`), true);
 }
 
+/**
+ * Checks if a directory is valid for project creation.
+ *
+ * @param {string} packageDir The directory of the package being created.
+ * @returns True, if the directory is valid; false, otherwise.
+ */
+function directoryValid (packageDir) {
+    const directoryExists = existsSync(packageDir);
+    const directorySize = directoryExists ? readdirSync(packageDir).length : 0;
+    const directoryOnlyContainsGit = directorySize === 1 && existsSync(`${packageDir}/.git`);
+
+    return !directoryExists ||
+        directorySize === 0 ||
+        directoryOnlyContainsGit;
+}
+
 /**
  * Set the dynamic values for the file renaming and placeholder replacements.
  *
@@ -237,8 +258,9 @@ async function init () {
  * @param {string} packageDir The directory of the package being created.
  * @param {string} rootDir The relative path of the root of the repository.
  * @param {number} backendPort The port that the backend server runs on.
+ * @param packageManager The selected package manager to use.
  */
-function setReplacements (packageName, packageDir, rootDir, backendPort) {
+function setReplacements (packageName, packageDir, rootDir, backendPort, packageManager) {
     const husky = relative(join(cwd, packageDir, '.vscode'), join(rootDir, '.husky'));
     const repoRoot = relative(join(cwd, packageDir), rootDir);
     const projDir = relative(rootDir, join(cwd, packageDir));
@@ -249,6 +271,7 @@ function setReplacements (packageName, packageDir, rootDir, backendPort) {
     placeholdersToReplace['[[ROOT_DIR]]'] = repoRoot.replaceAll('\\', '/');
     placeholdersToReplace['[[HUSKY_DIR]]'] = husky.replaceAll('\\', '/');
     placeholdersToReplace['\'[[FRONTEND_PORT]]\''] = Math.floor(Math.random() * 1001) + 4000;
+    placeholdersToReplace['[[PACKAGE_MANAGER]]'] = packageManager;
 
     if (backendPort !== 0) {
         placeholdersToReplace['\'[[PROXY]]\''] = `{
@@ -276,7 +299,7 @@ function prepareDir (path, empty) {
 
         print(lightBlue('Emptying directory...'), true);
 
-        forEachInDir(path, (item) => rmSync(join(path, item), options));
+        forEachInDir(path, item => rmSync(join(path, item), options));
     }
     else if (!existsSync(path)) {
         print(lightBlue('Creating directory...'), true);
@@ -293,7 +316,7 @@ function prepareDir (path, empty) {
 function copyTemplate (packageDir) {
     const templateDir = join(codeDir, 'template');
 
-    forEachInDir(templateDir, (item) => copy(templateDir, packageDir, item));
+    forEachInDir(templateDir, item => copy(templateDir, packageDir, item));
 }
 
 /**
@@ -305,12 +328,7 @@ function copyHooks (rootDir) {
     const hooksDir = join(codeDir, 'hooks');
     const huskyDir = join(rootDir, '.husky');
 
-    if (existsSync(join(huskyDir, 'common.sh'))) {
-        print(lightYellow('Git Hooks already installed by another package in this repo. These will need to be edited manually.\n'), true);
-    }
-    else {
-        forEachInDir(hooksDir, (item) => copy(hooksDir, huskyDir, item));
-    }
+    forEachInDir(hooksDir, item => copy(hooksDir, huskyDir, item));
 }
 
 /**
@@ -329,7 +347,7 @@ function copy (source, destination, item) {
 
         mkdirSync(destinationDir, { recursive: true });
 
-        forEachInDir(sourceItem, (item) => copy(sourceItem, destinationDir, item));
+        forEachInDir(sourceItem, item => copy(sourceItem, destinationDir, item));
     }
     else {
         const destinationFile = filesToRename[item] ? join(destination, filesToRename[item]) : join(destination, item);
@@ -369,19 +387,26 @@ function installDependencies (packageManager) {
     print(lightBlue('Installing dev dependencies...'), true);
 
     let devDependencies = '';
+
     for (const dependency of dependenciesToInstall.filter(d => d.dev)) {
         devDependencies += `${dependency.name}${dependency.next ? '@next' : '@latest'} `;
     }
 
+    execSync(`${prefix} -D ${devDependencies}`);
+
     print(lightBlue('Installing dependencies...'), true);
 
     let dependencies = '';
+
     for (const dependency of dependenciesToInstall.filter(d => !d.dev)) {
         dependencies += `${dependency.name}${dependency.next ? '@next' : '@latest'} `;
     }
 
-    execSync(`${prefix} -D ${devDependencies}`);
     execSync(`${prefix} ${dependencies}`);
+
+    print(lightBlue('Running final install...'), true);
+
+    execSync(`${packageManager} install`);
 }
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@citruslime/create-boilerplate",
     "type": "module",
-    "version": "1.6.0",
+    "version": "2.0.0-beta.1",
     "author": {
         "name": "Citrus-Lime Ltd",
         "url": "https://citruslime.com"
@@ -12,19 +12,22 @@
         "access": "public"
     },
     "files": [
-        "main.mjs",
+        "main.js",
         "template",
         "hooks"
     ],
     "maintainers": [
         "Citrus-Lime"
     ],
-    "main": "main.mjs",
+    "main": "main.js",
     "bin": {
-        "create-boilerplate": "main.mjs"
+        "create-boilerplate": "main.js"
     },
     "engines": {
-        "node": ">=16.0.0"
+        "node": ">=18.0.0"
+    },
+    "scripts": {
+        "lint": "eslint . --fix && stylelint **/*.{css,vue} --fix"
     },
     "dependencies": {
         "kolorist": "^1.7.0",

package/template/.vscode/settings.json

@@ -6,13 +6,14 @@
         "editor.defaultFormatter": "vscode.json-language-features"
     },
     "editor.codeActionsOnSave": {
-        "source.fixAll": true,
-        "source.fixAll.eslint": true,
-        "source.fixAll.stylelint": true,
-        "source.organizeImports": false
+        "source.fixAll": "explicit",
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.stylelint": "explicit",
+        "source.organizeImports": "never"
     },
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true,
+    "eslint.experimental.useFlatConfig": true,
     "eslint.validate": [
         "html",
         "javascript",

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

@@ -17,13 +17,14 @@
             "editor.defaultFormatter": "vscode.json-language-features"
         },
         "editor.codeActionsOnSave": {
-            "source.fixAll": true,
-            "source.fixAll.eslint": true,
-            "source.fixAll.stylelint": true,
-            "source.organizeImports": false
+            "source.fixAll": "explicit",
+            "source.fixAll.eslint": "explicit",
+            "source.fixAll.stylelint": "explicit",
+            "source.organizeImports": "never"
         },
         "editor.defaultFormatter": "dbaeumer.vscode-eslint",
         "editor.formatOnSave": true,
+        "eslint.experimental.useFlatConfig": true,
         "eslint.validate": [
             "html",
             "javascript",

package/template/_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/_npmrc

@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*stylelint*
+public-hoist-pattern[]=*tailwindcss*

package/template/_stylelint.config.js

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

package/template/eslint.config.js

@@ -0,0 +1,21 @@
+import config from '@citruslime/config/eslint';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const compat = new FlatCompat({
+    baseDirectory: import.meta.url
+});
+
+export default [
+    ...config,
+    ...compat.extends('./.eslintrc-auto-import.json'),
+    {
+        ignores: [
+            'dist',
+            'node_modules',
+            '**/*.html',
+            'auto-imports.d.ts',
+            'components.d.ts',
+            'typed-router.d.ts'
+        ]
+    }
+];

package/template/package.json

@@ -9,8 +9,8 @@
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit",
         "serve": "vite preview",
-        "lint": "eslint . --ext .js,.cjs,.mjs,.ts,.vue --fix && stylelint **/*.{css,vue} --fix",
-        "pre-commit-lint": "yarn lint-staged",
-        "prepare": "cd [[ROOT_DIR]] && husky install"
+        "lint": "eslint . --fix && stylelint **/*.{css,vue} --fix",
+        "pre-commit-lint": "[[PACKAGE_MANAGER]] lint-staged",
+        "prepare": "cd [[ROOT_DIR]] && husky"
     }
 }

package/template/tsconfig.app.json

@@ -14,8 +14,8 @@
     ],
     "compilerOptions": {
         "composite": true,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
         "baseUrl": ".",
-        "moduleResolution": "node",
         "lib": [
             "ESNext",
             "DOM",
@@ -25,6 +25,9 @@
             "@/*": [
                 "./src/*"
             ]
-        }
+        },
+        "types": [
+            "unplugin-vue-router/client"
+        ]
     }
 }

package/template/tsconfig.node.json

@@ -1,5 +1,5 @@
 {
-    "extends": "@tsconfig/node18/tsconfig.json",
+    "extends": "@tsconfig/node20/tsconfig.json",
     "include": [
         "vite.config.*",
         "vitest.config.*",
@@ -7,8 +7,9 @@
     ],
     "compilerOptions": {
         "composite": true,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
         "module": "ESNext",
-        "moduleResolution": "node",
+        "moduleResolution": "Bundler",
         "types": [
             "node"
         ]

package/template/tsconfig.vitest.json

@@ -6,7 +6,8 @@
         "lib": [],
         "types": [
             "node",
-            "jsdom"
+            "jsdom",
+            "unplugin-vue-router/client"
         ]
     }
 }

package/template/vite.config.ts

@@ -69,7 +69,12 @@ export default defineConfig({
             output: {
                 manualChunks (id) {
                     if (id.includes('node_modules')) {
-                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
+                        if (id.includes('.pnpm')) {
+                            return id.toString().split('node_modules/.pnpm')[1].split('/')[1].toString();
+                        }
+                        else {
+                            return id.toString().split('node_modules/')[1].split('/')[0].toString();
+                        }
                     }
                 }
             }
@@ -95,7 +100,6 @@ export default defineConfig({
     },
     server: {
         open: true,
-        https: true,
         port: '[[FRONTEND_PORT]]',
         proxy: '[[PROXY]]'
     }

package/hooks/common.sh

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

package/template/_eslintignore

@@ -1,6 +0,0 @@
-dist
-node_modules
-auto-imports.d.ts
-components.d.ts
-**/*.html
-

package/template/_eslintrc.cjs

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

package/template/_lintstagedrc.json

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

package/template/_stylelintrc.cjs

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