@rimelight/ui 0.0.2 → 0.0.3

package/src/integrations/sri.ts

@@ -0,0 +1,92 @@
+import type { AstroIntegration } from "astro"
+import { createHash } from "node:crypto"
+
+interface SRIConfig {
+  security?: {
+    csp?: {
+      scriptDirective?: {
+        resources?: string[]
+      }
+    }
+  }
+}
+
+function assertSRIConfig(obj: unknown): asserts obj is SRIConfig {
+  if (!obj || typeof obj !== "object") throw new Error("Expected config")
+}
+
+/**
+ * Astro SRI Integration Fetches external scripts at build-time and generates hashes for the SSR
+ * middleware.
+ */
+export function sri(): AstroIntegration {
+  const sriManifest: Record<string, string> = {}
+
+  return {
+    name: "sri",
+    hooks: {
+      "astro:config:setup": async ({ updateConfig, config, logger }) => {
+        logger.info("Initializing SRI Discovery...")
+
+        // 1. Identify External Scripts from CSP config
+        // We look into the custom 'security' block in astro.config.mjs
+        assertSRIConfig(config)
+
+        const security = config.security
+        const externalUrls: string[] = []
+
+        if (security?.csp?.scriptDirective?.resources) {
+          for (const resource of security.csp.scriptDirective.resources) {
+            if (resource.startsWith("https://")) {
+              externalUrls.push(resource)
+            }
+          }
+        }
+
+        // 2. Fetch and Hash External Scripts
+        await Promise.all(
+          externalUrls.map(async (url) => {
+            try {
+              logger.info(`Fetching ${url} for SRI hashing...`)
+              const response = await fetch(url)
+              if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+              const buffer = await response.arrayBuffer()
+              const hash = createHash("sha384").update(Buffer.from(buffer)).digest("base64")
+
+              sriManifest[url] = `sha384-${hash}`
+              logger.info(`Successfully hashed ${url}`)
+            } catch (err: unknown) {
+              const message = err instanceof Error ? err.message : String(err)
+              logger.error(`Failed to fetch SRI for ${url}: ${message}`)
+            }
+          })
+        )
+
+        // 3. Provide hashes to the runtime via Vite's virtual module
+        const virtualModuleId = "virtual:sri-manifest"
+        const resolvedVirtualModuleId = "\0" + virtualModuleId
+
+        updateConfig({
+          vite: {
+            plugins: [
+              {
+                name: "vite-plugin-sri-manifest",
+                resolveId(id) {
+                  if (id === virtualModuleId) return resolvedVirtualModuleId
+                  return null
+                },
+                load(id) {
+                  if (id === resolvedVirtualModuleId) {
+                    return `export const manifest = ${JSON.stringify(sriManifest)};`
+                  }
+                  return null
+                }
+              }
+            ]
+          }
+        })
+      }
+    }
+  }
+}

package/src/lib/component-preview.ts

