dolphin-client 1.0.9 → 1.1.2

package/.vscode/dolphin-tags.json

@@ -390,6 +390,34 @@
     {
       "name": "data-rt-sort",
       "description": "Sorts the rendered data array (e.g., price.asc or popular)."
+    },
+    {
+      "name": "data-api-toast",
+      "description": "Inline success message to show as toast after a successful API request."
+    },
+    {
+      "name": "data-api-error-toast",
+      "description": "Inline error message to show as toast after a failed API request."
+    },
+    {
+      "name": "data-rt-api-success",
+      "description": "ID of a hidden element whose text content is shown as a success toast after a successful API request. Example: data-rt-api-success=\"my-success-msg\""
+    },
+    {
+      "name": "data-rt-api-error",
+      "description": "ID of a hidden element whose text content is shown as an error toast after a failed API request. Example: data-rt-api-error=\"my-error-msg\""
+    },
+    {
+      "name": "data-rt-api-success-show",
+      "description": "ID of an inline alert element to reveal (remove hidden) on API success. Pair with data-rt-alert-duration for auto-hide. Example: data-rt-api-success-show=\"success-alert\""
+    },
+    {
+      "name": "data-rt-api-error-show",
+      "description": "ID of an inline alert element to reveal (remove hidden) on API error. Pair with data-rt-alert-duration for auto-hide. Example: data-rt-api-error-show=\"error-alert\""
+    },
+    {
+      "name": "data-rt-alert-duration",
+      "description": "Duration in milliseconds before the inline alert auto-hides. Use with data-rt-api-success-show or data-rt-api-error-show. Example: data-rt-alert-duration=\"3000\""
     }
   ],
   "valueSets": [

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "html.customData": [
+    "./.vscode/dolphin-tags.json"
+  ]
+}

package/dist/dolphin-client.js

