@storybook/react-native 8.0.0-alpha.0 → 8.0.0-alpha.2

package/dist/{index.d-b039fbf0.d.ts → index.d-3fb25d8d.d.ts}

@@ -21,6 +21,90 @@ declare global {
 	}
 }
 
+/**
+@see Simplify
+*/
+interface SimplifyOptions {
+	/**
+	Do the simplification recursively.
+
+	@default false
+	*/
+	deep?: boolean;
+}
+
+// Flatten a type without worrying about the result.
+type Flatten<
+	AnyType,
+	Options extends SimplifyOptions = {},
+> = Options['deep'] extends true
+	? {[KeyType in keyof AnyType]: Simplify<AnyType[KeyType], Options>}
+	: {[KeyType in keyof AnyType]: AnyType[KeyType]};
+
+/**
+Useful to flatten the type output to improve type hints shown in editors. And also to transform an interface into a type to aide with assignability.
+
+@example
+```
+import type {Simplify} from 'type-fest';
+
+type PositionProps = {
+	top: number;
+	left: number;
+};
+
+type SizeProps = {
+	width: number;
+	height: number;
+};
+
+// In your editor, hovering over `Props` will show a flattened object with all the properties.
+type Props = Simplify<PositionProps & SizeProps>;
+```
+
+Sometimes it is desired to pass a value as a function argument that has a different type. At first inspection it may seem assignable, and then you discover it is not because the `value`'s type definition was defined as an interface. In the following example, `fn` requires an argument of type `Record<string, unknown>`. If the value is defined as a literal, then it is assignable. And if the `value` is defined as type using the `Simplify` utility the value is assignable.  But if the `value` is defined as an interface, it is not assignable because the interface is not sealed and elsewhere a non-string property could be added to the interface.
+
+If the type definition must be an interface (perhaps it was defined in a third-party npm package), then the `value` can be defined as `const value: Simplify<SomeInterface> = ...`. Then `value` will be assignable to the `fn` argument.  Or the `value` can be cast as `Simplify<SomeInterface>` if you can't re-declare the `value`.
+
+@example
+```
+import type {Simplify} from 'type-fest';
+
+interface SomeInterface {
+	foo: number;
+	bar?: string;
+	baz: number | undefined;
+}
+
+type SomeType = {
+	foo: number;
+	bar?: string;
+	baz: number | undefined;
+};
+
+const literal = {foo: 123, bar: 'hello', baz: 456};
+const someType: SomeType = literal;
+const someInterface: SomeInterface = literal;
+
+function fn(object: Record<string, unknown>): void {}
+
+fn(literal); // Good: literal object type is sealed
+fn(someType); // Good: type is sealed
+fn(someInterface); // Error: Index signature for type 'string' is missing in type 'someInterface'. Because `interface` can be re-opened
+fn(someInterface as Simplify<SomeInterface>); // Good: transform an `interface` into a `type`
+```
+
+@link https://github.com/microsoft/TypeScript/issues/15300
+
+@category Object
+*/
+type Simplify<
+	AnyType,
+	Options extends SimplifyOptions = {},
+> = Flatten<AnyType> extends AnyType
+	? Flatten<AnyType, Options>
+	: AnyType;
+
 /**
 Allows creating a union type by combining primitive types and literal types without sacrificing auto-completion in IDEs for the literal type part of the union.
 
@@ -799,12 +883,18 @@ interface StrictInputType extends InputType {
 interface Args {
     [name: string]: any;
 }
+type ArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: InputType;
+};
 type StrictArgTypes<TArgs = Args> = {
     [name in keyof TArgs]: StrictInputType;
 };
 interface Globals {
     [name: string]: any;
 }
+interface GlobalTypes {
+    [name: string]: InputType;
+}
 type Renderer = {
     /** What is the type of the `component` annotation in this renderer? */
     component: unknown;
@@ -825,6 +915,10 @@ interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs
     initialArgs: TArgs;
     argTypes: StrictArgTypes<TArgs>;
 }
