buner 0.0.2 → 1.0.0

package/cli/buner.ts

@@ -0,0 +1,234 @@
+/* eslint-disable no-console */
+
+import path from 'path';
+import { execSync, spawn, SpawnOptions } from 'child_process';
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import fetch from 'node-fetch';
+import prompts from 'prompts';
+
+import packageJson from '../package.json';
+
+import { createApp } from './create-app.js';
+import { validateNpmName } from './helpers/validate-pkg.js';
+
+const { green, yellow, bold, cyan, red } = chalk;
+const packageName = 'buner';
+
+const run = (cmd: string, args: string[] = [], options: SpawnOptions = {}) => {
+  return new Promise<void>((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      stdio: 'inherit',
+      shell: true,
+      cwd: process.cwd(),
+      ...options,
+    });
+
+    child.on('close', (code) => {
+      if (code !== 0) {
+        reject(new Error(`Command "${cmd} ${args.join(' ')}" exited with code ${code}`));
+      } else {
+        resolve();
+      }
+    });
+
+    child.on('error', reject);
+  });
+};
+
+const runSync = (cmd: string) => {
+  execSync(cmd, { stdio: 'inherit', cwd: process.cwd() });
+};
+
+const onPromptState = (state: { value?: string; aborted?: boolean }) => {
+  if (state?.aborted) {
+    process.stdout.write('\x1B[?25h');
+    process.stdout.write('\n');
+    process.exit(1);
+  }
+};
+
+const parseVersion = (version: string): number => {
+  return parseInt(version.replaceAll('.', ''));
+};
+
+const update = fetch(`https://registry.npmjs.org/${packageJson.name}/latest`)
+  .then((res) => res.json())
+  .catch(() => null);
+
+async function notifyUpdate(): Promise<void> {
+  try {
+    const data = (await update) as { version: string };
+
+    if (data.version && parseVersion(data.version) !== parseVersion(packageJson.version)) {
+      const updateMessage = `npm update -g ${packageName}`;
+
+      console.log(
+        yellow(bold(`A new version of '${packageName}' is available!`)) + '\n' + 'You can update by running: ' + cyan(updateMessage) + '\n'
+      );
+    }
+  } catch {
+    // ignore error
+  }
+}
+
+const program = new Command();
+
+program.name(packageName).description('Frontend build toolkit for Vite + React SSR projects').version(packageJson.version);
+
+// buner create [dir]
+program
+  .command('create')
+  .argument('[project-directory]', 'the project name', '')
+  .description('Scaffold a new frontend project')
+  .action(async (projectPath: string) => {
+    if (!projectPath) {
+      const validation = validateNpmName('my-app');
+
+      const res = await prompts({
+        onState: onPromptState,
+        type: 'text',
+        name: 'path',
+        message: 'What is your project named?',
+        initial: 'my-app',
+        validate: (name) => {
+          const validation = validateNpmName(path.basename(path.resolve(name)));
+
+          if (validation.valid) {
+            return true;
+          }
+
+          return `Invalid project name ${validation?.problems?.[0] ? validation?.problems?.[0] : ''}`;
+        },
+      });
+
+      if (typeof res.path === 'string') {
+        projectPath = res.path.trim();
+      }
+    }
+
+    if (!projectPath) {
+      console.log(
+        '\nPlease specify the project directory:\n' +
+          `  ${cyan('buner create')} ${green('<project-directory>')}\n` +
+          'For example:\n' +
+          `  ${cyan('buner create')} ${green('my-app')}\n`
+      );
+      process.exit(1);
+    }
+
+    const resolvedProjectPath = path.resolve(projectPath);
+
+    await createApp({ appPath: resolvedProjectPath });
+    await notifyUpdate();
+  });
+
+// buner dev
+program
+  .command('dev')
+  .description('Start development mode with all watchers')
+  .action(async () => {
+    await run('npx', [
+      'concurrently',
+      '--kill-others',
+      '"bun styles.ts --watch"',
+      '"bun states.ts --watch"',
+      '"cross-env scriptOnly=true npx vite build --mode development --watch"',
+      '"bun server.ts --mode development"',
+    ]);
+  });
+
+// buner serve
+program
+  .command('serve')
+  .description('Start the SSR dev server')
+  .option('--mode <mode>', 'server mode', 'development')
+  .action(async (opts) => {
+    await run('bun', ['server.ts', '--mode', opts.mode]);
+  });
+
+// buner build
+program
+  .command('build')
+  .description('Build the project (static + SSR)')
+  .action(async () => {
+    runSync('npx vite build --outDir dist/static');
+    runSync('npx vite build --ssr src/entry-server.tsx --outDir dist/server');
+  });
+
+// buner generate
+program
+  .command('generate')
+  .description('Full static site generation (states + styles + build + prerender)')
+  .option('--mode <mode>', 'build mode', 'production')
+  .action(async (opts) => {
+    runSync('bun states.ts');
+    runSync('bun styles.ts');
+    if (opts.mode === 'production') {
+      runSync('npx vite build --outDir dist/static');
+      runSync('npx vite build --ssr src/entry-server.tsx --outDir dist/server');
+    } else {
+      runSync(`npx vite build --outDir dist/static --mode ${opts.mode}`);
+      runSync(`npx vite build --ssr src/entry-server.tsx --outDir dist/server --mode ${opts.mode}`);
+    }
+    runSync(`bun prerender.ts --add-hash --mode ${opts.mode}`);
+  });
+
+// buner eshn
+program
+  .command('eshn')
+  .description('Generate with --mode eshn')
+  .action(async () => {
+    runSync('bun states.ts');
+    runSync('bun styles.ts');
+    runSync('npx vite build --outDir dist/static --mode eshn');
+    runSync('npx vite build --ssr src/entry-server.tsx --outDir dist/server --mode eshn');
+    runSync('bun prerender.ts --add-hash --mode eshn');
+  });
+
+// buner inte
+program
+  .command('inte')
+  .description('Build and integrate with backend (styles + build + prerender + integration)')
+  .action(async () => {
+    runSync('bun styles.ts');
+    runSync('npx vite build --outDir dist/static');
+    runSync('npx vite build --ssr src/entry-server.tsx --outDir dist/server');
+    runSync('bun prerender.ts');
+    runSync('bun integration.ts');
+  });
+
+// buner styles
+program
+  .command('styles')
+  .description('Compile SCSS')
+  .option('--watch', 'Watch for changes')
+  .action(async (opts) => {
+    const args = ['styles.ts'];
+
+    if (opts.watch) args.push('--watch');
+    await run('bun', args);
+  });
+
+// buner prerender
+program
+  .command('prerender')
+  .description('Pre-render HTML files')
+  .option('--add-hash', 'Add content hashes to asset URLs')
+  .option('--mode <mode>', 'build mode', 'production')
+  .action(async (opts) => {
+    const args = ['prerender.ts'];
+
+    if (opts.addHash) args.push('--add-hash');
+    args.push('--mode', opts.mode);
+    await run('bun', args);
+  });
+
+program.parseAsync(process.argv).catch(async (error) => {
+  console.log(red(error));
+  await notifyUpdate();
+  process.exit(1);
+});
+
+export { packageName };

