feat: build *.dev.js files from everything

.circleci/config.yml

@@ -151,7 +151,7 @@ jobs:
             - downstream
             - run:
                   name: Run tests
-                  command: yarn test:ci --config web-test-runner.config.ci-firefox.js --group unit --coverage
+                  command: yarn test:ci --config web-test-runner.config.ci-firefox.js --group unit
             - store_test_results:
                   path: /root/project/results/
             - run:
@@ -169,7 +169,7 @@ jobs:
             - run: yarn analyze
             - run:
                   name: Run tests
-                  command: yarn test:ci --config web-test-runner.config.ci-webkit.js --group unit --coverage
+                  command: yarn test:ci --config web-test-runner.config.ci-webkit.js --group unit
             - store_test_results:
                   path: /root/project/results/
             - run:

.storybook/manager.js

@@ -3,5 +3,7 @@ import yourTheme from './theme.js';
 
 addons.setConfig({
     theme: yourTheme,
-    showRoots: false,
+    sidebar: {
+        showRoots: false,
+    },
 });

.storybook/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../tsconfig.json",
     "compilerOptions": {
+        "emitDeclarationOnly": false,
         "noImplicitAny": false,
         "noUnusedLocals": false,
         "declaration": false

.vscode/settings.json

@@ -4,6 +4,7 @@
         "packages/*/src/spectrum-vars.json": true,
         "**/*.js.map": true,
         "**/*.js": { "when": "$(basename).ts" },
+        "**/*.dev.js": { "when": "$(basename).js" },
         "**/*.d.ts": { "when": "$(basename).ts" },
         "**/*.test-vrt.ts": true
     }

package.json

@@ -11,19 +11,17 @@
     "scripts": {
         "analyze": "lit-analyzer \"packages/*/src/**/!(*.css).ts\"",
         "analyze:quick": "lit-analyzer \"packages/*/src/!(*.css).ts\"",
-        "build": "node test/visual/create.js && yarn build:css && yarn build:ts",
+        "build": "run-p test:create build:css && run-p esbuild:ts build:ts",
         "build:clean": "yarn build:ts:clean && yarn build",
         "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo",
-        "build:compare": "tsc --build projects/vrt-compare/tsconfig.json",
         "build:component-inventory": "node ./tasks/build-component-inventory.js",
-        "build:confirm": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,icons-ui,icons-workflow,iconset,modal,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates}\" -- test -f src/index.js",
+        "build:confirm": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,icons-ui,icons-workflow,iconset,modal,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f src/index.js",
         "build:css": "node ./tasks/build-css.js && pretty-quick --fix --pattern \"packages/**/*.css\"",
-        "build:decorator": "tsc --build projects/story-decorator/tsconfig.json",
         "build:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json",
         "build:ts": "yarn tsc --build tsconfig-all.json",
         "build:ts:clean": "yarn build:ts --clean",
-        "build:watch": "yarn build:ts --watch",
-        "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,modal,iconset,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson",
+        "build:watch": "yarn esbuild:watch",
+        "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,modal,iconset,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson",
         "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement",
         "docs:build": "yarn workspace documentation build",
         "docs:ci": "yarn docs:analyze && run-p docs:production storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook",
@@ -32,6 +30,8 @@
         "docs:review": "alex packages/**/*.md",
         "docs:start": "yarn docs:analyze && run-p watch:css build:watch docs:watch",
         "docs:watch": "yarn workspace documentation watch",
+        "esbuild:ts": "node ./tasks/esbuild-packages.js",
+        "esbuild:watch": "node ./tasks/watch-packages.js",
         "find": "test -f custom-elements.json",
         "get-ready": "yarn build:clear-cache && run-p process-icons process-spectrum && yarn build:clean",
         "icons": "node ./scripts/process-icons.js && pretty-quick --pattern \"packages/**/*.svg.ts\" && eslint -f pretty --fix \"packages/**/*.svg.ts\"",
@@ -46,32 +46,33 @@
         "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"",
         "lint:versions": "node ./scripts/lint-versions.js",
         "new-package": "cd projects/templates && plop",
-        "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,modal,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates}\" -- test -f custom-elements.json",
+        "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,modal,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f custom-elements.json",
         "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"",
         "postinstall": "patch-package && yarn get-ready",
         "postprocess-spectrum": "yarn lint:css --fix && pretty-quick --fix --pattern \"packages/**/*.css\"",