+type ArgsEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForEnhancers<TRenderer, TArgs>) => TArgs;
+type ArgTypesEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = ((context: StoryContextForEnhancers<TRenderer, TArgs>) => StrictArgTypes<TArgs>) & {
+    secondPass?: boolean;
+};
 interface StoryContextUpdate<TArgs = Args> {
     args?: TArgs;
     globals?: Globals;
@@ -836,16 +930,68 @@ interface StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs =
     viewMode: ViewMode$1;
     originalStoryFn: StoryFn<TRenderer>;
 }
+type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any> | void> | Record<string, any> | void;
 interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForLoaders<TRenderer, TArgs> {
     loaded: Record<string, any>;
     abortSignal: AbortSignal;
     canvasElement: TRenderer['canvasElement'];
 }
+type StepLabel = string;
+type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
+type PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContext<TRenderer, TArgs> & {
+    step: StepFunction<TRenderer, TArgs>;
+};
+type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
+type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
 type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
 type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
     T: TArgs;
 })['storyResult'];
 type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
+type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+type DecoratorApplicator<TRenderer extends Renderer = Renderer, TArgs = Args> = (storyFn: LegacyStoryFn<TRenderer, TArgs>, decorators: DecoratorFunction<TRenderer, TArgs>[]) => LegacyStoryFn<TRenderer, TArgs>;
+type StepRunner<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>, context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void>;
+type BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = {
+    /**
+     * Wrapper components or Storybook decorators that wrap a story.
+     *
+     * Decorators defined in Meta will be applied to every story variation.
+     * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
+     */
+    decorators?: DecoratorFunction<TRenderer, Simplify<TArgs>>[] | DecoratorFunction<TRenderer, Simplify<TArgs>>;
+    /**
+     * Custom metadata for a story.
+     * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters)
+     */
+    parameters?: Parameters;
+    /**
+     * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
+     * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
+     */
+    args?: Partial<TArgs>;
+    /**
+     * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
+     * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
+     */
+    argTypes?: Partial<ArgTypes<TArgs>>;
+    /**
+     * Asynchronous functions which provide data for a story.
+     * @see [Loaders](https://storybook.js.org/docs/react/writing-stories/loaders)
+     */
+    loaders?: LoaderFunction<TRenderer, TArgs>[] | LoaderFunction<TRenderer, TArgs>;
+    /**
+     * Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used.
+     */
+    render?: ArgsStoryFn<TRenderer, TArgs>;
+};
+type ProjectAnnotations$1<TRenderer extends Renderer = Renderer, TArgs = Args> = BaseAnnotations<TRenderer, TArgs> & {
+    argsEnhancers?: ArgsEnhancer<TRenderer, Args>[];
+    argTypesEnhancers?: ArgTypesEnhancer<TRenderer, Args>[];
+    globals?: Globals;
+    globalTypes?: GlobalTypes;
+    applyDecorators?: DecoratorApplicator<TRenderer, Args>;
+    runStep?: StepRunner<TRenderer, TArgs>;
+};
 
 interface Options$1 {
     allowRegExp: boolean;
@@ -1079,6 +1225,7 @@ interface CLIOptions {
     test?: boolean;
     debugWebpack?: boolean;
     webpackStatsJson?: string | boolean;
+    statsJson?: string | boolean;
     outputDir?: string;
 }
 interface BuilderOptions {
@@ -1210,10 +1357,6 @@ interface StorybookConfigRaw {
          * Filter args with a "target" on the type from the render function (EXPERIMENTAL)
          */
         argTypeTargetsV7?: boolean;
-        /**
-         * Use legacy MDX1, to help smooth migration to 7.0
-         */
-        legacyMdx1?: boolean;
         /**
          * Apply decorators from preview.js before decorators from addons or frameworks
          */
@@ -1344,6 +1487,13 @@ interface StorybookConfig {
 type PresetValue<T> = T | ((config: T, options: Options) => T | Promise<T>);
 type Path = string;
 type ModuleExport = any;
+type MaybePromise<T> = Promise<T> | T;
+type TeardownRenderToCanvas = () => MaybePromise<void>;
+type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
+type ProjectAnnotations<TRenderer extends Renderer> = ProjectAnnotations$1<TRenderer> & {
+    renderToCanvas?: RenderToCanvas<TRenderer>;
+    renderToDOM?: RenderToCanvas<TRenderer>;
+};
 type PreparedStory<TRenderer extends Renderer = Renderer> = StoryContextForEnhancers<TRenderer> & {
     moduleExport: ModuleExport;
     originalStoryFn: StoryFn<TRenderer>;
@@ -1354,5 +1504,17 @@ type PreparedStory<TRenderer extends Renderer = Renderer> = StoryContextForEnhan
     }>;
     playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
 };
+declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
+    showMain: () => void;
+    showError: (error: {
+        title: string;
+        description: string;
+    }) => void;
+    showException: (err: Error) => void;
+    forceRemount: boolean;
+    storyContext: StoryContext<TRenderer>;
+    storyFn: PartialStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
+};
 
-export { Args as A, NormalizedStoriesSpecifier as N, PreparedStory as P, Renderer as R, StoryIndex as S, StorybookConfig as a, StoryContextForEnhancers as b, StrictArgTypes as c };
+export { Args as A, NormalizedStoriesSpecifier as N, PreparedStory as P, Renderer as R, StoryIndex as S, ProjectAnnotations as a, StorybookConfig as b, StoryContextForEnhancers as c, StrictArgTypes as d };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { S as StoryIndex, P as PreparedStory, N as NormalizedStoriesSpecifier, a as StorybookConfig$1 } from './index.d-b039fbf0.js';
+import { S as StoryIndex, P as PreparedStory, N as NormalizedStoriesSpecifier, a as ProjectAnnotations, b as StorybookConfig$1 } from './index.d-3fb25d8d.js';
 import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -66,6 +66,18 @@ declare class View {
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
 }
 
+declare function prepareStories({ storyEntries, }: {
+    storyEntries: Array<NormalizedStoriesSpecifier & {
+        req: any;
+    }>;
+}): {
+    index: {
+        v: number;
+        entries: {};
+    };
+    importMap: {};
+};
+declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<ProjectAnnotations<ReactRenderer>>;
 declare function start({ annotations, storyEntries, }: {
     storyEntries: Array<NormalizedStoriesSpecifier & {
         req: any;
@@ -78,4 +90,4 @@ interface StorybookConfig {
     addons: string[];
 }
 
-export { StorybookConfig, start };
+export { StorybookConfig, getProjectAnnotations, prepareStories, start };

package/dist/index.js

@@ -59,6 +59,8 @@ var require_dist = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   darkTheme: () => import_react_native_theming13.darkTheme,
+  getProjectAnnotations: () => getProjectAnnotations,
+  prepareStories: () => prepareStories,
   start: () => start,
   theme: () => import_react_native_theming13.theme
 });
@@ -1248,12 +1250,26 @@ var ErrorBoundary = class extends import_react4.default.Component {
   static getDerivedStateFromError(_error) {
     return { hasError: true };
   }
-  componentDidCatch(error, errorInfo) {
-    console.warn(error, errorInfo);
+  componentDidCatch(error, info) {
+    this.props.onError(error, info.componentStack);
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Something went wrong rendering your story" });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.View,
+        {
+          style: {
+            margin: 16,
+            padding: 16,
+            borderColor: "red",
+            borderWidth: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 4
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: { fontWeight: "bold" }, children: "Something went wrong rendering your story" })
+        }
+      );
     }
     return this.props.children;
   }
@@ -1277,7 +1293,15 @@ var StoryView = () => {
         style: { flex: 1, backgroundColor },
         testID: id,
         onStartShouldSetResponder: dismissOnStartResponder,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorBoundary, { children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ErrorBoundary,
+          {
+            onError: () => {
+              console.log(`Error rendering story for ${context.title} ${context.name}`);
+            },
+            children: StoryComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StoryComponent, { ...context })
+          }
+        )
       },
       id
     );
