@quilted/create 0.1.13 → 0.1.16

package/source/shared/tsconfig.ts

@@ -0,0 +1,90 @@
+import {relative} from 'path';
+
+import type {OutputTarget} from '../shared';
+import {format, relativeDirectoryForDisplay} from '../shared';
+
+interface TSConfigReference {
+  path: string;
+}
+
+const ENDS_WITH_TSCONFIG = /[/]?tsconfig[.a-z0-9]*[.]json/i;
+
+export async function addToTsConfig(directory: string, output: OutputTarget) {
+  const tsconfig = JSON.parse(await output.read('tsconfig.json'));
+
+  tsconfig.references ??= [];
+
+  const relativePath = relative(output.root, directory);
+  const relativeForDisplay = relativeDirectoryForDisplay(relativePath);
+
+  if (tsconfig.references.length === 0) {
+    tsconfig.references.push({path: relativeForDisplay});
+  } else {
+    let hasExistingReference = false;
+    let referenceFormat:
+      | 'relative'
+      | 'pretty-relative'
+      | 'tsconfig'
+      | 'pretty-tsconfig' = 'pretty-relative';
+
+    for (const {path} of tsconfig.references as TSConfigReference[]) {
+      if (path.startsWith('./')) {
+        if (ENDS_WITH_TSCONFIG.test(path)) {
+          referenceFormat = 'pretty-tsconfig';
+
+          if (path === `${relativeForDisplay}/tsconfig.json`) {
+            hasExistingReference = true;
+            break;
+          }
+        }
+
+        referenceFormat = 'pretty-relative';
+
+        if (path === relativeForDisplay) {
+          hasExistingReference = true;
+          break;
+        }
+      } else if (ENDS_WITH_TSCONFIG.test(path)) {
+        referenceFormat = 'tsconfig';
+
+        if (path === `${relativePath}/tsconfig.json`) {
+          hasExistingReference = true;
+          break;
+        }
+      } else {
+        referenceFormat = 'relative';
+
+        if (path === relativePath) {
+          hasExistingReference = true;
+          break;
+        }
+      }
+    }
+
+    if (!hasExistingReference) {
+      let path: string;
+
+      if (referenceFormat === 'pretty-tsconfig') {
+        path = `${relativeForDisplay}/tsconfig.json`;
+      } else if (referenceFormat === 'pretty-relative') {
+        path = relativeForDisplay;
+      } else if (referenceFormat === 'tsconfig') {
+        path = `${relativePath}/tsconfig.json`;
+      } else {
+        path = relativePath;
+      }
+
+      tsconfig.references.push({path});
+    }
+  }
+
+  tsconfig.references = tsconfig.references.sort(
+    ({path: pathOne}: TSConfigReference, {path: pathTwo}: TSConfigReference) =>
+      pathOne.localeCompare(pathTwo),
+  );
+
+  await output.write(
+    'tsconfig.json',
+    await format(JSON.stringify(tsconfig), {as: 'json'}),
+  );
+}

package/source/shared.ts

