@wdio/browser-runner 8.15.0 → 8.15.2

package/build/vite/frameworks/index.js

@@ -12,7 +12,7 @@ export default async function updateViteConfig(options, config) {
     if (isTailwind) {
         Object.assign(optimizations, await optimizeForTailwindCSS(rootDir));
     }
-    if (isUsingStencilJS(rootDir, options)) {
+    if (await isUsingStencilJS(rootDir, options)) {
         Object.assign(optimizations, await optimizeForStencil(rootDir));
     }
     return optimizations;

package/build/vite/frameworks/stencil.d.ts

@@ -1,4 +1,4 @@
 import type { InlineConfig } from 'vite';
-export declare function isUsingStencilJS(rootDir: string, options: WebdriverIO.BrowserRunnerOptions): boolean;
+export declare function isUsingStencilJS(rootDir: string, options: WebdriverIO.BrowserRunnerOptions): Promise<boolean>;
 export declare function optimizeForStencil(rootDir: string): Promise<InlineConfig>;
 //# sourceMappingURL=stencil.d.ts.map

package/build/vite/frameworks/stencil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAMhD,wBAAgB,gBAAgB,CAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,WAE3F;AAED,wBAAsB,kBAAkB,CAAE,OAAO,EAAE,MAAM,yBAiBxD"}
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAOhD,wBAAsB,gBAAgB,CAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,oBAEjG;AAED,wBAAsB,kBAAkB,CAAE,OAAO,EAAE,MAAM,yBAwBxD"}

package/build/vite/frameworks/stencil.js

@@ -1,24 +1,31 @@
 import path from 'node:path';
 import url from 'node:url';
+import { findStaticImports } from 'mlly';
 import { hasFileByExtensions } from '../utils.js';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-export function isUsingStencilJS(rootDir, options) {
-    return Boolean(options.preset === 'stencil' || hasFileByExtensions(path.join(rootDir, 'stencil.config')));
+const STENCIL_IMPORT = '@stencil/core';
+export async function isUsingStencilJS(rootDir, options) {
+    return Boolean(options.preset === 'stencil' || await hasFileByExtensions(path.join(rootDir, 'stencil.config')));
 }
 export async function optimizeForStencil(rootDir) {
     const stencilConfig = await import(path.join(rootDir, 'stencil.config.ts')).catch(() => ({ config: {} }));
     const stencilPlugins = stencilConfig.config.plugins;
     const stencilOptimizations = {
-        plugins: [await stencilVitePlugin(rootDir)]
+        plugins: [await stencilVitePlugin(rootDir)],
+        optimizeDeps: { include: [] }
     };
     if (stencilPlugins) {
         const esbuildPlugin = stencilPlugins.find((plugin) => plugin.name === 'esbuild-plugin');
         if (esbuildPlugin) {
-            stencilOptimizations.optimizeDeps = {
-                include: esbuildPlugin.options.include
-            };
+            stencilOptimizations.optimizeDeps?.include?.push(...esbuildPlugin.options.include);
         }
     }
+    /**
+     * testing helper from the stencil core package is unfortunately exported as CJS
+     * module, in order to be able to use it in the browser we have to optimize it
+     * it to compile it to ESM
+     */
+    stencilOptimizations.optimizeDeps?.include?.push('@wdio/browser-runner/stencil > @stencil/core/internal/testing/index.js');
     return stencilOptimizations;
 }
 async function stencilVitePlugin(rootDir) {
@@ -33,7 +40,8 @@ async function stencilVitePlugin(rootDir) {
             }
         },
         transform: function (code, id) {
-            if (!id.includes('StencilComponent.tsx')) {
+            const usesStencil = findStaticImports(code).some((imp) => imp.specifier === STENCIL_IMPORT);
+            if (!usesStencil) {
                 return { code };
             }
             const opts = {
@@ -44,7 +52,7 @@ async function stencilVitePlugin(rootDir) {
                 module: 'esm',
                 proxy: null,
                 sourceMap: 'inline',
-                style: null,
+                style: 'static',
                 styleImportData: 'queryparams',
                 target: 'es2018',
                 transformAliasedImportPaths: process.env.__STENCIL_TRANSPILE_PATHS__ === 'true',
@@ -53,8 +61,13 @@ async function stencilVitePlugin(rootDir) {
             return {
                 ...transpiledCode,
                 code: transpiledCode.code
-                    // HTMLElement gets imported from StencilJS, but we need to use the one from the browser
-                    .replace('extends HTMLElement {', 'extends window.HTMLElement {')
+                    // HTMLElement gets imported from StencilJS but is undefined for some reasons
+                    .replace('extends HTMLElement {', 
+                // replace it with the original one
+                'extends window.HTMLElement {' +
+                    // and add a style setter so it won't throw when setting
+                    // style properties
+                    '\n\tstatic set style (ignore) {}\n')
                     // make sure that components are exported properly
                     // StencilJS removes the export when componentExport is set to 'customelement'
                     .replace('\nconst', '\nexport const'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/browser-runner",
-  "version": "8.15.0",
+  "version": "8.15.2",
   "description": "A WebdriverIO runner to run unit tests tests in the browser.",
   "author": "Christian Bromann <mail@bromann.dev>",
   "homepage": "https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-browser-runner",
@@ -52,6 +52,7 @@
     "istanbul-lib-report": "^3.0.0",
     "istanbul-lib-source-maps": "^4.0.1",
     "istanbul-reports": "^3.1.5",
+    "mlly": "^1.4.0",
     "modern-node-polyfills": "^1.0.0",
     "recast": "^0.23.2",
     "serialize-error": "^11.0.0",
@@ -73,5 +74,5 @@
     "@types/ws": "^8.5.4",
     "@wdio/runner": "8.15.0"
   },
-  "gitHead": "78e199c5ffd74bdf3a5576952c3834c29afa989f"
+  "gitHead": "d123ee7129d2e5fc2427a8888408d7d967e015fe"
 }