@storybook/react-native
Version:
A better way to develop React Native Components for your app
139 lines (138 loc) • 4.54 kB
JavaScript
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-Ble4zEEl.js");
const require_env_tools = require("../env-tools-HukDb0eg.js");
const require_channelServer = require("../channelServer-MfmENTPk.js");
let path = require("path");
path = require_chunk.__toESM(path);
//#region src/repack/withStorybook.ts
var import_generate = require_env_tools.require_generate();
/**
* Repack/Rspack plugin for React Native Storybook.
*
* Provides equivalent functionality to the Metro {@link withStorybook} wrapper:
* - Auto-generates `storybook.requires.ts` before compilation
* - Starts a WebSocket channel server for remote control / syncing
* - Supports `enabled: false` to strip Storybook from the bundle
* - Supports `liteMode` to mock out the full Storybook UI
*
* @example
* ```javascript
* import { StorybookPlugin } from '@storybook/react-native/repack/withStorybook';
*
* // In your rspack.config.mjs plugins array:
* new StorybookPlugin({
* enabled: true,
* websockets: 'auto',
* })
* ```
*
* @example
* ```javascript
* // Disable Storybook in production builds:
* new StorybookPlugin({
* enabled: process.env.STORYBOOK_ENABLED !== 'false',
* websockets: 'auto',
* })
* ```
*/
var StorybookPlugin = class {
options;
generated = false;
serverStarted = false;
constructor(options = {}) {
this.options = {
configPath: path.resolve(process.cwd(), "./.rnstorybook"),
enabled: true,
useJs: false,
docTools: true,
liteMode: false,
experimental_mcp: false,
...options
};
}
apply(compiler) {
const { configPath, enabled, websockets, useJs, docTools, liteMode, experimental_mcp } = this.options;
if (!enabled) {
this.applyDisabled(compiler, configPath);
return;
}
this.applyEnabled(compiler, {
configPath,
websockets,
useJs,
docTools,
liteMode,
experimental_mcp
});
}
/**
* When enabled: generate storybook.requires, optionally start websocket server,
* and set up liteMode aliases.
*/
applyEnabled(compiler, { configPath, websockets, useJs, docTools, liteMode, experimental_mcp }) {
const resolvedWs = require_env_tools.loadWebsocketEnvOverrides(websockets);
const bindHost = websockets === "auto" && !process.env.STORYBOOK_WS_HOST ? void 0 : resolvedWs.host;
const generateHost = resolvedWs.host ?? (websockets === "auto" && !process.env.STORYBOOK_WS_HOST ? "auto" : void 0);
const port = resolvedWs.port ?? 7007;
const secured = resolvedWs.secured;
const channelWebsocketsEnabled = Boolean(websockets) || Boolean(process.env.STORYBOOK_WS_HOST) || Boolean(resolvedWs.host);
if ((experimental_mcp || websockets != null || process.env.STORYBOOK_WS_HOST) && !this.serverStarted) {
this.serverStarted = true;
require_channelServer.createChannelServer({
port,
host: bindHost,
configPath,
experimental_mcp,
websockets: channelWebsocketsEnabled,
secured,
ssl: websockets && websockets !== "auto" ? {
key: websockets.key,
cert: websockets.cert,
ca: websockets.ca,
passphrase: websockets.passphrase
} : void 0
});
}
compiler.hooks.beforeCompile.tapPromise("StorybookPlugin", async () => {
if (this.generated) return;
this.generated = true;
await (0, import_generate.generate)({
configPath,
useJs,
docTools,
...websockets != null || process.env.STORYBOOK_WS_HOST ? {
host: generateHost,
port,
secured
} : {}
});
console.log("[StorybookPlugin] Generated storybook.requires");
});
if (liteMode) {
const alias = compiler.options.resolve.alias ?? {};
alias["@storybook/react-native-ui$"] = false;
compiler.options.resolve.alias = alias;
}
}
/**
* When disabled: redirect all Storybook imports to empty modules,
* and replace the config folder index with a stub component.
*/
applyDisabled(compiler, configPath) {
const stubPath = path.resolve(__dirname, __dirname.includes(`${path.sep}src${path.sep}`) ? "../stub.tsx" : "../stub.js");
const normalizedConfigPath = path.resolve(configPath);
new compiler.webpack.NormalModuleReplacementPlugin(/./, (resource) => {
const request = resource.request;
if (!request) return;
if (request.startsWith("@storybook") || request.startsWith("storybook")) {
resource.request = stubPath;
return;
}
}).apply(compiler);
const alias = compiler.options.resolve.alias ?? {};
alias[normalizedConfigPath] = stubPath;
compiler.options.resolve.alias = alias;
}
};
//#endregion
exports.StorybookPlugin = StorybookPlugin;