@wavemaker-ai/react-runtime 1.0.0-rc.322 → 1.0.0-rc.324

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker-ai/react-runtime",
-  "version": "1.0.0-rc.322",
+  "version": "1.0.0-rc.324",
   "description": "React runtime package for Wavemaker",
   "license": "MIT",
   "repository": {
@@ -21,6 +21,7 @@
     "build:lib": "node scripts/build.js post-build",
     "sync-docs": "node scripts/sync-docs.js",
     "build:local": "npm run build:lib -- --production=false",
+    "build:watch": "node scripts/build.js watch",
     "format": "prettier --write .",
     "start": "next start",
     "lint": "next lint",
@@ -57,8 +58,8 @@
     "@mui/x-date-pickers": "8.5.3",
     "@reduxjs/toolkit": "2.9.1",
     "@tanstack/react-table": "8.21.3",
-    "@wavemaker-ai/react-codegen": "1.0.0-rc.322",
-    "@wavemaker-ai/variables": "1.0.0-rc.322",
+    "@wavemaker-ai/react-codegen": "1.0.0-rc.324",
+    "@wavemaker-ai/variables": "1.0.0-rc.324",
     "@wavemaker/nvd3": "1.8.16",
     "axios": "1.15.1",
     "d3": "7.8.5",

package/runtime-dynamic/factories/dynamic-component.js

@@ -18,11 +18,25 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useReducer, useRef } from "react";
 import { useAppState } from "../../context/WidgetProvider";
 import { useAppContext } from "../../context/AppContext";
 import { renderTranspiledMarkup } from "../services/markup-transpiler";
 import { scopeComponentStyles, removeComponentStyles } from "../services/css-scoping";
