Expose vite.config.js, simplify Ladle configuration (tajo#153)

* WIP: Respect vite.config.js

* Enable vite.config.js, add docs

* Fix tests

* Fix lint and tsc

* Fix story source escaping

* Add v1 blog post

.changeset/moody-avocados-pump.md

@@ -0,0 +1,14 @@
+---
+"@ladle/react": major
+---
+
+- Ladle now loads top-level `vite.config.js/ts/mjs` and uses all its options.
+- All Vite related options from `config.mjs` removed and an error will be thrown, use `vite.config.js` instead.
+- `enableFlow` option removed, you can create your own plugin (check our e2e/flow test).
+- Programmatic API imports changed to `@ladle/react/serve` and `@ladle/react/build`.
+- `--out` renamed to `--outDir` to mimic Vite configuration, added `-o` alias, `outDir` moved to top-level in `config.mjs`.
+- `--port` has alias `-p`, `port` moved to top-level in `config.mjs`.
+- `vite.config.js` can be customized through `viteConfig` and `--viteConfig`.
+- `--base-url` removed, use `base` in `vite.config.js`.
+- `--open` removed, use `server.open` in `vite.config.js`.
+- `--sourcemap` removed, use `build.sourcemap` in `vite.config.js`.

e2e/addons/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "ladle serve --open=none --port=61100",
+    "serve": "ladle serve --port=61100",
     "serve-prod": "http-server build -c-1 -s -p 61100",
     "build": "ladle build",
     "lint": "echo 'no lint'",
@@ -17,6 +17,7 @@
     "@playwright/test": "1.19.2",
     "axe-playwright": "^1.1.11",
     "http-server": "^14.1.0",
+    "playwright-core": "^1.22.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "start-server-and-test": "^1.14.0"

e2e/addons/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

e2e/commonjs/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "../../packages/ladle/cjs/lib/cli/cli.js serve --open=none --port=61101",
+    "serve": "../../packages/ladle/cjs/lib/cli/cli.js serve --port=61101",
     "serve-prod": "http-server build -c-1 -s -p 61101",
     "build": "(cd ../../packages/ladle; ./build-cjs.sh) && ../../packages/ladle/cjs/lib/cli/cli.js build",
     "lint": "echo 'no lint'",

e2e/commonjs/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

e2e/config/.ladle/config.mjs

@@ -0,0 +1,4 @@
+export default {
+  stories: "src/**/*.show.{js,jsx,ts,tsx}",
+  viteConfig: "ladle-vite.config.js",
+};

e2e/config/CHANGELOG.md

@@ -0,0 +1,22 @@
+# test-provider
+
+## 0.2.28
+
+### Patch Changes
+
+- Updated dependencies [[`daa717d`](https://github.com/tajo/ladle/commit/daa717dd680cf55da5afbc53809109212555fc3c), [`8568de6`](https://github.com/tajo/ladle/commit/8568de64640823bb0e66797195288a3b4e81fdb6)]:
+  - @ladle/react@0.16.0
+
+## 0.2.27
+
+### Patch Changes
+
+- Updated dependencies [[`421a0c3`](https://github.com/tajo/ladle/commit/421a0c3ef1b97ec2db416c49cadcdd422398ec06)]:
+  - @ladle/react@0.15.2
+
+## 0.2.26
+
+### Patch Changes
+
+- Updated dependencies [[`2351356`](https://github.com/tajo/ladle/commit/235135613503255bf0e1bf0af5332b7b08d00f2b), [`f0a42ad`](https://github.com/tajo/ladle/commit/f0a42ad7123e30c8ab71d63d843bf0d9670b4931), [`515d069`](https://github.com/tajo/ladle/commit/515d0696665df786e45b5c76aed88239c68cdf24), [`c027c8c`](https://github.com/tajo/ladle/commit/c027c8c0a8a2442317b068787c039a580bf2c502), [`fa8db60`](https://github.com/tajo/ladle/commit/fa8db60ceba04e9d0fab519ad4b3b84e88ba412d), [`e2069f4`](https://github.com/tajo/ladle/commit/e2069f4b3d2b0b69a034c28e508a171ce011c45a), [`0a44aa2`](https://github.com/tajo/ladle/commit/0a44aa2a1b40f392db3163cddfdae7633771edec)]:
+  - @ladle/react@0.15.1

e2e/config/ladle-vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

e2e/config/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "test-config",
+  "version": "0.2.28",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "serve": "ladle serve --port=61107",
+    "serve-prod": "http-server build -c-1 -s -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": "npm run test-dev && npm run test-prod"
+  },
+  "dependencies": {
+    "@ladle/react": "workspace:*",
+    "@playwright/test": "1.19.2",
+    "http-server": "^14.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "start-server-and-test": "^1.14.0"
+  }
+}

e2e/config/src/hello.show.tsx

@@ -0,0 +1,3 @@
+export const World = () => {
+  return <h1>Hello World</h1>;
+};

e2e/config/tests/hello.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from "@playwright/test";
+
+test("default story is rendered", async ({ page }) => {
+  await page.goto("http://localhost:61107");
+  await expect(page.locator("h1")).toHaveText("Hello World");
+});

e2e/css/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "ladle serve --open=none --port=61102",
+    "serve": "ladle serve --port=61102",
     "serve-prod": "http-server build -c-1 -s -p 61102",
     "build": "ladle build",
     "lint": "echo 'no lint'",

e2e/css/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

e2e/decorators/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "ladle serve --open=none --port=61103",
+    "serve": "ladle serve --port=61103",
     "serve-prod": "http-server build -c-1 -s -p 61103",
     "build": "ladle build",
     "lint": "echo 'no lint'",

e2e/decorators/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

e2e/flow/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "ladle serve --open=none --port=61104",
+    "serve": "ladle serve --port=61104",
     "serve-prod": "http-server build -c-1 -s -p 61104",
     "build": "ladle build",
     "lint": "echo 'no lint'",
@@ -15,9 +15,11 @@
   "dependencies": {
     "@ladle/react": "workspace:*",
     "@playwright/test": "1.19.2",
+    "flow-remove-types": "^2.176.3",
     "http-server": "^14.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "rollup-pluginutils": "^2.8.2",
     "start-server-and-test": "^1.14.0"
   }
 }

e2e/flow/vite.config.mjs

@@ -0,0 +1,18 @@
+import { flowPlugin, esbuildFlowPlugin } from "./strip-flow.mjs";
+
+export default {
+  plugins: [flowPlugin()],
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [esbuildFlowPlugin()],
+    },
+  },
+  server: {
+    open: "none",
+  },
+  esbuild: {
+    include: /\.(tsx?|jsx?)$/,
+    exclude: [],
+    loader: "tsx",
+  },
+};

e2e/programmatic/build.js

@@ -1,3 +1,3 @@
-import build from "@ladle/react/api/build.js";
+import build from "@ladle/react/build";
 
 build();

e2e/programmatic/serve.js

@@ -1,8 +1,5 @@
-import serve from "@ladle/react/api/serve.js";
+import serve from "@ladle/react/serve";
 
 serve({
-  serve: {
-    open: "none",
-    port: 61105,
-  },
+  port: 61105,
 });

e2e/programmatic/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

e2e/provider/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "serve": "ladle serve --open=none --port=61106",
+    "serve": "ladle serve --port=61106",
     "serve-prod": "http-server build -c-1 -s -p 61106",
     "build": "ladle build",
     "lint": "echo 'no lint'",

e2e/provider/vite.config.js

@@ -0,0 +1,5 @@
+export default {
+  server: {
+    open: "none",
+  },
+};

package.json

@@ -20,6 +20,7 @@
     "packages/website",
     "e2e/addons",
     "e2e/commonjs",
+    "e2e/config",
     "e2e/css",
     "e2e/decorators",
     "e2e/flow",

packages/example/package.json

@@ -11,7 +11,10 @@
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
+    "@vitejs/plugin-react": "^1.3.0",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react-dom": "^18.1.0",
+    "vite": "^2.9.6",
+    "vite-tsconfig-paths": "^3.4.1"
   }
 }

