@stacksjs/stx 0.2.94 → 0.2.96

package/dist/pwa/audit.js

@@ -1,2 +1,255 @@
-// @bun
-import{Ae as e,we as a,xe as b,ye as c,ze as d}from"../chunk-nw34xajc.js";import"../chunk-3jm3snz8.js";export{d as runPwaAudit,e as formatAuditResult,c as calculateAuditResult,a as auditConfig,b as auditBuildOutput};
+import fs from "node:fs";
+import path from "node:path";
+export function auditConfig(options) {
+  const checks = [], pwa = options.pwa;
+  checks.push({
+    id: "pwa-enabled",
+    name: "PWA Enabled",
+    category: "required",
+    passed: pwa?.enabled === !0,
+    message: pwa?.enabled ? "PWA is enabled" : "PWA is not enabled in config"
+  });
+  if (!pwa?.enabled)
+    return checks;
+  checks.push({
+    id: "manifest-name",
+    name: "App Name",
+    category: "required",
+    passed: Boolean(pwa.manifest?.name),
+    message: pwa.manifest?.name ? `App name: "${pwa.manifest.name}"` : "Missing required manifest name"
+  });
+  checks.push({
+    id: "manifest-short-name",
+    name: "Short Name",
+    category: "recommended",
+    passed: Boolean(pwa.manifest?.shortName),
+    message: pwa.manifest?.shortName ? `Short name: "${pwa.manifest.shortName}"` : "Short name not set (will use full name)"
+  });
+  checks.push({
+    id: "manifest-description",
+    name: "App Description",
+    category: "recommended",
+    passed: Boolean(pwa.manifest?.description),
+    message: pwa.manifest?.description ? "Description is set" : "App description not provided"
+  });
+  checks.push({
+    id: "manifest-theme-color",
+    name: "Theme Color",
+    category: "required",
+    passed: Boolean(pwa.manifest?.themeColor),
+    message: pwa.manifest?.themeColor ? `Theme color: ${pwa.manifest.themeColor}` : "Theme color not set"
+  });
+  checks.push({
+    id: "manifest-background-color",
+    name: "Background Color",
+    category: "required",
+    passed: Boolean(pwa.manifest?.backgroundColor),
+    message: pwa.manifest?.backgroundColor ? `Background color: ${pwa.manifest.backgroundColor}` : "Background color not set"
+  });
+  checks.push({
+    id: "manifest-display",
+    name: "Display Mode",
+    category: "required",
+    passed: ["standalone", "fullscreen", "minimal-ui"].includes(pwa.manifest?.display || ""),
+    message: pwa.manifest?.display ? `Display mode: ${pwa.manifest.display}` : "Display mode should be standalone, fullscreen, or minimal-ui"
+  });
+  checks.push({
+    id: "manifest-start-url",
+    name: "Start URL",
+    category: "required",
+    passed: Boolean(pwa.manifest?.startUrl),
+    message: pwa.manifest?.startUrl ? `Start URL: ${pwa.manifest.startUrl}` : "Start URL not set"
+  });
+  checks.push({
+    id: "icons-source",
+    name: "Icon Source",
+    category: "required",
+    passed: Boolean(pwa.icons?.src),
+    message: pwa.icons?.src ? `Icon source: ${pwa.icons.src}` : "No icon source configured"
+  });
+  const iconSizes = pwa.icons?.sizes || [];
+  checks.push({
+    id: "icons-192",
+    name: "192x192 Icon",
+    category: "required",
+    passed: iconSizes.includes(192),
+    message: iconSizes.includes(192) ? "192x192 icon will be generated" : "Missing 192x192 icon (required for Android)"
+  });
+  checks.push({
+    id: "icons-512",
+    name: "512x512 Icon",
+    category: "required",
+    passed: iconSizes.includes(512),
+    message: iconSizes.includes(512) ? "512x512 icon will be generated" : "Missing 512x512 icon (required for splash screen)"
+  });
+  checks.push({
+    id: "icons-maskable",
+    name: "Maskable Icon",
+    category: "recommended",
+    passed: pwa.icons?.purpose?.includes("maskable") || !1,
+    message: pwa.icons?.purpose?.includes("maskable") ? "Maskable icon purpose is set" : "Consider adding maskable icon purpose for adaptive icons"
+  });
+  checks.push({
+    id: "sw-configured",
+    name: "Service Worker",
+    category: "required",
+    passed: Boolean(pwa.serviceWorker),
+    message: pwa.serviceWorker ? "Service worker is configured" : "Service worker configuration missing"
+  });
+  checks.push({
+    id: "sw-cache-version",
+    name: "Cache Version",
+    category: "recommended",
+    passed: Boolean(pwa.serviceWorker?.cacheVersion),
+    message: pwa.serviceWorker?.cacheVersion ? `Cache version: ${pwa.serviceWorker.cacheVersion}` : "Set cache version for proper cache busting"
+  });
+  checks.push({
+    id: "offline-enabled",
+    name: "Offline Support",
+    category: "required",
+    passed: pwa.offline?.enabled === !0,
+    message: pwa.offline?.enabled ? "Offline support is enabled" : "Offline support is disabled"
+  });
+  const routes = pwa.routes || [];
+  checks.push({
+    id: "caching-strategies",
+    name: "Caching Strategies",
+    category: "recommended",
+    passed: routes.length > 0,
+    message: routes.length > 0 ? `${routes.length} route caching strategies configured` : "No custom caching strategies defined"
+  });
+  checks.push({
+    id: "push-config",
+    name: "Push Notifications",
+    category: "optional",
+    passed: !pwa.push?.enabled || Boolean(pwa.push?.vapidPublicKey),
+    message: pwa.push?.enabled ? pwa.push?.vapidPublicKey ? "Push notifications configured with VAPID key" : "Push enabled but missing VAPID key" : "Push notifications not enabled"
+  });
+  checks.push({
+    id: "share-target",
+    name: "Share Target",
+    category: "optional",
+    passed: !0,
+    message: pwa.shareTarget?.enabled ? `Share target enabled at ${pwa.shareTarget.action}` : "Share target not enabled"
+  });
+  checks.push({
+    id: "auto-inject",
+    name: "Auto-injection",
+    category: "recommended",
+    passed: pwa.autoInject !== !1,
+    message: pwa.autoInject !== !1 ? "PWA tags will be auto-injected" : "Auto-injection disabled - manual tag insertion required"
+  });
+  return checks;
+}
+export function auditBuildOutput(outputDir) {
+  const checks = [], manifestPath = path.join(outputDir, "manifest.json"), manifestExists = fs.existsSync(manifestPath);
+  checks.push({
+    id: "build-manifest",
+    name: "Manifest File",
+    category: "required",
+    passed: manifestExists,
+    message: manifestExists ? "manifest.json exists" : "manifest.json not found in build output"
+  });
+  if (manifestExists)
+    try {
+      const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+      checks.push({
+        id: "build-manifest-valid",
+        name: "Valid Manifest JSON",
+        category: "required",
+        passed: !0,
+        message: "Manifest is valid JSON"
+      });
+      checks.push({
+        id: "build-manifest-icons",
+        name: "Manifest Icons",
+        category: "required",
+        passed: Array.isArray(manifest.icons) && manifest.icons.length > 0,
+        message: manifest.icons?.length ? `${manifest.icons.length} icons defined in manifest` : "No icons defined in manifest"
+      });
+    } catch {
+      checks.push({
+        id: "build-manifest-valid",
+        name: "Valid Manifest JSON",
+        category: "required",
+        passed: !1,
+        message: "Manifest is not valid JSON"
+      });
+    }
+  const swPath = path.join(outputDir, "sw.js"), swExists = fs.existsSync(swPath);
+  checks.push({
+    id: "build-sw",
+    name: "Service Worker File",
+    category: "required",
+    passed: swExists,
+    message: swExists ? "Service worker (sw.js) exists" : "Service worker not found in build output"
+  });
+  const offlinePath = path.join(outputDir, "offline.html"), offlineExists = fs.existsSync(offlinePath);
+  checks.push({
+    id: "build-offline",
+    name: "Offline Page",
+    category: "recommended",
+    passed: offlineExists,
+    message: offlineExists ? "Offline page exists" : "No offline.html found"
+  });
+  const iconsDir = path.join(outputDir, "pwa-icons");
+  if (fs.existsSync(iconsDir)) {
+    const iconFiles = fs.readdirSync(iconsDir).filter((f) => f.endsWith(".png") || f.endsWith(".webp"));
+    checks.push({
+      id: "build-icons",
+      name: "Generated Icons",
+      category: "required",
+      passed: iconFiles.length > 0,
+      message: iconFiles.length > 0 ? `${iconFiles.length} icon files generated` : "No icon files found"
+    });
+  } else
+    checks.push({
+      id: "build-icons",
+      name: "Generated Icons",
+      category: "required",
+      passed: !1,
+      message: "Icons directory not found"
+    });
+  return checks;
+}
+export function calculateAuditResult(checks) {
+  const requiredChecks = checks.filter((c) => c.category === "required"), recommendedChecks = checks.filter((c) => c.category === "recommended"), requiredPassed = requiredChecks.filter((c) => c.passed).length, recommendedPassed = recommendedChecks.filter((c) => c.passed).length, requiredScore = requiredChecks.length > 0 ? requiredPassed / requiredChecks.length * 70 : 70, recommendedScore = recommendedChecks.length > 0 ? recommendedPassed / recommendedChecks.length * 30 : 30;
+  return {
+    score: Math.round(requiredScore + recommendedScore),
+    passed: checks.filter((c) => c.passed).length,
+    failed: checks.filter((c) => !c.passed && c.category === "required").length,
+    warnings: checks.filter((c) => !c.passed && c.category !== "required").length,
+    checks
+  };
+}
+export function runPwaAudit(options, outputDir) {
+  const configChecks = auditConfig(options), buildChecks = outputDir && fs.existsSync(outputDir) ? auditBuildOutput(outputDir) : [];
+  return calculateAuditResult([...configChecks, ...buildChecks]);
+}
+export function formatAuditResult(result) {
+  const lines = [];
+  lines.push(`
+=== PWA Audit Report ===
+`);
+  const scoreColor = result.score >= 90 ? "32" : result.score >= 70 ? "33" : "31";
+  lines.push(`Score: \x1B[${scoreColor}m${result.score}/100\x1B[0m`);
+  lines.push(`Passed: ${result.passed} | Failed: ${result.failed} | Warnings: ${result.warnings}
+`);
+  const categories = ["required", "recommended", "optional"];
+  for (const category of categories) {
+    const categoryChecks = result.checks.filter((c) => c.category === category);
+    if (categoryChecks.length === 0)
+      continue;
+    lines.push(`
+${category.toUpperCase()}:`);
+    for (const check of categoryChecks) {
+      const icon = check.passed ? "\x1B[32m\u2713\x1B[0m" : "\x1B[31m\u2717\x1B[0m";
+      lines.push(`  ${icon} ${check.name}: ${check.message}`);
+      if (check.details)
+        lines.push(`      ${check.details}`);
+    }
+  }
+  lines.push("");
+  return lines.join(`
+`);
+}