@@ -1995,7 +2019,7 @@ function getHost(hostname) {
 // src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
-var View10 = class {
+var View11 = class {
   _storyIndex;
   _setStory = () => {
   };
@@ -2065,7 +2089,6 @@ var View10 = class {
         this._idToPrepared[storyId] = await this._preview.loadStory({ storyId });
       })
     );
-    console.log("Storybook: Finished building story index");
   };
   getStorybookUI = (params = {}) => {
     const {
@@ -2241,6 +2264,23 @@ function prepareStories({
   });
   return { index, importMap };
 }
+var getProjectAnnotations = (view, annotations) => async () => (0, import_preview_api3.composeConfigs)([
+  {
+    renderToCanvas: (context) => {
+      view._setStory(context.storyContext);
+    },
+    render: (args, context) => {
+      const { id, component: Component } = context;
+      if (!Component) {
+        throw new Error(
+          `Unable to render story ${id} as the component annotation is missing from the default export`
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
+    }
+  },
+  ...annotations
+]);
 function start({
   annotations,
   storyEntries
@@ -2272,6 +2312,7 @@ function start({
     },
     showStoryDuringRender: () => {
     }
+    // TODO what happened to this type?
   };
   const selectionStore = {
     selection: null,
@@ -2282,7 +2323,7 @@ function start({
       preview.selectionStore.selection = selection;
     }
   };
-  const getProjectAnnotations = async () => (0, import_preview_api3.composeConfigs)([
+  const getProjectAnnotationsInitial = async () => (0, import_preview_api3.composeConfigs)([
     {
       renderToCanvas: (context) => {
         view._setStory(context.storyContext);
@@ -2301,11 +2342,11 @@ function start({
   ]);
   const preview = new import_preview_api3.PreviewWithSelection(
     async (importPath) => importMap[importPath],
-    getProjectAnnotations,
+    getProjectAnnotationsInitial,
     selectionStore,
     previewView
   );
-  const view = new View10(preview, channel);
+  const view = new View11(preview, channel);
   if (global) {
     global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
     global.__STORYBOOK_PREVIEW__ = preview;
@@ -2317,6 +2358,8 @@ function start({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   darkTheme,
+  getProjectAnnotations,
+  prepareStories,
   start,
   theme
 });

package/dist/preview.d.ts

@@ -1,5 +1,5 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, b as StoryContextForEnhancers, A as Args, c as StrictArgTypes } from './index.d-b039fbf0.js';
+import { R as Renderer, c as StoryContextForEnhancers, A as Args, d as StrictArgTypes } from './index.d-3fb25d8d.js';
 import 'file-system-cache';
 import 'http';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -34,7 +34,8 @@
   "scripts": {
     "dev": "ts-node ./buildscripts/gentsdev.ts && tsup --watch",
     "prepare": "rm -rf dist/ && tsup",
-    "test": "jest"
+    "test": "jest",
+    "test:ci": "jest"
   },
   "jest": {
     "modulePathIgnorePatterns": [
@@ -51,17 +52,17 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channels": "8.0.0-alpha.15",
-    "@storybook/client-logger": "8.0.0-alpha.15",
-    "@storybook/core-common": "8.0.0-alpha.15",
-    "@storybook/core-events": "8.0.0-alpha.15",
+    "@storybook/channels": "8.0.0-rc.1",
+    "@storybook/client-logger": "8.0.0-rc.1",
+    "@storybook/core-common": "8.0.0-rc.1",
+    "@storybook/core-events": "8.0.0-rc.1",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "8.0.0-alpha.15",
+    "@storybook/docs-tools": "8.0.0-rc.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "8.0.0-alpha.15",
-    "@storybook/preview-api": "8.0.0-alpha.15",
-    "@storybook/react": "8.0.0-alpha.15",
-    "@storybook/react-native-theming": "^8.0.0-alpha.0",
+    "@storybook/manager-api": "8.0.0-rc.1",
+    "@storybook/preview-api": "8.0.0-rc.1",
+    "@storybook/react": "8.0.0-rc.1",
+    "@storybook/react-native-theming": "^8.0.0-alpha.2",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -73,11 +74,11 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "8.0.0-alpha.15",
+    "@storybook/types": "8.0.0-rc.1",
     "@types/jest": "^29.4.3",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
-    "jest": "^29.4.3",
+    "jest": "^29.7.0",
     "jotai": "^2.6.2",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",
@@ -95,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "14ffe40751c45e03046117bec794fb4e34c56418"
+  "gitHead": "6f189532af5cbfbdd4bc968faab66721407c84ca"
 }

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

@@ -3,8 +3,8 @@
 exports[`loader writeRequires when there are different file extensions writes the story imports 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
-
-  import { start } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -18,23 +18,48 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a configuration object writes the story imports 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
-
-  import { start } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -48,23 +73,48 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a story glob writes the story imports 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
-
-  import { start } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -78,23 +128,48 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
-
-  import { start } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -108,14 +183,39 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 "
 `;

package/scripts/generate.js

@@ -59,25 +59,52 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`;
 
+  const globalTypes = `
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  `;
+
   const fileContent = `
   /* do not change this file, it is auto generated by storybook. */
-
-  import { start } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   ${registerAddons}
 
-  const normalizedStories = [${normalizedStories.join(',')}]
+  const normalizedStories = [${normalizedStories.join(',')}];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  ${useJs ? '' : globalTypes}
 
-  export const view = start({
-    annotations: ${annotations},
-    storyEntries: normalizedStories
-  });
+  const annotations = ${annotations};
+
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 `;
 
-  const formattedFileContent = prettier.format(fileContent, { parser: 'babel' });
+  const formattedFileContent = prettier.format(fileContent, { parser: 'babel-ts' });
 
   fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
     encoding: 'utf8',
@@ -88,16 +115,3 @@ function generate({ configPath, absolute = false, useJs = false }) {
 module.exports = {
   generate,
 };
-
-// TODO evaluate if this is needed
-// if (import.meta.webpackHot) {
-//   import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
-//     // importFn has changed so we need to patch the new one in
-//     preview.onStoriesChanged({ importFn });
-//   });
-
-//   import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
-//     // getProjectAnnotations has changed so we need to patch the new one in
-//     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-//   });
-// }

package/scripts/handle-args.js

@@ -9,12 +9,7 @@ function getArguments() {
       './.storybook'
     )
     .option('-js, --use-js', 'Use a js file for storybook.requires')
-    .option('-a, --absolute', 'Use absolute paths for story imports')
-    .option('-v6, --v6-store', 'Use v6 store, for storiesof compatibility')
-    .option(
-      '-rc, --v6-require-context',
-      'When using v6 store should use require.context to load stories'
-    );
+    .option('-a, --absolute', 'Use absolute paths for story imports');
 
   program.parse();
 

package/scripts/watcher.js

@@ -6,6 +6,15 @@ const { writeRequires, getMain, getFilePathExtension } = require('./loader');
 const { getArguments } = require('./handle-args');
 
 const args = getArguments();
+
+if (!args.v6Store) {
+  console.log(
+    "in v7 you don't need the watcher anymore, if you are using v6 compat mode then pass the -v6 flag"
+  );
+
+  process.exit(0);
+}
+
 const log = console.log.bind(console);
 
 const mainExt = getFilePathExtension(args, 'main');
@@ -17,6 +26,8 @@ if (previewExt) {
   watchPaths.push(`./preview.${previewExt}`);
 }
 
+console.log(watchPaths);
+
 const updateRequires = (event, watchPath) => {
   if (typeof watchPath === 'string') {
     log(`event ${event} for file ${path.basename(watchPath)}`);
@@ -25,6 +36,14 @@ const updateRequires = (event, watchPath) => {
 };
 
 const globs = getMain(args).stories;
+// directory
+// files
+const globsStrings = globs.map((g) => {
+  if (typeof g === 'string') return g;
+  if (g.directory && g.files) {
+    return `${g.directory}/${g.files}`;
+  }
+});
 
 chokidar
   .watch(watchPaths, { cwd: args.configPath })
@@ -33,7 +52,7 @@ chokidar
 let isReady = false;
 
 chokidar
-  .watch(globs, { cwd: args.configPath })
+  .watch(globsStrings, { cwd: args.configPath })
   .on('ready', () => {
     log('Watcher is ready, performing initial write');
     writeRequires(args);