sku 12.3.3 → 12.4.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # sku
 
+## 12.4.0
+
+### Minor Changes
+
+- Enable caching for ESLint and Prettier ([#881](https://github.com/seek-oss/sku/pull/881))
+
+- Add `--packageManager` flag ([#884](https://github.com/seek-oss/sku/pull/884))
+
+  Sku detects package managers in the following order: `yarn` -> `pnpm` -> `npm`.
+  The `--packageManager` flag can be used to override the package manager used for the `sku init` script.
+  This affects what package manager is used to install dependencies, as well as the scripts present in the initialized app template.
+
+  ```sh
+  $ pnpm dlx sku init --packageManager pnpm my-app
+  ```
+
+- Adds support for Storybook configuration via the `.storybook` directory ([#878](https://github.com/seek-oss/sku/pull/878))
+
+  sku now supports the standard `.storybook` configuration directory, as documented in [Storybook's configuration documentation].
+  Please read [sku's storybook documentation][sku storybook docs] for more info.
+
+  [Storybook's configuration documentation]: https://storybook.js.org/docs/react/configure/overview
+  [sku storybook docs]: https://seek-oss.github.io/sku/#/./docs/storybook
+
+- Drop support for running `devServerMiddleware` alongside `sku storybook` ([#878](https://github.com/seek-oss/sku/pull/878))
+
+  Now that sku supports Storybook configuration via the `.storybook` directory, this feature is unnecessary.
+  Storybook middleware can be configured by creating a `middleware.js` file in the `.storybook` directory.
+  See [the sku docs][sku storybook middleware] for more info.
+
+  **NOTE**: While this is technically a breaking change, it does not affect app builds, therefore it has been downgraded to a `minor` release.
+
+  [sku storybook middleware]: https://seek-oss.github.io/sku/#/./docs/storybook?id=devserver-middleware
+
+- Update TypeScript to 5.2 ([#886](https://github.com/seek-oss/sku/pull/886))
+
+  This release includes breaking changes. See the [TypeScript 5.2 announcement][ts52] for more information.
+
+  [ts52]: https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/
+
+### Patch Changes
+
+- Fixes a bug where sku would fail to suggest existing `package.json` scripts before suggesting its own commands ([#876](https://github.com/seek-oss/sku/pull/876))
+
+- Remove `lodash` dependency ([#883](https://github.com/seek-oss/sku/pull/883))
+
+- Propagate `--config` argument to Storybook process ([#879](https://github.com/seek-oss/sku/pull/879))
+
+  Fixes a bug where `sku storybook` and `sku build-storybook` would not honour a custom sku config specified via the `--config` flag
+
+- Fixes a bug where `pnpm` was not detected correctly when detecting [compile packages](https://seek-oss.github.io/sku/#/./docs/extra-features?id=compile-packages) ([#876](https://github.com/seek-oss/sku/pull/876))
+
+- Bump `@pmmmwh/react-refresh-webpack-plugin` and `webpack-dev-server` dependencies. Remove unused dependencies. ([#885](https://github.com/seek-oss/sku/pull/885))
+
+- Adds support for `pnpm` when suggesting commands ([#876](https://github.com/seek-oss/sku/pull/876))
+
+- Disable Storybook telemetry ([#878](https://github.com/seek-oss/sku/pull/878))
+
 ## 12.3.3
 
 ### Patch Changes

package/README.md

@@ -23,13 +23,17 @@ Create a new project and start a local development environment:
 ```bash
 $ npx sku init my-app
 $ cd my-app
-$ npm start
+$ yarn start
 ```
 
-Don't have [npx](https://www.npmjs.com/package/npx)?
+By default, a new project's dependencies will be installed with the first supported package manager detected on your system.
+Package managers are detected in the following order: `yarn` -> `pnpm` -> `npm`.
+This can be overridden via the `--packageManager` flag:
 
 ```bash
-$ npm install -g npx
+$ pnpm dlx sku init --packageManager pnpm my-app
+$ cd my-app
+$ pnpm start
 ```
 
 ## [Documentation](https://seek-oss.github.io/sku)

package/config/lintStaged/lintStagedConfig.js

@@ -1,11 +1,14 @@
-const isYarn = require('../../lib/isYarn');
+const { isYarn } = require('../../lib/packageManager');
 const { lintExtensions } = require('../../lib/lint');
+const { getCommand } = require('@antfu/ni');
 
 const steps = {};
 
 // Yarn lock integrity check
 if (isYarn) {
-  steps['+(package.json|yarn.lock)'] = [() => 'yarn install --check-files'];
+  steps['+(package.json|yarn.lock)'] = [
+    () => getCommand('yarn', 'install', ['--check-files']),
+  ];
 }
 
 // Format & lint

package/config/storybook/index.js

@@ -0,0 +1,75 @@
+/**
+ * This file and all its dependencies must be CJS
+ * https://github.com/storybookjs/storybook/pull/23018
+ */
+
+const fs = require('fs');
+const path = require('path');
+const {
+  paths,
+  storybookAddons,
+  storybookStoryStore,
+} = require('../../context');
+
+const makeStorybookWebpackConfig = require('./storybookWebpackConfig');
+
+/** @type {import("@storybook/react-webpack5").StorybookConfig} */
+module.exports = {
+  stories: paths.src
+    .filter((srcPath) => fs.statSync(srcPath).isDirectory())
+    .map((srcPath) => path.join(srcPath, '**/*.stories.@(js|ts|tsx)')),
+  addons: storybookAddons,
+  framework: {
+    // Storybook looks for a `/preset` entrypoint on the framework package,
+    // so we give it the dirname of the resolved path to package.json
+    // https://github.com/storybookjs/storybook/blob/aecfa1791f982bef6a06b51d20df3e31dd82b5b4/code/lib/core-common/src/utils/validate-config.ts#L34
+    name: path.dirname(
+      require.resolve('@storybook/react-webpack5/package.json'),
+    ),
+    options: {},
+  },
+  core: {
+    builder: {
+      name: require.resolve('@storybook/builder-webpack5'),
+      options: {
+        fsCache: true,
+      },
+    },
+    disableTelemetry: true,
+  },
+  features: {
+    storyStoreV7: storybookStoryStore,
+  },
+  // sku storybook -> configType === 'DEVELOPMENT'
+  // sku build-storybook -> configType === 'PRODUCTION'
+  webpackFinal: (config, { configType }) =>
+    makeStorybookWebpackConfig(config, {
+      isDevServer: configType === 'DEVELOPMENT',
+    }),
+  babel: (config) => ({
+    ...config,
+    presets: [
+      // Includes `@babel/preset-react`
+      ...config.presets,
+
+      // Storybook as of 7.0 no longer handles babel stuff for you (other than react)
+      // We need to configure TypeScript support ourselves, if we want it
+      // https://github.com/storybookjs/storybook/issues/22357#issuecomment-1532548058
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          targets: {
+            chrome: 100,
+          },
+        },
+      ],
+      [
+        require.resolve('@babel/preset-typescript'),
+        {
+          allExtensions: true,
+          isTSX: true,
+        },
+      ],
+    ],
+  }),
+};

package/config/storybook/storybookWebpackConfig.js

@@ -1,20 +1,20 @@
 const { paths } = require('../../context');
-const find = require('lodash/find');
 const { merge: webpackMerge } = require('webpack-merge');
 const makeWebpackConfig = require('../webpack/webpack.config');
 const { resolvePackage } = require('../webpack/utils/resolvePackage');
 
 const hot = process.env.SKU_HOT !== 'false';
 
-module.exports = ({ config }, { isDevServer }) => {
-  const clientWebpackConfig = find(
-    makeWebpackConfig({
-      isIntegration: true,
-      isDevServer,
-      hot: isDevServer && hot,
-    }),
-    ({ name }) => name === 'client',
-  );
+/**
+ * @param {import("webpack").Configuration} config
+ * @param {{isDevServer: boolean}}
+ */
+module.exports = (config, { isDevServer }) => {
+  const clientWebpackConfig = makeWebpackConfig({
+    isIntegration: true,
+    isDevServer,
+    hot: isDevServer && hot,
+  }).find(({ name }) => name === 'client');
 
   // Ensure Storybook's webpack loaders ignore our code :(
   if (config && config.module && Array.isArray(config.module.rules)) {

package/config/webpack/plugins/sku-webpack-plugin/index.js

@@ -1,5 +1,4 @@
 const webpack = require('webpack');
-const uniq = require('lodash/uniq');
 const defaultSupportedBrowsers = require('browserslist-config-seek');
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 const {
@@ -32,10 +31,9 @@ class SkuWebpackPlugin {
       rootResolution: false,
       ...options,
     };
-    this.compilePackages = uniq([
-      ...defaultCompilePackages,
-      ...this.options.compilePackages,
-    ]);
+    this.compilePackages = [
+      ...new Set([...defaultCompilePackages, ...this.options.compilePackages]),
+    ];
     this.include = [
       ...this.options.include,
       ...this.compilePackages.map(resolvePackage),

package/config/webpack/webpack.config.js

@@ -1,7 +1,6 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const nodeExternals = require('webpack-node-externals');
-const lodash = require('lodash');
 const path = require('path');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
@@ -16,6 +15,7 @@ const { VocabWebpackPlugin } = require('@vocab/webpack');
 
 const utils = require('./utils');
 const { cwd } = require('../../lib/cwd');
+const { stringifyEnvarValues } = require('../../lib/env');
 
 const renderEntry = require.resolve('../../entry/render');
 const libraryRenderEntry = require.resolve('../../entry/libraryRender');
@@ -58,28 +58,11 @@ const makeWebpackConfig = ({
 
   const vocabOptions = getVocabConfig();
 
-  const envVars = lodash
-    .chain(env)
-    .mapValues((value, key) => {
-      if (typeof value !== 'object') {
-        return JSON.stringify(value);
-      }
-
-      const valueForEnv = value[args.env];
-
-      if (typeof valueForEnv === 'undefined') {
-        console.log(
-          `WARNING: Environment variable "${key}" is missing a value for the "${args.env}" environment`,
-        );
-        process.exit(1);
-      }
-
-      return JSON.stringify(valueForEnv);
-    })
-    .set('SKU_ENV', JSON.stringify(args.env))
-    .set('PORT', JSON.stringify(port))
-    .mapKeys((value, key) => `process.env.${key}`)
-    .value();
+  const envars = stringifyEnvarValues({
+    ...env,
+    SKU_ENV: args.env,
+    PORT: port,
+  });
 
   const resolvedPolyfills = polyfills.map((polyfill) => {
     return require.resolve(polyfill, { paths: [cwd()] });
@@ -220,7 +203,7 @@ const makeWebpackConfig = ({
         ...(isDevServer || isIntegration
           ? []
           : [bundleAnalyzerPlugin({ name: 'client' })]),
-        new webpack.DefinePlugin(envVars),
+        new webpack.DefinePlugin(envars),
         new webpack.DefinePlugin({
           __SKU_CLIENT_PATH__: JSON.stringify(
             path.relative(cwd(), paths.clientEntry),
@@ -309,7 +292,7 @@ const makeWebpackConfig = ({
       },
       plugins: [
         ...(htmlRenderPlugin ? [htmlRenderPlugin.rendererPlugin] : []),
-        new webpack.DefinePlugin(envVars),
+        new webpack.DefinePlugin(envars),
         new webpack.DefinePlugin({
           __SKU_LIBRARY_NAME__: JSON.stringify(libraryName),
           __SKU_LIBRARY_FILE__: JSON.stringify(libraryFile),

package/config/webpack/webpack.config.ssr.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const lodash = require('lodash');
 const nodeExternals = require('webpack-node-externals');
 const findUp = require('find-up');
 const LoadablePlugin = require('@loadable/webpack-plugin');
@@ -16,6 +15,7 @@ const args = require('../args');
 const { bundleAnalyzerPlugin } = require('./plugins/bundleAnalyzer');
 const utils = require('./utils');
 const { cwd } = require('../../lib/cwd');
+const { stringifyEnvarValues } = require('../../lib/env');
 const {
   paths,
   env,
@@ -48,27 +48,10 @@ const makeWebpackConfig = ({
 
   const vocabOptions = getVocabConfig();
 
-  const envVars = lodash
-    .chain(env)
-    .mapValues((value, key) => {
-      if (typeof value !== 'object') {
-        return JSON.stringify(value);
-      }
-
-      const valueForEnv = value[args.env];
-
-      if (typeof valueForEnv === 'undefined') {
-        console.log(
-          `WARNING: Environment variable "${key}" is missing a value for the "${args.env}" environment`,
-        );
-        process.exit(1);
-      }
-
-      return JSON.stringify(valueForEnv);
-    })
-    .set('SKU_ENV', JSON.stringify(args.env))
-    .mapKeys((value, key) => `process.env.${key}`)
-    .value();
+  const envars = stringifyEnvarValues({
+    ...env,
+    SKU_ENV: args.env,
+  });
 
   const internalInclude = [path.join(__dirname, '../../entry'), ...paths.src];
 
@@ -173,7 +156,7 @@ const makeWebpackConfig = ({
         ],
       },
       plugins: [
-        new webpack.DefinePlugin(envVars),
+        new webpack.DefinePlugin(envars),
         new LoadablePlugin({
           filename: webpackStatsFilename,
           writeToDisk: true,
@@ -268,7 +251,7 @@ const makeWebpackConfig = ({
         rules: [{ test: /\.mjs$/, type: 'javascript/auto' }],
       },
       plugins: [
-        new webpack.DefinePlugin(envVars),
+        new webpack.DefinePlugin(envars),
         new webpack.DefinePlugin({
           __SKU_DEFAULT_SERVER_PORT__: JSON.stringify(serverPort),
           __SKU_PUBLIC_PATH__: JSON.stringify(publicPath),

package/context/defaultCompilePackages.js

@@ -5,7 +5,7 @@ const glob = require('fast-glob');
 const { cwd: skuCwd } = require('../lib/cwd');
 const toPosixPath = require('../lib/toPosixPath');
 
-const { findRootSync } = require('@manypkg/find-root');
+const { rootDir, isPnpm } = require('../lib/packageManager');
 
 /** @type {string[]} */
 let detectedCompilePackages = [];
@@ -14,9 +14,9 @@ try {
   const globs = ['node_modules/@seek/*/package.json'];
   const cwd = skuCwd();
 
-  const { rootDir, tool } = findRootSync(cwd);
-
-  if (tool === 'pnpm') {
+  // `rootDir` is nullable, but while we have `strict: false` in our TSConfig it won't appear nullable
+  // It will be null during sku init, but we don't really care about detecting compile packages at that point anyway
+  if (isPnpm && rootDir) {
     const pnpmVirtualStorePath = path.join(
       toPosixPath(rootDir),
       'node_modules/.pnpm',

package/context/index.js

@@ -19,8 +19,10 @@ const getSkuConfig = () => {
   const tsPath = getPathFromCwd('sku.config.ts');
   const jsPath = getPathFromCwd('sku.config.js');
 
-  if (args.config) {
-    appSkuConfigPath = getPathFromCwd(args.config);
+  const customSkuConfig = args.config || process.env.SKU_CONFIG;
+
+  if (customSkuConfig) {
+    appSkuConfigPath = getPathFromCwd(customSkuConfig);
   } else if (fs.existsSync(tsPath)) {
     appSkuConfigPath = tsPath;
   } else if (fs.existsSync(jsPath)) {
@@ -65,6 +67,9 @@ if (isCompilePackage && skuConfig.rootResolution) {
   process.exit(1);
 }
 
+/**
+ * @type {Record<string, unknown>}
+ */
 const env = {
   ...skuConfig.env,
   SKU_TENANT: args.tenant,

package/lib/configure.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+
 const { writeFile, rm } = require('fs/promises');
 const path = require('path');
 
@@ -13,12 +14,14 @@ const prettierConfig = require('../config/prettier/prettierConfig');
 const eslintConfig = require('../config/eslint/eslintConfig');
 const createTSConfig = require('../config/typescript/tsconfig.js');
 const getCertificate = require('./certificate');
+const { storybookMainConfigPath } = require('./storybook');
+const managedConfigBanner = require('./managedConfigBanner.js');
+
 const coverageFolder = 'coverage';
 
 const convertToForwardSlashPaths = (pathStr) => pathStr.replace(/\\/g, '/');
 const addSep = (p) => `${p}${path.sep}`;
-const prependBanner = (str) =>
-  `/** THIS FILE IS GENERATED BY SKU, MANUAL CHANGES WILL BE DISCARDED **/\n${str}`;
+const prependBanner = (str) => `${managedConfigBanner}\n${str}`;
 
 const writeFileToCWD = async (fileName, content, { banner = true } = {}) => {
   const outPath = getPathFromCwd(fileName);
@@ -33,11 +36,13 @@ module.exports = async () => {
   const gitIgnorePatterns = [
     addSep(bundleReportFolder),
     addSep(coverageFolder),
+    storybookMainConfigPath,
   ];
   const lintIgnorePatterns = [
     addSep(bundleReportFolder),
     addSep(coverageFolder),
     '*.less.d.ts',
+    storybookMainConfigPath,
   ];
 
   // Ignore webpack target directories
@@ -51,8 +56,9 @@ module.exports = async () => {
 
   // Generate ESLint configuration
   const eslintConfigFilename = '.eslintrc';
+  const eslintCacheFilename = '.eslintcache';
   await writeFileToCWD(eslintConfigFilename, eslintConfig);
-  gitIgnorePatterns.push(eslintConfigFilename);
+  gitIgnorePatterns.push(eslintConfigFilename, eslintCacheFilename);
 
   // Generate Prettier configuration
   // NOTE: We are not generating a banner as prettier does not support the `JSON

package/lib/env.js

@@ -0,0 +1,31 @@
+const args = require('../config/args');
+
+/**
+ * Stringify the values of an object of environment variables, prepending keys with
+ * `process.env.` in the process
+ * @param {Record<string, unknown>} envars An object of environment variables and their values
+ */
+const stringifyEnvarValues = (envars) => {
+  const entries = Object.entries(envars);
+
+  const stringifiedEntries = entries.map(([key, value]) => {
+    const newKey = `process.env.${key}`;
+
+    if (typeof value !== 'object') {
+      return [newKey, JSON.stringify(value)];
+    }
+
+    if (typeof value === 'undefined') {
+      console.log(
+        `WARNING: Environment variable "${key}" is missing a value for the "${args.env}" environment`,
+      );
+      process.exit(1);
+    }
+
+    return [newKey, JSON.stringify(value)];
+  });
+
+  return Object.fromEntries(stringifiedEntries);
+};
+
+module.exports = { stringifyEnvarValues };

package/lib/hosts.js

@@ -57,7 +57,7 @@ const checkHosts = async () => {
         );
       });
 
-      await suggestScript('setup-hosts', { sudo: true });
+      suggestScript('setup-hosts', { sudo: true });
     }
   } catch (e) {
     // swallow error as this just a warning check

package/lib/install.js

@@ -1,29 +1,14 @@
+const { getAddCommand } = require('./packageManager');
+
 const spawn = require('cross-spawn');
 
-module.exports = ({ deps, type, exact = true, verbose, useYarn }) =>
+/**
+ * @param {import("../lib/packageManager").GetAddCommandOptions} options
+ */
+module.exports = ({ deps, type, logLevel, exact = true }) =>
   new Promise((resolve, reject) => {
-    const command = useYarn ? 'yarnpkg' : 'npm';
-    const isDev = type === 'dev';
-
-    const args = useYarn
-      ? [
-          'add',
-          isDev ? '--dev' : null,
-          exact ? '--exact' : null,
-          ...deps,
-        ].filter((arg) => arg !== null)
-      : [
-          'install',
-          `--save${isDev ? '-dev' : ''}`,
-          exact ? '--save-exact' : null,
-          '--loglevel',
-          'error',
-          ...deps,
-        ].filter((arg) => arg !== null);
-
-    if (verbose) {
-      args.push('--verbose');
-    }
+    const addCommand = getAddCommand({ deps, type, logLevel, exact });
+    const [command, ...args] = addCommand.split(' ');
 
     const child = spawn(command, args, { stdio: 'inherit' });
 

package/lib/managedConfigBanner.js

@@ -0,0 +1 @@
+module.exports = `/** THIS FILE IS GENERATED BY SKU, MANUAL CHANGES WILL BE DISCARDED **/`;