@@ -1,73 +1,73 @@
-/**
- * Component Preview Renderer
- *
- * A simple registry-based system for rendering component previews with dynamic props. Import this
- * module in your page to register component renderers.
- */
-
-export type RendererFunction = (props: Record<string, any>, container: HTMLElement) => void
-
-const renderers = new Map<string, RendererFunction>()
-
-/**
- * Register a component renderer
- *
- * @param componentName - The component name (e.g., 'hero', 'button')
- * @param renderFn - Function that renders the component with given props
- */
-export function registerRenderer(componentName: string, renderFn: RendererFunction) {
-  renderers.set(componentName, renderFn)
-}
-
-/**
- * Get a registered renderer
- */
-export function getRenderer(componentName: string): RendererFunction | undefined {
-  return renderers.get(componentName)
-}
-
-/**
- * Update a preview container with new props
- */
-export function renderPreview(
-  container: HTMLElement,
-  componentName: string,
-  props: Record<string, any>
-) {
-  const renderer = renderers.get(componentName)
-  if (renderer) {
-    renderer(props, container)
-  }
-}
-
-/**
- * Helper to create a simple attribute-based renderer For components that can update via data
- * attributes and CSS
- */
-export function createAttributeRenderer(
-  attributeMap: Record<string, string>,
-  classUpdater?: (props: Record<string, any>, element: HTMLElement) => void
-): RendererFunction {
-  return (props, container) => {
-    // Update data attributes
-    Object.entries(props).forEach(([key, value]) => {
-      const attrName = attributeMap[key] || key
-      if (value === undefined || value === null) {
-        container.removeAttribute(`data-${attrName}`)
-      } else if (typeof value === "boolean") {
-        if (value) {
-          container.setAttribute(`data-${attrName}`, "true")
-        } else {
-          container.removeAttribute(`data-${attrName}`)
-        }
-      } else {
-        container.setAttribute(`data-${attrName}`, String(value))
-      }
-    })
-
-    // Call custom class updater if provided
-    if (classUpdater) {
-      classUpdater(props, container)
-    }
-  }
-}
+/**
+ * Component Preview Renderer
+ *
+ * A simple registry-based system for rendering component previews with dynamic props. Import this
+ * module in your page to register component renderers.
+ */
+
+export type RendererFunction = (props: Record<string, any>, container: HTMLElement) => void
+
+const renderers = new Map<string, RendererFunction>()
+
+/**
+ * Register a component renderer
+ *
+ * @param componentName - The component name (e.g., 'hero', 'button')
+ * @param renderFn - Function that renders the component with given props
+ */
+export function registerRenderer(componentName: string, renderFn: RendererFunction) {
+  renderers.set(componentName, renderFn)
+}
+
+/**
+ * Get a registered renderer
+ */
+export function getRenderer(componentName: string): RendererFunction | undefined {
+  return renderers.get(componentName)
+}
+
+/**
+ * Update a preview container with new props
+ */
+export function renderPreview(
+  container: HTMLElement,
+  componentName: string,
+  props: Record<string, any>
+) {
+  const renderer = renderers.get(componentName)
+  if (renderer) {
+    renderer(props, container)
+  }
+}
+
+/**
+ * Helper to create a simple attribute-based renderer For components that can update via data
+ * attributes and CSS
+ */
+export function createAttributeRenderer(
+  attributeMap: Record<string, string>,
+  classUpdater?: (props: Record<string, any>, element: HTMLElement) => void
+): RendererFunction {
+  return (props, container) => {
+    // Update data attributes
+    Object.entries(props).forEach(([key, value]) => {
+      const attrName = attributeMap[key] || key
+      if (value === undefined || value === null) {
+        container.removeAttribute(`data-${attrName}`)
+      } else if (typeof value === "boolean") {
+        if (value) {
+          container.setAttribute(`data-${attrName}`, "true")
+        } else {
+          container.removeAttribute(`data-${attrName}`)
+        }
+      } else {
+        container.setAttribute(`data-${attrName}`, String(value))
+      }
+    })
+
+    // Call custom class updater if provided
+    if (classUpdater) {
+      classUpdater(props, container)
+    }
+  }
+}

package/src/lib/index.ts

@@ -1,6 +1,6 @@
-export * from "./turnstile"
-export * from "./component-preview"
-export * from "./showcase-preview-elements"
-export * from "./showcase-renderer"
-export * from "./showcase-utils"
-export * from "./remark/remark-modified-time.ts"
+export * from "./turnstile"
+export * from "./component-preview"
+export * from "./showcase-preview-elements"
+export * from "./showcase-renderer"
+export * from "./showcase-utils"
+export * from "./remark/remark-modified-time.ts"

package/src/lib/remark/remark-modified-time.ts

@@ -1,13 +1,13 @@
-import { execSync } from "child_process"
-
-export function remarkModifiedTime() {
-  return function (_tree: any, file: any) {
-    try {
-      const filepath = file.history[0]
-      const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`)
-      file.data.astro.frontmatter.lastModified = result.toString()
-    } catch {
-      file.data.astro.frontmatter.lastModified = new Date().toISOString()
-    }
-  }
-}
+import { execSync } from "child_process"
+
+export function remarkModifiedTime() {
+  return function (_tree: any, file: any) {
+    try {
+      const filepath = file.history[0]
+      const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`)
+      file.data.astro.frontmatter.lastModified = result.toString()
+    } catch {
+      file.data.astro.frontmatter.lastModified = new Date().toISOString()
+    }
+  }
+}