@stack-dev/cli 0.1.0

package/src/packages/react-package/styled-components-react-package/files/button-file-generator.ts

@@ -0,0 +1,30 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON = `import React, { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+// This is your "Styled" version of the button
+// No more imports, no more "empty objects"
+const StyledButton = styled.button\`
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+\`;
+
+export function Button(props: HTMLAttributes<HTMLButtonElement>) {
+  return <StyledButton {...props} />;
+}
+`;
+
+export const BUTTON_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.tsx',
+  BUTTON,
+);

package/src/packages/react-package/styled-components-react-package/files/button-spec-file-generator.ts

@@ -0,0 +1,33 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const BUTTON_SPEC = `import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders the label correctly', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeDefined();
+  });
+
+  it('is a button element', () => {
+    render(<Button>Submit</Button>);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+
+  /* Note: Testing for specific CSS classes with CSS Modules is tricky 
+     because class names are mangled (e.g., _styledButton_123). 
+     Usually, we just test that the class attribute exists.
+  */
+  it('applies a class name', () => {
+    render(<Button>Styled</Button>);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.className).toBeTruthy();
+  });
+});
+`;
+
+export const BUTTON_SPEC_FILE_GENERATOR = new FileGeneratorImp(
+  'src/button.spec.tsx',
+  BUTTON_SPEC,
+);

package/src/packages/react-package/styled-components-react-package/files/eslint-config-file-generator.ts

@@ -0,0 +1,18 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const ESLINT_CONFIG = `import base from '@stack-dev/eslint-config/base.mjs';
+import react from '@stack-dev/eslint-config/react.mjs';
+
+export default [
+  ...base,
+  ...react,
+  { 
+    ignores: ['**/dist/**', '**/coverage/**'] 
+  }
+];
+`;
+
+export const ESLINT_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'eslint.config.mjs',
+  ESLINT_CONFIG,
+);

package/src/packages/react-package/styled-components-react-package/files/index-file-generator.ts

@@ -0,0 +1,9 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const INDEX_TS = `export * from './button';
+`;
+
+export const INDEX_FILE_GENERATOR = new FileGeneratorImp(
+  'src/index.ts',
+  INDEX_TS,
+);

package/src/packages/react-package/styled-components-react-package/files/prettier-config-file-generator.ts

@@ -0,0 +1,11 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const PRETTIER_CONFIG = `import base from '@stack-dev/prettier-config/base.mjs';
+
+export default base;
+`;
+
+export const PRETTIER_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'prettier.config.mjs',
+  PRETTIER_CONFIG,
+);

package/src/packages/react-package/styled-components-react-package/files/tsconfig-file-generator.ts

@@ -0,0 +1,15 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const TSCONFIG = `{
+  "extends": "@stack-dev/typescript-config/tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}
+`;
+
+export const TSCONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsconfig.json',
+  TSCONFIG,
+);

package/src/packages/react-package/styled-components-react-package/files/tsup-config-file-generator.ts

@@ -0,0 +1,21 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const TSUP_CONFIG = `import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  dts: true,
+  clean: true,
+  external: ['react', 'react-dom', 'styled-components'],
+  outExtension({ format }) {
+    return {
+      js: format === 'esm' ? '.mjs' : '.js',
+    };
+  },
+});`;
+
+export const TSUP_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsup.config.ts',
+  TSUP_CONFIG,
+);

package/src/packages/react-package/styled-components-react-package/files/vitest-config-file-generator.ts

@@ -0,0 +1,23 @@
+import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
+
+const VITEST_CONFIG = `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+    css: true,
+  },
+});
+`;
+
+export const VITEST_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'vitest.config.ts',
+  VITEST_CONFIG,
+);

package/src/packages/vite-react-app/create-vite-react-app.ts

