sku 12.4.11 → 12.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # sku
 
+## 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/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/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/configure.js

@@ -32,27 +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),
+    webpackTargetDirectory,
+    storybookTargetDirectory,
     storybookMainConfigPath,
   ];
-  const lintIgnorePatterns = [
-    addSep(bundleReportFolder),
-    addSep(coverageFolder),
-    '*.less.d.ts',
-    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);
+  const lintIgnorePatterns = [...gitIgnorePatterns, '*.less.d.ts'];
 
   // Generate ESLint configuration
   const eslintConfigFilename = '.eslintrc';

package/lib/isEmptyDir.js

@@ -0,0 +1,20 @@
+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,58 +1,4 @@
-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,
-  },
-];
+const minimist = require('minimist');
 
 /**
  * Supports parsing args that look like:
@@ -60,16 +6,53 @@ const optionDefinitions = [
  *
  * @param {string[]} args - 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;
+  const [script, ...argv] = unknown;
 
   // Backwards compatibility for unnamed build name argument, to be deprecated
   const buildName = () => {
@@ -78,11 +61,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/toPosixPath.test.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.4.11",
+  "version": "12.5.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -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",
@@ -99,6 +97,7 @@
     "lint-staged": "^11.1.1",
     "memoizee": "^0.4.15",
     "mini-css-extract-plugin": "^2.6.1",
+    "minimist": "^1.2.8",
     "node-html-parser": "^6.1.1",
     "open": "^7.3.1",
     "path-to-regexp": "^6.2.0",
@@ -115,7 +114,7 @@
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.4",
     "tree-kill": "^1.2.1",
-    "typescript": "~5.2.0",
+    "typescript": "~5.3.0",
     "validate-npm-package-name": "^5.0.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",

package/scripts/init.js

@@ -10,7 +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 { isEmptyDir } = require('../lib/isEmptyDir');
 const validatePackageName = require('validate-npm-package-name');
 const dedent = require('dedent');
 const { setCwd } = require('../lib/cwd');
@@ -125,7 +125,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);
   }