feat: Add source map URL to libsui.min.js for better debugging

sui/core/injections.go

@@ -38,6 +38,7 @@ func LibSUI() ([]byte, []byte, error) {
 		MinifyIdentifiers: true,
 		MinifySyntax:      true,
 		MinifyWhitespace:  true,
+		Sourcefile:        "libsui.ts",
 	})
 
 	return js, sm, nil

sui/libsui/index.ts

@@ -141,6 +141,52 @@ function __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler) {
     });
 }
 
+function __sui_event_init(elm: Element) {
+  const eventElms = elm.querySelectorAll("[s\\:event]");
+  eventElms.forEach((eventElm) => {
+    const cn = eventElm.getAttribute("s:event-cn") || "";
+
+    // Data keys
+    const events: Record<string, string> = {};
+    const dataKeys: string[] = [];
+    const jsonKeys: string[] = [];
+    for (let i = 0; i < eventElm.attributes.length; i++) {
+      if (eventElm.attributes[i].name.startsWith("data:")) {
+        dataKeys.push(eventElm.attributes[i].name.replace("data:", ""));
+      }
+      if (eventElm.attributes[i].name.startsWith("json:")) {
+        jsonKeys.push(eventElm.attributes[i].name.replace("json:", ""));
+      }
+      if (eventElm.attributes[i].name.startsWith("s:on-")) {
+        const key = eventElm.attributes[i].name.replace("s:on-", "");
+        events[key] = eventElm.attributes[i].value;
+      }
+    }
+
+    // Bind the event
+    for (const name in events) {
+      const bind = events[name];
+      if (cn == "__page") {
+        const handler = window[bind];
+        const root = document.body;
+        const target = eventElm;
+        eventElm.addEventListener(name, (event) => {
+          __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler);
+        });
+        continue;
+      }
+
+      const comp = new window[cn](eventElm.closest(`[s\\:cn=${cn}]`));
+      const handler = comp[bind];
+      const root = comp.root;
+      const target = eventElm;
+      eventElm.addEventListener(name, (event) => {
+        __sui_event_handler(event, dataKeys, jsonKeys, target, root, handler);
+      });
+    }
+  });
+}
+
 function __sui_store(elm) {
   elm = elm || document.body;
 
@@ -175,3 +221,123 @@ function __sui_store(elm) {
     return this.GetJSON("__component_data") || {};
   };
 }
+
+/**
+ * SUI Render
+ * @param component
+ * @param name
+ */
+async function __sui_render(
+  component: Component | string,
+  name: string,
+  data: Record<string, any>,
+  option?: RenderOption
+): Promise<string> {
+  const comp = (
+    typeof component === "object" ? component : $$(component)
+  ) as Component;
+
+  if (comp == null) {
+    console.error(`[SUI] Component not found: ${component}`);
+    return Promise.reject("Component not found");
+  }
+
+  const elms = comp.root.querySelectorAll(`[s\\:render=${name}]`);
+  if (!elms.length) {
+    console.error(`[SUI] No element found with s:render=${name}`);
+    return Promise.reject("No element found");
+  }
+
+  // Set default options
+  option = option || {};
+  option.replace = option.replace === undefined ? true : option.replace;
+  option.showLoader =
+    option.showLoader === undefined ? false : option.showLoader;
+  option.withPageData =
+    option.withPageData === undefined ? false : option.withPageData;
+
+  // Prepare loader
+  let loader = `<span class="sui-render-loading">Loading...</span>`;
+  if (option.showLoader) {
+    if (typeof option.showLoader === "string") {
+      loader = option.showLoader;
+    } else if (option.showLoader instanceof HTMLElement) {
+      loader = option.showLoader.outerHTML;
+    }
+    elms.forEach((elm) => (elm.innerHTML = loader));
+  }
+
+  // Prepare data
+  let _data = comp.store.GetData() || {};
+  if (option.withPageData) {
+    // @ts-ignore
+    _data = { ..._data, ...__sui_data };
+  }
+
+  const route = window.location.pathname;
+  const url = `/api/__yao/sui/v1/render${route}`;
+  const payload = { name, data: { ..._data, ...data }, option };
+  const headers = {
+    "Content-Type": "application/json",
+    Cookie: document.cookie,
+  };
+
+  // Native post request to the server
+  try {
+    const body = JSON.stringify(payload);
+    const response = await fetch(url, { method: "POST", headers, body: body });
+    const text = await response.text();
+    if (!option.replace) {
+      return Promise.resolve(text);
+    }
+
+    // Set the response text to the elements
+    elms.forEach((elm) => {
+      elm.innerHTML = text;
+      __sui_event_init(elm);
+    });
+
+    return Promise.resolve(text);
+  } catch (e) {
+    //Set the error message
+    elms.forEach((elm) => {
+      elm.innerHTML = `<span class="sui-render-error">Failed to render</span>`;
+      console.error("Failed to render", e);
+    });
+    return Promise.reject("Failed to render");
+  }
+}
+
+export type Component = {
+  root: HTMLElement;
+  state: ComponentState;
+  store: ComponentStore;
+  watch?: Record<string, (value: any, state?: State) => void>;
+  Constants?: Record<string, any>;
+
+  [key: string]: any;
+};
+
+export type RenderOption = {
+  target?: HTMLElement; // default is same with s:render target
+  showLoader?: HTMLElement | string | boolean; // default is false
+  replace?: boolean; // default is true
+  withPageData?: boolean; // default is false
+};
+
+export type ComponentState = {
+  Set: (key: string, value: any) => void;
+};
+
+export type ComponentStore = {
+  Get: (key: string) => string;
+  Set: (key: string, value: any) => void;
+  GetJSON: (key: string) => any;
+  SetJSON: (key: string, value: any) => void;
+  GetData: () => Record<string, any>;
+};
+
+export type State = {
+  target: HTMLElement;
+  stopPropagation();
+};

