sku 11.1.0 → 11.2.3

package/.github/workflows/validate.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       CI: true
-    timeout-minutes: 20
+    timeout-minutes: 30
     steps:
       - name: Checkout Repo
         uses: actions/checkout@master

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # sku
 
+## 11.2.3
+
+### Patch Changes
+
+- Prevents typescript from being upgraded to 4.5.x ([#662](https://github.com/seek-oss/sku/pull/662))
+
+  Typescript 4.5 has caused a lot of issues with packages included with sku (braid, vanilla-extract) that are caused by a regression that's been introduced in the type checker.
+  It seems to be fixed in 4.6.0-dev, but that won't be available until late February.
+
+  To prevent things blowing up in the meantime, the version of typescript has been update to keep it below 4.5, at least until a patch is released in 4.5
+
+## 11.2.2
+
+### Patch Changes
+
+- The autogenerated tsconfig.json no longer explicitly excludes `node_modules` ([#660](https://github.com/seek-oss/sku/pull/660))
+
+## 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

package/config/typescript/tsconfig.js

@@ -1,7 +1,19 @@
-const { cwd, getPathFromCwd } = require('../../lib/cwd');
+const { cwd } = 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,8 +33,7 @@ module.exports = () => {
       lib: ['dom', 'es2015'],
       target: 'es5',
     },
-    include: paths.src,
-    exclude: [getPathFromCwd('node_modules')],
+    include: includePaths,
   };
 
   if (rootResolution) {

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/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');
@@ -236,7 +235,7 @@ const makeWebpackConfig = ({
           browserslist: supportedBrowsers,
           mode: webpackMode,
           libraryName,
-          generateCSSTypes: isTypeScript,
+          generateCSSTypes: true,
           displayNamesProd,
           removeAssertionsInProduction: !isIntegration,
           MiniCssExtractPlugin,

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,
@@ -189,7 +188,7 @@ const makeWebpackConfig = ({
           hot,
           include: internalInclude,
           compilePackages: paths.compilePackages,
-          generateCSSTypes: isTypeScript,
+          generateCSSTypes: true,
           browserslist: supportedBrowsers,
           mode: webpackMode,
           displayNamesProd,

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,

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`
@@ -151,31 +175,21 @@ Default: `false`
 
 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`.
 
-## skipPackageCompatibilityCompilation
+## hosts
 
 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:
+Default: `['localhost']`
 
-```js
-const config = {
-  skipPackageCompatibilityCompilation: ['@bloat/very-large-package', 'lodash'],
-};
-```
+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.
 
-## hosts
+## httpsDevServer
 
-type `Array<string>`
+type `boolean`
 
-Default: `['localhost']`
+Default: `false`
 
-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.
+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
 
@@ -187,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.
 
@@ -269,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>}>`
@@ -329,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`
@@ -352,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`
@@ -368,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`
@@ -401,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.1.0",
+  "version": "11.2.3",
   "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",
@@ -149,7 +151,7 @@
     "traverse": "^0.6.6",
     "treat": "^2.0.4",
     "tree-kill": "^1.2.1",
-    "typescript": "^4.1.3",
+    "typescript": ">=4.1.3 <4.5.0",
     "validate-npm-package-name": "^3.0.0",
     "webpack": "^5.47.1",
     "webpack-bundle-analyzer": "^4.4.2",

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;