test(wtr): windows compat, kinda (#5578)

* chore(ci): use GitHub Actions for cross-platform tests, not SuaceLabs

Don't delete SauceLabs tho

(yet)

* chore: not a template string

* test(integration): disable flaky tests (temporarily)

* chore(integration-tests): remove leading `test-` from filenames

It's implicit in the files being in the test directory and long filenames cause problems on windows

* chore(integration-tests): `delegate-focus-` -> `delegates-focus-`

* chore(integration-tests): rename `tab-index-` to `tabindex-`

* chore(integration-tests): remove `-elements`

* chore(integration-tests): rename `previous-` to `prev-`

* test(integration-tests): await async method

* chore(integration-tests): fully remove `test-` prefix

* test(integration-tests): derive test names instead of hard-coding

easier to maintain and uncovered a few broken tests!

* chore(integration-tests): rename way-too-long test name

* chore(ci): attempt to run bash on windows

and everywhere

* chore(ci): declare env vars in more cross-platform manner

* chore(ci): run yarn install in bash

* chore(ci): give up and use cross-env

* chore(ci): try without `exec`

* test(wtr): change variable name

is SAUCE defined in CI?

* chore(ci): remove saucelabs

* test(ci): run unit tests on windows

* chore(ci): why different?

* chore(ci): avoid unnecessasry rebuild

* chore(ci): windows compat

* Revert "chore(ci): windows compat"

This reverts commit e4279e3.

* chore(ci): windows compat

* chore(ci): update actions versions

* chore(ci): install chromedriver as part of setup-chrome

* chore(ci): more sloppy windows compat

* chore(ci): more windowsy

* chore: add package manager

* chore(ci): more windowsy

* chore(ci): more windowsy

* chore(ci): more windowsy

* chore(ci): crlf smh

* chore(ci): revert setup-chrome@v2

* chore: include call stack

* chore: debug

* chore: actually, nvm

don't need to change this file for this task

* test(wtr): jsdoc for the doc gods

* chore(ci): update input descriptions

* chore: revert unrelated changes

* chore: more windowsy

* chore: revert unrelated changes

* test(wtr): disable tests broken on windows

* revert: just log text

* chore(ci): remove unnecessary env var

* chore(ci): add names for clarity

* chore: move `x` to `c`

maybe makes windows work

* chore: update usage of `x` to `c`

maybe makes windows work

* chore: update usage of `X-` to `C-`

maybe makes windows work

* test(wtr): fix scope tokens

* test(wtr): order can be different

* test(wtr): try to normalize filenames

* chore: update yarn.lock

* test(wtr): enable browser logs

* test(wtr): filter out [WDIO] logs

* test(wtr): try to fix windows

* test(wtr): no browser logs

they're mostly noise

* test(wtr): test objects in matrix

* Revert "test(wtr): test objects in matrix"

This reverts commit 4f1181c.

* chore(ci): split jobs to make faster, maybe

* chore(ci): fail-fast: false

* chore(ci): merge jobs

* chore(ci): merge more jobs

* chore(ci): reconfigure so it hopefully works

* chore(ci): consolidate hydration tests

* chore(ci): exclude engine-server flag + SSR v2 runtime combo

* chore(ci): add default env hydration tests

* chore(ci): use correct SSR package for hydration tests

* chore(ci): give up on windows

* chore(ci): give up on windows

* Revert "chore: move `x` to `c`"

This reverts commit 6f32328.

* test(wtr): revert usage of `c` to `x`

* Apply suggestion from @wjhsf

* test(wtr): revert `c-` to `x-`

* test(wtr): revert scope tokens

* test(wtr): re-enable tests that only fail on windows

* chore(ci): revert CI changes

* chore: restore saucelabs dep

Author: wjhsf

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.prettierrc

@@ -2,5 +2,6 @@
     "printWidth": 100,
     "singleQuote": true,
     "tabWidth": 4,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "endOfLine": "lf"
 }

package.json

@@ -108,5 +108,6 @@
         "http-cache-semantics": "4.2.0",
         "@types/estree": "^1.0.8"
     },
