sku 11.7.2 → 11.8.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # sku
 
+## 11.8.0
+
+### Minor Changes
+
+- Add `libraryFile` configuration option ([#755](https://github.com/seek-oss/sku/pull/755))
+
+  This option allows the file name of the library to be specified in the sku configuration.
+  If this option is not specified then the `libraryName` option will be used for this purpose instead (note that this is the previously existing behaviour).
+
+  **EXAMPLE USAGE**:
+
+  ```typescript
+  // sku.config.ts
+  import type { SkuConfig } from 'sku';
+
+  const skuConfig: SkuConfig = {
+    libraryEntry: 'src/library.js',
+    renderEntry: 'src/render.js',
+    libraryName: 'MyAwesomeLibrary',
+    libraryFile: 'my-awesome-library',
+  };
+
+  export default skuConfig;
+  ```
+
 ## 11.7.2
 
 ### Patch Changes

package/README.md

@@ -1,10 +1,10 @@
 [![npm](https://img.shields.io/npm/v/sku.svg?style=flat-square)](https://www.npmjs.com/package/sku)
 
 <br />
-<img src="docs/logo/logo.png?raw=true" alt="sku" title="sku" width="147" height="79" />
+<img src="https://github.com/seek-oss/sku/raw/master/docs/logo/logo.png?raw=true" alt="sku" title="sku" width="147" height="79" />
 <br />
 
-Front-end development toolkit, powered by [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [CSS Modules](https://github.com/css-modules/css-modules), [Less](http://lesscss.org/), [ESLint](http://eslint.org/), [Prettier](https://prettier.io/), [Jest](https://facebook.github.io/jest/) and [Storybook](https://storybook.js.org/).
+Front-end development toolkit, powered by [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [Vanilla Extract](https://vanilla-extract.style/), [CSS Modules](https://github.com/css-modules/css-modules), [Less](http://lesscss.org/), [ESLint](http://eslint.org/), [Prettier](https://prettier.io/), [Jest](https://facebook.github.io/jest/) and [Storybook](https://storybook.js.org/).
 
 Quickly get up and running with a zero-config development environment, or optionally add minimal config when needed. Designed for usage with [braid-design-system](https://github.com/seek-oss/braid-design-system), although this isn't a requirement.
 
@@ -36,7 +36,7 @@ $ npm install -g npx
 
 ## Contributing
 
-Refer to [CONTRIBUTING.md](./CONTRIBUTING.md). If you're planning to change the public API, please [open a new issue](https://github.com/seek-oss/sku/issues/new) and follow the provided RFC template in the [GitHub issue template](.github/ISSUE_TEMPLATE.md).
+Refer to [CONTRIBUTING.md](/CONTRIBUTING.md). If you're planning to change the public API, please [open a new issue](https://github.com/seek-oss/sku/issues/new).
 
 ## License
 

package/config/webpack/webpack.config.js

@@ -33,6 +33,7 @@ const {
   polyfills,
   isLibrary,
   libraryName,
+  libraryFile,
   supportedBrowsers,
   displayNamesProd,
   cspEnabled,
@@ -99,7 +100,7 @@ const makeWebpackConfig = ({
     // Libraries should always have the same file name
     // for the main chunk unless we're building for storybook
     if (isLibrary && isMainChunk) {
-      return libraryName;
+      return libraryFile ?? libraryName;
     }
 
     // The client file mask is set to just name in start/dev mode as contenthash
@@ -314,7 +315,8 @@ const makeWebpackConfig = ({
         ...(htmlRenderPlugin ? [htmlRenderPlugin.rendererPlugin] : []),
         new webpack.DefinePlugin(envVars),
         new webpack.DefinePlugin({
-          SKU_LIBRARY_NAME: JSON.stringify(libraryName),
+          __SKU_LIBRARY_NAME__: JSON.stringify(libraryName),
+          __SKU_LIBRARY_FILE__: JSON.stringify(libraryFile),
           __SKU_PUBLIC_PATH__: JSON.stringify(paths.publicPath),
           __SKU_CSP__: JSON.stringify({
             enabled: cspEnabled,

package/context/configSchema.js

@@ -149,6 +149,10 @@ module.exports = validator.compile({
     type: 'string',
     optional: true,
   },
+  libraryFile: {
+    type: 'string',
+    optional: true,
+  },
   dangerouslySetWebpackConfig: {
     type: 'function',
   },

package/context/defaultSkuConfig.js

@@ -30,6 +30,7 @@ module.exports = {
   publicPath: '/',
   polyfills: [],
   libraryName: null,
+  libraryFile: null,
   sourceMapsProd: false,
   displayNamesProd: false,
   dangerouslySetWebpackConfig: defaultDecorator,

package/context/index.js

@@ -169,6 +169,7 @@ module.exports = {
     server: skuConfig.serverPort,
   },
   libraryName: skuConfig.libraryName,
+  libraryFile: skuConfig.libraryFile,
   isLibrary: Boolean(skuConfig.libraryEntry),
   storybookPort: skuConfig.storybookPort,
   storybookTarget: skuConfig.storybookTarget,

package/entry/libraryRender/index.js

@@ -1,14 +1,17 @@
 import render from '__sku_alias__renderEntry';
 
-const libraryName = SKU_LIBRARY_NAME;
+const libraryName = __SKU_LIBRARY_NAME__;
+const libraryFile = __SKU_LIBRARY_FILE__;
 const publicPath = __SKU_PUBLIC_PATH__;
 
+const libraryPath = `${publicPath}${libraryFile ?? libraryName}`;
+
 export default (renderParams) => {
-  const renderContext = { ...renderParams, libraryName };
+  const renderContext = { ...renderParams, libraryName, libraryFile };
 
   return render.renderDocument({
     ...renderContext,
-    headTags: `<link rel="stylesheet" type="text/css" href="${publicPath}${libraryName}.css">`,
-    bodyTags: `<script src="${publicPath}${libraryName}.js"></script>`,
+    headTags: `<link rel="stylesheet" type="text/css" href="${libraryPath}.css">`,
+    bodyTags: `<script src="${libraryPath}.js"></script>`,
   });
 };

package/entry/render/index.js

@@ -7,7 +7,8 @@ import createCSPHandler from '../csp';
 
 import render from '__sku_alias__renderEntry';
 
-const libraryName = SKU_LIBRARY_NAME;
+const libraryName = __SKU_LIBRARY_NAME__;
+const libraryFile = __SKU_LIBRARY_FILE__;
 const publicPath = __SKU_PUBLIC_PATH__;
 const csp = __SKU_CSP__;
 
@@ -18,7 +19,7 @@ export const serializeConfig = (config) =>
   )}</script>`;
 
 export default async (renderParams) => {
-  const renderContext = { ...renderParams, libraryName };
+  const renderContext = { ...renderParams, libraryName, libraryFile };
 
   let app;
   let clientContext = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "11.7.2",
+  "version": "11.8.0",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -9,43 +9,12 @@
   "engines": {
     "node": ">=14.15"
   },
-  "scripts": {
-    "lint": "yarn format-check && eslint --cache .",
-    "check": "yarn check --integrity && echo 'Ignore paths from lint-staged'",
-    "pretest": "yarn check --integrity",
-    "test": "SKU_TELEMETRY=false SKU_DISABLE_CACHE=true OPEN_TAB=false jest --verbose --detectOpenHandles --runInBand",
-    "test-manual": "SKU_TELEMETRY=false node test/manual",
-    "setup-test-hosts": "node test/utils/setupTestHosts",
-    "format": "prettier --write '**/*.{js,ts,tsx,md,less,css}'",
-    "format-check": "prettier --list-different '**/*.{js,ts,tsx,md,less,css}'",
-    "postinstall": "node ./scripts/postinstall.js",
-    "release": "node ./deploy-docs.js && changeset publish"
-  },
   "types": "./sku-types.d.ts",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "+(package.json|yarn.lock)": [
-      "yarn run check"
-    ],
-    "**/*.js": [
-      "eslint --cache --fix"
-    ],
-    "**/*.{js,ts,tsx,md,less,css}": [
-      "prettier --write"
-    ]
-  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/seek-oss/sku.git"
+    "url": "https://github.com/seek-oss/sku.git",
+    "directory": "packages/sku"
   },
-  "keywords": [
-    "toolkit",
-    "webpack"
-  ],
   "author": "SEEK",
   "license": "MIT",
   "bugs": {
@@ -72,7 +41,6 @@
     "@storybook/builder-webpack5": "^6.5.12",
     "@storybook/manager-webpack5": "^6.5.12",
     "@storybook/react": "^6.5.12",
-    "@types/jest": "^29.0.0",
     "@types/loadable__component": "^5.13.1",
     "@vanilla-extract/jest-transform": "^1.1.0",
     "@vanilla-extract/webpack-plugin": "^2.2.0",
@@ -123,7 +91,6 @@
     "html-render-webpack-plugin": "^3.0.1",
     "identity-obj-proxy": "^3.0.0",
     "indent-string": "^4.0.0",
-    "inquirer": "^8.2.3",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
     "jest-watch-typeahead": "^2.2.0",
@@ -165,10 +132,6 @@
     "x-default-browser": "^0.5.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.13.0",
-    "@changesets/get-github-info": "^0.4.5",
-    "@storybook/addon-controls": "^6.5.12",
-    "@testing-library/react": "^11.2.3",
     "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.11",
     "@types/react": "^17.0.0",
@@ -176,32 +139,16 @@
     "@vanilla-extract/css": "^1.0.0",
     "@vocab/react": "^1.0.1",
     "assert": "^2.0.0",
-    "async-disk-cache": "^2.1.0",
     "braid-design-system": "^31.0.0",
-    "child-process-promise": "^2.2.1",
-    "css": "^3.0.0",
-    "diffable-html": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "git-diff": "^2.0.6",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^4.3.8",
-    "jest-puppeteer": "^7.0.0",
-    "jsonc-parser": "^3.0.0",
-    "node-dir": "^0.1.17",
     "node-fetch": "^2.6.1",
-    "puppeteer": "^19.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
-    "renovate-config-seek": "^0.4.0",
     "seek-style-guide": "^42.0.0",
-    "wait-on": "^5.2.1",
-    "webpack-cli": "^5.0.0",
-    "webpack-stats-plugin": "^1.0.3"
+    "webpack-cli": "^5.0.0"
   },
-  "volta": {
-    "node": "16.19.0",
-    "yarn": "1.22.19"
+  "scripts": {
+    "postinstall": "node ./scripts/postinstall.js"
   }
-}
+}

package/scripts/build-ssr.js

@@ -53,5 +53,9 @@ const { runVocabCompile } = require('../lib/runVocab');
     process.exitCode = 1;
   } finally {
     await track.close();
+
+    if (process.env.SKU_FORCE_EXIT) {
+      process.exit();
+    }
   }
 })();

package/sku-types.d.ts

@@ -7,6 +7,7 @@ interface SharedRenderProps {
   site: string;
   language: string;
   libraryName: string;
+  libraryFile: string;
   // Webpack use an any here. PR for better type welcome.
   webpackStats: any;
 }
@@ -212,6 +213,18 @@ export interface SkuConfig {
    */
   libraryName?: string;
 
+  /**
+   * **Only for libraries**
+   *
+   * The file name of the library. The main bundle of the library will be output to `dist/${libraryFile}.js` - note that the
+   * `.js` extension will be added automatically and should not be included in the configuration option itself.
+   *
+   * If `libraryFile` is not specified then `libraryName` will be used instead.
+   *
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=libraryfile
+   */
+  libraryFile?: string;
+
   /**
    * Enables linting of import order. This rule supports auto-fix.
    *

package/.changeset/changelog.js

@@ -1,58 +0,0 @@
-// Slightly modified version of
-// https://github.com/atlassian/changesets/blob/master/packages/changelog-github/src/index.ts
-// changing the release line formatting
-const { getInfo } = require('@changesets/get-github-info');
-
-const repo = 'seek-oss/sku';
-
-const changelogFunctions = {
-  getDependencyReleaseLine: async (changesets, dependenciesUpdated) => {
-    if (dependenciesUpdated.length === 0) return '';
-
-    const changesetLink = `- Updated dependencies [${(
-      await Promise.all(
-        changesets.map(async (cs) => {
-          if (cs.commit) {
-            let { links } = await getInfo({
-              repo,
-              commit: cs.commit,
-            });
-            return links.commit;
-          }
-        }),
-      )
-    )
-      .filter((_) => _)
-      .join(', ')}]:`;
-
-    const updatedDepenenciesList = dependenciesUpdated.map(
-      (dependency) => `  - ${dependency.name}@${dependency.newVersion}`,
-    );
-
-    return [changesetLink, ...updatedDepenenciesList].join('\n');
-  },
-  getReleaseLine: async (changeset) => {
-    const [firstLine, ...futureLines] = changeset.summary
-      .split('\n')
-      .map((l) => l.trimRight());
-
-    if (changeset.commit) {
-      let { links } = await getInfo({
-        repo,
-        commit: changeset.commit,
-      });
-
-      const versionInfo = links.pull === null ? changeset.commit : links.pull;
-
-      const summary = `- ${firstLine} (${versionInfo})`;
-
-      return `${summary}\n${futureLines.map((l) => `  ${l}`).join('\n')}`;
-    } else {
-      return `\n\n- ${firstLine}\n${futureLines
-        .map((l) => `  ${l}`)
-        .join('\n')}`;
-    }
-  },
-};
-
-module.exports = changelogFunctions;

package/.changeset/config.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
-  "changelog": "./changelog",
-  "commit": false,
-  "linked": [],
-  "access": "public",
-  "baseBranch": "master"
-}

package/.editorconfig

@@ -1,13 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.snap]
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,12 +0,0 @@
-*.less.d.ts
-node_modules
-coverage/
-dist/
-dist-build/
-dist-playroom/
-dist-start/
-dist-storybook/
-report/
-template/
-test/test-cases/*/*
-!test/test-cases/*/*.test.js

package/.eslintrc

@@ -1,53 +0,0 @@
-{
-  "extends": "seek",
-  "rules": {
-    "no-console": "off",
-    "no-process-exit": "off",
-    "no-sync": "off",
-    "import/no-unresolved": [
-      "error",
-      {
-        "commonjs": true,
-        "amd": true,
-        "ignore": [
-          "__sku_alias__renderEntry",
-          "__sku_alias__serverEntry",
-          "__sku_alias__clientEntry",
-          "__sku_alias__webpackStats"
-        ]
-      }
-    ],
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
-  },
-  "overrides": [
-    {
-      "files": ["test/**"],
-      "env": {
-        "jest": true
-      },
-      "globals": {
-        "browser": true
-      }
-    }
-  ],
-  "globals": {
-    "__SKU_SRC_PATHS_0__": true,
-    "__SKU_SRC_PATHS_1__": true,
-    "__SKU_SRC_PATHS_2__": true,
-    "__SKU_SRC_PATHS_3__": true,
-    "__SKU_SRC_PATHS_4__": true,
-    "__SKU_SRC_PATHS_5__": true,
-    "__SKU_SRC_PATHS_6__": true,
-    "__SKU_SRC_PATHS_7__": true,
-    "__SKU_SRC_PATHS_8__": true,
-    "__SKU_SRC_PATHS_9__": true,
-    "__SKU_CLIENT_PATH__": true,
-    "__SKU_PUBLIC_PATH__": true,
-    "__SKU_CSP__": true,
-    "__SKU_DEV_HTTPS__": true,
-    "__SKU_DEV_MIDDLEWARE_ENABLED__": true,
-    "__SKU_DEV_MIDDLEWARE_PATH__": true,
-    "SKU_LIBRARY_NAME": true
-  }
-}

package/.github/CODEOWNERS

@@ -1,5 +0,0 @@
-# See https://help.github.com/articles/about-codeowners/ for more info
-# Each line is a file pattern followed by one or more owners.
-
-# These owners will be the default owners for everything in the repo.
-*       @seek-oss/sku-maintainers

package/.github/workflows/release.yml

@@ -1,37 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  release:
-    name: Publish & Deploy docs
-    runs-on: ubuntu-latest
-    env:
-      CI: true
-    timeout-minutes: 15
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-        with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
-          fetch-depth: 0
-          token: ${{ secrets.SEEK_OSS_CI_GITHUB_TOKEN }}
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: 'package.json'
-
-      - name: Install Dependencies
-        run: yarn --frozen-lockfile
-
-      - name: Create Release Pull Request or Publish to npm
-        uses: changesets/action@v1
-        with:
-          publish: yarn release
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEEK_OSS_CI_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}

package/.github/workflows/snapshot.yml

@@ -1,29 +0,0 @@
-name: Snapshot
-
-on: workflow_dispatch
-
-jobs:
-  release:
-    name: Publish snapshot version
-    runs-on: ubuntu-latest
-    env:
-      CI: true
-    steps:
-      - name: Check out repo
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Publish
-        uses: seek-oss/changesets-snapshot@v0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}

package/.github/workflows/validate.yml

@@ -1,31 +0,0 @@
-name: Validate
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    name: Lint & Test
-    runs-on: ubuntu-latest
-    env:
-      CI: true
-    timeout-minutes: 30
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: 'package.json'
-
-      - name: Install Dependencies
-        run: yarn --frozen-lockfile
-
-      - name: Set up hosts
-        run: sudo yarn setup-test-hosts
-
-      - name: Lint
-        run: yarn lint
-
-      - name: Test
-        run: yarn test

package/.nvmrc

@@ -1 +0,0 @@
-14.17.4

package/.prettierignore

@@ -1,13 +0,0 @@
-*.less.d.ts
-node_modules
-coverage/
-dist/
-dist-ssr/
-dist-build/
-dist-playroom/
-dist-start/
-dist-storybook/
-report/
-template/
-.changeset/*.md
-CHANGELOG.md

package/.vscode/extensions.json

@@ -1,5 +0,0 @@
-{
-  "recommendations": [
-    "bierner.comment-tagged-templates"
-  ]
-}

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}