Move sku to a package within the monorepo (#754)

.changeset/config.json

@@ -4,5 +4,6 @@
   "commit": false,
   "linked": [],
   "access": "public",
+  "ignore": ["@sku-fixtures/*", "@sku-private/*"],
   "baseBranch": "master"
 }

.github/workflows/validate.yml

@@ -50,4 +50,4 @@ jobs:
           key: jest-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}
 
       - name: Test
-        run: pnpm run test
+        run: pnpm run test --maxWorkers=2

.npmrc

@@ -1,2 +1,11 @@
 # `treat` needs this to be hoisted
 public-hoist-pattern[]="virtual-resource-loader"
+
+# `sku` itself needs these to be hoisted
+public-hoist-pattern[]="babel-loader"
+public-hoist-pattern[]="css-loader"
+
+# This is only necessary in this repo because pnpm symlinks the sku dependency in fixtures to the sku package folder directly
+# This bypasses the .pnpm folder that resolveModules looks for
+# See https://github.com/seek-oss/sku/blob/275752bd3066e52885d461ef5bcd953aaac3bfff/config/webpack/resolveModules.js
+public-hoist-pattern[]="@babel/*"

README.md

@@ -0,0 +1 @@
+packages/sku/README.md

fixtures/braid-design-system/src/App.test.tsx

@@ -15,8 +15,8 @@ describe('braid-design-system', () => {
     ).toMatchInlineSnapshot(`
       "<style type="text/css">
                   html,body{margin:0;padding:0;background:#F7F8FB}
-                  html.sprinkles_darkMode__zbxwrwz,html.sprinkles_darkMode__zbxwrwz body{color-scheme:dark;background:#0E131B}
-                </style><div class="apacTheme_default__1nvyio50 typography_lightModeTone_light__2k73ke18 typography_darkModeTone_dark__2k73ke1b"><div class="reset_base__136o6wh0 sprinkles_paddingTop_large_mobile__zbxwrw6q App_vanillaBox__inn18b0"></div></div>"
+                  html.sprinkles_darkMode__in90cbz,html.sprinkles_darkMode__in90cbz body{color-scheme:dark;background:#0E131B}
+                </style><div class="apacTheme_default__eah7240 typography_lightModeTone_light__myxsed18 typography_darkModeTone_dark__myxsed1b"><div class="reset_base__pv0jxi0 sprinkles_paddingTop_large_mobile__in90cb6q App_vanillaBox__inn18b0"></div></div>"
     `);
   });
 });

fixtures/sku-webpack-plugin/package.json

