sku 12.6.2 → 12.7.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # sku
 
+## 12.7.0
+
+### Minor Changes
+
+- Update TypeScript from 5.3 to 5.5 ([#1003](https://github.com/seek-oss/sku/pull/1003))
+
+  Both the 5.4 and 5.5 releases include breaking changes. See the [TypeScript 5.4 announcement] and [TypeScript 5.5 announcement] for more information.
+
+  [typescript 5.4 announcement]: https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/
+  [typeScript 5.5 announcement]: https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/
+
+- Add support for `--watch` flag to `sku translations compile` ([#989](https://github.com/seek-oss/sku/pull/989))
+
+  The `sku translations compile` command now accepts a `--watch` flag. When this flag is provided, `translations.json` files will be re-compiled whenever changes are detected.
+
+  **EXAMPLE USAGE**:
+
+  ```sh
+  sku translations compile --watch
+  ```
+
+### Patch Changes
+
+- Update all `@vocab/*` dependencies ([#989](https://github.com/seek-oss/sku/pull/989))
+
+- Fixes a bug where the project name was not being reported correctly when sending telemetry ([#1001](https://github.com/seek-oss/sku/pull/1001))
+
+- Enable `babel-loader` cache ([#990](https://github.com/seek-oss/sku/pull/990))
+
+  Sku's webpack configuration now configures `babel-loader` to emit a cache to `node_modules/.cache/babel-loader`. The primary use case for this cache is speeding up production builds. It can also speed up local development in situations where the webpack cache is invalidated.
+
+- Minify build output with [SWC] ([#992](https://github.com/seek-oss/sku/pull/992))
+
+  Minification of production build output is now performed by [SWC]. Previously this was performed by [Terser]. This should result in a noticeable reduction in build times for larger projects, as well as a slight decrease in bundle size.
+
+  [swc]: https://swc.rs/docs/configuration/minification
+  [terser]: https://terser.org/
+
 ## 12.6.2
 
 ### Patch Changes

package/config/babel/babelConfig.js

@@ -94,6 +94,13 @@ module.exports = ({
   return {
     babelrc: false,
     sourceType: isBrowser ? 'unambiguous' : 'module',
+    // `babel-jest` does not support the `cacheDirectory` option.
+    // It is only used by `babel-loader`.
+    ...(!isJest
+      ? {
+          cacheDirectory: true,
+        }
+      : {}),
     presets,
     plugins,
   };

package/config/webpack/webpack.config.js

@@ -134,7 +134,17 @@ const makeWebpackConfig = ({
         // The 'TerserPlugin' is actually the default minimizer for webpack
         // We add a custom one to ensure licence comments stay inside the final JS assets
         // Without this a '*.js.LICENSE.txt' file would be created alongside
-        minimizer: [new TerserPlugin({ extractComments: false })],
+        minimizer: [
+          new TerserPlugin({
+            extractComments: false,
+            minify: TerserPlugin.swcMinify,
+            parallel: true,
+            terserOptions: {
+              compress: true,
+              mangle: true,
+            },
+          }),
+        ],
         concatenateModules: isProductionBuild,
         ...(!isLibrary
           ? {
@@ -176,6 +186,7 @@ const makeWebpackConfig = ({
                       loader: require.resolve('babel-loader'),
                       options: {
                         babelrc: false,
+                        cacheDirectory: true,
                         presets: [
                           [
                             require.resolve('@babel/preset-env'),

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

@@ -97,7 +97,17 @@ const makeWebpackConfig = ({
         // The 'TerserPlugin' is actually the default minimizer for webpack
         // We add a custom one to ensure licence comments stay inside the final JS assets
         // Without this a '*.js.LICENSE.txt' file would be created alongside
-        minimizer: [new TerserPlugin({ extractComments: false })],
+        minimizer: [
+          new TerserPlugin({
+            extractComments: false,
+            minify: TerserPlugin.swcMinify,
+            parallel: true,
+            terserOptions: {
+              compress: true,
+              mangle: true,
+            },
+          }),
+        ],
         concatenateModules: isProductionBuild,
         splitChunks: {
           chunks: 'all',
@@ -138,6 +148,7 @@ const makeWebpackConfig = ({
                       loader: require.resolve('babel-loader'),
                       options: {
                         babelrc: false,
+                        cacheDirectory: true,
                         presets: [
                           [
                             require.resolve('@babel/preset-env'),

package/lib/parseArgs.js

@@ -44,6 +44,7 @@ module.exports = (processArgv) => {
         'debug',
         // Passed to Vocab in the `translations` script
         'delete-unused-keys',
+        'watch',
       ],
       // `minimist` does not push unknown flags to `_` even if this function returns `true`, so we
       // need to track them ourselves

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "12.6.2",
+  "version": "12.7.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -44,14 +44,15 @@
     "@storybook/cli": "^7.0.17",
     "@storybook/react": "^7.0.17",
     "@storybook/react-webpack5": "^7.0.17",
+    "@swc/core": "^1.5.25",
     "@types/jest": "^29.0.0",
     "@types/loadable__component": "^5.13.1",
     "@vanilla-extract/jest-transform": "^1.1.0",
     "@vanilla-extract/webpack-plugin": "^2.2.0",
-    "@vocab/core": "^1.3.0",
-    "@vocab/phrase": "^1.2.4",
+    "@vocab/core": "^1.6.2",
+    "@vocab/phrase": "^2.0.0",
     "@vocab/pseudo-localize": "^1.0.1",
-    "@vocab/webpack": "^1.2.1",
+    "@vocab/webpack": "^1.2.9",
     "@zendesk/babel-plugin-react-displayname": "zendesk/babel-plugin-react-displayname#7a837f2",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^29.0.0",
@@ -114,7 +115,7 @@
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.4",
     "tree-kill": "^1.2.1",
-    "typescript": "~5.3.0",
+    "typescript": "~5.5.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-dev-server": "^5.0.2",
@@ -134,7 +135,7 @@
     "@types/react-dom": "^18.2.3",
     "@types/which": "^3.0.0",
     "@vanilla-extract/css": "^1.0.0",
-    "@vocab/react": "^1.0.1",
+    "@vocab/react": "^1.1.11",
     "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/scripts/translations.js

@@ -2,7 +2,11 @@ const envCi = require('env-ci');
 
 const { branch } = envCi();
 const chalk = require('chalk');
-const args = require('../config/args').argv;
+const {
+  argv: args,
+  watch,
+  'delete-unused-keys': deleteUnusedKeys,
+} = require('../config/args');
 const { compile, validate } = require('@vocab/core');
 const { push, pull } = require('@vocab/phrase');
 const { getVocabConfig } = require('../config/vocab/vocab');
@@ -51,16 +55,13 @@ const ensureBranch = () => {
 
   try {
     if (translationSubCommand === 'compile') {
-      compile({ watch: false }, vocabConfig);
+      console.log('Watching for changes to translations');
+      compile({ watch }, vocabConfig);
     }
     if (translationSubCommand === 'validate') {
       validate(vocabConfig);
     }
     if (translationSubCommand === 'push') {
-      const deleteUnusedKeys = commandArguments.includes(
-        '--delete-unused-keys',
-      );
-
       ensureBranch();
       push({ branch, deleteUnusedKeys }, vocabConfig);
     }
@@ -75,5 +76,8 @@ const ensureBranch = () => {
 
     process.exit(1);
   }
-  console.log(chalk.cyan('Translations complete'));
+
+  if (!watch) {
+    console.log(chalk.cyan('Translations complete'));
+  }
 })();

package/telemetry/index.js

@@ -10,7 +10,7 @@ const { languages } = require('../context');
 let projectName = 'unknown';
 let braidVersion = 'unknown';
 try {
-  const packageJson = requireFromCwd('package.json');
+  const packageJson = requireFromCwd('./package.json');
 
   if (packageJson.name) {
     projectName = packageJson.name;