sku 12.4.11 → 12.5.1

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # sku
 
+## 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
+
+- Update TypeScript to 5.3 ([#938](https://github.com/seek-oss/sku/pull/938))
+
+  This release includes breaking changes. See the [TypeScript 5.3 announcement] for more information.
+
+  [TypeScript 5.3 announcement]: https://devblogs.microsoft.com/typescript/announcing-typescript-5-3/
+
+### Patch Changes
+
+- Remove `empty-dir` dependency ([#935](https://github.com/seek-oss/sku/pull/935))
+
+- Replace `command-line-args` with `minimist` for parsing CLI arguments ([#940](https://github.com/seek-oss/sku/pull/940))
+
+- Emit incremental TypeScript build info for faster subsequent type checking ([#938](https://github.com/seek-oss/sku/pull/938))
+
 ## 12.4.11
 
 ### Patch 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/typescript/tsconfig.js

@@ -4,11 +4,15 @@ const { rootResolution, tsconfigDecorator } = require('../../context');
 module.exports = () => {
   const config = {
     compilerOptions: {
-      // This flag allows tsc to be invoked directly by VS Code (via Cmd+Shift+B),
-      // otherwise it would emit a bunch of useless JS/JSX files in your project.
-      // We emit compiled JavaScript into `dist` via webpack + Babel, not tsc.
+      // Don't compile anything, only perform type checking
       noEmit: true,
 
+      // Emit build information for faster subsequent type checking
+      incremental: true,
+      // Emit build information to `node_modules` to avoid bloating the project root
+      // and ignore files
+      outDir: 'node_modules',
+
       // Fixes https://github.com/cypress-io/cypress/issues/1087
       skipLibCheck: true,
 

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/entry/server/index.js

@@ -1,20 +1,14 @@
 import fs from 'node:fs';
 import http from 'node:http';
 import https from 'node:https';
-import commandLineArgs from 'command-line-args';
 import { app, onStart } from './server';
+import minimist from 'minimist';
 
-const { port } = commandLineArgs(
-  [
-    {
-      name: 'port',
-      alias: 'p',
-      type: Number,
-      defaultValue: __SKU_DEFAULT_SERVER_PORT__, // eslint-disable-line no-undef
-    },
-  ],
-  { partial: true },
-);
+const { port } = minimist(process.argv.slice(2), {
+  alias: { p: 'port' },
+  // eslint-disable-next-line no-undef
+  default: { port: __SKU_DEFAULT_SERVER_PORT__ },
+});
 
 const startCallback = () => {
   console.log('Server started on port', port);

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

@@ -32,28 +32,23 @@ const writeFileToCWD = async (fileName, content, { banner = true } = {}) => {
 };
 
 module.exports = async () => {
-  // Ignore webpack bundle report output
+  // Ignore target directories
+  const webpackTargetDirectory = addSep(
+    paths.target.replace(addSep(cwd()), ''),
+  );
+  const storybookTargetDirectory = addSep(
+    paths.storybookTarget.replace(addSep(cwd()), ''),
+  );
+
   const gitIgnorePatterns = [
+    // Ignore webpack bundle report output
     addSep(bundleReportFolder),
     addSep(coverageFolder),
-    storybookMainConfigPath,
-  ];
-  const lintIgnorePatterns = [
-    addSep(bundleReportFolder),
-    addSep(coverageFolder),
-    '*.less.d.ts',
+    webpackTargetDirectory,
+    storybookTargetDirectory,
     storybookMainConfigPath,
   ];
 
-  // Ignore webpack target directories
-  const targetDirectory = addSep(paths.target.replace(addSep(cwd()), ''));
-  const storybookTargetDirectory = addSep(
-    paths.storybookTarget.replace(addSep(cwd()), ''),
-  );
-
-  gitIgnorePatterns.push(targetDirectory, storybookTargetDirectory);
-  lintIgnorePatterns.push(targetDirectory, storybookTargetDirectory);
-
   // Generate ESLint configuration
   const eslintConfigFilename = '.eslintrc';
   const eslintCacheFilename = '.eslintcache';
@@ -71,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

@@ -0,0 +1,21 @@
+// @ts-check
+const { statSync, readdirSync } = require('node:fs');
+
+/**
+ * Returns whether the given directory is empty, throwing if the path is not a directory
+ * @typedef {import('fs').PathLike} PathLike
+ * @param {PathLike} path A path to a directory
+ */
+const isEmptyDir = (path) => {
+  const isDirectory = statSync(path).isDirectory();
+
+  if (!isDirectory) {
+    throw new Error(`${path} is not a directory`);
+  }
+
+  const files = readdirSync(path);
+
+  return files.length === 0;
+};
+
+module.exports = { isEmptyDir };

package/lib/parseArgs.js

@@ -1,75 +1,61 @@
-const commandLineArgs = require('command-line-args');
-
-const optionDefinitions = [
-  {
-    name: 'script',
-    defaultOption: true,
-  },
-  {
-    name: 'env',
-    alias: 'e',
-    type: String,
-    defaultValue: 'production',
-  },
-  {
-    name: 'tenant',
-    alias: 't',
-    type: String,
-    defaultValue: '',
-  },
-  {
-    name: 'build',
-    alias: 'b',
-    type: String,
-  },
-  {
-    name: 'config',
-    alias: 'c',
-    type: String,
-  },
-  {
-    name: 'debug',
-    alias: 'D',
-    type: Boolean,
-  },
-  {
-    name: 'environment',
-    type: String,
-  },
-  {
-    name: 'packageManager',
-    type: String,
-  },
-  {
-    name: 'port',
-    type: Number,
-  },
-  {
-    name: 'site',
-    type: String,
-  },
-  {
-    name: 'stats',
-    type: String,
-  },
-];
+// @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 = (args) => {
-  const options = commandLineArgs(optionDefinitions, {
+module.exports = (processArgv) => {
+  /**
+   * @type {string[]}
+   */
+  const unknown = [];
+
+  // We are tracking unknown arguments ourselves, so we ignore `minimist`'s unknown property `_`
+  const { _, ...options } = minimist(
     // The first 2 items in process.argv are /path/to/node and /path/to/sku.
-    // We need the first arg we give to command-line-args to be the script name.
-    argv: args.slice(2),
-    stopAtFirstUnknown: false,
-    partial: true,
-  });
+    // We need the first arg we give to minimist to be the script name.
+    processArgv.slice(2),
+    {
+      string: [
+        'env',
+        'tenant',
+        'build',
+        'config',
+        'environment',
+        'packageManager',
+        'site',
+        'stats',
+      ],
+      default: {
+        env: 'production',
+        tenant: '',
+      },
+      alias: {
+        e: 'env',
+        t: 'tenant',
+        b: 'build',
+        c: 'config',
+        D: 'debug',
+      },
+      boolean: [
+        'debug',
+        // Passed to Vocab in the `translations` script
+        'delete-unused-keys',
+      ],
+      // `minimist` does not push unknown flags to `_` even if this function returns `true`, so we
+      // need to track them ourselves
+      unknown: (arg) => {
+        unknown.push(arg);
 
-  const { script, _unknown: argv = [] } = options;
+        return true;
+      },
+    },
+  );
+
+  const [script, ...argv] = unknown;
 
   // Backwards compatibility for unnamed build name argument, to be deprecated
   const buildName = () => {
@@ -78,11 +64,13 @@ module.exports = (args) => {
     } else if (argv.length) {
       return argv[0];
     }
-    return undefined; // eslint-disable-line no-undefined
+
+    return undefined;
   };
 
   return {
     ...options,
+    script,
     buildName: script === 'start' ? buildName() : null,
     env: script === 'start' ? 'development' : options.env,
     argv,

package/lib/parseArgs.test.js

@@ -1,20 +1,28 @@
+/**
+ * @jest-environment node
+ */
+
 const parseArgs = require('./parseArgs');
 
-describe('arg parsing', () => {
-  test('sku exec', () => {
-    const { script, argv, env } = parseArgs([
+describe('parseArgs', () => {
+  test('sku script with short and long flag', () => {
+    const { script, argv, env, config } = parseArgs([
       '/path/to/node',
       '/path/to/bin/sku',
       'lint',
       '-e',
       'test',
+      '--config',
+      'custom.sku.config.ts',
     ]);
+
     expect(script).toEqual('lint');
     expect(argv).toEqual([]);
     expect(env).toEqual('test');
+    expect(config).toEqual('custom.sku.config.ts');
   });
 
-  test('sku exec with args', () => {
+  test('sku script with flag and argument', () => {
     const { script, argv, env } = parseArgs([
       '/path/to/node',
       '/path/to/bin/sku',
@@ -23,15 +31,32 @@ describe('arg parsing', () => {
       '-e',
       'test',
     ]);
+
     expect(script).toEqual('lint');
     expect(argv).toEqual(['src/components/**']);
     expect(env).toEqual('test');
   });
 
+  test('sku script with argument, known flag and unknown flag', () => {
+    const { script, argv, env } = parseArgs([
+      '/path/to/node',
+      '/path/to/bin/sku',
+      'test',
+      '-e',
+      'test',
+      'testFilter',
+      '--someJestFlag',
+    ]);
+
+    expect(script).toEqual('test');
+    expect(argv).toEqual(['testFilter', '--someJestFlag']);
+    expect(env).toEqual('test');
+  });
+
   test('debug', () => {
     expect(
       parseArgs(['/path/to/node', '/path/to/bin/sku', 'build']).debug,
-    ).toBeUndefined();
+    ).toBe(false);
 
     expect(
       parseArgs(['/path/to/node', '/path/to/bin/sku', '-D', 'build']).debug,

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/toPosixPath.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 const toPosixPath = require('./toPosixPath');
 
 describe('toPosixPath', () => {

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.4.11",
+  "version": "12.5.1",
   "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",
@@ -64,7 +64,6 @@
     "browserslist": "^4.16.1",
     "browserslist-config-seek": "^2.1.0",
     "chalk": "^4.1.0",
-    "command-line-args": "^5.1.1",
     "cross-spawn": "^7.0.3",
     "css-loader": "^6.7.1",
     "css-modules-typescript-loader": "4.0.1",
@@ -74,7 +73,6 @@
     "dedent": "^1.5.1",
     "didyoumean2": "^6.0.1",
     "ejs": "^3.1.8",
-    "empty-dir": "^3.0.0",
     "ensure-gitignore": "^1.1.2",
     "env-ci": "^7.0.0",
     "esbuild": "^0.19.7",
@@ -84,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",
@@ -97,17 +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,8 +114,7 @@
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.4",
     "tree-kill": "^1.2.1",
-    "typescript": "~5.2.0",
-    "validate-npm-package-name": "^5.0.0",
+    "typescript": "~5.3.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-dev-server": "^5.0.2",
@@ -128,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

@@ -10,8 +10,7 @@ const {
 const chalk = require('chalk');
 const fs = require('node:fs/promises');
 const { posix: path } = require('node:path');
-const emptyDir = require('empty-dir');
-const validatePackageName = require('validate-npm-package-name');
+const { isEmptyDir } = require('../lib/isEmptyDir');
 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);
   }
 
@@ -125,7 +124,7 @@ const getTemplateFileDestinationFromRoot =
 
   await fs.mkdir(projectName, { recursive: true });
 
-  if (!emptyDir.sync(root)) {
+  if (!isEmptyDir(root)) {
     console.log(`The directory ${chalk.green(projectName)} is not empty.`);
     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"]
-}