@@ -4,6 +4,8 @@
   "main": "./main.js",
   "dependencies": {
     "braid-design-system": "^31.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "html-webpack-plugin": "^5.3.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "sku": "workspace:*"

fixtures/translations/.eslintignore

@@ -1,5 +1,3 @@
-translations.ts
-
 # managed by sku
 **/*.vocab/index.ts
 *.less.d.ts

fixtures/translations/.gitignore

@@ -1,5 +1,4 @@
 /**/*.vocab/index.ts
-dist-ssr/
 
 # managed by sku
 **/*.vocab/index.ts

fixtures/translations/package.json

@@ -2,12 +2,16 @@
   "name": "@sku-fixtures/translations",
   "private": true,
   "dependencies": {
+    "@vocab/core": "^1.1.0",
     "@vocab/react": "^1.0.1",
+    "@vocab/webpack": "^1.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "sku": "workspace:*"
   },
   "devDependencies": {
-    "@types/express": "^4.17.11"
+    "@types/express": "^4.17.11",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
   }
 }

fixtures/typescript-css-modules/package.json

@@ -6,5 +6,9 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "sku": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
   }
 }

fixtures/typescript-css-modules/src/setupTests.ts

@@ -1 +1 @@
-Object.defineProperty(global, 'SETUP_TESTS_SCRIPT_RAN', { value: true });
+Object.defineProperty(globalThis, 'SETUP_TESTS_SCRIPT_RAN', { value: true });

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/test-utils/jestSetup.js'],
   testPathIgnorePatterns: [
     '/node_modules/',
-    '<rootDir>/scripts/test.js',
+    '<rootDir>/packages/sku/scripts/test.js',
     '<rootDir>/fixtures/.*/src',
   ],
   watchPlugins: [

package.json

@@ -1,28 +1,22 @@
 {
-  "name": "sku",
-  "version": "11.7.2",
+  "name": "@sku-private/monorepo",
+  "private": true,
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
-  "main": "index.js",
-  "bin": {
-    "sku": "./bin/sku.js"
-  },
   "engines": {
     "node": ">=14.15"
   },
   "scripts": {
     "lint": "pnpm format-check && eslint --cache .",
     "check": "pnpm install --frozen-lockfile && echo 'Ignore paths from lint-staged'",
-    "test": "SKU_TELEMETRY=false SKU_DISABLE_CACHE=true SKU_FORCE_EXIT=true OPEN_TAB=false jest --verbose",
+    "test": "SKU_TELEMETRY=false SKU_DISABLE_CACHE=true OPEN_TAB=false jest --verbose",
     "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",
     "deploy-docs": "pnpm run --filter @sku-private/docs deploy",
     "release": "pnpm deploy-docs && changeset publish",
     "version": "changeset version && pnpm install --lockfile-only"
   },
   "packageManager": "pnpm@7.29.0",
-  "types": "./sku-types.d.ts",
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -43,154 +37,38 @@
     "type": "git",
     "url": "https://github.com/seek-oss/sku.git"
   },
-  "keywords": [
-    "toolkit",
-    "webpack"
-  ],
   "author": "SEEK",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/seek-oss/sku/issues"
   },
   "homepage": "https://github.com/seek-oss/sku#readme",