-        "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates}\" -- rm custom-elements.json ||:",
+        "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,styles},documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:",
         "preeleventy": "yarn docs:analyze",
         "prelerna-publish": "yarn get-ready && yarn custom-element-json && yarn build:confirm",
         "prepare": "husky install",
         "prestorybook": "cem analyze --outdir .storybook/",
         "prestorybook:build": "cem analyze --outdir .storybook/",
         "pretest:bench": "test -f test/benchmark/cli.js && mv test/benchmark/cli.js test/benchmark/cli.cjs ||:",
-        "pretest:visual": "yarn build && yarn test:build",
+        "pretest:visual": "yarn build && yarn build",
         "process-icons": "run-p icons icons:ui icons:workflow",
         "process-spectrum": "yarn spectrum-vars && yarn spectrum-css && yarn spectrum-tokens",
         "spectrum-css": "node ./scripts/process-spectrum-css.js",
         "spectrum-tokens": "node ./scripts/spectrum-tokens.js",
         "spectrum-vars": "node ./scripts/spectrum-vars.js",
         "start": "yarn storybook",
-        "storybook": "yarn build:ts && yarn build:css && run-p storybook:start watch:css build:watch",
+        "storybook": "yarn build && yarn storybook:quick",
         "storybook:build": "build-storybook -o projects/documentation/dist/storybook",
-        "storybook:start": "web-dev-server --config wds-storybook.config.js",
+        "storybook:quick": "run-p watch:css build:watch storybook:run",
+        "storybook:run": "web-dev-server --config wds-storybook.config.js",
         "test": "yarn test:focus unit",
         "test:bench": "node test/benchmark/cli.cjs",
-        "test:build": "tsc --build test/tsconfig-plugins.json && tsc --build test/tsconfig-test.json",
         "test:changed": "node ./tasks/test-changes.js",
         "test:ci": "yarn test:start",
+        "test:create": "node test/visual/create.js",
         "test:focus": "yarn build && yarn test:ci --coverage --group",
         "test:start": "web-test-runner",
         "test:visual": "yarn test:visual:ci",
@@ -80,7 +81,7 @@
         "test:visual:clean:baseline": "rimraf test/visual/screenshots-baseline",
         "test:visual:clean:current": "rimraf test/visual/screenshots-current",
         "test:watch": "yarn test:watch:focus unit",
-        "test:watch:focus": "yarn test:build && run-p watch:css \"test:build -w\" \"test:start --watch --group {1}\" --",
+        "test:watch:focus": "yarn build && run-p watch:css build:watch \"test:start --watch --group {1}\" --",
         "update:spectrum-css": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup",
         "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum",
         "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link",
@@ -132,6 +133,7 @@
         "custom-elements-manifest": "^1.0.0",
         "debounce": "^1.2.1",
         "deepmerge": "^4.2.2",
+        "esbuild": "^0.14.25",
         "eslint": "^8.2.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-formatter-pretty": "^4.1.0",
@@ -148,7 +150,7 @@
         "husky": "^8.0.1",
         "latest-version": "^7.0.0",
         "lerna": "^4.0.0",
-        "lit": "^2.1.2",
+        "lit": "^2.2.0",
         "lit-analyzer": "^1.2.1",
         "mocha-junit-reporter": "^2.0.2",
         "netlify-cli": "^10.0.0",

packages/accordion/exports.json

@@ -0,0 +1,7 @@
+{
+    ".": "./src/index.js",
+    "./src/*.js": "./src/*.js",
+    "./package.json": "./package.json",
+    "./sp-accordion.js": "./sp-accordion.js",
+    "./sp-accordion-item.js": "./sp-accordion-item.js"
+}

packages/accordion/package.json

@@ -20,13 +20,33 @@
     "module": "./src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-accordion": "./sp-accordion.js",