package/cli/cli.ts

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+import path from 'path';
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import fetch from 'node-fetch';
+import prompts from 'prompts';
+
+import packageJson from '../package.json';
+
+import { createApp } from './create-app.js';
+import { validateNpmName } from './helpers/validate-pkg.js';
+
+let projectPath = '';
+const program = new Command();
+const { green, yellow, bold, cyan, red } = chalk;
+const packageName = 'x-pkg';
+
+const onPromptState = (state: { value?: string; aborted?: boolean }) => {
+  if (state?.aborted) {
+    // If we don't re-enable the terminal cursor before exiting
+    // the program, the cursor will remain hidden
+    process.stdout.write('\x1B[?25h');
+    process.stdout.write('\n');
+    process.exit(1);
+  }
+};
+
+program
+  .name(packageName)
+  .description('Create a FE framework')
+  .version(packageJson.version)
+  .argument('[project-directory]', 'the project name', '')
+  .usage(`${green('[project-directory]')} [options]`)
+  .action((name) => {
+    projectPath = name;
+  })
+  .allowUnknownOption()
+  .parse(process.argv);
+
+const parseVersion = (version: string): number => {
+  return parseInt(version.replaceAll('.', ''));
+};
+
+const update = fetch(`https://registry.npmjs.org/${packageJson.name}/latest`)
+  .then((res) => res.json())
+  .catch(() => null);
+
+async function notifyUpdate(): Promise<void> {
+  try {
+    const data = (await update) as { version: string };
+
+    if (data.version && parseVersion(data.version) !== parseVersion(packageJson.version)) {
+      const updateMessage = `npm update ${packageName}`;
+
+      console.log(
+        yellow(bold(`A new version of '${packageName}' is available!`)) + '\n' + 'You can update by running: ' + cyan(updateMessage) + '\n'
+      );
+    }
+
+    process.exit();
+  } catch {
+    // ignore error
+  }
+}
+
+const run = async () => {
+  const validation = validateNpmName(path.basename(path.resolve(projectPath)));
+
+  if (!validation.valid) {
+    const res = await prompts({
+      onState: onPromptState,
+      type: 'text',
+      name: 'path',
+      message: 'What is your project named?',
+      initial: 'my-app',
+      validate: (name) => {
+        const validation = validateNpmName(path.basename(path.resolve(name)));
+
+        if (validation.valid) {
+          return true;
+        }
+
+        return `Invalid project name ${validation?.problems?.[0] ? validation?.problems?.[0] : ''}`;
+      },
+    });
+
+    if (typeof res.path === 'string') {
+      projectPath = res.path.trim();
+    }
+  }
+
+  if (!projectPath) {
+    console.log(
+      '\nPlease specify the project directory:\n' +
+        `  ${cyan(program.name())} ${green('<project-directory>')}\n` +
+        'For example:\n' +
+        `  ${cyan(program.name())} ${green('my-app')}\n\n` +
+        `Run ${cyan(`${program.name()} --help`)} to see all options.`
+    );
+    process.exit(1);
+  }
+
+  const resolvedProjectPath = path.resolve(projectPath);
+
+  await createApp({
+    appPath: resolvedProjectPath,
+  });
+};
+
+run()
+  .then(async () => {
+    await notifyUpdate();
+  })
+  .catch(async (error) => {
+    console.log(red(error));
+
+    await notifyUpdate();
+
+    process.exit(1);
+  });
+
+export { packageName };