@@ -0,0 +1,170 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import {fileURLToPath} from 'url';
+import type {BuiltInParserName} from 'prettier';
+
+export {prompt} from './shared/prompts';
+
+export function loadTemplate(
+  name:
+    | 'package'
+    | 'app-basic'
+    | 'app-single-file'
+    | 'workspace'
+    | 'github'
+    | 'vscode',
+) {
+  let templateRootPromise: Promise<string> | undefined;
+
+  return {
+    async copy(to: string, handleFile?: (file: string) => boolean) {
+      templateRootPromise ??= templateDirectory(name);
+      const templateRoot = await templateRootPromise;
+      const targetRoot = path.resolve(to);
+
+      const files = fs
+        .readdirSync(templateRoot)
+        .filter((file) => !path.basename(file).startsWith('.'));
+
+      for (const file of files) {
+        if (handleFile) {
+          if (!handleFile(file)) {
+            continue;
+          }
+        }
+
+        const targetPath = path.join(
+          targetRoot,
+          file.startsWith('_') ? `.${file.slice(1)}` : file,
+        );
+
+        copy(path.join(templateRoot, file), targetPath);
+      }
+    },
+    async read(file: string) {
+      templateRootPromise ??= templateDirectory(name);
+      const templateRoot = await templateRootPromise;
+
+      return fs.readFileSync(path.join(templateRoot, file), {encoding: 'utf8'});
+    },
+  };
+}
+
+export interface OutputTarget {
+  readonly root: string;
+  read(file: string): Promise<string>;
+  write(file: string, content: string): Promise<void>;
+}
+
+export function createOutputTarget(target: string): OutputTarget {
+  return {
+    root: target,
+    read(file: string) {
+      return fs.promises.readFile(path.resolve(target, file), {
+        encoding: 'utf8',
+      });
+    },
+    async write(file: string, content: string) {
+      await writeFile(path.resolve(target, file), content);
+    },
+  };
+}
+
+let packageRootPromise: Promise<string> | undefined;
+
+async function templateDirectory(
+  name:
+    | 'package'
+    | 'app-basic'
+    | 'app-single-file'
+    | 'workspace'
+    | 'github'
+    | 'vscode',
+) {
+  return path.join(await getPackageRoot(), 'templates', name);
+}
+
+async function getPackageRoot(): Promise<string> {
+  if (!packageRootPromise) {
+    packageRootPromise = (async () => {
+      const {packageDirectory} = await import('pkg-dir');
+
+      return packageDirectory({
+        cwd: path.dirname(fileURLToPath(import.meta.url)),
+      });
+    })();
+  }
+
+  return packageRootPromise;
+}
+
+export function toValidPackageName(projectName: string) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9-~@/]+/g, '-');
+}
+
+function copy(source: string, destination: string) {
+  const stat = fs.statSync(source);
+  if (stat.isDirectory()) {
+    copyDirectory(source, destination);
+  } else {
+    fs.copyFileSync(source, destination);
+  }
+}
+
+async function copyDirectory(source: string, destination: string) {
+  fs.mkdirSync(destination, {recursive: true});
+  for (const file of fs.readdirSync(source)) {
+    const srcFile = path.resolve(source, file);
+    const destFile = path.resolve(destination, file);
+    copy(srcFile, destFile);
+  }
+}
+
+export async function writeFile(file: string, content: string) {
+  await fs.promises.writeFile(file, content);
+}
+
+export async function isEmpty(path: string) {
+  return fs.readdirSync(path).length === 0;
+}
+
+export async function emptyDirectory(dir: string) {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+
+  for (const file of fs.readdirSync(dir)) {
+    fs.rmSync(path.resolve(dir, file), {force: true, recursive: true});
+  }
+}
+
+export function relativeDirectoryForDisplay(relativeDirectory: string) {
+  return relativeDirectory.startsWith('.')
+    ? relativeDirectory
+    : `.${path.sep}${relativeDirectory}`;
+}
+
+export async function format(
+  content: string,
+  {as: parser}: {as: BuiltInParserName},
+) {
+  const [{format}, {default: babel}, {default: yaml}] = await Promise.all([
+    import('prettier/standalone'),
+    import('prettier/parser-babel'),
+    import('prettier/parser-yaml'),
+  ]);
+
+  return format(content, {
+    arrowParens: 'always',
+    bracketSpacing: false,
+    singleQuote: true,
+    trailingComma: 'all',
+    parser,
+    plugins: [babel, yaml],
+  });
+}

package/templates/{app → app-basic}/App.tsx

@@ -5,9 +5,8 @@ import {Head} from './foundation/Head';
 
 import {Start} from './features/Start';
 
