@andersundsehr/storybook-typo3 0.1.16 → 0.1.17

package/README.md

@@ -73,21 +73,23 @@ const config: StorybookConfig = {
   framework: '@andersundsehr/storybook-typo3', // required
 
   stories: [
-    "../src/**/*.mdx",
-    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    "../src/**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))",
   ],
 
   core: {
     disableTelemetry: true,
   },
 
-  env: (envs) => ({
-    STORYBOOK_TYPO3_ENDPOINT: 'http://localhost/_storybook/', // env can be set here or in the .env file
-    ...envs, // envs given to storybook have precedence
-  }),
+  env: (envs) => {
+    return {
+      STORYBOOK_TYPO3_ENDPOINT: 'http://localhost/_storybook/',
+      STORYBOOK_TYPO3_WATCH_ONLY_STORIES: '0', // set to '1' If you already use vite in your TYPO3 with HMR
+      // do not set your api key here! https://www.deployhq.com/blog/protecting-your-api-keys-a-quick-guide
+      ...envs, // envs given to storybook have precedence
+    };
+  },
 };
 export default config;
-
 ```
 
 ## Usage: How to use the extension? (Examples, screenshots, typical use cases)

package/dist/functions/fetchRenderAction.js

@@ -1,6 +1,22 @@
 import { url } from '@andersundsehr/storybook-typo3';
 import { fetchWithUserRetry } from './fetchWithUserRetry';
 import { error } from './error';
+let iframeContextId = 'sb-iframe-id-' + Math.random().toString(36).substring(2, 15);
+/**
+ * the IframeContextId is used to cache bust JS and CSS files,
+ * but on docs mode we want the same context ID as all the stories are rendered in the same iframe
+ */
+function getIframeContextId(viewMode) {
+    if (viewMode === 'story') {
+        // for story render we always create a new context ID
+        return (iframeContextId = 'sb-iframe-id-' + Math.random().toString(36).substring(2, 15));
+    }
+    // for docs we only want to create a new context ID if we were in story mode before
+    if (iframeContextId.startsWith('sb-iframe-id-')) {
+        return (iframeContextId = 'sb-docs-id-' + Math.random().toString(36).substring(2, 15));
+    }
+    return iframeContextId;
+}
 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);
@@ -11,10 +27,10 @@ export async function fetchRenderAction(urlA, id, params, storyContext) {
         arguments: params,
         site: storyContext.globals?.site || 'default',
         siteLanguage: storyContext.globals?.language || 'default',
+        iframeContextId: getIframeContextId(storyContext.viewMode),
     };
     return await fetchWithUserRetry(url + '/_storybook/render', {
         method: 'POST',
         body: JSON.stringify(body),
     }, 'rendering component', 'text');
 }
-;

package/dist/preset.d.ts

@@ -10,7 +10,7 @@ export declare const core: PresetProperty<'core'>;
 export declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
 export declare const tags: string[];
 /**
- * BUGFIX for chromium based browsers and windows
+ * BUGFIX for chromium based browsers on 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/dist/preset.js

@@ -1,18 +1,52 @@
 import { dirname, join } from 'node:path';
 import { createRequire } from 'module';
+import { glob } from 'node:fs/promises';
+import { basename } from 'node:path';
 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',
-];
+export const addons = ['@storybook/addon-docs', '@storybook/addon-a11y'];
 /**
  * We want storybook to not use your local vite config.
  * As that is not really needed, and can cause issues or break storybook.
  */
-export const viteFinal = (config, options) => {
+export const viteFinal = async (config, options) => {
+    const envs = await options.presets.apply('env');
+    const watchOnlyStoriesActive = ['true', '1'].includes(envs.STORYBOOK_TYPO3_WATCH_ONLY_STORIES);
+    if (!watchOnlyStoriesActive) {
+        return config; // do not change anything if we are not in watch only mode
+    }
+    const colorYellow = '\x1b[33m';
+    const colorReset = '\x1b[0m';
+    console.log(colorYellow + '@andersundsehr/storybook-typo3:' + colorReset + ' STORYBOOK_TYPO3_WATCH_ONLY_STORIES enabled, only watching stories files');
+    const defaultGlobPattern = '/**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))';
+    const storiesGlob = await options.presets.apply('stories');
+    const storiesFiles = [];
+    for (let globs of storiesGlob) {
+        if (typeof globs !== 'string') {
+            globs = globs.directory + (globs.files || defaultGlobPattern);
+        }
+        for await (const entry of glob(globs)) {
+            storiesFiles.push(entry);
+        }
+    }
+    const alwaysWatch = ['.env'];
+    config.server = config.server || {};
+    config.server.watch = config.server.watch || {};
+    config.server.watch.ignored = (file) => {
+        const filename = basename(file);
+        if (alwaysWatch.includes(filename)) {
+            return false; // always watch these files
+        }
+        if (!filename.includes('.')) {
+            return false; // ignore directories
+        }
+        if (!storiesFiles.includes(file)) {
+            return true;
+        }
+        return false;
+    };
     return config;
 };
 export const core = {
@@ -28,7 +62,7 @@ export const previewAnnotations = async (entry = [], options) => {
 };
 export const tags = ['autodocs'];
 /**
- * BUGFIX for chromium based browsers and windows
+ * BUGFIX for chromium based browsers on windows
  * @see https://github.com/talkjs/country-flag-emoji-polyfill?tab=readme-ov-file
  */
 export const managerHead = `<style>

package/package.json

@@ -49,5 +49,5 @@
     "dist",
     "README.md"
   ],
-  "version": "0.1.16"
+  "version": "0.1.17"
 }