package/cli/create-app.ts

@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+import path from 'path';
+
+import chalk from 'chalk';
+
+import { isWriteable } from './helpers/is-writeable.js';
+import { makeDir } from './helpers/make-dir.js';
+import { isFolderEmpty } from './helpers/is-folder-empty.js';
+import { tryGitInit } from './helpers/git.js';
+import { installTemplate } from './install-template.js';
+
+interface Props {
+  appPath: string;
+}
+
+const { green } = chalk;
+
+const createApp = async (model: Props) => {
+  const { appPath } = model;
+  const root = path.resolve(appPath);
+
+  if (!(await isWriteable(path.dirname(root)))) {
+    console.error('The application path is not writable, please check folder permissions and try again.');
+
+    console.error('It is likely you do not have write permissions for this folder.');
+
+    process.exit(1);
+  }
+
+  const appName = path.basename(root);
+
+  await makeDir(root);
+
+  if (!isFolderEmpty(root)) {
+    console.log(`\nThe directory ${green(appName)} contains files that could conflict or not empty`);
+    console.log('\nEither try using a new directory name, or remove these files.');
+
+    process.exit(1);
+  }
+
+  console.log(`\nCreating a new app in ${green(root)}.`);
+
+  process.chdir(root);
+
+  await installTemplate({
+    appName,
+    root,
+  });
+
+  console.log('\nInitializing a git repository.');
+
+  if (tryGitInit(root)) {
+    console.log('\nInitialized a git repository.');
+  }
+
+  console.log(`\n${green('Success!')} Created ${appName} at ${appPath}`);
+};
+
+export { createApp };

package/cli/helpers/copy.ts

@@ -0,0 +1,62 @@
+import path from 'path';
+import fs from 'fs/promises';
+
+import { globby } from 'globby';
+
+interface CopyOption {
+  cwd: string;
+}
+
+const excludeFiles = [
+  '.git',
+  'bin',
+  '.vscode',
+  '.build',
+  'public/samples',
+  'public/assets/vendors',
+  'src/_api/!(_base.ts)',
+  'src/_data',
+  'src/assets/scripts/!(color-mode|main|mock-api|pl-states|root|theme-critical).entry.ts',
+  'src/atoms',
+  'src/mocks/avatar',
+  'src/mocks/user',
+  'src/molecules',
+  'src/organisms/!(root|header|footer)/*',
+  'src/pages/!(Root|Home).tsx',
+  'src/templates/!(root|home)/*',
+  '!cli',
+  '!vite.cli.config.ts',
+];
+
+const copy = async (src: string | string[], dest: string, { cwd }: CopyOption) => {
+  const sourceFiles = await globby(src, {
+    cwd,
+    dot: true,
+    absolute: false,
+    gitignore: true,
+    ignore: excludeFiles,
+  });
+
+  const destRelativeToCwd = path.resolve(dest);
+
+  await fs.mkdir(path.join(destRelativeToCwd, 'src/atoms'), { recursive: true });
+  await fs.mkdir(path.join(destRelativeToCwd, 'src/molecules'), { recursive: true });
+  await fs.mkdir(path.join(destRelativeToCwd, 'src/mocks/example'), { recursive: true });
+
+  return Promise.all(
+    sourceFiles.map(async (p) => {
+      const dirname = path.dirname(p);
+      const basename = path.basename(p);
+
+      const from = path.resolve(cwd, p);
+      const filePath = path.join(destRelativeToCwd, dirname, basename);
+
+      // Ensure the destination directory exists
+      await fs.mkdir(path.dirname(filePath), { recursive: true });
+
+      return fs.copyFile(from, filePath);
+    })
+  );
+};
+
+export { copy };