@@ -0,0 +1,79 @@
+import path from 'path';
+import { PackageJsonGenerator } from '../../file-generator';
+import { Dependency, PackageJSON } from '../../package-json';
+import { PackageGenerator } from '../../utils/package-generator';
+import { getNamespace, getWorkspaceRoot } from '../../utils/workspace';
+
+import { INDEX_HTML_FILE_GENERATOR } from './files/index-html-file-generator';
+import { MAIN_FILE_GENERATOR } from './files/main-file-generator';
+import { VITE_CONFIG_FILE_GENERATOR } from './files/vite-config-file-generator';
+
+import { APP_FILE_GENERATOR } from './files/app-file-generator';
+import { ESLINT_CONFIG_FILE_GENERATOR } from './files/eslint-config-file-generator';
+import { PRETTIER_CONFIG_FILE_GENERATOR } from './files/prettier-config-file-generator';
+import { TSCONFIG_FILE_GENERATOR } from './files/tsconfig-file-generator';
+import { VITEST_CONFIG_FILE_GENERATOR } from './files/vitest-config-file-generator';
+
+export async function createViteReactApp(name: string): Promise<void> {
+  const rootDir = await getWorkspaceRoot();
+  const directory = path.join(rootDir, 'apps', name);
+
+  const namespace = await getNamespace(rootDir);
+  const packageName = `${namespace}/${name}`;
+
+  console.log(`🚀 Creating Vite React App: ${packageName}`);
+
+  const generator = new PackageGenerator(
+    directory,
+    makeAppPackageGenerator(packageName, namespace),
+    [
+      VITE_CONFIG_FILE_GENERATOR,
+      INDEX_HTML_FILE_GENERATOR,
+      MAIN_FILE_GENERATOR,
+      APP_FILE_GENERATOR,
+      TSCONFIG_FILE_GENERATOR,
+      PRETTIER_CONFIG_FILE_GENERATOR,
+      ESLINT_CONFIG_FILE_GENERATOR,
+      VITEST_CONFIG_FILE_GENERATOR,
+    ],
+  );
+
+  await generator.generate();
+}
+
+function makeAppPackageGenerator(packageName: string, namespace: string) {
+  const packageJsonModel = new PackageJSON({
+    name: packageName,
+    dependencies: [
+      new Dependency('react', '^18.3.1'),
+      new Dependency('react-dom', '^18.3.1'),
+    ],
+    devDependencies: [
+      new Dependency(`${namespace}/eslint-config`, 'workspace:*'),
+      new Dependency(`${namespace}/prettier-config`, 'workspace:*'),
+      new Dependency(`${namespace}/typescript-config`, 'workspace:*'),
+      new Dependency('@types/react', '^18.3.1'),
+      new Dependency('@types/react-dom', '^18.3.1'),
+      new Dependency('@vitejs/plugin-react', '^4.3.1'),
+      new Dependency('vite', '^5.4.2'),
+      new Dependency('typescript', '^5.5.4'),
+      new Dependency('eslint', '^9.32.0'),
+      new Dependency('prettier', '^3.6.2'),
+    ],
+    additionalData: {
+      version: '0.1.0',
+      private: true,
+      type: 'module',
+      scripts: {
+        dev: 'vite',
+        build: 'tsc && vite build',
+        preview: 'vite preview',
+        start: 'pnpm run preview',
+        lint: 'eslint .',
+        format: 'prettier . --write',
+      },
+    },
+  });
+
+  return new PackageJsonGenerator(packageJsonModel, namespace);
+}

package/src/packages/vite-react-app/files/app-file-generator.ts

@@ -0,0 +1,28 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const APP = `import React, { useState } from 'react';
+
+export function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div style={{ 
+      padding: '2rem', 
+      fontFamily: 'system-ui, sans-serif',
+      textAlign: 'center'
+    }}>
+      <h1>Stack-Dev App</h1>
+      <div className="card">
+        <button onClick={function() { setCount(count + 1) }}>
+          Count is {count}
+        </button>
+      </div>
+      <p>
+        Edit <code>src/App.tsx</code> and save to test HMR
+      </p>
+    </div>
+  );
+}
+`;
+
+export const APP_FILE_GENERATOR = new FileGeneratorImp('src/App.tsx', APP);

package/src/packages/vite-react-app/files/eslint-config-file-generator.ts

@@ -0,0 +1,11 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const ESLINT_CONFIG = `import base from '@stack-dev/eslint-config/base.mjs';
+
+export default [...base, { ignores: ['**/dist/**'] }];
+`;
+
+export const ESLINT_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'eslint.config.mjs',
+  ESLINT_CONFIG,
+);

package/src/packages/vite-react-app/files/index-html-file-generator.ts