-        "./sp-accordion.js": "./sp-accordion.js",
-        "./sp-accordion-item": "./sp-accordion-item.js",
-        "./sp-accordion-item.js": "./sp-accordion-item.js"
+        "./src/Accordion.js": {
+            "development": "./src/Accordion.dev.js",
+            "default": "./src/Accordion.js"
+        },
+        "./src/AccordionItem.js": {
+            "development": "./src/AccordionItem.dev.js",
+            "default": "./src/AccordionItem.js"
+        },
+        "./src/accordion-item.css.js": "./src/accordion-item.css.js",
+        "./src/accordion.css.js": "./src/accordion.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-accordion.js": {
+            "development": "./sp-accordion.dev.js",
+            "default": "./sp-accordion.js"
+        },
+        "./sp-accordion-item.js": {
+            "development": "./sp-accordion-item.dev.js",
+            "default": "./sp-accordion-item.js"
+        }
     },
     "scripts": {
         "test": "karma start --coverage"

packages/action-bar/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*",
+    "./sp-action-bar.js": "./sp-action-bar.js"
+}

packages/action-bar/package.json

@@ -20,11 +20,24 @@
     "module": "src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-action-bar": "./sp-action-bar.js",
-        "./sp-action-bar.js": "./sp-action-bar.js"
+        "./src/ActionBar.js": {
+            "development": "./src/ActionBar.dev.js",
+            "default": "./src/ActionBar.js"
+        },
+        "./src/action-bar.css.js": "./src/action-bar.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-action-bar.js": {
+            "development": "./sp-action-bar.dev.js",
+            "default": "./sp-action-bar.js"
+        }
     },
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"

packages/action-button/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*",
+    "./sp-action-button.js": "./sp-action-button.js"
+}

packages/action-button/package.json

@@ -20,11 +20,24 @@
     "module": "src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-action-button": "./sp-action-button.js",
-        "./sp-action-button.js": "./sp-action-button.js"
+        "./src/ActionButton.js": {
+            "development": "./src/ActionButton.dev.js",
+            "default": "./src/ActionButton.js"
+        },
+        "./src/action-button.css.js": "./src/action-button.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-action-button.js": {
+            "development": "./sp-action-button.dev.js",
+            "default": "./sp-action-button.js"
+        }
     },
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"

packages/action-group/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*",
+    "./sp-action-group.js": "./sp-action-group.js"
+}

packages/action-group/package.json

@@ -20,11 +20,24 @@
     "module": "./src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-action-group": "./sp-action-group.js",
-        "./sp-action-group.js": "./sp-action-group.js"
+        "./src/ActionGroup.js": {
+            "development": "./src/ActionGroup.dev.js",
+            "default": "./src/ActionGroup.js"
+        },
+        "./src/action-group.css.js": "./src/action-group.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-action-group.js": {
+            "development": "./sp-action-group.dev.js",
+            "default": "./sp-action-group.js"
+        }
     },
     "scripts": {
         "test": "karma start --coverage"

packages/action-menu/exports.json

@@ -0,0 +1,5 @@
+{
+    "./src/*": "./src/*",
+    "./sp-action-menu.js": "./sp-action-menu.js",
+    "./sync/sp-action-menu.js": "./sync/sp-action-menu.js"
+}

packages/action-menu/package.json

@@ -20,13 +20,28 @@
     "module": "./src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-action-menu": "./sp-action-menu.js",
-        "./sp-action-menu.js": "./sp-action-menu.js",
-        "./sync/sp-action-menu": "./sync/sp-action-menu.js",
-        "./sync/sp-action-menu.js": "./sync/sp-action-menu.js"
+        "./src/ActionMenu.js": {
+            "development": "./src/ActionMenu.dev.js",
+            "default": "./src/ActionMenu.js"
+        },
+        "./src/action-menu.css.js": "./src/action-menu.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-action-menu.js": {
+            "development": "./sp-action-menu.dev.js",
+            "default": "./sp-action-menu.js"
+        },
+        "./sync/sp-action-menu.js": {
+            "development": "./sync/sp-action-menu.dev.js",
+            "default": "./sync/sp-action-menu.js"
+        }
     },
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"

packages/asset/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*",
+    "./sp-asset.js": "./sp-asset.js"
+}

packages/asset/package.json

@@ -20,11 +20,24 @@
     "module": "./src/index.js",
     "type": "module",
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-asset": "./sp-asset.js",
-        "./sp-asset.js": "./sp-asset.js"
+        "./src/Asset.js": {
+            "development": "./src/Asset.dev.js",
+            "default": "./src/Asset.js"
+        },
+        "./src/asset.css.js": "./src/asset.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-asset.js": {
+            "development": "./sp-asset.dev.js",
+            "default": "./sp-asset.js"
+        }
     },
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"

packages/avatar/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*",
+    "./sp-avatar.js": "./sp-avatar.js"
+}