-    "dependencies": {}
+    "dependencies": {},
+    "packageManager": "yarn@1.22.22"
 }

packages/@lwc/integration-not-karma/configs/plugins/serve-hydration.js

@@ -12,7 +12,7 @@ const LWC_SSR = readFileSync(
     'utf8'
 );
 
-const ROOT_DIR = path.join(import.meta.dirname, '../..');
+const ROOT_DIR = path.join(import.meta.dirname, '..', '..');
 const COMPONENT_NAME = 'x-main';
 const COMPONENT_ENTRYPOINT = 'x/main/main.js';
 
@@ -25,7 +25,9 @@ async function compileModule(input, targetSSR, format) {
                 targetSSR,
                 modules: [{ dir: modulesDir }],
                 experimentalDynamicComponent: {
-                    loader: fileURLToPath(new URL('../../helpers/loader.js', import.meta.url)),
+                    loader: fileURLToPath(
+                        new URL('../../helpers/loader.js', import.meta.url)
+                    ).replaceAll(path.sep, path.posix.sep),
                     strict: true,
                 },
                 enableSyntheticElementInternals: true,
@@ -108,8 +110,8 @@ async function getSsrMarkup(componentEntrypoint, configPath) {
  * This function wraps those configs in the test code to be executed.
  */
 async function wrapHydrationTest(configPath) {
-    const suiteDir = path.dirname(configPath);
-    const componentEntrypoint = path.join(suiteDir, COMPONENT_ENTRYPOINT);
+    const suiteDir = path.posix.dirname(configPath);
+    const componentEntrypoint = path.posix.join(suiteDir, COMPONENT_ENTRYPOINT);
     const ssrOutput = await getSsrMarkup(componentEntrypoint, configPath);
 
     return `

packages/@lwc/integration-not-karma/configs/plugins/test-hydration.js

@@ -1,6 +1,7 @@
 import { spyOn } from '@vitest/spy';
 import * as LWC from 'lwc';
 import { setHooks } from '../../helpers/hooks';
+import { resetDOM, resetAlreadyLoggedMessages } from '../../helpers/reset';
 
 /*
  * Because these tests are written in JS, the type defs below are not enforced. They are provided
@@ -132,6 +133,9 @@ export function runTest(configPath, componentPath, ssrRendered) {
 
     afterEach(() => {
         consoleSpy.reset();
+        // in case of retries
+        resetDOM();
+        resetAlreadyLoggedMessages();
     });
 
     afterAll(() => {

packages/@lwc/rollup-plugin/src/index.ts

@@ -79,9 +79,9 @@ export interface RollupLwcOptions {
 
 const PLUGIN_NAME = 'rollup-plugin-lwc-compiler';
 
-const IMPLICIT_DEFAULT_HTML_PATH = '@lwc/resources/empty_html.js';
+const IMPLICIT_DEFAULT_HTML_PATH = ['@lwc', 'resources', 'empty_html.js'].join(path.sep);
 const EMPTY_IMPLICIT_HTML_CONTENT = 'export default void 0';
-const IMPLICIT_DEFAULT_CSS_PATH = '@lwc/resources/empty_css.css';
+const IMPLICIT_DEFAULT_CSS_PATH = ['@lwc', 'resources', 'empty_css.css'].join(path.sep);
 const EMPTY_IMPLICIT_CSS_CONTENT = '';
 const SCRIPT_FILE_EXTENSIONS = ['.js', '.mjs', '.jsx', '.ts', '.mts', '.tsx'];
 
@@ -352,18 +352,19 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin {
             // Specifier will only exist for modules with alias paths.
             // Otherwise, use the file directory structure to resolve namespace and name.
             const [namespace, name] =
-                // Note we do not need to use path.sep here because this filename contains
-                // a '/' regardless of Windows vs Unix, since it comes from the Rollup `id`
-                specifier?.split('/') ?? path.dirname(filename).split('/').slice(-2);
+                specifier?.split('/') ?? path.dirname(filename).split(path.sep).slice(-2);
 
             /* v8 ignore next */
             if (!namespace || !name) {
                 // TODO [#4824]: Make this an error rather than a warning
                 this.warn(
-                    'The component namespace and name could not be determined from the specifier ' +
-                        JSON.stringify(specifier) +
-                        ' or filename ' +
-                        JSON.stringify(filename)
+                    `The component namespace and name (${JSON.stringify(
+                        namespace
+                    )} and ${JSON.stringify(
+                        name
+                    )}) could not be determined from the specifier ${JSON.stringify(
+                        specifier
+                    )} or filename ${JSON.stringify(path.dirname(filename))}`
                 );
             }
 

playground/package.json

@@ -6,12 +6,13 @@
     "description": "Playground project to experiment with LWC.",
     "scripts": {
         "dev": "rollup -c --watch",
-        "build": "NODE_ENV=production rollup -c"
+        "build": "cross-env NODE_ENV=production rollup -c"
     },
     "devDependencies": {
         "@lwc/rollup-plugin": "8.24.0",
         "@rollup/plugin-replace": "^6.0.3",
         "@rollup/plugin-typescript": "^12.3.0",
+        "cross-env": "^10.1.0",
         "lwc": "8.24.0",
         "rollup": "^4.52.5",
         "rollup-plugin-livereload": "^2.0.5",

scripts/tasks/check-and-rewrite-package-json.js

@@ -40,7 +40,7 @@ const expectedPkgJsons = [];
 
 for (const dir of globSync('./packages/@lwc/*')) {
     const filename = path.join('./', dir, 'package.json');
-    const actual = fs.readFileSync(filename, 'utf-8');
+    const actual = fs.readFileSync(filename, 'utf-8').replace(/\r\n/g, '\n'); // Windows compat
     const pkg = JSON.parse(actual);
     // Skip private packages
     if (pkg.private) {

scripts/tasks/generate-license-files.mjs

@@ -98,7 +98,8 @@ const formattedLicense = await prettier.format(newLicense, {
 
 // Check against current top-level license for changes
 const shouldWarnChanges =
-    process.argv.includes('--test') && formattedLicense !== (await readFile('LICENSE.md', 'utf-8'));
+    process.argv.includes('--test') &&
+    formattedLicense !== (await readFile('LICENSE.md', 'utf-8')).replace(/\r\n/g, '\n');
 
 // Top level license
 await writeFile('LICENSE.md', formattedLicense, 'utf-8');

scripts/tasks/verify-treeshakable.mjs

@@ -6,19 +6,16 @@
  */
 
 // Inspired from: https://github.com/Rich-Harris/agadoo
-import path from 'node:path';
 import { rollup } from 'rollup';
 import pluginVirtual from '../rollup/plugin-virtual.mjs';
 
 async function check(input) {
-    const resolved = path.resolve(input);
-
     // Tell rollup to bundle a fake file whose content is just `import "path from CLI arg"`
     // If the imported file is tree-shakeable (pure imports/exports, no side effects),
     // then the bundled code will be an empty file
     const bundle = await rollup({
         input: '__virtual__',
-        plugins: [pluginVirtual(`import "${resolved}";`)],
+        plugins: [pluginVirtual(`import "${input}";`)],
         onwarn: (warning, handle) => {
             if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
         },
@@ -28,26 +25,20 @@ async function check(input) {
         format: 'esm',
     });
 
-    const [chunk] = res.output;
+    const [{ code }] = res.output;
 
     return {
-        code: chunk.code,
-        isTreeShakable: chunk.code.trim().length === 0,
+        code,
+        isTreeShakable: code.trim().length === 0,
     };
 }
 
 const input = process.argv[2];
-check(input)
-    .then((res) => {
-        if (res.isTreeShakable === false) {
-            console.error(
-                `${res.code}\n❗️ Failed to fully treeshake ${input}; see remaining code above.`
-            );
-        }
+const result = await check(input);
+if (!result.isTreeShakable) {
+    console.error(
+        `${result.code}\n❗️ Failed to fully treeshake ${input}; see remaining code above.`
+    );
+}
 
-        process.exit(res.isTreeShakable ? 0 : 1);
-    })
-    .catch((err) => {
-        console.error(err);
-        process.exit(1);
-    });
+process.exitCode = result.isTreeShakable ? 0 : 1;