@tomjs/create-app 1.7.0 → 2.0.0

package/templates/node-cli/src/app.ts

@@ -0,0 +1,19 @@
+import type { XxxCLIOptions } from './types';
+import * as prompts from '@clack/prompts';
+import { logger, t } from './utils';
+
+const cancel = () => prompts.cancel(t('prompt.cancel'));
+
+export async function runApp(opts: XxxCLIOptions) {
+  logger.debug('opts', opts);
+  logger.info('Starting App...');
+
+  const isPublic = await prompts.confirm({
+    message: t('prompt.public.message'),
+    active: t('prompt.confirm.yes'),
+    inactive: t('prompt.confirm.no'),
+  });
+  if (prompts.isCancel(isPublic)) {
+    return cancel();
+  }
+}

package/templates/node-cli/src/config.ts

@@ -1,10 +1,10 @@
+import type { XxxCLIOptions } from './types';
 import fs from 'node:fs';
 import { cosmiconfig } from 'cosmiconfig';
-import type { XxxCLIOptions } from './types.js';
 
 export async function getReleaseConfig(opts: XxxCLIOptions) {
   const explorer = cosmiconfig('xxx', {
-    stopDir: opts.cwd,
+    stopDir: opts.dir,
     searchPlaces: [
       'package.json',
       'xxx.config.json',

package/templates/node-cli/src/index.ts

@@ -1,3 +1,79 @@
 #!/usr/bin/env node
+import type { XxxCLIOptions } from './types';
+import meow from 'meow';
+import { runApp } from './app';
+import { getReleaseConfig } from './config';
+import { isDev } from './constants';
+import { logger, t } from './utils';
 
-console.log('Hello World!');
+const cli = meow(
+  `
+Usage
+  $ xxx [input] [options]
+
+Options
+  -d, --dir             ${t('options.dir')}
+  -c, --config          ${t('options.config')}
+  --verbose             ${t('options.verbose')}
+  -h, --help            ${t('options.help')}
+  -v, --version         ${t('options.version')}
+`,
+  {
+    importMeta: import.meta,
+    booleanDefault: undefined,
+    helpIndent: 0,
+    flags: {
+      dir: {
+        type: 'string',
+        shortFlag: 'd',
+      },
+      config: {
+        type: 'string',
+        shortFlag: 'c',
+      },
+      verbose: {
+        type: 'boolean',
+        default: process.env.NODE_ENV === 'development',
+      },
+      help: {
+        type: 'boolean',
+        shortFlag: 'h',
+        default: false,
+      },
+      version: {
+        type: 'boolean',
+        shortFlag: 'v',
+        default: false,
+      },
+    },
+  },
+);
+
+const { input, flags } = cli;
+if (flags.help) {
+  cli.showHelp(0);
+}
+else if (flags.version) {
+  cli.showVersion();
+}
+else {
+  logger.enableDebug(flags.verbose);
+  logger.debug('input:', input);
+  logger.debug('cli options:', flags);
+
+  const config = await getReleaseConfig(flags);
+  logger.debug('config file:', config);
+
+  const mergedOpts = Object.assign(
+    {
+      verbose: isDev,
+    } as XxxCLIOptions,
+    config,
+    flags,
+  ) as XxxCLIOptions;
+
+  mergedOpts.dir ||= process.cwd();
+  logger.debug('merged options:', mergedOpts);
+
+  await runApp(mergedOpts);
+}

package/templates/node-cli/src/types.ts

@@ -1 +1,5 @@
-export { XxxCLIOptions } from '../index';
+export interface XxxCLIOptions {
+  dir?: string;
+  config?: string;
+  verbose?: boolean;
+}

package/templates/node-cli/src/utils/exec.ts

@@ -0,0 +1,68 @@
+import type { Options as ExecaOptions } from 'execa';
+import { $ } from 'execa';
+import { getOptions, logger } from './util';
+
+interface RunExecaOptions extends ExecaOptions {
+  /**
+   * Whether to clear the command output, replace \r and \n to ""
+   * @default false
+   */
+  trim?: boolean;
+}
+
+/**
+ * run a command
+ * @param cmd command
+ * @param options custom and execa options
+ */
+export async function run(cmd: string, options?: RunExecaOptions): Promise<string>;
+/**
+ * run a command
+ * @param cmd a command array, will be joined by space
+ * @param options custom and execa options
+ */
+export async function run(cmd: string[], options?: RunExecaOptions): Promise<string>;
+
+export async function run(cmd: string | string[], options?: RunExecaOptions): Promise<string> {
+  const { trim, ...execOpts } = Object.assign(
+    {
+      stdio: 'pipe',
+      shell: true,
+    } as RunExecaOptions,
+    options,
+  );
+
+  if (Array.isArray(cmd)) {
+    cmd = cmd.join(' ');
+  }
+
+  const log = (str: string) => {
+    if (getOptions().verbose) {
+      logger.debug(str);
+    }
+    else {
+      logger.write(str);
+    }
+  };
+
+  log(`$ ${cmd}`);
+
+  try {
+    const result = await $(execOpts)`${cmd}`;
+    const stdout = result.stdout as string;
+
+    log(stdout);
+
+    if (trim) {
+      return stdout.trim().replace(/\n|\r/g, '');
+    }
+    return stdout.trim();
+  }
+  catch (e: any) {
+    const msg = e.stderr || e.message;
+
+    log(msg);
+
+    throw new Error(msg);
+  }
+}

package/templates/node-cli/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './exec';
+export * from './lang';
+export * from './util';

package/templates/node-cli/src/utils/lang.ts

@@ -0,0 +1,104 @@
+// copy from https://github.com/vuejs/create-vue/blob/b1494b6ed5b493c289cac020359dbb49bdfff47d/utils/getLanguage.ts#L1-L133
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/**
+ *
+ * This function is used to link obtained locale with correct locale file in order to make locales reusable
+ *
+ * @param locale the obtained locale
+ * @returns locale that linked with correct name
+ */
+function linkLocale(locale: string) {
+  // The C locale is the default system locale for POSIX systems.
+  // https://docs.oracle.com/cd/E36784_01/html/E36823/glmar.html
+  // https://sourceware.org/glibc/wiki/Proposals/C.UTF-8
+  // It is common among containerized environments or minimal virtual environments
+  // though most user-facing systems would have a more specific locale set.
+  // The problem here is that the C locale is not a valid language tag for the Intl API.
+  // But it is not desirable to throw an error in this case.
+  // So we map it to 'en-US'.
+  if (locale === 'C') {
+    return 'en-US';
+  }
+
+  let linkedLocale: string = '';
+  try {
+    linkedLocale = Intl.getCanonicalLocales(locale)[0];
+  }
+  catch (error) {
+    console.log(`${error.toString()}, invalid language tag: "${locale}"\n`);
+  }
+  switch (linkedLocale) {
+    case 'zh-TW':
+    case 'zh-HK':
+    case 'zh-MO':
+      linkedLocale = 'zh-Hant';
+      break;
+    case 'zh-CN':
+    case 'zh-SG':
+      linkedLocale = 'zh-Hans';
+      break;
+    default:
+      linkedLocale = locale;
+  }
+
+  return linkedLocale;
+}
+
+function getLocale() {
+  const shellLocale
+    = process.env.LC_ALL // POSIX locale environment variables
+      || process.env.LC_MESSAGES
+      || process.env.LANG
+      || Intl.DateTimeFormat().resolvedOptions().locale // Built-in ECMA-402 support
+      || 'en-US'; // Default fallback
+
+  return linkLocale(shellLocale.split('.')[0].replace('_', '-'));
+}
+
+async function loadLanguageFile(filePath: string): Promise<Record<string, string>> {
+  return await fs.promises.readFile(filePath, 'utf-8').then((data) => {
+    const parsedData = JSON.parse(data);
+    if (parsedData) {
+      return parsedData;
+    }
+    return {};
+  });
+}
+
+export async function getLanguage(localesRoot: string) {
+  const locale = getLocale();
+
+  const languageFilePath = path.resolve(localesRoot, `${locale}.json`);
+  const fallbackPath = path.resolve(localesRoot, 'en-US.json');
+
+  const doesLanguageExist = fs.existsSync(languageFilePath);
+  return doesLanguageExist
+    ? await loadLanguageFile(languageFilePath)
+    : await loadLanguageFile(fallbackPath);
+}
+
+// export const t = await getLanguage(fileURLToPath(new URL('../locales', import.meta.url)));
+
+const messages = await getLanguage(fileURLToPath(new URL('../locales', import.meta.url))); ;
+
+export function t(
+  ...params:
+    | [message: string, ...args: Array<string | number | boolean>]
+    | [message: string, args: Record<string, any>]
+) {
+  if (params.length === 0 || !messages) {
+    return '';
+  }
+
+  const [key, ...args] = params;
+  const text = messages[key] ?? '';
+  if (args[0] === null || args[0] === undefined || args[0] === '') {
+    return text;
+  }
+
+  const values: any = typeof args[0] === 'object' ? args[0] : args;
+  return text.replace(/\{([^}]+)\}/g, (match, group) => (values[group] ?? match) as string);
+}

package/templates/node-cli/src/utils/util.ts

@@ -0,0 +1,20 @@
+import type { XxxCLIOptions } from '../types';
+import Logger from '@tomjs/logger';
+
+export const logger = new Logger({
+  directory: 'xxx/logs',
+});
+
+export const isWindows = process.platform === 'win32';
+
+let _opts: XxxCLIOptions = {
+
+};
+
+export function setOptions(opts: XxxCLIOptions) {
+  _opts = opts;
+}
+
+export function getOptions() {
+  return _opts;
+}

package/templates/node-cli/tsconfig.json

@@ -1,4 +1,4 @@
 {
-  "extends": "@tomjs/tsconfig/node16.json",
-  "include": ["src", "test", "*.ts"]
+  "extends": "@tomjs/tsconfig/node.json",
+  "include": ["src", "*.ts"]
 }

package/templates/node-cli/{tsup.config.ts → tsdown.config.ts}

@@ -1,16 +1,15 @@
-import { defineConfig } from 'tsup';
+import { defineConfig } from 'tsdown';
 
-export default defineConfig(options => {
+export default defineConfig((options) => {
   const isDev = !!options.watch;
 
   return {
     entry: ['src/index.ts'],
-    format: ['esm'],
+    format: 'esm',
     target: 'node18',
     shims: false,
     clean: true,
     sourcemap: isDev,
-    splitting: false,
     env: {
       NODE_ENV: isDev ? 'development' : 'production',
     },

package/templates/node-vite/examples/react/README.md

@@ -0,0 +1 @@
+# react example

package/templates/node-vite/examples/react/_eslint.config.mjs

@@ -0,0 +1,6 @@
+import defineConfig from '@tomjs/eslint';
+
+export default defineConfig({
+  react: true,
+  typescript: true,
+});

package/templates/{react → node-vite/examples/react}/index.html

@@ -4,9 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>vite+react</title>
   </head>
-
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

package/templates/node-vite/examples/react/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-project",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "^2.3.9",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4"
+  }
+}

package/templates/{react → node-vite/examples/react}/src/App.css

@@ -1,19 +1,21 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
   padding: 2rem;
+  margin: 0 auto;
   text-align: center;
 }
 
 .logo {
   height: 6em;
   padding: 1.5em;
-  will-change: filter;
   transition: filter 300ms;
+  will-change: filter;
 }
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
@@ -22,6 +24,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

package/templates/{react → node-vite/examples/react}/src/App.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import viteLogo from '/vite.svg';
 import reactLogo from './assets/react.svg';
-
 import './App.css';
+import viteLogo from '/vite.svg';
 
 function App() {
   const [count, setCount] = useState(0);
@@ -10,21 +9,21 @@ function App() {
   return (
     <>
       <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+        <a href="https://vite.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
+        <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        <button onClick={() => setCount(count => count + 1)}>
+          count is
+          {' '}
+          {count}
+        </button>
       </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
     </>
   );
 }

package/templates/{react → node-vite/examples/react}/src/index.css

@@ -1,17 +1,16 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-weight: 400;
 
-  color-scheme: light dark;
+  font-synthesis: none;
+  line-height: 1.5;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
-  font-synthesis: none;
+  color-scheme: light dark;
+  background-color: #242424;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
 }
 
 a {
@@ -19,16 +18,17 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
 
 body {
-  margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  margin: 0;
 }
 
 h1 {
@@ -37,19 +37,21 @@ h1 {
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
   padding: 0.6em 1.2em;
+  font-family: inherit;
   font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
+  background-color: #1a1a1a;
+  border: 1px solid transparent;
+  border-radius: 8px;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -60,9 +62,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }

package/templates/node-vite/examples/react/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/node-vite/examples/react/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tomjs/tsconfig/react.json",
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src"]
+}

package/templates/node-vite/examples/react/vite.config.ts

@@ -0,0 +1,14 @@
+import path from 'node:path';
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      // https://github.com/facebook/react/issues/24928#issuecomment-2267624188
+      react: path.resolve(process.cwd(), 'node_modules/react'),
+    },
+  },
+  plugins: [react()],
+});

package/templates/node-vite/examples/vue/README.md

@@ -0,0 +1 @@
+# vue example

package/templates/node-vite/examples/vue/_eslint.config.mjs

@@ -0,0 +1,6 @@
+import defineConfig from '@tomjs/eslint';
+
+export default defineConfig({
+  vue: true,
+  typescript: true,
+});

package/templates/{vue → node-vite/examples/vue}/index.html

@@ -4,9 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>vite+vue</title>
   </head>
-
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>

package/templates/node-vite/examples/vue/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "vite-vue",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.4"
+  }
+}

package/templates/{vue → node-vite/examples/vue}/src/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
+import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
   <div>
-    <a href="https://vitejs.dev" target="_blank">
+    <a href="https://vite.dev" target="_blank">
       <img src="/vite.svg" class="logo" alt="Vite logo" />
     </a>
     <a href="https://vuejs.org/" target="_blank">
@@ -18,8 +18,8 @@ import HelloWorld from './components/HelloWorld.vue';
 .logo {
   height: 6em;
   padding: 1.5em;
-  will-change: filter;
   transition: filter 300ms;
+  will-change: filter;
 }
 
 .logo:hover {

package/templates/node-vite/examples/vue/src/components/HelloWorld.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>