xmlui 0.7.20 → 0.7.21

package/dist/scripts/src/components-core/rendering/AppWrapper.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppRoot_1 = require("./AppRoot");
+const constants_1 = require("@components-core/constants");
+const react_helmet_async_1 = require("react-helmet-async");
+const IconProvider_1 = require("@components/IconProvider");
+const ThemeProvider_1 = __importDefault(require("@components-core/theming/ThemeProvider"));
+const InspectorContext_1 = require("@components-core/InspectorContext");
+const ConfirmationModalContextProvider_1 = require("@components/ModalDialog/ConfirmationModalContextProvider");
+const AppContent_1 = require("./AppContent");
+const react_router_dom_1 = require("react-router-dom");
+const react_1 = __importDefault(require("react"));
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const react_query_1 = require("@tanstack/react-query");
+/**
+ * This component wraps the application into other layers of (nested) components
+ * that provide app functionality and services requiring unique interaction with
+ * the browser or the React environment.
+ */
+const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, }) => {
+    var _a;
+    if (previewMode) {
+        // --- Prevent leaking the meta items to the parent document,
+        // --- if it lives in an iframe (e.g. docs)
+        react_helmet_async_1.HelmetProvider.canUseDOM = false;
+    }
+    // --- Set a few default properties
+    const siteName = (globalProps === null || globalProps === void 0 ? void 0 : globalProps.name) || "XMLUI app";
+    const useHashBasedRouting = (_a = globalProps === null || globalProps === void 0 ? void 0 : globalProps.useHashBasedRouting) !== null && _a !== void 0 ? _a : true;
+    // --- The children of the AppWrapper component are the components that
+    // --- provide the app functionality and services. These components are
+    // --- wrapped in other components that provide the necessary environment
+    // --- for the app to run.
+    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent_1.AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled }) }) }) }) })] }));
+    // --- Select the router type for the app
+    const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
+    return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [(typeof window === "undefined" || process.env.VITE_REMIX) && dynamicChildren, !(typeof window === "undefined" || process.env.VITE_REMIX) && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }) }));
+};
+exports.AppWrapper = AppWrapper;

package/dist/scripts/src/components-core/{ComponentBed.js → rendering/ComponentAdapter.js}

@@ -52,22 +52,22 @@ const react_1 = __importStar(require("react"));
 const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
 const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
 const lodash_es_1 = require("lodash-es");
-const extractParam_1 = require("./utils/extractParam");
+const extractParam_1 = require("../utils/extractParam");
 const ThemeContext_1 = require("@components-core/theming/ThemeContext");
 const mergeProps_1 = require("@components-core/utils/mergeProps");
 const ComponentDecorator_1 = __importDefault(require("@components-core/ComponentDecorator"));
-const valueExtractor_1 = require("@components-core/container/valueExtractor");
+const valueExtractor_1 = require("@components-core/rendering/valueExtractor");
 const constants_1 = require("@components-core/constants");
 const ComponentRegistryContext_1 = require("@components/ComponentRegistryContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const ApiBoundComponent_1 = require("@components-core/ApiBoundComponent");
-const hooks_1 = require("./utils/hooks");
-const containers_1 = require("./abstractions/containers");
+const hooks_1 = require("../utils/hooks");
+const containers_1 = require("../abstractions/containers");
 const InspectorContext_1 = require("@components-core/InspectorContext");
 const SlotItem_1 = require("@components/SlotItem");
 const descriptorHelper_1 = require("@components-core/descriptorHelper");
-const style_compiler_1 = require("../parsers/style-parser/style-compiler");
-const event_handlers_1 = require("./event-handlers");
+const style_compiler_1 = require("../../parsers/style-parser/style-compiler");
+const event_handlers_1 = require("../event-handlers");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -76,7 +76,7 @@ const event_handlers_1 = require("./event-handlers");
  * current rendering context). The modified version uses a stable reference to the layout context
  * and provides a cleanup function (`onUnmount`) to call when the component is about to be disposed.
  */