sui/libsui/utils.ts

@@ -3,6 +3,7 @@ const $utils = {
     if (typeof elm === "string") {
       elm = document.querySelector(elm);
     }
+    // @ts-ignore
     return new __sui_store(elm);
   },
 
@@ -26,3 +27,130 @@ const $utils = {
     return $utils;
   },
 };
+
+function $Query(selector: string): __Query {
+  return new __Query(selector);
+}
+
+class __Query {
+  selector: string | Element = "";
+  elements: NodeListOf<Element> | null = null;
+  element: Element | null = null;
+  constructor(selector: string | Element) {
+    if (typeof selector === "string") {
+      this.selector = selector;
+      this.elements = document.querySelectorAll(selector);
+      if (this.elements.length > 0) {
+        this.element = this.elements[0];
+      }
+    } else {
+      this.element = selector;
+    }
+    this.selector = selector;
+  }
+
+  each(callback: (element: __Query, index: number) => void) {
+    if (!this.elements) {
+      return;
+    }
+    this.elements.forEach((element, index) => {
+      callback(new __Query(element), index);
+    });
+    return;
+  }
+
+  attr(key) {
+    if (!this.element || typeof this.element.getAttribute !== "function") {
+      return null;
+    }
+    return this.element.getAttribute(key);
+  }
+
+  data(key) {
+    if (!this.element || typeof this.element.getAttribute !== "function") {
+      return null;
+    }
+    return this.element.getAttribute("data:" + key);
+  }
+
+  json(key) {
+    if (!this.element || typeof this.element.getAttribute !== "function") {
+      return null;
+    }
+    const v = this.element.getAttribute("json:" + key);
+    if (!v) {
+      return null;
+    }
+    try {
+      return JSON.parse(v);
+    } catch (e) {
+      console.error(`Error parsing JSON for key ${key}: ${e}`);
+      return null;
+    }
+  }
+
+  hasClass(className) {
+    return this.element?.classList.contains(className);
+  }
+
+  prop(key) {
+    if (!this.element || typeof this.element.getAttribute !== "function") {
+      return null;
+    }
+    const k = "prop:" + key;
+    const v = this.element.getAttribute(k);
+    const json = this.element.getAttribute("json-attr-prop:" + key) === "true";
+    if (json && v) {
+      try {
+        return JSON.parse(v);
+      } catch (e) {
+        console.error(`Error parsing JSON for prop ${key}: ${e}`);
+        return null;
+      }
+    }
+    return v;
+  }
+
+  removeClass(className) {
+    const classes = Array.isArray(className) ? className : className.split(" ");
+    classes.forEach((c) => {
+      const v = c.replace(/[\n\r\s]/g, "");
+      if (v === "") return;
+      this.element?.classList.remove(v);
+    });
+    return this;
+  }
+
+  addClass(className) {
+    const classes = Array.isArray(className) ? className : className.split(" ");
+    classes.forEach((c) => {
+      const v = c.replace(/[\n\r\s]/g, "");
+      if (v === "") return;
+      this.element?.classList.add(v);
+    });
+    return this;
+  }
+
+  html(html?: string): __Query | string {
+    if (html === undefined) {
+      return this.element?.innerHTML || "";
+    }
+    if (this.element) {
+      this.element.innerHTML = html;
+    }
+    return this;
+  }
+}
+
+class $Render {
+  comp = null;
+  option = null;
+  constructor(comp, option) {
+    this.comp = comp;
+    this.option = option;
+  }
+  async Render(name, data): Promise<string> {
+    // @ts-ignore
+    return __sui_render(this.comp, name, data, this.option);
+  }
+}

sui/storages/local/build.go

@@ -232,13 +232,15 @@ func (tmpl *Template) UpdateJSSDK(option *core.BuildOption) error {
 	}
 
 	// write the js sdk
-	err = os.WriteFile(file, []byte(jsCode), 0644)
+	// add source map url
+	jsCode = append(jsCode, []byte("\n//# sourceMappingURL=libsui.min.js.map")...)
+	err = os.WriteFile(file, jsCode, 0644)
 	if err != nil {
 		return err
 	}
 
 	// write the source map
-	err = os.WriteFile(mapFile, []byte(sourceMap), 0644)
+	err = os.WriteFile(mapFile, sourceMap, 0644)
 	return nil
 }
 

sui/storages/local/page_render_test.go

@@ -28,10 +28,10 @@ func TestPageEditorRender(t *testing.T) {
 
 	assert.NotEmpty(t, res.HTML)
 	assert.NotEmpty(t, res.CSS)
-	assert.NotEmpty(t, res.Scripts)
+	// assert.NotEmpty(t, res.Scripts)
 	assert.NotEmpty(t, res.Styles)
 	assert.GreaterOrEqual(t, len(res.Styles), 1)
-	assert.GreaterOrEqual(t, len(res.Scripts), 1)
+	// assert.GreaterOrEqual(t, len(res.Scripts), 1)
 
 }