@servlyadmin/runtime-core 0.1.37 → 0.1.38

package/dist/chunk-5O72RMSO.js

@@ -0,0 +1,305 @@
+// src/tailwind.ts
+var DEFAULT_TAILWIND_CDN = "https://cdn.tailwindcss.com";
+var TAILWIND_CACHE_KEY = "servly-tailwind-loaded";
+var tailwindInjected = false;
+var tailwindScript = null;
+var foucStyleElement = null;
+var tailwindReadyPromise = null;
+var tailwindReadyResolve = null;
+var FOUC_PREVENTION_CSS = `
+  .servly-component:not(.servly-ready),
+  [data-servly-id]:not(.servly-ready) {
+    visibility: hidden !important;
+  }
+  .servly-fouc-hidden {
+    visibility: hidden !important;
+  }
+`;
+function wasTailwindPreviouslyLoaded() {
+  if (typeof localStorage === "undefined") return false;
+  try {
+    return localStorage.getItem(TAILWIND_CACHE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+function markTailwindAsLoaded() {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(TAILWIND_CACHE_KEY, "true");
+  } catch {
+  }
+}
+function preloadTailwind(cdnUrl, usePlayCdn) {
+  if (typeof document === "undefined") return;
+  if (document.querySelector("link[data-servly-tailwind-preload]")) return;
+  const url = cdnUrl || DEFAULT_TAILWIND_CDN;
+  const fullUrl = usePlayCdn ? `${url}?plugins=forms,typography,aspect-ratio` : url;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  link.as = "script";
+  link.href = fullUrl;
+  link.setAttribute("data-servly-tailwind-preload", "true");
+  if (document.head.firstChild) {
+    document.head.insertBefore(link, document.head.firstChild);
+  } else {
+    document.head.appendChild(link);
+  }
+  const dnsPrefetch = document.createElement("link");
+  dnsPrefetch.rel = "dns-prefetch";
+  dnsPrefetch.href = "https://cdn.tailwindcss.com";
+  document.head.appendChild(dnsPrefetch);
+}
+function preventFOUC() {
+  if (typeof document === "undefined") return;
+  if (foucStyleElement) return;
+  const wasLoaded = wasTailwindPreviouslyLoaded();
+  foucStyleElement = document.createElement("style");
+  foucStyleElement.id = "servly-fouc-prevention";
+  foucStyleElement.textContent = FOUC_PREVENTION_CSS;
+  if (document.head.firstChild) {
+    document.head.insertBefore(foucStyleElement, document.head.firstChild);
+  } else {
+    document.head.appendChild(foucStyleElement);
+  }
+  if (wasLoaded) {
+    setTimeout(() => {
+      if (window.tailwind) {
+        removeFOUCPrevention();
+      }
+    }, 100);
+  }
+}
+function removeFOUCPrevention() {
+  if (foucStyleElement && foucStyleElement.parentNode) {
+    foucStyleElement.parentNode.removeChild(foucStyleElement);
+    foucStyleElement = null;
+  }
+  if (typeof document !== "undefined") {
+    document.querySelectorAll(".servly-component, [data-servly-id]").forEach((el) => {
+      el.classList.add("servly-ready");
+    });
+  }
+}
+function markElementReady(element) {
+  element.classList.add("servly-ready");
+  element.classList.remove("servly-fouc-hidden");
+}
+function isTailwindReady() {
+  if (typeof window === "undefined") return false;
+  return tailwindInjected && !!window.tailwind;
+}
+function waitForTailwind() {
+  if (isTailwindReady()) {
+    return Promise.resolve();
+  }
+  if (tailwindReadyPromise) {
+    return tailwindReadyPromise;
+  }
+  tailwindReadyPromise = new Promise((resolve) => {
+    tailwindReadyResolve = resolve;
+  });
+  return tailwindReadyPromise;
+}
+function injectTailwind(config = {}) {
+  return new Promise((resolve, reject) => {
+    if (tailwindInjected && tailwindScript) {
+      resolve();
+      return;
+    }
+    if (typeof document === "undefined") {
+      resolve();
+      return;
+    }
+    const {
+      cdnUrl = DEFAULT_TAILWIND_CDN,
+      config: tailwindConfig,
+      plugins = [],
+      usePlayCdn = false,
+      onReady,
+      onError,
+      preventFOUC: shouldPreventFOUC = true,
+      enablePreload = true
+    } = config;
+    if (shouldPreventFOUC) {
+      preventFOUC();
+    }
+    if (enablePreload) {
+      preloadTailwind(cdnUrl, usePlayCdn);
+    }
+    if (window.tailwind) {
+      tailwindInjected = true;
+      markTailwindAsLoaded();
+      if (shouldPreventFOUC) {
+        removeFOUCPrevention();
+      }
+      if (tailwindReadyResolve) {
+        tailwindReadyResolve();
+        tailwindReadyResolve = null;
+      }
+      config.onReady?.();
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = usePlayCdn ? `${cdnUrl}?plugins=forms,typography,aspect-ratio` : cdnUrl;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      tailwindInjected = true;
+      tailwindScript = script;
+      markTailwindAsLoaded();
+      if (tailwindConfig && window.tailwind) {
+        window.tailwind.config = tailwindConfig;
+      }
+      const delay = wasTailwindPreviouslyLoaded() ? 10 : 50;
+      setTimeout(() => {
+        if (shouldPreventFOUC) {
+          removeFOUCPrevention();
+        }
+        if (tailwindReadyResolve) {
+          tailwindReadyResolve();
+          tailwindReadyResolve = null;
+        }
+        onReady?.();
+        resolve();
+      }, delay);
+    };
+    script.onerror = (event) => {
+      const error = new Error(`Failed to load Tailwind CSS from ${cdnUrl}`);
+      if (shouldPreventFOUC) {
+        removeFOUCPrevention();
+      }
+      if (tailwindReadyResolve) {
+        tailwindReadyResolve();
+        tailwindReadyResolve = null;
+      }
+      onError?.(error);
+      reject(error);
+    };
+    document.head.appendChild(script);
+  });
+}
+function removeTailwind() {
+  if (tailwindScript && tailwindScript.parentNode) {
+    tailwindScript.parentNode.removeChild(tailwindScript);
+    tailwindScript = null;
+    tailwindInjected = false;
+    tailwindReadyPromise = null;
+    tailwindReadyResolve = null;
+    delete window.tailwind;
+  }
+}
+function isTailwindLoaded() {
+  return tailwindInjected || !!window.tailwind;
+}
+function getTailwind() {
+  return window.tailwind;
+}
+function updateTailwindConfig(config) {
+  if (window.tailwind) {
+    window.tailwind.config = {
+      ...window.tailwind.config,
+      ...config
+    };
+  }
+}
+function addCustomStyles(css, id) {
+  if (typeof document === "undefined") {
+    throw new Error("addCustomStyles can only be used in browser environment");
+  }
+  const styleId = id || `servly-custom-styles-${Date.now()}`;
+  let existingStyle = document.getElementById(styleId);
+  if (existingStyle) {
+    existingStyle.textContent = css;
+    return existingStyle;
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = css;
+  document.head.appendChild(style);
+  return style;
+}
+function removeCustomStyles(id) {
+  if (typeof document === "undefined") return;
+  const style = document.getElementById(id);
+  if (style && style.parentNode) {
+    style.parentNode.removeChild(style);
+  }
+}
+var DEFAULT_SERVLY_TAILWIND_CONFIG = {
+  theme: {
+    extend: {
+      // Add any Servly-specific theme extensions here
+    }
+  },
+  // Safelist common dynamic classes
+  safelist: [
+    // Spacing
+    { pattern: /^(p|m|gap)-/ },
+    // Sizing
+    { pattern: /^(w|h|min-w|min-h|max-w|max-h)-/ },
+    // Flexbox
+    { pattern: /^(flex|justify|items|self)-/ },
+    // Grid
+    { pattern: /^(grid|col|row)-/ },
+    // Colors
+    { pattern: /^(bg|text|border|ring)-/ },
+    // Typography
+    { pattern: /^(font|text|leading|tracking)-/ },
+    // Borders
+    { pattern: /^(rounded|border)-/ },
+    // Effects
+    { pattern: /^(shadow|opacity|blur)-/ },
+    // Transforms
+    { pattern: /^(scale|rotate|translate|skew)-/ },
+    // Transitions
+    { pattern: /^(transition|duration|ease|delay)-/ }
+  ]
+};
+async function initServlyTailwind(customConfig) {
+  const config = customConfig ? { ...DEFAULT_SERVLY_TAILWIND_CONFIG, ...customConfig } : DEFAULT_SERVLY_TAILWIND_CONFIG;
+  await injectTailwind({
+    config,
+    usePlayCdn: true
+  });
+}
+var injectTailwindStyles = initServlyTailwind;
+var tailwind_default = {
+  injectTailwind,
+  injectTailwindStyles,
+  removeTailwind,
+  isTailwindLoaded,
+  isTailwindReady,
+  waitForTailwind,
+  getTailwind,
+  updateTailwindConfig,
+  addCustomStyles,
+  removeCustomStyles,
+  initServlyTailwind,
+  preventFOUC,
+  removeFOUCPrevention,
+  markElementReady,
+  preloadTailwind,
+  DEFAULT_SERVLY_TAILWIND_CONFIG
+};
+
+export {
+  preloadTailwind,
+  preventFOUC,
+  removeFOUCPrevention,
+  markElementReady,
+  isTailwindReady,
+  waitForTailwind,
+  injectTailwind,
+  removeTailwind,
+  isTailwindLoaded,
+  getTailwind,
+  updateTailwindConfig,
+  addCustomStyles,
+  removeCustomStyles,
+  DEFAULT_SERVLY_TAILWIND_CONFIG,
+  initServlyTailwind,
+  injectTailwindStyles,
+  tailwind_default
+};

package/dist/index.cjs

@@ -31,10 +31,102 @@ __export(tailwind_exports, {
   injectTailwind: () => injectTailwind,
   injectTailwindStyles: () => injectTailwindStyles,
   isTailwindLoaded: () => isTailwindLoaded,
+  isTailwindReady: () => isTailwindReady,
+  markElementReady: () => markElementReady,
+  preloadTailwind: () => preloadTailwind,
+  preventFOUC: () => preventFOUC,
   removeCustomStyles: () => removeCustomStyles,
+  removeFOUCPrevention: () => removeFOUCPrevention,
   removeTailwind: () => removeTailwind,
-  updateTailwindConfig: () => updateTailwindConfig
+  updateTailwindConfig: () => updateTailwindConfig,
+  waitForTailwind: () => waitForTailwind
 });
+function wasTailwindPreviouslyLoaded() {
+  if (typeof localStorage === "undefined") return false;
+  try {
+    return localStorage.getItem(TAILWIND_CACHE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+function markTailwindAsLoaded() {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(TAILWIND_CACHE_KEY, "true");
+  } catch {
+  }
+}
+function preloadTailwind(cdnUrl, usePlayCdn) {
+  if (typeof document === "undefined") return;
+  if (document.querySelector("link[data-servly-tailwind-preload]")) return;
+  const url = cdnUrl || DEFAULT_TAILWIND_CDN;
+  const fullUrl = usePlayCdn ? `${url}?plugins=forms,typography,aspect-ratio` : url;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  link.as = "script";
+  link.href = fullUrl;
+  link.setAttribute("data-servly-tailwind-preload", "true");
+  if (document.head.firstChild) {
+    document.head.insertBefore(link, document.head.firstChild);
+  } else {
+    document.head.appendChild(link);
+  }
+  const dnsPrefetch = document.createElement("link");
+  dnsPrefetch.rel = "dns-prefetch";
+  dnsPrefetch.href = "https://cdn.tailwindcss.com";
+  document.head.appendChild(dnsPrefetch);
+}
+function preventFOUC() {
+  if (typeof document === "undefined") return;
+  if (foucStyleElement) return;
+  const wasLoaded = wasTailwindPreviouslyLoaded();
+  foucStyleElement = document.createElement("style");
+  foucStyleElement.id = "servly-fouc-prevention";
+  foucStyleElement.textContent = FOUC_PREVENTION_CSS;
+  if (document.head.firstChild) {
+    document.head.insertBefore(foucStyleElement, document.head.firstChild);
+  } else {
+    document.head.appendChild(foucStyleElement);
+  }
+  if (wasLoaded) {
+    setTimeout(() => {
+      if (window.tailwind) {
+        removeFOUCPrevention();
+      }
+    }, 100);
+  }
+}
+function removeFOUCPrevention() {
+  if (foucStyleElement && foucStyleElement.parentNode) {
+    foucStyleElement.parentNode.removeChild(foucStyleElement);
+    foucStyleElement = null;
+  }
+  if (typeof document !== "undefined") {
+    document.querySelectorAll(".servly-component, [data-servly-id]").forEach((el) => {
+      el.classList.add("servly-ready");
+    });
+  }
+}
+function markElementReady(element) {
+  element.classList.add("servly-ready");
+  element.classList.remove("servly-fouc-hidden");
+}
+function isTailwindReady() {
+  if (typeof window === "undefined") return false;
+  return tailwindInjected && !!window.tailwind;
+}
+function waitForTailwind() {
+  if (isTailwindReady()) {
+    return Promise.resolve();
+  }
+  if (tailwindReadyPromise) {
+    return tailwindReadyPromise;
+  }
+  tailwindReadyPromise = new Promise((resolve) => {
+    tailwindReadyResolve = resolve;
+  });
+  return tailwindReadyPromise;
+}
 function injectTailwind(config = {}) {
   return new Promise((resolve, reject) => {
     if (tailwindInjected && tailwindScript) {
@@ -45,34 +137,69 @@ function injectTailwind(config = {}) {
       resolve();
       return;
     }
-    if (window.tailwind) {
-      tailwindInjected = true;
-      config.onReady?.();
-      resolve();
-      return;
-    }
     const {
       cdnUrl = DEFAULT_TAILWIND_CDN,
       config: tailwindConfig,
       plugins = [],
       usePlayCdn = false,
       onReady,
-      onError
+      onError,
+      preventFOUC: shouldPreventFOUC = true,
+      enablePreload = true
     } = config;
+    if (shouldPreventFOUC) {
+      preventFOUC();
+    }
+    if (enablePreload) {
+      preloadTailwind(cdnUrl, usePlayCdn);
+    }
+    if (window.tailwind) {
+      tailwindInjected = true;
+      markTailwindAsLoaded();
+      if (shouldPreventFOUC) {
+        removeFOUCPrevention();
+      }
+      if (tailwindReadyResolve) {
+        tailwindReadyResolve();
+        tailwindReadyResolve = null;
+      }
+      config.onReady?.();
+      resolve();
+      return;
+    }
     const script = document.createElement("script");
     script.src = usePlayCdn ? `${cdnUrl}?plugins=forms,typography,aspect-ratio` : cdnUrl;
     script.async = true;
+    script.crossOrigin = "anonymous";
     script.onload = () => {
       tailwindInjected = true;
       tailwindScript = script;
+      markTailwindAsLoaded();
       if (tailwindConfig && window.tailwind) {
         window.tailwind.config = tailwindConfig;
       }
-      onReady?.();
-      resolve();
+      const delay = wasTailwindPreviouslyLoaded() ? 10 : 50;
+      setTimeout(() => {
+        if (shouldPreventFOUC) {
+          removeFOUCPrevention();
+        }
+        if (tailwindReadyResolve) {
+          tailwindReadyResolve();
+          tailwindReadyResolve = null;
+        }
+        onReady?.();
+        resolve();
+      }, delay);
     };
     script.onerror = (event) => {
       const error = new Error(`Failed to load Tailwind CSS from ${cdnUrl}`);
+      if (shouldPreventFOUC) {
+        removeFOUCPrevention();
+      }
+      if (tailwindReadyResolve) {
+        tailwindReadyResolve();
+        tailwindReadyResolve = null;
+      }
       onError?.(error);
       reject(error);
     };
@@ -84,6 +211,8 @@ function removeTailwind() {
     tailwindScript.parentNode.removeChild(tailwindScript);
     tailwindScript = null;
     tailwindInjected = false;
+    tailwindReadyPromise = null;
+    tailwindReadyResolve = null;
     delete window.tailwind;
   }
 }
@@ -131,13 +260,26 @@ async function initServlyTailwind(customConfig) {
     usePlayCdn: true
   });
 }
-var DEFAULT_TAILWIND_CDN, tailwindInjected, tailwindScript, DEFAULT_SERVLY_TAILWIND_CONFIG, injectTailwindStyles, tailwind_default;
+var DEFAULT_TAILWIND_CDN, TAILWIND_CACHE_KEY, tailwindInjected, tailwindScript, foucStyleElement, tailwindReadyPromise, tailwindReadyResolve, FOUC_PREVENTION_CSS, DEFAULT_SERVLY_TAILWIND_CONFIG, injectTailwindStyles, tailwind_default;
 var init_tailwind = __esm({
   "src/tailwind.ts"() {
     "use strict";
     DEFAULT_TAILWIND_CDN = "https://cdn.tailwindcss.com";
+    TAILWIND_CACHE_KEY = "servly-tailwind-loaded";
     tailwindInjected = false;
     tailwindScript = null;
+    foucStyleElement = null;
+    tailwindReadyPromise = null;
+    tailwindReadyResolve = null;
+    FOUC_PREVENTION_CSS = `
+  .servly-component:not(.servly-ready),
+  [data-servly-id]:not(.servly-ready) {
+    visibility: hidden !important;
+  }
+  .servly-fouc-hidden {
+    visibility: hidden !important;
+  }
+`;
     DEFAULT_SERVLY_TAILWIND_CONFIG = {
       theme: {
         extend: {
@@ -174,11 +316,17 @@ var init_tailwind = __esm({
       injectTailwindStyles,
       removeTailwind,
       isTailwindLoaded,
+      isTailwindReady,
+      waitForTailwind,
       getTailwind,
       updateTailwindConfig,
       addCustomStyles,
       removeCustomStyles,
       initServlyTailwind,
+      preventFOUC,
+      removeFOUCPrevention,
+      markElementReady,
+      preloadTailwind,
       DEFAULT_SERVLY_TAILWIND_CONFIG
     };
   }
@@ -462,16 +610,21 @@ __export(index_exports, {
   isIconRegistered: () => isIconRegistered,
   isIconSetSupported: () => isIconSetSupported,
   isTailwindLoaded: () => isTailwindLoaded,
+  isTailwindReady: () => isTailwindReady,
   isValidSpecifier: () => isValidSpecifier,
+  markElementReady: () => markElementReady,
   navigateTo: () => navigateTo,
   parseVersion: () => parseVersion,
   prefetchComponents: () => prefetchComponents,
   preloadIcons: () => preloadIcons,
+  preloadTailwind: () => preloadTailwind,
+  preventFOUC: () => preventFOUC,
   processStyles: () => processStyles,
   registerIcon: () => registerIcon,
   registerIcons: () => registerIcons,
   removeClass: () => removeClass,
   removeCustomStyles: () => removeCustomStyles,
+  removeFOUCPrevention: () => removeFOUCPrevention,
   removeLocalStorage: () => removeLocalStorage,
   removeSessionStorage: () => removeSessionStorage,
   removeTailwind: () => removeTailwind,
@@ -506,7 +659,8 @@ __export(index_exports, {
   updateStyles: () => updateStyles,
   updateTailwindConfig: () => updateTailwindConfig,
   validateAssertion: () => validateAssertion,
-  validateProps: () => validateProps
+  validateProps: () => validateProps,
+  waitForTailwind: () => waitForTailwind
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -3438,7 +3592,30 @@ function resolveComponentViewInputs(bindings, context, parentInputs) {
       case "static":
       case "value":
       case "constant":
-        resolved[key] = binding.value;
+        if (binding.value && typeof binding.value === "object" && Array.isArray(binding.value.plugins)) {
+          const plugins = binding.value.plugins;
+          resolved[key] = (event) => {
+            for (const plugin of plugins) {
+              const pluginType = plugin.type || plugin.key;
+              if (pluginType === "executeCode" && plugin.code) {
+                try {
+                  const fn = new Function(
+                    "event",
+                    "props",
+                    "state",
+                    "context",
+                    plugin.code
+                  );
+                  fn(event, context.props || {}, context.state || {}, context.context || {});
+                } catch (error) {
+                  console.error("[Servly] executeCode error:", error);
+                }
+              }
+            }
+          };
+        } else {
+          resolved[key] = binding.value;
+        }
         break;
       case "state":
         if (binding.path && context.state) {
@@ -5236,16 +5413,21 @@ init_tailwind();
   isIconRegistered,
   isIconSetSupported,
   isTailwindLoaded,
+  isTailwindReady,
   isValidSpecifier,
+  markElementReady,
   navigateTo,
   parseVersion,
   prefetchComponents,
   preloadIcons,
+  preloadTailwind,
+  preventFOUC,
   processStyles,
   registerIcon,
   registerIcons,
   removeClass,
   removeCustomStyles,
+  removeFOUCPrevention,
   removeLocalStorage,
   removeSessionStorage,
   removeTailwind,
@@ -5280,5 +5462,6 @@ init_tailwind();
   updateStyles,
   updateTailwindConfig,
   validateAssertion,
-  validateProps
+  validateProps,
+  waitForTailwind
 });