@@ -0,0 +1,20 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const INDEX_HTML = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + Stack-Dev</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+
+export const INDEX_HTML_FILE_GENERATOR = new FileGeneratorImp(
+  'index.html',
+  INDEX_HTML,
+);

package/src/packages/vite-react-app/files/main-file-generator.ts

@@ -0,0 +1,14 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const MAIN = `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`;
+
+export const MAIN_FILE_GENERATOR = new FileGeneratorImp('src/main.tsx', MAIN);

package/src/packages/vite-react-app/files/prettier-config-file-generator.ts

@@ -0,0 +1,11 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const PRETTIER_CONFIG = `import base from '@stack-dev/prettier-config/base.mjs';
+
+export default base;
+`;
+
+export const PRETTIER_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'prettier.config.mjs',
+  PRETTIER_CONFIG,
+);

package/src/packages/vite-react-app/files/tsconfig-file-generator.ts

@@ -0,0 +1,15 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const TSCONFIG = `{
+  "extends": "@stack-dev/typescript-config/tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}
+`;
+
+export const TSCONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'tsconfig.json',
+  TSCONFIG,
+);

package/src/packages/vite-react-app/files/vite-config-file-generator.ts

@@ -0,0 +1,17 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const VITE_CONFIG = `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+});
+`;
+
+export const VITE_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'vite.config.ts',
+  VITE_CONFIG,
+);

package/src/packages/vite-react-app/files/vitest-config-file-generator.ts

@@ -0,0 +1,19 @@
+import { FileGeneratorImp } from '../../../file-generator/file-generator-imp';
+
+const VITEST_CONFIG = `import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    coverage: {
+      provider: 'v8',
+    },
+    environment: 'node',
+  },
+});
+`;
+
+export const VITEST_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
+  'vitest.config.ts',
+  VITEST_CONFIG,
+);

package/src/tsconfig/compiler-options.ts

@@ -0,0 +1,83 @@
+import { Equalable, Snapshot, sortKeys } from '@stack-dev/core';
+
+import { isEqual } from 'lodash';
+
+export type ConstructorArgs = {
+  paths?: Record<string, ReadonlyArray<string>>;
+  additionalData?: Snapshot;
+};
+
+export class CompilerOptions implements Equalable {
+  private readonly _additionalData: Snapshot;
+
+  private readonly _paths: Record<string, ReadonlyArray<string>>;
+
+  public constructor(args?: ConstructorArgs) {
+    this._paths = args?.paths ?? {};
+    this._additionalData = args?.additionalData ?? {};
+  }
+
+  public get paths(): Record<string, ReadonlyArray<string>> {
+    return this._paths;
+  }
+
+  public get additionalData(): Snapshot {
+    return this._additionalData;
+  }
+
+  public setPaths(
+    paths: Record<string, ReadonlyArray<string>>,
+  ): CompilerOptions {
+    return new CompilerOptions({
+      paths,
+      additionalData: this._additionalData,
+    });
+  }
+
+  public format(): string {
+    const json = {
+      paths: this._paths,
+      ...this._additionalData,
+    };
+
+    const ordered = sortKeys(json, compareKeys);
+
+    return JSON.stringify(ordered, null, 2);
+  }
+
+  public equals(other: unknown): boolean {
+    // TODO: Get rid of lodash.
+
+    if (other instanceof CompilerOptions) {
+      return (
+        isEqual(this._paths, other._paths) &&
+        isEqual(this._additionalData, other._additionalData)
+      );
+    } else {
+      return false;
+    }
+  }
+}
+
+function compareKeys(a: string, b: string): number {
+  return getKeyIndex(a) - getKeyIndex(b);
+}
+
+function getKeyIndex(s: string): number {
+  const order = [
+    'target',
+    'module',
+    'moduleResolution',
+    'esModuleInterop',
+    'lib',
+    'types',
+    'strict',
+    'allowJs',
+  ];
+
+  if (order.every((key) => key !== s)) {
+    return Number.MAX_VALUE;
+  } else {
+    return order.indexOf(s);
+  }
+}

package/src/tsconfig/index.ts

@@ -0,0 +1,4 @@
+export * from './tsconfig';
+
+export * from './compiler-options';
+export * from './reference';

package/src/tsconfig/reference.ts