package/cli/helpers/format-files.ts

@@ -0,0 +1,189 @@
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+
+const formatFiles = async (root: string) => {
+  let filePath, data;
+
+  // mock handler file
+  filePath = path.join(root, 'src/mocks/handlers.ts');
+  data = "import { handlers } from './consts';\n\nexport { handlers };";
+
+  await fs.writeFile(filePath, data + os.EOL);
+
+  // example mock file
+  filePath = path.join(root, 'src/mocks/example/index.ts');
+  data = `
+    import { handlers } from '@mocks/handlers';
+    import { rest } from 'msw';
+
+    handlers.push(
+      rest.get('/api/example', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json({test: 'test'}));
+      })
+    );
+  `;
+
+  await fs.writeFile(filePath, data + os.EOL);
+
+  // react loader
+  filePath = path.join(root, 'src/react-loader.tsx');
+  data = await fs.readFile(filePath, 'utf8');
+  data = data.replace(
+    /const blocks((?!};).)*};/s,
+    "const blocks: { [name: string]: any } = {\n\troot: lazy(() => import('./organisms/root/Root')),\n};"
+  );
+
+  await fs.writeFile(filePath, data);
+
+  // src/_types/atoms.d.ts
+  filePath = path.join(root, 'src/_types/atoms.d.ts');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import { BasedAtomicModel } from "./_general";
+    `
+  );
+
+  // src/_types/molecules.d.d.ts
+  filePath = path.join(root, 'src/_types/molecules.d.ts');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import { BasedAtomicModel } from "./_general";
+    `
+  );
+
+  // src/_types/organisms.d.ts
+  filePath = path.join(root, 'src/_types/organisms.d.ts');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import { BasedAtomicModel } from "./_general";
+
+      interface FooterModel extends BasedAtomicModel {}
+
+      interface HeaderModel extends BasedAtomicModel {}
+    `
+  );
+
+  // pages/Home.tsx
+  filePath = path.join(root, 'src/pages/Home.tsx');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import Template from '@templates/home/Home';
+
+      const Home = () => {
+        return <Template footer={footer} header={header} />;
+      };
+
+      export default Home;
+    `
+  );
+
+  // templates/home/Home.tsx
+  filePath = path.join(root, 'src/templates/home/Home.tsx');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import { FooterModel, HeaderModel } from '@_types/organisms';
+      import Footer from '@organisms/footer/Footer';
+      import Header from '@organisms/header/Header';
+
+      interface Props {
+        header?: HeaderModel;
+        footer?: FooterModel;
+      }
+
+      const Home = (model: Props) => {
+        const { header, footer } = model;
+
+        return (
+          <>
+            {header && <Header {...header} />}
+
+            <main>
+              // write components here
+            </main>
+
+            <Footer {...footer} />
+          </>
+        );
+      };
+
+      export default Home;
+    `
+  );
+
+  // src/organisms/header/Header.tsx
+  filePath = path.join(root, 'src/organisms/header/Header.tsx');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import { getModifiers } from '@helpers/functions';
+      import RequireCss from '@helpers/RequireCss';
+      import { HeaderModel } from '@_types/organisms';
+
+      const Header = (model: HeaderModel) => {
+        const modifiers = getModifiers(model, 'zzz-o-header');
+
+        return (
+          <header className={modifiers}>
+            <h2>Header</h2>
+            <RequireCss path="b-header" />
+          </header>
+        );
+      };
+
+      export default Header;
+    `
+  );
+
+  // src/organisms/header/Header.scss
+  filePath = path.join(root, 'src/organisms/header/Header.scss');
+
+  await fs.writeFile(filePath, '');
+
+  // src/organisms/footer/Footer.tsx
+  filePath = path.join(root, 'src/organisms/footer/Footer.tsx');
+
+  await fs.writeFile(
+    filePath,
+    `
+      import { getModifiers } from '@helpers/functions';
+      import RequireCss from '@helpers/RequireCss';
+      import { FooterModel } from '@_types/organisms';
+
+      const Footer = (model: FooterModel) => {
+        const modifiers = getModifiers(model, 'zzz-o-footer');
+
+        return (
+          <footer className={modifiers}>
+            <h2>Footer</h2>
+            <RequireCss path="b-footer" />
+          </footer>
+        );
+      };
+
+      export default Footer;
+    `
+  );
+
+  // src/organisms/footer/Footer.scss
+  filePath = path.join(root, 'src/organisms/footer/Footer.scss');
+
+  await fs.writeFile(filePath, '');
+
+  return ['xxx'];
+};
+
+// formatFiles('E:\\projects\\test-x-pkg');
+
+export { formatFiles };