diorama-js 0.1.1 → 0.2.0

package/dist/vue.cjs

@@ -627,6 +627,7 @@ function analyzeProject(project, overrideType, overrideEntry) {
     hasBareImports: hasBareImports(files),
     isVite
   });
+  const usesTailwind = usesTailwindCSS(files);
   return {
     type,
     entryPoint: htmlEntry,
@@ -635,7 +636,8 @@ function analyzeProject(project, overrideType, overrideEntry) {
     hasJSX,
     hasTypeScript,
     jsEntryPoint: jsEntry,
-    isVite
+    isVite,
+    usesTailwind
   };
 }
 function detectProjectType(input) {
@@ -657,6 +659,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) {
@@ -1741,20 +1754,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);
@@ -2080,6 +2098,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) {
@@ -2190,7 +2296,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 };
     };
@@ -2304,6 +2411,7 @@ var dioramaProps = {
   height: { type: String, default: "500px" },
   frame: { type: String, default: "none" },
   expand: { type: Boolean, default: false },
+  tailwind: { type: [String, Boolean], default: "auto" },
   options: { type: Object, default: void 0 }
 };
 var DioramaPreview = vue.defineComponent({
@@ -2328,6 +2436,7 @@ var DioramaPreview = vue.defineComponent({
           height: props.height,
           frame: props.frame,
           expand: props.expand,
+          tailwind: props.tailwind,
           onLoad: () => emit("load"),
           onError: (err) => emit("error", err)
         });
@@ -2343,7 +2452,7 @@ var DioramaPreview = vue.defineComponent({
       instance = null;
     });
     vue.watch(
-      () => [props.repo, props.branch, props.subdirectory, props.loading, props.height, props.frame, props.expand],
+      () => [props.repo, props.branch, props.subdirectory, props.loading, props.height, props.frame, props.expand, props.tailwind],
       () => {
         renderProject();
       }