sku

Minor Changes

• Add experimental renderToStringAsync parameter in renderApp (#1050)

  The new renderToStringAsync method can be called instead of React DOM's renderToString. It is an asynchronous function, but once awaited should return the same result.

  This new function won't error when hitting suspended components during a static render, instead it'll wait for all suspended boundaries to resolve.

  Note: react-dom is now an optional peer dependency for use in this function. All known uses of static rendering use react-dom and shouldn't need to make a change.

  The function is being provided to enable teams to trial the behaviour, but is not encouraged for production use.

  -import { renderToString } from 'react-dom/server';
  
  const skuRender: Render<RenderContext> = {
  -  renderApp: ({ SkuProvider, environment }) => {
  +  renderApp: async ({ SkuProvider, environment, renderToStringAsync }) => {
  -    const appHtml = renderToString(
  +    const appHtml = await renderToStringAsync(
        <SkuProvider>
          <App environment={environment as ClientContext['environment']} />
        </SkuProvider>,
      );
  
      return {
        appHtml,
      };
    },
    // ...
  };
  

  This new feature is experimental, and is likely to change in implementation or may be removed completely.

Patch Changes

• Disable babel-loader cache compression (#1060)

  sku applications tend to transpile many modules and upload all cache files as a single compressed file. This makes compressing each individual cache file superfluous, so this feature has been disabled.

• Adds "Chrome" and "Edge" as fallback browser names for reusing existing tabs, improving compatibility with different Chromium browser versions which may use abbreviated browser names. (#1061)

Patch Changes

• Reverts #1039 (#1053)

  This change was causing a dependency to be cloned via git which may not be available in all CI envrionments.

Patch Changes

• Replace ejs dependency with eta (#1044)

• Update didyoumean2 dependency to fix issue when running npx sku init (#1051)

Patch Changes

• Use HTTPS URL for zendesk/babel-plugin-react-displayname dependency to hopefully prevent it from being cloned via SSH (#1039)

• Replace @manypkg/find-root dependency with find-up (#1040)

• Replace @antfu/ni dependency with package-manager-detector (#1040)

Minor Changes

• Widen support for reusing existing browser tab to more Chromium browsers. (#1036)

  start and start-ssr scripts would previously only reuse an existing tab in Google Chrome.
  This change adds support for the following Chromium browsers:

  • Google Chrome,
  • Google Chrome Canary,
  • Microsoft Edge,
  • Brave Browser,
  • Vivaldi,
  • Chromium,
  • Arc.

  A tab will be reused if:

  • The OS is macOS,
  • The user's default browser is a supported Chromium browser,
  • The user has an existing tab open in a supported Chromium browser with the exact same URL.

  If any of the above is not true, a new tab will be created in the user's default browser.

Patch Changes

• Fixes a bug preventing .mdx files from loading in Storybook when using sku's webpackFinal Storybook configuration (#1032)

Patch Changes

• Fix incorrect path in ignore files when running sku init (#1028)

  sku generates ignore files (e.g. .eslintignore) for the project.
  When ran as part of sku init, the current working directory (CWD) would sometimes be incorrect.
  It should now give the same result as sku configure.

  This change includes a refactor to how the webpack target directory is set in ignore files.

Patch Changes

• Replace sku/config/jest entrypoint with sku/jest-preset (#1024)

  BREAKING CHANGE FOR CUSTOM JEST CONFIG:

  This breaking change will only affect a very small number of projects that have a custom Jest configuration/wish to debug tests in their IDE, and it is intended to be a quick fix/improvement for a feature released in [email protected]. Therefore, it's not being released as a major version.

  The sku/config/jest entrypoint has been removed in favor of a new sku/jest-preset entrypoint. The sku/jest-preset module is a better way to expose a jest preset, rather than a relative path (the previous implementation), as it works even if sku is hoisted to a parent node_modules directory.

  MIGRATION GUIDE:

  // jest.config.js
  - const { preset } = require('sku/config/jest');
  
  /** @type {import('jest').Config} */
  module.exports = {
     // If you've already migrated to sku v13
  -  preset,
     // If you're still on sku v12.x
  -  preset: 'sku/config/jest',
  +  preset: 'sku',
  };
  

Patch Changes

• Add pnpm-lock.yaml to .prettierignore and .eslintignore (#1021)

Major Changes

• Export jest preset path (#984)

  BREAKING CHANGE:

  The jest preset is now accessible via a relative path rather than pointing to a module. This may affect users that require a jest config for debugging tests in their IDE. See the testing documentation for more information.

  MIGRATION GUIDE:

  // jest.config.js
  + const { preset } = require('sku/config/jest');
  
  /** @type {import('jest').Config} */
  module.exports = {
  -  preset: 'sku/config/jest',
  +  preset,
  };
  

• Update default supported browsers (#1000)

  sku applications and libraries now default to supporting more recent browser versions:

  Browser	Oldest supported version
  Chrome	84
  Edge	84
  Safari	14.1
  Firefox	63
  Samsung Internet	14.0

  BREAKING CHANGE:

  Production builds will now contain code that may not be compatible with older browser versions. If your application still needs to support older browsers, you can configure a custom browserslist query via the [supportedBrowsers] configuration option in your sku config.

• Remove Storybook-related features from sku (#996)

  BREAKING CHANGE

  All Storybook-related features have been removed from sku. Sku no longer installs Storybook dependencies, configures Storybook, provides Storybook CLI commands, or re-exports Storybook APIs. If you are using Storybook, you will need to install Storybook dependencies yourself. See sku's Storybook documentation for more information.

  MIGRATION GUIDE:

  Update your sku config

  The following sku configuration options have been removed:

  • storybookAddons
  • storybookPort
  • storybookStoryStore
  • storybookTarget

  Please remove these properties from your sku configuration file, but keep the values around for use later in the migration.

  Update your ignore files

  Sku no longer manages certain Storybook-related ignore file entries.
  Run sku configure to update your ignore files:

  pnpm exec sku configure
  

  You will need to re-add your storybookTarget value (from the previous step) to your .prettierignore, .eslintignore, and .gitignore files.

  Install Storybook dependencies

  sku was previously installing Storybook v7 dependencies for you. The first command below will install the latest (v8) Storybook dependencies.

  If you wish to stay on Storybook v7 for the time being, use the second command below.

  NOTE: Consumers that still depend on the deprecated storiesOf API will need to stay on Storybook v7 until they migrate away from this API.

  # Storybook v8
  pnpm install -D storybook @storybook/react @storybook/react-webpack5 @storybook/addon-webpack5-compiler-babel
  

  # Storybook v7
  pnpm install -D storybook@^7.6.17 @storybook/react@^7.6.17 @storybook/react-webpack5@^7.6.17
  

  Configure Storybook

  Sku no longer configures your Storybook main configuration file for you. To migrate to a minimal, sku-compatible Storybook configuration, first locate your .storybook/main.js file.

  // .storybook/main.js - Old configuration
  
  /** THIS FILE IS GENERATED BY SKU, MANUAL CHANGES WILL BE DISCARDED **/
  import storybookConfig from 'sku/config/storybook';
  
  export default { ...storybookConfig };
  

  Rename this file to .storybook/main.ts and replace its contents with the following, making adjustments as necessary for your project:

  // .storybook/main.ts - New configuration
  
  import { babel, webpackFinal } from 'sku/config/storybook';
  import type { StorybookConfig } from '@storybook/react-webpack5';
  
  export default {
    stories: ['../src/**/*.stories.tsx'],
    features: {
      // Required for Storybook v7 if using the `storiesOf` API.
      // If you set `storybookStoryStore: false` in your sku config, you will want this.
      storyStoreV7: false,
    },
    framework: {
      name: '@storybook/react-webpack5',
      options: {
        builder: {
          fsCache: true, // For faster startup times after the first `storybook dev`
        },
      },
    },
    addons: [
      // Copy addons from your `storybookAddons` sku config here
      '@storybook/addon-webpack5-compiler-babel', // Required for Storybook >=8.0.0
    ],
    babel,
    webpackFinal,
  } satisfies StorybookConfig;
  

  See sku's Storybook documentation for more information on configuring Storybook.

  Update package.json scripts

  The sku CLI no longer provides the sku storybook and sku build-storybook commands. Please migrate to the official Storybook CLI:

  // package.json
  {
    "scripts": {
  -    "storybook": "sku storybook",
       // Replace 8081 with your previously configured `storybookPort`,
       // if you configured one and wish to keep it
  +    "storybook": "storybook dev --port 8081",
  -    "build:storybook": "sku build-storybook"
        // Replace `dist-storybook` with your previously configured `storybookTarget`,
        // if you configured one and wish to keep it
  +    "build:storybook": "storybook build --output-dir dist-storybook"
    }
  }
  

  Update Storybook imports

  sku no longer re-exports Storybook APIs under the sku/@storybook/react entrypoint. Please update your imports to use the official Storybook package:

  // MyComponent.stories.tsx
  
  -import type { Meta } from 'sku/@storybook/react';
  +import type { Meta } from '@storybook/react';
  

• Remove LESS style support (#1005)

  BREAKING CHANGE:

  LESS style support has been removed.

  MIGRATION GUIDE:

  Please migrate all styles defined in .less files to Vanilla Extract styles. *.less.d.ts files are no longer git-ignored and should be deleted. Reach out in #sku-support if you need help with this migration.

• Target sku's minimum supported node version when building the server entry (#1006)

  BREAKING CHANGE

  When building the server entry, the output code was previously transpiled to be compatible with a relatively old version of Node.js. This change updates the version to mirror sku's minimum supported Node.js version (18.20.0 at time of writing). SSR users should ensure their server's Node.js runtime is up-to-date with the minimum supported version.

• Drop support for Node.js versions below 18.20.0 (#986)

  BREAKING CHANGE:

  The minimum supported Node.js version is now 18.20.0. Consumers must upgrade to Node.js v18.20.0 or later.

• Remove support for orderImports config option (#1014)

  BREAKING CHANGE:

  orderImports is now always enabled and has been removed from the configuration options.

  MIGRATION GUIDE

  To reduce the number of changes when migrating to sku v13 you may choose to enable orderImports and run sku format before upgrading.

  Remove orderImports from sku.config.ts:

  // sku.config.ts
  
  import { type SkuConfig } from 'sku';
  
  export default {
  - orderImports: false,
  - orderImports: true,
  } satisfies SkuConfig;
  

  Then run sku format.

  Note: Changing import order can affect the behaviour of your application. After running sku format, please ensure your app still works and looks as expected. Additionally, @ts-ignore comments above imports will not be moved as part of the autofix. These comments will need be moved manually.

• Remove support for the env config property (#980)

  BREAKING CHANGE:

  Support for the env config property has been removed. This config property was deprecated in sku v7.0.0 in favour of the environments property. Please see the sku v7 migration guide for more information.

• sourceMapsProd is now true by default (#979)

  BREAKING CHANGE:

  sourceMapsProd is now true by default. To enable the previous behaviour, set sourceMapsProd: false in your sku config:

  // sku.config.ts
  import type { SkuConfig } from 'sku';
  
  export default {
    sourceMapsProd: false,
  } satisfies SkuConfig;
  

  NOTE: Production source maps can increase memory usage during builds to the point where the Node process exhausts its heap memory. If this occurs, you can increase the memory limit for the Node process by setting the NODE_OPTIONS environment variable to --max-old-space-size=4096 (or a higher value) before running the build command.

  For example:

  NODE_OPTIONS=--max-old-space-size=4096 sku build
  

• Add peer dependency on @types/react@^17.0.0 || ^18.0.0 (#1016)

  BREAKING CHANGE

  sku now has a peer dependency on @types/react@^17.0.0 || ^18.0.0. Most, if not all consumers of sku should already have @types/react installed, but if not, you will need to install it.

• Add explicit package exports (#984)

  BREAKING CHANGE:

  Importing from arbitrary subpaths within sku is no longer possible. See the API documentation for a comprehensive list of sku's API entrypoints.

• Remove support for the --env CLI argument (#980)

  BREAKING CHANGE:

  Support for the --env CLI argument has been removed. This argument was replaced long ago by the --envrironment argument. There is currently no consumer usage of this argument, so there should be no changes required.

• Remove type-only imports during transpilation and enforce correct type-only import syntax with verbatimModuleSyntax: true (#983)

  This change enables babel to mimic the behaviour of TypeScript's verbatimModuleSyntax compiler option. The following code demonstrates the result of this change when transpiling TypeScript to JavaScript:

  // Erased entirely
  import type { A } from 'a';
  
  // Rewritten to `import { b } from "bcd";`
  import { b, type c, type d } from 'bcd';
  
  // Rewritten to `import {} from "xyz";`
  import { type xyz } from 'xyz';
  

  This change is not expected to have an effect on bundled application code or library code. However, it may surface some TypeScript errors in compilePackage dependencies that do not adhere to the correct type-only import syntax. These errors should be fixed in the dependency's codebase.

• sku init: Install dependencies with the package manager that was used to run the command (#982)

  BREAKING CHANGE:

  The sku init command will now install dependencies with the package manager that was used to run the command. This can be overridden via the --packageManager flag:

  npx sku init my-app # Will install dependencies using npm
  pnpm dlx sku init my-app # Will install dependencies using pnpm
  npx sku init --packageManager yarn my-app # Will install dependencies using yarn
  

• Drop support for react versions below 17.0.0 (#1016)

  BREAKING CHANGE

  sku no longer supports react versions below 17.0.0. Please upgrade your react version to 17.0.0 or higher.

• Remove support for persistentCache configuration option (#1013)

  BREAKING CHANGE:

  Disabling persistentCache was previously necessary when using treat, which is no longer supported in sku. persistentCache is now always enabled and has been removed from the configuration options.

  MIGRATION GUIDE:

  Remove the persistentCache option from your sku config.

  // sku.config.ts
  
  import { type SkuConfig } from 'sku';
  
  export default {
  - persistentCache: false,
  - persistentCache: true,
  } satisfies SkuConfig;
  

• Drop explicit file extensions when calling prettier (#985)

  BREAKING CHANGE:

  sku no longer passes explicit extensions to prettier during sku lint/sku format. Instead, your application's root directory will be the target, and prettier will format all files it supports. This may result in some files being formatted that were not previously formatted by prettier.

• Remove support for the --tenant CLI argument (#980)

  BREAKING CHANGE:

  Support for the --tenant CLI argument has been removed. This is an old argument that has been unused within sku for a long time. There is currently no consumer usage of this argument, so there should be no changes required.

• Remove support for the --build CLI argument (#980)

  BREAKING CHANGE:

  SUpport for the --build CLI argument has been removed. This is an old argument that has been unused within sku for a long time. There is currently no consumer usage of this argument, so there should be no changes required.

Minor Changes

• Upgrade eslint to ^8.56.0 and eslint-config-seek to ^13.0.0 (#986)

  Due to changes in [email protected], consumers may see new linting errors or warnings. Some of these may be auto-fixable via sku format, but others may require manual intervention. Please see the eslint-config-seek changelog for more information.

• Add dom.iterable to the tsconfig lib compiler option (#983)

  This change provides type definitions for iterable APIs on some DOM APIs. For example, this enables using for...of syntax or the keys() method on URLSearchParams:

  const params = new URLSearchParams('a=1&b=2');
  
  for (const [key, value] of params) {
    // Prints:
    // a 1
    // b 2
    console.log(key, value);
  }
  
  for (const key of params.keys()) {
    // Prints:
    // a
    // b
    console.log(key);
  }
  

Patch Changes

• Loosen esbuild dependency version to help prevent multiple versions of it ending up in node_modules (#1018)

• Update @vocab/phrase dependency to ^2.0.1 (#1018)

• Update @swc/core dependency to ^1.6.13 (#1018)

Patch Changes

• Fixes a bug causing sku test --watch to not put jest in watch mode (#1009)

Minor Changes

• Export a Server type for sku's server entrypoint (#981)

  EXAMPLE USAGE:

  // server.tsx
  import { renderToString } from 'react-dom/server';
  import type { Server } from 'sku';
  import { App } from './App';
  
  export default (): Server => ({
    renderCallback: ({ SkuProvider, getHeadTags, getBodyTags }, _req, res) => {
      const app = renderToString(
        <SkuProvider>
          <App />
        </SkuProvider>,
      );
  
      res.send(/* html */ `
        <!DOCTYPE html>
          <html>
            <head>
              <meta charset="UTF-8">
              <title>My Awesome Project</title>
              <meta name="viewport" content="width=device-width, initial-scale=1">
              ${getHeadTags()}
            </head>
            <body>
              <div id="app">${app}</div>
              ${getBodyTags()}
            </body>
         </html>`);
    },
  });
  

  [!NOTE]
  The Server type may conflict with existing attempts in projects to define a Server type.

Minor Changes

• Update TypeScript from 5.3 to 5.5 (#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.

• Add support for --watch flag to sku translations compile (#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:

  sku translations compile --watch
  

Patch Changes

• Update all @vocab/* dependencies (#989)

• Fixes a bug where the project name was not being reported correctly when sending telemetry (#1001)

• Enable babel-loader cache (#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

  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.

Patch Changes

• Fix default compile package detection in PNPM repos (#975)

Patch Changes

• When cleaning the build output directory, only delete files within the directory, rather than the entire directory (#969)

Minor Changes

• Add support for removing assertion functions named invariant and assertions from the tiny-invariant library, a lightweight alternative to assert (#966)

  EXAMPLE USAGE:

  import React from 'react';
  import invariant from 'tiny-invariant';
  
  export const Rating = ({ rating }: { rating: number }) => {
    invariant(rating >= 0 && rating <= 5, 'Rating must be between 0 and 5');
  
    return <div>...</div>;
  };
  

Patch Changes

• Remove rimraf dependency in favour of Node.js's rm (#961)

• Unpin and bump @pmmmwh/react-refresh-webpack-plugin (#959)

• Ensure all sku-generated gitignored files are present in .prettierignore and .eslintignore too (#957)

  Consumers should notice a few new files being added to the sku-managed sections within .prettierignore and .eslintignore the next time a sku command is run:

  # managed by sku
  *.less.d.ts
  +.eslintcache
  +.eslintrc
  +.prettierrc
  .storybook/main.js
  coverage/
  dist-storybook/
  dist/
  report/
  # end managed by sku
  

  These changes should be committed to your repo.

• Disable peer dependency validation for PNPM (#952)

  The method we currently use to validate peer dependencies and warn users about duplicate package is not compatible with how PNPM organizes dependencies in node_modules. This feature has been disabled for PNPM repos until further notice.

• Replace memoizee dependency with nano-memoize (#953)

• Replace fast-glob with fdir and picomatch (#952)

• Replace validate-npm-package-name dependency with a regexp (#954)

• Improve performance of peer dependency validation (#952)

  Peer dependency validation shoould now complete within a few seconds, rather than a few minutes.

Minor Changes

• Update TypeScript to 5.3 (#938)

  This release includes breaking changes. See the TypeScript 5.3 announcement for more information.

Patch Changes

• Remove empty-dir dependency (#935)

• Replace command-line-args with minimist for parsing CLI arguments (#940)

• Emit incremental TypeScript build info for faster subsequent type checking (#938)

Patch Changes

• Update webpack-dev-server to v5 (#930)

• Stop passing --quiet flag to the Storybook CLI when running sku storybook (#929)

  This flag was added to suppress verbose CLI output, but as of Storybook CLI v7.1.0 this also hides the dev server info which includes the URL to access the Storybook UI.

  The flag has now been removed to provide a better default experience when using the Storybook CLI.
  Users can still pass --quiet to suppress verbose output if desired:

  pnpm run sku storybook --quiet
  

Patch Changes

• Update dependencies (#917)