cumstack 1.0.0

package/src/app/client/hmr.js

@@ -0,0 +1,161 @@
+/**
+ * cumstack HMR (Hot Module Reload)
+ * built-in hmr for wrangler development
+ */
+
+let hmrWebSocket = null;
+let reconnectAttempts = 0;
+let reconnectTimeout = null;
+const maxReconnectAttempts = 10;
+
+/**
+ * initialize hmr connection for development
+ * @returns {void}
+ */
+export function initHMR() {
+  if (typeof window === 'undefined' || !globalThis.__ENVIRONMENT__?.includes('dev')) return;
+  const hmrPort = globalThis.__HMR_PORT__ || 8790;
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.hostname}:${hmrPort}`;
+  connectHMR(wsUrl);
+}
+
+/**
+ * establish websocket connection to HMR server
+ * @param {string} wsUrl - WebSocket URL
+ * @returns {void}
+ */
+function connectHMR(wsUrl) {
+  try {
+    hmrWebSocket = new WebSocket(wsUrl);
+    hmrWebSocket.addEventListener('open', () => {
+      console.log('[WS] Established connection to HMR server');
+      reconnectAttempts = 0;
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+        reconnectTimeout = null;
+      }
+    });
+
+    hmrWebSocket.addEventListener('message', (event) => {
+      const data = JSON.parse(event.data);
+      if (data.type === 'server-update') handleServerUpdate(data);
+      else if (data.type === 'full-reload') window.location.reload();
+      else if (data.type === 'css-update') handleCSSUpdate(data);
+      else if (data.type === 'js-update') handleJSUpdate(data);
+      else if (data.type === 'reload') window.location.reload();
+      else if (data.type === 'update') handleHotUpdate(data);
+    });
+
+    hmrWebSocket.addEventListener('close', () => {
+      console.log('[WS] Connection closed');
+      if (reconnectTimeout) clearTimeout(reconnectTimeout);
+      // debounced reconnection
+      if (reconnectAttempts < maxReconnectAttempts) {
+        reconnectAttempts++;
+        const delay = Math.min(1000 * reconnectAttempts, 5000);
+        console.log(`[WS] Reconnecting...`);
+        reconnectTimeout = setTimeout(() => {
+          reconnectTimeout = null;
+          connectHMR(wsUrl);
+        }, delay);
+      }
+    });
+    hmrWebSocket.addEventListener('error', (error) => console.error('[HMR] WebSocket error:', error));
+  } catch (error) {
+    console.error('[HMR] Failed to connect:', error);
+  }
+}
+
+/**
+ * handle server update from HMR
+ * @param {Object} data - Update data
+ * @returns {void}
+ */
+function handleServerUpdate(data) {
+  const currentTimestamp = window.__BUILD_TIMESTAMP__;
+  const pollForNewBuild = (attempt = 1, maxAttempts = 40) => {
+    fetch(window.location.href, { headers: { 'Cache-Control': 'no-cache', Pragma: 'no-cache' } })
+      .then((response) => response.text())
+      .then((html) => {
+        // extract build timestamp from new html
+        const timestampMatch = html.match(/window\.__BUILD_TIMESTAMP__\s*=\s*(\d+)/);
+        const newTimestamp = timestampMatch ? parseInt(timestampMatch[1]) : null;
+        if (!newTimestamp || newTimestamp === currentTimestamp) {
+          // build not ready yet, poll
+          if (attempt < maxAttempts) setTimeout(() => pollForNewBuild(attempt + 1, maxAttempts), 100);
+          else window.location.reload();
+          return;
+        }
+        const parser = new DOMParser();
+        const newDoc = parser.parseFromString(html, 'text/html');
+        const newApp = newDoc.getElementById('app');
+        const currentApp = document.getElementById('app');
+        if (newApp && currentApp) {
+          currentApp.innerHTML = newApp.innerHTML;
+          // update build timestamp
+          window.__BUILD_TIMESTAMP__ = newTimestamp;
+          // re-initialize client-side components
+          if (window.initComponents) window.initComponents();
+        }
+      })
+      .catch((error) => {
+        if (attempt < maxAttempts) setTimeout(() => pollForNewBuild(attempt + 1, maxAttempts), 100);
+        else {
+          console.error('[HMR] Failed to fetch updated HTML:', error);
+          window.location.reload();
+        }
+      });
+  };
+  // small delay to let wrangler start reloading, then start polling
+  setTimeout(() => pollForNewBuild(), 150);
+}
+
+/**
+ * handle hot module update
+ * @param {Object} data - Update data
+ * @returns {void}
+ */
+function handleHotUpdate(data) {
+  window.location.reload();
+}
+
+/**
+ * handle CSS update from HMR
+ * @param {Object} data - Update data with timestamp
+ * @returns {void}
+ */
+function handleCSSUpdate(data) {
+  const links = document.querySelectorAll('link[rel="stylesheet"]');
+  links.forEach((link) => {
+    const href = link.href;
+    const url = new URL(href);
+    // add timestamp to bust cache
+    url.searchParams.set('t', data.timestamp);
+    link.href = url.toString();
+  });
+}
+
+/**
+ * handle JavaScript update from HMR
+ * @param {Object} data - Update data
+ * @returns {void}
+ */
+function handleJSUpdate(data) {
+  window.location.reload();
+}
+
+/**
+ * dispose hmr connection and cleanup
+ * @returns {void}
+ */
+export function disposeHMR() {
+  if (reconnectTimeout) {
+    clearTimeout(reconnectTimeout);
+    reconnectTimeout = null;
+  }
+  if (hmrWebSocket) {
+    hmrWebSocket.close();
+    hmrWebSocket = null;
+  }
+}

package/src/app/client/index.js

@@ -0,0 +1,144 @@
+/**
+ * cumstack Client
+ * client-side rendering and hydration
+ */
+
+import { setLanguage, detectBrowserLanguage, clearPreferredLanguage, getUserLanguage } from '../shared/i18n.js';
+import { initComponents } from './components.js';
+import { initHMR } from './hmr.js';
+
+export { Twink } from './Twink.js';
+export { configureHydration } from '../client.js';
+
+/**
+ * get environment variable (client-side)
+ * @param {string} key - environment variable name
+ * @param {string} [fallback] - fallback value if not found
+ * @returns {string|undefined} environment variable value
+ */
+export function env(key, fallback) {
+  if (typeof window === 'undefined') return fallback;
+  const envVars = window.__ENV__ || {};
+  return envVars[key] ?? fallback;
+}
+
+/**
+ * client entry wrapper component
+ * @param {Object} props - Component props
+ * @param {*} props.children - Child elements
+ * @returns {*} Children
+ */
+export function CowgirlCreampie({ children }) {
+  return children || null;
+}
+
+/**
+ * mount and hydrate the app (client-side initialization)
+ * @param {Function} app - App component function
+ * @param {HTMLElement|string} container - Container element or selector
+ * @returns {void}
+ */
+export function cowgirl(app, container) {
+  initHMR();
+  if (typeof window !== 'undefined') window.initComponents = initComponents;
+  const pathSegments = window.location.pathname.split('/').filter(Boolean);
+  let language = 'en';
+  let isExplicitRoute = false;
+
+  if (pathSegments.length > 0 && pathSegments[0].length === 2) {
+    // LANG ROUTE - (e.g., /en/, /sv/about)
+    language = pathSegments[0];
+    isExplicitRoute = true;
+  } else {
+    // ROOT ROUTE - check for user language first, then use auto-detection
+    clearPreferredLanguage();
+    const userLang = getUserLanguage();
+    if (userLang) language = userLang;
+    else language = detectBrowserLanguage();
+  }
+  setLanguage(language, isExplicitRoute);
+  setupNavigation();
+  initComponents();
+}
+
+/**
+ * render virtual node to DOM element
+ * @param {*} vnode - Virtual node to render
+ * @param {HTMLElement} container - Container element
+ * @returns {void}
+ */
+function renderElement(vnode, container) {
+  if (vnode == null || vnode === false || vnode === true) return;
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    container.appendChild(document.createTextNode(vnode));
+    return;
+  }
+  if (Array.isArray(vnode)) {
+    vnode.forEach((child) => renderElement(child, container));
+    return;
+  }
+  if (typeof vnode === 'function') {
+    renderElement(vnode(), container);
+    return;
+  }
+  if (vnode.type === 'fragment') {
+    vnode.children?.forEach((child) => renderElement(child, container));
+    return;
+  }
+  if (typeof vnode.type === 'function') {
+    const result = vnode.type(vnode.props || {});
+    renderElement(result, container);
+    return;
+  }
+
+  const element = document.createElement(vnode.type);
+
+  // set props
+  if (vnode.props) {
+    Object.entries(vnode.props).forEach(([key, value]) => {
+      if (key === 'children') return;
+      if (key.startsWith('on') && typeof value === 'function') {
+        const eventName = key.slice(2).toLowerCase();
+        element.addEventListener(eventName, value);
+      } else if (key === 'className') element.className = value;
+      else if (key === 'style' && typeof value === 'object') Object.assign(element.style, value);
+      else if (key === 'dangerouslySetInnerHTML') element.innerHTML = value.__html;
+      else element.setAttribute(key, value);
+    });
+  }
+  // render children
+  if (vnode.children) vnode.children.forEach((child) => renderElement(child, element));
+  container.appendChild(element);
+}
+
+/**
+ * setup SPA navigation with language route handling
+ * @returns {void}
+ */
+function setupNavigation() {
+  // update all spa links to include language prefix if in a language route
+  function updateTwinksForLanguage() {
+    const inLanguageRoute = window.location.pathname.match(/^\/([a-z]{2})(?:\/|$)/);
+    if (!inLanguageRoute) return;
+    const lang = inLanguageRoute[1];
+    document.querySelectorAll('a[data-spa-link]').forEach((link) => {
+      const href = link.getAttribute('href');
+      if (!href || href.startsWith('http') || href.startsWith('//')) return;
+      // if href doesn't already have language prefix, add it
+      if (!href.match(/^\/[a-z]{2}(?:\/|$)/)) link.setAttribute('href', `/${lang}${href === '/' ? '' : href}`);
+    });
+  }
+
+  // update on initial load
+  updateTwinksForLanguage();
+
+  document.addEventListener('click', (e) => {
+    const link = e.target.closest('a[data-spa-link]');
+    if (!link) return;
+    const href = link.getAttribute('href');
+    if (!href || href.startsWith('http') || href.startsWith('//')) return;
+    e.preventDefault();
+    window.history.pushState({}, '', href);
+    window.location.reload();
+  });
+}