-  "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
-  },
-  "dependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.18.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.18.0",
-    "@babel/plugin-transform-runtime": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
-    "@babel/preset-react": "^7.18.0",
-    "@babel/preset-typescript": "^7.18.0",
-    "@babel/runtime": "^7.18.0",
-    "@loadable/babel-plugin": "^5.13.2",
-    "@loadable/component": "^5.14.1",
-    "@loadable/server": "^5.14.0",
-    "@loadable/webpack-plugin": "^5.14.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/react": "^6.5.12",
+  "devDependencies": {
+    "@changesets/cli": "^2.13.0",
+    "@changesets/get-github-info": "^0.4.5",
+    "@sku-private/test-utils": "workspace:*",
+    "@types/dedent": "^0.7.0",
     "@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",
-    "@vocab/core": "^1.1.0",
-    "@vocab/phrase": "^1.1.0",
-    "@vocab/pseudo-localize": "^1.0.0",
-    "@vocab/webpack": "^1.1.0",
-    "autoprefixer": "^10.3.1",
-    "babel-jest": "^29.0.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-seek-style-guide": "^1.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "babel-plugin-treat": "^1.6.2",
-    "babel-plugin-unassert": "^3.1.0",
-    "browserslist": "^4.16.1",
-    "browserslist-config-seek": "^2.1.0",
-    "chalk": "^4.1.0",
-    "command-line-args": "^5.1.1",
-    "cross-spawn": "^7.0.3",
-    "css-loader": "^6.7.1",
-    "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "^5.0.7",
-    "death": "^1.1.0",
     "debug": "^4.3.1",
     "dedent": "^0.7.0",
-    "didyoumean2": "^5.0.0",
-    "ejs": "^3.1.8",
-    "empty-dir": "^3.0.0",
-    "ensure-gitignore": "^1.1.2",
-    "env-ci": "^7.0.0",
-    "esbuild": "^0.17.0",
-    "esbuild-register": "^3.3.3",
-    "escape-string-regexp": "^4.0.0",
     "eslint": "^7.18.0",
     "eslint-config-seek": "^10.1.1",
-    "exception-formatter": "^2.1.2",
-    "express": "^4.16.3",
-    "fast-glob": "^3.2.5",
-    "fastest-validator": "^1.9.0",
-    "find-up": "^5.0.0",
-    "fs-extra": "^10.0.0",
-    "get-port": "^5.0.0",
-    "hostile": "^1.3.3",
-    "html-render-webpack-plugin": "^3.0.1",
-    "identity-obj-proxy": "^3.0.0",
-    "indent-string": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "husky": "^4.3.8",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
+    "jest-puppeteer": "^7.0.0",
     "jest-watch-typeahead": "^2.2.0",
-    "less": "^4.1.0",
-    "less-loader": "^11.0.0",
     "lint-staged": "^11.1.1",
-    "lodash": "^4.17.21",
-    "memoizee": "^0.4.15",
-    "mini-css-extract-plugin": "^2.6.1",
-    "node-emoji": "^1.10.0",
-    "node-html-parser": "^6.1.1",
-    "open": "^7.3.1",
-    "path-to-regexp": "^6.2.0",
-    "postcss": "^8.4.0",
-    "postcss-loader": "^7.0.1",
     "prettier": "^2.3.2",
-    "pretty-ms": "^7.0.1",
-    "react-refresh": "^0.14.0",
-    "react-treat": "^2.0.1",
-    "require-from-string": "^2.0.2",
-    "rimraf": "^3.0.0",
-    "selfsigned": "^2.1.1",
-    "semver": "^7.3.4",
-    "serialize-javascript": "^6.0.0",
-    "serve-handler": "^6.1.3",
-    "svgo-loader": "^3.0.0",
-    "terser-webpack-plugin": "^5.1.4",
-    "traverse": "^0.6.6",
-    "treat": "^2.0.4",
-    "tree-kill": "^1.2.1",
-    "typescript": "^4.5.0",
-    "validate-npm-package-name": "^4.0.0",
-    "webpack": "^5.52.0",
-    "webpack-bundle-analyzer": "^4.6.1",
-    "webpack-dev-server": "4.11.1",
-    "webpack-merge": "^5.8.0",
-    "webpack-node-externals": "^3.0.0",
-    "wrap-ansi": "^7.0.0",
-    "x-default-browser": "^0.5.0"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.13.0",
-    "@changesets/get-github-info": "^0.4.5",
-    "@types/dedent": "^0.7.0",
-    "@types/express": "^4.17.11",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@vanilla-extract/css": "^1.0.0",
-    "@vocab/react": "^1.0.1",
-    "assert": "^2.0.0",
-    "braid-design-system": "^31.0.0",
-    "css": "^3.0.0",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^4.3.8",
-    "jest-puppeteer": "^7.0.0",
-    "node-dir": "^0.1.17",
-    "node-fetch": "^2.6.1",
     "puppeteer": "^19.2.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",
-    "webpack-cli": "^5.0.0"
+    "rimraf": "^3.0.0"
   },
   "volta": {
     "node": "16.19.0"
-  }
+  },
+  "skuSkipPostInstall": true,
+  "skuSkipConfigure": true,
+  "skuSkipValidatePeerDeps": true
 }

packages/sku/README.md

@@ -0,0 +1,43 @@
+[![npm](https://img.shields.io/npm/v/sku.svg?style=flat-square)](https://www.npmjs.com/package/sku)
+
+<br />
+<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/), [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.
+
+This tool is heavily inspired by other work, most notably:
+
+- [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
+- [insin/nwb](https://github.com/insin/nwb)
+- [NYTimes/kyt](https://github.com/NYTimes/kyt)
+
+**WARNING: While this software is open source, its primary purpose is to improve consistency, cross-team collaboration and code quality at SEEK. As a result, it’s likely that we will introduce more breaking API changes to this project than you’ll find in its alternatives.**
+
+## Getting Started
+
+Create a new project and start a local development environment:
+
+```bash
+$ npx sku init my-app
+$ cd my-app
+$ npm start
+```
+
+Don't have [npx](https://www.npmjs.com/package/npx)?
+
+```bash
+$ npm install -g npx
+```
+
+## [Documentation](https://seek-oss.github.io/sku)
+
+## 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).
+
+## License
+
+MIT License