Core: Wrap manager entries to handle exports using a cache directory

code/addons/docs/angular/README.md

@@ -207,7 +207,7 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
 
 ## Inline Stories
 
-Storybook Docs renders all Angular stories inline by default. 
+Storybook Docs renders all Angular stories inline by default.
 
 However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.
 

code/addons/docs/ember/README.md

@@ -125,7 +125,7 @@ Storybook Docs renders all Ember stories inside `iframe`s, with a default height
 To update the global default, modify `.storybook/preview.js`:
 
 ```ts
-export const parameters =  { docs: { iframeHeight: 400 } };
+export const parameters = { docs: { iframeHeight: 400 } };
 ```
 
 For `DocsPage`, you need to update the parameter locally in a story:

code/addons/docs/react/README.md

@@ -98,7 +98,6 @@ Some **markdown** description, or whatever you want.
 
 ## Inline stories
 
-
 Storybook Docs renders all React stories inline by default.
 
 However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.

code/addons/docs/vue/README.md

@@ -140,7 +140,7 @@ However, you can render stories in an iframe, with a default height of `60px` (c
 To do so for all stories, update `.storybook/preview.js`:
 
 ```js
-export const parameters = { docs: { inlineStories: false, }, };
+export const parameters = { docs: { inlineStories: false } };
 ```
 
 ## More resources

code/addons/docs/web-components/README.md

@@ -112,7 +112,6 @@ For a full example see the [web-components-kitchen-sink/custom-elements.json](..
 
 ## Stories not inline
 
-
 Storybook Docs renders all web components stories inline by default.
 
 However, you can render stories in an iframe, with a default height of `60px` (configurable using the `docs.iframeHeight` story parameter), by using the `docs.inlineStories` parameter.

code/frameworks/nextjs/package.json

@@ -84,7 +84,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.5",
     "@babel/types": "^7.20.5",
-    "@storybook/addon-actions": "7.0.0-beta.12",
+    "@storybook/addon-actions": "7.0.0-beta.14",
     "@types/babel__core": "^7",
     "next": "^13.0.5",
     "typescript": "^4.9.3",

code/lib/builder-manager/package.json

@@ -46,12 +46,14 @@
     "@storybook/manager": "7.0.0-beta.14",
     "@storybook/node-logger": "7.0.0-beta.14",
     "@types/ejs": "^3.1.1",
+    "@types/find-cache-dir": "^3.2.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "browser-assert": "^1.2.1",
     "ejs": "^3.1.8",
     "esbuild": "^0.16.4",
     "esbuild-plugin-alias": "^0.2.1",
     "express": "^4.17.3",
+    "find-cache-dir": "^4.0.0",
     "fs-extra": "^9.0.1",
     "process": "^0.11.10",
     "slash": "^3.0.0",

code/lib/builder-manager/src/index.ts

@@ -10,6 +10,7 @@ import aliasPlugin from 'esbuild-plugin-alias';
 
 import { getTemplatePath, renderHTML } from './utils/template';
 import { definitions } from './utils/globals';
+import { wrapManagerEntries } from './utils/managerEntries';
 import type {
   BuilderBuildResult,
   BuilderFunction,
@@ -34,10 +35,14 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     getTemplatePath('addon.tsconfig.json'),
   ]);
 
+  const entryPoints = customManagerEntryPoint
+    ? [...addonsEntryPoints, customManagerEntryPoint]
+    : addonsEntryPoints;
+
+  const realEntryPoints = await wrapManagerEntries(entryPoints);
+
   return {
-    entryPoints: customManagerEntryPoint
-      ? [...addonsEntryPoints, customManagerEntryPoint]
-      : addonsEntryPoints,
+    entryPoints: realEntryPoints,
     outdir: join(options.outputDir || './', 'sb-addons'),
     format: 'esm',
     write: false,

code/lib/builder-manager/src/utils/managerEntries.ts

@@ -0,0 +1,37 @@
+import { join, parse, relative } from 'path';
+import fs from 'fs-extra';
+import findCacheDirectory from 'find-cache-dir';
+/**
+ * Manager entries should be **self-invoking** bits of code.
+ * They can of-course import from modules, and ESbuild will bundle all of that into a single file.
+ * But they should not export anything. However this can't be enforced, so what we do is wrap the given file, in a bit of code like this:
+ *
+ * ```js
+ * import '<<file>>';
+ * ```
+ *
+ * That way we are indicating to ESbuild that we do not care about this files exports, and they will be dropped in the bundle.
+ *
+ * We do all of that so we can wrap a try-catch around the code.
+ * That would have been invalid syntax had the export statements been left in place.
+ *
+ * We need to wrap each managerEntry with a try-catch because if we do not, a failing managerEntry can stop execution of other managerEntries.
+ */
+export async function wrapManagerEntries(entrypoints: string[]) {
+  return Promise.all(
+    entrypoints.map(async (entry) => {
+      const { name, dir } = parse(entry);
+      const cacheLocation = findCacheDirectory({ name: 'sb-manager' });
+
+      if (!cacheLocation) {
+        throw new Error('Could not create/find cache directory');
+      }
+
+      const location = join(cacheLocation, relative(process.cwd(), dir), `${name}-bundle.mjs`);
+      await fs.ensureFile(location);
+      await fs.writeFile(location, `import '${entry}';`);
+
+      return location;
+    })
+  );
+}