sku 12.4.0 → 12.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # sku
 
+## 12.4.2
+
+### Patch Changes
+
+- Better support for setting `displayName` on React components when [`displayNamesProd`](https://seek-oss.github.io/sku/#/./docs/configuration?id=displaynamesprod) is true. ([#894](https://github.com/seek-oss/sku/pull/894))
+
+## 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

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/babel/babelConfig.js

@@ -51,7 +51,7 @@ module.exports = ({
     );
 
     if (displayNamesProd) {
-      plugins.push(require.resolve('babel-plugin-add-react-displayname'));
+      plugins.push(require.resolve('@zendesk/babel-plugin-react-displayname'));
     }
 
     if (removeAssertionsInProduction) {

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

@@ -3,8 +3,8 @@
  * https://github.com/storybookjs/storybook/pull/23018
  */
 
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 const {
   paths,
   storybookAddons,

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/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,7 +1,7 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const nodeExternals = require('webpack-node-externals');
-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');

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

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const nodeExternals = require('webpack-node-externals');

package/context/defaultCompilePackages.js

@@ -1,4 +1,4 @@
-const { posix: path } = require('path');
+const { posix: path } = require('node:path');
 const chalk = require('chalk');
 const glob = require('fast-glob');
 
@@ -14,8 +14,6 @@ try {
   const globs = ['node_modules/@seek/*/package.json'];
   const cwd = skuCwd();
 
-  // `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),

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');

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,7 +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');

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();
 

package/lib/exists.js

@@ -1,4 +1,4 @@
-const { access } = require('fs/promises');
+const { access } = require('node:fs/promises');
 
 /**
  * Convenience wrapper for fs.access that returns `true` if the access check was successful and `false` otherwise

package/lib/gracefulSpawn.js

@@ -1,4 +1,4 @@
-const { promisify } = require('util');
+const { promisify } = require('node:util');
 const spawn = require('cross-spawn');
 const treeKillAsync = promisify(require('tree-kill'));
 const onDeath = require('death');

package/lib/hosts.js

@@ -1,4 +1,4 @@
-const { promisify } = require('util');
+const { promisify } = require('node:util');
 const hostile = require('hostile');
 const { red, yellow, bold } = require('chalk');
 

package/lib/openBrowser/index.js

@@ -1,7 +1,7 @@
 // Inspired by create-react-app
 // https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/openBrowser.js
 
-const execSync = require('child_process').execSync;
+const execSync = require('node:child_process').execSync;
 const defaultBrowser = require('x-default-browser');
 const open = require('open');
 

package/lib/runBin.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const spawn = require('cross-spawn');
 
 /**

package/lib/runESLint.js

@@ -3,6 +3,7 @@ const { yellow, cyan, gray } = require('chalk');
 const { ESLint } = require('eslint');
 const eslintConfig = require('../config/eslint/eslintConfig');
 const { lintExtensions } = require('./lint');
+const assert = require('node:assert');
 
 const extensions = lintExtensions.map((ext) => `.${ext}`);
 
@@ -57,7 +58,9 @@ const runESLint = async ({ fix = false, paths }) => {
         }
       }
     } catch (e) {
-      if (e && e.message && e.message.includes('No files matching')) {
+      assert(e instanceof Error);
+
+      if (e.message.includes('No files matching')) {
         console.warn(yellow(`Warning: ${e.message}`));
       } else {
         console.warn(yellow('ESLint encountered an error:'));

package/lib/runPrettier.js

@@ -1,5 +1,5 @@
 const exists = require('./exists');
-const path = require('path');
+const path = require('node:path');
 const chalk = require('chalk');
 const { runBin } = require('./runBin');
 const { getPathFromCwd } = require('./cwd');

package/lib/serverManager.js

@@ -1,5 +1,5 @@
 const debug = require('debug')('sku:server-watcher');
-const cluster = require('cluster');
+const cluster = require('node:cluster');
 
 /**
  * @param {string} serverFilePath

package/lib/storybook.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 debug = require('debug');
 
 const log = debug('sku:storybook');

package/lib/toPosixPath.js

@@ -1,5 +1,5 @@
 // @ts-check
-const path = require('path');
+const path = require('node:path');
 
 /**
  * Replaces all win32 path separators (\) with posix path separators (/)

package/lib/validateLessFiles.js

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 const glob = require('fast-glob');
 const chalk = require('chalk');
 

package/lib/validatePeerDeps.js

@@ -1,6 +1,6 @@
 const { getWhyCommand } = require('./packageManager');
 
-const { readFile } = require('fs/promises');
+const { readFile } = require('node:fs/promises');
 const glob = require('fast-glob');
 const semver = require('semver');
 const chalk = require('chalk');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.4.0",
+  "version": "12.4.2",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -52,10 +52,10 @@
     "@vocab/phrase": "^1.2.4",
     "@vocab/pseudo-localize": "^1.0.1",
     "@vocab/webpack": "^1.2.1",
+    "@zendesk/babel-plugin-react-displayname": "zendesk/babel-plugin-react-displayname#7a837f2",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^29.0.0",
     "babel-loader": "^9.1.2",
-    "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -81,7 +81,7 @@
     "esbuild-register": "^3.3.3",
     "escape-string-regexp": "^4.0.0",
     "eslint": "^8.41.0",
-    "eslint-config-seek": "^11.3.1",
+    "eslint-config-seek": "^12.0.1",
     "exception-formatter": "^2.1.2",
     "express": "^4.16.3",
     "fast-glob": "^3.2.5",
@@ -128,6 +128,7 @@
     "x-default-browser": "^0.5.0"
   },
   "devDependencies": {
+    "@types/cross-spawn": "^6.0.3",
     "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.11",
     "@types/react": "^18.2.3",

package/scripts/build-ssr.js

@@ -1,7 +1,7 @@
 // First, ensure the build is running in production mode
 process.env.NODE_ENV = 'production';
 
-const { performance } = require('perf_hooks');
+const { performance } = require('node:perf_hooks');
 const prettyMilliseconds = require('pretty-ms');
 const webpack = require('webpack');
 const { green, red } = require('chalk');

package/scripts/build.js

@@ -4,7 +4,7 @@ process.env.NODE_ENV = 'production';
 const prettyMilliseconds = require('pretty-ms');
 const { green, red } = require('chalk');
 const webpack = require('webpack');
-const { performance } = require('perf_hooks');
+const { performance } = require('node:perf_hooks');
 
 const {
   copyPublicFiles,

package/scripts/init.js

@@ -8,8 +8,8 @@ const {
 } = require('../lib/packageManager');
 
 const chalk = require('chalk');
-const fs = require('fs/promises');
-const { posix: path } = require('path');
+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 dedent = require('dedent');

package/scripts/postinstall.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const fs = require('fs');
+const fs = require('node:fs');
 const { setCwd, getPathFromCwd, cwd } = require('../lib/cwd');
 const debug = require('debug');
 const banner = require('../lib/banner');

package/scripts/serve.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const exists = require('../lib/exists');
 const express = require('express');
 const handler = require('serve-handler');

package/scripts/start-ssr.js

@@ -1,6 +1,6 @@
 process.env.NODE_ENV = 'development';
 
-const path = require('path');
+const path = require('node:path');
 const WebpackDevServer = require('webpack-dev-server');
 const webpack = require('webpack');
 const onDeath = require('death');

package/scripts/test.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('node:path');
 const debug = require('debug');
 const jest = require('jest');
 

package/sku-types.d.ts

@@ -39,7 +39,7 @@ interface SkuRouteObject {
   route: string;
   name?: string;
   entry?: string;
-  languages?: ReadonlyArray<string>;
+  languages?: readonly string[];
 }
 
 type SkuRoute = string | SkuRouteObject;
@@ -47,8 +47,8 @@ type SkuRoute = string | SkuRouteObject;
 interface SkuSiteObject {
   name: string;
   host?: string;
-  routes?: ReadonlyArray<SkuRoute>;
-  languages?: ReadonlyArray<string>;
+  routes?: readonly SkuRoute[];
+  languages?: readonly string[];
 }
 
 type SkuSite = string | SkuSiteObject;
@@ -159,7 +159,7 @@ export interface SkuConfig {
    * @default []
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=environments
    */
-  environments?: ReadonlyArray<string>;
+  environments?: readonly string[];
 
   /**
    * By default, sku compiles all node_modules in builds that target node.
@@ -177,7 +177,7 @@ export interface SkuConfig {
    * @default ['localhost']
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=hosts
    */
-  hosts?: ReadonlyArray<string>;
+  hosts?: readonly string[];
 
   /**
    * Whether or not to use https for the local development server with a self-signed certificate.
@@ -202,7 +202,7 @@ export interface SkuConfig {
    *
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=languages
    */
-  languages?: ReadonlyArray<SkuLanguage>;
+  languages?: readonly SkuLanguage[];
 
   /**
    * **Only for libraries**
@@ -317,7 +317,7 @@ export interface SkuConfig {
    * @default ['/']
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=routes
    */
-  routes?: ReadonlyArray<SkuRoute>;
+  routes?: readonly SkuRoute[];
 
   /**
    * **Only for SSR apps**
@@ -354,7 +354,7 @@ export interface SkuConfig {
    * @default []
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=sites
    */
-  sites?: ReadonlyArray<SkuSite>;
+  sites?: readonly SkuSite[];
 
   /**
    * When running `sku build`, sku will compile all your external packages (`node_modules`) through `@babel/preset-env`.

package/telemetry/index.js

@@ -1,4 +1,4 @@
-const os = require('os');
+const os = require('node:os');
 
 const { getPathFromCwd } = require('../lib/cwd');
 const isCI = require('../lib/isCI');

package/tsconfig.json

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