diorama-js 0.1.1 → 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) {
@@ -1738,20 +1751,25 @@ var ASSET_IMPORT_EXTENSIONS = {
   ".otf": "font/otf"
 };
 function assembleHTML(options) {
-  const { project, config, transformedFiles, cdnProvider } = 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, cdnProvider);
+      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);
@@ -2077,6 +2095,94 @@ ${css}`);
   }
   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}});}`;
   for (const [path, content] of files) {
@@ -2187,7 +2293,8 @@ var Diorama = class {
         project,
         config,
         transformedFiles: files,
-        cdnProvider: this.options.cdnProvider
+        cdnProvider: this.options.cdnProvider,
+        tailwind: options.tailwind ?? "auto"
       });
       return { html: html2, usesESM: usesESM2, repoName: repoName2 };
     };
@@ -2300,6 +2407,7 @@ var DioramaPreview = forwardRef(
     height = "500px",
     frame,
     expand,
+    tailwind,
     onLoad,
     onError,
     options,
@@ -2326,6 +2434,7 @@ var DioramaPreview = forwardRef(
         height,
         frame,
         expand,
+        tailwind,
         onLoad,
         onError: (err) => {
           onError?.(err);
@@ -2346,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,