-const ComponentBed = (0, react_1.forwardRef)(function ComponentBed(_a, ref) {
+const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, ref) {
     var _b;
     var { node, state, appContext, dispatch, lookupAction, lookupSyncCallback, renderChild, registerComponentApi, layoutContextRef, parentRenderContext, memoedVarsRef, onUnmount, uidInfoRef } = _a, rest = __rest(_a, ["node", "state", "appContext", "dispatch", "lookupAction", "lookupSyncCallback", "renderChild", "registerComponentApi", "layoutContextRef", "parentRenderContext", "memoedVarsRef", "onUnmount", "uidInfoRef"]);
     // --- Make sure the component definition has `props` and `events` properties
@@ -327,4 +327,4 @@ function getApiBoundItems(items, ...type) {
     }
     return ret;
 }
-exports.default = ComponentBed;
+exports.default = ComponentAdapter;

package/dist/scripts/src/components-core/rendering/ComponentWrapper.js

@@ -0,0 +1,147 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ComponentAdapter_1 = __importDefault(require("./ComponentAdapter"));
+const extractParam_1 = require("@components-core/utils/extractParam");
+const ContainerWrapper_1 = require("./ContainerWrapper");
+/**
+ * The ComponentNode it the outermost React component wrapping an xmlui component.
+ */
+exports.ComponentWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function ComponentWrapper(_a, ref) {
+    var _b;
+    var { node, resolvedKey, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, statePartChanged, layoutContext, parentRenderContext, memoedVarsRef, cleanup, uidInfoRef } = _a, rest = __rest(_a, ["node", "resolvedKey", "state", "dispatch", "appContext", "lookupAction", "lookupSyncCallback", "registerComponentApi", "renderChild", "statePartChanged", "layoutContext", "parentRenderContext", "memoedVarsRef", "cleanup", "uidInfoRef"]);
+    // --- We pass the layout context to the child components, so we need to
+    // --- make sure that it is stable
+    const stableLayoutContext = (0, react_1.useRef)(layoutContext);
+    // --- Transform the various data sources within the xmlui component definition
+    const nodeWithTransformedLoaders = (0, react_1.useMemo)(() => {
+        // --- If we have a DataSource child, we transform it to a loader on the node
+        let transformed = transformNodeWithChildDatasource(node);
+        transformed = transformNodeWithDataSourceRefProp(transformed, uidInfoRef);
+        transformed = transformNodeWithRawDataProp(transformed);
+        return transformed;
+    }, [node, uidInfoRef]);
+    // --- String values in the "data" prop are treated as URLs. This boolean
+    // --- indicates whether the "data" prop is a string or not.
+    const resolvedDataPropIsString = (0, react_1.useMemo)(() => {
+        var _a;
+        const resolvedDataProp = (0, extractParam_1.extractParam)(state, (_a = nodeWithTransformedLoaders.props) === null || _a === void 0 ? void 0 : _a.data, appContext, true);
+        return typeof resolvedDataProp === "string";
+    }, [appContext, (_b = nodeWithTransformedLoaders.props) === null || _b === void 0 ? void 0 : _b.data, state]);
+    // --- If the "data" prop is a string, we transform it to a DataSource component
+    // --- so that it can be fetched.
+    const nodeWithTransformedDatasourceProp = (0, react_1.useMemo)(() => {
+        return transformNodeWithDataProp(nodeWithTransformedLoaders, resolvedDataPropIsString, uidInfoRef);
+    }, [nodeWithTransformedLoaders, resolvedDataPropIsString, uidInfoRef]);
+    if ((0, ContainerWrapper_1.isContainerLike)(nodeWithTransformedDatasourceProp)) {
+        // --- This component should be rendered as a container
+        return ((0, jsx_runtime_1.jsx)(ContainerWrapper_1.ContainerWrapper, { resolvedKey: resolvedKey, node: nodeWithTransformedDatasourceProp, parentState: state, parentDispatch: dispatch, layoutContextRef: stableLayoutContext, parentRenderContext: parentRenderContext, parentStatePartChanged: statePartChanged, parentRegisterComponentApi: registerComponentApi, uidInfoRef: uidInfoRef, ref: ref }));
+    }
+    else {
+        // --- This component should be rendered as a regular component
+        return ((0, jsx_runtime_1.jsx)(ComponentAdapter_1.default, Object.assign({ onUnmount: cleanup, memoedVarsRef: memoedVarsRef, node: nodeWithTransformedDatasourceProp, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, parentRenderContext: parentRenderContext, layoutContextRef: stableLayoutContext, ref: ref, uidInfoRef: uidInfoRef }, rest)));
+    }
+}));
+// --- Create a DataLoader component for each DataSource child within the
+// --- xmlui component
+function transformNodeWithChildDatasource(node) {
+    var _a;
+    let didResolve = false;
+    let loaders = node.loaders;
+    let children = undefined;
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+        if ((child === null || child === void 0 ? void 0 : child.type) === "DataSource") {
+            didResolve = true;
+            if (!loaders) {
+                loaders = [];
+            }
+            loaders.push({
+                uid: child.uid,
+                type: "DataLoader",
+                props: child.props,
+                events: child.events,
+                when: child.when,
+            });
+        }
+        else {
+            if (!children) {
+                children = [];
+            }
+            children.push(child);
+        }
+    });
+    // --- Return the transform node with the collected loaders 
+    // --- (or the original one)
+    return didResolve
+        ? Object.assign(Object.assign({}, node), { children,
+            loaders }) : node;
+}
+// --- Properties may use loaders. We transform all of them to the virtual 
+// --- DataSourceRef component type.
+function transformNodeWithDataSourceRefProp(node, uidInfoRef) {
+    if (!node.props) {
+        return node;
+    }
+    let ret = Object.assign({}, node);
+    let resolved = false;
+    Object.entries(node.props).forEach(([key, value]) => {
+        let uidInfoForDatasource;
+        try {
+            uidInfoForDatasource = (0, extractParam_1.extractParam)(uidInfoRef.current, value);
+        }
+        catch (e) { }
+        if ((uidInfoForDatasource === null || uidInfoForDatasource === void 0 ? void 0 : uidInfoForDatasource.type) === "loader") {
+            resolved = true;
+            ret = Object.assign(Object.assign({}, ret), { props: Object.assign(Object.assign({}, ret.props), { [key]: {
+                        type: "DataSourceRef",
+                        uid: uidInfoForDatasource.uid,
+                    } }) });
+        }
+    });
+    // --- Done
+    return resolved ? ret : node;
+}
+// --- If the "data" prop is a string, we transform it to a DataSource component
+function transformNodeWithDataProp(node, resolvedDataPropIsString, uidInfoRef) {
+    var _a;
+    if (!((_a = node.props) === null || _a === void 0 ? void 0 : _a.__DATA_RESOLVED) &&
+        node.props &&
+        "data" in node.props &&
+        resolvedDataPropIsString) {
+        // --- We skip the transformation if the data property is a binding expression 
+        // --- for a loader value
+        if ((0, extractParam_1.extractParam)(uidInfoRef.current, node.props.data) === "loaderValue") {
+            return node;
+        }
+        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { data: {
+                    type: "DataSource",
+                    props: {
+                        url: node.props.data,
+                    },
+                } }) });
+    }
+    return node;
+}
+// --- We consider the "raw_data" prop as a resolved data value
+function transformNodeWithRawDataProp(node) {
+    if (node.props && "raw_data" in node.props) {
+        return Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { __DATA_RESOLVED: true, data: node.props.raw_data }) });
+    }
+    return node;
+}