seek-oss · DanDroryAu · Jan 17, 2025 · Dec 4, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/.changeset/eighty-masks-hang.md b/.changeset/eighty-masks-hang.md
@@ -0,0 +1,6 @@
+---
+'sku': minor
+---
+Add WebP and AVIF image format support to sku
+
+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. 
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -88,4 +88,4 @@ jobs:
         run: sudo chmod +x /home/runner/work/sku/sku/packages/sku/dist/bin/sku.js
 
       - name: Test
-        run: pnpm run test && pnpm run test:sku-init
+        run: aa-exec --profile=chrome pnpm run test && aa-exec --profile=chrome pnpm run test:sku-init
diff --git a/docs/docs/extra-features.md b/docs/docs/extra-features.md
@@ -3,7 +3,17 @@
 ## Images
 
 The following images types are supported in sku:
-`bmp`, `gif`, `jpeg`, `png` and `svg`.
+`bmp`, `gif`, `jpeg`, `png`, `svg`, `webp` and `avif`.
+
+?> Browser support for `webp` and `avif` varies. To ensure compatability across browsers, consider providing fallback image formats using the [`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
+
+```html
+<picture>
+  <source srcset="image.avif" type="image/avif" />
+  <source srcset="image.webp" type="image/webp" />
+  <img src="image.png" />
+</picture>
+```
 
 If you want to use a currently unsupported format feel free to submit a PR or contact #sku-support.
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -19,8 +19,6 @@ module.exports = [
       '!test/test-cases/*/*.test.js',
       'fixtures/*/*',
       '**/@loadable/**/*',
-      '**/*.test.js',
-      '**/*.test.ts',
     ],
   },
   ...seek,

diff --git a/fixtures/translations/.gitignore b/fixtures/translations/.gitignore
@@ -5,7 +5,7 @@
 .eslintcache
 .prettierrc
 coverage/
-dist/
+dist-ssr/
 eslint.config.mjs
 report/
 tsconfig.json

diff --git a/fixtures/translations/.prettierignore b/fixtures/translations/.prettierignore
@@ -5,7 +5,7 @@ translations.ts
 .eslintcache
 .prettierrc
 coverage/
-dist/
+dist-ssr/
 eslint.config.mjs
 pnpm-lock.yaml
 report/

diff --git a/fixtures/translations/src/server.tsx b/fixtures/translations/src/server.tsx
@@ -1,8 +1,8 @@
-import { renderToString } from 'react-dom/server';
 import { VocabProvider } from '@vocab/react';
+import { renderToString } from 'react-dom/server';
+import type { Server } from 'sku';
 
 import App from './App';
-import type { Server } from 'sku';
 
 const initialResponseTemplate = ({ headTags }: any) => /* html */ `
 <!DOCTYPE html>

diff --git a/packages/sku/package.json b/packages/sku/package.json
@@ -175,6 +175,7 @@
     "@types/react": "^18.2.3",
     "@types/react-dom": "^18.2.3",
     "@types/semver": "^7.5.8",
+    "@types/serialize-javascript": "^5.0.4",
     "@types/serve-handler": "^6.1.4",
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/webpack-node-externals": "^3.0.4",

diff --git a/packages/sku/sku-types.d.ts b/packages/sku/sku-types.d.ts
@@ -82,13 +82,14 @@ interface SkuSiteObject {
 
 type SkuSite = string | SkuSiteObject;
 
-interface TranformOutputPathFunctionParams {
-  environment: string;
-  site: string;
-  path: string;
+interface TransformOutputPathFunctionParams {
+  environment: string | undefined;
+  site: string | undefined;
+  route: string;
 }
-type TranformOutputPathFunction = (
-  input: TranformOutputPathFunctionParams,
+
+type TransformOutputPathFunction = (
+  input: TransformOutputPathFunctionParams,
 ) => string;
 
 type SkuLanguage = string | { name: string; extends?: string };
@@ -467,5 +468,5 @@ export interface SkuConfig {
    *
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=transformoutputpath
    */
-  transformOutputPath?: TranformOutputPathFunction;
+  transformOutputPath?: TransformOutputPathFunction;
 }
diff --git a/packages/sku/src/config/webpack/plugins/createHtmlRenderPlugin.ts b/packages/sku/src/config/webpack/plugins/createHtmlRenderPlugin.ts
@@ -67,6 +67,7 @@ const getStartRoutes = () => {
     routeName: route.name,
     route: getRouteWithLanguage(route.route, language),
     language,
+    path: '',
   }));
 };
 
@@ -122,11 +123,6 @@ const createHtmlRenderPlugin = () => {
     renderDirectory: paths.target,
     routes: allRoutes,
     skipAssets: isStartScript,
-    // Incompatible type here. In the SkuConfig type the `transformOutputPath` input is the following type:
-    // environment: string;
-    // site: string;
-    // path: string; Path does not exist in the transformFilePath type that the HTMLRenderPLugin accepts.
-    // @ts-expect-error
     transformFilePath: transformOutputPath,
     mapStatsToParams,
     extraGlobals: {

diff --git a/packages/sku/src/context/configPath.js b/packages/sku/src/context/configPath.js
diff --git a/packages/sku/src/context/configPath.ts b/packages/sku/src/context/configPath.ts
@@ -0,0 +1,7 @@
+let configPath: string | undefined;
+
+export const getConfigPath = () => configPath;
+
+export const setConfigPath = (path: string | undefined) => {
+  configPath = path;
+};
diff --git a/packages/sku/src/context/configSchema.js → packages/sku/src/context/configSchema.ts b/packages/sku/src/context/configSchema.js → packages/sku/src/context/configSchema.ts
@@ -1,6 +1,6 @@
 import Validator from 'fastest-validator';
 
-const validator = new Validator();
+const validator = new (Validator as unknown as typeof Validator.default)();
 
 const languagesToCompile = {
   optional: true,

diff --git a/...ges/sku/src/context/defaultClientEntry.js → ...ges/sku/src/context/defaultClientEntry.ts b/...ges/sku/src/context/defaultClientEntry.js → ...ges/sku/src/context/defaultClientEntry.ts
diff --git a/...sku/src/context/defaultCompilePackages.js → ...sku/src/context/defaultCompilePackages.ts b/...sku/src/context/defaultCompilePackages.js → ...sku/src/context/defaultCompilePackages.ts
@@ -1,16 +1,18 @@
 import { posix as path } from 'node:path';
 import chalk from 'chalk';
 import { fdir as Fdir } from 'fdir';
+import _debug from 'debug';
+import { createRequire } from 'node:module';
 
 import toPosixPath from '../lib/toPosixPath.js';
 
 import { rootDir, isPnpm } from '../lib/packageManager.js';
-import _debug from 'debug';
 
 const debug = _debug('sku:compilePackages');
 
-/** @type {string[]} */
-let detectedCompilePackages = [];
+const require = createRequire(import.meta.url);
+
+let detectedCompilePackages: string[] = [];
 
 // If there's no rootDir, we're either inside `sku init`, or we can't determine the user's
 // package manager. In either case, we can't correctly detect compile packages.

diff --git a/packages/sku/src/context/defaultSkuConfig.js → packages/sku/src/context/defaultSkuConfig.ts b/packages/sku/src/context/defaultSkuConfig.js → packages/sku/src/context/defaultSkuConfig.ts
@@ -1,15 +1,15 @@
 import browserslistConfigSeek from 'browserslist-config-seek';
 import { join } from 'node:path';
 import isCompilePackage from '../lib/isCompilePackage.js';
+import type { SkuConfig } from '../../sku-types.d.ts';
 
-const defaultDecorator = (a) => a;
+const defaultDecorator = <T>(a: T) => a;
 
-/** @type {import("../../sku-types.d.ts").SkuConfig} */
 export default {
   clientEntry: 'src/client.js',
   renderEntry: 'src/render.js',
   serverEntry: 'src/server.js',
-  libraryEntry: null,
+  libraryEntry: undefined,
   routes: [],
   sites: [],
   environments: [],
@@ -21,13 +21,13 @@ export default {
   port: 8080,
   serverPort: 8181,
   target: 'dist',
-  setupTests: null,
-  initialPath: null,
+  setupTests: undefined,
+  initialPath: undefined,
   public: 'public',
   publicPath: '/',
   polyfills: [],
-  libraryName: null,
-  libraryFile: null,
+  libraryName: undefined,
+  libraryFile: undefined,
   sourceMapsProd: true,
   displayNamesProd: false,
   dangerouslySetWebpackConfig: defaultDecorator,
@@ -39,9 +39,9 @@ export default {
   cspEnabled: false,
   cspExtraScriptSrcHosts: [],
   httpsDevServer: false,
-  devServerMiddleware: null,
+  devServerMiddleware: undefined,
   rootResolution: !isCompilePackage,
-  languages: null,
+  languages: undefined,
   skipPackageCompatibilityCompilation: [],
   externalizeNodeModules: false,
-};
+} satisfies SkuConfig;
diff --git a/packages/sku/src/context/packageManager.js b/packages/sku/src/context/packageManager.js
diff --git a/packages/sku/src/context/packageManager.ts b/packages/sku/src/context/packageManager.ts
@@ -0,0 +1,7 @@
+let packageManager: string | undefined;
+
+export const getPackageManager = () => packageManager;
+
+export const setPackageManager = (pm: string | undefined) => {
+  packageManager = pm;
+};
diff --git a/packages/sku/src/context/validateConfig.js → packages/sku/src/context/validateConfig.ts b/packages/sku/src/context/validateConfig.js → packages/sku/src/context/validateConfig.ts
@@ -5,18 +5,21 @@ import didYouMean from 'didyoumean2';
 import configSchema from './configSchema.js';
 import defaultSkuConfig from './defaultSkuConfig.js';
 import defaultClientEntry from './defaultClientEntry.js';
+import type { SkuConfig } from '../../sku-types.d.ts';
+import { hasErrorMessage } from '../lib/utils/error-guards.js';
+import type { ValidationError } from 'fastest-validator';
 
 const availableConfigKeys = Object.keys(defaultSkuConfig);
 
-const exitWithErrors = async (errors) => {
+const exitWithErrors = async (errors: string[]) => {
   console.log(chalk.bold(chalk.underline(chalk.red('Errors in sku config:'))));
   errors.forEach((error) => {
     console.log(chalk.yellow(error));
   });
   process.exit(1);
 };
 
-export default (skuConfig) => {
+export default (skuConfig: SkuConfig) => {
   const errors = [];
 
   // Validate extra keys
@@ -32,15 +35,17 @@ export default (skuConfig) => {
     });
 
   // Validate schema types
-  const schemaCheckResult = configSchema(skuConfig);
-  if (schemaCheckResult !== true) {
-    schemaCheckResult.forEach(({ message, field }) => {
-      const errorMessage = message
-        ? `🚫 ${message.replace(field, `${chalk.bold(field)}`)}`
-        : `🚫 '${chalk.bold(field)}' is invalid`;
+  if (!configSchema.async) {
+    const schemaCheckResult = configSchema(skuConfig);
+    if (schemaCheckResult !== true) {
+      schemaCheckResult.forEach(({ message, field }: ValidationError) => {
+        const errorMessage = message
+          ? `🚫 ${message.replace(field, `${chalk.bold(field)}`)}`
+          : `🚫 '${chalk.bold(field)}' is invalid`;
 
-      errors.push(errorMessage);
-    });
+        errors.push(errorMessage);
+      });
+    }
   }
 
   // Validate library entry has corresponding libraryName
@@ -55,25 +60,29 @@ export default (skuConfig) => {
   }
 
   // Ensure defaultClientEntry is not configured as a route name
-  skuConfig.routes.forEach(({ name }) => {
-    if (name === defaultClientEntry) {
-      errors.push(
-        `🚫 Invalid route name: '${chalk.bold(
-          defaultClientEntry,
-        )}', please use a different route name`,
-      );
+  skuConfig.routes?.forEach((skuRoute) => {
+    if (typeof skuRoute !== 'string') {
+      if (skuRoute.name === defaultClientEntry) {
+        errors.push(
+          `🚫 Invalid route name: '${chalk.bold(
+            defaultClientEntry,
+          )}', please use a different route name`,
+        );
+      }
     }
   });
 
   // Ensure supportedBrowsers is valid browserslist query
   try {
     browserslist(skuConfig.supportedBrowsers);
   } catch (e) {
-    errors.push(
-      `🚫 '${chalk.bold(
-        'supportedBrowsers',
-      )}' must be a valid browserslist query. ${chalk.white(e.message)}`,
-    );
+    if (hasErrorMessage(e)) {
+      errors.push(
+        `🚫 '${chalk.bold(
+          'supportedBrowsers',
+        )}' must be a valid browserslist query. ${chalk.white(e.message)}`,
+      );
+    }
   }
 
   if (errors.length > 0) {

diff --git a/packages/sku/src/entry/client/index.js → packages/sku/src/entry/client/index.ts b/packages/sku/src/entry/client/index.js → packages/sku/src/entry/client/index.ts
@@ -1,14 +1,15 @@
 // '__sku_alias__clientEntry' is a webpack alias
 // pointing to the consuming apps client entry
 import client from '__sku_alias__clientEntry';
+import dedent from 'dedent';
 
 import { loadableReady } from '@loadable/component';
 
 import clientContextKey from '../clientContextKey.js';
 
 if (process.env.NODE_ENV === 'development') {
   if (typeof client !== 'function') {
-    throw new Error(require('dedent')`
+    throw new Error(dedent`
       The sku client entry ('${__SKU_CLIENT_PATH__}') must export a function that calls hydrateRoot. e.g.
 
       import { hydrateRoot } from 'react-dom/client';
@@ -31,7 +32,7 @@ loadableReady(() => {
 
   const dataElement = document.getElementById(clientContextKey);
   if (dataElement) {
-    clientContext = JSON.parse(dataElement.textContent);
+    clientContext = JSON.parse(dataElement.textContent || '{}');
   }
 
   client(clientContext);

diff --git a/packages/sku/src/entry/clientContextKey.js → packages/sku/src/entry/clientContextKey.ts b/packages/sku/src/entry/clientContextKey.js → packages/sku/src/entry/clientContextKey.ts
diff --git a/packages/sku/src/entry/csp.test.js → packages/sku/src/entry/csp.test.ts b/packages/sku/src/entry/csp.test.js → packages/sku/src/entry/csp.test.ts