@quilted/create 0.1.35 → 0.1.37

package/source/package.ts

@@ -8,13 +8,14 @@ import {
   format,
   loadTemplate,
   createOutputTarget,
-  mergeDependencies,
   isEmpty,
   emptyDirectory,
   toValidPackageName,
   relativeDirectoryForDisplay,
+  mergeWorkspaceAndProjectPackageJsons,
 } from './shared';
 import {
+  getInWorkspace,
   getCreateAsMonorepo,
   getExtrasToSetup,
   getPackageManager,
@@ -30,6 +31,13 @@ export async function createProject() {
 
   if (args['--help']) {
     const additionalOptions = stripIndent`
+      ${color.cyan(`--description`)}, ${color.cyan(`--no-description`)}
+      A short description of the package. If you don’t provide this option, the command will ask
+      you for a description later.
+      ${color.dim(
+        `@see https://docs.npmjs.com/cli/v9/configuring-npm/package-json#description`,
+      )}
+
       ${color.cyan(`--react`)}, ${color.cyan(`--no-react`)}
       Whether this package will use React. If you don’t provide this option, the command
       will ask you about it later.
@@ -38,6 +46,13 @@ export async function createProject() {
       Whether this package will be published for other projects to install. If you do not
       provide this option, the command will ask you about it later.
 
+      ${color.cyan(`--repository`)}, ${color.cyan(`--no-repository`)}
+      The URL of a git repository where your code lives. If you do not provide this option,
+      this command will try to guess the correct repository to use based on existing packages.
+      ${color.dim(
+        `@see https://docs.npmjs.com/cli/v9/configuring-npm/package-json#repository`,
+      )}
+
       ${color.cyan(`--registry`)}
       The package registry to publish this package to. This option only applies if you create
       a public package. If you do not provide this option, it will use the default NPM registry.
@@ -51,17 +66,19 @@ export async function createProject() {
     return;
   }
 
-  const inWorkspace = fs.existsSync('quilt.workspace.ts');
-
   const name = await getName(args);
+  const description = await getDescription(args);
+  const inWorkspace = await getInWorkspace(args);
   const directory = await getDirectory(args, {name, inWorkspace});
   const isPublic = await getPublic(args);
+  const repository = await getRepository(args, {inWorkspace});
   const useReact = await getReact(args);
 
-  const createAsMonorepo = !inWorkspace && (await getCreateAsMonorepo(args));
-  const shouldInstall = await getShouldInstall(args);
-  const packageManager = await getPackageManager(args, {root: directory});
+  const createAsMonorepo =
+    !inWorkspace && (await getCreateAsMonorepo(args, {type: 'package'}));
   const setupExtras = await getExtrasToSetup(args, {inWorkspace});
+  const shouldInstall = await getShouldInstall(args, {type: 'package'});
+  const packageManager = await getPackageManager(args, {root: directory});
 
   const partOfMonorepo = inWorkspace || createAsMonorepo;
 
@@ -89,11 +106,18 @@ export async function createProject() {
 
   let quiltProject = await packageTemplate.read('quilt.project.ts');
 
+  if (!useReact) {
+    quiltProject = quiltProject.replace(
+      'quiltPackage()',
+      'quiltPackage({react: false})',
+    );
+  }
+
   // 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.
+      // 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
@@ -103,11 +127,19 @@ export async function createProject() {
     // If we are creating a monorepo, we need to add the root package.json and
     // package manager workspace configuration.
     if (createAsMonorepo) {
+      const packageRelativeToRoot = path.relative(
+        rootDirectory,
+        packageDirectory,
+      );
+      const packageGlobRelativeToRoot = relativeDirectoryForDisplay(
+        path.join(packageRelativeToRoot, '*'),
+      );
       const workspacePackageJson = JSON.parse(
         await workspaceTemplate.read('package.json'),
       );
 
       workspacePackageJson.name = toValidPackageName(name!);
+      workspacePackageJson.workspaces = [packageGlobRelativeToRoot];
 
       if (packageManager.type === 'pnpm') {
         await outputRoot.write(
@@ -115,13 +147,11 @@ export async function createProject() {
           await format(
             `
               packages:
-              - './packages/*'
+              - '${packageGlobRelativeToRoot}'
             `,
             {as: 'yaml'},
           ),
         );
-      } else {
-        workspacePackageJson.workspaces = ['packages/*'];
       }
 
       await outputRoot.write(
@@ -144,31 +174,14 @@ export async function createProject() {
             .then((content) => JSON.parse(content)),
         ]);
 
-      workspacePackageJson.eslintConfig = projectPackageJson.eslintConfig;
-      workspacePackageJson.browserslist = projectPackageJson.browserslist;
-
-      const newPackageJson: Record<string, any> = {};
-
-      // We want to put the project’s dependencies in the package.json, respecting
-      // the preferred ordering (dependencies, peer dependencies, dev dependencies).
-      for (const [key, value] of Object.entries(projectPackageJson)) {
-        if (key !== 'devDependencies') {
-          newPackageJson[key] = value;
-          continue;
-        }
-
-        newPackageJson.dependencies = projectPackageJson.dependencies;
-        newPackageJson.peerDependencies = projectPackageJson.peerDependencies;
-        newPackageJson.peerDependenciesMeta =
-          projectPackageJson.peerDependenciesMeta;
-        newPackageJson.devDependencies = mergeDependencies(
-          workspacePackageJson.devDependencies,
-          projectPackageJson.devDependencies,
-        );
-      }
+      const mergedPackageJson = mergeWorkspaceAndProjectPackageJsons(
+        projectPackageJson,
+        workspacePackageJson,
+      );
 
-      adjustPackageJson(newPackageJson, {
+      adjustPackageJson(mergedPackageJson, {
         name: toValidPackageName(name!),
+        description,
         react: useReact,
         isPublic,
         registry: args['--registry'],
@@ -185,7 +198,7 @@ export async function createProject() {
 
       await outputRoot.write(
         'package.json',
-        await format(JSON.stringify(newPackageJson), {
+        await format(JSON.stringify(mergedPackageJson), {
           as: 'json-stringify',
         }),
       );
@@ -221,13 +234,27 @@ export async function createProject() {
       await packageTemplate.read('package.json'),
     );
 
-    projectPackageJson.repository.directory = path.relative(
-      rootDirectory,
-      packageDirectory,
-    );
+    if (repository === false) {
+      delete projectPackageJson.repository;
+    } else {
+      const directory = path.relative(rootDirectory, packageDirectory);
+
+      if (typeof repository === 'string') {
+        projectPackageJson.repository = {
+          type: 'git',
+          url: repository,
+          directory,
+        };
+      } else if (repository != null) {
+        projectPackageJson.repository = {type: 'git', ...repository, directory};
+      } else {
+        projectPackageJson.repository.directory = directory;
+      }
+    }
 
     adjustPackageJson(projectPackageJson, {
       name: toValidPackageName(name),
+      description,
       react: useReact,
       isPublic,
       registry: args['--registry'],
@@ -256,80 +283,74 @@ export async function createProject() {
   }
 
   if (shouldInstall) {
-    process.stdout.write('\nInstalling dependencies...\n');
     // TODO: better loading, handle errors
     await packageManager.install();
-    process.stdout.moveCursor(0, -1);
-    process.stdout.clearLine(1);
-    console.log('Installed dependencies.');
   }
 
-  const packageJsonInstructions = stripIndent`
-    Your new package is ready to go! However, before you go too much further,
-    you should update the following fields in ${color.cyan(
+  console.log();
+  console.log(
+    stripIndent`
+      Your new package, ${color.bold(
+        name,
+      )}, is ready to go! You can edit the code for your package in
+    ${color.cyan(
       relativeDirectoryForDisplay(
-        path.relative(
-          process.cwd(),
-          path.join(packageDirectory, 'package.json'),
-        ),
+        path.relative(process.cwd(), path.join(packageDirectory, 'source')),
       ),
-    )}:
-
-     - ${color.bold(
-       `"description"`,
-     )}, where you provide a description of what your package does
-     - ${color.bold(`"repository"`)}, where you should include the ${color.bold(
-    `"url"`,
-  )} of your project’s repo
-
-    Before you publish your package, you will also want to update the ${color.bold(
-      `"version"`,
-    )}
-    field in the package.json file.
-  `;
-
-  console.log();
-  console.log(packageJsonInstructions);
-
-  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 package’s directory')}`,
-    );
-  }
+    )}.
+    `,
+  );
 
-  if (!shouldInstall) {
-    commands.push(
-      `${packageManager.commands.install()} ${color.dim(
-        '# Install all your dependencies',
-      )}`,
-    );
-  }
+  if (isPublic) {
+    const needsPackageJsonKeys: string[] = [];
 
-  if (!inWorkspace) {
-    // TODO: change this condition to check if git was initialized already
-    commands.push(
-      `git init && git add -A && git commit -m "Initial commit" ${color.dim(
-        '# Start your git history (optional)',
-      )}`,
-    );
-  }
+    if (!description) {
+      needsPackageJsonKeys.push('description');
+    }
 
-  if (commands.length > 0) {
-    const whatsNext = stripIndent`
-      After you update your package.json, there’s ${
-        commands.length > 1 ? 'a few more steps' : 'one more step'
-      } you’ll need to take
-      in order to start building:
-    `;
+    if (repository == null) {
+      needsPackageJsonKeys.push('repository.url');
+    }
 
     console.log();
-    console.log(whatsNext);
-    console.log();
-    console.log(commands.map((command) => `  ${command}`).join('\n'));
+
+    if (needsPackageJsonKeys.length > 0) {
+      console.log(
+        stripIndent`
+          Before you publish your package, you will need to add the ${needsPackageJsonKeys
+            .map((key) => color.bold(JSON.stringify(key)))
+            .join(' and ')} key${needsPackageJsonKeys.length > 1 ? 's' : ''}
+          to ${color.cyan(
+            relativeDirectoryForDisplay(
+              path.relative(
+                process.cwd(),
+                path.join(packageDirectory, 'package.json'),
+              ),
+            ),
+          )}. In that same file, make sure the contents of the
+          ${color.bold('"version"')}, ${color.bold(
+          '"exports"',
+        )}, and ${color.bold('"license"')} fields are correct for your package.
+        `,
+      );
+    } else {
+      console.log(
+        stripIndent`
+          Before you publish your package, make sure the content of the
+          ${color.bold('"version"')}, ${color.bold(
+          'exports',
+        )}, and ${color.bold('license')} fields in
+        ${color.cyan(
+          relativeDirectoryForDisplay(
+            path.relative(
+              process.cwd(),
+              path.join(packageDirectory, 'package.json'),
+            ),
+          ),
+        )} are correct for your package.
+        `,
+      );
+    }
   }
 
   const followUp = stripIndent`
@@ -357,6 +378,10 @@ function getArguments() {
       '-y': '--yes',
       '--name': String,
       '--directory': String,
+      '--description': String,
+      '--no-description': Boolean,
+      '--repository': String,
+      '--no-repository': Boolean,
       '--install': Boolean,
       '--no-install': Boolean,
       '--monorepo': Boolean,
@@ -443,6 +468,38 @@ async function getDirectory(
   return directory;
 }
 
+async function getDescription(args: Arguments) {
+  if (args['--description']) return args['--description'];
+  if (args['--no-description']) return false;
+
+  const description = await prompt({
+    type: 'text',
+    message: 'What is a short description of what this package will do?',
+  });
+
+  return description;
+}
+
+async function getRepository(args: Arguments, {inWorkspace = false} = {}) {
+  if (args['--repository']) return args['--repository'];
+  if (args['--no-repository']) return false;
+
+  if (!inWorkspace) return;
+
+  const {globby} = await import('globby');
+
+  const files = await globby('**/package.json', {ignore: ['**/node_modules']});
+
+  for (const file of files) {
+    try {
+      const json = JSON.parse(await fs.promises.readFile(file, 'utf8'));
+      if (json.repository) return json.repository as string | {url: string};
+    } catch {
+      // noop
+    }
+  }
+}
+
 async function getPublic(args: Arguments) {
   let isPublic: boolean;
 
@@ -483,10 +540,17 @@ function adjustPackageJson(
   packageJson: Record<string, any>,
   {
     name,
+    description,
     react,
     isPublic,
     registry,
-  }: {name: string; react: boolean; isPublic: boolean; registry?: string},
+  }: {
+    name: string;
+    description: string | false;
+    react: boolean;
+    isPublic: boolean;
+    registry?: string;
+  },
 ) {
   packageJson.name = name;
 
@@ -494,6 +558,12 @@ function adjustPackageJson(
   const scope = packageParts[0]!.startsWith('@') ? packageParts[0] : undefined;
   const finalRegistry = registry ?? 'https://registry.npmjs.org';
 
+  if (description) {
+    packageJson.description = description;
+  } else {
+    delete packageJson.description;
+  }
+
   if (scope) {
     packageJson.publishConfig[`${scope}/registry`] = finalRegistry;
   } else if (registry) {
@@ -502,6 +572,8 @@ function adjustPackageJson(
 
   if (isPublic) {
     delete packageJson.private;
+    delete packageJson.license;
+    delete packageJson.repository;
   } else {
     delete packageJson.publishConfig;
   }

package/source/shared/prompts.ts

@@ -1,3 +1,5 @@
+import * as fs from 'fs';
+
 import type {Result as ArgvResult} from 'arg';
 import * as color from 'colorette';
 import {
@@ -12,6 +14,8 @@ type BaseArguments = ArgvResult<{
   '--no-install': BooleanConstructor;
   '--monorepo': BooleanConstructor;
   '--no-monorepo': BooleanConstructor;
+  '--in-workspace': BooleanConstructor;
+  '--not-in-workspace': BooleanConstructor;
   '--extras': [StringConstructor];
   '--no-extras': BooleanConstructor;
   '--package-manager': StringConstructor;
@@ -19,7 +23,17 @@ type BaseArguments = ArgvResult<{
 
 export {prompt};
 
-export async function getCreateAsMonorepo(argv: BaseArguments) {
+export async function getInWorkspace(argv: BaseArguments) {
+  if (argv['--in-workspace']) return true;
+  if (argv['--not-in-workspace']) return false;
+
+  return fs.existsSync('quilt.workspace.ts');
+}
+
+export async function getCreateAsMonorepo(
+  argv: BaseArguments,
+  {type}: {type: 'app' | 'package'},
+) {
   let createAsMonorepo: boolean;
 
   if (argv['--monorepo' || argv['--yes']]) {
@@ -29,8 +43,7 @@ export async function getCreateAsMonorepo(argv: BaseArguments) {
   } else {
     createAsMonorepo = await prompt({
       type: 'confirm',
-      message:
-        'Do you want to create this app as a monorepo, with room for more projects?',
+      message: `Do you want to create this ${type} as a monorepo, with room for more projects?`,
       initial: true,
     });
   }
@@ -38,7 +51,10 @@ export async function getCreateAsMonorepo(argv: BaseArguments) {
   return createAsMonorepo;
 }
 
-export async function getShouldInstall(argv: BaseArguments) {
+export async function getShouldInstall(
+  argv: BaseArguments,
+  {type}: {type: 'app' | 'package'},
+) {
   let shouldInstall: boolean;
 
   if (argv['--install'] || argv['--yes']) {
@@ -48,8 +64,7 @@ export async function getShouldInstall(argv: BaseArguments) {
   } else {
     shouldInstall = await prompt({
       type: 'confirm',
-      message:
-        'Do you want to install dependencies for this app after creating it?',
+      message: `Do you want to install dependencies for this ${type} after creating it?`,
       initial: true,
     });
   }

package/source/shared.ts

@@ -152,13 +152,20 @@ export async function format(
   content: string,
   {as: parser}: {as: BuiltInParserName},
 ) {
-  const [{format}, {default: babel}, {default: typescript}, {default: yaml}] =
-    await Promise.all([
-      import('prettier/standalone'),
-      import('prettier/parser-babel'),
-      import('prettier/parser-typescript'),
-      import('prettier/parser-yaml'),
-    ]);
+  const [
+    {format: rootFormat, default: prettier},
+    {default: babel},
+    {default: typescript},
+    {default: yaml},
+  ] = await Promise.all([
+    import('prettier/standalone'),
+    import('prettier/parser-babel'),
+    import('prettier/parser-typescript'),
+    import('prettier/parser-yaml'),
+  ]);
+
+  // CJS workaround
+  const format = rootFormat ?? prettier.format;
 
   return format(content, {
     arrowParens: 'always',
@@ -185,3 +192,58 @@ export function mergeDependencies(
 
   return merged;
 }
+
+const PACKAGE_JSON_DEPENDENCY_KEYS = new Set([
+  'dependencies',
+  'devDependencies',
+  'peerDependencies',
+  'peerDependenciesMeta',
+]);
+
+// Merges a project and workspace package.json together, with the following nitpicky preferences:
+//
+// - Take all the project’s fields in the order they appear by default
+// - Merge the relevant dependencies together
+// - Projects don’t come with `scripts` by default, but that should go before the first dependency list
+// - If there are other keys in the workspace package.json, they should go last, in the order they appeared
+export function mergeWorkspaceAndProjectPackageJsons(
+  projectPackageJson: Record<string, unknown>,
+  workspacePackageJson: Record<string, unknown>,
+) {
+  const newPackageJson: Record<string, unknown> = {};
+  const seenKeys = new Set<string>();
+  let hasHandledScriptsField =
+    workspacePackageJson.scripts != null && projectPackageJson.scripts == null;
+
+  for (const [key, value] of Object.entries(projectPackageJson)) {
+    seenKeys.add(key);
+
+    const isDependencyKey = PACKAGE_JSON_DEPENDENCY_KEYS.has(key);
+
+    if (key === 'scripts' || (isDependencyKey && !hasHandledScriptsField)) {
+      newPackageJson.scripts = {
+        ...(workspacePackageJson.scripts as any),
+        ...(projectPackageJson.scripts as any),
+      };
+      hasHandledScriptsField = true;
+    }
+
+    if (isDependencyKey) {
+      newPackageJson[key] = mergeDependencies(
+        value as any,
+        workspacePackageJson[key] as any,
+      );
+    } else {
+      newPackageJson[key] = value;
+    }
+  }
+
+  for (const [key, value] of Object.entries(workspacePackageJson)) {
+    if (seenKeys.has(key)) continue;
+    // Merged workspace + project package.json means we are not in a monorepo
+    if (key === 'workspaces') continue;
+    newPackageJson[key] = value;
+  }
+
+  return newPackageJson;
+}

package/templates/app-basic/server.tsx

@@ -5,15 +5,19 @@ import {
 } from '@quilted/quilt/server';
 import createAssetManifest from '@quilted/quilt/magic/app/asset-manifest';
 
-import App from './App';
-
 const router = createRequestRouter();
 
 // For all GET requests, render our React application.
 router.get(
-  createServerRenderingRequestHandler(() => <App />, {
-    assets: createAssetManifest(),
-  }),
+  createServerRenderingRequestHandler(
+    async () => {
+      const {default: App} = await import('./App');
+      return <App />;
+    },
+    {
+      assets: createAssetManifest(),
+    },
+  ),
 );
 
 export default router;

package/templates/package/quilt.project.ts

@@ -1,5 +1,5 @@
 import {createProject, quiltPackage} from '@quilted/craft';
 
 export default createProject((project) => {
-  project.use(quiltPackage({react: false}));
+  project.use(quiltPackage());
 });

package/templates/workspace/package.json

@@ -10,6 +10,10 @@
     "develop": "quilt develop",
     "build": "quilt build"
   },
+  "workspaces": [
+    "./app",
+    "./packages/*"
+  ],
   "devDependencies": {
     "@quilted/browserslist-config": "^0.1.0",
     "@quilted/craft": "^0.1.0",