-/**
- * The root component for your application.
- */
+// The root component for your application. You will typically render any
+// app-wide context in this component.
 export default function App() {
   return (
     <AppContext>
@@ -20,10 +19,8 @@ export default function App() {
   );
 }
 
-/**
- * This component renders the routes for your application. If you have a lot
- * of routes, you may want to split this component into its own file.
- */
+// This component renders the routes for your application. If you have a lot
+// of routes, you may want to split this component into its own file.
 function Routes() {
   return useRoutes([{match: '/', render: () => <Start />}]);
 }

package/templates/{app → app-basic}/features/Start/Start.tsx

@@ -1,5 +1,5 @@
 import styles from './Start.module.css';
 
 export function Start() {
-  return <div className={styles.Start}>Hello world!!!</div>;
+  return <div className={styles.Start}>Hello world!</div>;
 }

package/templates/{app → app-basic}/foundation/Head.tsx

@@ -1,26 +1,26 @@
 import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
 
+// This component sets details of the HTML page. If you need to customize
+// any of these details based on conditions like the active route, or some
+// state about the user, you can move these components to wherever in your
+// application you can read that state.
 export function Head() {
   return (
     <>
-      {/**
-       * Sets the default `<title>` for this application.
-       */}
+      {/* Sets the default `<title>` for this application. */}
       <Title>App</Title>
 
-      {/**
+      {/*
        * Sets the default favicon used by the application. You can
        * change this to a different emoji, make it `blank`, or pass
        * a URL with the `source` prop.
        */}
       <Favicon emoji="🧶" />
 
-      {/**
-       * Adds a responsive-friendly `viewport` `<meta>` tag.
-       */}
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
       <Viewport cover />
 
-      {/**
+      {/*
        * Disables all search indexing for this application. If you are
        * building an unauthenticated app, you probably want to remove
        * this component, or update it to control how your site is indexed

package/templates/{app → app-basic}/foundation/Http.tsx

@@ -8,12 +8,16 @@ import {
   StrictTransportSecurity,
 } from '@quilted/quilt/http';
 
+// This component sets details on the HTTP response for all HTML server-rendering
+// requests. If you need to customize any of these details based on conditions like
+// the active route, or some state about the user, you can move these components to
+// wherever in your application you can read that state.
 export function Http() {
   const isHttps = useCurrentUrl().protocol === 'https:';
 
   return (
     <>
-      {/**
+      {/*
        * Disables the cache for this page, which is generally the best option
        * when dealing with authenticated content. If your site doesn’t have
        * authentication, or you have a better cache policy that works for your
@@ -23,7 +27,7 @@ export function Http() {
        */}
       <CacheControl cache={false} />
 
-      {/**
+      {/*
        * Sets a strict content security policy for this page. If you load
        * assets from other origins, or want to allow some more dangerous
        * resource loading techniques like `eval`, you can change the
@@ -50,7 +54,7 @@ export function Http() {
         upgradeInsecureRequests={isHttps}
       />
 
-      {/**
+      {/*
        * Sets a strict permissions policy for this page, which limits access
        * to some native browser features.
        *
@@ -73,7 +77,7 @@ export function Http() {
         geolocation={false}
       />
 
-      {/**
+      {/*
        * Instructs browsers to only load this page over HTTPS using the
        * `Strict-Transport-Security` header.
        *
@@ -81,7 +85,7 @@ export function Http() {
        */}
       {isHttps && <StrictTransportSecurity />}
 
-      {/**
+      {/*
        * Controls how much information about the current page is included in
        * requests (through the `Referer` header). The default value
        * (strict-origin-when-cross-origin) means that only the origin is included
@@ -95,7 +99,7 @@ export function Http() {
         value="strict-origin-when-cross-origin"
       />
 
-      {/**
+      {/*
        * Instructs browsers to respect the MIME type in the `Content-Type` header.
        *
        * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options

package/templates/{app → app-basic}/package.json

@@ -1,9 +1,18 @@
 {
-  "name": "template-app",
+  "name": "template-app-basic",
   "type": "module",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "start": "node ./build/server/index.js"
+  },
   "dependencies": {},
+  "devDependencies": {
+    "@quilted/quilt": "^0.5.0",
+    "@types/react": "^17.0.0",
+    "react": "npm:@quilted/react@^17.0.0",
+    "react-dom": "npm:@quilted/react-dom@^17.0.0"
+  },
   "eslintConfig": {
     "extends": "@quilted/eslint-config/app"
   },

package/templates/app-single-file/App.tsx

@@ -0,0 +1,168 @@
+import {Router, useRoutes, useCurrentUrl, AppContext} from '@quilted/quilt';
+import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
+import {
+  CacheControl,
+  ResponseHeader,
+  ContentSecurityPolicy,
+  PermissionsPolicy,
+  StrictTransportSecurity,
+} from '@quilted/quilt/http';
+import Env from '@quilted/quilt/env';
+
+// The root component for your application. You will typically render any
+// app-wide context in this component.
+export default function App() {
+  return (
+    <AppContext>
+      <Router>
+        <Http />
+        <Head />
+        <Routes />
+      </Router>
+    </AppContext>
+  );
+}
+
+// This component renders the routes for your application. If you have a lot
+// of routes, you may want to split this component into its own file.
+function Routes() {
+  return useRoutes([{match: '/', render: () => <Start />}]);
+}
+
+// This component will be rendered for the root URL of your application. Feel
+// free to edit it, rename it, remove it entirely, or move it to a dedicated file.
+function Start() {
+  return <div>Hello world!</div>;
+}
+
+// This component sets details of the HTML page. If you need to customize
+// any of these details based on conditions like the active route, or some
+// state about the user, you can move these components to wherever in your
+// application you can read that state.
+function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}
+
+// This component sets details on the HTTP response for all HTML server-rendering
+// requests. If you need to customize any of these details based on conditions like
+// the active route, or some state about the user, you can move these components to
+// wherever in your application you can read that state.
+export function Http() {
+  const isHttps = useCurrentUrl().protocol === 'https:';
+
+  return (
+    <>
+      {/*
+       * Disables the cache for this page, which is generally the best option
+       * when dealing with authenticated content. If your site doesn’t have
+       * authentication, or you have a better cache policy that works for your
+       * app or deployment, make sure to update this component accordingly!
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+       */}
+      <CacheControl cache={false} />
+
+      {/*
+       * Sets a strict content security policy for this page. If you load
+       * assets from other origins, or want to allow some more dangerous
+       * resource loading techniques like `eval`, you can change the
+       * `defaultSources` to be less restrictive, or add additional items
+       * to the allowlist for more specific directives.
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+       */}
+      <ContentSecurityPolicy
+        reportOnly={Env.MODE === 'development'}
+        // By default, only allow sources from the page’s origin.
+        defaultSources={["'self'"]}
+        // Includes `'unsafe-inline'` because CSS is often necessary in development,
+        // and can be difficult to avoid in production.
+        styleSources={["'self'", "'unsafe-inline'"]}
+        // Includes `data:` so that an inline image can be used for the favicon.
+        // If you do not use the `emoji` or `blank` favicons in your app, and you
+        // do not load any other images as data URIs, you can remove this directive.
+        imageSources={["'self'", 'data:']}
+        // Don’t allow this page to be rendered as a frame from a different origin.
+        frameAncestors={false}
+        // Ensure that all requests made by this page are made over https, unless
+        // it is being served over http (typically, during local development)
+        upgradeInsecureRequests={isHttps}
+      />
+
+      {/*
+       * Sets a strict permissions policy for this page, which limits access
+       * to some native browser features.
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
+       */}
+      <PermissionsPolicy
+        // Disables Google’s Federated Learning of Cohorts (“FLoC”) tracking initiative.
+        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
+        interestCohort={false}
+        // Don’t use synchronous XHRs!
+        // @see https://featurepolicy.info/policies/sync-xhr
+        syncXhr={false}
+        // Disables access to a few device APIs that are infrequently used
+        // and prone to abuse. If your application uses these APIs intentionally,
+        // feel free to remove the prop, or pass an array containing the origins
+        // that should be allowed to use this feature (e.g., `['self']` to allow
+        // only the main page’s origin).
+        camera={false}
+        microphone={false}
+        geolocation={false}
+      />
+
+      {/*
+       * Instructs browsers to only load this page over HTTPS using the
+       * `Strict-Transport-Security` header.
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
+       */}
+      {isHttps && <StrictTransportSecurity />}
+
+      {/*
+       * Controls how much information about the current page is included in
+       * requests (through the `Referer` header). The default value
+       * (strict-origin-when-cross-origin) means that only the origin is included
+       * for cross-origin requests, while the origin, path, and querystring
+       * are included for same-origin requests.
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
+       */}
+      <ResponseHeader
+        name="Referrer-Policy"
+        value="strict-origin-when-cross-origin"
+      />
+
+      {/*
+       * Instructs browsers to respect the MIME type in the `Content-Type` header.
+       *
+       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
+       */}
+      <ResponseHeader name="X-Content-Type-Options" value="nosniff" />
+    </>
+  );
+}

package/templates/app-single-file/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "template-app-single-file",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./build/server/index.js"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@quilted/quilt": "^0.5.0",
+    "@types/react": "^17.0.0",
+    "react": "npm:@quilted/react@^17.0.0",
+    "react-dom": "npm:@quilted/react-dom@^17.0.0"
+  },
+  "eslintConfig": {
+    "extends": "@quilted/eslint-config/app"
+  },
+  "browserslist": {
+    "defaults": [
+      "extends @quilted/browserslist-config/defaults"
+    ],
+    "modules": [
+      "extends @quilted/browserslist-config/modules"
+    ],
+    "evergreen": [
+      "extends @quilted/browserslist-config/evergreen"
+    ]
+  }
+}

package/templates/app-single-file/quilt.project.ts

@@ -0,0 +1,6 @@
+import {createApp, quiltApp} from '@quilted/craft';
+
+export default createApp((app) => {
+  app.entry('./App');
+  app.use(quiltApp());
+});

package/templates/app-single-file/tsconfig.json

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