sku 11.0.3 → 11.2.1

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # sku
 
+## 11.2.1
+
+### Patch Changes
+
+- Fix loading of TS config files that use node builtins or external dependencies. ([#657](https://github.com/seek-oss/sku/pull/657))
+
+## 11.2.0
+
+### Minor Changes
+
+- Config files can now be in TypeScript ([#655](https://github.com/seek-oss/sku/pull/655))
+
+  Previously, projects were configured using a `sku.config.js` file, which exported a config object.
+  As most projects at SEEK are now TypeScript based, having a JS config file makes it impossible to reuse any of your production code in the config (e.g. routes).
+
+  This change makes it possible to use a TypeScript config file, by default `sku.config.ts`.
+  The easiest way to migrate is to change the module exports to a default export:
+
+  ```diff
+  - // sku.config.js
+  + // sku.config.ts
+  - module.exports = {
+  + export default {
+    clientEntry: 'src/client.tsx',
+    // ...
+  }
+  ```
+
+  But sku also now exports a type for the config object, to make it easier to setup and understand the configuration options.
+
+  ```diff
+  + import type { SkuConfig } from 'sku';
+  +
+  - module.exports = {
+  + const config: SkuConfig = {
+    clientEntry: 'src/client.tsx',
+    // ...
+  }
+  +
+  + export default config;
+  ```
+
+  `sku init` will now create TypeScript config files by default.
+
+### Patch Changes
+
+- Ensure translations are available when running storybook ([#638](https://github.com/seek-oss/sku/pull/638))
+
+## 11.1.0
+
+### Minor Changes
+
+- Include node_modules in node builds ([#651](https://github.com/seek-oss/sku/pull/651))
+
+  Previously, sku would only compile code within your src folder, plus any compile packages, for builds targetting the node environment. While this results in faster builds, it can sometimes lead to incorrect versions of packages being resolved due to clashing version range requirements. All node_modules will now included in the compilation by default, ensuring the correct package version is always required.
+
+  The old behaviour can be re-enabled via the new `externalizeNodeModules` config.
+
+## 11.0.4
+
+### Patch Changes
+
+- Correct exclusion of `removeViewBox` svgo plugin ([#647](https://github.com/seek-oss/sku/pull/647))
+
 ## 11.0.3
 
 ### Patch Changes

package/config/typescript/tsconfig.js

@@ -1,7 +1,19 @@
 const { cwd, getPathFromCwd } = require('../../lib/cwd');
 const { paths, rootResolution } = require('../../context');
+const path = require('path');
 
 module.exports = () => {
+  const includePaths = paths.src;
+
+  if (paths.appSkuConfigPath && paths.appSkuConfigPath.endsWith('.ts')) {
+    // If the config file is in TypeScript, it needs to be included in the tsconfig
+    includePaths.push(paths.appSkuConfigPath);
+  } else {
+    // If it isn't, the placeholder file needs to be included so we don't break JS only projects.
+    // See the comments in placeholder.ts
+    includePaths.push(path.join(__dirname, '../../lib/placeholder.ts'));
+  }
+
   const config = {
     compilerOptions: {
       // This flag allows tsc to be invoked directly by VS Code (via Cmd+Shift+B),
@@ -21,7 +33,7 @@ module.exports = () => {
       lib: ['dom', 'es2015'],
       target: 'es5',
     },
-    include: paths.src,
+    include: includePaths,
     exclude: [getPathFromCwd('node_modules')],
   };
 

package/config/webpack/cache.js

@@ -9,7 +9,7 @@ module.exports = function getWebpackCacheSettings({ isDevServer }) {
       return {
         type: 'filesystem',
         buildDependencies: {
-          config: [paths.appSkuConfigPath],
+          config: paths.appSkuConfigPath ? [paths.appSkuConfigPath] : [],
         },
       };
     }

package/config/webpack/utils/loaders.js

@@ -143,8 +143,10 @@ const makeSvgLoaders = () => [
       plugins: [
         {
           name: 'preset-default',
-          overrides: {
-            removeViewBox: false,
+          params: {
+            overrides: {
+              removeViewBox: false,
+            },
           },
         },
         {

package/config/webpack/webpack.config.js

@@ -16,7 +16,6 @@ const { VocabWebpackPlugin } = require('@vocab/webpack');
 
 const utils = require('./utils');
 const { cwd } = require('../../lib/cwd');
-const isTypeScript = require('../../lib/isTypeScript');
 
 const renderEntry = require.resolve('../../entry/render');
 const libraryRenderEntry = require.resolve('../../entry/libraryRender');
@@ -39,6 +38,7 @@ const {
   cspExtraScriptSrcHosts,
   rootResolution,
   skipPackageCompatibilityCompilation,
+  externalizeNodeModules,
 } = config;
 
 // port is only required for dev builds
@@ -235,7 +235,7 @@ const makeWebpackConfig = ({
           browserslist: supportedBrowsers,
           mode: webpackMode,
           libraryName,
-          generateCSSTypes: isTypeScript,
+          generateCSSTypes: true,
           displayNamesProd,
           removeAssertionsInProduction: !isIntegration,
           MiniCssExtractPlugin,
@@ -268,19 +268,21 @@ const makeWebpackConfig = ({
       // render will run within the same process
       target: `browserslist:${nodeTarget}`,
       externals: [
-        // Don't bundle or transpile non-compiled packages
-        nodeExternals({
-          allowlist: [
-            'classnames', // Workaround for https://github.com/JedWatson/classnames/issues/240
+        // Don't bundle or transpile non-compiled packages if externalizeNodeModules is enabled
+        externalizeNodeModules
+          ? nodeExternals({
+              allowlist: [
+                'classnames', // Workaround for https://github.com/JedWatson/classnames/issues/240
 
-            // webpack-node-externals compares the `import` or `require` expression to this list,
-            // not the package name, so we map each packageName to a pattern. This ensures it
-            // matches when importing a file within a package e.g. import { Text } from 'seek-style-guide/react'.
-            ...paths.compilePackages.map(
-              (packageName) => new RegExp(`^(${packageName})`),
-            ),
-          ],
-        }),
+                // webpack-node-externals compares the `import` or `require` expression to this list,
+                // not the package name, so we map each packageName to a pattern. This ensures it
+                // matches when importing a file within a package e.g. import { Text } from 'seek-style-guide/react'.
+                ...paths.compilePackages.map(
+                  (packageName) => new RegExp(`^(${packageName})`),
+                ),
+              ],
+            })
+          : {},
       ],
       output: {
         path: paths.target,

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

@@ -16,7 +16,6 @@ const args = require('../args');
 const { bundleAnalyzerPlugin } = require('./plugins/bundleAnalyzer');
 const utils = require('./utils');
 const { cwd } = require('../../lib/cwd');
-const isTypeScript = require('../../lib/isTypeScript');
 const {
   paths,
   env,
@@ -30,6 +29,7 @@ const {
   useDevServerMiddleware,
   rootResolution,
   skipPackageCompatibilityCompilation,
+  externalizeNodeModules,
 } = require('../../context');
 const { getVocabConfig } = require('../vocab/vocab');
 const statsConfig = require('./statsConfig');
@@ -188,7 +188,7 @@ const makeWebpackConfig = ({
           hot,
           include: internalInclude,
           compilePackages: paths.compilePackages,
-          generateCSSTypes: isTypeScript,
+          generateCSSTypes: true,
           browserslist: supportedBrowsers,
           mode: webpackMode,
           displayNamesProd,
@@ -225,17 +225,20 @@ const makeWebpackConfig = ({
         {
           __sku_alias__webpackStats: `commonjs ./${webpackStatsFilename}`,
         },
-        nodeExternals({
-          modulesDir: findUp.sync('node_modules'), // Allow usage within project subdirectories (required for tests)
-          allowlist: [
-            // webpack-node-externals compares the `import` or `require` expression to this list,
-            // not the package name, so we map each packageName to a pattern. This ensures it
-            // matches when importing a file within a package e.g. import { Text } from 'seek-style-guide/react'.
-            ...paths.compilePackages.map(
-              (packageName) => new RegExp(`^(${packageName})`),
-            ),
-          ],
-        }),
+        // Don't bundle or transpile non-compiled packages if externalizeNodeModules is enabled
+        externalizeNodeModules
+          ? nodeExternals({
+              modulesDir: findUp.sync('node_modules'), // Allow usage within project subdirectories (required for tests)
+              allowlist: [
+                // webpack-node-externals compares the `import` or `require` expression to this list,
+                // not the package name, so we map each packageName to a pattern. This ensures it
+                // matches when importing a file within a package e.g. import { Text } from 'seek-style-guide/react'.
+                ...paths.compilePackages.map(
+                  (packageName) => new RegExp(`^(${packageName})`),
+                ),
+              ],
+            })
+          : {},
       ],
       resolve: {
         alias: {

package/context/configSchema.js

@@ -190,4 +190,7 @@ module.exports = validator.compile({
   persistentCache: {
     type: 'boolean',
   },
+  externalizeNodeModules: {
+    type: 'boolean',
+  },
 });

package/context/defaultSkuConfig.js

@@ -45,4 +45,5 @@ module.exports = {
   languages: null,
   skipPackageCompatibilityCompilation: [],
   persistentCache: true,
+  externalizeNodeModules: false,
 };

package/context/index.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
+const { register } = require('esbuild-register/dist/node');
 const { getPathFromCwd } = require('../lib/cwd');
 const args = require('../config/args');
 const defaultSkuConfig = require('./defaultSkuConfig');
@@ -9,11 +10,37 @@ const validateConfig = require('./validateConfig');
 const defaultCompilePackages = require('./defaultCompilePackages');
 const isCompilePackage = require('../lib/isCompilePackage');
 
-const appSkuConfigPath = getPathFromCwd(args.config);
+const getSkuConfig = () => {
+  let appSkuConfigPath;
+  const tsPath = getPathFromCwd('sku.config.ts');
+  const jsPath = getPathFromCwd('sku.config.js');
+
+  if (args.config) {
+    appSkuConfigPath = getPathFromCwd(args.config);
+  } else if (fs.existsSync(tsPath)) {
+    appSkuConfigPath = tsPath;
+  } else if (fs.existsSync(jsPath)) {
+    appSkuConfigPath = jsPath;
+  } else {
+    return {
+      appSkuConfig: {},
+      appSkuConfigPath: null,
+    };
+  }
+
+  const { unregister } = register({ target: 'node14' });
+
+  const newConfig = require(appSkuConfigPath);
+
+  unregister();
+
+  return {
+    appSkuConfig: newConfig.default || newConfig,
+    appSkuConfigPath,
+  };
+};
 
-const appSkuConfig = fs.existsSync(appSkuConfigPath)
-  ? require(appSkuConfigPath)
-  : {};
+const { appSkuConfig, appSkuConfigPath } = getSkuConfig();
 
 const skuConfig = {
   ...defaultSkuConfig,
@@ -171,4 +198,5 @@ module.exports = {
   skipPackageCompatibilityCompilation:
     skuConfig.skipPackageCompatibilityCompilation,
   persistentCache: skuConfig.persistentCache,
+  externalizeNodeModules: skuConfig.externalizeNodeModules,
 };

package/docs/docs/configuration.md

@@ -1,29 +1,35 @@
 # Configuration
 
-If you need to configure sku, first create a `sku.config.js` file in your project root:
+If you need to configure sku, first create a `sku.config.ts` file in your project root:
 
 ```bash
-$ touch sku.config.js
+$ touch sku.config.ts
 ```
 
 While sku has a zero configuration mode, the equivalent manual configuration would look like this:
 
-```js
-module.exports = {
+```ts
+import type { SkuConfig } from 'sku';
+
+const skuConfig: SkuConfig = {
   clientEntry: 'src/client.js',
   renderEntry: 'src/render.js',
   public: 'src/public',
   publicPath: '/',
   target: 'dist',
 };
+
+export default skuConfig;
 ```
 
 If you need to specify a different config file you can do so with the `--config` parameter.
 
 ```bash
-$ sku start --config sku.custom.config.js
+$ sku start --config sku.custom.config.ts
 ```
 
+Config files can use either TypeScript or JavaScript.
+
 ## clientEntry
 
 type `string`
@@ -117,6 +123,24 @@ const config = {
 };
 ```
 
+## devServerMiddleware
+
+type `string`
+
+Path to a file in your project that exports a function that can receive the Express server.
+
+This can be used to extend to the dev server middleware.
+
+Example:
+
+```js
+module.exports = app => {
+  app.get('/mock-api', (req, res) => {
+    ...
+  })
+}
+```
+
 ## displayNamesProd
 
 type `boolean`
@@ -143,23 +167,13 @@ Default: `[]`
 
 An array of environments the app supports. Apps should have one environment for local development plus one for each environment they're deployed to. Use this value to drive app config (e.g. `analyticsEnabled` or `apiEndpoint`). See [static-rendering](./docs/static-rendering.md) for more info.
 
-## skipPackageCompatibilityCompilation
-
-type `Array<string>`
-
-Default: `[]`
-
-When running `sku build`, sku will compile all your external packages (`node_modules`) through `@babel/preset-env`. This is to ensure external packages satisfy the browser support policy. However, this can cause very slow builds when large packages are processed. The `skipPackageCompatibilityCompilation` option allows you to pass a list of trusted packages to skip this behaviour.
+## externalizeNodeModules
 
-> Note: `react` & `react-dom` are skipped by default.
+type `boolean`
 
-Example:
+Default: `false`
 
-```js
-const config = {
-  skipPackageCompatibilityCompilation: ['@bloat/very-large-package', 'lodash'],
-};
-```
+By default, sku compiles all node_modules in builds that target node. Setting this option to `true` will instead externalize all node_modules, excluding `compilePackages`.
 
 ## hosts
 
@@ -169,6 +183,14 @@ Default: `['localhost']`
 
 An array of custom hosts the app can be served off when running `sku start`. You must have configured your hosts file to point to localhost as well.
 
+## httpsDevServer
+
+type `boolean`
+
+Default: `false`
+
+Whether or not to use `https` for the local development server with a self-signed certificate. This is useful when testing authentication flows that require access to `window.crypto`.
+
 ## initialPath
 
 type `string`
@@ -179,7 +201,7 @@ The browser URL to open when running `sku start` or `sku start-ssr`. It will def
 
 ## languages
 
-type `Array<string>`
+type `Array<string | { name: string }>`
 
 The languages your application supports.
 
@@ -261,6 +283,18 @@ Default: `./src/render.js`
 
 The render entry file to the app. This file should export the required functions for static rendering. See [static-rendering](./docs/static-rendering.md) for more info.
 
+## rootResolution
+
+type `boolean`
+
+Default: `true`
+
+Enable root resolution. By default, sku allows importing from the root of the project e.g. `import something from 'src/modules/something'`.
+
+Unfortunately, these kinds of imports only work for apps. In packages, the imports will work locally, but fail when consumed from `node_modules`.
+
+You can set this option in `sku.config.js`, or adding `"skuCompilePackage": true` to your `package.json` will disable this behaviour by default.
+
 ## routes
 
 type `Array<string | {route: string, name: string, entry: string, languages: Array<string>}>`
@@ -321,6 +355,24 @@ Can be an array of site names, or objects with a site name and corresponding hos
 
 Can be used to limit the languages rendered for a specific site. Any listed language must exist in the [top level languages attribute](./docs/configuration?id=languages).
 
+## skipPackageCompatibilityCompilation
+
+type `Array<string>`
+
+Default: `[]`
+
+When running `sku build`, sku will compile all your external packages (`node_modules`) through `@babel/preset-env`. This is to ensure external packages satisfy the browser support policy. However, this can cause very slow builds when large packages are processed. The `skipPackageCompatibilityCompilation` option allows you to pass a list of trusted packages to skip this behaviour.
+
+> Note: `react` & `react-dom` are skipped by default.
+
+Example:
+
+```js
+const config = {
+  skipPackageCompatibilityCompilation: ['@bloat/very-large-package', 'lodash'],
+};
+```
+
 ## sourceMapsProd
 
 type `boolean`
@@ -344,6 +396,14 @@ Default: `['./src']`
 
 An array of directories holding your apps source code. By default, sku expects your source code to be in a directory named `src` in the root of your project. Use this option if your source code needs to be arranged differently.
 
+## storybookAddons
+
+type `Array<string>`
+
+Default: `[]`
+
+An array of storybook addons to use.
+
 ## storybookPort
 
 type `number`
@@ -360,14 +420,6 @@ Default: `dist-storybook`
 
 The directory `sku build-storybook` will output files to.
 
-## storybookAddons
-
-type `Array<string>`
-
-Default: `[]`
-
-An array of storybook addons to use.
-
 ## supportedBrowsers
 
 type `browserslist-query`
@@ -393,29 +445,3 @@ type `function`
 Default: `({ environment = '', site = '', route = '' }) => path.join(environment, site, route)`
 
 This function returns the output path within [`target`](#target) for each rendered page. Generally, this value should be sufficient. If you think you need to modify this setting, please reach out to the `sku-support` group first to discuss.
-
-## httpsDevServer
-
-type `boolean`
-
-Default: `false`
-
-Whether or not to use `https` for the local development server with a self-signed certificate. This is useful when testing authentication flows that require access to `window.crypto`.
-
-## devServerMiddleware
-
-type `string`
-
-Path to a file in your project that exports a function that can receive the Express server.
-
-This can be used to extend to the dev server middleware.
-
-Example:
-
-```js
-module.exports = app => {
-  app.get('/mock-api', (req, res) => {
-    ...
-  })
-}
-```

package/docs/index.html

@@ -106,5 +106,7 @@
     <script src="https://unpkg.com/docsify-themeable"></script>
     <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
     <script src="//unpkg.com/prismjs/components/prism-diff.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-typescript.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-bash.min.js"></script>
   </body>
 </html>

package/lib/configure.js

@@ -5,7 +5,6 @@ const path = require('path');
 const ensureGitignore = require('ensure-gitignore');
 const { cwd, getPathFromCwd } = require('./cwd');
 
-const isTypeScript = require('./isTypeScript');
 const { paths, httpsDevServer, languages } = require('../context');
 const {
   bundleReportFolder,
@@ -87,16 +86,10 @@ module.exports = async () => {
     patterns: lintIgnorePatterns.map(convertToForwardSlashPaths),
   });
 
-  if (isTypeScript) {
-    // Generate TypeScript configuration
-    const tsConfigFileName = 'tsconfig.json';
-    const tslintPath = getPathFromCwd('tslint.json');
-    await writeFileToCWD(tsConfigFileName, createTSConfig());
-    gitIgnorePatterns.push(tsConfigFileName);
-
-    // Delete TSLint
-    await fs.remove(tslintPath);
-  }
+  // Generate TypeScript configuration
+  const tsConfigFileName = 'tsconfig.json';
+  await writeFileToCWD(tsConfigFileName, createTSConfig());
+  gitIgnorePatterns.push(tsConfigFileName);
 
   // Generate self-signed certificate and ignore
   const selfSignedCertificateDirName = '.ssl';

package/lib/parseArgs.js

@@ -26,7 +26,6 @@ const optionDefinitions = [
     name: 'config',
     alias: 'c',
     type: String,
-    defaultValue: 'sku.config.js',
   },
   {
     name: 'debug',

package/lib/placeholder.ts

@@ -0,0 +1,7 @@
+/**
+ * This is a placeholder file that provides for at least one TypeScript file in the project.
+ *
+ * Since all projects get a tsconfig.json now, having zero TS files would cause an error.
+ *
+ * Support for purely JS projects will be removed in a future major version, and this file can be removed.
+ * */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "11.0.3",
+  "version": "11.2.1",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -105,6 +105,8 @@
     "empty-dir": "^2.0.0",
     "ensure-gitignore": "^1.1.2",
     "env-ci": "^5.0.0",
+    "esbuild": "^0.13.13",
+    "esbuild-register": "^3.2.0",
     "escape-string-regexp": "^4.0.0",
     "eslint": "^7.18.0",
     "eslint-config-seek": "^7.0.8",

package/scripts/build-storybook.js

@@ -9,8 +9,10 @@ const gracefulSpawn = require('../lib/gracefulSpawn');
 const { storybookTarget } = require('../context');
 const buildStorybookPath = require.resolve('@storybook/react/bin/build.js');
 const configDir = path.resolve(__dirname, '../config/storybook/build');
+const { runVocabCompile } = require('../lib/runVocab');
 
 (async () => {
+  await runVocabCompile();
   await rimraf(storybookTarget);
 
   argv.push('--config-dir', configDir);

package/scripts/init.js

@@ -13,8 +13,6 @@ const prettierWrite = require('../lib/runPrettier').write;
 const esLintFix = require('../lib/runESLint').fix;
 const configure = require('../lib/configure');
 const install = require('../lib/install');
-const { getMissingHosts } = require('../lib/hosts');
-const { getSuggestedScript } = require('../lib/suggestScript');
 const banner = require('../lib/banner');
 const trace = require('debug')('sku:init');
 
@@ -184,16 +182,8 @@ const args = require('../config/args');
   await esLintFix();
   await prettierWrite();
 
-  // read configured sites from templated sku config
-  const sites = require(path.join(root, 'sku.config.js')).sites;
-  const missingHosts = await getMissingHosts(sites);
-  const setupHostScript = await getSuggestedScript('setup-hosts', {
-    sudo: true,
-  });
-
   const nextSteps = [
     `${chalk.cyan('cd')} ${projectName}`,
-    missingHosts.length > 0 ? chalk.cyan(setupHostScript) : null,
     `${chalk.cyan('yarn start')}`,
   ]
     .filter(Boolean)

package/scripts/lint.js

@@ -1,5 +1,4 @@
 const chalk = require('chalk');
-const isTypeScript = require('../lib/isTypeScript');
 const esLintCheck = require('../lib/runESLint').check;
 const prettierCheck = require('../lib/runPrettier').check;
 const runTsc = require('../lib/runTsc');
@@ -14,17 +13,15 @@ const { runVocabCompile } = require('../lib/runVocab');
   await runVocabCompile();
 
   try {
-    if (isTypeScript) {
-      const hasPaths = typeof pathsToCheck !== 'undefined';
-      const pathsIncludeTS =
-        hasPaths &&
-        pathsToCheck.filter(
-          (filePath) => filePath.endsWith('.ts') || filePath.endsWith('.tsx'),
-        ).length > 0;
-
-      if (!hasPaths || pathsIncludeTS) {
-        await runTsc();
-      }
+    const hasPaths = typeof pathsToCheck !== 'undefined';
+    const pathsIncludeTS =
+      hasPaths &&
+      pathsToCheck.filter(
+        (filePath) => filePath.endsWith('.ts') || filePath.endsWith('.tsx'),
+      ).length > 0;
+
+    if (!hasPaths || pathsIncludeTS) {
+      await runTsc();
     }
 
     await prettierCheck(pathsToCheck);

package/scripts/storybook.js

@@ -4,16 +4,21 @@ const gracefulSpawn = require('../lib/gracefulSpawn');
 const { storybookPort } = require('../context');
 const startStorybookPath = require.resolve('@storybook/react/bin/index.js');
 const configDir = path.resolve(__dirname, '../config/storybook/start');
+const { watchVocabCompile } = require('../lib/runVocab');
 
 argv.push('--port', storybookPort);
 argv.push('--config-dir', configDir);
 argv.push('--quiet');
 
-const storybookProcess = gracefulSpawn(startStorybookPath, argv, {
-  stdio: 'inherit',
-  env: process.env,
-});
+(async () => {
+  await watchVocabCompile();
 
-storybookProcess.on('exit', (exitCode) => {
-  process.exit(exitCode);
-});
+  const storybookProcess = gracefulSpawn(startStorybookPath, argv, {
+    stdio: 'inherit',
+    env: process.env,
+  });
+
+  storybookProcess.on('exit', (exitCode) => {
+    process.exit(exitCode);
+  });
+})();

package/sku-types.d.ts

@@ -33,3 +33,385 @@ export interface Render<App = string> {
 
   renderDocument(p: RenderDocumentProps<App>): Promise<string> | string;
 }
+
+interface SkuRouteObject {
+  route: string;
+  name?: string;
+  entry?: string;
+  languages?: string[];
+}
+
+type SkuRoute = string | SkuRouteObject;
+
+interface SkuSiteObject {
+  name: string;
+  host?: string;
+  routes?: Array<SkuRoute>;
+  languages?: string[];
+}
+
+type SkuSite = string | SkuSiteObject;
+
+interface TranformOutputPathFunctionParams {
+  environment: string;
+  site: string;
+  path: string;
+}
+type TranformOutputPathFunction = (
+  input: TranformOutputPathFunctionParams,
+) => string;
+
+export interface SkuConfig {
+  /**
+   * The client entry point to the app. The client entry is the file that executes your browser code.
+   *
+   * @default "./src/client.js"
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=cliententry
+   */
+  clientEntry?: string;
+
+  /**
+   * An array of `node_modules` to be compiled as if they were part of your source code.
+   *
+   * Ideally, this setting should only be used for internally controlled packages.
+   *
+   * @default "[]"
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=compilepackages
+   */
+  compilePackages?: string[];
+
+  /**
+   * **Unavailable for libraries**
+   *
+   * Enable content security policy feature. More info at https://seek-oss.github.io/sku/#/./docs/csp
+   *
+   * @default false
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=cspenabled
+   */
+  cspEnabled?: boolean;
+
+  /**
+   * Extra external hosts to allow in your `script-src` content security policy. Only relevant if {@link cspEnabled} is set to `true`.
+   *
+   * @default []
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=cspextrascriptsrchosts
+   */
+  cspExtraScriptSrcHosts?: string[];
+
+  /**
+   * Similar to {@link dangerouslySetWebpackConfig} but for eslint config.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslyseteslintconfig
+   */
+  dangerouslySetESLintConfig?: (existingESLintConfig: any) => any;
+
+  /**
+   * Similar to {@link dangerouslySetWebpackConfig} but for jest config. Make sure {@link setupTests} definitely doesn’t cover your needs before using.
+   * Please speak with the `sku-support` group before using.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslysetjestconfig
+   */
+  dangerouslySetJestConfig?: (existingJestConfig: any) => any;
+
+  /**
+   * This function provides a way to override the webpack config after sku has created it.
+   * Ideally, this setting is not needed and only used for experimenting/debugging. If you require webpack features not currently supported by sku please speak to the `sku-support` group.
+   *
+   * Reliance on this setting will cause issues when upgrading sku as any custom settings may break at anytime. You’ve been warned!
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=dangerouslysetwebpackconfig
+   */
+  dangerouslySetWebpackConfig?: (existingWebpackConfig: any) => any;
+
+  /**
+   * Path to a file in your project that exports a function that can receive the Express server.
+   * This can be used to extend to the dev server middleware.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=devservermiddleware
+   */
+  devServerMiddleware?: string;
+
+  /**
+   * Adds static `displayName` properties to React components in production.
+   * This setting is designed for usage on sites that generate React code snippets, e.g. Braid.
+   *
+   * @default false
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=displaynamesprod
+   */
+  displayNamesProd?: boolean;
+
+  /**
+   * **Only for static apps**
+   *
+   * An array of environments the app supports.
+   * Apps should have one environment for local development plus one for each environment they’re deployed to.
+   *
+   * @default []
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=environments
+   */
+  environments?: string[];
+
+  /**
+   * By default, sku compiles all node_modules in builds that target node.
+   * Setting this option to `true` will instead externalize all node_modules, excluding `compilePackages`.
+   *
+   * @default false
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=externalizenodemodules
+   */
+  externalizeNodeModules?: boolean;
+
+  /**
+   * An array of custom hosts the app can be served off when running `sku start`.
+   * You must have configured your hosts file to point to localhost as well.
+   *
+   * @default ['localhost']
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=hosts
+   */
+  hosts?: string[];
+
+  /**
+   * Whether or not to use https for the local development server with a self-signed certificate.
+   * This is useful when testing authentication flows that require access to `window.crypto`.
+   *
+   * @default false
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=httpsdevserver
+   */
+  httpsDevServer?: boolean;
+
+  /**
+   * The browser URL to open when running `sku start` or `sku start-ssr`.
+   * It will default to the first `route` in the {@link routes} array.
+   *
+   * @default routes[0].route
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=initialpath
+   */
+  initialPath?: string;
+
+  /**
+   * The languages your application supports.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=languages
+   */
+  languages?: Array<string | { name: string }>;
+
+  /**
+   * **Only for libraries**
+   *
+   * The entry file for the library. If set, sku will assume the project is a library. Must export its API from this file.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=libraryentry
+   */
+  libraryEntry?: string;
+
+  /**
+   * **Only for libraries**
+   *
+   * The global name of the library. Will be added to the `window` object under `window[libraryName]`.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=libraryname
+   */
+  libraryName?: string;
+
+  /**
+   * Enables linting of import order. This rule supports auto-fix.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/linting?id=import-ordering
+   */
+  orderImports?: boolean;
+
+  /**
+   * Disables the use of webpack filesystem caching for `sku start` and `sku start-ssr`.
+   *
+   * @default true
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=persistentcache
+   */
+  persistentCache?: boolean;
+
+  /**
+   * An array of polyfills to be included into all client entry points.
+   *
+   * @default []
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=polyfills
+   */
+  polyfills?: string[];
+
+  /**
+   * The port the app is hosted on when running `sku start`.
+   *
+   * @default 8080
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=port
+   */
+  port?: number;
+
+  /**
+   * A folder of public assets to be copied into the `target` directory after `sku build` or `sku build-ssr`.
+   *
+   * *Caution*: All assets should ideally be imported through the source code to ensure they are named correctly for long term caching.
+   * You may run into caching issues using this option. It may be removed in future.
+   *
+   * @default 'public'
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=public
+   */
+  public?: string;
+
+  /**
+   * The URL all the static assets of the app are accessible under.
+   *
+   * @default '/'
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=publicpath
+   */
+  publicPath?: string;
+
+  /**
+   * **Only for static apps and libraries**
+   *
+   * The render entry file to the app. This file should export the required functions for static rendering.
+   *
+   * @default "./src/render.js"
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=renderentry
+   */
+  renderEntry?: string;
+
+  /**
+   * Enables root resolution.
+   *
+   * By default, sku allows importing from the root of the project e.g. `import something from 'src/modules/something'`.
+   *
+   * Unfortunately, these kinds of imports only work for apps.
+   * In packages, the imports will work locally, but fail when consumed from `node_modules`.
+   *
+   * @default true
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=rootresolution
+   */
+  rootResolution?: boolean;
+
+  /**
+   * **Only for static apps**
+   *
+   * An array of routes for the app. Each route must specify a name and a route corresponding to the path it is hosted under. Each route may also have a custom client entry, which can help with bundle splitting. See static-rendering for more info.
+   *
+   * Can be used to limit the languages rendered for a specific route. Any listed language must exist in the top level languages attribute.
+   *
+   * @default ['/']
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=routes
+   */
+  routes?: Array<SkuRoute>;
+
+  /**
+   * *Only for SSR apps**
+   *
+   * The entry file for the server.
+   *
+   * @default "./src/server.js"
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=serverentry
+   */
+  serverEntry?: string;
+
+  /**
+   * **Only for SSR apps**
+   *
+   * The port the server is hosted on when running `sku start-ssr`.
+   *
+   * @default 8181
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=serverport
+   */
+  serverPort?: number;
+
+  /**
+   * Point to a JS file that will run before your tests to setup the testing environment.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=setuptests
+   */
+  setupTests?: string | string[];
+
+  /**
+   * **Only for static apps**
+   *
+   * An array of sites the app supports. These usually correspond to each domain the app is hosted under.
+   *
+   * @default []
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=sites
+   */
+  sites?: Array<SkuSite>;
+
+  /**
+   * When running `sku build`, sku will compile all your external packages (`node_modules`) through `@babel/preset-env`.
+   * This is to ensure external packages satisfy the browser support policy.
+   * However, this can cause very slow builds when large packages are processed.
+   *
+   * The `skipPackageCompatibilityCompilation` option allows you to pass a list of trusted packages to skip this behaviour.
+   *
+   * @default []
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=skippackagecompatibilitycompilation
+   */
+  skipPackageCompatibilityCompilation?: string[];
+
+  /**
+   * By default source maps will be generated only for development builds. Set to `true` to enable source maps in production.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=sourcemapsprod
+   */
+  sourceMapsProd?: boolean;
+
+  /**
+   * An array of directories holding your apps source code.
+   * By default, sku expects your source code to be in a directory named `src` in the root of your project.
+   *
+   * Use this option if your source code needs to be arranged differently.
+   *
+   * @default ['./src']
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=srcpaths
+   */
+  srcPaths?: string[];
+
+  /**
+   * An array of storybook addons to use.
+   *
+   * @default []
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=storybookaddons
+   */
+  storybookAddons?: string[];
+
+  /**
+   * The port to host storybook on when running `sku storybook`.
+   *
+   * @default 8081
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=storybookport
+   */
+  storybookPort?: number;
+
+  /**
+   * The directory `sku build-storybook` will output files to.
+   *
+   * @default 'dist-storybook'
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=storybooktarget
+   */
+  storybookTarget?: string;
+
+  /**
+   * The `browserslist` query describing the apps browser support policy.
+   *
+   * @default browserslist-config-seek
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=supportedbrowsers
+   */
+  supportedBrowsers?: string[];
+
+  /**
+   * The directory to build your assets into when running `sku build` or `sku build-ssr`.
+   *
+   * @default 'dist'
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=target
+   */
+  target?: string;
+
+  /**
+   * **Only for static apps**
+   *
+   * This function returns the output path within {@link target} for each rendered page. Generally, this value should be sufficient.
+   *
+   * If you think you need to modify this setting, please reach out to the `sku-support` group first to discuss.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=transformoutputpath
+   */
+  transformOutputPath?: TranformOutputPathFunction;
+}

package/template/{sku.config.js → sku.config.ts}

@@ -1,7 +1,11 @@
-module.exports = {
+import type { SkuConfig } from 'sku';
+
+const skuConfig: SkuConfig = {
   clientEntry: 'src/client.tsx',
   renderEntry: 'src/render.tsx',
   environments: ['development', 'production'],
   publicPath: '/path/to/public/assets/', // <-- Required for sku build output
   orderImports: true
 };
+
+export default skuConfig;

package/template/src/render.tsx

@@ -22,7 +22,7 @@ const skuRender: Render<RenderContext> = {
     };
   },
 
-  provideClientContext: ({ environment }): ClientContext => ({
+  provideClientContext: ({ environment }) => ({
     environment
   }),
 

package/lib/isTypeScript.js

@@ -1,16 +0,0 @@
-const glob = require('fast-glob');
-const { cwd } = require('./cwd');
-const debug = require('debug')('sku:isTypeScript');
-
-const tsFiles = glob.sync(['**/*.{ts,tsx}', '!**/node_modules/**'], {
-  cwd: cwd(),
-});
-const isTypeScript = tsFiles.length > 0;
-
-if (isTypeScript) {
-  debug(
-    `Found TypeScript in project. Found ${tsFiles.length} with the first at "${tsFiles[0]}".`,
-  );
-}
-
-module.exports = isTypeScript;