@quilted/create 0.1.49 → 0.1.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "license": "MIT",
   "repository": {
     "type": "git",

package/source/create.ts

@@ -5,7 +5,7 @@ import {AbortError, stripIndent, color, parseArguments} from '@quilted/cli-kit';
 import {printHelp} from './help';
 import {prompt} from './shared';
 
-const VALID_PROJECT_KINDS = new Set(['app', 'package']);
+const VALID_PROJECT_KINDS = new Set(['app', 'package', 'module']);
 
 run().catch((error) => {
   if (AbortError.test(error)) return;
@@ -57,6 +57,7 @@ async function run() {
       message: 'What kind of project would you like to create?',
       choices: [
         {title: 'App', value: 'app'},
+        {title: 'Module', value: 'module'},
         {title: 'Package', value: 'package'},
       ],
     });
@@ -68,6 +69,11 @@ async function run() {
       await createApp();
       break;
     }
+    case 'module': {
+      const {createModule} = await import('./module');
+      await createModule();
+      break;
+    }
     case 'package': {
       const {createProject} = await import('./package');
       await createProject();

package/source/help.ts

@@ -4,7 +4,11 @@ export function printHelp({
   kind,
   options: customOptions,
   packageManager,
-}: {kind?: 'app' | 'package'; options?: string; packageManager?: string} = {}) {
+}: {
+  kind?: 'app' | 'package' | 'module';
+  options?: string;
+  packageManager?: string;
+} = {}) {
   const command = createCommand(packageManager);
 
   const usage = stripIndent`
@@ -31,6 +35,7 @@ export function printHelp({
 
      - ${color.magenta('app')}, a web application
      - ${color.magenta('package')}, a shared library of code
+     - ${color.magenta('module')}, a standalone JavaScript module for a browser
 
     You’ll be asked a few additional questions based on the kind you choose.
   `;

package/source/module.ts

@@ -0,0 +1,412 @@
+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';
+import {
+  format,
+  loadTemplate,
+  createOutputTarget,
+  isEmpty,
+  emptyDirectory,
+  toValidPackageName,
+  relativeDirectoryForDisplay,
+  mergeWorkspaceAndProjectPackageJsons,
+} from './shared';
+import {
+  prompt,
+  getInWorkspace,
+  getCreateAsMonorepo,
+  getExtrasToSetup,
+  getPackageManager,
+  getShouldInstall,
+} from './shared/prompts';
+import {addToTsConfig} from './shared/tsconfig';
+import {addToPackageManagerWorkspaces} from './shared/package-manager';
+
+type Arguments = ReturnType<typeof getArgv>;
+
+export async function createModule() {
+  const argv = getArgv();
+
+  if (argv['--help']) {
+    printHelp({
+      kind: 'module',
+      packageManager: argv['--package-manager']?.toLowerCase(),
+    });
+    return;
+  }
+
+  const inWorkspace = await getInWorkspace(argv);
+  const name = await getName(argv);
+  const directory = await getDirectory(argv, {name});
+
+  const useReact = await getReact(argv);
+
+  const entry = `${toValidPackageName(name)}.${useReact ? 'tsx' : 'ts'}`;
+
+  const createAsMonorepo =
+    !inWorkspace &&
+    (await getCreateAsMonorepo(argv, {
+      type: 'module',
+      default: false,
+    }));
+  const setupExtras = await getExtrasToSetup(argv, {inWorkspace});
+  const shouldInstall = await getShouldInstall(argv, {type: 'module'});
+  const packageManager = await getPackageManager(argv, {root: directory});
+
+  const partOfMonorepo = inWorkspace || createAsMonorepo;
+
+  const moduleDirectory = createAsMonorepo
+    ? path.join(directory, 'app')
+    : directory;
+
+  if (fs.existsSync(directory)) {
+    await emptyDirectory(directory);
+
+    if (moduleDirectory !== directory) {
+      fs.mkdirSync(moduleDirectory, {recursive: true});
+    }
+  } else {
+    fs.mkdirSync(moduleDirectory, {recursive: true});
+  }
+
+  const rootDirectory = inWorkspace ? process.cwd() : directory;
+  const outputRoot = createOutputTarget(rootDirectory);
+  const moduleTemplate = loadTemplate('module');
+  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 moduleRelativeToRoot = relativeDirectoryForDisplay(
+        path.relative(directory, moduleDirectory),
+      );
+
+      const workspacePackageJson = JSON.parse(
+        await workspaceTemplate.read('package.json'),
+      );
+
+      workspacePackageJson.name = toValidPackageName(name!);
+      workspacePackageJson.workspaces = [moduleRelativeToRoot, './packages/*'];
+
+      if (packageManager.type === 'pnpm') {
+        await outputRoot.write(
+          'pnpm-workspace.yaml',
+          await format(
+            `
+              packages:
+              - '${moduleRelativeToRoot}'
+              - './packages/*'
+            `,
+            {as: 'yaml'},
+          ),
+        );
+      }
+
+      await outputRoot.write(
+        'package.json',
+        await format(JSON.stringify(workspacePackageJson), {
+          as: 'json-stringify',
+        }),
+      );
+    } else {
+      const [projectPackageJson, projectTSConfig, workspacePackageJson] =
+        await Promise.all([
+          moduleTemplate
+            .read('package.json')
+            .then((content) => JSON.parse(content)),
+          moduleTemplate
+            .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, react: useReact});
+      delete combinedPackageJson.workspaces;
+
+      let quiltProject = await moduleTemplate.read('quilt.project.ts');
+      quiltProject = quiltProject
+        .replace('quiltModule', 'quiltWorkspace, quiltModule')
+        .replace('quiltModule(', 'quiltWorkspace(), quiltModule(');
+
+      if (!useReact) {
+        quiltProject = quiltProject.replace(
+          'quiltPackage()',
+          'quiltPackage({react: false})',
+        );
+      }
+
+      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 moduleTemplate.copy(moduleDirectory, (file) => {
+    // If we are in a monorepo, we can use all the template files as they are
+    if (file === 'quilt.project.ts' || file === 'tsconfig.json') {
+      return partOfMonorepo;
+    }
+
+    // We will adjust the entry file
+    if (file === 'module.ts') {
+      return false;
+    }
+
+    // We need to make some adjustments the project’s package.json
+    return file !== 'package.json';
+  });
+
+  await outputRoot.write(
+    path.join(moduleDirectory, entry),
+    await moduleTemplate.read('module.ts'),
+  );
+
+  if (partOfMonorepo) {
+    // Write the app’s package.json (the root one was already created)
+    const projectPackageJson = JSON.parse(
+      await moduleTemplate.read('package.json'),
+    );
+
+    adjustPackageJson(projectPackageJson, {name, entry, react: useReact});
+
+    await outputRoot.write(
+      path.join(moduleDirectory, 'package.json'),
+      await format(JSON.stringify(projectPackageJson), {
+        as: 'json-stringify',
+      }),
+    );
+
+    await Promise.all([
+      addToTsConfig(moduleDirectory, outputRoot),
+      addToPackageManagerWorkspaces(
+        moduleDirectory,
+        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 module’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 module is ready to go!');
+  } else {
+    const whatsNext = stripIndent`
+      Your new module 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, test, lint, and type-check your new module.
+    You can learn more about building modules 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,
+      '--install': Boolean,
+      '--no-install': Boolean,
+      '--monorepo': Boolean,
+      '--no-monorepo': Boolean,
+      '--package-manager': String,
+      '--extras': [String],
+      '--no-extras': Boolean,
+      '--react': Boolean,
+      '--no-react': 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 module?',
+      initial: 'my-module',
+    });
+  }
+
+  return name!;
+}
+
+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 module in?',
+      });
+
+      directory = path.resolve(promptDirectory);
+    } else {
+      break;
+    }
+  }
+
+  return directory;
+}
+
+async function getReact(args: Arguments) {
+  let useReact: boolean;
+
+  if (args['--react'] || args['--yes']) {
+    useReact = true;
+  } else if (args['--no-react']) {
+    useReact = false;
+  } else {
+    useReact = await prompt({
+      type: 'confirm',
+      message: 'Will this module depend on React?',
+      initial: false,
+    });
+  }
+
+  return useReact;
+}
+
+function adjustPackageJson(
+  packageJson: Record<string, any>,
+  {
+    name,
+    entry,
+    react,
+  }: {
+    name: string;
+    entry: string;
+    react: boolean;
+  },
+) {
+  packageJson.name = name;
+  packageJson.main = `./${entry}`;
+
+  if (!react) {
+    delete packageJson.devDependencies['@types/react'];
+    delete packageJson.devDependencies['@types/react-dom'];
+    delete packageJson.devDependencies['preact'];
+    delete packageJson.devDependencies['react'];
+    delete packageJson.devDependencies['react-dom'];
+
+    packageJson.eslintConfig.extends = packageJson.eslintConfig.extends.filter(
+      (extend: string) => !extend.includes('react'),
+    );
+  }
+
+  return packageJson;
+}

package/source/shared/prompts.ts

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

package/source/shared.ts

@@ -11,6 +11,7 @@ export function loadTemplate(
     | 'app-single-file'
     | 'app-empty'
     | 'app-graphql'
+    | 'module'
     | 'workspace'
     | 'github'
     | 'vscode',
@@ -80,6 +81,7 @@ async function templateDirectory(
     | 'app-single-file'
     | 'app-empty'
     | 'app-graphql'
+    | 'module'
     | 'workspace'
     | 'github'
     | 'vscode',

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

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

package/templates/app-basic/foundation/Head/Head.test.tsx

@@ -1,13 +1,13 @@
 import {Viewport, SearchRobots} from '@quilted/quilt/html';
 import {describe, it, expect} from '@quilted/quilt/testing';
 
-import {mountWithAppContext} from '~/tests/mount';
+import {renderWithAppContext} from '~/tests/render';
 
 import {Head} from './Head';
 
 describe('<Head />', () => {
   it('includes a responsive viewport tag', async () => {
-    const head = await mountWithAppContext(<Head />);
+    const head = await renderWithAppContext(<Head />);
 
     expect(head).toContainReactComponent(Viewport, {
       cover: true,
@@ -15,7 +15,7 @@ describe('<Head />', () => {
   });
 
   it('prevents search robots from indexing the application', async () => {
-    const head = await mountWithAppContext(<Head />);
+    const head = await renderWithAppContext(<Head />);
 
     expect(head).toContainReactComponent(SearchRobots, {
       index: false,

package/templates/app-basic/foundation/Http/Http.test.tsx

@@ -1,13 +1,13 @@
 import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
 import {describe, it, expect} from '@quilted/quilt/testing';
 
-import {mountWithAppContext} from '~/tests/mount';
+import {renderWithAppContext} from '~/tests/render';
 
 import {Http} from './Http';
 
 describe('<Http />', () => {
   it('does not cache the response', async () => {
-    const http = await mountWithAppContext(<Http />);
+    const http = await renderWithAppContext(<Http />);
 
     expect(http).toContainReactComponent(CacheControl, {
       cache: false,
@@ -15,7 +15,7 @@ describe('<Http />', () => {
   });
 
   it('adds a content security policy with a strict default policy', async () => {
-    const http = await mountWithAppContext(<Http />);
+    const http = await renderWithAppContext(<Http />);
 
     expect(http).toContainReactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],

package/templates/app-basic/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./build/server/index.js"
+    "start": "node ./build/server/server.js"
   },
   "dependencies": {},
   "devDependencies": {

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

@@ -2,7 +2,7 @@ import '@quilted/quilt/matchers';
 
 import {type PropsWithChildren} from '@quilted/quilt';
 import {
-  createMount,
+  createRender,
   QuiltAppTesting,
   createTestRouter,
 } from '@quilted/quilt/testing';
@@ -11,7 +11,7 @@ type Router = ReturnType<typeof createTestRouter>;
 
 export {createTestRouter};
 
-export interface MountOptions {
+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
@@ -26,23 +26,23 @@ export interface MountOptions {
   locale?: string;
 }
 
-export interface MountContext {
+export interface RenderContext {
   /**
    * The router used for this component test.
    */
   router: Router;
 }
 
-export interface MountActions extends Record<string, never> {}
+export interface RenderActions extends Record<string, never> {}
 
 /**
- * Mounts a component with test-friendly versions of all global
+ * Renders a component with test-friendly versions of all global
  * context available to the application.
  */
-export const mountWithAppContext = createMount<
-  MountOptions,
-  MountContext,
-  MountActions,
+export const renderWithAppContext = createRender<
+  RenderOptions,
+  RenderContext,
+  RenderActions,
   true
 >({
   // Create context that can be used by the `render` function, and referenced by test
@@ -59,10 +59,10 @@ export const mountWithAppContext = createMount<
       </QuiltAppTesting>
     );
   },
-  async afterMount() {
+  async afterRender() {
     // 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
-    // `mount` function to return a promise, so that the component is only usable
+    // `render` function to return a promise, so that the component is only usable
     // once the data is ready.
   },
 });

package/templates/app-empty/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./build/server/index.js"
+    "start": "node ./build/server/server.js"
   },
   "dependencies": {},
   "devDependencies": {

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

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