package/dist/pwa/directives.js

@@ -1,2 +1,332 @@
-// @bun
-import{$t as f,Wt as a,Xt as b,Yt as c,Zt as d,_t as e}from"../chunk-x39sfpvm.js";import"../chunk-3jm3snz8.js";export{f as registerPwaDirectives,b as pwaUpdateDirective,d as pwaPushDirective,c as pwaOfflineDirective,a as pwaInstallDirective,e as pwaDirectives};
+function generateInstallButton(content, options) {
+  const themeColor = options.pwa?.manifest?.themeColor || "#4f46e5";
+  return `<div class="stx-pwa-install" style="display:none;">
+  ${content}
+</div>
+<script>
+(function() {
+  let deferredPrompt;
+  const installContainer = document.querySelector('.stx-pwa-install');
+  const installBtn = installContainer?.querySelector('button, [data-pwa-install]') || installContainer;
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    if (installContainer) {
+      installContainer.style.display = 'block';
+    }
+  });
+
+  if (installBtn) {
+    installBtn.addEventListener('click', async () => {
+      if (!deferredPrompt) return;
+      deferredPrompt.prompt();
+      const { outcome } = await deferredPrompt.userChoice;
+      console.log('[PWA] Install prompt outcome:', outcome);
+      deferredPrompt = null;
+      if (installContainer) {
+        installContainer.style.display = 'none';
+      }
+    });
+  }
+
+  window.addEventListener('appinstalled', () => {
+    console.log('[PWA] App installed');
+    deferredPrompt = null;
+    if (installContainer) {
+      installContainer.style.display = 'none';
+    }
+  });
+
+  // Check if already installed
+  if (window.matchMedia('(display-mode: standalone)').matches) {
+    if (installContainer) {
+      installContainer.style.display = 'none';
+    }
+  }
+})();
+</script>`;
+}
+function generateUpdatePrompt(content, options) {
+  const config = options.pwa?.updates, message = config?.message || "A new version is available. Reload to update?", autoReload = config?.autoReload || !1, hasCustomContent = content.trim().length > 0, defaultUI = `
+<div class="stx-pwa-update-banner" style="
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
+  z-index: 99999;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+">
+  <span style="font-size: 14px;">${message}</span>
+  <div style="display: flex; gap: 12px;">
+    <button data-pwa-dismiss style="
+      background: transparent;
+      border: 1px solid rgba(255,255,255,0.5);
+      color: white;
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+    ">Later</button>
+    <button data-pwa-reload style="
+      background: white;
+      border: none;
+      color: #667eea;
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 600;
+      font-size: 14px;
+    ">Update Now</button>
+  </div>
+</div>`;
+  return `${hasCustomContent ? `<div class="stx-pwa-update" style="display:none;">${content}</div>` : defaultUI}
+<script>
+(function() {
+  const updateContainer = document.querySelector('.stx-pwa-update, .stx-pwa-update-banner');
+  const dismissBtn = updateContainer?.querySelector('[data-pwa-dismiss]');
+  const reloadBtn = updateContainer?.querySelector('[data-pwa-reload], button');
+  const autoReload = ${autoReload};
+  let newWorker = null;
+
+  function showUpdate() {
+    if (updateContainer) {
+      if (updateContainer.classList.contains('stx-pwa-update-banner')) {
+        updateContainer.style.transform = 'translateY(0)';
+      }
+else {
+        updateContainer.style.display = 'block';
+      }
+    }
+    if (autoReload) {
+      setTimeout(() => window.location.reload(), 1000);
+    }
+  }
+
+  function hideUpdate() {
+    if (updateContainer) {
+      if (updateContainer.classList.contains('stx-pwa-update-banner')) {
+        updateContainer.style.transform = 'translateY(100%)';
+      }
+else {
+        updateContainer.style.display = 'none';
+      }
+    }
+  }
+
+  if (dismissBtn) {
+    dismissBtn.addEventListener('click', hideUpdate);
+  }
+
+  if (reloadBtn) {
+    reloadBtn.addEventListener('click', () => {
+      if (newWorker) {
+        newWorker.postMessage({ type: 'SKIP_WAITING' });
+      }
+      window.location.reload();
+    });
+  }
+
+  // Listen for service worker updates
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.addEventListener('updatefound', () => {
+        newWorker = registration.installing;
+        if (newWorker) {
+          newWorker.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              showUpdate();
+            }
+          });
+        }
+      });
+    });
+
+    // Handle controller change (after skipWaiting)
+    navigator.serviceWorker.addEventListener('controllerchange', () => {
+      window.location.reload();
+    });
+  }
+
+  // Also listen for custom event
+  window.addEventListener('pwa-update-available', showUpdate);
+})();
+</script>`;
+}
+function generateOfflineIndicator(content, options) {
+  return `${content.trim().length > 0 ? `<div class="stx-offline-indicator" style="display:none;">${content}</div>` : `
+<div class="stx-offline-indicator" style="
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  background: #ef4444;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+  z-index: 99999;
+  display: none;
+  align-items: center;
+  gap: 8px;
+">
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0"/>
+    <circle cx="12" cy="20" r="1"/>
+  </svg>
+  <span>You are offline</span>
+</div>`}
+<script>
+(function() {
+  const indicator = document.querySelector('.stx-offline-indicator');
+
+  function updateStatus() {
+    if (indicator) {
+      indicator.style.display = navigator.onLine ? 'none' : 'flex';
+    }
+  }
+
+  window.addEventListener('online', updateStatus);
+  window.addEventListener('offline', updateStatus);
+  updateStatus();
+})();
+</script>`;
+}
+function generatePushSubscribe(content, options) {
+  const pushConfig = options.pwa?.push, vapidKey = pushConfig?.vapidPublicKey || "", endpoint = pushConfig?.subscriptionEndpoint || "/api/push/subscribe";
+  return `<div class="stx-pwa-push" style="display:none;">
+  ${content}
+</div>
+<script>
+(function() {
+  const pushContainer = document.querySelector('.stx-pwa-push');
+  const pushBtn = pushContainer?.querySelector('button, [data-pwa-push]') || pushContainer;
+  const vapidKey = '${vapidKey}';
+  const endpoint = '${endpoint}';
+
+  async function checkPushSupport() {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+      console.log('[PWA] Push notifications not supported');
+      return false;
+    }
+    return true;
+  }
+
+  async function subscribeToPush() {
+    try {
+      const registration = await navigator.serviceWorker.ready;
+
+      // Check existing subscription
+      let subscription = await registration.pushManager.getSubscription();
+
+      if (!subscription && vapidKey) {
+        // Convert VAPID key
+        const urlBase64ToUint8Array = (base64String) => {
+          const padding = '='.repeat((4 - base64String.length % 4) % 4);
+          const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+          const rawData = window.atob(base64);
+          const outputArray = new Uint8Array(rawData.length);
+          for (let i = 0; i < rawData.length; ++i) {
+            outputArray[i] = rawData.charCodeAt(i);
+          }
+          return outputArray;
+        };
+
+        subscription = await registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: urlBase64ToUint8Array(vapidKey)
+        });
+
+        // Send subscription to server
+        if (endpoint) {
+          await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(subscription)
+          });
+        }
+
+        console.log('[PWA] Push subscription created');
+        return subscription;
+      }
+
+      return subscription;
+    }
+catch (error) {
+      console.error('[PWA] Push subscription failed:', error);
+      return null;
+    }
+  }
+
+  async function init() {
+    if (await checkPushSupport()) {
+      const permission = await Notification.requestPermission();
+      if (permission === 'granted' && pushContainer) {
+        pushContainer.style.display = 'block';
+      }
+    }
+  }
+
+  if (pushBtn) {
+    pushBtn.addEventListener('click', subscribeToPush);
+  }
+
+  // Check support on load
+  if (pushContainer) {
+    init();
+  }
+})();
+</script>`;
+}
+export const pwaInstallDirective = {
+  name: "pwa.installButton",
+  handler: (content, _params, context, _filePath) => {
+    const options = context.__stx_options || {};
+    return generateInstallButton(content, options);
+  },
+  hasEndTag: !0,
+  description: "Renders a PWA install prompt button that appears when the app can be installed"
+}, pwaUpdateDirective = {
+  name: "pwa.updatePrompt",
+  handler: (content, _params, context, _filePath) => {
+    const options = context.__stx_options || {};
+    return generateUpdatePrompt(content, options);
+  },
+  hasEndTag: !0,
+  description: "Renders a PWA update notification UI when a new version is available"
+}, pwaOfflineDirective = {
+  name: "pwa.offlineIndicator",
+  handler: (content, _params, context, _filePath) => {
+    const options = context.__stx_options || {};
+    return generateOfflineIndicator(content, options);
+  },
+  hasEndTag: !0,
+  description: "Renders an offline status indicator that shows when the user loses connection"
+}, pwaPushDirective = {
+  name: "pwa.pushSubscribe",
+  handler: (content, _params, context, _filePath) => {
+    const options = context.__stx_options || {};
+    return generatePushSubscribe(content, options);
+  },
+  hasEndTag: !0,
+  description: "Renders a push notification subscription button"
+}, pwaDirectives = [
+  pwaInstallDirective,
+  pwaUpdateDirective,
+  pwaOfflineDirective,
+  pwaPushDirective
+];
+export function registerPwaDirectives(customDirectives) {
+  return [...customDirectives, ...pwaDirectives];
+}