packages/example/src/a11y.stories.tsx

@@ -1,7 +1,8 @@
+const empty = "";
 export const Issues = () => (
   <>
     <input />
-    <button style={{ backgroundColor: "red", color: "darkRed" }}>
+    <button style={{ backgroundColor: `red${empty}`, color: "darkRed" }}>
       Inaccessible button
     </button>
     <img />

packages/ladle/build-cjs.js

@@ -8,8 +8,10 @@ const manifestRaw = fs.readFileSync("package.json");
 const manifest = JSON.parse(manifestRaw);
 
 manifest.name = "@ladle/react-cjs";
+manifest.main = "./lib/app/exports.ts";
 delete manifest.type;
 delete manifest.module;
+delete manifest.exports;
 
 fs.writeFile(
   "./cjs/package.json",
@@ -30,13 +32,15 @@ const filesWithDirname = [
   "./cjs/lib/cli/vite-plugin/generate/get-story-source.js",
   "./cjs/lib/cli/vite-plugin/ast-to-obj.js",
   "./cjs/lib/cli/vite-plugin/vite-plugin.js",
+  "./cjs/lib/cli/get-user-vite-config.js",
 ];
 
 filesWithDirname.forEach((file) => {
   const content = fs.readFileSync(file, "utf8");
   fs.writeFile(
     file,
     content
+      .replace("load-user-vite-config.cjs", "load-user-vite-config.js")
       .replace(
         `const __dirname = (0, _path.dirname)((0, _url.fileURLToPath)(import.meta.url));`,
         "",

packages/ladle/jest.transform.cjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 module.exports = require("babel-jest").default.createTransformer({
   presets: ["@babel/preset-typescript"],
   //plugins: ["@babel/plugin-transform-modules-commonjs"],

packages/ladle/lib/app/src/dialog.tsx

@@ -373,26 +373,6 @@ let checkStyles = noop;
     // only check once per package
     if (checkedPkgs[packageName]) return;
     checkedPkgs[packageName] = true;
-
-    if (
-      env.NODE_ENV !== "test" &&
-      parseInt(
-        window
-          .getComputedStyle(document.body)
-          .getPropertyValue("--reach-" + packageName),
-        10,
-      ) !== 1
-    ) {
-      console.warn(
-        "@reach/" +
-          packageName +
-          ' styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import "@reach/' +
-          packageName +
-          '/styles.css";\n\n  Otherwise you\'ll need to include them some other way:\n\n    <link rel="stylesheet" type="text/css" href="node_modules/@reach/' +
-          packageName +
-          '/styles.css" />\n\n  For more information visit https://ui.reach.tech/styling.\n  ',
-      );
-    }
   };
 }
 /**

packages/ladle/lib/cli/build.js

@@ -16,12 +16,7 @@ const build = async (params = {}) => {
   debug("Starting build command");
   debug(`CLI theme: ${params.theme}`);
   debug(`CLI stories: ${params.stories}`);
-  debug(`CLI out: ${params.build ? params.build.out : "undefined"}`);
-  debug(
-    `CLI sourcemap: ${params.build ? params.build.sourcemap : "undefined"}`,
-  );
-  debug(`CLI baseUrl: ${params.build ? params.build.baseUrl : "undefined"}`);
-
+  debug(`CLI out: ${params.outDir ? params.outDir : "undefined"}`);
   params.config = params.config || ".ladle";
   const configFolder = path.isAbsolute(params.config)
     ? params.config
@@ -33,56 +28,16 @@ const build = async (params = {}) => {
     ? params.theme
     : config.addons.theme.defaultState;
   config.stories = params.stories ? params.stories : config.stories;
-  config.root = params.root ? params.root : config.root;
-  config.enableFlow = params.enableFlow ? params.enableFlow : config.enableFlow;
-  config.publicDir = params.publicDir ? params.publicDir : config.publicDir;
-  config.vitePlugins = params.vitePlugins
-    ? params.vitePlugins
-    : config.vitePlugins;
-  config.envPrefix = params.envPrefix ? params.envPrefix : config.envPrefix;
-  config.defaultStory = params.defaultStory
-    ? params.defaultStory
-    : config.defaultStory;
-  config.define = params.define ? params.define : config.define;
-  config.css.modules =
-    params.css && params.css.modules ? params.css.modules : config.css.modules;
-  config.build.define =
-    params.build && params.build.define
-      ? params.build.define
-      : config.build.define;
-  config.resolve.alias =
-    params.resolve && params.resolve.alias
-      ? params.resolve.alias
-      : config.resolve.alias;
-  config.optimizeDeps.include =
-    params.optimizeDeps && params.optimizeDeps.include
-      ? params.optimizeDeps.include
-      : config.optimizeDeps.include;
-  config.build.out =
-    params.build && params.build.out ? params.build.out : config.build.out;
-  config.build.sourcemap =
-    params.build && params.build.sourcemap
-      ? params.build.sourcemap
-      : config.build.sourcemap;
-  config.build.baseUrl =
-    params.build && params.build.baseUrl
-      ? params.build.baseUrl
-      : config.build.baseUrl;
-  config.babelPlugins = params.babelPlugins
-    ? params.babelPlugins
-    : config.babelPlugins;
-  config.babelPresets = params.babelPresets
-    ? params.babelPresets
-    : config.babelPresets;
-
+  config.viteConfig = params.viteConfig ? params.viteConfig : config.viteConfig;
+  config.outDir = params.outDir ? params.outDir : config.outDir;
   debug(`Final config:\n${JSON.stringify(config, null, "  ")}`);
   process.env["VITE_PUBLIC_LADLE_THEME"] = config.addons.theme.defaultState;
   await viteProd(config, configFolder);
   console.log("Creating meta.json file...");
   const entryData = await getEntryData(await globby([config.stories]));
   const jsonContent = getMetaJsonString(entryData);
   await fs.writeFile(
-    path.join(process.cwd(), config.build.out, "meta.json"),
+    path.join(process.cwd(), config.outDir, "meta.json"),
     jsonContent,
   );
   console.log("meta.json file created.");