@@ -0,0 +1,21 @@
+import { Equalable } from '@stack-dev/core';
+
+export class Reference implements Equalable {
+  private readonly _path: string;
+
+  public constructor(path: string) {
+    this._path = path;
+  }
+
+  public get path(): string {
+    return this._path;
+  }
+
+  equals(other: unknown): boolean {
+    if (other instanceof Reference) {
+      return this._path === other._path;
+    } else {
+      return false;
+    }
+  }
+}

package/src/tsconfig/tsconfig.ts

@@ -0,0 +1,137 @@
+import * as JSON5 from 'json5';
+
+import { Equalable, haveSameItems, sortKeys } from '@stack-dev/core';
+
+import { Snapshot } from '@stack-dev/core';
+import { isEqual } from 'lodash';
+import { CompilerOptions } from './compiler-options';
+import { Reference } from './reference';
+
+type ConstructorArgs = {
+  compilerOptions?: CompilerOptions;
+  references?: ReadonlyArray<Reference>;
+  additionalData?: Snapshot;
+};
+
+export class TSConfig implements Equalable {
+  private readonly _compilerOptions: CompilerOptions;
+
+  private readonly _references: ReadonlyArray<Reference>;
+
+  private readonly _additionalData: Snapshot;
+
+  public constructor(args?: ConstructorArgs) {
+    this._compilerOptions = args?.compilerOptions ?? new CompilerOptions();
+    this._references = args?.references ?? [];
+    this._additionalData = args?.additionalData ?? {};
+  }
+
+  public get compilerOptions(): CompilerOptions {
+    return this._compilerOptions;
+  }
+
+  public addReference(reference: Reference): TSConfig {
+    return new TSConfig({
+      compilerOptions: this._compilerOptions,
+      references: [...this._references, reference],
+      additionalData: this._additionalData,
+    });
+  }
+
+  public setCompilerOptions(compilerOptions: CompilerOptions): TSConfig {
+    return new TSConfig({
+      compilerOptions,
+      references: this._references,
+      additionalData: this._additionalData,
+    });
+  }
+
+  public static parse(s: string): TSConfig {
+    const json = JSON5.parse(s);
+
+    const references = TSConfig.parseReferences(json);
+
+    const compilerOptions = new CompilerOptions({
+      paths: json.compilerOptions?.paths,
+      ...json.compilerOptions,
+    });
+
+    const additionalData = { ...json };
+    delete additionalData['compilerOptions'];
+    delete additionalData['references'];
+
+    return new TSConfig({
+      compilerOptions,
+      references,
+      additionalData,
+    });
+  }
+
+  private static parseReferences(json: unknown): ReadonlyArray<Reference> {
+    if (
+      typeof json === 'object' &&
+      json !== null &&
+      'references' in json &&
+      json.references instanceof Array
+    ) {
+      return json.references.map(
+        (r: Record<string, string>) => new Reference(r.path),
+      );
+    } else {
+      return [];
+    }
+  }
+
+  public format(): string {
+    const compilerOptions = JSON5.parse(this.compilerOptions.format());
+
+    const json = {
+      compilerOptions,
+      references: this._references.map((r) => ({ path: r.path })),
+      ...this._additionalData,
+    };
+
+    const ordered = sortKeys(json, compareKeys);
+
+    return JSON.stringify(ordered, null, 2);
+  }
+
+  public equals(other: unknown): boolean {
+    if (other instanceof TSConfig) {
+      const sameReferences = haveSameItems(
+        this._references,
+        other._references,
+        (r1, r2) => r1.equals(r2),
+      );
+
+      return (
+        this._compilerOptions.equals(other._compilerOptions) &&
+        sameReferences &&
+        isEqual(this._additionalData, other._additionalData)
+      );
+    } else {
+      return false;
+    }
+  }
+}
+
+// TODO: orderKeys (by array);
+function compareKeys(a: string, b: string): number {
+  return getKeyIndex(a) - getKeyIndex(b);
+}
+
+function getKeyIndex(s: string): number {
+  const order = [
+    'extends',
+    'compilerOptions',
+    'include',
+    'exclude',
+    'references',
+  ];
+
+  if (order.every((key) => key !== s)) {
+    return Number.MAX_VALUE;
+  } else {
+    return order.indexOf(s);
+  }
+}