sku 12.5.0 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # sku
 
+## 12.6.0
+
+### Minor Changes
+
+- Add support for [removing assertion functions][assertion removal docs] named `invariant` and assertions from the `tiny-invariant` library, a lightweight alternative to `assert` ([#966](https://github.com/seek-oss/sku/pull/966))
+
+  **EXAMPLE USAGE**:
+
+  ```tsx
+  import React from 'react';
+  import invariant from 'tiny-invariant';
+
+  export const Rating = ({ rating }: { rating: number }) => {
+    invariant(rating >= 0 && rating <= 5, 'Rating must be between 0 and 5');
+
+    return <div>...</div>;
+  };
+  ```
+
+  [assertion removal docs]: https://seek-oss.github.io/sku/#/./docs/extra-features?id=assertion-removal
+
+## 12.5.1
+
+### Patch Changes
+
+- Remove `rimraf` dependency in favour of Node.js's `rm` ([#961](https://github.com/seek-oss/sku/pull/961))
+
+- Unpin and bump `@pmmmwh/react-refresh-webpack-plugin` ([#959](https://github.com/seek-oss/sku/pull/959))
+
+- Ensure all sku-generated gitignored files are present in `.prettierignore` and `.eslintignore` too ([#957](https://github.com/seek-oss/sku/pull/957))
+
+  Consumers should notice a few new files being added to the sku-managed sections within `.prettierignore` and `.eslintignore` the next time a `sku` command is run:
+
+  ```diff
+  # managed by sku
+  *.less.d.ts
+  +.eslintcache
+  +.eslintrc
+  +.prettierrc
+  .storybook/main.js
+  coverage/
+  dist-storybook/
+  dist/
+  report/
+  # end managed by sku
+  ```
+
+  These changes should be committed to your repo.
+
+- Disable peer dependency validation for PNPM ([#952](https://github.com/seek-oss/sku/pull/952))
+
+  The method we currently use to validate peer dependencies and warn users about duplicate package is not compatible with how PNPM organizes dependencies in `node_modules`. This feature has been disabled for PNPM repos until further notice.
+
+- Replace `memoizee` dependency with `nano-memoize` ([#953](https://github.com/seek-oss/sku/pull/953))
+
+- Replace `fast-glob` with `fdir` and `picomatch` ([#952](https://github.com/seek-oss/sku/pull/952))
+
+- Replace `validate-npm-package-name` dependency with a regexp ([#954](https://github.com/seek-oss/sku/pull/954))
+
+- Improve performance of peer dependency validation ([#952](https://github.com/seek-oss/sku/pull/952))
+
+  Peer dependency validation shoould now complete within a few seconds, rather than a few minutes.
+
 ## 12.5.0
 
 ### Minor Changes

package/README.md

@@ -6,7 +6,8 @@
 
 Front-end development toolkit, powered by [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [Vanilla Extract](https://vanilla-extract.style/), [CSS Modules](https://github.com/css-modules/css-modules), [Less](http://lesscss.org/), [ESLint](http://eslint.org/), [Prettier](https://prettier.io/), [Jest](https://facebook.github.io/jest/) and [Storybook](https://storybook.js.org/).
 
-Quickly get up and running with a zero-config development environment, or optionally add minimal config when needed. Designed for usage with [braid-design-system](https://github.com/seek-oss/braid-design-system), although this isn't a requirement.
+Quickly get up and running with a zero-config development environment, or optionally add minimal config when needed.
+Designed for usage with [braid-design-system](https://github.com/seek-oss/braid-design-system), although this isn't a requirement.
 
 This tool is heavily inspired by other work, most notably:
 
@@ -14,13 +15,19 @@ This tool is heavily inspired by other work, most notably:
 - [insin/nwb](https://github.com/insin/nwb)
 - [NYTimes/kyt](https://github.com/NYTimes/kyt)
 
-**WARNING: While this software is open source, its primary purpose is to improve consistency, cross-team collaboration and code quality at SEEK. As a result, it’s likely that we will introduce more breaking API changes to this project than you’ll find in its alternatives.**
+> [!WARNING]
+> While this software is open source, its primary purpose is to improve consistency, cross-team collaboration and code quality at SEEK.
+> As a result, it’s likely that this tool may not exactly suit your needs, or may be overkill for your use case.
+> It may be worth considering alternatives such as [Vite] or [Parcel].
+
+[Vite]: https://vitejs.dev/
+[Parcel]: https://parceljs.org/
 
 ## Getting Started
 
 Create a new project and start a local development environment:
 
-```bash
+```sh
 $ npx sku init my-app
 $ cd my-app
 $ yarn start
@@ -30,7 +37,7 @@ By default, a new project's dependencies will be installed with the first suppor
 Package managers are detected in the following order: `yarn` -> `pnpm` -> `npm`.
 This can be overridden via the `--packageManager` flag:
 
-```bash
+```sh
 $ pnpm dlx sku init --packageManager pnpm my-app
 $ cd my-app
 $ pnpm start
@@ -40,7 +47,8 @@ $ pnpm start
 
 ## Contributing
 
-Refer to [CONTRIBUTING.md](/CONTRIBUTING.md). If you're planning to change the public API, please [open a new issue](https://github.com/seek-oss/sku/issues/new).
+Refer to [CONTRIBUTING.md](/CONTRIBUTING.md).
+If you're planning to change the public API, please [open a new issue](https://github.com/seek-oss/sku/issues/new).
 
 ## License
 

package/config/babel/babelConfig.js

@@ -55,7 +55,13 @@ module.exports = ({
     }
 
     if (removeAssertionsInProduction) {
-      plugins.push(require.resolve('babel-plugin-unassert'));
+      plugins.push([
+        require.resolve('babel-plugin-unassert'),
+        {
+          variables: ['assert', 'invariant'],
+          modules: ['assert', 'node:assert', 'tiny-invariant'],
+        },
+      ]);
     }
   }
 

package/config/webpack/plugins/createHtmlRenderPlugin.js

@@ -1,5 +1,5 @@
 const { HtmlRenderPlugin } = require('html-render-webpack-plugin');
-const memoize = require('memoizee/weak');
+const { default: memoize } = require('nano-memoize');
 const debug = require('debug');
 
 const {

package/config/webpack/utils/resolvePackage.js

@@ -1,5 +1,5 @@
 const path = require('node:path');
-const memoize = require('memoizee');
+const { default: memoize } = require('nano-memoize');
 const debug = require('debug')('sku:resolvePackage');
 const { cwd } = require('../../../lib/cwd');
 
@@ -37,6 +37,7 @@ const createPackageResolver = (fs, resolve) => {
    *
    * Throws if a package is listed in the project's dependencies and cannot be resolved.
    */
+  /** @param {string} packageName  */
   function resolvePackage(packageName) {
     try {
       // First, try to use require.resolve to find the package.

package/context/defaultCompilePackages.js

@@ -1,57 +1,83 @@
 const { posix: path } = require('node:path');
 const chalk = require('chalk');
-const glob = require('fast-glob');
+const { fdir: Fdir } = require('fdir');
 
-const { cwd: skuCwd } = require('../lib/cwd');
+const { cwd } = require('../lib/cwd');
 const toPosixPath = require('../lib/toPosixPath');
 
 const { rootDir, isPnpm } = require('../lib/packageManager');
+const debug = require('debug')('sku:compilePackages');
 
 /** @type {string[]} */
 let detectedCompilePackages = [];
 
-try {
-  const globs = ['node_modules/@seek/*/package.json'];
-  const cwd = skuCwd();
+// If there's no rootDir, we're either inside `sku init`, or we can't determine the user's
+// package manager. In either case, we can't correctly detect compile packages.
+if (rootDir) {
+  try {
+    let crawler = new Fdir();
 
-  if (isPnpm && rootDir) {
-    const pnpmVirtualStorePath = path.join(
-      toPosixPath(rootDir),
-      'node_modules/.pnpm',
-    );
-    const pnpmVirtualStoreRelativePath = path.relative(
-      '.',
-      pnpmVirtualStorePath,
-    );
-    const pnpmVirtualStoreGlob = path.join(
-      pnpmVirtualStoreRelativePath,
-      '@seek*/node_modules/@seek/*/package.json',
-    );
+    if (isPnpm) {
+      // Follow symlinks inside node_modules into the pnpm virtual store
+      crawler = crawler.withSymlinks().withRelativePaths();
+    } else {
+      crawler = crawler.withBasePath();
+    }
 
-    globs.push(pnpmVirtualStoreGlob);
-  }
+    const seekDependencyGlob = '**/@seek/*/package.json';
+
+    let results = crawler
+      .glob(seekDependencyGlob)
+      .crawl('./node_modules/@seek')
+      .sync();
+
+    if (isPnpm) {
+      const pnpmVirtualStorePath = path.join(
+        toPosixPath(rootDir),
+        'node_modules/.pnpm',
+      );
+
+      const pnpmVirtualStoreRelativePath = path.relative(
+        '.',
+        pnpmVirtualStorePath,
+      );
 
-  detectedCompilePackages = glob
-    .sync(globs, {
-      cwd,
-    })
-    .map((packagePath) => {
-      const packageJson = require(path.join(cwd, packagePath));
-
-      return {
-        isCompilePackage: Boolean(packageJson.skuCompilePackage),
-        packageName: packageJson.name,
-      };
-    })
-    .filter(({ isCompilePackage }) => isCompilePackage)
-    .map(({ packageName }) => packageName);
-} catch (e) {
-  console.log(
-    chalk.red`Warning: Failed to detect compile packages. Contact #sku-support.`,
-  );
-  console.error(e);
+      const pnpmVirtualStoreResults = new Fdir()
+        .withRelativePaths()
+        .glob(seekDependencyGlob)
+        .crawl(pnpmVirtualStoreRelativePath)
+        .sync();
+
+      results.push(...pnpmVirtualStoreResults);
+
+      // All results will be relative to the virtual store directory, so we need
+      // to prepend the relative path from the current directory to the virtual store
+      results = results.map((file) =>
+        path.join(pnpmVirtualStoreRelativePath, file),
+      );
+    }
+
+    detectedCompilePackages = results
+      .map((packagePath) => {
+        const packageJson = require(path.join(cwd(), packagePath));
+
+        return {
+          isCompilePackage: Boolean(packageJson.skuCompilePackage),
+          packageName: packageJson.name,
+        };
+      })
+      .filter(({ isCompilePackage }) => isCompilePackage)
+      .map(({ packageName }) => packageName);
+  } catch (e) {
+    console.log(
+      chalk.red`Warning: Failed to detect compile packages. Contact #sku-support.`,
+    );
+    console.error(e);
+  }
 }
 
+debug(detectedCompilePackages);
+
 module.exports = [
   'sku',
   'braid-design-system',

package/lib/allocatePort.js

@@ -1,9 +1,10 @@
+// @ts-check
 const { yellow, bold } = require('chalk');
 const getPort = require('get-port');
 const debug = require('debug')('sku:allocatePort');
 
 /**
- * @param {{ port?: number, host?: string }}
+ * @param {{ port?: number, host?: string }} options
  */
 const allocatePort = async ({ port, host }) => {
   debug(`Finding available port with request for ${port}`);

package/lib/buildFileUtils.js

@@ -1,12 +1,15 @@
+// @ts-check
 const path = require('node:path');
 const fs = require('node:fs/promises');
-const { rimraf } = require('rimraf');
+const { fdir: Fdir } = require('fdir');
 
 const { paths } = require('../context');
 const exists = require('./exists');
 const copyDirContents = require('./copyDirContents');
 
-const cleanTargetDirectory = () => rimraf(`${paths.target}/*`, { glob: true });
+const cleanTargetDirectory = async () => {
+  fs.rm(paths.target, { recursive: true, force: true });
+};
 
 const copyPublicFiles = async () => {
   if (await exists(paths.public)) {
@@ -18,14 +21,21 @@ const ensureTargetDirectory = async () => {
   await fs.mkdir(paths.target, { recursive: true });
 };
 
-const cleanRenderJs = async () => {
-  const renderFileGlob = path.join(paths.target, '*render.js');
-  await rimraf(renderFileGlob, { glob: true });
+const cleanStaticRenderEntry = async () => {
+  const files = await new Fdir()
+    .withBasePath()
+    .filter((file) => file.endsWith('render.js'))
+    .crawl(paths.target)
+    .withPromise();
+
+  for (const file of files) {
+    await fs.rm(file);
+  }
 };
 
 module.exports = {
   cleanTargetDirectory,
   copyPublicFiles,
   ensureTargetDirectory,
-  cleanRenderJs,
+  cleanStaticRenderEntry,
 };

package/lib/configure.js

@@ -48,7 +48,6 @@ module.exports = async () => {
     storybookTargetDirectory,
     storybookMainConfigPath,
   ];
-  const lintIgnorePatterns = [...gitIgnorePatterns, '*.less.d.ts'];
 
   // Generate ESLint configuration
   const eslintConfigFilename = '.eslintrc';
@@ -67,6 +66,8 @@ module.exports = async () => {
   });
   gitIgnorePatterns.push(prettierConfigFilename);
 
+  const lintIgnorePatterns = [...gitIgnorePatterns, '*.less.d.ts'];
+
   if (languages) {
     const generatedVocabFileGlob = '**/*.vocab/index.ts';
     gitIgnorePatterns.push(generatedVocabFileGlob);

package/lib/copyDirContents.js

@@ -1,3 +1,4 @@
+// @ts-check
 const path = require('node:path');
 const fs = require('node:fs/promises');
 const exists = require('./exists');

package/lib/createServer.js

@@ -1,3 +1,4 @@
+// @ts-check
 const http = require('node:http');
 const https = require('node:https');
 

package/lib/cwd.js

@@ -1,3 +1,4 @@
+// @ts-check
 const path = require('node:path');
 
 let currentCwd = process.cwd();

package/lib/env.js

@@ -1,3 +1,4 @@
+// @ts-check
 const args = require('../config/args');
 
 /**

package/lib/exists.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { access } = require('node:fs/promises');
 
 /**

package/lib/getSiteForHost.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { sites } = require('../context');
 
 /**

package/lib/install.js

@@ -1,9 +1,11 @@
+// @ts-check
 const { getAddCommand } = require('./packageManager');
 
 const spawn = require('cross-spawn');
 
 /**
  * @param {import("../lib/packageManager").GetAddCommandOptions} options
+ * @returns {Promise<void>}
  */
 module.exports = ({ deps, type, logLevel, exact = true }) =>
   new Promise((resolve, reject) => {

package/lib/isCI.js

@@ -1 +1,2 @@
+// @ts-check
 module.exports = Boolean(process.env.CI || process.env.BUILDKITE_BUILD_ID);

package/lib/isCompilePackage.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { getPathFromCwd } = require('./cwd');
 
 const isCompilePackage = () => {

package/lib/isEmptyDir.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { statSync, readdirSync } = require('node:fs');
 
 /**

package/lib/parseArgs.js

@@ -1,10 +1,11 @@
+// @ts-check
 const minimist = require('minimist');
 
 /**
  * Supports parsing args that look like:
  * [/path/to/node/node, /path/to/sku, scriptName, arg1, arg2]
  *
- * @param {string[]} args - should look like process.argv
+ * @param {string[]} processArgv - should look like process.argv
  */
 module.exports = (processArgv) => {
   /**
@@ -48,6 +49,8 @@ module.exports = (processArgv) => {
       // need to track them ourselves
       unknown: (arg) => {
         unknown.push(arg);
+
+        return true;
       },
     },
   );

package/lib/routeMatcher.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { match } = require('path-to-regexp');
 
 /**

package/lib/runBin.js

@@ -1,3 +1,4 @@
+// @ts-check
 const path = require('node:path');
 const spawn = require('cross-spawn');
 
@@ -45,13 +46,13 @@ const spawnPromise = (commandPath, args, options) => {
  */
 
 /**
- * @param {Options}
+ * @param {Options} options
  */
 const runBin = ({ packageName, binName, args, options }) =>
   spawnPromise(resolveBin(packageName, binName), args, options);
 
 /**
- * @param {Options}
+ * @param {Options} options
  */
 const startBin = ({ packageName, binName, args, options }) => {
   const childProcess = spawn(resolveBin(packageName, binName), args, options);

package/lib/runTsc.js

@@ -1,3 +1,4 @@
+// @ts-check
 const chalk = require('chalk');
 const { runBin } = require('./runBin');
 const { cwd } = require('./cwd');

package/lib/runVocab.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { compile } = require('@vocab/core');
 const { getVocabConfig } = require('../config/vocab/vocab');
 

package/lib/storybook.js

@@ -1,3 +1,4 @@
+// @ts-check
 const path = require('node:path');
 const fs = require('node:fs/promises');
 const debug = require('debug');

package/lib/suggestScript.js

@@ -1,3 +1,4 @@
+// @ts-check
 const { getRunCommand, getExecuteCommand } = require('./packageManager');
 
 const chalk = require('chalk');

package/lib/validateLessFiles.js

@@ -1,7 +1,6 @@
 const fs = require('node:fs');
-const path = require('node:path');
-const glob = require('fast-glob');
 const chalk = require('chalk');
+const { fdir: Fdir } = require('fdir');
 
 const printBanner = require('./banner');
 const exists = require('./exists');
@@ -14,11 +13,18 @@ module.exports = async () => {
   const lessFileGlobResults = await Promise.all(
     srcPathsExist
       .filter((srcPath) => srcPath && fs.statSync(srcPath).isDirectory())
-      .map(async (srcPath) => await glob(path.join(srcPath, '**/*.less'))),
+      .map(async (srcPath) =>
+        new Fdir()
+          .filter((file) => file.endsWith('.less'))
+          .crawl(srcPath)
+          .withPromise(),
+      ),
   );
+
   const srcHasLessFiles = lessFileGlobResults.some(
     (fileArray) => fileArray.length > 0,
   );
+
   if (srcHasLessFiles) {
     printBanner('warning', 'LESS styles detected', [
       `Support for ${chalk.bold('LESS')} has been deprecated.`,

package/lib/validatePeerDeps.js

@@ -1,13 +1,13 @@
-const { getWhyCommand } = require('./packageManager');
+const { getWhyCommand, isPnpm } = require('./packageManager');
 
 const { readFile } = require('node:fs/promises');
-const glob = require('fast-glob');
+const { fdir: Fdir } = require('fdir');
 const semver = require('semver');
 const chalk = require('chalk');
 
 const banner = require('./banner');
 const track = require('../telemetry');
-const { cwd, getPathFromCwd } = require('../lib/cwd');
+const { getPathFromCwd } = require('../lib/cwd');
 const { paths } = require('../context');
 
 /**
@@ -21,30 +21,42 @@ const asyncMap = (list, fn) => {
 const singletonPackages = ['@vanilla-extract/css'];
 
 module.exports = async () => {
+  if (isPnpm) {
+    // pnpm doesn't nest dependencies in the same way as yarn or npm, so the method used below won't
+    // work for detecting duplicate packages
+    return;
+  }
+
   try {
-    const packages = [];
-
-    for (const packageName of [
-      ...paths.compilePackages,
-      ...singletonPackages,
-    ]) {
-      const results = await glob(
-        [
-          `node_modules/${packageName}/package.json`,
-          `node_modules/**/node_modules/${packageName}/package.json`,
-        ],
-        {
-          cwd: cwd(),
-        },
+    /** @type {string[]} */
+    const duplicatePackages = [];
+    const packagesToCheck = [...paths.compilePackages, ...singletonPackages];
+
+    const packagePatterns = packagesToCheck.map((packageName) => [
+      packageName,
+      `node_modules/${packageName}/package.json`,
+    ]);
+
+    const patterns = packagePatterns.map(([, pattern]) => pattern);
+
+    const results = await new Fdir()
+      .withBasePath()
+      .filter((file) => patterns.some((pattern) => file.endsWith(pattern)))
+      .crawl('./node_modules')
+      .withPromise();
+
+    for (const [packageName, pattern] of packagePatterns) {
+      const resultsForPackage = results.filter((result) =>
+        result.endsWith(pattern),
       );
 
-      if (results.length > 1) {
+      if (resultsForPackage.length > 1) {
         const messages = [
           chalk`Multiple copies of {bold ${packageName}} are present in node_modules. This is likely to cause errors, but even if it works, it will probably result in an unnecessarily large bundle size.`,
         ];
 
         messages.push(
-          results
+          resultsForPackage
             .map((depLocation) => {
               const { version } = require(getPathFromCwd(depLocation));
 
@@ -64,14 +76,14 @@ module.exports = async () => {
           compile_package: packageName,
         });
         banner('error', 'Error: Duplicate packages detected', messages);
-      }
 
-      packages.push(...results);
+        duplicatePackages.push(...resultsForPackage);
+      }
     }
 
     const compilePackages = new Map();
 
-    await asyncMap(packages, async (p) => {
+    await asyncMap(duplicatePackages, async (p) => {
       const contents = await readFile(getPathFromCwd(p), {
         encoding: 'utf8',
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.5.0",
+  "version": "12.6.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -39,7 +39,7 @@
     "@loadable/server": "^5.14.0",
     "@loadable/webpack-plugin": "^5.14.0",
     "@manypkg/find-root": "^2.2.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.12",
     "@storybook/builder-webpack5": "^7.0.17",
     "@storybook/cli": "^7.0.17",
     "@storybook/react": "^7.0.17",
@@ -82,8 +82,8 @@
     "eslint-config-seek": "^12.0.1",
     "exception-formatter": "^2.1.2",
     "express": "^4.16.3",
-    "fast-glob": "^3.2.5",
     "fastest-validator": "^1.9.0",
+    "fdir": "^6.1.1",
     "find-up": "^5.0.0",
     "get-port": "^5.0.0",
     "hostile": "^1.3.3",
@@ -95,18 +95,18 @@
     "less": "^4.1.0",
     "less-loader": "^12.0.0",
     "lint-staged": "^11.1.1",
-    "memoizee": "^0.4.15",
     "mini-css-extract-plugin": "^2.6.1",
     "minimist": "^1.2.8",
+    "nano-memoize": "^3.0.16",
     "node-html-parser": "^6.1.1",
     "open": "^7.3.1",
     "path-to-regexp": "^6.2.0",
+    "picomatch": "^3.0.1",
     "postcss": "^8.4.0",
     "postcss-loader": "^8.0.0",
     "prettier": "^2.8.8",
     "pretty-ms": "^7.0.1",
     "react-refresh": "^0.14.0",
-    "rimraf": "^5.0.0",
     "selfsigned": "^2.1.1",
     "semver": "^7.3.4",
     "serialize-javascript": "^6.0.0",
@@ -115,7 +115,6 @@
     "terser-webpack-plugin": "^5.1.4",
     "tree-kill": "^1.2.1",
     "typescript": "~5.3.0",
-    "validate-npm-package-name": "^5.0.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-dev-server": "^5.0.2",
@@ -127,7 +126,10 @@
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.3",
+    "@types/debug": "^4.1.12",
     "@types/express": "^4.17.11",
+    "@types/minimist": "^1.2.5",
+    "@types/picomatch": "^2.3.3",
     "@types/react": "^18.2.3",
     "@types/react-dom": "^18.2.3",
     "@types/which": "^3.0.0",

package/scripts/build-storybook.js

@@ -1,7 +1,7 @@
 // First, ensure the build is running in production mode
 process.env.NODE_ENV = 'production';
 
-const { rimraf } = require('rimraf');
+const { rm } = require('node:fs/promises');
 const { argv, config } = require('../config/args');
 const gracefulSpawn = require('../lib/gracefulSpawn');
 const { storybookTarget } = require('../context');
@@ -11,7 +11,7 @@ const { setUpStorybookConfigDirectory } = require('../lib/storybook');
 
 (async () => {
   await runVocabCompile();
-  await rimraf(storybookTarget);
+  await rm(storybookTarget, { recursive: true, force: true });
   await setUpStorybookConfigDirectory();
 
   argv.push('build');

package/scripts/build.js

@@ -10,7 +10,7 @@ const {
   copyPublicFiles,
   cleanTargetDirectory,
   ensureTargetDirectory,
-  cleanRenderJs,
+  cleanStaticRenderEntry,
 } = require('../lib/buildFileUtils');
 const { run } = require('../lib/runWebpack');
 const createHtmlRenderPlugin = require('../config/webpack/plugins/createHtmlRenderPlugin');
@@ -31,7 +31,7 @@ const { runVocabCompile } = require('../lib/runVocab');
         }),
       ),
     );
-    await cleanRenderJs();
+    await cleanStaticRenderEntry();
     await copyPublicFiles();
 
     const timeTaken = performance.now();

package/scripts/init.js

@@ -11,7 +11,6 @@ const chalk = require('chalk');
 const fs = require('node:fs/promises');
 const { posix: path } = require('node:path');
 const { isEmptyDir } = require('../lib/isEmptyDir');
-const validatePackageName = require('validate-npm-package-name');
 const dedent = require('dedent');
 const { setCwd } = require('../lib/cwd');
 const prettierWrite = require('../lib/runPrettier').write;
@@ -21,7 +20,7 @@ const install = require('../lib/install');
 const banner = require('../lib/banner');
 const toPosixPath = require('../lib/toPosixPath');
 const trace = require('debug')('sku:init');
-const glob = require('fast-glob');
+const { fdir: Fdir } = require('fdir');
 const ejs = require('ejs');
 
 const args = require('../config/args');
@@ -48,6 +47,11 @@ const getTemplateFileDestinationFromRoot =
     return path.join(projectRoot, filePathRelativeToTemplate);
   };
 
+// Copied from `package-name-regex@4.0.0`
+// See https://github.com/dword-design/package-name-regex/blob/acae7d482b1d03379003899df4d484238625364d/src/index.js#L1-L2
+const packageNameRegex =
+  /^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
+
 (async () => {
   const projectName = args.argv[0];
 
@@ -89,21 +93,16 @@ const getTemplateFileDestinationFromRoot =
     'braid-design-system',
   ].sort();
 
-  const {
-    validForNewPackages,
-    errors = [],
-    warnings = [],
-  } = validatePackageName(appName);
+  const isValidPackageName = packageNameRegex.test(appName);
 
-  if (!validForNewPackages) {
+  if (!isValidPackageName) {
     console.error(dedent`
-    Could not create a project called ${chalk.red(`"${appName}"`)} \
-    because of npm naming restrictions:
+    Could not create a project called ${chalk.red(
+      `"${appName}"`,
+    )} because of npm naming restrictions. \
+    Please see https://docs.npmjs.com/cli/configuring-npm/package-json for package name rules.
   `);
 
-    const results = [...errors, ...warnings];
-    results.forEach((result) => console.error(chalk.red(`  *  ${result}`)));
-
     process.exit(1);
   }
 
@@ -152,9 +151,11 @@ const getTemplateFileDestinationFromRoot =
   process.chdir(root);
 
   const templateDirectory = path.join(toPosixPath(__dirname), '../template');
-  const templateFiles = await glob(`${templateDirectory}/**/*`, {
-    onlyFiles: true,
-  });
+
+  const templateFiles = await new Fdir()
+    .withBasePath()
+    .crawl(templateDirectory)
+    .withPromise();
 
   const getTemplateFileDestination = getTemplateFileDestinationFromRoot(
     root,

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["@loadable/**/*", "@storybook/**/*", "sku-types.d.ts"]
-}