chore(barebones): improve infrastructure and testing setup (#5811)

Author: rubencarvalho

.circleci/config.yml

@@ -22,7 +22,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 71be19cab16d3ff600820e801341f14629ad06d9
+        default: 3fab915a1480ba61e7654c12937d831685826902
     wireit_cache_name:
         type: string
         default: wireit

first-gen/projects/documentation/package.json

@@ -258,7 +258,7 @@
             ]
         },
         "serve": {
-            "command": "vite --config vite.config.js",
+            "command": "web-dev-server --config web-dev-server.config.js",
             "dependencies": [
                 {
                     "script": "build:assets"

first-gen/projects/documentation/vite.config.js

@@ -17,6 +17,21 @@ import rollupJson from '@rollup/plugin-json';
 const alias = fromRollup(rollupAlias);
 const json = fromRollup(rollupJson);
 
+// Custom plugin to replace process.env.NODE_ENV in all files
+const replaceProcessEnv = () => ({
+    name: 'replace-process-env',
+    transform(context) {
+        if (context.response.is('js')) {
+            return {
+                body: context.body.replace(
+                    /process\.env\.NODE_ENV/g,
+                    '"development"'
+                ),
+            };
+        }
+    },
+});
+
 export default {
     open: false,
     watch: true,
@@ -31,6 +46,7 @@ export default {
     rootDir: '_site',
     plugins: [
         json(),
+        replaceProcessEnv(),
         alias({
             entries: [
                 {

first-gen/projects/documentation/web-dev-server.config.js

@@ -119,6 +119,7 @@
         "css"
     ],
     "dependencies": {
+        "@swc/core": "workspace:*",
         "lit": "^2.5.0 || ^3.1.3"
     },
     "types": "./src/index.d.ts",

first-gen/tools/base/package.json

@@ -9,76 +9,4 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { PropertyValues, ReactiveElement } from 'lit';
-import { property } from 'lit/decorators.js';
-
-type Constructor<T = Record<string, unknown>> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
-};
-
-export type ElementSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-export const ElementSizes: Record<string, ElementSize> = {
-    xxs: 'xxs',
-    xs: 'xs',
-    s: 's',
-    m: 'm',
-    l: 'l',
-    xl: 'xl',
-    xxl: 'xxl',
-};
-export type DefaultElementSize = Exclude<ElementSize, 'xxs' | 'xs' | 'xxl'>;
-
-export interface SizedElementInterface {
-    size: ElementSize;
-}
-
-export function SizedMixin<T extends Constructor<ReactiveElement>>(
-    constructor: T,
-    {
-        validSizes = ['s', 'm', 'l', 'xl'],
-        noDefaultSize,
-        defaultSize = 'm',
-    }: {
-        validSizes?: ElementSize[];
-        noDefaultSize?: boolean;
-        defaultSize?: ElementSize;
-    } = {}
-): T & Constructor<SizedElementInterface> {
-    class SizedElement extends constructor {
-        @property({ type: String })
-        public get size(): ElementSize {
-            return this._size || defaultSize;
-        }
-
-        public set size(value: ElementSize) {
-            const fallbackSize = noDefaultSize ? null : defaultSize;
-            const size = (
-                value ? value.toLocaleLowerCase() : value
-            ) as ElementSize;
-            const validSize = (
-                validSizes.includes(size) ? size : fallbackSize
-            ) as ElementSize;
-            if (validSize) {
-                this.setAttribute('size', validSize);
-            }
-            if (this._size === validSize) {
-                return;
-            }
-            const oldSize = this._size;
-            this._size = validSize;
-            this.requestUpdate('size', oldSize);
-        }
-
-        private _size: ElementSize | null = defaultSize;
-
-        protected override update(changes: PropertyValues): void {
-            if (!this.hasAttribute('size') && !noDefaultSize) {
-                this.setAttribute('size', this.size);
-            }
-            super.update(changes);
-        }
-    }
-    return SizedElement;
-}
+export * from '@swc/core/shared/base/sizedMixin.js';

first-gen/tools/base/src/sizedMixin.ts

@@ -0,0 +1,22 @@
+diff --git a/node_modules/@web/test-runner-coverage-v8/dist/index.js b/node_modules/@web/test-runner-coverage-v8/dist/index.js
+index 997bcfc..b19cf60 100644
+--- a/node_modules/@web/test-runner-coverage-v8/dist/index.js
++++ b/node_modules/@web/test-runner-coverage-v8/dist/index.js
+@@ -63,7 +63,16 @@ async function v8ToIstanbul(config, testFiles, coverage, userAgent) {
+             !path.startsWith('/__web-test-runner') &&
+             !path.startsWith('/__web-dev-server')) {
+             try {
+-                const filePath = (0, path_1.join)(config.rootDir, (0, utils_1.toFilePath)(path));
++                // Handle __wds-outside-root__ paths which reference files outside the rootDir
++                let filePath;
++                const outsideRootMatch = path.match(/^\/__wds-outside-root__\/\d+\/(.+)$/);
++                if (outsideRootMatch) {
++                    // For outside-root files, resolve relative to workspace root (parent of rootDir)
++                    const workspaceRoot = (0, path_1.dirname)(config.rootDir);
++                    filePath = (0, path_1.join)(workspaceRoot, (0, utils_1.toFilePath)(outsideRootMatch[1]));
++                } else {
++                    filePath = (0, path_1.join)(config.rootDir, (0, utils_1.toFilePath)(path));
++                }
+                 if (!testFiles.includes(filePath) && included(filePath) && !excluded(filePath)) {
+                     const browserUrl = `${url.pathname}${url.search}${url.hash}`;
+                     const cachedSource = cachedSources.get(browserUrl);

patches/@web+test-runner-coverage-v8+0.8.0.patch

@@ -29,9 +29,61 @@
             "types": "./dist/shared/base/index.d.ts",
             "import": "./dist/shared/base/index.js"
         },
-        "./shared/*": {
-            "types": "./dist/shared/*.d.ts",
-            "import": "./dist/shared/*.js"
+        "./shared/base/Base": {
+            "types": "./dist/shared/base/Base.d.ts",
+            "import": "./dist/shared/base/Base.js"
+        },
+        "./shared/base/Base.js": {
+            "types": "./dist/shared/base/Base.d.ts",
+            "import": "./dist/shared/base/Base.js"
+        },
+        "./shared/base/sizedMixin": {
+            "types": "./dist/shared/base/sizedMixin.d.ts",
+            "import": "./dist/shared/base/sizedMixin.js"
+        },
+        "./shared/base/sizedMixin.js": {
+            "types": "./dist/shared/base/sizedMixin.d.ts",
+            "import": "./dist/shared/base/sizedMixin.js"
+        },
+        "./shared/base/define-element": {
+            "types": "./dist/shared/base/define-element.d.ts",
+            "import": "./dist/shared/base/define-element.js"
+        },
+        "./shared/base/define-element.js": {
+            "types": "./dist/shared/base/define-element.d.ts",
+            "import": "./dist/shared/base/define-element.js"
+        },
+        "./shared/base/version": {
+            "types": "./dist/shared/base/version.d.ts",
+            "import": "./dist/shared/base/version.js"
+        },
+        "./shared/base/version.js": {
+            "types": "./dist/shared/base/version.d.ts",
+            "import": "./dist/shared/base/version.js"
+        },
+        "./shared/get-label-from-slot": {
+            "types": "./dist/shared/get-label-from-slot.d.ts",
+            "import": "./dist/shared/get-label-from-slot.js"
+        },
+        "./shared/get-label-from-slot.js": {
+            "types": "./dist/shared/get-label-from-slot.d.ts",
+            "import": "./dist/shared/get-label-from-slot.js"
+        },
+        "./shared/observe-slot-presence": {
+            "types": "./dist/shared/observe-slot-presence.d.ts",
+            "import": "./dist/shared/observe-slot-presence.js"
+        },
+        "./shared/observe-slot-presence.js": {
+            "types": "./dist/shared/observe-slot-presence.d.ts",
+            "import": "./dist/shared/observe-slot-presence.js"
+        },
+        "./shared/observe-slot-text": {
+            "types": "./dist/shared/observe-slot-text.d.ts",
+            "import": "./dist/shared/observe-slot-text.js"
+        },
+        "./shared/observe-slot-text.js": {
+            "types": "./dist/shared/observe-slot-text.d.ts",
+            "import": "./dist/shared/observe-slot-text.js"
         }
     },
     "files": [

second-gen/packages/core/package.json

@@ -1,3 +1,8 @@
+<link rel="preconnect" href="https://use.typekit.net" />
+<link rel="dns-prefetch" href="https://use.typekit.net" />
+<!-- For Adobe Clean font support -->
+<link rel="stylesheet" href="https://use.typekit.net/evk7lzt.css" />
+
 <style>
     /* Fix for Storybook's zoom wrapper interfering with forced-colors mode */
     @media (forced-colors: active) {

second-gen/packages/swc/.storybook/preview-head.html

@@ -5426,6 +5426,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/base@workspace:first-gen/tools/base"
   dependencies:
+    "@swc/core": "workspace:*"
     lit: "npm:^2.5.0 || ^3.1.3"
   languageName: unknown
   linkType: soft