diorama-js 0.1.0 → 0.2.0

package/dist/react.d.cts

@@ -66,6 +66,11 @@ interface RenderOptions {
     projectType?: ProjectType;
     /** Override entry point detection. */
     entryPoint?: string;
+    /**
+     * Tailwind CSS handling. `'auto'` (default) loads Tailwind's Play CDN when the
+     * project is detected to use Tailwind; `true` forces it on; `false` disables it.
+     */
+    tailwind?: 'auto' | boolean;
     /** Glob patterns of files to include. */
     include?: string[];
     /** Glob patterns of files to exclude. */
@@ -125,6 +130,11 @@ interface DioramaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | '
     frame?: FrameStyle;
     /** Allow click-to-expand to fill viewport. Default: `false`. */
     expand?: boolean;
+    /**
+     * Tailwind CSS handling. `'auto'` (default) loads Tailwind's Play CDN when the
+     * project uses Tailwind; `true` forces it on; `false` disables it.
+     */
+    tailwind?: 'auto' | boolean;
     /** Called when rendering completes. */
     onLoad?: () => void;
     /** Called on error. */

package/dist/react.d.ts

@@ -66,6 +66,11 @@ interface RenderOptions {
     projectType?: ProjectType;
     /** Override entry point detection. */
     entryPoint?: string;
+    /**
+     * Tailwind CSS handling. `'auto'` (default) loads Tailwind's Play CDN when the
+     * project is detected to use Tailwind; `true` forces it on; `false` disables it.
+     */
+    tailwind?: 'auto' | boolean;
     /** Glob patterns of files to include. */
     include?: string[];
     /** Glob patterns of files to exclude. */
@@ -125,6 +130,11 @@ interface DioramaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | '
     frame?: FrameStyle;
     /** Allow click-to-expand to fill viewport. Default: `false`. */
     expand?: boolean;
+    /**
+     * Tailwind CSS handling. `'auto'` (default) loads Tailwind's Play CDN when the
+     * project uses Tailwind; `true` forces it on; `false` disables it.
+     */
+    tailwind?: 'auto' | boolean;
     /** Called when rendering completes. */
     onLoad?: () => void;
     /** Called on error. */

package/dist/react.js

@@ -624,6 +624,7 @@ function analyzeProject(project, overrideType, overrideEntry) {
     hasBareImports: hasBareImports(files),
     isVite
   });
+  const usesTailwind = usesTailwindCSS(files);
   return {
     type,
     entryPoint: htmlEntry,
@@ -632,7 +633,8 @@ function analyzeProject(project, overrideType, overrideEntry) {
     hasJSX,
     hasTypeScript,
     jsEntryPoint: jsEntry,
-    isVite
+    isVite,
+    usesTailwind
   };
 }
 function detectProjectType(input) {
@@ -654,6 +656,17 @@ function hasBareImports(files) {
   }
   return false;
 }
+function usesTailwindCSS(files) {
+  for (const [path, content] of files) {
+    if (/(?:^|\/)tailwind\.config\.(?:js|cjs|mjs|ts)$/.test(path)) {
+      return true;
+    }
+    if (path.endsWith(".css") && /@tailwind\b|@apply\b/.test(content)) {
+      return true;
+    }
+  }
+  return false;
+}
 
 // src/core/sandbox.ts
 function buildErrorHTML(message) {
@@ -1508,6 +1521,18 @@ function getCDNProvider(name) {
       return esmShProvider;
   }
 }
+function buildCSSURL(specifier, options = {}) {
+  const { dependencies = {}, cdnProvider = "esm.sh" } = options;
+  const clean = specifier.replace(/[?#].*$/, "");
+  const { packageName, subpath } = parseSpecifier(clean);
+  const version = dependencies[packageName];
+  const ver = version ? `@${version}` : "";
+  const sub = subpath ? `/${subpath}` : "";
+  if (cdnProvider === "unpkg") {
+    return `https://unpkg.com/${packageName}${ver}${sub}`;
+  }
+  return `https://esm.sh/${packageName}${ver}${sub}`;
+}
 function rewriteImports(source, options = {}) {
   const {
     dependencies = {},
@@ -1521,6 +1546,9 @@ function rewriteImports(source, options = {}) {
     if (raw.startsWith(".") || raw.startsWith("/") || /^https?:\/\//.test(raw)) {
       return raw;
     }
+    if (/\.css(?:[?#]|$)/.test(raw)) {
+      return raw;
+    }
     const { packageName, subpath } = parseSpecifier(raw);
     if (NODE_BUILTINS.has(packageName) || NODE_BUILTINS.has(packageName.replace("node:", ""))) {
       throw new NodeBuiltinError(packageName);
@@ -1723,20 +1751,25 @@ var ASSET_IMPORT_EXTENSIONS = {
   ".otf": "font/otf"
 };
 function assembleHTML(options) {
-  const { project, config, transformedFiles } = options;
+  const { project, config, transformedFiles, cdnProvider, tailwind = "auto" } = options;
   const files = transformedFiles ?? project.files;
+  let result;
   switch (config.type) {
     case "static":
-      return assembleStatic(files, project, config);
+      result = assembleStatic(files, project, config);
+      break;
     case "static-esm":
     case "jsx":
     case "typescript":
     case "jsx-typescript":
     case "vite":
-      return assembleESM(files, project, config);
+      result = assembleESM(files, project, config, cdnProvider);
+      break;
     default:
       throw new AssemblyError(`Unsupported project type: ${config.type}`);
   }
+  result.html = applyTailwindRuntime(result.html, project, config, tailwind);
+  return result;
 }
 function assembleStatic(files, project, config) {
   let html = files.get(config.entryPoint);
@@ -1750,10 +1783,13 @@ function assembleStatic(files, project, config) {
   html = inlineAssets(html, project, config.entryPoint);
   return { html, usesESM: false };
 }
-function assembleESM(files, project, config) {
+function assembleESM(files, project, config, cdnProvider) {
   const isGenerated = config.entryPoint === "__generated__/index.html";
   rewriteAssetImports(files, project);
-  const cssFromJS = extractCSSImports(files);
+  const { css: cssFromJS, links: cssLinks } = extractCSSImports(files, {
+    dependencies: config.dependencies,
+    cdnProvider
+  });
   if (config.isVite) {
     injectImportMetaEnv(files);
   }
@@ -1772,6 +1808,9 @@ function assembleESM(files, project, config) {
     html = rewriteScriptSrcsToImportMap(html, config.entryPoint);
     html = inlineAssets(html, project, config.entryPoint);
   }
+  for (const href of cssLinks) {
+    html = injectIntoHead(html, `<link rel="stylesheet" href="${href}">`);
+  }
   if (cssFromJS) {
     html = injectIntoHead(html, `<style>
 ${cssFromJS}
@@ -2021,20 +2060,32 @@ function rewriteAssetImports(files, project) {
     }
   }
 }
-function extractCSSImports(files) {
+function extractCSSImports(files, options = {}) {
   const cssChunks = [];
-  const cssImportRe = /import\s+['"]([^'"]+\.css)['"]\s*;?/g;
+  const links = [];
+  const seenLinks = /* @__PURE__ */ new Set();
+  const cssImportRe = /import\s+['"]([^'"]+\.css(?:[?#][^'"]*)?)['"]\s*;?/g;
   for (const [path, content] of files) {
     if (!/\.(js|ts|jsx|tsx|mjs)$/.test(path)) continue;
     let modified = content;
     let match;
+    cssImportRe.lastIndex = 0;
     while ((match = cssImportRe.exec(content)) !== null) {
-      const cssPath = match[1];
-      const resolved = resolvePath(directoryOf(path), cssPath);
-      const css = files.get(resolved);
-      if (css) {
-        cssChunks.push(`/* ${resolved} */
+      const specifier = match[1];
+      const bare = specifier.replace(/[?#].*$/, "");
+      if (bare.startsWith(".") || bare.startsWith("/")) {
+        const resolved = resolvePath(directoryOf(path), bare);
+        const css = files.get(resolved);
+        if (css) {
+          cssChunks.push(`/* ${resolved} */
 ${css}`);
+        }
+      } else {
+        const href = /^https?:\/\//.test(bare) ? bare : buildCSSURL(bare, options);
+        if (!seenLinks.has(href)) {
+          seenLinks.add(href);
+          links.push(href);
+        }
       }
       modified = modified.replace(match[0], "");
     }
@@ -2042,7 +2093,95 @@ ${css}`);
       files.set(path, modified);
     }
   }
-  return cssChunks.join("\n\n");
+  return { css: cssChunks.join("\n\n"), links };
+}
+var TAILWIND_DIRECTIVE_RE = /@tailwind\b|@apply\b/;
+var TAILWIND_CDN_URL = "https://cdn.tailwindcss.com";
+function hasTailwindDirectives(css) {
+  return TAILWIND_DIRECTIVE_RE.test(css);
+}
+function applyTailwindRuntime(html, project, config, tailwind) {
+  const enabled = tailwind === true || tailwind === "auto" && (config.usesTailwind ?? usesTailwindCSS(project.files));
+  if (!enabled) return html;
+  html = html.replace(
+    /<style>([\s\S]*?)<\/style>/g,
+    (match, css) => hasTailwindDirectives(css) ? `<style type="text/tailwindcss">${css}</style>` : match
+  );
+  let injection = `<script src="${TAILWIND_CDN_URL}"></script>`;
+  const configObject = extractTailwindConfig(project.files);
+  if (configObject) {
+    injection += `
+<script>tailwind.config = ${configObject};</script>`;
+  }
+  return injectIntoHead(html, injection);
+}
+function extractTailwindConfig(files) {
+  let source;
+  for (const [path, content] of files) {
+    if (/(?:^|\/)tailwind\.config\.(?:js|cjs|mjs|ts)$/.test(path)) {
+      source = content;
+      break;
+    }
+  }
+  if (!source) return null;
+  const object = extractBalancedObject(source);
+  if (!object || !isSafeConfigObject(object)) return null;
+  return object;
+}
+function extractBalancedObject(source) {
+  const opener = source.match(/(?:export\s+default|module\.exports\s*=)\s*\{/);
+  if (!opener || opener.index === void 0) return null;
+  const start = opener.index + opener[0].length - 1;
+  let depth = 0;
+  let str = null;
+  let lineComment = false;
+  let blockComment = false;
+  for (let i = start; i < source.length; i++) {
+    const c = source[i];
+    const n = source[i + 1];
+    if (lineComment) {
+      if (c === "\n") lineComment = false;
+      continue;
+    }
+    if (blockComment) {
+      if (c === "*" && n === "/") {
+        blockComment = false;
+        i++;
+      }
+      continue;
+    }
+    if (str) {
+      if (c === "\\") {
+        i++;
+        continue;
+      }
+      if (c === str) str = null;
+      continue;
+    }
+    if (c === "/" && n === "/") {
+      lineComment = true;
+      i++;
+      continue;
+    }
+    if (c === "/" && n === "*") {
+      blockComment = true;
+      i++;
+      continue;
+    }
+    if (c === '"' || c === "'" || c === "`") {
+      str = c;
+      continue;
+    }
+    if (c === "{") depth++;
+    else if (c === "}") {
+      depth--;
+      if (depth === 0) return source.slice(start, i + 1);
+    }
+  }
+  return null;
+}
+function isSafeConfigObject(object) {
+  return !(/\brequire\s*\(/.test(object) || /\bimport\b/.test(object) || /=>/.test(object) || /\bfunction\b/.test(object) || /`/.test(object) || /\bprocess\b/.test(object) || /\b__dirname\b|\b__filename\b/.test(object));
 }
 function injectImportMetaEnv(files) {
   const shim = `if(!import.meta.env){Object.defineProperty(import.meta,'env',{value:{MODE:'production',BASE_URL:'/',PROD:true,DEV:false,SSR:false}});}`;
@@ -2153,7 +2292,9 @@ var Diorama = class {
       const { html: html2, usesESM: usesESM2 } = assembleHTML({
         project,
         config,
-        transformedFiles: files
+        transformedFiles: files,
+        cdnProvider: this.options.cdnProvider,
+        tailwind: options.tailwind ?? "auto"
       });
       return { html: html2, usesESM: usesESM2, repoName: repoName2 };
     };
@@ -2266,6 +2407,7 @@ var DioramaPreview = forwardRef(
     height = "500px",
     frame,
     expand,
+    tailwind,
     onLoad,
     onError,
     options,
@@ -2292,6 +2434,7 @@ var DioramaPreview = forwardRef(
         height,
         frame,
         expand,
+        tailwind,
         onLoad,
         onError: (err) => {
           onError?.(err);
@@ -2312,7 +2455,7 @@ var DioramaPreview = forwardRef(
         instanceRef.current?.destroy();
         instanceRef.current = null;
       };
-    }, [repo, branch, subdirectory, loading, placeholder, height, frame, expand]);
+    }, [repo, branch, subdirectory, loading, placeholder, height, frame, expand, tailwind]);
     const containerStyle = {
       width: "100%",
       minHeight: height,