@quilted/create 0.1.36 → 0.1.38

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',
         }),
       );
@@ -211,23 +224,48 @@ export async function createProject() {
       return partOfMonorepo;
     }
 
-    // We need to make some adjustments the project’s package.json and Quilt config
-    return file !== 'package.json' && file !== 'quilt.project.ts';
+    // We need to make some adjustments the project’s package.json, README, and Quilt config
+    return (
+      file !== 'package.json' &&
+      file !== 'quilt.project.ts' &&
+      file !== 'README.md'
+    );
   });
 
+  await outputRoot.write(
+    path.join(packageDirectory, 'package.json'),
+    (
+      await packageTemplate.read('README.md')
+    ).replaceAll('{{name}}', toValidPackageName(name!)),
+  );
+
   if (partOfMonorepo) {
     // Write the package’s package.json (the root one was already created)
     const projectPackageJson = JSON.parse(
       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 +294,112 @@ export async function createProject() {
   }
 
   if (shouldInstall) {
-    process.stdout.write('\nInstalling dependencies...\n');
+    console.log();
     // 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(
-      relativeDirectoryForDisplay(
-        path.relative(
-          process.cwd(),
-          path.join(packageDirectory, 'package.json'),
+  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, '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
+  if (isPublic) {
+    const needsPackageJsonKeys: {field: string; url: string}[] = [];
 
-    Before you publish your package, you will also want to update the ${color.bold(
-      `"version"`,
-    )}
-    field in the package.json file.
-  `;
+    if (!description) {
+      needsPackageJsonKeys.push({
+        field: 'description',
+        url: 'https://docs.npmjs.com/cli/v9/configuring-npm/package-json#description',
+      });
+    }
 
-  console.log();
-  console.log(packageJsonInstructions);
+    if (repository == null) {
+      needsPackageJsonKeys.push({
+        field: 'repository.url',
+        url: 'https://docs.npmjs.com/cli/v9/configuring-npm/package-json#repository',
+      });
+    }
 
-  const commands: string[] = [];
+    console.log();
 
-  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')}`,
-    );
-  }
+    const logPackageJsonField = (field: string, url: string) => {
+      console.log(
+        `  ${color.bold(JSON.stringify(field))} ${color.dim(
+          `(${color.underline(url)})`,
+        )}`,
+      );
+    };
+
+    if (needsPackageJsonKeys.length > 0) {
+      console.log(
+        stripIndent`
+          Before you publish your package, you will need to add the following key${
+            needsPackageJsonKeys.length > 1 ? 's' : ''
+          }
+          to ${color.cyan(
+            relativeDirectoryForDisplay(
+              path.relative(
+                process.cwd(),
+                path.join(packageDirectory, 'package.json'),
+              ),
+            ),
+          )}:
+        `,
+      );
 
-  if (!shouldInstall) {
-    commands.push(
-      `${packageManager.commands.install()} ${color.dim(
-        '# Install all your dependencies',
-      )}`,
-    );
-  }
+      console.log();
 
-  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)',
-      )}`,
-    );
-  }
+      for (const {field, url} of needsPackageJsonKeys) {
+        logPackageJsonField(field, url);
+      }
 
-  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:
-    `;
+      console.log();
 
-    console.log();
-    console.log(whatsNext);
-    console.log();
-    console.log(commands.map((command) => `  ${command}`).join('\n'));
+      console.log(
+        'In that same file, make sure the contents of these fields are right for your package:',
+      );
+
+      console.log();
+    } else {
+      console.log(
+        stripIndent`
+          Before you publish your package, make the following fields look right
+          in ${color.cyan(
+            relativeDirectoryForDisplay(
+              path.relative(
+                process.cwd(),
+                path.join(packageDirectory, 'package.json'),
+              ),
+            ),
+          )}:
+        `,
+      );
+
+      console.log();
+    }
+
+    logPackageJsonField(
+      'version',
+      'https://docs.npmjs.com/cli/v9/configuring-npm/package-json#version',
+    );
+    logPackageJsonField(
+      'license',
+      'https://docs.npmjs.com/cli/v9/configuring-npm/package-json#license',
+    );
+    logPackageJsonField(
+      'exports',
+      'https://nodejs.org/api/packages.html#package-entry-points',
+    );
   }
 
   const followUp = stripIndent`
@@ -357,6 +427,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 +517,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 +589,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 +607,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) {
@@ -503,7 +622,26 @@ function adjustPackageJson(
   if (isPublic) {
     delete packageJson.private;
   } else {
+    delete packageJson.license;
+    delete packageJson.repository;
     delete packageJson.publishConfig;
+
+    // in private packages, we just need to reference the source.
+    const newExports: Record<string, string> = {};
+
+    for (const [key, value] of Object.entries(packageJson.exports)) {
+      if (typeof value === 'string') {
+        newExports[key] = value;
+      }
+
+      const sourceEntry = (value as any)?.['quilt:source'];
+
+      if (typeof sourceEntry === 'string') {
+        newExports[key] = sourceEntry;
+      }
+    }
+
+    packageJson.exports = newExports;
   }
 
   if (!react) {

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,57 @@ 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 = false;
+
+  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/package/README.md

@@ -1 +1 @@
-# Package
+# `{{name}}`

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/_nvmrc

@@ -1 +1 @@
-v16.15.0
+18.13.0

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",