@andersundsehr/storybook-typo3 0.1.0 → 0.1.2

package/dist/entry-preview-docs.d.ts

@@ -0,0 +1,17 @@
+import { SourceType } from 'storybook/internal/docs-tools';
+import { type FluidRenderer } from '@andersundsehr/storybook-typo3';
+import { DecoratorFunction } from 'storybook/internal/types';
+export declare const tags: string[];
+export declare const decorators: DecoratorFunction<FluidRenderer>[];
+export declare const parameters: {
+    docs: {
+        story: {
+            inline: boolean;
+        };
+        codePanel: boolean;
+        source: {
+            type: SourceType;
+        };
+        toc: boolean;
+    };
+};

package/dist/entry-preview-docs.js

@@ -0,0 +1,29 @@
+import { SNIPPET_RENDERED, SourceType } from 'storybook/internal/docs-tools';
+import { addons, useEffect } from 'storybook/preview-api';
+import { convertComponentToSource } from './functions/convertComponentToSource';
+import { error } from './functions/error';
+const sourceDecorator = (storyFn, storyContext) => {
+    useEffect(() => {
+        const { id, args, component } = storyContext;
+        if (!component) {
+            error('No component found in story context. This decorator requires a Fluid component to render.', 4123764578913);
+        }
+        const source = convertComponentToSource(component, args);
+        addons.getChannel().emit(SNIPPET_RENDERED, { id, args, source });
+    });
+    return storyFn();
+};
+export const tags = ['autodocs'];
+export const decorators = [sourceDecorator];
+export const parameters = {
+    docs: {
+        story: {
+            inline: true,
+        },
+        codePanel: true,
+        source: {
+            type: SourceType.DYNAMIC,
+        },
+        toc: true,
+    },
+};

package/dist/entry-preview.d.ts

@@ -0,0 +1,10 @@
+import { fetchRenderAction } from '@andersundsehr/storybook-typo3';
+import type { ArgTypesEnhancer, GlobalTypes } from 'storybook/internal/types';
+export declare const globalTypes: GlobalTypes;
+export declare const initialGlobals: Record<string, string>;
+export declare const parameters: {
+    server: {
+        fetchStoryHtml: typeof fetchRenderAction;
+    };
+};
+export declare const argTypesEnhancers: ArgTypesEnhancer[];

package/dist/entry-preview.js

@@ -0,0 +1,14 @@
+import { fetchPreviewConfig, fetchRenderAction } from '@andersundsehr/storybook-typo3';
+import { initGlobalsHandling } from './functions/fetchPreviewConfig';
+const previewConfig = await fetchPreviewConfig();
+initGlobalsHandling(previewConfig.globalTypes);
+export const globalTypes = previewConfig.globalTypes;
+export const initialGlobals = previewConfig.initialGlobals;
+export const parameters = {
+    server: {
+        // url: url + '/_storybook/',
+        fetchStoryHtml: fetchRenderAction,
+    },
+};
+const enhanceArgTypes = storyContext => storyContext.component?.argTypes || {};
+export const argTypesEnhancers = [enhanceArgTypes];

package/dist/functions/convertComponentToSource.d.ts

@@ -0,0 +1,3 @@
+import type { FluidComponent } from '../types/types';
+import type { StrictArgs } from 'storybook/internal/csf';
+export declare function convertComponentToSource(component: FluidComponent, args: StrictArgs): string;

package/dist/functions/convertComponentToSource.js

