@wdio/browser-runner 8.29.0 → 8.29.2

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

@@ -1 +1 @@
-{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../../src/vite/frameworks/fixtures/stencil.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAKR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAgB/B,UAAU,kBAAkB;IACxB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CA0HnE;AAsGD;;;;;GAKG;AACH,0BAAkB,SAAS;IACvB;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;OAEG;IACH,iBAAiB,IAAS;IAM1B;;;;;OAKG;IACH,kBAAkB,IAAS;IAC3B;;;OAGG;IACH,oBAAoB,KAAS;IAC7B;;OAEG;IACH,OAAO,KAAS;IAEhB;;;;;OAKG;IACH,wBAAwB,KAA8C;CACzE;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,iBACrB,GAAG,kBACD,OAAO,KACxB,GAyBF,CAAA"}
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../../src/vite/frameworks/fixtures/stencil.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAKR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAgB/B,UAAU,kBAAkB;IACxB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CA+HnE;AAsGD;;;;;GAKG;AACH,0BAAkB,SAAS;IACvB;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;OAEG;IACH,iBAAiB,IAAS;IAM1B;;;;;OAKG;IACH,kBAAkB,IAAS;IAC3B;;;OAGG;IACH,oBAAoB,KAAS;IAC7B;;OAEG;IACH,OAAO,KAAS;IAEhB;;;;;OAKG;IACH,wBAAwB,KAA8C;CACzE;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,iBACrB,GAAG,kBACD,OAAO,KACxB,GAyBF,CAAA"}

package/build/vite/frameworks/fixtures/stencil.js

@@ -1,4 +1,8 @@
 import { h } from '@stencil/core';
+/**
+ * Emulate Node.js `nextTick` function in browser.
+ * This is used by Stencil.js internally.
+ */
 process.nextTick = (cb) => setTimeout(cb, 0);
 // @ts-expect-error
 window.React = {
@@ -47,7 +51,7 @@ export function render(opts) {
         win: win,
         doc: doc,
         body: stage,
-        styles: styles
+        styles
     };
     const lazyBundles = opts.components.map((Cstr) => {
         // eslint-disable-next-line eqeqeq
@@ -72,6 +76,10 @@ export function render(opts) {
             }
         }
         registerModule(bundleId, Cstr);
+        /**
+         * Register the component as a custom element
+         */
+        customElements.define(Cstr.COMPILER_META.tagName, Cstr);
         const lazyBundleRuntimeMeta = formatLazyBundleRuntimeMeta(bundleId, [Cstr.COMPILER_META]);
         return lazyBundleRuntimeMeta;
     });

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":"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"}
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAahD,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,oBAEhG;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,MAAM,yBAwBvD"}

package/build/vite/frameworks/stencil.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import url from 'node:url';
-import { findStaticImports } from 'mlly';
+import { findStaticImports, parseStaticImport } from 'mlly';
 import { hasFileByExtensions } from '../utils.js';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const STENCIL_IMPORT = '@stencil/core';
@@ -29,7 +29,7 @@ export async function optimizeForStencil(rootDir) {
     return stencilOptimizations;
 }
 async function stencilVitePlugin(rootDir) {
-    const { transpileSync } = await import('@stencil/core/compiler/stencil.js');
+    const { transpileSync, ts } = await import('@stencil/core/compiler/stencil.js');
     const stencilHelperPath = path.resolve(__dirname, 'fixtures', 'stencil.js');
     return {
         name: 'wdio-stencil',
@@ -40,39 +40,80 @@ async function stencilVitePlugin(rootDir) {
             }
         },
         transform: function (code, id) {
-            const usesStencil = findStaticImports(code).some((imp) => imp.specifier === STENCIL_IMPORT);
-            if (!usesStencil) {
+            const staticImports = findStaticImports(code);
+            const stencilImports = staticImports
+                .filter((imp) => imp.specifier === STENCIL_IMPORT)
+                .map((imp) => parseStaticImport(imp));
+            const isStencilComponent = stencilImports.some((imp) => 'Component' in (imp.namedImports || {}));
+            if (!isStencilComponent) {
                 return { code };
             }
+            const tsCompilerOptions = getCompilerOptions(ts, rootDir);
             const opts = {
-                componentExport: 'customelement',
+                componentExport: 'module',
                 componentMetadata: 'compilerstatic',
-                coreImportPath: '@stencil/core/internal/testing',
+                coreImportPath: '@stencil/core/internal/client',
                 currentDirectory: rootDir,
+                file: path.basename(id),
                 module: 'esm',
-                proxy: null,
                 sourceMap: 'inline',
                 style: 'static',
+                proxy: 'defineproperty',
                 styleImportData: 'queryparams',
-                target: 'es2018',
                 transformAliasedImportPaths: process.env.__STENCIL_TRANSPILE_PATHS__ === 'true',
+                target: tsCompilerOptions?.target || 'es2018',
+                paths: tsCompilerOptions?.paths,
+                baseUrl: tsCompilerOptions?.baseUrl,
             };
             const transpiledCode = transpileSync(code, opts);
+            /**
+             * StencilJS applies only a getter to the component without having a setter defined.
+             * This causes issue in the browser as there is a check that the setter is defined
+             * if the getter is defined. We can work around this by defining a setter.
+             */
+            let transformedCode = transpiledCode.code.replace('static get style()', 'static set style(_) {}\n    static get style()');
+            /**
+             * StencilJS does not import the `h` or `Fragment` function by default. We need to add it so the user
+             * doesn't need to.
+             */
+            const hasRenderFunctionImport = stencilImports.some((imp) => 'h' in (imp.namedImports || {}));
+            if (!hasRenderFunctionImport) {
+                transformedCode = `import { h } from '@stencil/core';\n${transformedCode}`;
+            }
+            const hasFragmentImport = stencilImports.some((imp) => 'Fragment' in (imp.namedImports || {}));
+            if (!hasFragmentImport) {
+                transformedCode = `import { Fragment } from '@stencil/core';\n${transformedCode}`;
+            }
             return {
                 ...transpiledCode,
-                code: transpiledCode.code
-                    // 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'),
+                code: transformedCode,
                 inputFilePath: id
             };
         }
     };
 }
+let _tsCompilerOptions = null;
+/**
+ * Read the TypeScript compiler configuration file from disk
+ * @param rootDir the location to search for the config file
+ * @returns the configuration, or `null` if the file cannot be found
+ */
+function getCompilerOptions(ts, rootDir) {
+    if (_tsCompilerOptions) {
+        return _tsCompilerOptions;
+    }
+    if (typeof rootDir !== 'string') {
+        return null;
+    }
+    const tsconfigFilePath = ts.findConfigFile(rootDir, ts.sys.fileExists);
+    if (!tsconfigFilePath) {
+        return null;
+    }
+    const tsconfigResults = ts.readConfigFile(tsconfigFilePath, ts.sys.readFile);
+    if (tsconfigResults.error) {
+        throw new Error(tsconfigResults.error);
+    }
+    const parseResult = ts.parseJsonConfigFileContent(tsconfigResults.config, ts.sys, rootDir, undefined, tsconfigFilePath);
+    _tsCompilerOptions = parseResult.options;
+    return _tsCompilerOptions;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/browser-runner",
-  "version": "8.29.0",
+  "version": "8.29.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",
@@ -26,7 +26,10 @@
   "types": "./build/index.d.ts",
   "exports": {
     ".": "./build/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./stencil": {
+      "types": "./stencil/index.d.ts"
+    }
   },
   "typeScriptVersion": "3.8.3",
   "dependencies": {
@@ -34,14 +37,14 @@
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/istanbul-lib-source-maps": "^4.0.1",
     "@vitest/spy": "^1.0.1",
-    "@wdio/globals": "8.29.0",
-    "@wdio/local-runner": "8.29.0",
+    "@wdio/globals": "8.29.1",
+    "@wdio/local-runner": "8.29.2",
     "@wdio/logger": "8.28.0",
-    "@wdio/mocha-framework": "8.29.0",
+    "@wdio/mocha-framework": "8.29.1",
     "@wdio/protocols": "^8.24.12",
-    "@wdio/runner": "8.29.0",
-    "@wdio/types": "8.29.0",
-    "@wdio/utils": "8.29.0",
+    "@wdio/runner": "8.29.2",
+    "@wdio/types": "8.29.1",
+    "@wdio/utils": "8.29.1",
     "deepmerge-ts": "^5.0.0",
     "expect": "^29.7.0",
     "expect-webdriverio": "^4.9.3",
@@ -59,8 +62,8 @@
     "vite": "~4.5.0",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-top-level-await": "^1.3.0",
-    "webdriver": "8.29.0",
-    "webdriverio": "8.29.0"
+    "webdriver": "8.29.1",
+    "webdriverio": "8.29.1"
   },
   "scripts": {
     "prepare": "rimraf node_modules/@wdio/config node_modules/@wdio/repl node_modules/@wdio/utils"
@@ -68,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cfd2ee1a1b4c4dc5b399ada6c28e8ccfa90c3bf1"
+  "gitHead": "96b12554db896984d4c86f3ff1d85da36e04c4f3"
 }