defuss 2.1.11 → 3.2.0

package/dist/index.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-var dom = require('./dom-B1qmM5mC.cjs');
+var dom = require('./dom-B58Ij3VD.cjs');
+var mount = require('./mount-WayWo_Wo.cjs');
 require('defuss-runtime');
 
-const inDevMode = true;
+const inDevMode = typeof process !== "undefined" && process.env ? process.env.NODE_ENV !== "production" : false;
 
 const VARIABLE_REGEX = /{([^}]*)}/g;
 const DOUBLE_BRACE_REGEX = /\{\{([^}]*)\}\}/g;
@@ -32,7 +33,7 @@ const createI18n = () => {
     get language() {
       return language;
     },
-    changeLanguage(newLanguage) {
+    changeLanguage: (newLanguage) => {
       if (newLanguage !== language) {
         language = newLanguage;
         onLanguageChangeCallbacks.forEach((callback) => {
@@ -43,7 +44,7 @@ const createI18n = () => {
     // example usage of the t function with placeholders:
     // const translatedString = t('greeting', { name: 'John', age: '30' }, 'common');
     // this would replace placeholders {name} and {age} in the translation string with 'John' and '30' respectively.
-    t(path, replacements = {}) {
+    t: (path, replacements = {}) => {
       const languageData = translationsStore.get(language);
       if (!languageData) {
         return path;
@@ -68,7 +69,7 @@ const createI18n = () => {
       }
       return interpolate(template, replacements);
     },
-    loadLanguage(newLanguage, namespaceTranslations) {
+    loadLanguage: (newLanguage, namespaceTranslations) => {
       translationsStore.set(newLanguage, {
         ...translationsStore.get(newLanguage),
         ...namespaceTranslations
@@ -94,12 +95,12 @@ if (!globalThis.__defuss_i18n) {
   globalThis.__defuss_i18n = createI18n();
 }
 const i18n = globalThis.__defuss_i18n;
-const t = i18n.t.bind(i18n);
-const changeLanguage = i18n.changeLanguage.bind(i18n);
-const loadLanguage = i18n.loadLanguage.bind(i18n);
+const t = i18n.t;
+const changeLanguage = i18n.changeLanguage;
+const loadLanguage = i18n.loadLanguage;
 const getLanguage = () => i18n.language;
 
-const Trans = ({
+const createTrans = (i18n) => ({
   key,
   values,
   tag,
@@ -138,25 +139,92 @@ const Trans = ({
       onUnmount
     },
     // initially render
-    children: i18n.t(key, values)
+    children: [i18n.t(key, values)]
   };
 };
+const Trans = createTrans(i18n);
 const T = Trans;
 
 const tokenizePath = (path) => {
-  const paramNameRegexp = /:([^\/\.\\]+)/g;
+  const paramNameRegexp = /:([a-zA-Z0-9_]+)|\*/g;
   const groups = {};
   let groupIndex = 1;
-  const pattern = path.replace(paramNameRegexp, (_, paramName) => {
-    groups[paramName] = groupIndex++;
-    return "([^/.\\]+)";
-  });
+  const escapeRegex = (str) => str.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
+  let pattern = "";
+  let lastIndex = 0;
+  let match;
+  while ((match = paramNameRegexp.exec(path)) !== null) {
+    const [fullMatch, paramName] = match;
+    const offset = match.index;
+    pattern += escapeRegex(path.slice(lastIndex, offset));
+    if (fullMatch === "*") {
+      groups["wildcard"] = groupIndex++;
+      pattern += "(.*)";
+    } else {
+      groups[paramName] = groupIndex++;
+      pattern += "([^/]+)";
+    }
+    lastIndex = offset + fullMatch.length;
+  }
+  pattern += escapeRegex(path.slice(lastIndex));
+  if (pattern.endsWith("/")) {
+    pattern = pattern.slice(0, -1) + "/?";
+  } else if (pattern !== "") {
+    pattern += "/?";
+  }
   return {
     groups,
     regexp: new RegExp(`^${pattern}$`)
   };
 };
-const matchRouteRegistrations = (routeRegistrations, actualPathName, haystackPathName) => {
+const parseParams = (str) => {
+  const params = {};
+  if (!str) return params;
+  const cleanStr = str.startsWith("?") || str.startsWith("#") ? str.slice(1) : str;
+  if (!cleanStr) return params;
+  const searchParams = new URLSearchParams(cleanStr);
+  for (const [key, value] of searchParams.entries()) {
+    params[key] = value;
+  }
+  return params;
+};
+const buildRouteRequest = (windowImpl, pathname, matched, matchedRoute, params = {}) => {
+  let protocol = "";
+  let domain = "";
+  let port = "";
+  let baseUrl = "";
+  let url = pathname;
+  let queryParams = {};
+  let hashParams = {};
+  if (windowImpl) {
+    const loc = windowImpl.location;
+    protocol = loc.protocol.replace(":", "");
+    domain = loc.hostname;
+    port = loc.port;
+    baseUrl = `${loc.protocol}//${loc.hostname}`;
+    if (loc.port) {
+      baseUrl += `:${loc.port}`;
+    }
+    url = loc.href;
+    queryParams = parseParams(loc.search);
+    hashParams = parseParams(loc.hash);
+  }
+  return {
+    match: matched,
+    matchedRoute,
+    protocol,
+    domain,
+    port,
+    baseUrl,
+    path: pathname,
+    url,
+    params,
+    queryParams,
+    hashParams
+  };
+};
+const matchRouteRegistrations = (routeRegistrations, actualPathName, haystackPathName, opts = {}, windowImpl) => {
+  const invokeHandler = opts.invokeHandler ?? true;
   for (const route of routeRegistrations) {
     if (haystackPathName && route.path !== haystackPathName) {
       continue;
@@ -164,37 +232,60 @@ const matchRouteRegistrations = (routeRegistrations, actualPathName, haystackPat
     if (route.exact && route.path !== actualPathName) {
       continue;
     }
-    const match = route.tokenizedPath.regexp.exec(actualPathName);
-    if (!match) continue;
+    const regexMatch = route.tokenizedPath.regexp.exec(actualPathName);
+    if (!regexMatch) {
+      continue;
+    }
     const params = {};
     for (const [paramName, groupIndex] of Object.entries(
       route.tokenizedPath.groups
     )) {
-      params[paramName] = match[groupIndex];
+      params[paramName] = regexMatch[groupIndex];
     }
-    const request = { url: actualPathName, params };
-    if (typeof route.handler === "function") {
+    const request = buildRouteRequest(
+      windowImpl,
+      actualPathName,
+      true,
+      route.path,
+      params
+    );
+    if (invokeHandler && typeof route.handler === "function") {
       route.handler(request);
     }
     return request;
   }
-  return false;
+  return buildRouteRequest(windowImpl, actualPathName, false, null);
 };
 const setupRouter = (config = {
   strategy: "page-refresh"
   // default
 }, windowImpl) => {
-  const routeRegistrations = [];
-  let currentPath = "";
+  const state = globalThis.__defuss_router_state__ ?? {
+    routeRegistrations: [],
+    currentRequest: null,
+    isReady: false,
+    pendingResolvers: [],
+    currentPath: "",
+    popAttached: false
+  };
+  const routeRegistrations = state.routeRegistrations;
   if (typeof window !== "undefined" && !windowImpl) {
     windowImpl = globalThis.__defuss_window || window;
   }
-  if (!windowImpl && !dom.isServer()) {
-    console.warn("Router requires a Window API implementation!");
-  }
   if (windowImpl) {
-    currentPath = windowImpl.document.location.pathname;
+    state.currentPath = windowImpl.document.location.pathname;
   }
+  const resolveFromLocation = (invokeHandler) => {
+    const pathname = windowImpl?.document.location.pathname ?? "/";
+    state.currentRequest = matchRouteRegistrations(
+      routeRegistrations,
+      pathname,
+      void 0,
+      { invokeHandler },
+      windowImpl
+    );
+    return state.currentRequest;
+  };
   const api = {
     ...config,
     listeners: [],
@@ -215,22 +306,49 @@ const setupRouter = (config = {
       return api;
     },
     match(path) {
-      return matchRouteRegistrations(
+      const pathname = windowImpl?.document.location.pathname ?? "/";
+      const req = matchRouteRegistrations(
+        routeRegistrations,
+        pathname,
+        path,
+        { invokeHandler: false },
+        windowImpl
+      );
+      return req;
+    },
+    resolve(pathname) {
+      const actualPathname = pathname ?? windowImpl?.document.location.pathname ?? "/";
+      state.currentRequest = matchRouteRegistrations(
         routeRegistrations,
-        windowImpl.document.location.pathname,
-        path
+        actualPathname,
+        void 0,
+        { invokeHandler: false },
+        windowImpl
       );
+      return state.currentRequest;
+    },
+    getRequest() {
+      if (state.currentRequest) return state.currentRequest;
+      return resolveFromLocation(false);
     },
     navigate(newPath) {
       const strategy = api.strategy || "page-refresh";
-      const oldPath = currentPath;
+      const oldPath = state.currentPath;
       if (strategy === "page-refresh") {
-        document.location.href = newPath;
+        windowImpl.location.href = newPath;
       } else if (strategy === "slot-refresh") {
+        const pathname = newPath.split("?")[0].split("#")[0];
         if (typeof windowImpl !== "undefined") {
           windowImpl.history.pushState({}, "", newPath);
         }
-        currentPath = newPath;
+        state.currentPath = pathname;
+        state.currentRequest = matchRouteRegistrations(
+          routeRegistrations,
+          pathname,
+          void 0,
+          { invokeHandler: false },
+          windowImpl
+        );
         queueMicrotask(() => {
           for (const listener of api.listeners) {
             listener(newPath, oldPath);
@@ -244,19 +362,39 @@ const setupRouter = (config = {
     destroy() {
       if (windowImpl && api.strategy === "slot-refresh") {
         windowImpl.removeEventListener("popstate", handlePopState);
+        state.popAttached = false;
       }
     },
     attachPopStateHandler() {
-      if (windowImpl && api.strategy === "slot-refresh") {
+      if (windowImpl && api.strategy === "slot-refresh" && !state.popAttached) {
         windowImpl.addEventListener("popstate", handlePopState);
+        state.popAttached = true;
+      }
+    },
+    ready() {
+      if (state.isReady) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        state.pendingResolvers.push(resolve);
+      });
+    },
+    setReady() {
+      if (state.isReady) return;
+      state.isReady = true;
+      resolveFromLocation(false);
+      for (const resolve of state.pendingResolvers) {
+        resolve();
       }
+      state.pendingResolvers = [];
     }
   };
   const handlePopState = (event) => {
     if (api.strategy === "slot-refresh" && windowImpl) {
       const newPath = windowImpl.document.location.pathname;
-      const oldPath = currentPath;
-      currentPath = newPath;
+      const oldPath = state.currentPath;
+      state.currentPath = newPath;
+      resolveFromLocation(false);
       queueMicrotask(() => {
         for (const listener of api.listeners) {
           listener(newPath, oldPath);
@@ -269,7 +407,21 @@ const setupRouter = (config = {
   }
   return api;
 };
-const Router = setupRouter();
+const ROUTER_GLOBAL_KEY = "__defuss_router__";
+const ROUTER_STATE_KEY = "__defuss_router_state__";
+if (!globalThis[ROUTER_STATE_KEY]) {
+  globalThis[ROUTER_STATE_KEY] = {
+    routeRegistrations: [],
+    currentRequest: null,
+    isReady: false,
+    pendingResolvers: [],
+    currentPath: "",
+    popAttached: false
+  };
+}
+const getRouterState = () => globalThis[ROUTER_STATE_KEY];
+const existingRouter = globalThis[ROUTER_GLOBAL_KEY];
+const Router = existingRouter ?? (globalThis[ROUTER_GLOBAL_KEY] = setupRouter());
 
 const Route = ({
   path,
@@ -281,7 +433,9 @@ const Route = ({
     path,
     exact: exact || false
   });
-  return router.match(path) ? Array.isArray(children) ? children[0] : null : null;
+  const req = router.match(path);
+  if (!req.match) return null;
+  return Array.isArray(children) ? children[0] : children || null;
 };
 
 const Redirect = ({
@@ -299,10 +453,12 @@ const Redirect = ({
 };
 
 const RouterSlotId = "router-slot";
+const ROUTER_SLOT_GUARD = Symbol.for("defuss.RouterSlot.guard");
 const RouterSlot = ({
   router = Router,
   children,
   RouterOutlet,
+  id,
   transitionConfig = {
     type: "fade",
     duration: 25,
@@ -312,22 +468,37 @@ const RouterSlot = ({
 }) => {
   const { tag, ...attributesWithoutTag } = attributes;
   const ref = dom.createRef();
+  const slotId = id ?? RouterSlotId;
   router.strategy = "slot-refresh";
   router.attachPopStateHandler();
-  router.onRouteChange(async () => {
-    await dom.$(ref).update(RouterOutlet(), transitionConfig);
-  });
-  if (document.getElementById(RouterSlotId)) {
+  const r = router;
+  if (!r[ROUTER_SLOT_GUARD]) {
+    r[ROUTER_SLOT_GUARD] = true;
+    let lastPath = window.location.pathname;
+    router.onRouteChange(async () => {
+      const currentPath = router.getRequest().path;
+      const isSamePath = currentPath === lastPath;
+      lastPath = currentPath;
+      await dom.$(ref).update(
+        typeof RouterOutlet === "function" ? RouterOutlet() : [],
+        isSamePath ? void 0 : transitionConfig
+      );
+    });
+  }
+  if (document.getElementById(slotId)) {
     console.warn(
-      `It seems there's more than one <RouterSlot /> components defined as an element with id #${RouterSlotId} already exists in the DOM.`
+      `It seems there's more than one <RouterSlot /> components defined as an element with id #${slotId} already exists in the DOM.`
     );
   }
+  queueMicrotask(() => {
+    router.setReady();
+  });
   return {
-    children: RouterOutlet() || [],
+    children: [RouterOutlet() || []].flat(),
     type: attributes.tag || "div",
     attributes: {
       ...attributesWithoutTag,
-      id: RouterSlotId,
+      id: slotId,
       ref
     }
   };
@@ -346,72 +517,77 @@ const Async = ({
   onError
 }) => {
   let childrenToRender = children;
+  let updateToken = 0;
   const containerRef = dom.createRef(
     function onSuspenseUpdate(state) {
-      try {
-        if (!containerRef.current) {
-          if (inDevMode) {
-            console.warn(
-              "Suspense container is not mounted yet, but a state update demands a render. State is:",
-              state
-            );
-          }
-          return;
+      const currentToken = ++updateToken;
+      if (!containerRef.current) {
+        if (inDevMode) {
+          console.warn(
+            "Suspense container is not mounted yet, but a state update demands a render. State is:",
+            state
+          );
         }
-        (async () => {
-          await dom.$(containerRef.current).removeClass(
+        return;
+      }
+      void (async () => {
+        await dom.$(containerRef.current).removeClass(loadingClassName || "suspense-loading").removeClass(loadedClassName || "suspense-loaded").removeClass(errorClassName || "suspense-error");
+        if (currentToken !== updateToken) return;
+        if (!children || state === "error") {
+          await dom.$(containerRef.current).addClass(
+            errorClassName || "suspense-error"
+          );
+          if (currentToken !== updateToken) return;
+          await dom.$(containerRef).jsx({
+            type: "div",
+            children: ["Loading error!"]
+          });
+        } else if (state === "loading") {
+          await dom.$(containerRef.current).addClass(
             loadingClassName || "suspense-loading"
           );
-          await dom.$(containerRef.current).removeClass(
+          if (currentToken !== updateToken) return;
+          if (containerRef.current && containerRef.current.childNodes.length === 0) {
+            if (fallback) {
+              await dom.$(containerRef).jsx(fallback);
+            } else {
+              await dom.$(containerRef.current).empty();
+            }
+          }
+        } else if (state === "loaded") {
+          await dom.$(containerRef.current).addClass(
             loadedClassName || "suspense-loaded"
           );
-          await dom.$(containerRef.current).removeClass(
-            errorClassName || "suspense-error"
-          );
-          if (!children || state === "error") {
-            await dom.$(containerRef.current).addClass(
-              errorClassName || "suspense-error"
-            );
-            await dom.$(containerRef).jsx({
-              type: "div",
-              children: ["Loading error!"]
-            });
-          } else if (state === "loading") {
-            await dom.$(containerRef.current).addClass(
-              loadingClassName || "suspense-loading"
-            );
-            await dom.$(containerRef).jsx(fallback);
-          } else if (state === "loaded") {
-            await dom.$(containerRef.current).addClass(
-              loadedClassName || "suspense-loaded"
-            );
-            console.log("[Async render] start");
-            await dom.$(containerRef).jsx(childrenToRender);
-            console.log("[Async render] finished");
-          }
-        })();
-      } catch (error) {
-        containerRef.update("error");
+          if (currentToken !== updateToken) return;
+          await dom.$(containerRef).jsx(childrenToRender);
+        }
+      })().catch((error) => {
+        containerRef.updateState("error");
         containerRef.error = error;
         if (typeof onError === "function") {
           onError(error);
         }
-      }
+      });
     },
     "loading"
   );
   if (dom.isRef(ref)) {
     let isInitial = true;
+    const outerUpdateState = ref.updateState.bind(ref);
     ref.updateState = (state) => {
+      outerUpdateState(state);
       if (!isInitial) {
         containerRef.updateState(state);
       }
     };
-    ref.updateState("loading");
+    outerUpdateState("loading");
     isInitial = false;
   }
   const promisedChildren = (Array.isArray(children) ? children : children ? [children] : []).map((vnode) => {
     try {
+      if (vnode instanceof Promise) {
+        return vnode;
+      }
       if (!vnode || vnode && !vnode.type) {
         return Promise.resolve("");
       }
@@ -429,20 +605,21 @@ const Async = ({
       if (typeof onError === "function") {
         onError(error);
       }
+      return null;
     }
   });
   const onMount = () => {
     if (promisedChildren.length) {
       containerRef.updateState("loading");
       Promise.all(promisedChildren).then((awaitedVnodes) => {
-        childrenToRender = awaitedVnodes.flatMap(
+        childrenToRender = awaitedVnodes.filter((vnode) => vnode != null).flatMap(
           (vnode) => vnode?.type === "Fragment" ? vnode.children : vnode
         );
         containerRef.updateState("loaded");
       }).catch((error) => {
         containerRef.updateState("error");
         containerRef.error = error;
-        {
+        if (inDevMode) {
           console.error("SuspenseLoadingError", error);
         }
         (async () => {
@@ -456,15 +633,22 @@ const Async = ({
   };
   return {
     type: "div",
-    attributes: { id, class: _class, className, ref: containerRef, onMount },
+    attributes: {
+      id,
+      class: _class,
+      className,
+      ref: containerRef,
+      onMount,
+      "data-defuss-keep": true
+      // Prevent sync DOM overwrite during updates
+    },
     children: fallback ? [fallback] : []
   };
 };
 const Suspense = Async;
 
-console.log(`defuss v${"2.1.11"}`);
-
 exports.$ = dom.$;
+exports.CAPTURE_ONLY_EVENTS = dom.CAPTURE_ONLY_EVENTS;
 exports.CLASS_ATTRIBUTE_NAME = dom.CLASS_ATTRIBUTE_NAME;
 exports.Call = dom.Call;
 exports.CallChainImpl = dom.CallChainImpl;
@@ -480,6 +664,8 @@ exports.addNonChainedReturnCallNames = dom.addNonChainedReturnCallNames;
 exports.applyStyles = dom.applyStyles;
 exports.areDomNodesEqual = dom.areDomNodesEqual;
 exports.checkElementVisibility = dom.checkElementVisibility;
+exports.clearDelegatedEvents = dom.clearDelegatedEvents;
+exports.clearDelegatedEventsDeep = dom.clearDelegatedEventsDeep;
 exports.clearElementEvents = dom.clearElementEvents;
 exports.createCall = dom.createCall;
 exports.createGetterSetterCall = dom.createGetterSetterCall;
@@ -487,20 +673,26 @@ exports.createInPlaceErrorMessageVNode = dom.createInPlaceErrorMessageVNode;
 exports.createRef = dom.createRef;
 exports.createStore = dom.createStore;
 exports.createSubChain = dom.createSubChain;
+exports.createSyncCall = dom.createSyncCall;
+exports.deepEquals = dom.deepEquals;
 exports.delayedAutoStart = dom.delayedAutoStart;
 exports.dequery = dom.dequery;
 exports.domNodeToVNode = dom.domNodeToVNode;
 exports.emptyImpl = dom.emptyImpl;
 exports.getAllFormValues = dom.getAllFormValues;
+exports.getComponentInstance = dom.getComponentInstance;
 exports.getDefaultDequeryOptions = dom.getDefaultDequeryOptions;
 exports.getEventMap = dom.getEventMap;
 exports.getMimeType = dom.getMimeType;
 exports.getNonChainedReturnCallNames = dom.getNonChainedReturnCallNames;
+exports.getRegisteredEventKeys = dom.getRegisteredEventKeys;
+exports.getRegisteredEventTypes = dom.getRegisteredEventTypes;
 exports.getRenderer = dom.getRenderer;
 exports.getTransitionStyles = dom.getTransitionStyles;
 exports.globalScopeDomApis = dom.globalScopeDomApis;
 exports.handleLifecycleEventsForOnMount = dom.handleLifecycleEventsForOnMount;
 exports.htmlStringToVNodes = dom.htmlStringToVNodes;
+exports.isComponentRoot = dom.isComponentRoot;
 exports.isDequery = dom.isDequery;
 exports.isDequeryOptionsObject = dom.isDequeryOptionsObject;
 exports.isHTML = dom.isHTML;
@@ -513,12 +705,20 @@ exports.jsx = dom.jsx;
 exports.jsxDEV = dom.jsxDEV;
 exports.jsxs = dom.jsxs;
 exports.mapArrayIndexAccess = dom.mapArrayIndexAccess;
+exports.nsMap = dom.nsMap;
 exports.observeUnmount = dom.observeUnmount;
 exports.parseDOM = dom.parseDOM;
+exports.parseEventPropName = dom.parseEventPropName;
 exports.performTransition = dom.performTransition;
 exports.processAllFormElements = dom.processAllFormElements;
 exports.queueCallback = dom.queueCallback;
+exports.registerComponent = dom.registerComponent;
+exports.registerDelegatedEvent = dom.registerDelegatedEvent;
+exports.removeDelegatedEvent = dom.removeDelegatedEvent;
+exports.removeDelegatedEventByKey = dom.removeDelegatedEventByKey;
 exports.removeElementEvent = dom.removeElementEvent;
+exports.render = dom.render;
+exports.renderInto = dom.renderInto;
 exports.renderIsomorphicAsync = dom.renderIsomorphicAsync;
 exports.renderIsomorphicSync = dom.renderIsomorphicSync;
 exports.renderMarkup = dom.renderMarkup;
@@ -527,12 +727,16 @@ exports.replaceDomWithVdom = dom.replaceDomWithVdom;
 exports.resolveNodes = dom.resolveNodes;
 exports.runWithTimeGuard = dom.runWithTimeGuard;
 exports.scrollHelper = dom.scrollHelper;
+exports.shallowEquals = dom.shallowEquals;
 exports.subChainForNextAwait = dom.subChainForNextAwait;
 exports.traverse = dom.traverse;
+exports.unregisterComponent = dom.unregisterComponent;
 exports.updateDom = dom.updateDom;
 exports.updateDomWithVdom = dom.updateDomWithVdom;
 exports.waitForDOM = dom.waitForDOM;
 exports.webstorage = dom.webstorage;
+exports.mount = mount.mount;
+exports.unmount = mount.unmount;
 exports.Async = Async;
 exports.Redirect = Redirect;
 exports.Route = Route;
@@ -544,7 +748,9 @@ exports.T = T;
 exports.Trans = Trans;
 exports.changeLanguage = changeLanguage;
 exports.createI18n = createI18n;
+exports.createTrans = createTrans;
 exports.getLanguage = getLanguage;
+exports.getRouterState = getRouterState;
 exports.i18n = i18n;
 exports.inDevMode = inDevMode;
 exports.loadLanguage = loadLanguage;