@storybook-astro/framework 0.1.0-beta.9 → 1.0.0

package/src/integrations/vue.ts

@@ -1,6 +1,7 @@
 import type { Integration } from './base.ts';
 import type { Options as VueOptions } from '@vitejs/plugin-vue';
 import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx';
+import { importModule } from './moduleResolver.ts';
 
 export type Options = Pick<VueOptions, 'include' | 'exclude'> & {
   jsx?: boolean | VueJsxOptions;
@@ -37,8 +38,10 @@ export class VueIntegration implements Integration {
     }
   }
 
-  async loadIntegration() {
-    const framework = await import('@astrojs/vue');
+  async loadIntegration(resolveFrom = process.cwd()) {
+    const framework = await importModule<{
+      default: (options: Options) => Awaited<ReturnType<Integration['loadIntegration']>>;
+    }>('@astrojs/vue', resolveFrom);
 
     return framework.default(this.options);
   }

package/src/lib/sanitization.test.ts

@@ -0,0 +1,232 @@
+import { describe, expect, test } from 'vitest';
+import { resolveSanitizationOptions, sanitizeRenderPayload } from './sanitization.ts';
+
+describe('sanitization', () => {
+  test('enables sanitization and sanitizes all slots by default', () => {
+    const options = resolveSanitizationOptions();
+
+    expect(options.enabled).toBe(true);
+    expect(options.args).toEqual([]);
+    expect(options.slots).toEqual(['**']);
+
+    const payload = sanitizeRenderPayload(
+      {
+        args: {
+          title: '<b>Leave args as-is</b><script>alert(1)</script>'
+        },
+        slots: {
+          default: '<p>Hello<script>alert(1)</script></p>'
+        }
+      },
+      options
+    );
+
+    expect(payload.args.title).toBe('<b>Leave args as-is</b><script>alert(1)</script>');
+    expect(payload.slots.default).toBe('<p>Hello</p>');
+  });
+
+  test('sanitizes only configured arg paths', () => {
+    const options = resolveSanitizationOptions({
+      args: ['content'],
+      slots: []
+    });
+
+    const payload = sanitizeRenderPayload(
+      {
+        args: {
+          content: '<p>Hello</p><script>alert(1)</script>',
+          title: '<b>Keep me</b><script>alert(1)</script>'
+        },
+        slots: {}
+      },
+      options
+    );
+
+    expect(payload.args.content).toBe('<p>Hello</p>');
+    expect(payload.args.title).toBe('<b>Keep me</b><script>alert(1)</script>');
+  });
+
+  test('supports wildcard patterns for nested values', () => {
+    const options = resolveSanitizationOptions({
+      args: ['items.*.html'],
+      slots: []
+    });
+
+    const payload = sanitizeRenderPayload(
+      {
+        args: {
+          items: [{ html: '<img class="hero" src="x" onerror="alert(1)"><p>Safe</p>' }]
+        },
+        slots: {}
+      },
+      options
+    );
+
+    expect(payload.args.items).toEqual([{ html: '<img class="hero" src="x" /><p>Safe</p>' }]);
+  });
+
+  test('returns payload untouched when sanitization is disabled', () => {
+    const options = resolveSanitizationOptions({
+      enabled: false,
+      args: ['content']
+    });
+
+    const payload = {
+      args: {
+        content: '<p>Hello</p><script>alert(1)</script>'
+      },
+      slots: {
+        default: '<p>Body<script>alert(1)</script></p>'
+      }
+    };
+
+    const sanitizedPayload = sanitizeRenderPayload(payload, options);
+
+    expect(sanitizedPayload).toBe(payload);
+  });
+
+  test('merges sanitize-html object options with defaults', () => {
+    const options = resolveSanitizationOptions({
+      sanitizeHtml: {
+        allowedAttributes: {
+          section: ['data-foo']
+        }
+      }
+    });
+
+    expect(options.sanitizeHtml.allowedAttributes).toMatchObject({
+      a: ['href', 'name', 'target', 'rel'],
+      section: ['data-foo']
+    });
+  });
+
+  test('merges sanitize-html classes and styles options', () => {
+    const options = resolveSanitizationOptions({
+      sanitizeHtml: {
+        allowedClasses: {
+          p: ['prose']
+        },
+        allowedStyles: {
+          '*': {
+            color: [/^#(?:[0-9a-fA-F]{3}){1,2}$/]
+          }
+        }
+      }
+    });
+
+    expect(options.sanitizeHtml.allowedClasses).toMatchObject({
+      p: ['prose']
+    });
+
+    expect(options.sanitizeHtml.allowedStyles).toMatchObject({
+      '*': {
+        color: [expect.any(RegExp)]
+      }
+    });
+  });
+
+  test('rejects invalid path lists', () => {
+    expect(() =>
+      resolveSanitizationOptions({
+        args: ['ok', '  ']
+      })
+    ).toThrow('framework.options.sanitization.args[1] cannot be an empty string.');
+  });
+
+  test('rejects non-array path list values', () => {
+    expect(() =>
+      resolveSanitizationOptions({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        args: 'content' as any
+      })
+    ).toThrow('framework.options.sanitization.args must be an array of dot-path patterns.');
+  });
+
+  test('rejects non-string entries in path lists', () => {
+    expect(() =>
+      resolveSanitizationOptions({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        args: ['ok', 1 as any]
+      })
+    ).toThrow('framework.options.sanitization.args[1] must be a string.');
+  });
+
+  test('supports ** suffix matching and leaves non-matching paths untouched', () => {
+    const options = resolveSanitizationOptions({
+      args: ['**.html'],
+      slots: []
+    });
+
+    const payload = sanitizeRenderPayload(
+      {
+        args: {
+          items: [
+            {
+              nested: {
+                html: '<p>Safe<script>alert(1)</script></p>'
+              },
+              content: '<p>Leave<script>alert(1)</script></p>'
+            }
+          ]
+        },
+        slots: {}
+      },
+      options
+    );
+
+    const items = payload.args.items as Array<{ nested: { html: string }; content: string }>;
+
+    expect(items[0].nested.html).toBe('<p>Safe</p>');
+    expect(items[0].content).toBe('<p>Leave<script>alert(1)</script></p>');
+  });
+
+  test('does not sanitize when path is shorter than pattern and keeps non-string values', () => {
+    const options = resolveSanitizationOptions({
+      args: ['title.html'],
+      slots: []
+    });
+
+    const regexValue = /hello/i;
+
+    const payload = sanitizeRenderPayload(
+      {
+        args: {
+          title: '<p>Keep<script>alert(1)</script></p>',
+          count: 1,
+          truthy: true,
+          pattern: regexValue
+        },
+        slots: {}
+      },
+      options
+    );
+
+    expect(payload.args.title).toBe('<p>Keep<script>alert(1)</script></p>');
+    expect(payload.args.count).toBe(1);
+    expect(payload.args.truthy).toBe(true);
+    expect(payload.args.pattern).toBe(regexValue);
+  });
+
+  test('supports null-prototype records during traversal', () => {
+    const options = resolveSanitizationOptions({
+      args: ['meta.html'],
+      slots: []
+    });
+
+    const meta = Object.create(null) as Record<string, unknown>;
+
+    meta.html = '<p>Safe<script>alert(1)</script></p>';
+
+    const payload = sanitizeRenderPayload(
+      {
+        args: {
+          meta
+        },
+        slots: {}
+      },
+      options
+    );
+
+    expect((payload.args.meta as Record<string, unknown>).html).toBe('<p>Safe</p>');
+  });
+});

package/src/lib/sanitization.ts

@@ -0,0 +1,338 @@
+import sanitizeHtml from 'sanitize-html';
+import type { IOptions } from 'sanitize-html';
+
+type SanitizationPayload = {
+  args: Record<string, unknown>;
+  slots: Record<string, unknown>;
+};
+
+export type SanitizationOptions = {
+  enabled?: boolean;
+  args?: string[];
+  slots?: string[];
+  sanitizeHtml?: IOptions;
+};
+
+export type ResolvedSanitizationOptions = {
+  enabled: boolean;
+  args: string[];
+  slots: string[];
+  sanitizeHtml: IOptions;
+};
+
+const DEFAULT_SANITIZE_HTML_OPTIONS: IOptions = {
+  allowedTags: [
+    'a',
+    'abbr',
+    'b',
+    'blockquote',
+    'br',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'dd',
+    'details',
+    'dfn',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'figcaption',
+    'figure',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'img',
+    'kbd',
+    'li',
+    'mark',
+    'ol',
+    'p',
+    'pre',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'tr',
+    'u',
+    'ul',
+    'var',
+    'wbr'
+  ],
+  allowedAttributes: {
+    '*': [
+      'aria-describedby',
+      'aria-hidden',
+      'aria-label',
+      'aria-labelledby',
+      'class',
+      'id',
+      'lang',
+      'role',
+      'title'
+    ],
+    a: ['href', 'name', 'target', 'rel'],
+    img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading', 'decoding'],
+    td: ['colspan', 'rowspan'],
+    th: ['colspan', 'rowspan', 'scope'],
+    time: ['datetime']
+  },
+  allowedSchemes: ['http', 'https', 'mailto', 'tel', 'data'],
+  allowedSchemesByTag: {
+    a: ['http', 'https', 'mailto', 'tel'],
+    img: ['http', 'https', 'data']
+  },
+  allowedSchemesAppliedToAttributes: ['href', 'src', 'cite', 'srcset'],
+  allowProtocolRelative: false,
+  disallowedTagsMode: 'discard',
+  enforceHtmlBoundary: true,
+  parseStyleAttributes: false
+};
+
+export function resolveSanitizationOptions(options?: SanitizationOptions): ResolvedSanitizationOptions {
+  if (!options) {
+    return {
+      enabled: true,
+      args: [],
+      slots: ['**'],
+      sanitizeHtml: mergeSanitizeHtmlOptions()
+    };
+  }
+
+  const enabled = options.enabled ?? true;
+  const args = normalizePathList(options.args, 'framework.options.sanitization.args');
+  const slots =
+    options.slots === undefined
+      ? ['**']
+      : normalizePathList(options.slots, 'framework.options.sanitization.slots');
+
+  return {
+    enabled,
+    args,
+    slots,
+    sanitizeHtml: mergeSanitizeHtmlOptions(options.sanitizeHtml)
+  };
+}
+
+export function sanitizeRenderPayload(
+  payload: SanitizationPayload,
+  options: ResolvedSanitizationOptions
+): SanitizationPayload {
+  if (!options.enabled) {
+    return payload;
+  }
+
+  const sanitizedArgs =
+    options.args.length > 0
+      ? sanitizeRecord(payload.args, options.args, options.sanitizeHtml)
+      : payload.args;
+
+  const sanitizedSlots =
+    options.slots.length > 0
+      ? sanitizeRecord(payload.slots, options.slots, options.sanitizeHtml)
+      : payload.slots;
+
+  return {
+    args: sanitizedArgs,
+    slots: sanitizedSlots
+  };
+}
+
+function mergeSanitizeHtmlOptions(userOptions?: IOptions): IOptions {
+  const merged: IOptions = {
+    ...DEFAULT_SANITIZE_HTML_OPTIONS,
+    ...userOptions
+  };
+
+  if (
+    isRecord(DEFAULT_SANITIZE_HTML_OPTIONS.allowedAttributes) &&
+    isRecord(userOptions?.allowedAttributes)
+  ) {
+    merged.allowedAttributes = {
+      ...DEFAULT_SANITIZE_HTML_OPTIONS.allowedAttributes,
+      ...userOptions.allowedAttributes
+    };
+  }
+
+  if (isRecord(userOptions?.allowedClasses)) {
+    merged.allowedClasses = {
+      ...(isRecord(DEFAULT_SANITIZE_HTML_OPTIONS.allowedClasses)
+        ? DEFAULT_SANITIZE_HTML_OPTIONS.allowedClasses
+        : {}),
+      ...userOptions.allowedClasses
+    };
+  }
+
+  if (isRecord(userOptions?.allowedStyles)) {
+    merged.allowedStyles = {
+      ...(isRecord(DEFAULT_SANITIZE_HTML_OPTIONS.allowedStyles)
+        ? DEFAULT_SANITIZE_HTML_OPTIONS.allowedStyles
+        : {}),
+      ...userOptions.allowedStyles
+    };
+  }
+
+  return merged;
+}
+
+function normalizePathList(value: unknown, path: string): string[] {
+  if (value === undefined) {
+    return [];
+  }
+
+  if (!Array.isArray(value)) {
+    throw new Error(`${path} must be an array of dot-path patterns.`);
+  }
+
+  const unique = new Set<string>();
+
+  value.forEach((entry, index) => {
+    if (typeof entry !== 'string') {
+      throw new Error(`${path}[${index}] must be a string.`);
+    }
+
+    const normalized = entry.trim();
+
+    if (!normalized) {
+      throw new Error(`${path}[${index}] cannot be an empty string.`);
+    }
+
+    unique.add(normalized);
+  });
+
+  return Array.from(unique);
+}
+
+function sanitizeRecord(
+  record: Record<string, unknown>,
+  patterns: string[],
+  options: IOptions
+): Record<string, unknown> {
+  const sanitized: Record<string, unknown> = {};
+
+  Object.entries(record).forEach(([key, value]) => {
+    sanitized[key] = sanitizeValue(value, key, patterns, options);
+  });
+
+  return sanitized;
+}
+
+function sanitizeValue(
+  value: unknown,
+  currentPath: string,
+  patterns: string[],
+  options: IOptions
+): unknown {
+  if (typeof value === 'string') {
+    if (shouldSanitizePath(currentPath, patterns)) {
+      return sanitizeHtml(value, options);
+    }
+
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item, index) => {
+      const nextPath = `${currentPath}.${index}`;
+
+      return sanitizeValue(item, nextPath, patterns, options);
+    });
+  }
+
+  if (isRecord(value)) {
+    const sanitized: Record<string, unknown> = {};
+
+    Object.entries(value).forEach(([key, nestedValue]) => {
+      const nextPath = `${currentPath}.${key}`;
+
+      sanitized[key] = sanitizeValue(nestedValue, nextPath, patterns, options);
+    });
+
+    return sanitized;
+  }
+
+  return value;
+}
+
+function shouldSanitizePath(path: string, patterns: string[]): boolean {
+  return patterns.some((pattern) => matchesPathPattern(path, pattern));
+}
+
+function matchesPathPattern(path: string, pattern: string): boolean {
+  const pathSegments = path.split('.');
+  const patternSegments = pattern.split('.');
+
+  return matchSegments(pathSegments, patternSegments);
+}
+
+function matchSegments(pathSegments: string[], patternSegments: string[]): boolean {
+  if (patternSegments.length === 0) {
+    return pathSegments.length === 0;
+  }
+
+  const [patternHead, ...patternTail] = patternSegments;
+
+  if (patternHead === '**') {
+    if (patternTail.length === 0) {
+      return true;
+    }
+
+    for (let index = 0; index <= pathSegments.length; index += 1) {
+      const remainingPath = pathSegments.slice(index);
+
+      if (matchSegments(remainingPath, patternTail)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  if (pathSegments.length === 0) {
+    return false;
+  }
+
+  const [pathHead, ...pathTail] = pathSegments;
+
+  if (patternHead === '*' || patternHead === pathHead) {
+    return matchSegments(pathTail, patternTail);
+  }
+
+  return false;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  if (Array.isArray(value) || value instanceof RegExp) {
+    return false;
+  }
+
+  const prototype = Object.getPrototypeOf(value);
+
+  return prototype === Object.prototype || prototype === null;
+}

package/src/lib/ssr-load-module-with-fs-fallback.ts

@@ -0,0 +1,29 @@
+import type { ViteDevServer } from 'vite';
+
+type SsrLoadModuleOptions = {
+  fixStacktrace?: boolean;
+};
+
+export async function ssrLoadModuleWithFsFallback<TModule = unknown>(
+  viteServer: Pick<ViteDevServer, 'ssrLoadModule'>,
+  id: string,
+  options?: SsrLoadModuleOptions
+) {
+  const ids = [id];
+
+  if (id.startsWith('/') && !id.startsWith('/@fs/')) {
+    ids.push(`/@fs${id}`);
+  }
+
+  let lastError: unknown;
+
+  for (const candidate of ids) {
+    try {
+      return await viteServer.ssrLoadModule(candidate, options) as TModule;
+    } catch (error) {
+      lastError = error;
+    }
+  }
+
+  throw lastError;
+}

package/src/middleware.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest';
+
+describe('middleware', () => {
+  describe('Windows absolute path normalization', () => {
+    /**
+     * Regex pattern used in middleware.ts to detect Windows absolute paths.
+     * This pattern matches paths starting with a drive letter (e.g., C:) followed by
+     * a forward slash or backslash, indicating a Windows absolute path.
+     */
+    const windowsPathRegex = /^[a-zA-Z]:[/\\]/;
+
+    test('detects Windows absolute paths with forward slashes', () => {
+      const pathToTest = 'C:/Users/project/Component.astro';
+
+      expect(windowsPathRegex.test(pathToTest)).toBe(true);
+    });
+
+    test('detects Windows absolute paths with backslashes', () => {
+      const pathToTest = 'C:\\Users\\project\\Component.astro';
+
+      expect(windowsPathRegex.test(pathToTest)).toBe(true);
+    });
+
+    test('ignores Unix absolute paths', () => {
+      const unixPath = '/Users/project/Component.astro';
+
+      expect(windowsPathRegex.test(unixPath)).toBe(false);
+    });
+
+    test('ignores relative paths', () => {
+      const relativePath = './Component.astro';
+
+      expect(windowsPathRegex.test(relativePath)).toBe(false);
+    });
+
+    test('ignores module specifiers', () => {
+      const specifier = '@storybook-astro/renderer';
+
+      expect(windowsPathRegex.test(specifier)).toBe(false);
+    });
+
+    test('ignores file URLs', () => {
+      const fileUrl = 'file:///C:/Users/project/Component.astro';
+
+      expect(windowsPathRegex.test(fileUrl)).toBe(false);
+    });
+  });
+});