@quilted/create 0.1.67 → 0.1.69

package/source/service.ts

@@ -0,0 +1,388 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import arg from 'arg';
+import * as color from 'colorette';
+import {stripIndent} from 'common-tags';
+
+import {printHelp} from './help.ts';
+import {
+  format,
+  loadTemplate,
+  createOutputTarget,
+  isEmpty,
+  emptyDirectory,
+  toValidPackageName,
+  relativeDirectoryForDisplay,
+  mergeWorkspaceAndProjectPackageJsons,
+} from './shared.ts';
+import {
+  prompt,
+  getInWorkspace,
+  getCreateAsMonorepo,
+  getExtrasToSetup,
+  getPackageManager,
+  getShouldInstall,
+} from './shared/prompts.ts';
+import {addToTsConfig} from './shared/tsconfig.ts';
+import {addToPackageManagerWorkspaces} from './shared/package-manager.ts';
+
+type Arguments = ReturnType<typeof getArgv>;
+
+export async function createService() {
+  const argv = getArgv();
+
+  if (argv['--help']) {
+    printHelp({
+      kind: 'service',
+      packageManager: argv['--package-manager']?.toLowerCase(),
+    });
+    return;
+  }
+
+  const inWorkspace = await getInWorkspace(argv);
+  const name = await getName(argv);
+  const directory = await getDirectory(argv, {name});
+  const entry = await getEntry(argv, {name});
+
+  const createAsMonorepo =
+    !inWorkspace &&
+    (await getCreateAsMonorepo(argv, {
+      type: 'service',
+      default: false,
+    }));
+  const setupExtras = await getExtrasToSetup(argv, {inWorkspace});
+  const shouldInstall = await getShouldInstall(argv);
+  const packageManager = await getPackageManager(argv, {root: directory});
+
+  const partOfMonorepo = inWorkspace || createAsMonorepo;
+
+  const serviceDirectory = createAsMonorepo
+    ? path.join(directory, toValidPackageName(name))
+    : directory;
+
+  if (fs.existsSync(directory)) {
+    await emptyDirectory(directory);
+
+    if (serviceDirectory !== directory) {
+      fs.mkdirSync(serviceDirectory, {recursive: true});
+    }
+  } else {
+    fs.mkdirSync(serviceDirectory, {recursive: true});
+  }
+
+  const rootDirectory = inWorkspace ? process.cwd() : directory;
+  const outputRoot = createOutputTarget(rootDirectory);
+  const serviceTemplate = loadTemplate('service-basic');
+  const workspaceTemplate = loadTemplate('workspace');
+
+  // If we aren’t already in a workspace, copy the workspace files over, which
+  // are needed if we are making a monorepo or not.
+  if (!inWorkspace) {
+    await workspaceTemplate.copy(directory, (file) => {
+      // When this is a single project, we use the project’s Quilt  configuration as the base.
+      if (file === 'quilt.workspace.ts') return createAsMonorepo;
+
+      // We need to make some adjustments to the root package.json
+      if (file === 'package.json') return false;
+
+      return true;
+    });
+
+    // If we are creating a monorepo, we need to add the root package.json and
+    // package manager workspace configuration.
+    if (createAsMonorepo) {
+      const serviceRelativeToRoot = relativeDirectoryForDisplay(
+        path.relative(directory, serviceDirectory),
+      );
+
+      const workspacePackageJson = JSON.parse(
+        await workspaceTemplate.read('package.json'),
+      );
+
+      workspacePackageJson.name = toValidPackageName(name!);
+      workspacePackageJson.workspaces = [serviceRelativeToRoot, './packages/*'];
+
+      if (packageManager.type === 'pnpm') {
+        await outputRoot.write(
+          'pnpm-workspace.yaml',
+          await format(
+            `
+              packages:
+              - '${serviceRelativeToRoot}'
+              - './packages/*'
+            `,
+            {as: 'yaml'},
+          ),
+        );
+      }
+
+      await outputRoot.write(
+        'package.json',
+        await format(JSON.stringify(workspacePackageJson), {
+          as: 'json-stringify',
+        }),
+      );
+    } else {
+      const [projectPackageJson, projectTSConfig, workspacePackageJson] =
+        await Promise.all([
+          serviceTemplate
+            .read('package.json')
+            .then((content) => JSON.parse(content)),
+          serviceTemplate
+            .read('tsconfig.json')
+            .then((content) => JSON.parse(content)),
+          workspaceTemplate
+            .read('package.json')
+            .then((content) => JSON.parse(content)),
+        ]);
+
+      const combinedPackageJson = mergeWorkspaceAndProjectPackageJsons(
+        projectPackageJson,
+        workspacePackageJson,
+      );
+
+      adjustPackageJson(combinedPackageJson, {name, entry});
+      delete combinedPackageJson.workspaces;
+
+      let quiltProject = await serviceTemplate.read('quilt.project.ts');
+      quiltProject = quiltProject
+        .replace('quiltService', 'quiltWorkspace, quiltService')
+        .replace('quiltService(', 'quiltWorkspace(), quiltService(')
+        .replace('service.ts', entry.replace(/^\.[/]/, ''));
+
+      await outputRoot.write(
+        'quilt.project.ts',
+        await format(quiltProject, {as: 'typescript'}),
+      );
+
+      await outputRoot.write(
+        'package.json',
+        await format(JSON.stringify(combinedPackageJson), {
+          as: 'json-stringify',
+        }),
+      );
+
+      await outputRoot.write(
+        'tsconfig.json',
+        await format(JSON.stringify(projectTSConfig), {as: 'json'}),
+      );
+    }
+
+    if (setupExtras.has('github')) {
+      await loadTemplate('github').copy(directory);
+    }
+
+    if (setupExtras.has('vscode')) {
+      await loadTemplate('vscode').copy(directory);
+    }
+  }
+
+  await serviceTemplate.copy(serviceDirectory, (file) => {
+    // If we are in a monorepo, we can use all the template files as they are
+    if (file === 'tsconfig.json') {
+      return partOfMonorepo;
+    }
+
+    // We will adjust the entry file and quilt project file
+    if (file === 'service.ts' || file === 'quilt.project.ts') {
+      return false;
+    }
+
+    // We need to make some adjustments the project’s package.json
+    return file !== 'package.json';
+  });
+
+  await outputRoot.write(
+    path.join(serviceDirectory, entry),
+    await serviceTemplate.read('service.ts'),
+  );
+
+  let quiltProject = await serviceTemplate.read('quilt.project.ts');
+  quiltProject = quiltProject.replace(
+    'service.ts',
+    entry.replace(/^\.[/]/, ''),
+  );
+
+  await outputRoot.write(
+    path.join(serviceDirectory, 'quilt.project.ts'),
+    await format(quiltProject, {as: 'typescript'}),
+  );
+
+  if (partOfMonorepo) {
+    // Write the app’s package.json (the root one was already created)
+    const projectPackageJson = JSON.parse(
+      await serviceTemplate.read('package.json'),
+    );
+
+    adjustPackageJson(projectPackageJson, {name, entry});
+
+    await outputRoot.write(
+      path.join(serviceDirectory, 'package.json'),
+      await format(JSON.stringify(projectPackageJson), {
+        as: 'json-stringify',
+      }),
+    );
+
+    await Promise.all([
+      addToTsConfig(serviceDirectory, outputRoot),
+      addToPackageManagerWorkspaces(
+        serviceDirectory,
+        outputRoot,
+        packageManager.type,
+      ),
+    ]);
+  }
+
+  if (shouldInstall) {
+    console.log();
+    // TODO: better loading, handle errors
+    await packageManager.install();
+  }
+
+  const commands: string[] = [];
+
+  if (!inWorkspace && directory !== process.cwd()) {
+    commands.push(
+      `cd ${color.cyan(
+        relativeDirectoryForDisplay(path.relative(process.cwd(), directory)),
+      )} ${color.dim('# Move into your new service’s directory')}`,
+    );
+  }
+
+  if (!shouldInstall) {
+    commands.push(
+      `${packageManager.commands.install()} ${color.dim(
+        '# Install all your dependencies',
+      )}`,
+    );
+  }
+
+  if (commands.length === 0) {
+    console.log();
+    console.log('Your new service is ready to go!');
+  } else {
+    const whatsNext = stripIndent`
+      Your new service is ready to go! There’s just ${
+        commands.length > 1 ? 'a few more steps' : 'one more step'
+      } you’ll need to take
+      in order to start developing:
+    `;
+
+    console.log();
+    console.log(whatsNext);
+    console.log();
+    console.log(commands.map((command) => `  ${command}`).join('\n'));
+  }
+
+  const followUp = stripIndent`
+    Quilt can also help you build, develop, test, lint, and type-check your new service.
+    You can learn more about building services with Quilt by reading the documentation:
+    ${color.underline(
+      color.magenta(
+        'https://github.com/lemonmade/quilt/tree/main/documentation',
+      ),
+    )}
+
+    Have fun! 🎉
+  `;
+
+  console.log();
+  console.log(followUp);
+}
+
+// Argument handling
+
+function getArgv() {
+  const argv = arg(
+    {
+      '--yes': Boolean,
+      '-y': '--yes',
+      '--name': String,
+      '--directory': String,
+      '--entry': String,
+      '--install': Boolean,
+      '--no-install': Boolean,
+      '--monorepo': Boolean,
+      '--no-monorepo': Boolean,
+      '--package-manager': String,
+      '--extras': [String],
+      '--no-extras': Boolean,
+      '--help': Boolean,
+      '-h': '--help',
+    },
+    {permissive: true},
+  );
+
+  return argv;
+}
+
+async function getName(argv: Arguments) {
+  let {'--name': name} = argv;
+
+  if (name == null) {
+    name = await prompt({
+      type: 'text',
+      message: 'What would you like to name your new service?',
+      initial: 'my-service',
+    });
+  }
+
+  return name!;
+}
+
+async function getEntry(argv: Arguments, {name}: {name: string}) {
+  if (argv['--entry']) {
+    return argv['--entry'];
+  }
+
+  return `${toValidPackageName(name)}.ts`;
+}
+
+async function getDirectory(argv: Arguments, {name}: {name: string}) {
+  let directory = path.resolve(
+    argv['--directory'] ?? toValidPackageName(name!),
+  );
+
+  while (!argv['--yes']) {
+    if (fs.existsSync(directory) && !(await isEmpty(directory))) {
+      const relativeDirectory = path.relative(process.cwd(), directory);
+
+      const empty = await prompt({
+        type: 'confirm',
+        message: `Directory ${color.bold(
+          relativeDirectoryForDisplay(relativeDirectory),
+        )} is not empty, is it safe to empty it?`,
+        initial: true,
+      });
+
+      if (empty) break;
+
+      const promptDirectory = await prompt({
+        type: 'text',
+        message: 'What directory do you want to create your new service in?',
+      });
+
+      directory = path.resolve(promptDirectory);
+    } else {
+      break;
+    }
+  }
+
+  return directory;
+}
+
+function adjustPackageJson(
+  packageJson: Record<string, any>,
+  {
+    name,
+  }: {
+    name: string;
+    entry: string;
+  },
+) {
+  packageJson.name = name;
+  packageJson.main = `./build/runtime/runtime.js`;
+
+  return packageJson;
+}

