@quilted/create 0.1.50 → 0.1.52

package/build/typescript/shared.d.ts

@@ -1,6 +1,6 @@
 import type { BuiltInParserName } from 'prettier';
 export { prompt } from '@quilted/cli-kit';
-export declare function loadTemplate(name: 'package' | 'app-basic' | 'app-single-file' | 'app-empty' | 'app-graphql' | 'workspace' | 'github' | 'vscode'): {
+export declare function loadTemplate(name: 'package' | 'app-basic' | 'app-single-file' | 'app-empty' | 'app-graphql' | 'module' | 'workspace' | 'github' | 'vscode'): {
     copy(to: string, handleFile?: ((file: string) => boolean) | undefined): Promise<void>;
     read(file: string): Promise<string>;
 };

package/build/typescript/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../source/shared.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAChD,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AAExC,wBAAgB,YAAY,CAC1B,IAAI,EACA,SAAS,GACT,WAAW,GACX,iBAAiB,GACjB,WAAW,GACX,aAAa,GACb,WAAW,GACX,QAAQ,GACR,QAAQ;aAKK,MAAM,uBAAsB,MAAM,KAAK,OAAO;eAwB5C,MAAM;EAO1B;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAY/D;AAgCD,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,UAOrD;AAoBD,wBAAsB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,iBAE5D;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,MAAM,oBAEzC;AAED,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,iBAQ/C;AAED,wBAAgB,2BAA2B,CAAC,iBAAiB,EAAE,MAAM,UAIpE;AAED,wBAAsB,MAAM,CAC1B,OAAO,EAAE,MAAM,EACf,EAAC,EAAE,EAAE,MAAM,EAAC,EAAE;IAAC,EAAE,EAAE,iBAAiB,CAAA;CAAC,mBAyBtC;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EAClC,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,0BAYpC;AAeD,wBAAgB,oCAAoC,CAClD,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3C,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2BAsC9C"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../source/shared.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAChD,OAAO,EAAC,MAAM,EAAC,MAAM,kBAAkB,CAAC;AAExC,wBAAgB,YAAY,CAC1B,IAAI,EACA,SAAS,GACT,WAAW,GACX,iBAAiB,GACjB,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,QAAQ;aAKK,MAAM,uBAAsB,MAAM,KAAK,OAAO;eAwB5C,MAAM;EAO1B;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACpC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAY/D;AAiCD,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,UAOrD;AAoBD,wBAAsB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,iBAE5D;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,MAAM,oBAEzC;AAED,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,iBAQ/C;AAED,wBAAgB,2BAA2B,CAAC,iBAAiB,EAAE,MAAM,UAIpE;AAED,wBAAsB,MAAM,CAC1B,OAAO,EAAE,MAAM,EACf,EAAC,EAAE,EAAE,MAAM,EAAC,EAAE;IAAC,EAAE,EAAE,iBAAiB,CAAA;CAAC,mBAyBtC;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EAClC,MAAM,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,0BAYpC;AAeD,wBAAgB,oCAAoC,CAClD,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3C,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,2BAsC9C"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.1.50",
+  "version": "0.1.52",
   "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,426 @@
+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 entry = await getEntry(argv, {name});
+
+  const useReact = await getReact(argv);
+
+  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,
+      '--entry': 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 getEntry(argv: Arguments, {name}: {name: string}) {
+  if (argv['--entry']) {
+    return argv['--entry'];
+  }
+
+  const entry = await prompt({
+    type: 'text',
+    message: 'What do you want to name your entry file?',
+    initial: `${toValidPackageName(name)}.ts`,
+  });
+
+  return entry;
+}
+
+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/module/module.ts

@@ -0,0 +1,3 @@
+// Replace this module with whatever you want to run in a browser!
+
+export {};

package/templates/module/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "template-module",
+  "type": "module",
+  "main": "./module.ts",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "preact": "^10.11.0",
+    "react": "npm:@quilted/react@^18.2.0",
+    "react-dom": "npm:@quilted/react-dom@^18.2.0"
+  },
+  "browserslist": [
+    "extends @quilted/browserslist-config/modules"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "@quilted/eslint-config/project",
+      "@quilted/eslint-config/react"
+    ]
+  }
+}

package/templates/module/quilt.project.ts

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

package/templates/module/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@quilted/typescript/project.json",
+  "compilerOptions": {
+    "outDir": "build/typescript"
+  },
+  "include": ["**/*"],
+  "exclude": ["build"],
+  "references": []
+}