create-tampermonkey-typescript 1.2.4 → 1.2.5

package/LICENSE

@@ -1,7 +1,7 @@
-Copyright (c) 2026 neth392
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Copyright (c) 2026 neth392
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,69 +1,71 @@
-# create-tampermonkey-typescript
-
-> A CLI scaffolding tool for creating minimal TamperMonkey userscript projects written in TypeScript.
-
-Write your userscripts in TypeScript, organize code across multiple files, and let the toolchain handle the rest 
-— bundling, CSS injection, and userscript header generation are all taken care of. The result is a single `.user.js` 
-file ready to install in TamperMonkey.
-
----
-
-## Features
-
-📦 **TypeScript with multi-file support** — Structure your project however you like. All source files are bundled into 
-a single IIFE-format JavaScript file via [Vite](https://vite.dev/), fully compatible with TamperMonkey.
-
-🏷️ **Automatic userscript header** — The `// ==UserScript==` block is generated from a template (`userscript.txt`) and
-prepended to every build. Metadata fields such as name, version, and description are pulled directly from `package.json`, 
-keeping a single source of truth.
-
-🔧 **Package manager agnostic** — Generated projects are standard Node.js projects. Use npm, yarn, or pnpm —
-whichever you prefer.
-
-🎨 **CSS injection** — Import `.css` files from TypeScript as you normally would. At build time, styles are extracted 
-and bundled into the output script, then injected into the page at runtime — no manual DOM manipulation required.
-
-### Optional Features
-
-⚛️ **React** — Scaffold the project with React pre-configured, including type declarations for 
-`unsafeWindow.React` and `unsafeWindow.ReactDOM`, and utility functions for accessing them at runtime.
-
-🌊 **Tailwind CSS** — Adds Tailwind CSS v4 with the Vite plugin, so utility classes are compiled 
-at build time and only the CSS you actually use is injected into your userscript.
-
-✨ **Prettier** — Sets up Prettier with a pre-configured `.prettierrc` and `.prettierignore` for consistent formatting.
-
-🚀 **GitHub Actions workflows** — Includes CI/CD workflows that automatically create Git tags when 
-`package.json` version changes, and publish GitHub Releases with the built script attached.
-
----
-
-## Quick Start
-
-### npm
-
-```bash
-npx create-tampermonkey-typescript
-```
-
-### yarn
-
-```bash
-yarn create tampermonkey-typescript
-```
-
-### pnpm
-
-```bash
-pnpm create tampermonkey-typescript
-```
-
-The CLI will walk you through the project configuration — name, version, description, author — and let you 
-select optional features (React, Git). The output is your new project folder containing its own `README.md`
-to get you started. You can preview that file here: [Generated Project README](templates/base/README.md)
-
----
-
-## License
-
+# create-tampermonkey-typescript
+
+> A CLI scaffolding tool for creating minimal TamperMonkey userscript projects written in TypeScript.
+
+Write your userscripts in TypeScript, organize code across multiple files, and let the toolchain handle the rest 
+— bundling, CSS injection, and userscript header generation are all taken care of. The result is a single `.user.js` 
+file ready to install in TamperMonkey.
+
+---
+
+## Features
+
+📦 **TypeScript with multi-file support** — Structure your project however you like. All source files are bundled into 
+a single IIFE-format JavaScript file via [Vite](https://vite.dev/), fully compatible with TamperMonkey.
+
+🏷️ **Automatic userscript header** — The `// ==UserScript==` block is generated from a template (`userscript.txt`) and
+prepended to every build. Metadata fields such as name, version, and description are pulled directly from `package.json`, 
+keeping a single source of truth.
+
+🔧 **Package manager agnostic** — Generated projects are standard Node.js projects. Use npm, yarn, or pnpm —
+whichever you prefer.
+
+🎨 **CSS injection** — Import `.css` files from TypeScript as you normally would. At build time, styles are extracted 
+and bundled into the output script, then injected into the page at runtime — no manual DOM manipulation required.
+
+### Optional Features
+
+⚛️ **React** — Scaffold the project with React pre-configured, including type declarations for 
+`unsafeWindow.React` and `unsafeWindow.ReactDOM`, and utility functions for accessing them at runtime.
+
+🌊 **Tailwind CSS** — Adds Tailwind CSS v4 with the Vite plugin, so utility classes are compiled 
+at build time and only the CSS you actually use is injected into your userscript.
+
+✨ **Prettier** — Sets up Prettier with a pre-configured `.prettierrc` and `.prettierignore` for consistent formatting.
+If Tailwind is enabled, there is also a prompt to enable the `prettier-plugin-classnames` and `prettier-plugin-tailwindcss`
+plugins which organize class names and automatically wraps the `className` string if it exceeds print width.
+
+🚀 **GitHub Actions workflows** — Includes CI/CD workflows that automatically create Git tags when 
+`package.json` version changes, and publish GitHub Releases with the built script attached.
+
+---
+
+## Quick Start
+
+### npm
+
+```bash
+npx create-tampermonkey-typescript
+```
+
+### yarn
+
+```bash
+yarn create tampermonkey-typescript
+```
+
+### pnpm
+
+```bash
+pnpm create tampermonkey-typescript
+```
+
+The CLI will walk you through the project configuration — name, version, description, author — and let you 
+select optional features (React, Git). The output is your new project folder containing its own `README.md`
+to get you started. You can preview that file here: [Generated Project README](templates/base/README.md)
+
+---
+
+## License
+
 [MIT](LICENSE)

package/dist/cli.js

@@ -5,10 +5,10 @@ import prompts from 'prompts';
 import kleur from 'kleur';
 import { execSync } from 'node:child_process';
 import { fileURLToPath } from 'url';
-const __FILENAME = fileURLToPath(import.meta.url);
-const __DIRNAME = path.dirname(__FILENAME);
-const TEMPLATES_DIR = path.join(__DIRNAME, '../templates');
-const defaultDevDeps = [
+export const __FILENAME = fileURLToPath(import.meta.url);
+export const __DIRNAME = path.dirname(__FILENAME);
+export const TEMPLATES_DIR = path.join(__DIRNAME, '../templates');
+export const defaultDevDeps = [
     'typescript', //
     'vite',
     'vite-plugin-banner',
@@ -16,8 +16,8 @@ const defaultDevDeps = [
     'ts-node',
     '@types/tampermonkey',
 ];
-const defaultDeps = [];
-const baseTsConfig = {
+export const defaultDeps = [];
+export const baseTsConfig = {
     compilerOptions: {
         types: ['vite/client', 'node', 'tampermonkey'],
         target: 'ES2022',
@@ -37,7 +37,20 @@ const baseTsConfig = {
     },
     include: ['src'],
 };
-const availableFeatures = [
+export const basePrettierRc = {
+    trailingComma: 'es5',
+    tabWidth: 2,
+    semi: false,
+    singleQuote: true,
+    printWidth: 120,
+    plugins: [],
+};
+export const prettierTailwindPlugins = [
+    'prettier-plugin-tailwindcss',
+    'prettier-plugin-classnames',
+    'prettier-plugin-merge',
+];
+export const availableFeatures = [
     {
         name: 'React',
         description: 'Adds react support to the project',
@@ -55,9 +68,17 @@ const availableFeatures = [
         name: 'Prettier',
         description: 'Adds Prettier with default .prettierrc and .prettierignore files',
         directory: path.join(TEMPLATES_DIR, 'prettier'),
+        devDependencies: ['prettier'],
         hook: (params) => {
-            renameDotFiles(params, 'prettierrc', 'prettierignore');
-            execInProjectDir('npm install --save-dev --save-exact prettier', params);
+            if (params.prettierTailwindPlugins) {
+                installDependencies(params, prettierTailwindPlugins, '-D');
+            }
+            const prettierRc = {
+                ...basePrettierRc,
+                ...(params.prettierTailwindPlugins ? { plugins: prettierTailwindPlugins } : {}),
+            };
+            writeObjectToJsonFile(prettierRc, '.prettierrc', params);
+            renameDotFiles(params, 'prettierignore');
         },
     },
     {
@@ -75,7 +96,7 @@ const availableFeatures = [
         directory: path.join(TEMPLATES_DIR, 'github-workflows'),
     },
 ];
-const availablePackageManagers = [
+export const availablePackageManagers = [
     {
         name: 'npm',
         exists: () => commandExists('npm --version'),
@@ -123,7 +144,7 @@ async function main() {
     // Initialize package.json
     logWithPrefix(`Creating ${kleur.yellow('package.json')}`);
     const packageJson = createPackageJson(params);
-    writeObjectToFile(packageJson, 'package.json', params);
+    writeObjectToJsonFile(packageJson, 'package.json', params);
     // Initialize the lock file
     logWithPrefix(`Initializing lock file`);
     execInProjectDir(`${params.packageManager.installCmd}`, params);
@@ -134,13 +155,13 @@ async function main() {
     if (devDeps.length > 0) {
         logWithPrefix('Installing dev dependencies');
         console.log(`    ${kleur.dim(devDeps.join(', '))}`);
-        execInProjectDir(`${params.packageManager.addDependencyCmd} -D ${devDeps.join(' ')}`, params);
+        installDependencies(params, devDeps, '-D');
     }
     // Install dependencies
     if (deps.length > 0) {
         logWithPrefix('Installing dependencies');
         console.log(`    ${kleur.dim(deps.join(', '))}`);
-        execInProjectDir(`${params.packageManager.addDependencyCmd}  ${deps.join(' ')}`, params);
+        installDependencies(params, deps, '-D');
     }
     // Handle tsconfig.json
     const tsConfig = { ...baseTsConfig };
@@ -150,7 +171,7 @@ async function main() {
         }
     }
     logWithPrefix(`Creating ${kleur.yellow('tsconfig.json')}`);
-    writeObjectToFile(tsConfig, 'tsconfig.json', params);
+    writeObjectToJsonFile(tsConfig, 'tsconfig.json', params);
     // Copy files
     logWithPrefix('Copying project files');
     // Base files
@@ -179,7 +200,7 @@ async function main() {
 function logWithPrefix(message) {
     console.log(`${kleur.cyan('-')} ${kleur.white(message)}`);
 }
-function commandExists(cmd) {
+export function commandExists(cmd) {
     try {
         execSync(cmd, { stdio: 'ignore' });
         return true;
@@ -188,7 +209,7 @@ function commandExists(cmd) {
         return false;
     }
 }
-function checkCwdAccess() {
+export function checkCwdAccess() {
     try {
         fs.accessSync(process.cwd(), fs.constants.W_OK | fs.constants.R_OK);
     }
@@ -198,7 +219,7 @@ function checkCwdAccess() {
     }
     return true;
 }
-function findValidPackageManager() {
+export function findValidPackageManager() {
     if (!availablePackageManagers.find((pm) => pm.exists())) {
         console.log(kleur.red('Could not find any valid package manager: '));
         console.log(kleur.yellow(`(${availablePackageManagers.map((pm) => pm.name).join(', ')})`));
@@ -206,7 +227,7 @@ function findValidPackageManager() {
     }
     return true;
 }
-function validateProjectName(projectName) {
+export function validateProjectName(projectName) {
     if (!projectName || projectName.length === 0)
         return 'Project name cannot be empty';
     if (projectName.includes(' '))
@@ -260,11 +281,16 @@ async function promptForParams() {
             message: 'Select features:',
             choices: availableFeatures.map((f) => ({ title: f.name, value: f.name, description: f.description })),
         },
+        {
+            type: (prev) => (prev.includes('Prettier') && prev.includes('TailwindCSS') ? 'confirm' : null),
+            name: 'prettierTailwindPlugins',
+            message: 'Install prettier-plugin-tailwindcss (auto-sorts classes) and prettier-plugin-classnames (wraps long class strings)?',
+        },
     ], {
         onCancel: () => process.exit(0),
     });
 }
-async function createProjectDirectory(path) {
+export async function createProjectDirectory(path) {
     try {
         fs.mkdirSync(path, { recursive: true });
         return true;
@@ -276,7 +302,7 @@ async function createProjectDirectory(path) {
         return 'Unknown error.';
     }
 }
-function createPackageJson(params) {
+export function createPackageJson(params) {
     return {
         name: params.projectName,
         description: params.description,
@@ -289,7 +315,7 @@ function createPackageJson(params) {
         },
     };
 }
-function writeObjectToFile(object, fileName, params) {
+export function writeObjectToJsonFile(object, fileName, params) {
     const filePath = path.join(params.projectPath, fileName);
     const jsonString = JSON.stringify(object, null, 2);
     fs.writeFileSync(filePath, jsonString);
@@ -297,9 +323,15 @@ function writeObjectToFile(object, fileName, params) {
 function execInProjectDir(command, params) {
     execSync(command, { stdio: 'inherit', cwd: params.projectPath });
 }
-function renameDotFiles(params, ...fileNames) {
+function installDependencies(params, dependencies, flags = '') {
+    execInProjectDir(`${params.packageManager.addDependencyCmd} ${flags} ${dependencies.join(' ')}`, params);
+}
+export function renameDotFiles(params, ...fileNames) {
     for (const fileName of fileNames) {
         fs.renameSync(path.join(params.projectPath, `_${fileName}`), path.join(params.projectPath, `.${fileName}`));
     }
 }
-main().then(() => { }, (e) => console.error(kleur.red(e.message || e)));
+const isDirectRun = process.argv[1]?.endsWith('cli.ts') || process.argv[1]?.endsWith('cli.js');
+if (isDirectRun) {
+    main().then(() => { }, (e) => console.error(kleur.red(e.message || e)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tampermonkey-typescript",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "CLI tool for generating a TamperMonkey script project written in typescript which is transpiled to JavaScript to be ran in the browser",
   "license": "MIT",
   "homepage": "https://github.com/neth392/create-tampermonkey-typescript",
@@ -24,7 +24,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "ts-node src/cli.ts"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
@@ -42,7 +43,8 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.0",
     "vite-plugin-banner": "^0.8.1",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vitest": "^4.1.0"
   },
   "dependencies": {
     "kleur": "^4.1.5",

package/templates/base/README.md

@@ -86,6 +86,10 @@ You should customize this file to include directives specific to your script, su
 - All imported CSS is combined and injected as an inline `<style>` element at runtime
 - The userscript header from `userscript.txt` is prepended
 
+### Removing JSDoc/Comments in Final Script
+The `vite.config.ts` file has a section that can be uncommented which will remove JSDoc and comments from the final
+script, reducing the output file size.
+
 ---
 
 ## CSS
@@ -233,6 +237,10 @@ For more information on Tailwind, see the [Tailwind CSS docs](https://tailwindcs
 
 Prettier is included with a pre-configured `.prettierrc` and `.prettierignore` file. Feel free to change them to best fit your programming style.
 
+### Prettier & Tailwind
+Optionally enabled are the `prettier-plugin-tailwindcss` and `prettier-plugin-classnames` plugins to assist in
+formatting when using class names. `prettier-plugin-merge` is used to fix incompatibility between the two.
+
 ---
 
 ## GitHub Workflows

package/templates/base/src/script.ts

@@ -1,6 +1,6 @@
-/**
-This file is the entry point to your script.
- */
-
-// Imports your styles. Can be removed if no CSS is used.
-import '@/styles.css'
+/**
+This file is the entry point to your script.
+ */
+
+// Imports your styles. Can be removed if no CSS is used.
+import '@/styles.css'

package/templates/base/userscript.txt

@@ -1,8 +1,8 @@
-// ==UserScript==
-// @name           <name>
-// @version        <version>
-// @description    <description>
-// @author         <author>
-// @namespace      <homepage>
-// @homepage       <homepage>
+// ==UserScript==
+// @name           <name>
+// @version        <version>
+// @description    <description>
+// @author         <author>
+// @namespace      <homepage>
+// @homepage       <homepage>
 // ==/UserScript==

package/templates/base/vite.config.ts

@@ -1,60 +1,73 @@
-/**
- * Configured by create-tampermonkey-typescript to combine your entire codebase into a single TamperMonkey-ready script.
- * You can modify it as you like.
- */
-
-import { defineConfig } from 'vite'
-import { resolve, dirname } from 'path'
-import { fileURLToPath } from 'url'
-import fs from 'fs'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
-import banner from 'vite-plugin-banner'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
-const pkg = JSON.parse(fs.readFileSync(resolve(__dirname, 'package.json'), 'utf8'))
-const hasReact = pkg.devDependencies?.react || pkg.dependencies?.react
-const hasTailwind = pkg.devDependencies?.['@tailwindcss/vite'] || pkg.dependencies?.['@tailwindcss/vite']
-
-// Replaced in the script's header to keep package.json as the source of truth.
-const metaTags = {
-  '<name>': pkg.name,
-  '<version>': pkg.version,
-  '<description>': pkg.description,
-  '<author>': pkg.author,
-  '<homepage>': pkg.homepage,
-}
-
-let meta = fs.readFileSync(resolve(__dirname, 'userscript.txt'), 'utf8')
-
-for (const [tagName, tagValue] of Object.entries(metaTags).filter(([_, v]) => v)) {
-  meta = meta.replaceAll(tagName, tagValue)
-}
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src'),
-    },
-  },
-  plugins: [
-    ...(hasTailwind ? [(await import('@tailwindcss/vite')).default()] : []),
-    cssInjectedByJsPlugin({ topExecutionPriority: true }),
-    banner({ content: meta, verify: false }),
-  ],
-  build: {
-    cssCodeSplit: false,
-    lib: {
-      entry: resolve(__dirname, 'src/script.ts'),
-      name: pkg.name.replace(/[^a-zA-Z0-9]/g, '_'),
-      formats: ['iife'],
-      fileName: () => `script.user.js`,
-    },
-    rollupOptions: {
-      ...(hasReact ? { external: ['react', 'react-dom/client'] } : {}),
-    },
-    outDir: 'dist',
-    minify: false,
-  },
-})
+/**
+ * Configured by create-tampermonkey-typescript to combine your entire codebase into a single TamperMonkey-ready script.
+ * You can modify it as you like.
+ */
+
+import { defineConfig } from 'vite'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import fs from 'fs'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+import banner from 'vite-plugin-banner'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const pkg = JSON.parse(fs.readFileSync(resolve(__dirname, 'package.json'), 'utf8'))
+const hasReact = pkg.devDependencies?.react || pkg.dependencies?.react
+const hasTailwind = pkg.devDependencies?.['@tailwindcss/vite'] || pkg.dependencies?.['@tailwindcss/vite']
+
+// Replaced in the script's header to keep package.json as the source of truth.
+const metaTags = {
+  '<name>': pkg.name,
+  '<version>': pkg.version,
+  '<description>': pkg.description,
+  '<author>': pkg.author,
+  '<homepage>': pkg.homepage,
+}
+
+let meta = fs.readFileSync(resolve(__dirname, 'userscript.txt'), 'utf8')
+
+for (const [tagName, tagValue] of Object.entries(metaTags).filter(([_, v]) => v)) {
+  meta = meta.replaceAll(tagName, tagValue)
+}
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  plugins: [
+    ...(hasTailwind
+      ? [
+          (await import('@tailwindcss/vite')).default({
+            optimize: { minify: true },
+          }),
+        ]
+      : []),
+    cssInjectedByJsPlugin({ topExecutionPriority: true }),
+    banner({ content: meta, verify: false }),
+    // Uncomment below to remove comments & JSDoc from the final script.
+    // {
+    //   name: 'strip-comments',
+    //   renderChunk(code) {
+    //     return code.replace(/\/\*\*[\s\S]*?\*\//g, '').replace(/\/\*[^!][\s\S]*?\*\//g, '')
+    //   },
+    // },
+  ],
+  build: {
+    cssCodeSplit: false,
+    lib: {
+      entry: resolve(__dirname, 'src/script.ts'),
+      name: pkg.name.replace(/[^a-zA-Z0-9]/g, '_'),
+      formats: ['iife'],
+      fileName: () => `script.user.js`,
+    },
+    rollupOptions: {
+      ...(hasReact ? { external: ['react', 'react-dom/client'] } : {}),
+    },
+    outDir: 'dist',
+    minify: false,
+  },
+})

package/templates/git/_gitignore

@@ -1,28 +1,28 @@
-# Project Specific
-dist/
-
-# Node
-node_modules/
-.vite/
-
-# Logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# OS-specific
-.DS_Store
-Thumbs.db
-
-# VSCode
-.vscode/
-
-# Webstorm
-.idea
-
-# TypeScript
-*.tsbuildinfo
-
-# Prettier/Editor
+# Project Specific
+dist/
+
+# Node
+node_modules/
+.vite/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS-specific
+.DS_Store
+Thumbs.db
+
+# VSCode
+.vscode/
+
+# Webstorm
+.idea
+
+# TypeScript
+*.tsbuildinfo
+
+# Prettier/Editor
 .prettiercache/

package/templates/github-workflows/.github/workflows/auto-tag.yml

@@ -1,42 +1,42 @@
-# .github/workflows/auto-tag.yml
-name: Auto Tag from package.json
-
-permissions:
-  contents: write
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  tag:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0  # Required to push tags
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: Read version from package.json
-        id: pkg
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "PACKAGE_VERSION=$VERSION" >> $GITHUB_ENV
-          echo "TAG_NAME=v$VERSION" >> $GITHUB_ENV
-
-      - name: Create tag if not exists
-        run: |
-          if git rev-parse "$TAG_NAME" >/dev/null 2>&1; then
-            echo "Tag $TAG_NAME already exists. Skipping."
-          else
-            git config user.name "github-actions[bot]"
-            git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
-            git tag $TAG_NAME
-            git push origin $TAG_NAME
+# .github/workflows/auto-tag.yml
+name: Auto Tag from package.json
+
+permissions:
+  contents: write
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  tag:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Required to push tags
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Read version from package.json
+        id: pkg
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "PACKAGE_VERSION=$VERSION" >> $GITHUB_ENV
+          echo "TAG_NAME=v$VERSION" >> $GITHUB_ENV
+
+      - name: Create tag if not exists
+        run: |
+          if git rev-parse "$TAG_NAME" >/dev/null 2>&1; then
+            echo "Tag $TAG_NAME already exists. Skipping."
+          else
+            git config user.name "github-actions[bot]"
+            git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+            git tag $TAG_NAME
+            git push origin $TAG_NAME
           fi

package/templates/github-workflows/.github/workflows/release.yml

@@ -1,56 +1,56 @@
-name: Build & Release Tampermonkey Script
-
-permissions:
-  contents: write
-
-on:
-  workflow_run:
-    workflows: ["Auto Tag from package.json"]
-    types:
-      - completed
-
-jobs:
-  release:
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          fetch-tags: true
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          check-latest: true
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build script
-        run: npm run build
-
-      - name: Get package name
-        id: pkg
-        run: |
-          NAME=$(node -p "require('./package.json').name")
-          echo "PACKAGE_NAME=$NAME" >> $GITHUB_ENV
-
-      - name: Get latest tag from Git
-        id: tag
-        run: |
-          git fetch --tags
-          TAG=$(git describe --tags --abbrev=0)
-          echo "TAG_NAME=$TAG" >> $GITHUB_ENV
-          echo "Latest tag: $TAG"
-
-      - name: Create GitHub Release
-        uses: softprops/action-gh-release@v2
-        with:
-          name: ${{ env.PACKAGE_NAME }}  ${{ env.TAG_NAME }}
-          tag_name: ${{ env.TAG_NAME }}
-          files: dist/script.user.js
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+name: Build & Release Tampermonkey Script
+
+permissions:
+  contents: write
+
+on:
+  workflow_run:
+    workflows: ["Auto Tag from package.json"]
+    types:
+      - completed
+
+jobs:
+  release:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          check-latest: true
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build script
+        run: npm run build
+
+      - name: Get package name
+        id: pkg
+        run: |
+          NAME=$(node -p "require('./package.json').name")
+          echo "PACKAGE_NAME=$NAME" >> $GITHUB_ENV
+
+      - name: Get latest tag from Git
+        id: tag
+        run: |
+          git fetch --tags
+          TAG=$(git describe --tags --abbrev=0)
+          echo "TAG_NAME=$TAG" >> $GITHUB_ENV
+          echo "Latest tag: $TAG"
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          name: ${{ env.PACKAGE_NAME }}  ${{ env.TAG_NAME }}
+          tag_name: ${{ env.TAG_NAME }}
+          files: dist/script.user.js
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/templates/react/src/global.d.ts

@@ -1,14 +1,14 @@
-/**
- * A reference to the global `window` object, extended with additional properties
- * for React and ReactDOM.
- *
- * @type {Window & {React: typeof import('react'), ReactDOM: typeof import('react-dom/client')}}
- * @property {typeof import('react')} React - The React library, providing tools
- *     for building user interfaces.
- * @property {typeof import('react-dom/client')} ReactDOM - The ReactDOM library,
- *     allowing React components to be rendered into the DOM.
- */
-declare const unsafeWindow: Window & {
-  React: typeof import('react')
-  ReactDOM: typeof import('react-dom/client')
-}
+/**
+ * A reference to the global `window` object, extended with additional properties
+ * for React and ReactDOM.
+ *
+ * @type {Window & {React: typeof import('react'), ReactDOM: typeof import('react-dom/client')}}
+ * @property {typeof import('react')} React - The React library, providing tools
+ *     for building user interfaces.
+ * @property {typeof import('react-dom/client')} ReactDOM - The ReactDOM library,
+ *     allowing React components to be rendered into the DOM.
+ */
+declare const unsafeWindow: Window & {
+  React: typeof import('react')
+  ReactDOM: typeof import('react-dom/client')
+}

package/templates/react/src/util/react-util.ts

@@ -1,24 +1,24 @@
-/**
- * Optional utility file for easily accessing the React & ReactDOM objects at runtime.
- */
-
-import type React from 'react'
-import type ReactDOM from 'react-dom/client'
-
-/**
- * Retrieves the React object from the global `unsafeWindow` scope.
- *
- * @return {typeof React} The React object from the global scope.
- */
-export function getReact(): typeof React {
-  return unsafeWindow.React
-}
-
-/**
- * Retrieves the ReactDOM object from the global `unsafeWindow` object.
- *
- * @return {typeof ReactDOM} The ReactDOM reference from the global scope.
- */
-export function getReactDOM(): typeof ReactDOM {
-  return unsafeWindow.ReactDOM
-}
+/**
+ * Optional utility file for easily accessing the React & ReactDOM objects at runtime.
+ */
+
+import type React from 'react'
+import type ReactDOM from 'react-dom/client'
+
+/**
+ * Retrieves the React object from the global `unsafeWindow` scope.
+ *
+ * @return {typeof React} The React object from the global scope.
+ */
+export function getReact(): typeof React {
+  return unsafeWindow.React
+}
+
+/**
+ * Retrieves the ReactDOM object from the global `unsafeWindow` object.
+ *
+ * @return {typeof ReactDOM} The ReactDOM reference from the global scope.
+ */
+export function getReactDOM(): typeof ReactDOM {
+  return unsafeWindow.ReactDOM
+}

package/templates/tailwindcss/src/styles.css

@@ -1,2 +1,15 @@
-/* Add all styles here, keep tailwindcss import for using tailwind */
-@import 'tailwindcss';
+/* Add all styles in this file, or create multiple files and be sure to import them all in your script. */
+@import 'tailwindcss';
+
+
+/* (For Tailwind v4) If just using tailwind utilities, it is recommended to replace the above with this. */
+/* It will prevent tailwind's preflight from breaking the css of the page outside of your script's scope. */
+/* Simply delete the above, uncomment below, and replace #your-root-element-id with your own. */
+
+/*@layer theme, base, components, utilities;*/
+/*@import "tailwindcss/theme.css" layer(theme);*/
+/*@custom-variant dark (&:is(.dark-mode *));*/
+
+/*#your-root-element-id {*/
+/*  @tailwind utilities;*/
+/*}*/

package/templates/tsconfig.json

@@ -1,16 +1,16 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "types": ["vite/client", "node"],
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "nodenext",
-    "strict": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "lib": ["ES2022", "dom", "dom.iterable"]
-  },
-  "include": ["template/src", "react"]
-}
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": ["vite/client", "node"],
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "nodenext",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "lib": ["ES2022", "dom", "dom.iterable"]
+  },
+  "include": ["template/src", "react"]
+}

package/templates/prettier/_prettierrc

@@ -1,7 +0,0 @@
-{
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 120
-}