Merge branch 'talshani-windows-relative-resolution'

.changeset/witty-bananas-end.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": minor
+---
+
+Add support for native Windows.

.gitattributes

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

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     strategy:
       matrix:
-        os: [ubuntu-latest]
+        os: [ubuntu-latest, windows-latest]
     steps:
       - name: Check out code
         uses: actions/checkout@v2

e2e/addons/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle preview -p 61100",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61100 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61100 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61100 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61100 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "axe-playwright": "^1.1.11",
     "playwright-core": "^1.22.2",
     "react": "^18.2.0",

e2e/commonjs/package.json

@@ -4,17 +4,17 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "../../packages/ladle/cjs/lib/cli/cli.js serve -p 61101",
-    "serve-prod": "../../packages/ladle/cjs/lib/cli/cli.js preview -p 61101",
-    "build": "(cd ../../packages/ladle; ./build-cjs.sh) && ../../packages/ladle/cjs/lib/cli/cli.js build",
+    "serve": "node ../../packages/ladle/cjs/lib/cli/cli.js serve -p 61101",
+    "serve-prod": "node ../../packages/ladle/cjs/lib/cli/cli.js preview -p 61101",
+    "build": "pnpm --filter @ladle/react build && node ../../packages/ladle/cjs/lib/cli/cli.js build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61101 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61101 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61101 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61101 'npx playwright test'",
     "test": "npm run test-prod && npm run test-dev"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.14.0"

e2e/config-ts/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle preview -p 61108",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61108 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61108 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61108 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61108 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.14.0"

e2e/config-ts/tests/hello.spec.ts

@@ -9,16 +9,16 @@ test("__filename and __dirname are replaced", async ({ page }) => {
   await page.goto("http://localhost:61108");
 
   await expect(page.locator("[data-test=filename_root]")).toHaveText(
-    /e2e\/config-ts\/vite\.config\.ts/,
+    /e2e[\/\\]config-ts[\/\\]vite\.config\.ts/,
   );
   await expect(page.locator("[data-test=dirname_root]")).toHaveText(
-    /e2e\/config-ts/,
+    /e2e[\/\\]config-ts/,
   );
 
   await expect(page.locator("[data-test=filename_myPlugin]")).toHaveText(
-    /e2e\/config-ts\/vite-my-plugin\.ts/,
+    /e2e[\/\\]config-ts[\/\\]vite-my-plugin\.ts/,
   );
   await expect(page.locator("[data-test=dirname_myPlugin]")).toHaveText(
-    /e2e\/config-ts/,
+    /e2e[\/\\]config-ts/,
   );
 });

e2e/config/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle preview -p 61107",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61107 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61107 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61107 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61107 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.14.0"

e2e/css/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle preview -p 61102",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61102 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61102 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61102 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61102 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "autoprefixer": "^10.4.5",
     "postcss": "^8.4.12",
     "react": "^18.2.0",

e2e/decorators/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle preview -p 61103",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61103 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61103 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61103 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61103 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.14.0"

e2e/flow/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle preview -p 61104",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61104 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61104 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61104 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61104 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "flow-remove-types": "^2.176.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

e2e/programmatic/package.json

@@ -9,13 +9,13 @@
     "serve-prod": "node preview.js",
     "build": "node build.js",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61105 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61105 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61105 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61105 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.14.0"

e2e/programmatic/playwright.config.ts

@@ -0,0 +1,4 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const config: PlaywrightTestConfig = {};
+export default config;

e2e/provider/package.json

@@ -8,13 +8,13 @@
     "serve-prod": "ladle serve -p 61106",
     "build": "ladle build",
     "lint": "echo 'no lint'",
-    "test-dev": "start-server-and-test serve 61106 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
-    "test-prod": "start-server-and-test serve-prod 61106 'PW_EXPERIMENTAL_TS_ESM=1 npx playwright test'",
+    "test-dev": "start-server-and-test serve 61106 'npx playwright test'",
+    "test-prod": "start-server-and-test serve-prod 61106 'npx playwright test'",
     "test": "npm run test-dev && npm run test-prod"
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.14.0"

package.json

@@ -35,7 +35,7 @@
     "@changesets/cli": "^2.22.0",
     "@commitlint/cli": "^16.2.4",
     "@commitlint/config-conventional": "^16.2.4",
-    "@playwright/test": "1.19.2",
+    "@playwright/test": "1.23.2",
     "@types/jest": "^27.4.1",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",

packages/ladle/build-cjs.shell.mjs

@@ -0,0 +1,14 @@
+#!/usr/bin/env zx
+import "zx/globals";
+
+await fs.copy("lib/app", "cjs/lib/app");
+await $`pnpm babel lib/cli --out-dir cjs/lib/cli --plugins=@babel/plugin-transform-modules-commonjs`;
+await $`pnpm babel lib/shared --out-dir cjs/lib/shared --plugins=@babel/plugin-transform-modules-commonjs`;
+await $`pnpm babel api --out-dir cjs/api --plugins=@babel/plugin-transform-modules-commonjs`;
+await fs.copy("lib/shared/types.ts", "cjs/lib/shared/types.ts");
+await fs.copy(
+  "lib/cli/openChrome.applescript",
+  "cjs/lib/cli/openChrome.applescript",
+);
+await fs.copy("lib/shared/default-config.js", "cjs/lib/app/src/def-config.ts");
+await $`node ./build-cjs.js`;

