sku 13.3.0 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # sku
 
+## 13.4.0
+
+### Minor Changes
+
+- Add WebP and AVIF image format support to sku ([#1119](https://github.com/seek-oss/sku/pull/1119))
+
+  Support for `webp` and `avif` image formats has been added. Note that browser support for these formats may vary. To ensure compatibility across browsers, consumers are advised to use the `<picture>` element with fallback formats.
+
+### Patch Changes
+
+- Fixes a bug that caused React 19 applications to fail during `sku build` ([#1143](https://github.com/seek-oss/sku/pull/1143))
+
+  Note: remaining on React 18 is recommended until `sku` officially supports React 19. Updating your application to React 19 may require overriding dependency versions by configuring your package manager. Additionally, there may be other incompatibilities that haven't been found yet.
+
 ## 13.3.0
 
 ### Minor Changes

package/config/babel/babelConfig.js

@@ -45,7 +45,6 @@ module.exports = ({
 
   if (isProductionBuild) {
     plugins.push(
-      require.resolve('@babel/plugin-transform-react-inline-elements'),
       require.resolve('babel-plugin-transform-react-remove-prop-types'),
       require.resolve('@babel/plugin-transform-react-constant-elements'),
     );

package/config/prettier/prettierConfig.js

@@ -1,3 +1,6 @@
+// @ts-check
+
+/** @type {import("prettier").Options} */
 module.exports = {
   singleQuote: true,
   tabWidth: 2,

package/config/webpack/utils/index.js

@@ -13,6 +13,6 @@ module.exports = {
   resolvePackage,
   TYPESCRIPT: new RegExp(`\.(${extensions.ts.join('|')})$`),
   JAVASCRIPT: new RegExp(`\.(${extensions.js.join('|')})$`),
-  IMAGE: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+  IMAGE: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/, /\.avif$/],
   SVG: /\.svg$/,
 };

package/lib/SkuConfigUpdater.js

@@ -0,0 +1,186 @@
+// @ts-check
+
+const assert = require('node:assert');
+const { readFile, writeFile } = require('node:fs/promises');
+const t = require('@babel/types');
+const { parseModule, builders, generateCode } = require('magicast');
+// eslint-plugin-import doesn't support subpath imports
+// eslint-disable-next-line import/no-unresolved
+const { getConfigFromVariableDeclaration } = require('magicast/helpers');
+
+const debug = require('debug');
+const log = debug('sku:update-sku-config');
+
+const prettier = require('prettier');
+const prettierConfig = require('../config/prettier/prettierConfig.js');
+
+class SkuConfigUpdater {
+  /** @typedef {import("sku").SkuConfig} SkuConfig */
+  /** @typedef {import("magicast").ProxifiedObject<SkuConfig>} ProxifiedSkuConfig */
+  /** @typedef {import("@babel/types").ObjectExpression} ObjectExpression */
+  /** @typedef {import("@babel/types").VariableDeclarator} VariableDeclarator */
+
+  /** @typedef {{type: 'esm', configAst: ProxifiedSkuConfig}} EsmConfig */
+  /** @typedef {{type: 'esm-non-literal', configAst: ProxifiedSkuConfig, configDeclaration: VariableDeclarator}} EsmNonLiteralConfig */
+  /** @typedef {{type: 'cjs', configAst: ObjectExpression }} CjsConfig */
+
+  /** @type {EsmConfig | EsmNonLiteralConfig | CjsConfig} The AST or AST proxy of the sku config */
+  #config;
+  /** The path to the sku config being modified */
+  #path;
+  /** The parsed sku config file from magicast. Used for serializing the AST after updating it. */
+  #module;
+
+  /**
+   * @param {object} options
+   * @param {string} options.path - An absolute path to a sku config
+   * @param {string} options.contents - The contents of the sku config
+   */
+  constructor({ path, contents }) {
+    this.#path = path;
+
+    const skuConfigModule = parseModule(contents);
+    this.#module = skuConfigModule;
+
+    if (typeof skuConfigModule.exports.default === 'undefined') {
+      /** @type {ObjectExpression} */
+      let configAst;
+
+      log(
+        'No default export found in sku config. Config is either CJS or invalid.',
+      );
+
+      t.assertProgram(skuConfigModule.$ast);
+      const lastStatement = skuConfigModule.$ast.body.at(-1);
+      t.assertExpressionStatement(lastStatement);
+
+      const { expression } = lastStatement;
+      t.assertAssignmentExpression(expression);
+      t.assertMemberExpression(expression.left);
+      t.assertIdentifier(expression.left.object, {
+        name: 'module',
+      });
+      t.assertIdentifier(expression.left.property, {
+        name: 'exports',
+      });
+
+      if (t.isObjectExpression(expression.right)) {
+        configAst = expression.right;
+      } else if (t.isIdentifier(expression.right)) {
+        const skuConfigIdentifierName = expression.right.name;
+        const skuConfigDeclaration = skuConfigModule.$ast.body.find(
+          (node) =>
+            t.isVariableDeclaration(node) &&
+            t.isIdentifier(node.declarations[0].id) &&
+            node.declarations[0].id.name === skuConfigIdentifierName,
+        );
+        assert(skuConfigDeclaration, 'Expected skuConfig to be defined');
+        t.assertVariableDeclaration(skuConfigDeclaration);
+        t.assertVariableDeclarator(skuConfigDeclaration.declarations[0]);
+        t.assertObjectExpression(skuConfigDeclaration.declarations[0].init);
+        configAst = skuConfigDeclaration.declarations[0].init;
+      } else {
+        throw new Error("Couldn't find config object in CJS sku config");
+      }
+
+      this.#config = {
+        type: 'cjs',
+        configAst,
+      };
+    } else {
+      log('Found sku config with ESM export');
+
+      if (skuConfigModule.exports.default.$type === 'object') {
+        const configAst = skuConfigModule.exports.default;
+        this.#config = {
+          type: 'esm',
+          configAst,
+        };
+      } else {
+        const { declaration: configDeclaration, config: configAst } =
+          getConfigFromVariableDeclaration(skuConfigModule);
+
+        assert(configAst, 'Expected skuConfig to be defined');
+        this.#config = {
+          type: 'esm-non-literal',
+          configAst,
+          configDeclaration,
+        };
+      }
+    }
+  }
+
+  /**
+   * Creates a new instance of SkuConfigUpdater from a file path
+   *
+   * @param {string} path - An absoulte path to a sku config
+   */
+  static async fromFile(path) {
+    const contents = await readFile(path, 'utf8');
+
+    return new SkuConfigUpdater({ path, contents });
+  }
+
+  /**
+   * Updates `property` in sku config with the provided `value`. Inserts the `property` and `value` if it doesn't exist.
+   *
+   * This method does not write the changes to the file system. Use `commitConfig` to do that.
+   *
+   * @template {keyof SkuConfig} T
+   * @param {{property: T, value: SkuConfig[T]}} options
+   */
+  upsertConfig({ property, value }) {
+    if (this.#config.type === 'cjs') {
+      const propertyToUpdate = this.#config.configAst.properties.find(
+        (prop) =>
+          t.isObjectProperty(prop) &&
+          t.isIdentifier(prop.key) &&
+          prop.key.name === property,
+      );
+
+      if (propertyToUpdate) {
+        t.assertObjectProperty(propertyToUpdate);
+        propertyToUpdate.value = builders.literal(value);
+      } else {
+        const {
+          properties: [propertyLiteral],
+        } = builders.literal({
+          [property]: value,
+        });
+        this.#config.configAst.properties.push(propertyLiteral);
+      }
+
+      return;
+    }
+
+    // @ts-expect-error We have to mutate here because of magicast, but typescript complains
+    this.#config.configAst[property] = value;
+
+    if (this.#config.type === 'esm') {
+      return;
+    }
+
+    // At this point `this.#config.type` is `esm-non-literal`
+
+    // Copied from magicast/helpers https://github.com/unjs/magicast/blob/50e2207842672e2c1c75898f0b1b97909f3b6c92/src/helpers/vite.ts#L129
+    // @ts-expect-error This works because of recast magic
+    this.#config.configDeclaration.init = generateCode(
+      this.#config.configAst,
+    ).code;
+  }
+
+  /**
+   * Writes the current state of the sku config to the file system
+   */
+  async commitConfig() {
+    const newContents = this.#module.generate().code;
+    const formattedNewContents = prettier.format(newContents, {
+      parser: 'typescript',
+      ...prettierConfig,
+    });
+
+    await writeFile(this.#path, formattedNewContents);
+  }
+}
+
+module.exports = { SkuConfigUpdater };

package/lib/SkuConfigUpdater.test.js

@@ -0,0 +1,213 @@
+/**
+ * @jest-environment node
+ */
+
+// @ts-check
+import { createFixture } from 'fs-fixture';
+import dedent from 'dedent';
+import { SkuConfigUpdater } from './SkuConfigUpdater';
+
+describe('updateSkuConfig', () => {
+  describe('SkuConfigUpdater', () => {
+    it('Should update a TypeScript sku config with a literal ESM default export', async () => {
+      const skuConfigFileName = 'sku.config.ts';
+
+      const fixture = await createFixture({
+        [skuConfigFileName]: dedent/* ts */ `
+          export default {
+            renderEntry: 'src/render.tsx',
+            clientEntry: 'src/client.tsx',
+          };`,
+      });
+
+      const modifier = await SkuConfigUpdater.fromFile(
+        fixture.getPath(skuConfigFileName),
+      );
+      modifier.upsertConfig({
+        property: 'renderEntry',
+        value: 'src/updated-render.tsx',
+      });
+      modifier.upsertConfig({
+        property: 'srcPaths',
+        value: ['./src', './cypress'],
+      });
+      await modifier.commitConfig();
+
+      const result = (await fixture.readFile(skuConfigFileName)).toString();
+      expect(result).toMatchInlineSnapshot(`
+        "export default {
+          renderEntry: 'src/updated-render.tsx',
+          clientEntry: 'src/client.tsx',
+          srcPaths: ['./src', './cypress'],
+        };
+        "
+      `);
+
+      await fixture.rm();
+    });
+
+    it('Should update a TypeScript sku config with a literal ESM default export and "satisfies"', async () => {
+      const skuConfigFileName = 'sku.config.ts';
+
+      const fixture = await createFixture({
+        [skuConfigFileName]: dedent/* ts */ `
+          import type { SkuConfig } from 'sku';
+
+          export default {
+            renderEntry: 'src/render.tsx',
+            clientEntry: 'src/client.tsx',
+          } satisfies SkuConfig;`,
+      });
+
+      const modifier = await SkuConfigUpdater.fromFile(
+        fixture.getPath(skuConfigFileName),
+      );
+      modifier.upsertConfig({
+        property: 'renderEntry',
+        value: 'src/updated-render.tsx',
+      });
+      modifier.upsertConfig({
+        property: 'srcPaths',
+        value: ['./src', './cypress'],
+      });
+      await modifier.commitConfig();
+
+      const result = (await fixture.readFile(skuConfigFileName)).toString();
+      expect(result).toMatchInlineSnapshot(`
+        "import type { SkuConfig } from 'sku';
+
+        export default {
+          renderEntry: 'src/updated-render.tsx',
+          clientEntry: 'src/client.tsx',
+          srcPaths: ['./src', './cypress'],
+        } satisfies SkuConfig;
+        "
+      `);
+
+      await fixture.rm();
+    });
+
+    it('Should update a TypeScript sku config with a non-literal ESM default export', async () => {
+      const skuConfigFileName = 'sku.config.ts';
+
+      const fixture = await createFixture({
+        [skuConfigFileName]: dedent/* ts */ `
+          import type { SkuConfig } from 'sku';
+
+          const skuConfig: SkuConfig = {
+            renderEntry: 'src/render.tsx',
+            clientEntry: 'src/client.tsx',
+          };
+
+          export default skuConfig;`,
+      });
+
+      const modifier = await SkuConfigUpdater.fromFile(
+        fixture.getPath(skuConfigFileName),
+      );
+      modifier.upsertConfig({
+        property: 'renderEntry',
+        value: 'src/updated-render.tsx',
+      });
+      modifier.upsertConfig({
+        property: 'srcPaths',
+        value: ['./src', './cypress'],
+      });
+      await modifier.commitConfig();
+
+      const result = (await fixture.readFile(skuConfigFileName)).toString();
+      expect(result).toMatchInlineSnapshot(`
+        "import type { SkuConfig } from 'sku';
+
+        const skuConfig: SkuConfig = {
+          renderEntry: 'src/updated-render.tsx',
+          clientEntry: 'src/client.tsx',
+          srcPaths: ['./src', './cypress'],
+        };
+
+        export default skuConfig;
+        "
+      `);
+
+      await fixture.rm();
+    });
+
+    it('Should update a JavaScript sku config with a literal CJS default export', async () => {
+      const skuConfigFileName = 'sku.config.ts';
+
+      const fixture = await createFixture({
+        [skuConfigFileName]: dedent/* ts */ `
+          module.exports = {
+            renderEntry: 'src/render.tsx',
+            clientEntry: 'src/client.tsx',
+          };`,
+      });
+
+      const modifier = await SkuConfigUpdater.fromFile(
+        fixture.getPath(skuConfigFileName),
+      );
+      modifier.upsertConfig({
+        property: 'renderEntry',
+        value: 'src/updated-render.tsx',
+      });
+      modifier.upsertConfig({
+        property: 'srcPaths',
+        value: ['./src', './cypress'],
+      });
+      await modifier.commitConfig();
+
+      const result = (await fixture.readFile(skuConfigFileName)).toString();
+      expect(result).toMatchInlineSnapshot(`
+        "module.exports = {
+          renderEntry: 'src/updated-render.tsx',
+          clientEntry: 'src/client.tsx',
+          srcPaths: ['./src', './cypress'],
+        };
+        "
+      `);
+
+      await fixture.rm();
+    });
+
+    it('Should update a JavaScript sku config with a non-literal CJS default export', async () => {
+      const skuConfigFileName = 'sku.config.ts';
+
+      const fixture = await createFixture({
+        [skuConfigFileName]: dedent/* ts */ `
+          const skuConfig = {
+            renderEntry: 'src/render.tsx',
+            clientEntry: 'src/client.tsx',
+          };
+
+          module.exports = skuConfig;`,
+      });
+
+      const modifier = await SkuConfigUpdater.fromFile(
+        fixture.getPath(skuConfigFileName),
+      );
+      modifier.upsertConfig({
+        property: 'renderEntry',
+        value: 'src/updated-render.tsx',
+      });
+      modifier.upsertConfig({
+        property: 'srcPaths',
+        value: ['./src', './cypress'],
+      });
+      await modifier.commitConfig();
+
+      const result = (await fixture.readFile(skuConfigFileName)).toString();
+      expect(result).toMatchInlineSnapshot(`
+        "const skuConfig = {
+          renderEntry: 'src/updated-render.tsx',
+          clientEntry: 'src/client.tsx',
+          srcPaths: ['./src', './cypress'],
+        };
+
+        module.exports = skuConfig;
+        "
+      `);
+
+      await fixture.rm();
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "13.3.0",
+  "version": "13.4.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./sku-types.d.ts",
   "bin": {
@@ -49,12 +49,12 @@
   "dependencies": {
     "@babel/core": "^7.21.8",
     "@babel/plugin-transform-react-constant-elements": "^7.21.3",
-    "@babel/plugin-transform-react-inline-elements": "^7.21.0",
     "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@babel/runtime": "^7.21.0",
+    "@babel/types": "^7.26.0",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.14.1",
     "@loadable/server": "^5.14.0",
@@ -112,6 +112,7 @@
     "jest-environment-jsdom": "^29.0.0",
     "jest-watch-typeahead": "^2.2.0",
     "lint-staged": "^15.2.10",
+    "magicast": "^0.3.5",
     "mini-css-extract-plugin": "^2.6.1",
     "minimist": "^1.2.8",
     "nano-memoize": "^3.0.16",
@@ -148,13 +149,15 @@
     "@types/minimist": "^1.2.5",
     "@types/node": "^18.19.31",
     "@types/picomatch": "^2.3.3",
+    "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.3",
     "@types/react-dom": "^18.2.3",
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/wrap-ansi": "^3.0.0",
     "@vanilla-extract/css": "^1.0.0",
     "@vocab/react": "^1.1.11",
-    "braid-design-system": "^32.0.0",
+    "braid-design-system": "^33.1.0",
+    "fs-fixture": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",

package/template/src/App/App.tsx

@@ -1,7 +1,7 @@
 import 'braid-design-system/reset';
 
 import { BraidProvider } from 'braid-design-system';
-import apac from 'braid-design-system/themes/apac';
+import seekJobs from 'braid-design-system/themes/seekJobs';
 import { StrictMode } from 'react';
 
 import { NextSteps } from './NextSteps';
@@ -12,7 +12,7 @@ interface AppProps {
 
 export default ({ environment }: AppProps) => (
   <StrictMode>
-    <BraidProvider theme={apac}>
+    <BraidProvider theme={seekJobs}>
       <NextSteps environment={environment} />
     </BraidProvider>
   </StrictMode>

package/template/src/App/NextSteps.tsx

@@ -7,6 +7,7 @@ import {
   TextLink,
   Stack,
   List,
+  Divider,
 } from 'braid-design-system';
 
 import * as styles from './NextSteps.css';
@@ -48,12 +49,9 @@ export function NextSteps({ environment }: NextStepsProps) {
             boxShadow="large"
             padding={{ mobile: 'large', tablet: 'xlarge', desktop: 'xxlarge' }}
           >
-            <Stack
-              space={{ mobile: 'xlarge', desktop: 'xxlarge' }}
-              dividers="strong"
-            >
+            <Stack space={{ mobile: 'xlarge', desktop: 'xxlarge' }}>
               <Stack space="large">
-                <Heading level="2">🏃🏾‍♀️ Next steps</Heading>
+                <Heading level="2">🧰 Features and Tooling</Heading>
                 <Text>
                   The project comes pre-configured with a lot of standardised
                   tooling to make authoring web applications easier.
@@ -74,10 +72,7 @@ export function NextSteps({ environment }: NextStepsProps) {
                     </TextLink>
                     , <TextLink href="https://jestjs.io/">Jest</TextLink>,{' '}
                     <TextLink href="https://eslint.org/">ESLint</TextLink>,{' '}
-                    <TextLink href="https://storybook.js.org/">
-                      Storybook
-                    </TextLink>{' '}
-                    , and more.
+                    and more.
                   </Text>
                 </Stack>
 
@@ -107,6 +102,41 @@ export function NextSteps({ environment }: NextStepsProps) {
                 </Stack>
               </Stack>
 
+              <Divider weight="strong" />
+
+              <Stack space="large">
+                <Heading level="2">🏃‍♀️ Next steps</Heading>
+                <Text>
+                  Ensure you’re fully set up with these additional
+                  recommendations.
+                </Text>
+                <Stack space="gutter">
+                  <Heading level="3">Brand resources</Heading>
+                  <Text>
+                    To align your project to SEEK's brand standards it is
+                    recommended to install{' '}
+                    <TextLink href="https://github.com/SEEK-Jobs/shared-web-assets">
+                      Shared web assets
+                    </TextLink>
+                    .
+                  </Text>
+                </Stack>
+
+                <Stack space="gutter">
+                  <Heading level="3">Telemetry</Heading>
+                  <Text>
+                    To help us improve sku, please install our private{' '}
+                    <TextLink href="https://github.com/SEEK-Jobs/sku-telemetry">
+                      sku telemetry
+                    </TextLink>{' '}
+                    package that gives us insights on usage, errors and
+                    performance.
+                  </Text>
+                </Stack>
+              </Stack>
+
+              <Divider weight="strong" />
+
               <Stack space="large">
                 <Heading level="2">🙋‍♂️ Support</Heading>
 
@@ -150,6 +180,8 @@ export function NextSteps({ environment }: NextStepsProps) {
                 </Stack>
               </Stack>
 
+              <Divider weight="strong" />
+
               <Stack space="large">
                 <Heading level="2">📣 Announcements</Heading>