@@ -0,0 +1,118 @@
+function convertValueToString(key, argType, value, inline) {
+    const createValue = () => {
+        if ('variableName' in value) {
+            if (inline) {
+                return value.variableName; // For inline code, just return the variable name
+            }
+            return '{' + value.variableName + '}'; // For attributes, return the variable name wrapped in curly braces
+        }
+        const valueAsString = String(value.value);
+        if (typeof value.value === 'boolean') {
+            if (inline) {
+                return valueAsString;
+            }
+            return '{' + valueAsString + '}';
+        }
+        if (typeof value.value === 'number') {
+            if (argType?.type?.name === 'int') {
+                return String(Number.parseInt(valueAsString, 10)); // Convert to integer
+            }
+            return String(Number.parseFloat(valueAsString)); // Convert to float
+        }
+        if (inline) {
+            return '\'' + valueAsString.replace(/'/g, '\\\'') + '\''; // Escape single quotes for inline code
+        }
+        return valueAsString.replace(/"/g, '\\"'); // Escape double quotes for attributes
+    };
+    if (inline) {
+        return key + ': ' + createValue();
+    }
+    return key + '="' + createValue() + '"';
+}
+function inlineCode(viewHelperArguments, component, defaultSlotContent) {
+    const argsStrings = Object.entries(viewHelperArguments)
+        .map(([argumentName, argumentValue]) => convertValueToString(argumentName, component.argTypes[argumentName], argumentValue, true));
+    const argsString = argsStrings.join(', ');
+    let source = '{';
+    if (defaultSlotContent) {
+        defaultSlotContent = defaultSlotContent.replace(/'/g, '\\\''); // Escape single quotes for inline code
+        source += `'${defaultSlotContent}' -> `;
+    }
+    source += `${component.fullName}(`;
+    if ((source.length + argsString.length) > 80) {
+        source += `\n  ${argsStrings.join(',\n  ')}\n`;
+    }
+    else {
+        source += argsString;
+    }
+    source += ')}';
+    return source;
+}
+function generateOpenTag(viewHelperArguments, component) {
+    const argStrings = Object.entries(viewHelperArguments)
+        .map(([argumentName, argumentValue]) => convertValueToString(argumentName, component.argTypes[argumentName], argumentValue, false));
+    let argsString = argStrings.join(' ');
+    let openTag = `<${component.fullName}`;
+    if (argsString.length > 0) {
+        openTag += ' ' + argsString;
+    }
+    if (openTag.length > 80) {
+        argsString = argStrings.join('\n  ');
+        openTag = `<${component.fullName} \n  ${argsString}\n`;
+    }
+    return openTag;
+}
+const SLOT_PREFIX = 'slot____';
+function createComponentData(component, args) {
+    const viewHelperArguments = {};
+    const slots = {};
+    for (const [key, value] of Object.entries(args)) {
+        if (key.startsWith(SLOT_PREFIX)) {
+            // This is a slot
+            const slotName = key.replace(SLOT_PREFIX, '');
+            if (value === null || value === undefined || value === '') {
+                continue;
+            }
+            slots[slotName] = value;
+            continue;
+        }
+        if (!key.includes('__')) {
+            // This is a normal argument without virtual subkey
+            viewHelperArguments[key] = { value };
+            continue;
+        }
+        // This is a virtual argument
+        const [variableName] = key.split('__');
+        viewHelperArguments[variableName] = { variableName };
+    }
+    return { viewHelperArguments, slots };
+}
+export function convertComponentToSource(component, args) {
+    const { viewHelperArguments, slots } = createComponentData(component, args);
+    let source = '';
+    source += `<html\n  xmlns:${component.namespace}="http://typo3.org/ns/${component.collection.replace(/\\/g, '/')}"\n  data-namespace-typo3-fluid="true"\n>\n\n`;
+    const usedArgs = [...new Set(Object.keys(args).filter(key => !key.startsWith(SLOT_PREFIX)).map(key => key.split('__')[0]))];
+    source += generateOpenTag(viewHelperArguments, component);
+    if (Object.keys(slots).length <= 0) {
+        source += `/>\n`;
+        source += `\n<!-- or -->\n\n`;
+        source += `{namespace ${component.namespace}=${component.collection}}\n\n`;
+        source += inlineCode(viewHelperArguments, component);
+        return source;
+    }
+    source += '>\n';
+    if (Object.keys(slots).length === 1 && slots.default) {
+        // If there is only a default slot, we can use the inline code
+        source += `  ${slots.default}\n`;
+        source += '</' + component.fullName + '>\n';
+        source += `\n<!-- or -->\n\n`;
+        source += `{namespace ${component.namespace}=${component.collection}}\n\n`;
+        source += inlineCode(viewHelperArguments, component, slots.default);
+        return source;
+    }
+    for (const [slotName, slotValue] of Object.entries(slots)) {
+        source += `  <f:fragment name="${slotName}">${slotValue}</f:fragment>\n`;
+    }
+    source += '</' + component.fullName + '>';
+    return source;
+}

package/dist/functions/convertComponentToSource.test.d.ts

@@ -0,0 +1 @@
+export {};

package/{src/functions/convertComponentToSource.test.ts → dist/functions/convertComponentToSource.test.js}

@@ -1,17 +1,12 @@
-import test from 'node:test';
-import { convertComponentToSource } from './convertComponentToSource.ts';
-import type { FluidComponent } from '../types/types.ts';
-import type { StrictArgs } from 'storybook/internal/csf';
-
-interface TestCase { component: FluidComponent; args: StrictArgs; expected: string }
-
+import { test } from 'node:test';
+import { convertComponentToSource } from './convertComponentToSource';
 const component = { name: 'test', fullName: 'c:test', argTypes: {}, collection: 'Class', namespace: 'c' };
-const testCases: Record<string, TestCase> = {
-  ///////////////////////////////////////////
-  withoutAnyProperties: {
-    component,
-    args: {},
-    expected: `<html
+const testCases = {
+    ///////////////////////////////////////////
+    withoutAnyProperties: {
+        component,
+        args: {},
+        expected: `<html
   xmlns:c="http://typo3.org/ns/Class"
   data-namespace-typo3-fluid="true"
 >
@@ -23,12 +18,12 @@ const testCases: Record<string, TestCase> = {
 {namespace c=Class}
 
 {c:test()}`,
-  },
-  ///////////////////////////////////////////
-  withSimpleArguments: {
-    component,
-    args: { arg1: 'value1', arg2: 'value2' },
-    expected: `<html
+    },
+    ///////////////////////////////////////////
+    withSimpleArguments: {
+        component,
+        args: { arg1: 'value1', arg2: 'value2' },
+        expected: `<html
   xmlns:c="http://typo3.org/ns/Class"
   data-namespace-typo3-fluid="true"
 >
@@ -40,12 +35,12 @@ const testCases: Record<string, TestCase> = {
 {namespace c=Class}
 
 {c:test(arg1: 'value1', arg2: 'value2')}`,
-  },
-  ///////////////////////////////////////////
-  withSlot: {
-    component,
-    args: { arg1: 'value\'"1', arg2: 'value2', slot____default: 'default \'"slot' },
-    expected: `<html
+    },
+    ///////////////////////////////////////////
+    withSlot: {
+        component,
+        args: { arg1: 'value\'"1', arg2: 'value2', slot____default: 'default \'"slot' },
+        expected: `<html
   xmlns:c="http://typo3.org/ns/Class"
   data-namespace-typo3-fluid="true"
 >
@@ -59,12 +54,12 @@ const testCases: Record<string, TestCase> = {
 {namespace c=Class}
 
 {'default \\'"slot' -> c:test(arg1: 'value\\'"1', arg2: 'value2')}`,
-  },
-  ///////////////////////////////////////////
-  withMultipleSlots: {
-    component,
-    args: { slot____a: 'slotA', slot____b: 'slotB', slot____default: 'slotDefault' },
-    expected: `<html
+    },
+    ///////////////////////////////////////////
+    withMultipleSlots: {
+        component,
+        args: { slot____a: 'slotA', slot____b: 'slotB', slot____default: 'slotDefault' },
+        expected: `<html
   xmlns:c="http://typo3.org/ns/Class"
   data-namespace-typo3-fluid="true"
 >
@@ -74,12 +69,12 @@ const testCases: Record<string, TestCase> = {
   <f:fragment name="b">slotB</f:fragment>
   <f:fragment name="default">slotDefault</f:fragment>
 </c:test>`,
-  },
-  ///////////////////////////////////////////
-  withTransformedArgument: {
-    component,
-    args: { arg1__argA: 'value1', arg1__argB: 'value2' },
-    expected: `<html
+    },
+    ///////////////////////////////////////////
+    withTransformedArgument: {
+        component,
+        args: { arg1__argA: 'value1', arg1__argB: 'value2' },
+        expected: `<html
   xmlns:c="http://typo3.org/ns/Class"
   data-namespace-typo3-fluid="true"
 >
@@ -91,12 +86,12 @@ const testCases: Record<string, TestCase> = {
 {namespace c=Class}
 
 {c:test(arg1: arg1)}`,
-  },
-  ///////////////////////////////////////////
-  longLines: {
-    component,
-    args: { arg1: 'veryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValue', arg2: 'veryLongValueveryLongValueveryLongValueveryLongValueveryLongValue' },
-    expected: `<html
+    },
+    ///////////////////////////////////////////
+    longLines: {
+        component,
+        args: { arg1: 'veryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValue', arg2: 'veryLongValueveryLongValueveryLongValueveryLongValueveryLongValue' },
+        expected: `<html
   xmlns:c="http://typo3.org/ns/Class"
   data-namespace-typo3-fluid="true"
 >
@@ -114,13 +109,12 @@ const testCases: Record<string, TestCase> = {
   arg1: 'veryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValueveryLongValue',
   arg2: 'veryLongValueveryLongValueveryLongValueveryLongValueveryLongValue'
 )}`,
-  },
-  ///////////////////////////////////////////
+    },
+    ///////////////////////////////////////////
 };
-
 for (const [name, { component, args, expected }] of Object.entries(testCases)) {
-  test(`convertComponentToSource - ${name}`, (t) => {
-    const result = convertComponentToSource(component, args);
-    t.assert.strictEqual(result, expected);
-  });
+    test(`convertComponentToSource - ${name}`, (t) => {
+        const result = convertComponentToSource(component, args);
+        t.assert.strictEqual(result, expected);
+    });
 }

package/dist/functions/error.d.ts

@@ -0,0 +1 @@
+export declare function error(message: string, code: number): never;

package/dist/functions/error.js

@@ -0,0 +1,5 @@
+export function error(message, code) {
+    message += ` (code: ${code})`;
+    alert(message);
+    throw new Error(message);
+}

package/dist/functions/fetchComponent.d.ts

@@ -0,0 +1,2 @@
+import { type FluidComponent } from '@andersundsehr/storybook-typo3';
+export declare function fetchComponent(component: string): Promise<FluidComponent>;

package/dist/functions/fetchComponent.js

@@ -0,0 +1,17 @@
+import { url } from '@andersundsehr/storybook-typo3';
+import { fetchWithUserRetry } from './fetchWithUserRetry';
+export async function fetchComponent(component) {
+    if (!component.includes(':')) {
+        const message = 'Component name must be in the format "namespace:name"';
+        alert(message);
+        throw new Error(message);
+    }
+    const data = await fetchWithUserRetry(url + '/_storybook/componentMeta?viewHelper=' + component, {}, 'metadata for component `' + component + '` from TYPO3');
+    return {
+        fullName: component,
+        name: component.split(':')[1],
+        namespace: component.split(':')[0],
+        collection: data.collectionClassName,
+        argTypes: data.argTypes,
+    };
+}

package/dist/functions/fetchPreviewConfig.d.ts

@@ -0,0 +1,8 @@
+import type { GlobalTypes } from 'storybook/internal/types';
+interface PreviewConfig {
+    globalTypes: GlobalTypes;
+    initialGlobals: Record<string, string>;
+}
+export declare function fetchPreviewConfig(currentGlobals?: Record<string, string>): Promise<PreviewConfig>;
+export declare function initGlobalsHandling(initalGlobalTypes: GlobalTypes): void;
+export {};

package/dist/functions/fetchPreviewConfig.js

@@ -0,0 +1,65 @@
+import { url } from '@andersundsehr/storybook-typo3';
+import { fetchWithUserRetry } from './fetchWithUserRetry';
+import { GLOBALS_UPDATED, SET_GLOBALS } from 'storybook/internal/core-events';
+import { addons } from 'storybook/preview-api';
+function getLocation() {
+    let location = window.location;
+    if (window.parent?.location && window.parent !== window) {
+        location = window.parent.location;
+    }
+    return location;
+}
+function getGlobalsFromUrl() {
+    const url = new URL(getLocation().href);
+    const globalsString = url.searchParams.get('globals') || '';
+    const globalsArray = globalsString.split(';').filter(Boolean);
+    const entries = globalsArray.map(global => global.split(':'));
+    return Object.fromEntries(entries);
+}
+function setGlobalsToUrl(globals) {
+    const location = getLocation();
+    const url = new URL(location.href);
+    const globalString = Object.entries(globals).map(([key, value]) => `${key}:${value}`).join(';');
+    url.searchParams.set('globals', globalString);
+    location.href = url.toString();
+}
+export async function fetchPreviewConfig(currentGlobals) {
+    const apiEndpoint = url + '/_storybook/preview';
+    const globals = currentGlobals || getGlobalsFromUrl();
+    return await fetchWithUserRetry(apiEndpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ globals }),
+    }, 'preview config from TYPO3');
+}
+export function initGlobalsHandling(initalGlobalTypes) {
+    const channel = addons.getChannel();
+    let oldGlobalTypes = initalGlobalTypes;
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    channel.on(GLOBALS_UPDATED, async ({ globals }) => {
+        const previewConfig = await fetchPreviewConfig(globals);
+        oldGlobalTypes = previewConfig.globalTypes;
+        const newGlobals = getGlobalsFromUrl();
+        let changed = false;
+        for (const key in previewConfig.globalTypes) {
+            const inputType = previewConfig.globalTypes[key];
+            if (!inputType.toolbar?.items?.some((item) => item.value === globals[key])) {
+                newGlobals[key] = inputType.toolbar?.items?.[0]?.value || '';
+                changed = true;
+            }
+        }
+        if (changed) {
+            // change URL search params and reload page (this is the only way to set the globals, that worked)!!
+            setGlobalsToUrl(newGlobals);
+            return;
+        }
+        if (JSON.stringify(oldGlobalTypes) !== JSON.stringify(previewConfig.globalTypes)) {
+            // this only sets the globalTypes and not the globals :(
+            // see https://github.com/storybookjs/storybook/blob/3ac2fece4c41955e7349f6f825b7d21dd18ff9a9/code/core/src/manager-api/modules/globals.ts#L141-L149
+            channel.emit(SET_GLOBALS, { globals, globalTypes: previewConfig.globalTypes });
+            return;
+        }
+    });
+}

package/dist/functions/fetchRenderAction.d.ts

@@ -0,0 +1,2 @@
+import { type StoryContext } from '@andersundsehr/storybook-typo3';
+export declare function fetchRenderAction(urlA: string, id: string, params: unknown, storyContext: StoryContext): Promise<string>;

package/dist/functions/fetchRenderAction.js

@@ -0,0 +1,20 @@
+import { url } from '@andersundsehr/storybook-typo3';
+import { fetchWithUserRetry } from './fetchWithUserRetry';
+import { error } from './error';
+export async function fetchRenderAction(urlA, id, params, storyContext) {
+    if (!storyContext.component) {
+        error('No component found in story context. This function requires a Fluid component to render.', 4123764578913);
+    }
+    const viewHelper = (typeof storyContext.component === 'string') ? storyContext.component : storyContext.component.fullName;
+    const body = {
+        viewHelper: viewHelper,
+        arguments: params,
+        site: storyContext.globals?.site || 'default',
+        siteLanguage: storyContext.globals?.language || 'default',
+    };
+    return await fetchWithUserRetry(url + '/_storybook/render', {
+        method: 'POST',
+        body: JSON.stringify(body),
+    }, 'rendering component in TYPO3', 'text');
+}
+;

package/dist/functions/fetchWithUserRetry.d.ts

@@ -0,0 +1 @@
+export declare function fetchWithUserRetry<T>(url: string, options: RequestInit, message: string, result?: 'json' | 'text'): Promise<T>;

package/dist/functions/fetchWithUserRetry.js

@@ -0,0 +1,23 @@
+export async function fetchWithUserRetry(url, options, message, result = 'json') {
+    options = { ...options }; // Clone options to avoid mutating the original
+    options.signal = options.signal || AbortSignal.timeout(5000);
+    try {
+        const response = await fetch(url, options);
+        if (result === 'text') {
+            return await response.text();
+        }
+        return await response.json();
+    }
+    catch (error) {
+        console.error('Fetch failed:', { error });
+        const retry = confirm('Error while fetching ' + message + '. \n\n'
+            + 'fetch: ' + url + '\n'
+            + 'ERROR: ' + String(error) + '\n\n'
+            + 'look at the console for more details.\n\n'
+            + 'Do you want to retry?');
+        if (retry) {
+            return fetchWithUserRetry(url, options, message);
+        }
+        throw error; // Re-throw the error if the user does not want to retry
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './functions/fetchRenderAction';
+export * from './functions/fetchPreviewConfig';
+export * from './functions/fetchComponent';
+export * from './functions/fetchWithUserRetry';
+export * from './types/types';
+declare const url: string;
+export { url };

package/dist/index.js

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+export * from './functions/fetchRenderAction';
+export * from './functions/fetchPreviewConfig';
+export * from './functions/fetchComponent';
+export * from './functions/fetchWithUserRetry';
+export * from './types/types';
+const url = (() => {
+    let url = import.meta.env.STORYBOOK_TYPO3_ENDPOINT;
+    if (typeof url !== 'string' || !url) {
+        throw new Error('env STORYBOOK_TYPO3_ENDPOINT is not set or is not a string');
+    }
+    url = url.replace(/_storybook\/?$/, '');
+    url = url.replace(/\/$/, '');
+    if (typeof url !== 'string' || !url) {
+        throw new Error('env STORYBOOK_TYPO3_ENDPOINT is not set or is not a string');
+    }
+    return url;
+})();
+export { url };

package/dist/preset.d.ts

@@ -0,0 +1,10 @@
+import type { PresetProperty } from 'storybook/internal/types';
+export declare const addons: string[];
+export declare const core: PresetProperty<'core'>;
+export declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
+export declare const tags: string[];
+/**
+ * BUGFIX for chromium based browsers and windows
+ * @see https://github.com/talkjs/country-flag-emoji-polyfill?tab=readme-ov-file
+ */
+export declare const managerHead = "<style>\n  body {\n    font-family: \"Twemoji Country Flags\", \"Nunito Sans\", -apple-system, \".SFNSText-Regular\", \"San Francisco\", BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif !important;\n  }\n  @font-face {\n    font-family: \"Twemoji Country Flags\";\n    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;\n    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');\n    font-display: swap;\n  }\n</style>";

package/{src/preset.ts → dist/preset.js}

@@ -1,31 +1,25 @@
 import { dirname, join } from 'node:path';
-import type { Entry, PresetProperty } from 'storybook/internal/types';
-
-function getAbsolutePath<I extends string>(value: I): I {
-  return dirname(require.resolve(join(value, 'package.json'))) as any;
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+function getAbsolutePath(value) {
+    return dirname(require.resolve(join(value, 'package.json')));
 }
-
 export const addons = [
-  '@storybook/addon-docs',
-  '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
 ];
-
-export const core: PresetProperty<'core'> = {
-  builder: getAbsolutePath('@storybook/builder-vite'),
-  renderer: getAbsolutePath('@storybook/server'),
-  disableTelemetry: true,
+export const core = {
+    builder: getAbsolutePath('@storybook/builder-vite'),
+    renderer: getAbsolutePath('@storybook/server'),
+    disableTelemetry: true,
 };
-
-export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (entry: Entry[] = [], options) => {
-  const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
-
-  return entry
-    .concat(require.resolve('./entry-preview'))
-    .concat(docsEnabled ? [require.resolve('./entry-preview-docs')] : []);
+export const previewAnnotations = async (entry = [], options) => {
+    const docsEnabled = Object.keys(await options.presets.apply('docs', {}, options)).length > 0;
+    return entry
+        .concat(require.resolve('./entry-preview'))
+        .concat(docsEnabled ? [require.resolve('./entry-preview-docs')] : []);
 };
-
 export const tags = ['autodocs'];
-
 /**
  * BUGFIX for chromium based browsers and windows
  * @see https://github.com/talkjs/country-flag-emoji-polyfill?tab=readme-ov-file

package/{src/types/types.ts → dist/types/types.d.ts}

@@ -1,67 +1,37 @@
-// export type { StoryObj } from '@storybook/server';
 import type { Args, StrictArgs } from '@storybook/server';
-import {
-  AnnotatedStoryFn,
-  CompatibleString,
-  ComponentAnnotations,
-  DecoratorFunction,
-  LoaderFunction,
-  ProjectAnnotations,
-  StoryAnnotations,
-  StorybookConfig as StorybookConfigBase,
-  StoryContext as StoryContext$1,
-  WebRenderer,
-} from 'storybook/internal/types';
-
+import { AnnotatedStoryFn, CompatibleString, ComponentAnnotations, DecoratorFunction, LoaderFunction, ProjectAnnotations, StoryAnnotations, StorybookConfig as StorybookConfigBase, StoryContext as StoryContext$1, WebRenderer } from 'storybook/internal/types';
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-
 type FrameworkName = CompatibleString<'@andersundsehr/storybook-typo3'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
-
 export interface FrameworkOptions {
-  builder?: BuilderOptions;
+    builder?: BuilderOptions;
 }
-
 interface StorybookConfigFramework {
-  framework:
-    | FrameworkName
-    | {
-      name: FrameworkName;
-      options: FrameworkOptions;
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfigBase['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
     };
-  core?: StorybookConfigBase['core'] & {
-    builder?:
-      | BuilderName
-      | {
-        name: BuilderName;
-        options: BuilderOptions;
-      };
-  };
 }
-
 /** The interface for Storybook configuration in `main.ts` files. */
-export type StorybookConfig = Omit<
-  StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework
-> &
-  StorybookConfigVite &
-  StorybookConfigFramework;
-
+export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigVite | keyof StorybookConfigFramework> & StorybookConfigVite & StorybookConfigFramework;
 type StoryFnServerReturnType = any;
-
 export interface FluidComponent {
-  fullName: string;
-  name: string;
-  namespace: string;
-  collection: string;
-  argTypes: Record<string, any>;
+    fullName: string;
+    name: string;
+    namespace: string;
+    collection: string;
+    argTypes: Record<string, any>;
 }
-
 interface FluidRenderer extends WebRenderer {
-  component: FluidComponent;
-  storyResult: StoryFnServerReturnType;
+    component: FluidComponent;
+    storyResult: StoryFnServerReturnType;
 }
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -80,10 +50,8 @@ type StoryFn<TArgs = Args> = AnnotatedStoryFn<FluidRenderer, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 type StoryObj<TArgs = Args> = StoryAnnotations<FluidRenderer, TArgs>;
-
 type Decorator<TArgs = StrictArgs> = DecoratorFunction<FluidRenderer, TArgs>;
 type Loader<TArgs = StrictArgs> = LoaderFunction<FluidRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<FluidRenderer, TArgs>;
 type Preview = ProjectAnnotations<FluidRenderer>;
-
 export { Decorator, Loader, Meta, Preview, FluidRenderer, StoryContext, StoryFn, StoryObj };

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@andersundsehr/storybook-typo3",
   "type": "module",
-  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "types": "./src/index.ts"
+      "import": "./dist/index.js",
+      "types": "./dist/index.js"
     },
     "./preset": {
-      "require": "./src/preset.ts",
-      "types": "./src/preset.ts"
+      "require": "./dist/preset.js",
+      "types": "./dist/preset.js"
     }
   },
   "dependencies": {
@@ -19,8 +20,17 @@
     "@storybook/addon-a11y": "^9.0.0",
     "storybook": "^9.0.0"
   },
+  "devDependencies": {
+    "typescript": "^5.8.3"
+  },
   "scripts": {
     "test": "node --test --experimental-strip-types",
-    "test:watch": "node --test --experimental-strip-types --watch"
-  }
+    "test:watch": "node --test --experimental-strip-types --watch",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "version": "0.1.2"
 }

package/src/entry-preview-docs.ts

@@ -1,31 +0,0 @@
-import { SNIPPET_RENDERED, SourceType } from 'storybook/internal/docs-tools';
-import { type FluidRenderer } from '@andersundsehr/storybook-typo3';
-import { DecoratorFunction } from 'storybook/internal/types';
-import { addons, useEffect } from 'storybook/preview-api';
-import { convertComponentToSource } from './functions/convertComponentToSource';
-
-const sourceDecorator: DecoratorFunction<FluidRenderer> = (storyFn, storyContext) => {
-  useEffect(() => {
-    const { id, args, component } = storyContext;
-    const source = convertComponentToSource(component, args);
-    addons.getChannel().emit(SNIPPET_RENDERED, { id, args, source });
-  });
-
-  return storyFn();
-};
-
-export const tags = ['autodocs'];
-
-export const decorators: DecoratorFunction<FluidRenderer>[] = [sourceDecorator];
-export const parameters = {
-  docs: {
-    story: {
-      inline: true,
-    },
-    codePanel: true,
-    source: {
-      type: SourceType.DYNAMIC,
-    },
-    toc: true,
-  },
-};

package/src/entry-preview.ts

@@ -1,21 +0,0 @@
-import { fetchPreviewConfig, fetchRenderAction, type StoryContext } from '@andersundsehr/storybook-typo3';
-import type { ArgTypesEnhancer, GlobalTypes } from 'storybook/internal/types';
-import { initGlobalsHandling } from './functions/fetchPreviewConfig.ts';
-
-const previewConfig = await fetchPreviewConfig();
-
-initGlobalsHandling(previewConfig.globalTypes);
-
-export const globalTypes: GlobalTypes = previewConfig.globalTypes;
-
-export const initialGlobals: Record<string, string> = previewConfig.initialGlobals;
-
-export const parameters = {
-  server: {
-    // url: url + '/_storybook/',
-    fetchStoryHtml: fetchRenderAction,
-  },
-};
-
-const enhanceArgTypes: ArgTypesEnhancer = (storyContext: StoryContext) => storyContext.component?.argTypes || {};
-export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];

package/src/functions/convertComponentToSource.ts

@@ -1,151 +0,0 @@
-import type { FluidComponent } from '../types/types';
-import type { StrictArgs } from 'storybook/internal/csf';
-
-function convertValueToString(key: string, argType: { type?: { name?: 'int' } }, value: ArgumentValue, inline: boolean): string {
-  const createValue = () => {
-    if ('variableName' in value) {
-      if (inline) {
-        return value.variableName; // For inline code, just return the variable name
-      }
-      return '{' + value.variableName + '}'; // For attributes, return the variable name wrapped in curly braces
-    }
-    const valueAsString = String(value.value);
-    if (typeof value.value === 'boolean') {
-      if (inline) {
-        return valueAsString;
-      }
-      return '{' + valueAsString + '}';
-    }
-    if (typeof value.value === 'number') {
-      if (argType?.type?.name === 'int') {
-        return String(Number.parseInt(valueAsString, 10)); // Convert to integer
-      }
-      return String(Number.parseFloat(valueAsString)); // Convert to float
-    }
-    if (inline) {
-      return '\'' + valueAsString.replace(/'/g, '\\\'') + '\''; // Escape single quotes for inline code
-    }
-    return valueAsString.replace(/"/g, '\\"'); // Escape double quotes for attributes
-  };
-
-  if (inline) {
-    return key + ': ' + createValue();
-  }
-  return key + '="' + createValue() + '"';
-}
-
-function inlineCode(viewHelperArguments: Arguments, component: FluidComponent, defaultSlotContent?: string) {
-  const argsStrings: string[] = Object.entries(viewHelperArguments)
-    .map(([argumentName, argumentValue]) => convertValueToString(argumentName, component.argTypes[argumentName], argumentValue, true));
-  const argsString = argsStrings.join(', ');
-
-  let source = '{';
-
-  if (defaultSlotContent) {
-    defaultSlotContent = defaultSlotContent.replace(/'/g, '\\\''); // Escape single quotes for inline code
-    source += `'${defaultSlotContent}' -> `;
-  }
-  source += `${component.fullName}(`;
-  if ((source.length + argsString.length) > 80) {
-    source += `\n  ${argsStrings.join(',\n  ')}\n`;
-  } else {
-    source += argsString;
-  }
-
-  source += ')}';
-  return source;
-}
-
-function generateOpenTag(viewHelperArguments: Arguments, component: FluidComponent) {
-  const argStrings: string[] = Object.entries(viewHelperArguments)
-    .map(([argumentName, argumentValue]) => convertValueToString(argumentName, component.argTypes[argumentName], argumentValue, false));
-  let argsString = argStrings.join(' ');
-  let openTag = `<${component.fullName}`;
-  if (argsString.length > 0) {
-    openTag += ' ' + argsString;
-  }
-  if (openTag.length > 80) {
-    argsString = argStrings.join('\n  ');
-    openTag = `<${component.fullName} \n  ${argsString}\n`;
-  }
-  return openTag;
-}
-
-const SLOT_PREFIX = 'slot____';
-
-type ArgumentValue = {
-  value: unknown;
-} | {
-  variableName: string;
-};
-
-type Arguments = Record<string, ArgumentValue>;
-type Slots = Record<string, string>;
-interface ComponentData { viewHelperArguments: Arguments; slots: Slots }
-
-function createComponentData(component: FluidComponent, args: StrictArgs): ComponentData {
-  const viewHelperArguments: Arguments = {};
-  const slots: Slots = {};
-
-  for (const [key, value] of Object.entries(args)) {
-    if (key.startsWith(SLOT_PREFIX)) {
-      // This is a slot
-      const slotName = key.replace(SLOT_PREFIX, '');
-      if (value === null || value === undefined || value === '') {
-        continue;
-      }
-
-      slots[slotName] = value as string;
-      continue;
-    }
-
-    if (!key.includes('__')) {
-      // This is a normal argument without virtual subkey
-      viewHelperArguments[key] = { value };
-      continue;
-    }
-
-    // This is a virtual argument
-    const [variableName] = key.split('__');
-    viewHelperArguments[variableName] = { variableName };
-  }
-
-  return { viewHelperArguments, slots };
-}
-
-export function convertComponentToSource(component: FluidComponent, args: StrictArgs): string {
-  const { viewHelperArguments, slots } = createComponentData(component, args);
-
-  let source = '';
-  source += `<html\n  xmlns:${component.namespace}="http://typo3.org/ns/${component.collection.replace(/\\/g, '/')}"\n  data-namespace-typo3-fluid="true"\n>\n\n`;
-
-  const usedArgs: string[] = [...new Set(Object.keys(args).filter(key => !key.startsWith(SLOT_PREFIX)).map(key => key.split('__')[0]))];
-
-  source += generateOpenTag(viewHelperArguments, component);
-
-  if (Object.keys(slots).length <= 0) {
-    source += `/>\n`;
-    source += `\n<!-- or -->\n\n`;
-    source += `{namespace ${component.namespace}=${component.collection}}\n\n`;
-    source += inlineCode(viewHelperArguments, component);
-    return source;
-  }
-  source += '>\n';
-
-  if (Object.keys(slots).length === 1 && slots.default) {
-    // If there is only a default slot, we can use the inline code
-    source += `  ${slots.default}\n`;
-    source += '</' + component.fullName + '>\n';
-    source += `\n<!-- or -->\n\n`;
-    source += `{namespace ${component.namespace}=${component.collection}}\n\n`;
-    source += inlineCode(viewHelperArguments, component, slots.default);
-    return source;
-  }
-
-  for (const [slotName, slotValue] of Object.entries(slots)) {
-    source += `  <f:fragment name="${slotName}">${slotValue}</f:fragment>\n`;
-  }
-  source += '</' + component.fullName + '>';
-
-  return source;
-}

package/src/functions/fetchComponent.ts

@@ -1,30 +0,0 @@
-import { type FluidComponent, url } from '@andersundsehr/storybook-typo3';
-
-import { fetchWithUserRetry } from './fetchWithUserRetry.ts';
-
-interface ComponentMetaData {
-  collectionClassName: string;
-  argTypes: Record<string, any>;
-}
-
-export async function fetchComponent(component: string): Promise<FluidComponent> {
-  if (!component.includes(':')) {
-    const message = 'Component name must be in the format "namespace:name"';
-    alert(message);
-    throw new Error(message);
-  }
-
-  const data = await fetchWithUserRetry<ComponentMetaData>(
-    url + '/_storybook/componentMeta?viewHelper=' + component,
-    {},
-    'metadata for component `' + component + '` from TYPO3',
-  );
-
-  return {
-    fullName: component,
-    name: component.split(':')[1],
-    namespace: component.split(':')[0],
-    collection: data.collectionClassName,
-    argTypes: data.argTypes,
-  };
-}

package/src/functions/fetchPreviewConfig.ts

@@ -1,86 +0,0 @@
-import { url } from '@andersundsehr/storybook-typo3';
-import { fetchWithUserRetry } from './fetchWithUserRetry.ts';
-import type { GlobalTypes, InputType } from 'storybook/internal/types';
-import { GLOBALS_UPDATED, SET_GLOBALS } from 'storybook/internal/core-events';
-import { addons } from 'storybook/preview-api';
-
-function getLocation(): Location {
-  let location = window.location;
-  if (window.parent?.location && window.parent !== window) {
-    location = window.parent.location;
-  }
-  return location;
-}
-
-function getGlobalsFromUrl(): Record<string, string> {
-  const url = new URL(getLocation().href);
-  const globalsString = url.searchParams.get('globals') || '';
-  const globalsArray = globalsString.split(';').filter(Boolean);
-  const entries = globalsArray.map(global => global.split(':'));
-  return Object.fromEntries(entries);
-}
-
-function setGlobalsToUrl(globals: Record<string, string>) {
-  const location = getLocation();
-  const url = new URL(location.href);
-  const globalString = Object.entries(globals).map(([key, value]) => `${key}:${value}`).join(';');
-  url.searchParams.set('globals', globalString);
-  location.href = url.toString();
-}
-
-interface PreviewConfig {
-  globalTypes: GlobalTypes;
-  initialGlobals: Record<string, string>;
-}
-
-export async function fetchPreviewConfig(currentGlobals?: Record<string, string>): Promise<PreviewConfig> {
-  const apiEndpoint = url + '/_storybook/preview';
-
-  const globals = currentGlobals || getGlobalsFromUrl();
-
-  return await fetchWithUserRetry<PreviewConfig>(
-    apiEndpoint,
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ globals }),
-    },
-    'preview config from TYPO3',
-  );
-}
-
-export function initGlobalsHandling(initalGlobalTypes: GlobalTypes) {
-  const channel = addons.getChannel();
-  let oldGlobalTypes = initalGlobalTypes;
-  channel.on(GLOBALS_UPDATED, async ({ globals }: { globals: Record<string, string> }) => {
-    const previewConfig = await fetchPreviewConfig(globals);
-
-    oldGlobalTypes = previewConfig.globalTypes;
-
-    const newGlobals: Record<string, string> = getGlobalsFromUrl();
-
-    let changed = false;
-    for (const key in previewConfig.globalTypes) {
-      const inputType: InputType = previewConfig.globalTypes[key];
-      if (!inputType.toolbar?.items?.some(item => item.value === globals[key])) {
-        newGlobals[key] = inputType.toolbar?.items?.[0]?.value || '';
-        changed = true;
-      }
-    }
-
-    if (changed) {
-      // change URL search params and reload page (this is the only way to set the globals, that worked)!!
-      setGlobalsToUrl(newGlobals);
-      return;
-    }
-
-    if (JSON.stringify(oldGlobalTypes) !== JSON.stringify(previewConfig.globalTypes)) {
-      // this only sets the globalTypes and not the globals :(
-      // see https://github.com/storybookjs/storybook/blob/3ac2fece4c41955e7349f6f825b7d21dd18ff9a9/code/core/src/manager-api/modules/globals.ts#L141-L149
-      channel.emit(SET_GLOBALS, { globals, globalTypes: previewConfig.globalTypes });
-      return;
-    }
-  });
-}

package/src/functions/fetchRenderAction.ts

@@ -1,19 +0,0 @@
-import { url, type StoryContext } from '@andersundsehr/storybook-typo3';
-
-import { fetchWithUserRetry } from './fetchWithUserRetry.ts';
-
-export async function fetchRenderAction(urlA: string, id: string, params: any, storyContext: StoryContext): Promise<string> {
-  const viewHelper = (typeof storyContext.component === 'string') ? storyContext.component : storyContext.component.fullName;
-
-  const body = {
-    viewHelper: viewHelper,
-    arguments: params,
-    site: storyContext.globals?.site || 'default',
-    siteLanguage: storyContext.globals?.language || 'default',
-  };
-
-  return await fetchWithUserRetry<string>(url + '/_storybook/render', {
-    method: 'POST',
-    body: JSON.stringify(body),
-  }, 'rendering component in TYPO3', 'text');
-};

package/src/functions/fetchWithUserRetry.ts

@@ -1,24 +0,0 @@
-export async function fetchWithUserRetry<T>(url: string, options: RequestInit, message: string, result: 'json' | 'text' = 'json'): Promise<T> {
-  options = { ...options }; // Clone options to avoid mutating the original
-  options.signal = options.signal || AbortSignal.timeout(5000);
-  try {
-    const response = await fetch(url, options);
-    if (result === 'text') {
-      return await response.text() as T;
-    }
-    return await response.json() as T;
-  } catch (error) {
-    console.error('Fetch failed:', { error });
-    const retry = confirm(
-      'Error while fetching ' + message + '. \n\n'
-      + 'fetch: ' + url + '\n'
-      + 'ERROR: ' + String(error) + '\n\n'
-      + 'look at the console for more details.\n\n'
-      + 'Do you want to retry?',
-    );
-    if (retry) {
-      return fetchWithUserRetry(url, options, message);
-    }
-    throw error; // Re-throw the error if the user does not want to retry
-  }
-}

package/src/index.ts

@@ -1,23 +0,0 @@
-export * from './functions/fetchRenderAction.ts';
-export * from './functions/fetchPreviewConfig.ts';
-export * from './functions/fetchComponent';
-export * from './functions/fetchWithUserRetry.ts';
-export * from './types/types';
-
-const url = (() => {
-  let url = import.meta.env.STORYBOOK_TYPO3_ENDPOINT;
-
-  if (typeof url !== 'string' || !url) {
-    throw new Error('env STORYBOOK_TYPO3_ENDPOINT is not set or is not a string');
-  }
-
-  url = url.replace(/_storybook\/?$/, '');
-  url = url.replace(/\/$/, '');
-
-  if (typeof url !== 'string' || !url) {
-    throw new Error('env STORYBOOK_TYPO3_ENDPOINT is not set or is not a string');
-  }
-  return url;
-})();
-
-export { url };