Use virtual module for the ladle vite plugin (#144)

* Use virtual module for the ladle vite plugin

* Fix tests

* Fix sourcemaps in prod

* Changeset

.changeset/friendly-hairs-teach.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": patch
+---
+
+Fixing sourcemaps when using ladle build --sourcemap while using virtual module for our story list and metadata.

package.json

@@ -32,6 +32,7 @@
     "@commitlint/cli": "^16.2.4",
     "@commitlint/config-conventional": "^16.2.4",
     "@playwright/test": "1.19.2",
+    "@types/jest": "^27.4.1",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@typescript-eslint/eslint-plugin": "^5.21.0",

packages/ladle/lib/app/manifest.json

@@ -1,10 +1,6 @@
 {
   "name": "Ladle",
   "short_name": "Ladle",
-  "icons": [{
-      "src": "touch-icon.png",
-      "sizes": "512x512"
-  }],
   "background_color": "#ffffff",
   "theme_color": "#ffffff",
   "display": "fullscreen"

packages/ladle/lib/app/src/addons/source.tsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import Highlight, { defaultProps } from "prism-react-renderer";
 import themeLight from "prism-react-renderer/themes/github";
 import themeDark from "prism-react-renderer/themes/nightOwl";
-import { storySource, stories } from "../../generated/generated-list";
+import { storySource, stories } from "virtual:generated-list";
 import { AddonProps, GlobalState, ActionType } from "../../../shared/types";
 import { Source } from "../icons";
 import { Modal, Code } from "../ui";

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import {
   stories as unsortedStories,
   errorMessage,
-} from "../generated/generated-list";
+} from "virtual:generated-list";
 import Story from "./story";
 import NoStories from "./no-stories";
 import NoStoriesError from "./no-stories-error";

packages/ladle/lib/app/src/get-config.ts

@@ -1,17 +1,16 @@
 import merge from "lodash.merge";
-import { config as configAny, stories } from "../generated/generated-list";
+import { config, stories } from "virtual:generated-list";
 import defaultConfig from "../../shared/default-config";
 import type { Config } from "../../shared/types";
 import debug from "./debug";
 
-const configTyped = configAny as Config;
-if (Object.keys(configTyped).length === 0) {
+if (Object.keys(config).length === 0) {
   debug("No custom config found.");
 } else {
   debug(`Custom config found:`);
-  debug(configTyped);
+  debug(config);
 }
-const mergedConfig: Config = merge(defaultConfig, configTyped);
+const mergedConfig: Config = merge(defaultConfig, config);
 if (mergedConfig.defaultStory === "") {
   mergedConfig.defaultStory = Object.keys(stories).sort()[0];
 }

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

@@ -1,33 +1,25 @@
 import * as React from "react";
 import ErrorBoundary from "./error-boundary";
-import { stories, Provider } from "../generated/generated-list";
+import { stories, Provider } from "virtual:generated-list";
 import { Ring } from "./icons";
 import type { GlobalState, GlobalAction } from "../../shared/types";
 import config from "./get-config";
 import NoStories from "./no-stories";
 
-// wonky types because the mocked generated module can't have types
-const ProviderAny = Provider as any;
-const storiesAny = stories as any;
-
 const Story: React.FC<{
   globalState: GlobalState;
   dispatch: React.Dispatch<GlobalAction>;
 }> = ({ globalState, dispatch }) =>
   globalState.story ? (
     <ErrorBoundary>
       <React.Suspense fallback={<Ring />}>
-        <ProviderAny
-          config={config}
-          globalState={globalState}
-          dispatch={dispatch}
-        >
-          {storiesAny[globalState.story] ? (
-            React.createElement(storiesAny[globalState.story].component)
+        <Provider config={config} globalState={globalState} dispatch={dispatch}>
+          {stories[globalState.story] ? (
+            React.createElement(stories[globalState.story].component)
           ) : (
             <NoStories wrongUrl activeStory={globalState.story} />
           )}
-        </ProviderAny>
+        </Provider>
       </React.Suspense>
     </ErrorBoundary>
   ) : null;

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

@@ -42,7 +42,8 @@ const getComponents = (configFolder) => {
     path.join(configFolder, "components.js"),
   ];
   const firstFoundComponentsPath = componentsPaths.find((componentsPath) =>
-    fs.existsSync(componentsPath));
+    fs.existsSync(componentsPath),
+  );
 
   if (!firstFoundComponentsPath) {
     debug(`Returning default no-op Provider.`);
@@ -54,10 +55,12 @@ const getComponents = (configFolder) => {
 
   firstFoundComponentsPath && debug(`${configFolder}/${filename} found.`);
 
-  const componentsRelativePath = path.relative(
-    path.join(__dirname, "../../../app/src"),
-    path.join(configFolder, filename),
-  );
+  const componentsRelativePath = path
+    .relative(
+      path.join(__dirname, "../../../app/src"),
+      path.join(configFolder, filename),
+    )
+    .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

@@ -12,10 +12,12 @@ const getConfigImport = (configFolder) => {
   const configExists = fs.existsSync(configPath);
   let configCode = `export let config = {};\n`;
   if (configExists) {
-    configCode += `import customConfig from '${path.relative(
-      path.join(__dirname, "../../../app/src"),
-      path.join(configFolder, "config.mjs"),
-    )}';\nconfig = customConfig;\n`;
+    configCode += `import customConfig from '${path
+      .relative(
+        path.join(__dirname, "../../../app/src"),
+        path.join(configFolder, "config.mjs"),
+      )
+      .slice(2)}';\nconfig = customConfig;\n`;
   }
   return `${configCode}`;
 };

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

@@ -11,7 +11,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
  */
 const getStoryImports = (entryData) => {
   let storyImports = `import { lazy, createElement, Fragment } from "react";\n`;
-  storyImports += `import composeEnhancers from "../src/compose-enhancers";\n`;
+  storyImports += `import composeEnhancers from "/src/compose-enhancers";\n`;
   const lazyImport = /** @type {any} */ (template).default(`
     const %%component%% = lazy(() =>
      import(%%source%%).then((module) => {
@@ -24,10 +24,12 @@ const getStoryImports = (entryData) => {
     entryData[entry].stories.forEach(({ componentName, namedExport }) => {
       const ast = lazyImport({
         source: t.stringLiteral(
-          path.relative(
-            path.join(__dirname, "../../../app/src"),
-            path.join(process.cwd(), entry),
-          ),
+          path
+            .relative(
+              path.join(__dirname, "../../../app/src"),
+              path.join(process.cwd(), entry),
+            )
+            .slice(2),
         ),
         component: t.identifier(componentName),
         story: t.stringLiteral(namedExport),

packages/ladle/lib/cli/vite-plugin/parse/get-default-export.js

@@ -32,7 +32,6 @@ const getDefaultExport = (result, astPath) => {
       }
     });
   } catch (e) {
-    console.log(e);
     throw new Error(
       `Can't parse the default title and meta of ${result.entry}. Meta must be serializable and title a string literal.`,
     );

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

@@ -16,14 +16,11 @@ const debug = debugFactory("ladle:vite");
 const defaultListModule = (errorMessage) => `
 import { lazy } from "react";
 import * as React from "react";
-export const Foo = lazy(() => Promise.resolve() as any);
-export const list = ["Foo"];
+export const list = [];
 export const config = {};
 export const stories = {};
-
 export const storySource = {};
 export const errorMessage = \`${errorMessage}\`;
-
 export const Provider = ({ children }: { children: any }) =>
   /*#__PURE__*/ React.createElement(React.Fragment, null, children);
 `;
@@ -34,15 +31,16 @@ export const Provider = ({ children }: { children: any }) =>
  * @param mode {string}
  */
 function ladlePlugin(config, configFolder, mode) {
-  const virtualFileId = "lib/app/generated/generated-list";
+  const virtualModuleId = "virtual:generated-list";
+  const resolvedVirtualModuleId = "\0" + virtualModuleId;
   return {
-    name: "generated-list", // required, will show up in warnings and errors
+    name: "ladle-plugin",
     /**
      * @param {string} id
      */
     resolveId(id) {
-      if (id.includes(virtualFileId)) {
-        return virtualFileId;
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId;
       }
       return null;
     },
@@ -68,19 +66,22 @@ function ladlePlugin(config, configFolder, mode) {
           });
         }`
           : "";
-        return `${code}\n${invalidateHmr}\n${watcherImport}\nif (import.meta.hot) {
+        return {
+          code: `${code}\n${invalidateHmr}\n${watcherImport}\nif (import.meta.hot) {
           import.meta.hot.accept(() => {
             storyUpdated();
           });
-        }`;
+        }`,
+          map: null,
+        };
       }
-      return code;
+      return { code, map: null };
     },
     /**
      * @param {string} id
      */
     async load(id) {
-      if (id.includes(virtualFileId)) {
+      if (id === resolvedVirtualModuleId) {
         debug(`transforming: ${id}`);
         try {
           debug("Initial generation of the list");

packages/ladle/tests/__snapshots__/get-generated-list.test.ts.snap

@@ -3,14 +3,14 @@
 exports[`Capital letters in story names converted into delimiters 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const capitalization$$blue$tiny$cat = lazy(() => import(\\"../../../tests/fixtures/capitalization.stories.tsx\\").then(module => {
+const capitalization$$blue$tiny$cat = lazy(() => import(\\"/../../tests/fixtures/capitalization.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"BlueTinyCat\\")
   };
 }));
-const capitalization$$big$barking$dog = lazy(() => import(\\"../../../tests/fixtures/capitalization.stories.tsx\\").then(module => {
+const capitalization$$big$barking$dog = lazy(() => import(\\"/../../tests/fixtures/capitalization.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"BigBarkingDog\\")
   };
@@ -49,9 +49,9 @@ export const errorMessage = '';
 exports[`Capital letters in the filename converted into delimiters 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const filename$capitalization$$test = lazy(() => import(\\"../../../tests/fixtures/filenameCapitalization.stories.tsx\\").then(module => {
+const filename$capitalization$$test = lazy(() => import(\\"/../../tests/fixtures/filenameCapitalization.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Test\\")
   };
@@ -83,9 +83,9 @@ export const errorMessage = '';
 exports[`Default title is used instead of the file name 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const title$$cat = lazy(() => import(\\"../../../tests/fixtures/default-title.stories.tsx\\").then(module => {
+const title$$cat = lazy(() => import(\\"/../../tests/fixtures/default-title.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Cat\\")
   };
@@ -117,14 +117,14 @@ export const errorMessage = '';
 exports[`Extract and merge story meta 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const title$$cat = lazy(() => import(\\"../../../tests/fixtures/story-meta.stories.tsx\\").then(module => {
+const title$$cat = lazy(() => import(\\"/../../tests/fixtures/story-meta.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Cat\\")
   };
 }));
-const title$$dog = lazy(() => import(\\"../../../tests/fixtures/story-meta.stories.tsx\\").then(module => {
+const title$$dog = lazy(() => import(\\"/../../tests/fixtures/story-meta.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Dog\\")
   };
@@ -183,9 +183,9 @@ export const errorMessage = '';
 exports[`Extract default meta 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const title$$cat = lazy(() => import(\\"../../../tests/fixtures/default-meta.stories.tsx\\").then(module => {
+const title$$cat = lazy(() => import(\\"/../../tests/fixtures/default-meta.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Cat\\")
   };
@@ -225,14 +225,14 @@ export const errorMessage = '';
 exports[`Single file with two stories 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const animals$$cat = lazy(() => import(\\"../../../tests/fixtures/animals.stories.tsx\\").then(module => {
+const animals$$cat = lazy(() => import(\\"/../../tests/fixtures/animals.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Cat\\")
   };
 }));
-const animals$$dog = lazy(() => import(\\"../../../tests/fixtures/animals.stories.tsx\\").then(module => {
+const animals$$dog = lazy(() => import(\\"/../../tests/fixtures/animals.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Dog\\")
   };
@@ -271,19 +271,19 @@ export const errorMessage = '';
 exports[`Story name replaces named export as a story name 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const storyname$$doggo = lazy(() => import(\\"../../../tests/fixtures/storyname.stories.tsx\\").then(module => {
+const storyname$$doggo = lazy(() => import(\\"/../../tests/fixtures/storyname.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Cat\\")
   };
 }));
-const storyname$$capital$city = lazy(() => import(\\"../../../tests/fixtures/storyname.stories.tsx\\").then(module => {
+const storyname$$capital$city = lazy(() => import(\\"/../../tests/fixtures/storyname.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"CapitalCity\\")
   };
 }));
-const storyname$$champs$élysées = lazy(() => import(\\"../../../tests/fixtures/storyname.stories.tsx\\").then(module => {
+const storyname$$champs$élysées = lazy(() => import(\\"/../../tests/fixtures/storyname.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"CapitalReplaced\\")
   };
@@ -329,9 +329,9 @@ export const errorMessage = '';
 exports[`Turn file name delimiters into spaces and levels correctly 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
-import composeEnhancers from \\"../src/compose-enhancers\\";
+import composeEnhancers from \\"/src/compose-enhancers\\";
 
-const our$animals$$mammals$$cat = lazy(() => import(\\"../../../tests/fixtures/our-animals--mammals.stories.tsx\\").then(module => {
+const our$animals$$mammals$$cat = lazy(() => import(\\"/../../tests/fixtures/our-animals--mammals.stories.tsx\\").then(module => {
   return {
     default: composeEnhancers(module, \\"Cat\\")
   };