packages/ladle/lib/cli/load-config.js

@@ -11,8 +11,9 @@ const loadConfig = async (configFolder) => {
     /**
      * @type {import('../shared/types').UserConfig}
      */
-    const config = (await import(path.join(configFolder, "config.mjs")))
-      .default;
+    const config = (
+      await import("file:///" + path.join(configFolder, "config.mjs"))
+    ).default;
     if (Object.keys(config).length === 0) {
       debug("Custom config is empty.");
     } else {

packages/ladle/lib/cli/vite-plugin/generate/cleanup-windows-path.js

@@ -0,0 +1,9 @@
+/**
+ * @param {string} path
+ * @return {string}
+ */
+function cleanupWindowsPath(path) {
+  return path.replace(/\\/g, "/");
+}
+
+export default cleanupWindowsPath;

packages/ladle/lib/cli/vite-plugin/generate/get-components-import.js

@@ -4,6 +4,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 import debugFactory from "debug";
 import getAst from "../get-ast.js";
+import cleanupWindowsPath from "./cleanup-windows-path.js";
 
 const debug = debugFactory("ladle:vite");
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -55,12 +56,12 @@ const getComponents = (configFolder) => {
 
   firstFoundComponentsPath && debug(`${configFolder}/${filename} found.`);
 
-  const componentsRelativePath = path
-    .relative(
+  const componentsRelativePath = cleanupWindowsPath(
+    path.relative(
       path.join(__dirname, "../../../app/src"),
       path.join(configFolder, filename),
-    )
-    .slice(2);
+    ),
+  ).slice(2);
   if (checkIfNamedExportExists("Provider", sourceCode, filename)) {
     debug(`Custom provider found.`);
     return `import {Provider as CustomProvider} from '${componentsRelativePath}';\nexport const Provider = CustomProvider;\n`;

packages/ladle/lib/cli/vite-plugin/generate/get-config-import.js

@@ -1,6 +1,7 @@
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import cleanupWindowsPath from "./cleanup-windows-path.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -12,12 +13,12 @@ const getConfigImport = (configFolder) => {
   const configExists = fs.existsSync(configPath);
   let configCode = `export let config = {};\n`;
   if (configExists) {
-    configCode += `import customConfig from '${path
-      .relative(
+    configCode += `import customConfig from '${cleanupWindowsPath(
+      path.relative(
         path.join(__dirname, "../../../app/src"),
         path.join(configFolder, "config.mjs"),
-      )
-      .slice(2)}';\nconfig = customConfig;\n`;
+      ),
+    ).slice(2)}';\nconfig = customConfig;\n`;
   }
   return `${configCode}`;
 };

packages/ladle/lib/cli/vite-plugin/generate/get-story-imports.js

@@ -3,6 +3,7 @@ import generate from "@babel/generator";
 import t from "@babel/types";
 import path from "path";
 import { fileURLToPath } from "url";
+import cleanupWindowsPath from "./cleanup-windows-path.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -24,12 +25,12 @@ const getStoryImports = (entryData) => {
     entryData[entry].stories.forEach(({ componentName, namedExport }) => {
       const ast = lazyImport({
         source: t.stringLiteral(
-          path
-            .relative(
+          cleanupWindowsPath(
+            path.relative(
               path.join(__dirname, "../../../app/src"),
               path.join(process.cwd(), entry),
-            )
-            .slice(2),
+            ),
+          ).slice(2),
         ),
         component: t.identifier(componentName),
         story: t.stringLiteral(namedExport),

packages/ladle/lib/cli/vite-plugin/vite-plugin.js

@@ -5,6 +5,7 @@ import debugFactory from "debug";
 import getGeneratedList from "./generate/get-generated-list.js";
 import { getEntryData } from "./parse/get-entry-data.js";
 import { detectDuplicateStoryNames, printError } from "./utils.js";
+import cleanupWindowsPath from "./generate/cleanup-windows-path.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -53,9 +54,9 @@ function ladlePlugin(config, configFolder, mode) {
       // some addons (like a11y) can subscribe to changes and re-run
       // on HMR updates
       if (id.includes(".stories.")) {
-        const from = path
-          .relative(id, path.join(__dirname, "../../app/src"))
-          .slice(3);
+        const from = cleanupWindowsPath(
+          path.relative(id, path.join(__dirname, "../../app/src")),
+        ).slice(3);
         const watcherImport = `import { storyUpdated } from "${from}/story-hmr";`;
         // if stories are defined through .bind({}) we need to force full reloads since
         // react-refresh can't pick it up

packages/ladle/package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "cli": "node ./lib/cli/cli.js",
     "clean": "rimraf dist && rimraf .ladle && rimraf build && rimraf *.tsbuildinfo",
-    "build": "./build-cjs.sh",
+    "build": "zx build-cjs.shell.mjs",
     "serve": "node ./lib/cli/cli.js serve",
     "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest"
   },
@@ -81,12 +81,14 @@
     "@types/jest": "^27.4.1",
     "@types/lodash.merge": "^4.6.7",
     "@types/micromatch": "^4.0.2",
+    "@types/node": "^18",
     "@types/ws": "^8.5.3",
     "babel-jest": "^28.0.2",
     "jest": "^28.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.70.1"
+    "rollup": "^2.70.1",
+    "zx": "^7.0.7"
   },
   "jest": {
     "transform": {