sku 12.3.2 → 12.4.0

package/lib/packageManager.js

@@ -0,0 +1,152 @@
+const { cwd } = require('../lib/cwd');
+const { findRootSync } = require('@manypkg/find-root');
+const { getCommand, INSTALL_PAGE } = require('@antfu/ni');
+
+const { sync: which } = require('which');
+const skuArgs = require('../config/args');
+
+/** @typedef {'yarn' | 'pnpm' | 'npm'} SupportedPackageManager */
+
+/** @type {Array<SupportedPackageManager>} */
+const supportedPackageManagers = ['yarn', 'pnpm', 'npm'];
+
+/**
+ * @param {SupportedPackageManager} commandName
+ * @returns {SupportedPackageManager | null}
+ */
+const detectPackageManagerCommand = (commandName) =>
+  which(commandName, { nothrow: true }) ? commandName : null;
+
+const detectPackageManager = () =>
+  detectPackageManagerCommand('yarn') ||
+  detectPackageManagerCommand('pnpm') ||
+  'npm';
+
+/**
+ * Get the package manager and root directory of the project. If the project does not have a
+ * project manager configured, a supported package manager will be detected in your `PATH`, and
+ * `rootDir` will be `null`.
+ * @returns {{packageManager: SupportedPackageManager, rootDir: string | null}}
+ */
+const getPackageManager = () => {
+  let _packageManager = skuArgs?.packageManager;
+
+  try {
+    const {
+      tool: { type: foundPackageManager },
+      rootDir,
+    } = findRootSync(cwd());
+
+    if (!supportedPackageManagers.includes(foundPackageManager)) {
+      throw new Error('Unsupported package manager found');
+    }
+
+    _packageManager ||= foundPackageManager;
+
+    return { packageManager: _packageManager, rootDir };
+  } catch {
+    _packageManager ||= detectPackageManager();
+
+    return { packageManager: _packageManager, rootDir: null };
+  }
+};
+
+const { rootDir, packageManager } = getPackageManager();
+
+const isYarn = packageManager === 'yarn';
+const isPnpm = packageManager === 'pnpm';
+const isNpm = packageManager === 'npm';
+
+/**
+ * @param {string} scriptName
+ */
+const getRunCommand = (scriptName) =>
+  getCommand(packageManager, 'run', [scriptName]);
+
+/**
+ * @param {string[]} args
+ */
+const getExecuteCommand = (args) => getCommand(packageManager, 'execute', args);
+
+/** @type {Record<SupportedPackageManager, string[]>} */
+const regularLoglevelArgsByPackageManager = {
+  // Yarn doesn't have a loglevel flag
+  yarn: [],
+  pnpm: ['--loglevel', 'error'],
+  npm: ['--loglevel', 'error'],
+};
+
+/** @type {Record<SupportedPackageManager, string[]>} */
+const verboseLoglevelArgsByPackageManager = {
+  yarn: ['--verbose'],
+  pnpm: ['--loglevel', 'info'],
+  npm: ['--loglevel', 'verbose'],
+};
+
+/**
+ * @param {'verbose' | 'regular'} logLevel
+ */
+const resolveLogLevelArgs = (logLevel) => {
+  if (logLevel === 'verbose') {
+    return verboseLoglevelArgsByPackageManager[packageManager];
+  }
+
+  return regularLoglevelArgsByPackageManager[packageManager];
+};
+
+/**
+ * @typedef {object} GetAddCommandOptions
+ * @property {'dev' | 'prod'} type
+ * @property {'verbose' | 'regular' | undefined} logLevel
+ * @property {boolean} exact
+ * @property {string[]} deps
+ * @param {GetAddCommandOptions} options
+ */
+const getAddCommand = ({ type, logLevel, deps, exact }) => {
+  const args = [];
+
+  const addingDevDeps = type === 'dev';
+
+  if (addingDevDeps) {
+    const devDepFlag = isYarn ? '--dev' : `--save-dev`;
+    args.push(devDepFlag);
+  }
+
+  if (exact) {
+    const exactFlag = isYarn ? '--exact' : '--save-exact';
+    args.push(exactFlag);
+  }
+
+  if (logLevel) {
+    args.push(...resolveLogLevelArgs(logLevel));
+  }
+
+  args.push(...deps);
+
+  return getCommand(packageManager, 'add', args);
+};
+
+const getInstallCommand = () => getCommand(packageManager, 'install', []);
+
+const getWhyCommand = () => {
+  const whyCommand = isPnpm ? 'why -r' : 'why';
+
+  return `${packageManager} ${whyCommand}`;
+};
+
+const getPackageManagerInstallPage = () => INSTALL_PAGE[packageManager];
+
+module.exports = {
+  supportedPackageManagers,
+  rootDir,
+  packageManager,
+  isYarn,
+  isPnpm,
+  isNpm,
+  getRunCommand,
+  getExecuteCommand,
+  getAddCommand,
+  getInstallCommand,
+  getWhyCommand,
+  getPackageManagerInstallPage,
+};

