HTML: Introduce setProjectAnnotations API

code/renderers/html/src/index.ts

@@ -2,6 +2,7 @@
 import './globals';
 
 export * from './public-types';
+export * from './portable-stories';
 
 // optimization: stop HMR propagation in webpack
 

code/renderers/html/src/portable-stories.ts

@@ -0,0 +1,41 @@
+import {
+  setProjectAnnotations as originalSetProjectAnnotations,
+  setDefaultProjectAnnotations,
+} from 'storybook/internal/preview-api';
+import type {
+  NamedOrDefaultProjectAnnotations,
+  NormalizedProjectAnnotations,
+} from 'storybook/internal/types';
+
+import * as INTERNAL_DEFAULT_PROJECT_ANNOTATIONS from './entry-preview';
+import type { HtmlRenderer } from './types';
+
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/preact';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(
+  projectAnnotations:
+    | NamedOrDefaultProjectAnnotations<any>
+    | NamedOrDefaultProjectAnnotations<any>[]
+): NormalizedProjectAnnotations<HtmlRenderer> {
+  setDefaultProjectAnnotations(INTERNAL_DEFAULT_PROJECT_ANNOTATIONS);
+  return originalSetProjectAnnotations(
+    projectAnnotations
+  ) as NormalizedProjectAnnotations<HtmlRenderer>;
+}