@@ -41,7 +41,7 @@ var DolphinModule = (() => {
       target.patch = (pathOrBody, bodyOrOptions, options) => typeof pathOrBody === "string" ? this.request("PATCH", pathOrBody, bodyOrOptions, options) : this.request("PATCH", joined, pathOrBody, bodyOrOptions);
       target.del = (pathOrOptions, options) => typeof pathOrOptions === "string" ? this.request("DELETE", pathOrOptions, null, options) : this.request("DELETE", joined, null, pathOrOptions);
       target.request = (method, subPath, body, options) => {
-        const finalPath = subPath ? `${joined}/${subPath.startsWith("/") ? subPath.slice(1) : subPath}` : joined;
+        const finalPath = subPath ? joined ? `${joined}/${subPath.startsWith("/") ? subPath.slice(1) : subPath}` : subPath : joined;
         return this.request(method, finalPath, body, options);
       };
       target.requestDirect = (method, path, body, options) => {
@@ -225,8 +225,9 @@ var DolphinModule = (() => {
       const _isRetry = options._isRetry === true;
       let finalMethod = method.toUpperCase();
       let finalBody = body;
+      const hasBody = !["GET", "HEAD"].includes(finalMethod);
       const headers = {
-        "Content-Type": "application/json",
+        ...hasBody ? { "Content-Type": "application/json" } : {},
         ...options.headers || {}
       };
       if (["PUT", "PATCH", "DELETE"].includes(finalMethod)) {
@@ -996,6 +997,82 @@ var DolphinModule = (() => {
     function escapeRegExp(str) {
       return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     }
+    function evaluateExpression(expr, ctx) {
+      if (!ctx || typeof ctx !== "object") return void 0;
+      try {
+        const safeCtx = new Proxy(ctx, {
+          has(target, prop) {
+            return true;
+          },
+          get(target, prop) {
+            if (typeof prop === "string") {
+              if (prop in target) return target[prop];
+              if (typeof globalThis !== "undefined" && prop in globalThis) return globalThis[prop];
+              if (typeof window !== "undefined" && prop in window) return window[prop];
+            }
+            return void 0;
+          }
+        });
+        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        return fn(safeCtx);
+      } catch {
+        return ctx[expr];
+      }
+    }
+    function splitByUnquotedChar(str, char) {
+      const parts = [];
+      let current = "";
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let inBacktick = false;
+      let depth = 0;
+      for (let i = 0; i < str.length; i++) {
+        const c = str[i];
+        if (c === "'" && !inDoubleQuote && !inBacktick) {
+          inSingleQuote = !inSingleQuote;
+        } else if (c === '"' && !inSingleQuote && !inBacktick) {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (c === "`" && !inSingleQuote && !inDoubleQuote) {
+          inBacktick = !inBacktick;
+        } else if (c === "(" || c === "[" || c === "{") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth++;
+        } else if (c === ")" || c === "]" || c === "}") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth--;
+        }
+        if (c === char && !inSingleQuote && !inDoubleQuote && !inBacktick && depth === 0) {
+          parts.push(current);
+          current = "";
+        } else {
+          current += c;
+        }
+      }
+      parts.push(current);
+      return parts;
+    }
+    function splitFirstUnquotedColon(str) {
+      let inSingleQuote = false;
+      let inDoubleQuote = false;
+      let inBacktick = false;
+      let depth = 0;
+      for (let i = 0; i < str.length; i++) {
+        const c = str[i];
+        if (c === "'" && !inDoubleQuote && !inBacktick) {
+          inSingleQuote = !inSingleQuote;
+        } else if (c === '"' && !inSingleQuote && !inBacktick) {
+          inDoubleQuote = !inDoubleQuote;
+        } else if (c === "`" && !inSingleQuote && !inDoubleQuote) {
+          inBacktick = !inBacktick;
+        } else if (c === "(" || c === "[" || c === "{") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth++;
+        } else if (c === ")" || c === "]" || c === "}") {
+          if (!inSingleQuote && !inDoubleQuote && !inBacktick) depth--;
+        }
+        if (c === ":" && !inSingleQuote && !inDoubleQuote && !inBacktick && depth === 0) {
+          return [str.slice(0, i), str.slice(i + 1)];
+        }
+      }
+      return null;
+    }
     function resolveTemplate(el) {
       const template = el.getAttribute("data-rt-template");
       if (!template) return null;
@@ -1012,9 +1089,26 @@ var DolphinModule = (() => {
       if (!templateStr.includes("{#if") && !templateStr.includes("{#each")) {
         let result = templateStr;
         for (let key in context) {
-          const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-          result = result.replace(new RegExp(`\\{\\{${escapedKey}\\}\\}`, "g"), context[key] !== void 0 && context[key] !== null ? context[key] : "");
-        }
+          const escapedKey = key.replace(/[.*+?^$${}()|[\]\\]/g, "\\$&");
+          result = result.replace(new RegExp("\\{\\{" + escapedKey + "\\}}", "g"), context[key] !== void 0 && context[key] !== null ? context[key] : "");
+        }
+        result = result.replace(/\{\{([\s\S]*?)\}\}/g, (match, expr) => {
+          const trimmed = expr.trim();
+          if (!trimmed) return "";
+          if (/^[a-zA-Z_$][a-zA-Z0-9_$]*(?:\??\.[a-zA-Z_$][a-zA-Z0-9_$]*)+$/.test(trimmed)) {
+            const parts = trimmed.split(/\??\./);
+            let val = context;
+            for (const part of parts) {
+              if (val === void 0 || val === null) {
+                val = void 0;
+                break;
+              }
+              val = val[part];
+            }
+            return val !== void 0 && val !== null ? val : "";
+          }
+          return match;
+        });
         return result;
       }
       try {
@@ -1134,7 +1228,9 @@ var DolphinModule = (() => {
       if (typeof document === "undefined") return html;
       try {
         const parser = new DOMParser();
-        const doc = parser.parseFromString(html, "text/html");
+        const hasBodyOrHtml = /<\s*(?:body|html)\b/i.test(html);
+        const parseString = hasBodyOrHtml ? html : `<body>${html}</body>`;
+        const doc = parser.parseFromString(parseString, "text/html");
         const body = doc.body;
         const sanitizeNode = (el) => {
           const tag = el.tagName.toLowerCase();
@@ -1248,7 +1344,7 @@ var DolphinModule = (() => {
         });
       }
     }
-    clientProto.setStoreState = function(storeName, key, val) {
+    clientProto.setStoreState = function(storeName, key, val, originEl) {
       this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
       if (!this.uiStores.has(storeName)) {
         this.uiStores.set(storeName, {});
@@ -1261,6 +1357,7 @@ var DolphinModule = (() => {
       if (typeof document !== "undefined") {
         const readElements = document.querySelectorAll(`[data-store-read="${storeName}.${key}"]`);
         readElements.forEach((el) => {
+          if (el === originEl) return;
           if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
             if (el.type === "checkbox") {
               el.checked = !!val;
@@ -1336,20 +1433,49 @@ var DolphinModule = (() => {
           if (key) return ctx[key];
           return ctx;
         }
-        current = current.parentElement;
+        current = current.parentElement || current.parentNode;
       }
       return null;
     };
     clientProto._executeStoreAction = function(expression, element) {
       this.uiStores = this.uiStores || /* @__PURE__ */ new Map();
+      const parentCtx = element && typeof this.getClosestContext === "function" ? this.getClosestContext(element) : null;
       const context = new Proxy({}, {
         has: (target, prop) => {
           return true;
         },
         get: (target, prop) => {
           if (typeof prop === "string") {
+            if (prop === "log") {
+              return (arg) => {
+                if (arg === void 0) {
+                  const allStores = {};
+                  this.uiStores.forEach((val, key) => {
+                    allStores[key] = { ...val };
+                  });
+                  console.log(`%c\u{1F4CA} [Dolphin All UI Stores]:`, "color: #06b6d4; font-weight: bold;", allStores);
+                } else if (arg && typeof arg === "object" && arg.__isStoreProxy__) {
+                  const storeName = arg.__storeName__;
+                  const store = this.uiStores.get(storeName);
+                  console.log(`%c\u{1F4CA} [Dolphin Store: ${storeName}]:`, "color: #06b6d4; font-weight: bold;", store ? { ...store } : {});
+                } else {
+                  console.log(`%c\u{1F4CA} [Dolphin Log]:`, "color: #06b6d4; font-weight: bold;", arg);
+                }
+              };
+            }
+            if (parentCtx && parentCtx[prop] !== void 0) {
+              return parentCtx[prop];
+            }
+            if (typeof globalThis !== "undefined" && prop in globalThis) {
+              return globalThis[prop];
+            }
+            if (typeof window !== "undefined" && prop in window) {
+              return window[prop];
+            }
             return new Proxy({}, {
               get: (subTarget, subProp) => {
+                if (subProp === "__storeName__") return prop;
+                if (subProp === "__isStoreProxy__") return true;
                 if (typeof subProp === "string") {
                   return this.getStoreState(prop, subProp);
                 }
@@ -1391,7 +1517,7 @@ var DolphinModule = (() => {
               const storeName = parts[0];
               const key = parts[1];
               const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
-              this.setStoreState(storeName, key, val);
+              this.setStoreState(storeName, key, val, e.target);
             }
           }
           const rules = e.target.getAttribute("data-rt-validate");
@@ -1751,24 +1877,33 @@ var DolphinModule = (() => {
           const processNode = (node) => {
             if (node.hasAttribute("data-rt-text")) {
               const key = node.getAttribute("data-rt-text");
-              if (key && processedPayload[key] !== void 0 && processedPayload[key] !== null) node.textContent = processedPayload[key];
+              if (key) {
+                const val = evaluateExpression(key, processedPayload);
+                if (val !== void 0 && val !== null) node.textContent = val;
+              }
             }
             if (node.hasAttribute("data-rt-html")) {
               const key = node.getAttribute("data-rt-html");
-              if (key && processedPayload[key] !== void 0 && processedPayload[key] !== null) {
-                node.innerHTML = sanitizeHTML(processedPayload[key]);
+              if (key) {
+                const val = evaluateExpression(key, processedPayload);
+                if (val !== void 0 && val !== null) {
+                  node.innerHTML = sanitizeHTML(val);
+                }
               }
             }
             if (node.hasAttribute("data-rt-attr")) {
               const attrStr = node.getAttribute("data-rt-attr");
               if (attrStr) {
-                attrStr.split(",").forEach((b) => {
-                  const parts = b.split(":");
-                  if (parts.length === 2) {
-                    const attrName = parts[0].trim();
-                    const key = parts[1].trim();
-                    if (attrName && key && processedPayload[key] !== void 0 && processedPayload[key] !== null) {
-                      node.setAttribute(attrName, processedPayload[key]);
+                splitByUnquotedChar(attrStr, ",").forEach((b) => {
+                  const pair = splitFirstUnquotedColon(b);
+                  if (pair) {
+                    const attrName = pair[0].trim();
+                    const key = pair[1].trim();
+                    if (attrName && key) {
+                      const val = evaluateExpression(key, processedPayload);
+                      if (val !== void 0 && val !== null) {
+                        node.setAttribute(attrName, val);
+                      }
                     }
                   }
                 });
@@ -1777,13 +1912,13 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-class")) {
               const classStr = node.getAttribute("data-rt-class");
               if (classStr) {
-                classStr.split(",").forEach((b) => {
-                  const parts = b.split(":");
-                  if (parts.length === 2) {
-                    const className = parts[0].trim();
-                    const key = parts[1].trim();
+                splitByUnquotedChar(classStr, ",").forEach((b) => {
+                  const pair = splitFirstUnquotedColon(b);
+                  if (pair) {
+                    const className = pair[0].trim();
+                    const key = pair[1].trim();
                     const classNames = className.split(/\s+/).filter(Boolean);
-                    if (processedPayload[key]) {
+                    if (evaluateExpression(key, processedPayload)) {
                       classNames.forEach((c) => node.classList.add(c));
                     } else {
                       classNames.forEach((c) => node.classList.remove(c));
@@ -1795,7 +1930,7 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-if")) {
               const key = node.getAttribute("data-rt-if");
               if (key) {
-                if (processedPayload[key]) {
+                if (evaluateExpression(key, processedPayload)) {
                   node.style.display = "";
                 } else {
                   node.style.display = "none";
@@ -1805,7 +1940,7 @@ var DolphinModule = (() => {
             if (node.hasAttribute("data-rt-hide")) {
               const key = node.getAttribute("data-rt-hide");
               if (key) {
-                if (processedPayload[key]) {
+                if (evaluateExpression(key, processedPayload)) {
                   node.style.display = "none";
                 } else {
                   node.style.display = "";
@@ -1855,21 +1990,35 @@ var DolphinModule = (() => {
           return;
         }
         resolvingSet.add(src);
-        let promise = componentPromiseCache.get(src);
+        const hashIndex = src.indexOf("#");
+        const url = hashIndex !== -1 ? src.substring(0, hashIndex) : src;
+        const selector = hashIndex !== -1 ? src.substring(hashIndex) : null;
+        let promise = componentPromiseCache.get(url);
         if (!promise) {
-          promise = fetch(src).then((res) => {
+          promise = fetch(url).then((res) => {
             if (!res.ok) throw new Error(`HTTP ${res.status}`);
             return res.text();
           });
-          promise.catch(() => componentPromiseCache.delete(src));
-          componentPromiseCache.set(src, promise);
+          promise.catch(() => componentPromiseCache.delete(url));
+          componentPromiseCache.set(url, promise);
         }
         let content = "";
         try {
           content = await promise;
+          if (selector && typeof DOMParser !== "undefined") {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(content, "text/html");
+            const targetEl = doc.querySelector(selector);
+            if (targetEl) {
+              content = targetEl.outerHTML;
+            } else {
+              console.warn(`[Dolphin Component Warning]: Selector "${selector}" not found in imported file "${url}".`);
+              content = `<span style="color:orange;font-weight:bold;">Selector ${selector} not found in ${url}</span>`;
+            }
+          }
         } catch (err) {
-          console.error(`[Dolphin Component Error]: Failed to fetch component "${src}":`, err);
-          content = `<span style="color:red;font-weight:bold;">Failed to import ${src}</span>`;
+          console.error(`[Dolphin Component Error]: Failed to fetch component "${url}":`, err);
+          content = `<span style="color:red;font-weight:bold;">Failed to import ${url}</span>`;
         }
         el.innerHTML = sanitizeHTML(content);
         el.removeAttribute("data-import");