package/source/shared/prompts.ts

@@ -35,7 +35,7 @@ export async function getCreateAsMonorepo(
   {
     type,
     default: defaultCreateAsMonorepo = true,
-  }: {type: 'app' | 'package' | 'module'; default?: boolean},
+  }: {type: 'app' | 'package' | 'module' | 'service'; default?: boolean},
 ) {
   let createAsMonorepo: boolean;
 

package/source/shared.ts

@@ -13,6 +13,7 @@ export function loadTemplate(
     | 'app-graphql'
     | 'app-trpc'
     | 'module'
+    | 'service-basic'
     | 'workspace'
     | 'github'
     | 'vscode',
@@ -84,6 +85,7 @@ async function templateDirectory(
     | 'app-graphql'
     | 'app-trpc'
     | 'module'
+    | 'service-basic'
     | 'workspace'
     | 'github'
     | 'vscode',
@@ -162,14 +164,17 @@ export async function format(
 ) {
   const [
     {format: rootFormat, default: prettier},
-    {default: babel},
-    {default: typescript},
-    {default: yaml},
+    babel,
+    typescript,
+    yaml,
+    estree,
   ] = await Promise.all([
     import('prettier/standalone'),
-    import('prettier/parser-babel'),
-    import('prettier/parser-typescript'),
-    import('prettier/parser-yaml'),
+    import('prettier/plugins/babel'),
+    import('prettier/plugins/typescript'),
+    import('prettier/plugins/yaml'),
+    // @ts-expect-error Types are not generated correctly for this entry
+    import('prettier/plugins/estree'),
   ]);
 
   // CJS workaround
@@ -181,7 +186,7 @@ export async function format(
     singleQuote: true,
     trailingComma: 'all',
     parser,
-    plugins: [babel, typescript, yaml],
+    plugins: [babel, typescript, yaml, estree],
   });
 }
 

package/templates/app-basic/features/Start/Start.test.tsx

@@ -1,12 +1,12 @@
 import {describe, it, expect} from '@quilted/quilt/testing';
 
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.ts';
 
 import Start from './Start.tsx';
 
 describe('<Start />', () => {
   it('includes a welcome message', async () => {
-    const start = await renderWithAppContext(<Start />);
+    const start = await renderApp(<Start />);
     expect(start).toContainReactText('Hello world!');
   });
 });

package/templates/{app-trpc/tests → app-basic/tests/render}/render.tsx

@@ -1,49 +1,18 @@
-import '@quilted/quilt/matchers';
-
 import {
   createRender,
   QuiltAppTesting,
   createTestRouter,
 } from '@quilted/quilt/testing';
 
-import {
-  AppContextReact,
-  type AppContext as AppContextType,
-} from '~/shared/context.ts';
-
-type Router = ReturnType<typeof createTestRouter>;
-
-export {createTestRouter};
-
-export interface RenderOptions {
-  /**
-   * A custom router to use for this component test. You can use a
-   * custom router to simulate a particular URL, and you can spy on
-   * its navigation method to check that components navigate as
-   * you expect.
-   */
-  router?: Router;
-
-  /**
-   * A custom locale to use for this component test.
-   */
-  locale?: string;
-}
-
-export interface RenderContext extends AppContextType {
-  /**
-   * The router used for this component test.
-   */
-  router: Router;
-}
+import {AppContextReact} from '~/shared/context.ts';
 
-export interface RenderActions extends Record<string, never> {}
+import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
 /**
  * Renders a component with test-friendly versions of all global
  * context available to the application.
  */
-export const renderWithAppContext = createRender<
+export const renderApp = createRender<
   RenderOptions,
   RenderContext,
   RenderActions,

package/templates/app-basic/tests/render/types.ts

@@ -0,0 +1,29 @@
+import type {createTestRouter} from '@quilted/quilt/testing';
+
+import type {AppContext} from '~/shared/context.ts';
+
+type Router = ReturnType<typeof createTestRouter>;
+
+export interface RenderOptions {
+  /**
+   * A custom router to use for this component test. You can use a
+   * custom router to simulate a particular URL, and you can spy on
+   * its navigation method to check that components navigate as
+   * you expect.
+   */
+  readonly router?: Router;
+
+  /**
+   * A custom locale to use for this component test.
+   */
+  readonly locale?: string;
+}
+
+export interface RenderContext extends AppContext {
+  /**
+   * The router used for this component test.
+   */
+  readonly router: Router;
+}
+
+export interface RenderActions extends Record<string, never> {}

package/templates/app-basic/tests/render.ts

@@ -0,0 +1,6 @@
+import '@quilted/quilt/matchers';
+
+export {createTestRouter} from '@quilted/quilt/testing';
+
+export * from './render/types.ts';
+export {renderApp} from './render/render.tsx';

package/templates/app-graphql/features/Start/Start.test.tsx

@@ -1,9 +1,9 @@
 import {describe, it, expect} from '@quilted/quilt/testing';
 
 import {
-  renderWithAppContext,
-  createGraphQLController,
+  renderApp,
   fillGraphQL,
+  createGraphQLController,
 } from '~/tests/render.tsx';
 
 import Start from './Start.tsx';
@@ -14,7 +14,7 @@ describe('<Start />', () => {
     const name = 'Winston';
     const graphql = createGraphQLController(fillGraphQL(startQuery, {name}));
 
-    const start = await renderWithAppContext(<Start />, {graphql});
+    const start = await renderApp(<Start />, {graphql});
 
     expect(graphql).toHavePerformedGraphQLOperation(startQuery);
     expect(start).toContainReactText(`Hello ${name}!`);

package/templates/app-graphql/tests/render/render.tsx

@@ -0,0 +1,59 @@
+import {
+  createRender,
+  QuiltAppTesting,
+  createTestRouter,
+} from '@quilted/quilt/testing';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+
+import {AppContextReact} from '~/shared/context.ts';
+
+import {TestGraphQL, createGraphQLController} from '../graphql.ts';
+
+import {RenderOptions, RenderContext, RenderActions} from './types.ts';
+
+/**
+ * Renders a component with test-friendly versions of all global
+ * context available to the application.
+ */
+export const renderApp = createRender<
+  RenderOptions,
+  RenderContext,
+  RenderActions,
+  true
+>({
+  // Create context that can be used by the `render` function, and referenced by test
+  // authors on the `root.context` property. Context is used to share data between your
+  // React tree and your test code, and is ideal for mocking out global context providers.
+  context({router = createTestRouter(), graphql = createGraphQLController()}) {
+    return {router, graphql, queryClient: new QueryClient()};
+  },
+  // Render all of our app-wide context providers around each component under test.
+  render(element, context, {locale}) {
+    const {router, graphql, queryClient} = context;
+
+    return (
+      <QuiltAppTesting routing={router} localization={locale}>
+        <AppContextReact.Provider value={context}>
+          <TestGraphQL controller={graphql}>
+            <QueryClientProvider client={queryClient}>
+              {element}
+            </QueryClientProvider>
+          </TestGraphQL>
+        </AppContextReact.Provider>
+      </QuiltAppTesting>
+    );
+  },
+  async afterRender(wrapper) {
+    // If your components need to resolve data before they can render, you can
+    // use this hook to wait for that data to be ready. This will cause the
+    // `render` function to return a promise, so that the component is only usable
+    // once the data is ready.
+
+    await wrapper.act(async () => {
+      await wrapper.context.graphql.resolveAll();
+
+      // react-query needs an extra tick to set state in response to GraphQL queries.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  },
+});

package/templates/app-graphql/tests/render/types.ts

@@ -0,0 +1,63 @@
+import type {createTestRouter} from '@quilted/quilt/testing';
+import type {QueryClient} from '@tanstack/react-query';
+
+import type {AppContext} from '~/shared/context.ts';
+
+import type {GraphQLController} from '../graphql.ts';
+
+type Router = ReturnType<typeof createTestRouter>;
+
+export interface RenderOptions {
+  /**
+   * A custom router to use for this component test. You can use a
+   * custom router to simulate a particular URL, and you can spy on
+   * its navigation method to check that components navigate as
+   * you expect.
+   */
+  readonly router?: Router;
+
+  /**
+   * An object that controls the responses to GraphQL queries and mutations
+   * for the component under test. You can customize the responses using
+   * the `fillGraphQL` and `createGraphQLController` utilities provided
+   * by this module.
+   *
+   * ```tsx
+   * import {renderWithAppContext, fillGraphQL, createGraphQLController} from '~/tests/render.tsx';
+   *
+   * import {MyComponent} from './MyComponent.tsx';
+   * import myComponentQuery from './MyComponentQuery.graphql';
+   *
+   * const myComponent = await renderWithAppContext(<MyComponent />, {
+   *   graphql: createGraphQLController(
+   *     fillGraphQL(myComponentQuery, {user: {name: 'Winston'}}),
+   *   ),
+   * });
+   * ```
+   */
+  readonly graphql?: GraphQLController;
+
+  /**
+   * A custom locale to use for this component test.
+   */
+  readonly locale?: string;
+}
+
+export interface RenderContext extends AppContext {
+  /**
+   * The router used for this component test.
+   */
+  readonly router: Router;
+
+  /**
+   * The GraphQL controller used for this component test.
+   */
+  readonly graphql: GraphQLController;
+
+  /**
+   * The react-query client used for this component test.
+   */
+  readonly queryClient: QueryClient;
+}
+
+export interface RenderActions extends Record<string, never> {}