chore: add bundlesize checks

.circleci/config.yml

@@ -32,6 +32,9 @@ jobs:
       # run test locally first
       - run: npm run test
 
+      # make sure size is ok
+      - run: npm run bundlesize
+
       # run compatibility tests for multiple browser via browserstack
       # disabled until we can safely test multiple browsers
       # - run: npm run test:bs

.eslintignore

@@ -1 +1,2 @@
 coverage/
+bundlesize/

.gitignore

@@ -18,6 +18,7 @@ yarn-error.log
 ## build artifacts
 /lib/
 /build/
+/bundlesize/dist/
 
 ## temp folders
 /.tmp/

.prettierignore

@@ -1,2 +1,3 @@
 coverage/
 CHANGELOG.md
+bundlesize/

bundlesize/all.js

@@ -0,0 +1,30 @@
+import '../packages/ajax/index.js';
+import '../packages/button/index.js';
+import '../packages/calendar/index.js';
+import '../packages/checkbox/index.js';
+import '../packages/checkbox-group/index.js';
+import '../packages/choice-input/index.js';
+import '../packages/core/index.js';
+import '../packages/dialog/index.js';
+import '../packages/field/index.js';
+import '../packages/fieldset/index.js';
+import '../packages/form/index.js';
+import '../packages/icon/index.js';
+import '../packages/input/index.js';
+import '../packages/input-amount/index.js';
+import '../packages/input-date/index.js';
+import '../packages/input-email/index.js';
+import '../packages/input-iban/index.js';
+import '../packages/localize/index.js';
+import '../packages/option/index.js';
+import '../packages/overlays/index.js';
+import '../packages/radio/index.js';
+import '../packages/radio-group/index.js';
+import '../packages/select/index.js';
+import '../packages/select-rich/index.js';
+import '../packages/steps/index.js';
+import '../packages/switch/index.js';
+import '../packages/tabs/index.js';
+import '../packages/textarea/index.js';
+import '../packages/tooltip/index.js';
+import '../packages/validate/index.js';

bundlesize/core.js

@@ -0,0 +1 @@
+import '../packages/core/index.js';

bundlesize/rollup.config.js

@@ -0,0 +1,17 @@
+import createDefaultConfig from '@open-wc/building-rollup/modern-config';
+
+export default ['core', 'all'].map(name => {
+  const config = createDefaultConfig({
+    input: `bundlesize/${name}.js`,
+  });
+
+  return {
+    ...config,
+    treeshake: false,
+    output: {
+      ...config.output,
+      dir: `bundlesize/dist/${name}`,
+      sourcemap: false,
+    },
+  }
+});

package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.0",
+    "@open-wc/building-rollup": "^0.14.8",
     "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/eslint-config": "^1.0.0",
     "@open-wc/prettier-config": "^0.1.0",
@@ -19,6 +20,7 @@
     "@webcomponents/webcomponentsjs": "^2.2.5",
     "babel-eslint": "^8.2.6",
     "babel-polyfill": "^6.26.0",
+    "bundlesize": "^0.17.1",
     "eclint": "^2.8.1",
     "eslint": "^6.1.0",
     "husky": "^1.0.0",
@@ -26,6 +28,8 @@
     "lint-staged": "^8.0.0",
     "markdownlint-cli": "^0.17.0",
     "npm-run-all": "^4.1.5",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.27.8",
     "sinon": "^7.2.2",
     "webpack-merge": "^4.1.5",
     "whatwg-fetch": "^3.0.0"
@@ -50,7 +54,8 @@
     "lint:versions": "node ./scripts/lint-versions.js",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.html . --fix",
-    "format:prettier": "prettier \"**/*.{js,md}\" --write"
+    "format:prettier": "prettier \"**/*.{js,md}\" --write",
+    "bundlesize": "rollup -c bundlesize/rollup.config.js && bundlesize"
   },
   "lint-staged": {
     "*": [
@@ -73,5 +78,15 @@
     "yarn.lock": [
       "node ./scripts/yarn-lock-scan.js"
     ]
-  }
+  },
+  "bundlesize": [
+    {
+      "path": "./bundlesize/dist/core/core-*.js",
+      "maxSize": "10 kB"
+    },
+    {
+      "path": "./bundlesize/dist/all/all-*.js",
+      "maxSize": "30 kB"
+    }
+  ]
 }