package/lib/parseArgs.js

@@ -36,6 +36,10 @@ const optionDefinitions = [
     name: 'environment',
     type: String,
   },
+  {
+    name: 'packageManager',
+    type: String,
+  },
   {
     name: 'port',
     type: Number,

package/lib/runESLint.js

@@ -17,6 +17,7 @@ const runESLint = async ({ fix = false, paths }) => {
     extensions,
     useEslintrc: false,
     fix,
+    cache: true,
   });
   const checkAll = typeof paths === 'undefined';
   /* Whitelist the file extensions that our ESLint setup currently supports */

package/lib/runPrettier.js

@@ -20,7 +20,7 @@ const runPrettier = async ({ write, listDifferent, paths }) => {
     chalk.cyan(`${write ? 'Formatting' : 'Checking'} code with Prettier`),
   );
 
-  const prettierArgs = ['--config', prettierConfigPath];
+  const prettierArgs = ['--config', prettierConfigPath, '--cache'];
 
   if (write) {
     prettierArgs.push('--write');
@@ -69,7 +69,7 @@ const runPrettier = async ({ write, listDifferent, paths }) => {
             'Error: The file(s) listed above failed the prettier check',
           ),
         );
-        await suggestScript('format');
+        suggestScript('format');
       } else {
         console.error(
           chalk.red('Error: Prettier check exited with exit code', exitCode),

package/lib/storybook.js

@@ -1,70 +1,35 @@
 const path = require('path');
-
-const { paths } = require('../context');
 const fs = require('fs/promises');
 const debug = require('debug');
-const glob = require('fast-glob');
 
 const log = debug('sku:storybook');
 
-const previewFileName = 'preview.{js,ts,tsx}';
-
-const previewFileAbsolutePath = path.join(
-  path.dirname(paths.appSkuConfigPath),
-  '.storybook',
-  previewFileName,
-);
-
-/**
- * This function first cleans up any existing preview.{js,ts,tsx} files in the provided storybook config directory.
- * This includes any potentially dangling symlinks.
- * Then it looks for a `.storybook/preview.{js,ts,tsx}` file relative to the sku config.
- * If 1 file is found, a symlink pointing to it is created in the provided storybook config directory.
- * Does nothing if 0 or >1 files are found.
- *
- * @param {string} storybookConfigDirectory The path to the storybook config directory
- */
-const setUpStorybookPreviewFile = async (storybookConfigDirectory) => {
-  const symlinkFileAsbolutePath = path.join(
-    storybookConfigDirectory,
-    previewFileName,
-  );
-  const symlinkFiles = await glob(symlinkFileAsbolutePath, {
-    dot: true,
-    onlyFiles: false, // Required to find dangling symlinks
-  });
-
-  // Clean up any existing files in the storybook config folder so we have a clean slate
-  for (const symlinkFile of symlinkFiles) {
-    await fs.unlink(symlinkFile);
-    log(`Cleaning up exising file ${symlinkFile}.`);
-  }
+const managedConfigBanner = require('./managedConfigBanner');
 
-  const previewFiles = await glob(previewFileAbsolutePath);
+// Since this config will be in the user's project, we can use ESM
+// Spread `storybookConfig` to prevent warning
+// https://github.com/storybookjs/storybook/issues/23675
+const mainConfigFileContents = `${managedConfigBanner}
+import storybookConfig from 'sku/config/storybook';
 
-  if (previewFiles.length > 1) {
-    console.error(
-      'Multiple storybook preview files found. Please only define a single preview file.',
-    );
-    console.error(previewFiles);
+export default { ...storybookConfig };
+`;
 
-    return;
-  }
+const storybookMainConfigPath = '.storybook/main.js';
+const storybookConfigDirectory = path.dirname(storybookMainConfigPath);
 
-  const previewFile = previewFiles?.[0];
-
-  if (previewFile) {
-    const previewFileExtension = path.extname(previewFile);
-    const symlinkFile = path.join(
+const setUpStorybookConfigDirectory = async () => {
+  await fs.mkdir(storybookConfigDirectory, { recursive: true });
+  log(
+    `Created '${path.resolve(
       storybookConfigDirectory,
-      `preview${previewFileExtension}`,
-    );
-
-    log(`Found preview file at ${previewFile}`);
-    log(`Creating symlink from ${symlinkFile} to ${previewFile}`);
+    )}' directory if it didn't exist`,
+  );
 
-    await fs.symlink(previewFile, symlinkFile);
-  }
+  await fs.writeFile(storybookMainConfigPath, mainConfigFileContents);
+  log(
+    `Wrote storybook config file to '${path.resolve(storybookMainConfigPath)}'`,
+  );
 };
 
-module.exports = { setUpStorybookPreviewFile };
+module.exports = { setUpStorybookConfigDirectory, storybookMainConfigPath };

package/lib/suggestScript.js

@@ -1,14 +1,17 @@
-const exists = require('./exists');
+const { getRunCommand, getExecuteCommand } = require('./packageManager');
+
 const chalk = require('chalk');
-const { getPathFromCwd, requireFromCwd } = require('./cwd');
+const { requireFromCwd } = require('./cwd');
 
 /**
- * @param {scriptContents} string
+ * @param {string} scriptContents
+ * @returns {string | undefined}
  */
-const findPackageScript = (scriptContents) => {
+const findPackageScriptName = (scriptContents) => {
   let pkg;
+
   try {
-    pkg = requireFromCwd('package.json');
+    pkg = requireFromCwd('./package.json');
   } catch (err) {
     pkg = { scripts: {} };
   }
@@ -29,31 +32,24 @@ const findPackageScript = (scriptContents) => {
  * @param {string} scriptName
  * @param {Options | undefined} options
  */
-const getSuggestedScript = async (scriptName, options = { sudo: false }) => {
-  let script = options.sudo ? 'sudo ' : '';
-  const isYarnProject = await exists(getPathFromCwd('yarn.lock'));
+const getSuggestedScript = (scriptName, options = { sudo: false }) => {
+  const packageScriptName = findPackageScriptName(`sku ${scriptName}`);
 
-  try {
-    const packageScript = findPackageScript(`sku ${scriptName}`);
+  const command = packageScriptName
+    ? getRunCommand(packageScriptName)
+    : getExecuteCommand(['sku', scriptName]);
 
-    if (packageScript) {
-      script += `${isYarnProject ? 'yarn' : 'npm run'} ${packageScript}`;
-    } else {
-      script += `${isYarnProject ? 'yarn' : 'npx'} sku ${scriptName}`;
-    }
-  } catch (err) {
-    script += `npx sku ${scriptName}`;
-  }
+  const sudoPrefix = options.sudo ? 'sudo ' : '';
 
-  return script;
+  return `${sudoPrefix}${command}`;
 };
 
 /**
  * @param {string} scriptName
  * @param {Options | undefined} options
  */
-const suggestScript = async (scriptName, options) => {
-  const suggestedScript = await getSuggestedScript(scriptName, options);
+const suggestScript = (scriptName, options) => {
+  const suggestedScript = getSuggestedScript(scriptName, options);
 
   console.log(
     chalk.blue(`To fix this issue, run '${chalk.bold(suggestedScript)}'`),
@@ -62,5 +58,4 @@ const suggestScript = async (scriptName, options) => {
 
 module.exports = {
   suggestScript,
-  getSuggestedScript,
 };

package/lib/validatePeerDeps.js

@@ -1,3 +1,5 @@
+const { getWhyCommand } = require('./packageManager');
+
 const { readFile } = require('fs/promises');
 const glob = require('fast-glob');
 const semver = require('semver');
@@ -5,7 +7,6 @@ const chalk = require('chalk');
 
 const banner = require('./banner');
 const track = require('../telemetry');
-const detectYarn = require('./detectYarn');
 const { cwd, getPathFromCwd } = require('../lib/cwd');
 const { paths } = require('../context');
 
@@ -55,11 +56,9 @@ module.exports = async () => {
             .join('\n'),
         );
 
-        if (detectYarn()) {
-          messages.push(
-            chalk`Try running "{blue.bold yarn why} {bold ${packageName}}" to diagnose the issue`,
-          );
-        }
+        messages.push(
+          chalk`Try running "{blue.bold ${getWhyCommand()}} {bold ${packageName}}" to diagnose the issue`,
+        );
 
         track.count('duplicate_compile_package', {
           compile_package: packageName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.3.2",
+  "version": "12.4.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -25,6 +25,7 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@antfu/ni": "^0.21.8",
     "@babel/core": "^7.21.8",
     "@babel/plugin-transform-react-constant-elements": "^7.21.3",
     "@babel/plugin-transform-react-inline-elements": "^7.21.0",
@@ -38,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.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@storybook/builder-webpack5": "^7.0.17",
     "@storybook/cli": "^7.0.17",
     "@storybook/react": "^7.0.17",
@@ -96,7 +97,6 @@
     "less": "^4.1.0",
     "less-loader": "^11.1.3",
     "lint-staged": "^11.1.1",
-    "lodash": "^4.17.21",
     "memoizee": "^0.4.15",
     "mini-css-extract-plugin": "^2.6.1",
     "node-emoji": "^2.1.0",
@@ -108,7 +108,6 @@
     "prettier": "^2.8.8",
     "pretty-ms": "^7.0.1",
     "react-refresh": "^0.14.0",
-    "require-from-string": "^2.0.2",
     "rimraf": "^5.0.0",
     "selfsigned": "^2.1.1",
     "semver": "^7.3.4",
@@ -116,15 +115,15 @@
     "serve-handler": "^6.1.3",
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.4",
-    "traverse": "^0.6.6",
     "tree-kill": "^1.2.1",
-    "typescript": "~5.1.0",
+    "typescript": "~5.2.0",
     "validate-npm-package-name": "^5.0.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",
-    "webpack-dev-server": "4.11.1",
+    "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",
+    "which": "^4.0.0",
     "wrap-ansi": "^7.0.0",
     "x-default-browser": "^0.5.0"
   },
@@ -133,15 +132,14 @@
     "@types/express": "^4.17.11",
     "@types/react": "^18.2.3",
     "@types/react-dom": "^18.2.3",
+    "@types/which": "^3.0.0",
     "@vanilla-extract/css": "^1.0.0",
     "@vocab/react": "^1.0.1",
-    "assert": "^2.0.0",
     "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^5.2.0",
-    "webpack-cli": "^5.0.0"
+    "react-router-dom": "^5.2.0"
   },
   "scripts": {
     "postinstall": "node ./scripts/postinstall.js"

package/scripts/build-storybook.js

@@ -1,29 +1,26 @@
 // First, ensure the build is running in production mode
 process.env.NODE_ENV = 'production';
 
-const path = require('path');
 const { rimraf } = require('rimraf');
-const { argv } = require('../config/args');
+const { argv, config } = require('../config/args');
 const gracefulSpawn = require('../lib/gracefulSpawn');
 const { storybookTarget } = require('../context');
 const buildStorybookPath = require.resolve('@storybook/cli/bin/index');
-const configDir = path.resolve(__dirname, '../config/storybook/build');
 const { runVocabCompile } = require('../lib/runVocab');
-const { setUpStorybookPreviewFile } = require('../lib/storybook');
+const { setUpStorybookConfigDirectory } = require('../lib/storybook');
 
 (async () => {
   await runVocabCompile();
   await rimraf(storybookTarget);
-  await setUpStorybookPreviewFile(configDir);
+  await setUpStorybookConfigDirectory();
 
   argv.push('build');
-  argv.push('--config-dir', configDir);
   argv.push('--output-dir', storybookTarget);
   argv.push('--quiet');
 
   const storybookProcess = gracefulSpawn(buildStorybookPath, argv, {
     stdio: 'inherit',
-    env: process.env,
+    env: { ...process.env, SKU_CONFIG: config },
   });
 
   storybookProcess.on('exit', (exitCode) => {

package/scripts/init.js

@@ -1,5 +1,12 @@
 #!/usr/bin/env node
 
+const {
+  packageManager,
+  getRunCommand,
+  getPackageManagerInstallPage,
+  getInstallCommand,
+} = require('../lib/packageManager');
+
 const chalk = require('chalk');
 const fs = require('fs/promises');
 const { posix: path } = require('path');
@@ -7,7 +14,6 @@ const emptyDir = require('empty-dir');
 const validatePackageName = require('validate-npm-package-name');
 const dedent = require('dedent');
 const { setCwd } = require('../lib/cwd');
-const detectYarn = require('../lib/detectYarn');
 const prettierWrite = require('../lib/runPrettier').write;
 const esLintFix = require('../lib/runESLint').fix;
 const configure = require('../lib/configure');
@@ -69,8 +75,6 @@ const getTemplateFileDestinationFromRoot =
     process.exit(1);
   }
 
-  const verbose = args.argv.indexOf('--verbose') >= 0;
-
   const root = path.resolve(projectName);
   setCwd(root);
 
@@ -147,8 +151,6 @@ const getTemplateFileDestinationFromRoot =
   await fs.writeFile(path.join(root, 'package.json'), packageJsonString);
   process.chdir(root);
 
-  const useYarn = detectYarn();
-
   const templateDirectory = path.join(toPosixPath(__dirname), '../template');
   const templateFiles = await glob(`${templateDirectory}/**/*`, {
     onlyFiles: true,
@@ -159,33 +161,27 @@ const getTemplateFileDestinationFromRoot =
     templateDirectory,
   );
 
+  const templateData = {
+    appName,
+    gettingStartedDocs: dedent`
+      First of all, make sure you've installed [${packageManager}](${getPackageManagerInstallPage()}).
+
+      Then, install dependencies:
+
+      \`\`\`sh
+      $ ${getInstallCommand()}
+      \`\`\`
+      `,
+    startScript: getRunCommand('start'),
+    testScript: getRunCommand('test'),
+    lintScript: getRunCommand('lint'),
+    formatScript: getRunCommand('format'),
+    buildScript: getRunCommand('build'),
+  };
+
   await Promise.all(
     templateFiles.map(async (file) => {
-      const fileContents = await ejs.renderFile(file, {
-        appName,
-        gettingStartedDocs: useYarn
-          ? dedent`
-            First of all, make sure you've installed [Yarn](https://yarnpkg.com).
-
-            Then, install dependencies:
-
-            \`\`\`bash
-            $ yarn
-            \`\`\`
-            `
-          : dedent`
-            Install dependencies:
-
-            \`\`\`bash
-            $ npm install
-            \`\`\`
-            `,
-        startScript: useYarn ? 'yarn start' : 'npm start',
-        testScript: useYarn ? 'yarn test' : 'npm test',
-        lintScript: useYarn ? 'yarn lint' : 'npm run lint',
-        formatScript: useYarn ? 'yarn format' : 'npm run format',
-        buildScript: useYarn ? 'yarn build' : 'npm run build',
-      });
+      const fileContents = await ejs.renderFile(file, templateData);
       const destination = getTemplateFileDestination(file);
 
       // Ensure folders exist before writing files to them
@@ -203,7 +199,11 @@ const getTemplateFileDestinationFromRoot =
     '@types/react-dom',
   ];
 
-  console.log('Installing packages. This might take a couple of minutes.');
+  console.log(
+    `Installing packages with ${chalk.bold(
+      packageManager,
+    )}. This might take a couple of minutes.`,
+  );
   console.log(
     `Installing ${deps
       .concat(devDeps)
@@ -212,8 +212,15 @@ const getTemplateFileDestinationFromRoot =
   );
   console.log();
 
-  await install({ deps, verbose, useYarn });
-  await install({ deps: devDeps, type: 'dev', exact: false, verbose, useYarn });
+  const logLevel = args.argv.indexOf('--verbose') >= 0 ? 'verbose' : 'regular';
+
+  await install({ deps, logLevel });
+  await install({
+    deps: devDeps,
+    type: 'dev',
+    logLevel,
+    exact: false,
+  });
 
   await configure();
   await esLintFix();
@@ -221,7 +228,7 @@ const getTemplateFileDestinationFromRoot =
 
   const nextSteps = [
     `${chalk.cyan('cd')} ${projectName}`,
-    `${chalk.cyan('yarn start')}`,
+    `${chalk.cyan(getRunCommand('start'))}`,
   ]
     .filter(Boolean)
     .join('\n');

package/scripts/serve.js

@@ -2,7 +2,6 @@ const path = require('path');
 const exists = require('../lib/exists');
 const express = require('express');
 const handler = require('serve-handler');
-const flatMap = require('lodash/flatMap');
 const { blue, bold, underline, red } = require('chalk');
 const didYouMean = require('didyoumean2').default;
 
@@ -94,7 +93,7 @@ const preferredSite = args.site;
 
     const site = getSiteForHost(hostname, preferredSite) || '';
 
-    const rewrites = flatMap(routes, (route) =>
+    const rewrites = routes.flatMap((route) =>
       getValidLanguagesForRoute(route).map((lang) => {
         const langRoute = getRouteWithLanguage(route.route, lang);
 

package/scripts/start-ssr.js

@@ -3,7 +3,6 @@ process.env.NODE_ENV = 'development';
 const path = require('path');
 const WebpackDevServer = require('webpack-dev-server');
 const webpack = require('webpack');
-const { once } = require('lodash');
 const onDeath = require('death');
 const { blue, underline } = require('chalk');
 const debug = require('debug')('sku:start');
@@ -29,6 +28,20 @@ const hot = process.env.SKU_HOT !== 'false';
 const pluginName = 'sku-start-ssr';
 const localhost = '0.0.0.0';
 
+const once = (fn) => {
+  let called = false;
+  let result;
+
+  return (...fnArgs) => {
+    if (!called) {
+      result = fn(...fnArgs);
+      called = true;
+    }
+
+    return result;
+  };
+};
+
 (async () => {
   await watchVocabCompile();