@storybook/react-native 7.6.7-alpha.1 → 7.6.8-alpha.0

package/dist/V6.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params, R as ReactNativeFramework } from './View-acca1d49.js';
-export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-acca1d49.js';
+import { P as Params, R as ReactNativeFramework } from './View-7a09870e.js';
+export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-7a09870e.js';
 import { ClientApi } from '@storybook/preview-api';
 import { b as Addon_StoryApi } from './index.d-82fc9196.js';
 export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-82fc9196.js';

package/dist/V6.js

@@ -72,16 +72,17 @@ __export(V6_exports, {
 module.exports = __toCommonJS(V6_exports);
 
 // src/StartV6.tsx
-var import_channels = require("@storybook/channels");
-var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_channels2 = require("@storybook/channels");
+var import_core_events3 = __toESM(require("@storybook/core-events"));
 var import_global = require("@storybook/global");
 var import_manager_api3 = require("@storybook/manager-api");
-var import_preview_api = require("@storybook/preview-api");
+var import_preview_api3 = require("@storybook/preview-api");
 var import_preview_web = require("@storybook/preview-web");
 
 // src/View.tsx
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
@@ -988,6 +989,7 @@ var findFirstChildStory = (story) => {
 };
 
 // src/components/StoryListView/StoryListView.tsx
+var import_preview_api = require("@storybook/preview-api");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
   fontSize: theme3.storyList.fontSize,
@@ -1202,7 +1204,8 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    global.__STORYBOOK_ADDONS_CHANNEL__.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+    const channel = import_preview_api.addons.getChannel();
+    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
   const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
@@ -1947,8 +1950,57 @@ var OnDeviceUI = ({
 var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 
 // src/View.tsx
+var import_channels = require("@storybook/channels");
+var import_core_events2 = __toESM(require("@storybook/core-events"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
+
+// src/rn-host-detect.js
+function getByRemoteConfig(hostname) {
+  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
+  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return { hostname, passed: false };
+  }
+  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+  if (constants) {
+    var serverHost = constants.ServerHost || hostname;
+    return { hostname: serverHost.split(":")[0], passed: true };
+  }
+  return { hostname, passed: false };
+}
+function getConstants(config) {
+  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
+}
+function getByRNRequirePolyfill(hostname) {
+  var NativeModules;
+  var PlatformConstants;
+  var AndroidConstants;
+  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
+  // TODO: Get NativeModules for RN >= 0.56
+  window.require.name === "metroRequire") {
+    return hostname;
+  }
+  NativeModules = window.require("NativeModules");
+  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
+    return hostname;
+  }
+  PlatformConstants = NativeModules.PlatformConstants;
+  AndroidConstants = NativeModules.AndroidConstants;
+  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+  return serverHost.split(":")[0];
+}
+function getHost(hostname) {
+  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return hostname;
+  }
+  var result = getByRemoteConfig(hostname);
+  if (result.passed) {
+    return result.hostname;
+  }
+  return getByRNRequirePolyfill(hostname);
+}
+
+// src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
@@ -1996,25 +2048,33 @@ var View10 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
-  // _getServerChannel = (params: Partial<Params> = {}) => {
-  //   const host = getHost(params.host || 'localhost');
-  //   const port = `:${params.port || 7007}`;
-  //   const query = params.query || '';
-  //   const websocketType = params.secured ? 'wss' : 'ws';
-  //   const url = `${websocketType}://${host}${port}/${query}`;
-  //   return createWebSocketChannel({
-  //     url,
-  //     async: true,
-  //     onError: async () => {},
-  //   });
-  // };
+  _getServerChannel = (params = {}) => {
+    const host = getHost(params.host || "localhost");
+    const port = `:${params.port || 7007}`;
+    const query = params.query || "";
+    const websocketType = params.secured ? "wss" : "ws";
+    const url = `${websocketType}://${host}${port}/${query}`;
+    return (0, import_channels.createWebSocketChannel)({
+      url,
+      async: true,
+      onError: async () => {
+      }
+    });
+  };
   getStorybookUI = (params = {}) => {
-    const {
-      shouldPersistSelection = true,
-      onDeviceUI = true
-      /* enableWebsockets = false  */
-    } = params;
+    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
     const initialStory = this._getInitialStory(params);
+    if (enableWebsockets) {
+      console.log("websockets enabled");
+      const channel = this._getServerChannel(params);
+      import_manager_api2.addons.setChannel(channel);
+      import_preview_api2.addons.setChannel(channel);
+      this._channel = channel;
+      this._preview.channel = channel;
+      this._preview.setupListeners();
+      channel.emit(import_core_events2.default.CHANNEL_CREATED);
+      this._preview.initializeWithStoryIndex(this._storyIndex);
+    }
     import_manager_api2.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -2143,10 +2203,10 @@ var render = (args, context) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
 };
 function start() {
-  const channel = new import_channels.Channel({ async: true });
+  const channel = new import_channels2.Channel({ async: true });
   import_manager_api3.addons.setChannel(channel);
-  channel.emit(import_core_events2.default.CHANNEL_CREATED);
-  const clientApi2 = import_global.global?.__STORYBOOK_CLIENT_API__ || new import_preview_api.ClientApi();
+  channel.emit(import_core_events3.default.CHANNEL_CREATED);
+  const clientApi2 = import_global.global?.__STORYBOOK_CLIENT_API__ || new import_preview_api3.ClientApi();
   const previewView = {
     prepareForStory: () => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
@@ -2188,7 +2248,7 @@ function start() {
     import_global.global.__STORYBOOK_PREVIEW__ = preview;
     import_global.global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  (0, import_preview_api.setGlobalRender)(render);
+  (0, import_preview_api3.setGlobalRender)(render);
   let initialized = false;
   function onStoriesChanged() {
     const storyIndex = clientApi2.getStoryIndex();
@@ -2198,7 +2258,7 @@ function start() {
   const view2 = new View10(preview, channel);
   return {
     view: view2,
-    forceReRender: () => channel.emit(import_core_events2.default.FORCE_RE_RENDER),
+    forceReRender: () => channel.emit(import_core_events3.default.FORCE_RE_RENDER),
     clientApi: clientApi2,
     preview,
     // This gets called each time the user calls configure (i.e. once per HMR)

package/dist/{View-acca1d49.d.ts → View-7a09870e.d.ts}

@@ -122,6 +122,7 @@ declare class View {
         storySpecifier: string;
         viewMode: string;
     }>;
+    _getServerChannel: (params?: Partial<Params>) => Channel;
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
 }
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { V as View } from './View-acca1d49.js';
-export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, R as ReactNativeFramework, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-acca1d49.js';
+import { V as View } from './View-7a09870e.js';
+export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, R as ReactNativeFramework, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-7a09870e.js';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import { N as NormalizedStoriesSpecifier } from './index.d-82fc9196.js';
 export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-82fc9196.js';

package/dist/index.js

@@ -67,14 +67,15 @@ var import_react_native_theming13 = require("@storybook/react-native-theming");
 
 // src/Start.tsx
 var import_csf2 = require("@storybook/csf");
-var import_preview_api = require("@storybook/preview-api");
+var import_preview_api3 = require("@storybook/preview-api");
 var import_manager_api3 = require("@storybook/manager-api");
 var import_preview_web = require("@storybook/preview-api/dist/preview-web");
-var import_channels = require("@storybook/channels");
+var import_channels2 = require("@storybook/channels");
 
 // src/View.tsx
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
@@ -981,6 +982,7 @@ var findFirstChildStory = (story) => {
 };
 
 // src/components/StoryListView/StoryListView.tsx
+var import_preview_api = require("@storybook/preview-api");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
   fontSize: theme3.storyList.fontSize,
@@ -1195,7 +1197,8 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    global.__STORYBOOK_ADDONS_CHANNEL__.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+    const channel = import_preview_api.addons.getChannel();
+    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
   const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
@@ -1940,8 +1943,57 @@ var OnDeviceUI = ({
 var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 
 // src/View.tsx
+var import_channels = require("@storybook/channels");
+var import_core_events2 = __toESM(require("@storybook/core-events"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
+
+// src/rn-host-detect.js
+function getByRemoteConfig(hostname) {
+  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
+  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return { hostname, passed: false };
+  }
+  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+  if (constants) {
+    var serverHost = constants.ServerHost || hostname;
+    return { hostname: serverHost.split(":")[0], passed: true };
+  }
+  return { hostname, passed: false };
+}
+function getConstants(config) {
+  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
+}
+function getByRNRequirePolyfill(hostname) {
+  var NativeModules;
+  var PlatformConstants;
+  var AndroidConstants;
+  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
+  // TODO: Get NativeModules for RN >= 0.56
+  window.require.name === "metroRequire") {
+    return hostname;
+  }
+  NativeModules = window.require("NativeModules");
+  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
+    return hostname;
+  }
+  PlatformConstants = NativeModules.PlatformConstants;
+  AndroidConstants = NativeModules.AndroidConstants;
+  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+  return serverHost.split(":")[0];
+}
+function getHost(hostname) {
+  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return hostname;
+  }
+  var result = getByRemoteConfig(hostname);
+  if (result.passed) {
+    return result.hostname;
+  }
+  return getByRNRequirePolyfill(hostname);
+}
+
+// src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
@@ -1989,25 +2041,33 @@ var View10 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
-  // _getServerChannel = (params: Partial<Params> = {}) => {
-  //   const host = getHost(params.host || 'localhost');
-  //   const port = `:${params.port || 7007}`;
-  //   const query = params.query || '';
-  //   const websocketType = params.secured ? 'wss' : 'ws';
-  //   const url = `${websocketType}://${host}${port}/${query}`;
-  //   return createWebSocketChannel({
-  //     url,
-  //     async: true,
-  //     onError: async () => {},
-  //   });
-  // };
+  _getServerChannel = (params = {}) => {
+    const host = getHost(params.host || "localhost");
+    const port = `:${params.port || 7007}`;
+    const query = params.query || "";
+    const websocketType = params.secured ? "wss" : "ws";
+    const url = `${websocketType}://${host}${port}/${query}`;
+    return (0, import_channels.createWebSocketChannel)({
+      url,
+      async: true,
+      onError: async () => {
+      }
+    });
+  };
   getStorybookUI = (params = {}) => {
-    const {
-      shouldPersistSelection = true,
-      onDeviceUI = true
-      /* enableWebsockets = false  */
-    } = params;
+    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
     const initialStory = this._getInitialStory(params);
+    if (enableWebsockets) {
+      console.log("websockets enabled");
+      const channel = this._getServerChannel(params);
+      import_manager_api2.addons.setChannel(channel);
+      import_preview_api2.addons.setChannel(channel);
+      this._channel = channel;
+      this._preview.channel = channel;
+      this._preview.setupListeners();
+      channel.emit(import_core_events2.default.CHANNEL_CREATED);
+      this._preview.initializeWithStoryIndex(this._storyIndex);
+    }
     import_manager_api2.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -2076,7 +2136,7 @@ function prepareStories({
   };
   let importMap = {};
   const makeTitle = (fileName, userTitle) => {
-    const title = (0, import_preview_api.userOrAutoTitle)(fileName, storyEntries, userTitle);
+    const title = (0, import_preview_api3.userOrAutoTitle)(fileName, storyEntries, userTitle);
     if (title) {
       return title.replace("./", "");
     } else {
@@ -2136,9 +2196,9 @@ function start({
   storyEntries
 }) {
   const { index, importMap } = prepareStories({ storyEntries });
-  const channel = (0, import_channels.createBrowserChannel)({ page: "preview" });
+  const channel = (0, import_channels2.createBrowserChannel)({ page: "preview" });
   import_manager_api3.addons.setChannel(channel);
-  import_preview_api.addons.setChannel(channel);
+  import_preview_api3.addons.setChannel(channel);
   const previewView = {
     prepareForStory: () => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
@@ -2179,7 +2239,7 @@ function start({
     global.__STORYBOOK_PREVIEW__ = preview;
     global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  const getProjectAnnotations = async () => (0, import_preview_api.composeConfigs)([
+  const getProjectAnnotations = async () => (0, import_preview_api3.composeConfigs)([
     {
       renderToCanvas: (context) => {
         view._setStory(context.storyContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.7-alpha.1",
+  "version": "7.6.8-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,20 +51,20 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channel-websocket": "7.6.7",
-    "@storybook/channels": "7.6.7",
-    "@storybook/client-logger": "7.6.7",
-    "@storybook/core-client": "7.6.7",
-    "@storybook/core-common": "7.6.7",
-    "@storybook/core-events": "7.6.7",
+    "@storybook/channel-websocket": "7.6.8",
+    "@storybook/channels": "7.6.8",
+    "@storybook/client-logger": "7.6.8",
+    "@storybook/core-client": "7.6.8",
+    "@storybook/core-common": "7.6.8",
+    "@storybook/core-events": "7.6.8",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "7.6.7",
+    "@storybook/docs-tools": "7.6.8",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.6.7",
-    "@storybook/preview-api": "7.6.7",
-    "@storybook/preview-web": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-native-theming": "^7.6.7-alpha.1",
+    "@storybook/manager-api": "7.6.8",
+    "@storybook/preview-api": "7.6.8",
+    "@storybook/preview-web": "7.6.8",
+    "@storybook/react": "7.6.8",
+    "@storybook/react-native-theming": "^7.6.8-alpha.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
@@ -74,7 +74,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "7.6.7",
+    "@storybook/types": "7.6.8",
     "@types/jest": "^29.4.3",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c3d96087dec39160d6998b80b5d6c6d9654a4e68"
+  "gitHead": "1fd96da743fbaf0da60d5b1080892c877044d374"
 }

package/scripts/__snapshots__/generate.test.js.snap

@@ -24,7 +24,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "
@@ -54,7 +54,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "
@@ -84,7 +84,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "
@@ -114,7 +114,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "