sku 12.3.3 → 12.4.1

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # sku
 
+## 12.4.1
+
+### Patch Changes
+
+- Update eslint-config-seek to version 12, which includes the major bump to ESLint 7 and typescript-eslint 6. ([#892](https://github.com/seek-oss/sku/pull/892))
+  You can view the specific changes over in [eslint-config-seek].
+
+  The majority of changes should automatically fix when running `sku format`.
+
+  [eslint-config-seek]: https://github.com/seek-oss/eslint-config-seek/blob/master/CHANGELOG.md#1200
+
+## 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/bin/sku.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const fs = require('fs');
+const fs = require('node:fs');
 const debug = require('debug');
 const args = require('../config/args');
 const _validatePeerDeps = require('../lib/validatePeerDeps');

package/config/eslint/importOrderConfig.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const { paths, rootResolution } = require('../../context');
 
 const internalRegex = `^(${paths.src

package/config/jest/cssModulesTransform.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const getClassNames = require('./getClassNames');
 
 module.exports = {

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('node:fs');
+const path = require('node: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/metrics-plugin/index.js

@@ -1,4 +1,4 @@
-const { performance } = require('perf_hooks');
+const { performance } = require('node:perf_hooks');
 const prettyMilliseconds = require('pretty-ms');
 const debug = require('debug')('sku:metrics');
 const track = require('../../../../telemetry');

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/resolveModules.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 
 const modules = ['node_modules'];
 

package/config/webpack/utils/resolvePackage.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const memoize = require('memoizee');
 const debug = require('debug')('sku:resolvePackage');
 const { cwd } = require('../../../lib/cwd');
@@ -75,6 +75,6 @@ const createPackageResolver = (fs, resolve) => {
 };
 
 module.exports = {
-  resolvePackage: createPackageResolver(require('fs'), require.resolve),
+  resolvePackage: createPackageResolver(require('node:fs'), require.resolve),
   createPackageResolver,
 };

package/config/webpack/utils/resolvePackage.test.js

@@ -3,7 +3,9 @@ const { cwd } = require('../../../lib/cwd');
 
 describe('webpack utils', () => {
   describe('resolvePackage()', () => {
-    let resolvePackage, fs, resolve;
+    let resolvePackage;
+    let fs;
+    let resolve;
 
     beforeEach(() => {
       fs = {

package/config/webpack/webpack.config.js

@@ -1,8 +1,7 @@
 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 path = require('node:path');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const TerserPlugin = require('terser-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 path = require('node: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

@@ -1,11 +1,11 @@
-const { posix: path } = require('path');
+const { posix: path } = require('node:path');
 const chalk = require('chalk');
 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,7 @@ try {
   const globs = ['node_modules/@seek/*/package.json'];
   const cwd = skuCwd();
 
-  const { rootDir, tool } = findRootSync(cwd);
-
-  if (tool === 'pnpm') {
+  if (isPnpm && rootDir) {
     const pnpmVirtualStorePath = path.join(
       toPosixPath(rootDir),
       'node_modules/.pnpm',

package/context/defaultSkuConfig.js

@@ -1,5 +1,5 @@
 const supportedBrowsers = require('browserslist-config-seek');
-const path = require('path');
+const path = require('node:path');
 const isCompilePackage = require('../lib/isCompilePackage');
 
 const defaultDecorator = (a) => a;

package/context/index.js

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 const chalk = require('chalk');
 const { register } = require('esbuild-register/dist/node');
 const { getPathFromCwd } = require('../lib/cwd');
@@ -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/entry/csp.js

@@ -1,6 +1,6 @@
-import { createHash } from 'crypto';
+import { createHash } from 'node:crypto';
 import { parse, valid } from 'node-html-parser';
-import { URL } from 'url';
+import { URL } from 'node:url';
 
 const scriptTypeIgnoreList = ['application/json', 'application/ld+json'];
 

package/entry/server/index.js

@@ -1,6 +1,6 @@
-import fs from 'fs';
-import http from 'http';
-import https from 'https';
+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';
 

package/entry/server/server.js

@@ -1,5 +1,5 @@
 import { getChunkName } from '@vocab/webpack/chunk-name';
-import path from 'path';
+import path from 'node:path';
 import express from 'express';
 import makeExtractor from '../makeExtractor';
 import createCSPHandler from '../csp';

package/lib/buildFileUtils.js

@@ -1,5 +1,5 @@
-const path = require('path');
-const fs = require('fs/promises');
+const path = require('node:path');
+const fs = require('node:fs/promises');
 const { rimraf } = require('rimraf');
 
 const { paths } = require('../context');

package/lib/certificate.js

@@ -1,11 +1,17 @@
 const selfsigned = require('selfsigned');
 const { blue } = require('chalk');
 const exists = require('./exists');
-const { mkdir, unlink, writeFile, stat, readFile } = require('fs/promises');
+const {
+  mkdir,
+  unlink,
+  writeFile,
+  stat,
+  readFile,
+} = require('node:fs/promises');
 
 const { getPathFromCwd } = require('../lib/cwd');
 const { hosts } = require('../context');
-const { performance } = require('perf_hooks');
+const { performance } = require('node:perf_hooks');
 const track = require('../telemetry');
 
 const certificateTtl = 1000 * 60 * 60 * 24;

package/lib/configure.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
-const { writeFile, rm } = require('fs/promises');
-const path = require('path');
+
+const { writeFile, rm } = require('node:fs/promises');
+const path = require('node:path');
 
 const ensureGitignore = require('ensure-gitignore');
 const { cwd, getPathFromCwd } = require('./cwd');
@@ -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/copyDirContents.js

@@ -1,5 +1,5 @@
-const path = require('path');
-const fs = require('fs/promises');
+const path = require('node:path');
+const fs = require('node:fs/promises');
 const exists = require('./exists');
 
 /**

package/lib/createServer.js

@@ -1,5 +1,5 @@
-const http = require('http');
-const https = require('https');
+const http = require('node:http');
+const https = require('node:https');
 
 const { httpsDevServer } = require('../context');
 const getCertificate = require('./certificate');

package/lib/cwd.js

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