+function useCrossScopeDataRefresh(appContext, componentType) {
+  const [, forceRender] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    if (componentType === "page") return;
+    const subscribe = appContext == null ? void 0 : appContext.subscribe;
+    if (typeof subscribe !== "function") return;
+    const unsubscribePage = subscribe("page-variables-data-loaded", forceRender);
+    const unsubscribeApp = subscribe("app-variables-data-loaded", forceRender);
+    return () => {
+      unsubscribePage == null ? void 0 : unsubscribePage();
+      unsubscribeApp == null ? void 0 : unsubscribeApp();
+    };
+  }, [appContext, componentType]);
+}
 function usePageEvents(appState, componentType) {
   const appStateRef = useRef(appState);
   appStateRef.current = appState;
@@ -55,12 +69,11 @@ function createDynamicComponent({
   styles
 }) {
   const InnerComponent = () => {
-    var _a;
     const appState = useAppState();
     usePageEvents(appState, componentType);
-    const appStateRef = useRef(appState);
-    appStateRef.current = appState;
-    const notification = (_a = useAppContext()) == null ? void 0 : _a.notification;
+    const appContext = useAppContext();
+    useCrossScopeDataRefresh(appContext, componentType);
+    const notification = appContext == null ? void 0 : appContext.notification;
     useEffect(() => {
       if (styles) {
         scopeComponentStyles(componentName, componentType, styles);

package/runtime-dynamic/factories/utils.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { buildAddPageScript } from "../services/script-executor";
 import { transpileAndBuildGetVariables } from "../services/variable-transpiler";
 import { transpileFragment } from "../services/markup-transpiler";
@@ -21,6 +24,7 @@ import { yieldToMain } from "../utils";
 import { buildStartupInfo } from "./startup-info";
 import { createDynamicComponent } from "./dynamic-component";
 async function buildDynamicComponent(fragment, config) {
+  var _a;
   const { markup, script, styles, variables } = fragment;
   const { componentName, componentType, scriptScope, hoc, componentInfo, transpileOptions } = config;
   const addPageScript = buildAddPageScript(script, scriptScope, componentName);
@@ -40,7 +44,9 @@ async function buildDynamicComponent(fragment, config) {
   });
   InnerComponent.displayName = config.displayName || `Dynamic${componentType.charAt(0).toUpperCase() + componentType.slice(1)}(${componentName})`;
   const startupInfo = buildStartupInfo(variables);
-  const info = componentInfo(startupInfo);
+  const info = __spreadProps(__spreadValues({}, componentInfo(startupInfo)), {
+    activePageDeps: (_a = transpiled == null ? void 0 : transpiled.activePageDeps) != null ? _a : []
+  });
   return hoc(InnerComponent, addPageScript, getVariables, info);
 }
 export {

package/runtime-dynamic/services/compile-render.js

@@ -13,7 +13,8 @@ const UTIL_SCOPE = {
 };
 const lazyPartialCache = /* @__PURE__ */ new Map();
 function markupErrorNode(className, message) {
-  return React.createElement("div", { className }, message);
+  console.error(`[markup-transpiler] ${className}: ${message}`);
+  return null;
 }
 function extractMarkupComponents(markup) {
   const cached = componentNameCache.get(markup);

package/store/slices/i18nSlice.d.ts

@@ -1,5 +1,7 @@
 export interface I18nState {
     selectedLocale: string;
+    /** Bumped on each bundle load so React trees can re-bind locale labels globally. */
+    localeRevision: number;
     defaultSupportedLocale: string;
     appLocale: any;
     dateFormat: string;

package/store/slices/i18nSlice.js

@@ -70,6 +70,7 @@ const RTL_LANGUAGE_CODES = [
 ];
 const initialState = {
   selectedLocale: "",
+  localeRevision: 0,
   defaultSupportedLocale: "en",
   appLocale: {},
   dateFormat: "MMM d, y",
@@ -126,7 +127,7 @@ const loadLocaleBundle = createAsyncThunk(
         i18nService.selectedLocale = locale;
       }
       updateLocaleDirection(locale);
-      appstore.set("i18nService", __spreadProps(__spreadValues({}, response.data), { selectedLocale: locale }));
+      appstore.set("i18nService", __spreadProps(__spreadValues(__spreadValues({}, i18nService), response.data), { selectedLocale: locale }));
       return { data: response.data, locale };
     } catch (error) {
       console.warn(`Error loading locale resource: ${error}`);
@@ -188,6 +189,7 @@ const i18nSlice = createSlice({
       state.dateTimeFormat = `${state.dateFormat} ${state.timeFormat}`;
       state.prefabMessages = action.payload.data.prefabMessages || {};
       state.selectedLocale = action.payload.locale || state.selectedLocale;
+      state.localeRevision += 1;
     }).addCase(loadLocaleBundle.rejected, (state, action) => {
       state.error = action.payload;
     });

package/types/index.d.ts

@@ -60,5 +60,11 @@ export type ComponentInfo = {
     startUpVariables: string[];
     startUpActions: string[];
     autoUpdateVariables: string[];
+    /**
+     * Dependency paths this component reads cross-context from the active page, e.g.
+     * `Variables.PageDataInvoke1.dataSet.content` or `Widgets.button1.caption`. Declared at codegen
+     * time; the runtime value-gates re-renders to exactly these when the active page changes.
+     */
+    activePageDeps?: string[];
     isPartOfPrefab: boolean;
 };

package/utils/attr.js

@@ -215,10 +215,13 @@ const removeInvalidAttributes = (attributes, explicitRemoveAttributes) => {
   const filteredAttributes = {};
   Object.keys(attributes).forEach((key) => {
     var _a;
+    const value = attributes[key];
     if ((explicitRemoveAttributes == null ? void 0 : explicitRemoveAttributes.includes(key)) || INTERNAL_ATTRIBUTES.has(key) || !isSafeAttributeName(key)) {
+      if (key === "ref") {
+        filteredAttributes[key] = value;
+      }
       return;
     }
-    const value = attributes[key];
     if (Array.isArray(value) || typeof value === "object" && value !== null) {
       return;
     }

package/utils/svg-icon.d.ts

@@ -0,0 +1,27 @@
+/** Check if the url is an SVG icon url (path ends with .svg, ignoring query/hash). */
+export declare function isSvgIconUrl(url: string | null | undefined): boolean;
+/**
+ * Resolve a raw icon URL the same way image sources are resolved in React runtime
+ * (prefab resource prefixing for relative `resources/` paths).
+ */
+export declare function resolveIconUrl(rawUrl: string | null | undefined, prefabName?: string): string | null;
+/**
+ * Make fetched SVG behave like a font icon:
+ *  - replace non-"none" fill/stroke attributes with currentColor
+ *  - replace non-"none" inline fill:/stroke: style values with currentColor
+ *  - on the root <svg>, set width/height to 1em and default fill to currentColor
+ */
+export declare function normalizeSvg(svg: string): string;
+export declare function sanitizeSvgMarkup(svg: string): string;
+/**
+ * Returns cached normalized SVG markup synchronously
+ * Use before async fetch so remounts render the icon on the first paint.
+ */
+export declare function getCachedSvgIcon(resolvedUrl: string): string | undefined;
+/**
+ * Fetch and normalize SVG markup for the given resolved URL.
+ * Results are cached module-wide; concurrent requests for the same URL share one fetch.
+ */
+export declare function fetchSvgIcon(resolvedUrl: string): Promise<string>;
+/** @internal Test helper */
+export declare function clearSvgIconCache(): void;

package/utils/svg-icon.js

@@ -0,0 +1,75 @@
+import DOMPurify from "dompurify";
+import { prefixPrefabResourceUrl } from "./resource-url";
+function isSvgIconUrl(url) {
+  if (!url) {
+    return false;
+  }
+  const path = url.split(/[?#]/)[0];
+  return /\.svg$/i.test(path);
+}
+function resolveIconUrl(rawUrl, prefabName) {
+  if (!rawUrl) {
+    return null;
+  }
+  const resolved = prefixPrefabResourceUrl(rawUrl, prefabName);
+  return resolved || null;
+}
+function normalizeSvg(svg) {
+  if (!svg) return "";
+  let out = svg;
+  out = out.replace(/fill\s*=\s*"(?!\s*none\s*")[^"]*"/gi, 'fill="currentColor"').replace(/fill\s*=\s*'(?!\s*none\s*')[^']*'/gi, "fill='currentColor'").replace(/stroke\s*=\s*"(?!\s*none\s*")[^"]*"/gi, 'stroke="currentColor"').replace(/stroke\s*=\s*'(?!\s*none\s*')[^']*'/gi, "stroke='currentColor'").replace(/(fill|stroke)\s*:\s*(?!\s*none\b)[^;"']+/gi, "$1: currentColor");
+  out = out.replace(/<svg\b([^>]*)>/i, (_match, attrs) => {
+    let updated = attrs;
+    updated = updated.replace(/\swidth\s*=\s*("[^"]*"|'[^']*')/gi, "").replace(/\s+$/, "") + ' width="1em"';
+    updated = updated.replace(/\sheight\s*=\s*("[^"]*"|'[^']*')/gi, "").replace(/\s+$/, "") + ' height="1em"';
+    updated += ' fill="currentColor"';
+    return `<svg${updated}>`;
+  });
+  return out;
+}
+function sanitizeSvgMarkup(svg) {
+  return DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } });
+}
+const svgCache = /* @__PURE__ */ new Map();
+const inFlightRequests = /* @__PURE__ */ new Map();
+function getCachedSvgIcon(resolvedUrl) {
+  return svgCache.get(resolvedUrl);
+}
+async function fetchSvgIcon(resolvedUrl) {
+  const cached = svgCache.get(resolvedUrl);
+  if (cached !== void 0) {
+    return cached;
+  }
+  let request = inFlightRequests.get(resolvedUrl);
+  if (!request) {
+    request = fetch(resolvedUrl).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch SVG: ${response.status}`);
+      }
+      return response.text();
+    }).then((raw) => {
+      const normalized = sanitizeSvgMarkup(normalizeSvg(raw));
+      svgCache.set(resolvedUrl, normalized);
+      inFlightRequests.delete(resolvedUrl);
+      return normalized;
+    }).catch((error) => {
+      inFlightRequests.delete(resolvedUrl);
+      throw error;
+    });
+    inFlightRequests.set(resolvedUrl, request);
+  }
+  return request;
+}
+function clearSvgIconCache() {
+  svgCache.clear();
+  inFlightRequests.clear();
+}
+export {
+  clearSvgIconCache,
+  fetchSvgIcon,
+  getCachedSvgIcon,
+  isSvgIconUrl,
+  normalizeSvg,
+  resolveIconUrl,
+  sanitizeSvgMarkup
+};