xmlui 0.7.20 → 0.7.21

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

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const ErrorBoundary_module_scss_1 = __importDefault(require("./ErrorBoundary.module.scss"));
 /**
- * This component serves as an error boundary; it catches any errors within
+ * This React component serves as an error boundary; it catches any errors within
  * the nested components
  */
 class ErrorBoundary extends react_1.default.Component {
@@ -17,13 +17,16 @@ class ErrorBoundary extends react_1.default.Component {
         // --- We start with "no error" state
         this.state = {
             hasError: false,
-            error: null
+            error: null,
         };
     }
     /**
      * This method implements the Error Boundaries for the React application.
      * It is invoked if errors occur during the rendering phase of any lifecycle
      * methods or children components.
+     *
+     * DO NOT DELETE this method! Though it is not referenced directly from the code,
+     * it is a required part of the React component lifecycle.
      */
     static getDerivedStateFromError(error) {
         // --- Update state so the next render will show the fallback UI.
@@ -47,10 +50,13 @@ class ErrorBoundary extends react_1.default.Component {
     componentDidUpdate(prevProps, prevState, snapshot) {
         if (prevProps.node !== this.props.node) {
             this.setState({
-                hasError: false
+                hasError: false,
             });
         }
     }
+    /**
+     * Display an error message if an error occurred during rendering.
+     */
     render() {
         var _a;
         return this.state.hasError ? ((0, jsx_runtime_1.jsxs)("div", { className: ErrorBoundary_module_scss_1.default.errorOverlay, children: [(0, jsx_runtime_1.jsx)("div", { className: ErrorBoundary_module_scss_1.default.title, children: "There was an error!" }), (0, jsx_runtime_1.jsx)("div", { className: ErrorBoundary_module_scss_1.default.errorItem, children: (_a = this.state.error) === null || _a === void 0 ? void 0 : _a.message })] })) : (this.props.children);

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

@@ -0,0 +1,331 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const immer_1 = __importDefault(require("immer"));
+const lodash_es_1 = require("lodash-es");
+const memoize_one_1 = __importDefault(require("memoize-one"));
+const containers_1 = require("@components-core/abstractions/containers");
+const constants_1 = require("@components-core/constants");
+const collectFnVarDeps_1 = require("@components-core/rendering/collectFnVarDeps");
+const reducer_1 = require("@components-core/rendering/reducer");
+const DebugViewProvider_1 = require("@components-core/DebugViewProvider");
+const ErrorBoundary_1 = require("@components-core/rendering/ErrorBoundary");
+const visitors_1 = require("@components-core/script-runner/visitors");
+const hooks_1 = require("@components-core/utils/hooks");
+const react_1 = require("react");
+const Container_1 = require("./Container");
+const react_2 = require("@remix-run/react");
+const code_behind_collect_1 = require("../../parsers/scripting/code-behind-collect");
+const AppContext_1 = require("@components-core/AppContext");
+const ParameterParser_1 = require("@components-core/script-runner/ParameterParser");
+const eval_tree_sync_1 = require("@components-core/script-runner/eval-tree-sync");
+const extractParam_1 = require("@components-core/utils/extractParam");
+const misc_1 = require("@components-core/utils/misc");
+// A React component that wraps a view container into an error boundary
+// (it's a named function inside the memo, this way it will be visible with that name in the react devtools)
+exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function StateContainer({ node, resolvedKey, parentState, parentStatePartChanged, parentRegisterComponentApi, parentDispatch, parentRenderContext, layoutContextRef, uidInfoRef, isImplicit, }, ref) {
+    const [version, setVersion] = (0, react_1.useState)(0);
+    const routingParams = useRoutingParams();
+    const memoedVars = (0, react_1.useRef)(new Map());
+    const stateFromOutside = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => extractScopedState(parentState, node.uses), [node.uses, parentState]));
+    // --- All state manipulation happens through the container reducer, which is created here.
+    // --- This reducer allow collecting state changes for debugging purposes. The `debugView`
+    // --- contains the debug configuration; it may enable (or disable) logging.
+    const debugView = (0, DebugViewProvider_1.useDebugView)();
+    const containerReducer = (0, reducer_1.createContainerReducer)(debugView);
+    const [componentState, dispatch] = (0, react_1.useReducer)(containerReducer, constants_1.EMPTY_OBJECT);
+    // --- The exposed APIs of components are also the part of the state.
+    const [componentApis, setComponentApis] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const componentStateWithApis = (0, hooks_1.useShallowCompareMemoize)((0, react_1.useMemo)(() => {
+        const ret = Object.assign({}, componentState);
+        for (const stateKey of Object.getOwnPropertySymbols(componentState)) {
+            const value = componentState[stateKey];
+            if (stateKey.description) {
+                ret[stateKey.description] = value;
+            }
+        }
+        if (Reflect.ownKeys(componentApis).length === 0) {
+            //skip containers with no registered apis
+            return ret;
+        }
+        for (const componentApiKey of Object.getOwnPropertySymbols(componentApis)) {
+            const value = componentApis[componentApiKey];
+            if (componentApiKey.description) {
+                const key = componentApiKey.description;
+                ret[key] = Object.assign(Object.assign({}, (ret[key] || {})), value);
+            }
+            ret[componentApiKey] = Object.assign(Object.assign({}, ret[componentApiKey]), value);
+        }
+        return ret;
+    }, [componentState, componentApis]));
+    const localVarsStateContext = useCombinedState(stateFromOutside, componentStateWithApis, node.contextVars);
+    const parsedScriptPart = node.scriptCollected;
+    if ((parsedScriptPart === null || parsedScriptPart === void 0 ? void 0 : parsedScriptPart.moduleErrors) && !(0, lodash_es_1.isEmpty)(parsedScriptPart.moduleErrors)) {
+        throw new CodeBehindParseError(parsedScriptPart.moduleErrors);
+    }
+    if (node.scriptError && !(0, lodash_es_1.isEmpty)(node.scriptError)) {
+        throw new CodeBehindParseError(node.scriptError);
+    }
+    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(componentState);
+    const varDefinitions = (0, hooks_1.useShallowCompareMemoize)(Object.assign(Object.assign(Object.assign(Object.assign({}, parsedScriptPart === null || parsedScriptPart === void 0 ? void 0 : parsedScriptPart.functions), node.functions), parsedScriptPart === null || parsedScriptPart === void 0 ? void 0 : parsedScriptPart.vars), node.vars));
+    //first: collection function (arrowExpressions) dependencies
+    //    -> do it until there's no function dep, only var deps
+    const functionDeps = (0, react_1.useMemo)(() => {
+        const fnDeps = {};
+        Object.entries(varDefinitions).forEach(([key, value]) => {
+            if (isParsedValue(value) && value.tree.type === "ArrowE") {
+                fnDeps[key] = (0, visitors_1.collectVariableDependencies)(value.tree, referenceTrackedApi);
+            }
+        });
+        return (0, collectFnVarDeps_1.collectFnVarDeps)(fnDeps);
+    }, [referenceTrackedApi, varDefinitions]);
+    // then resolve vars and replace function deps with the collected deps for that function
+    //first resolve round (we do 2, to make sure that the order of the definitions doesn't cause problems)
+    // e.g. 'testFn' uses $props, but $props is not resolved yet
+    const preResolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContext, (0, react_1.useRef)(new Map()));
+    const localVarsStateContextWithPreResolvedLocalVars = (0, hooks_1.useShallowCompareMemoize)(Object.assign(Object.assign({}, preResolvedLocalVars), localVarsStateContext));
+    const resolvedLocalVars = useVars(varDefinitions, functionDeps, localVarsStateContextWithPreResolvedLocalVars, memoedVars);
+    const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
+    const combinedState = useCombinedState(stateFromOutside, node.contextVars, mergedWithVars, routingParams);
+    const registerComponentApi = (0, react_1.useCallback)((uid, api) => {
+        setComponentApis((0, immer_1.default)((draft) => {
+            // console.log("-----BUST----setComponentApis");
+            if (!draft[uid]) {
+                draft[uid] = {};
+            }
+            Object.entries(api).forEach(([key, value]) => {
+                if (draft[uid][key] !== value) {
+                    // console.log(`-----BUST------new api for ${uid}`, draft[uid][key], value)
+                    draft[uid][key] = value;
+                }
+            });
+        }));
+    }, []);
+    const componentStateRef = (0, react_1.useRef)(componentStateWithApis);
+    const statePartChanged = (0, react_1.useCallback)((pathArray, newValue, target, action) => {
+        const key = pathArray[0];
+        if (key in componentStateRef.current || key in resolvedLocalVars) {
+            // --- Sign that a state field (or a part of it) has changed
+            dispatch({
+                type: containers_1.ContainerActionKind.STATE_PART_CHANGED,
+                payload: {
+                    path: pathArray,
+                    value: newValue,
+                    target,
+                    actionType: action,
+                },
+            });
+        }
+        else {
+            if (!node.uses || node.uses.includes(key)) {
+                parentStatePartChanged(pathArray, newValue, target, action);
+            }
+        }
+    }, [resolvedLocalVars, node.uses, parentStatePartChanged]);
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "container", children: (0, jsx_runtime_1.jsx)(Container_1.Container, { resolvedKey: resolvedKey, node: node, componentState: combinedState, dispatch: dispatch, parentDispatch: parentDispatch, setVersion: setVersion, version: version, statePartChanged: statePartChanged, registerComponentApi: registerComponentApi, parentRegisterComponentApi: parentRegisterComponentApi, layoutContextRef: layoutContextRef, parentRenderContext: parentRenderContext, memoedVarsRef: memoedVars, isImplicit: isImplicit, ref: ref, uidInfoRef: uidInfoRef }) }));
+}));
+const useRoutingParams = () => {
+    const [queryParams] = (0, react_2.useSearchParams)();
+    const routeParams = (0, react_2.useParams)();
+    const queryParamsMap = (0, react_1.useMemo)(() => {
+        const result = {};
+        for (const [key, value] of Array.from(queryParams.entries())) {
+            result[key] = value;
+        }
+        return result;
+    }, [queryParams]);
+    return (0, react_1.useMemo)(() => {
+        return {
+            $routeParams: routeParams,
+            $queryParams: queryParamsMap,
+        };
+    }, [queryParamsMap, routeParams]);
+};
+// Extracts the `state` property values defined in a component definition's `uses` property. It uses the specified
+// `appContext` when resolving the state values.
+function extractScopedState(parentState, uses) {
+    if (!uses) {
+        return parentState;
+    }
+    if (uses.length === 0) {
+        return constants_1.EMPTY_OBJECT;
+    }
+    return (0, lodash_es_1.pick)(parentState, uses);
+}
+// This hook combines state properties in a list of states so that a particular state property in a higher
+// argument index overrides the same-named state property in a lower argument index.
+function useCombinedState(...states) {
+    const combined = (0, react_1.useMemo)(() => {
+        let ret = {};
+        states.forEach((state = constants_1.EMPTY_OBJECT) => {
+            // console.log("st", state);
+            if (state !== constants_1.EMPTY_OBJECT) {
+                ret = Object.assign(Object.assign({}, ret), state);
+            }
+            // console.log("ret", ret);
+        });
+        return ret;
+    }, [states]);
+    return (0, hooks_1.useShallowCompareMemoize)(combined);
+}
+// This hook combines state properties in a list of states so that a particular state property in a higher
+// argument index merges into the same-named state property in a lower argument index.
+// This hook combines state properties in a list of states so that a particular state property in a higher
+// argument index merges into the same-named state property in a lower argument index.
+function useMergedState(localVars, componentState) {
+    const merged = (0, react_1.useMemo)(() => {
+        const ret = Object.assign({}, localVars);
+        Reflect.ownKeys(componentState).forEach((key) => {
+            const value = componentState[key];
+            if (ret[key] === undefined) {
+                ret[key] = value;
+            }
+            else {
+                if ((0, lodash_es_1.isPlainObject)(ret[key]) && (0, lodash_es_1.isPlainObject)(value)) {
+                    ret[key] = (0, lodash_es_1.merge)((0, lodash_es_1.cloneDeep)(ret[key]), value);
+                }
+                else if (Array.isArray(ret[key]) && Array.isArray(value)) {
+                    ret[key] = Object.assign([], ret[key], value);
+                }
+                else {
+                    ret[key] = value;
+                }
+            }
+        });
+        return ret;
+    }, [localVars, componentState]);
+    return (0, hooks_1.useShallowCompareMemoize)(merged);
+}
+// This hook resolves variables to their current value (using binding expression evaluation)
+function useVars(vars = constants_1.EMPTY_OBJECT, fnDeps = constants_1.EMPTY_OBJECT, componentState, memoedVars) {
+    const appContext = (0, AppContext_1.useAppContext)();
+    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(componentState);
+    const resolvedVars = (0, react_1.useMemo)(() => {
+        const ret = {};
+        Object.entries(vars).forEach(([key, value]) => {
+            if (key === "$props") {
+                // --- We already resolved props in a compound component
+                ret[key] = value;
+            }
+            else {
+                if (!isParsedValue(value) && typeof value !== "string") {
+                    ret[key] = value;
+                }
+                else {
+                    // --- Resolve each variable's value, without going into the details of arrays and objects
+                    if (!memoedVars.current.has(value)) {
+                        memoedVars.current.set(value, {
+                            getDependencies: (0, memoize_one_1.default)((value, referenceTrackedApi) => {
+                                if (isParsedValue(value)) {
+                                    return (0, visitors_1.collectVariableDependencies)(value.tree, referenceTrackedApi);
+                                }
+                                // console.log(`GETTING DEPENDENCY FOR ${value} with:`, referenceTrackedApi);
+                                const params = (0, ParameterParser_1.parseParameterString)(value);
+                                let ret = new Set();
+                                params.forEach((param) => {
+                                    if (param.type === "expression") {
+                                        ret = new Set([
+                                            ...ret,
+                                            ...(0, visitors_1.collectVariableDependencies)(param.value, referenceTrackedApi),
+                                        ]);
+                                    }
+                                });
+                                return Array.from(ret);
+                            }),
+                            obtainValue: (0, memoize_one_1.default)((value, state, appContext, strict, deps, appContextDeps) => {
+                                // console.log(
+                                //   "VARS, BUST, obtain value called with",
+                                //   value,
+                                //   { state, appContext },
+                                //   {
+                                //     deps,
+                                //     appContextDeps,
+                                //   }
+                                // );
+                                try {
+                                    return isParsedValue(value)
+                                        ? (0, eval_tree_sync_1.evalBinding)(value.tree, {
+                                            localContext: state,
+                                            appContext,
+                                            options: {
+                                                defaultToOptionalMemberAccess: true,
+                                            },
+                                        })
+                                        : (0, extractParam_1.extractParam)(state, value, appContext, strict);
+                                }
+                                catch (e) {
+                                    console.log(state);
+                                    throw new ParseVarError(value, e);
+                                }
+                            }, ([_newExpression, _newState, _newAppContext, _newStrict, newDeps, newAppContextDeps,], [_lastExpression, _lastState, _lastAppContext, _lastStrict, lastDeps, lastAppContextDeps,]) => {
+                                return ((0, misc_1.shallowCompare)(newDeps, lastDeps) &&
+                                    (0, misc_1.shallowCompare)(newAppContextDeps, lastAppContextDeps));
+                            }),
+                        });
+                    }
+                    const stateContext = Object.assign(Object.assign({}, ret), componentState);
+                    let dependencies = [];
+                    if (fnDeps[key]) {
+                        dependencies = fnDeps[key];
+                    }
+                    else {
+                        memoedVars.current
+                            .get(value)
+                            .getDependencies(value, referenceTrackedApi)
+                            .forEach((dep) => {
+                            if (fnDeps[dep]) {
+                                dependencies.push(...fnDeps[dep]);
+                            }
+                            else {
+                                dependencies.push(dep);
+                            }
+                        });
+                        dependencies = [...new Set(dependencies)];
+                    }
+                    const stateDepValues = (0, misc_1.pickFromObject)(stateContext, dependencies);
+                    const appContextDepValues = (0, misc_1.pickFromObject)(appContext, dependencies);
+                    // console.log("VARS, obtain value called with", stateDepValues, appContextDepValues);
+                    ret[key] = memoedVars.current
+                        .get(value)
+                        .obtainValue(value, stateContext, appContext, true, stateDepValues, appContextDepValues);
+                }
+            }
+        });
+        return ret;
+    }, [appContext, componentState, fnDeps, memoedVars, referenceTrackedApi, vars]);
+    return (0, hooks_1.useShallowCompareMemoize)(resolvedVars);
+}
+class CodeBehindParseError extends Error {
+    constructor(errors) {
+        const mainErrors = errors["Main"] || [];
+        const messages = mainErrors.map((errorMessage) => {
+            let ret = `${errorMessage.code} : ${errorMessage.text}`;
+            const posInfo = [];
+            if (errorMessage.line !== undefined) {
+                posInfo.push(`line:${errorMessage.line}`);
+            }
+            if (errorMessage.column !== undefined) {
+                posInfo.push(`column:${errorMessage.column}`);
+            }
+            if (posInfo.length) {
+                ret = `${ret} (${posInfo.join(", ")})`;
+            }
+            return ret;
+        });
+        super(messages.join("\n"));
+        Object.setPrototypeOf(this, CodeBehindParseError.prototype);
+    }
+}
+class ParseVarError extends Error {
+    constructor(varName, originalError) {
+        super(`Error on var: ${varName} - ${(originalError === null || originalError === void 0 ? void 0 : originalError.message) || "unknown"}`);
+    }
+}
+//true if it's coming from a code behind or a script tag
+function isParsedValue(value) {
+    return value && typeof value === "object" && value[code_behind_collect_1.PARSED_MARK_PROP];
+}

package/dist/scripts/src/components-core/{container → rendering}/buildProxy.js

@@ -1,25 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildProxy = buildProxy;
 /**
- * Use this function to build a JavaScript proxy for localContext objects. The responsibility of the proxy is to
- * collect the changes within the localContext so that we can refresh the UI according to them.
+ * Use this function to build a JavaScript proxy for localContext objects. The
+ * responsibility of the proxy is to collect the changes within the localContext
+ * so that we can refresh the UI according to them.
  */
 function buildProxy(proxyTarget, callback, tree = []) {
-    // --- We identify a particular (deep) localContext property by its full path; this function create the path
+    // --- We identify a particular (deep) localContext property by its full path; 
+    // --- this function creates the path
     const getPath = (prop) => tree.concat(prop).join(".");
     const proxiedValues = new WeakMap();
     // --- Create the proxy object for `proxyTarget`
     return new Proxy(proxyTarget, {
         get: function (target, prop, receiver) {
             const value = Reflect.get(target, prop, receiver);
-            // --- Create proxies only for writable objects and arrays, except arrow function expressions.
+            // --- Create proxies only for writable objects and arrays, except arrow 
+            // --- function expressions.
             if (value &&
                 !value._ARROW_EXPR_ &&
                 !Object.isFrozen(value) &&
                 typeof value === "object" &&
                 ["Array", "Object"].includes(value.constructor.name)) {
-                //just to make sure that accessing the proxied objects' field gets the same reference every time
-                //  e.g. this wouldn't be true otherwise: proxiedObject['field'] === proxiedObject['field']
+                // --- Just to make sure that accessing the proxied objects' field gets 
+                // --- the same reference every time. e.g. this wouldn't be true otherwise: 
+                // --- proxiedObject['field'] === proxiedObject['field']
                 if (!proxiedValues.has(value)) {
                     proxiedValues.set(value, buildProxy(value, callback, tree.concat(prop)));
                 }
@@ -51,4 +56,3 @@ function buildProxy(proxyTarget, callback, tree = []) {
         },
     });
 }
-exports.default = buildProxy;

package/dist/scripts/src/components-core/{container → rendering}/collectFnVarDeps.js

@@ -5,7 +5,7 @@ exports.collectFnVarDeps = collectFnVarDeps;
  * This function collects all the dependencies of a function in a flat list
  * (no circular deps).
  * @param fnDeps The dependencies of the functions. Each key is a function name
- * and the value is an array of the dependencies.
+ * and the value is an array of variables the function depends on.
  * @returns The flat dependencies of the functions.
  *
  * Example:
@@ -33,7 +33,7 @@ function collectFnVarDeps(fnDeps = {}) {
         const ret = [];
         fnDeps[depKey].forEach((key) => {
             if (visitedPath.has(key)) {
-                //we already walked here, skip this one (avoid infinite loops for circular deps)
+                // --- We already walked here, avoid infinite loops for circular deps
                 return;
             }
             visitedPath.add(key);

package/dist/scripts/src/components-core/{container → rendering}/reducer.js

@@ -125,6 +125,9 @@ function createContainerReducer(debugView) {
                 prevState,
                 nextState,
             };
+            // TODO: Logging to the console is a temporary solution. We should use a proper 
+            // logging mechanism. Nonetheless, this works only with state transition logging
+            // enabled (which is disabled by default).
             console.log("Transition", loggedTransition);
             if (debugView.stateTransitions) {
                 if (debugView.stateTransitions.length >= MAX_STATE_TRANSITION_LENGTH) {

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderChild = renderChild;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentWrapper_1 = require("./ComponentWrapper");
+const extractParam_1 = require("@components-core/utils/extractParam");
+/**
+ * This function is the jolly-joker of the rendering process. It renders a child component
+ * based on the specified context, which contains the component's definition, the current state,
+ * and other necessary information.
+ *
+ * The function checks a few special cases:
+ * - <Slot> with a single text node child: it renders the text in the context of the parent component.
+ * - CDATA text nodes: it renders the text as is without parsing it.
+ * - TextNode: it extracts the text from the node and renders it.
+ *
+ * In other cases, it extracts the component's ID and renders the component as a <ComponentNode>.
+ *
+ * As this function passes itself as a renderChild function to the <ComponentNode>, it can render
+ * nested components recursively.
+ */
+function renderChild({ node, state, dispatch, appContext, lookupAction, lookupSyncCallback, registerComponentApi, renderChild, statePartChanged, layoutContext, parentRenderContext, memoedVarsRef, cleanup, uidInfoRef, }) {
+    var _a, _b, _c;
+    // --- Render only visible components
+    if (!(0, extractParam_1.shouldKeep)(node.when, state, appContext)) {
+        return null;
+    }
+    // --- We do not parse text nodes specified with CDATA to avoid whitespace collapsing
+    const nodeValue = (_a = node.props) === null || _a === void 0 ? void 0 : _a.value;
+    if (node.type === "TextNodeCData") {
+        return nodeValue !== null && nodeValue !== void 0 ? nodeValue : "";
+    }
+    // --- A TextNode value may contain nexted expressions, so we extract it.
+    if (node.type === "TextNode") {
+        return (0, extractParam_1.extractParam)(state, nodeValue, appContext, true);
+    }
+    // --- Rendering a Slot requires some preparations, as TextNode and
+    // --- TextNodeCData are virtual nodes. Also, slots may have default templates
+    // --- to render when no slot children are specified. The following section
+    // --- handles these cases.
+    if (node.type === "Slot") {
+        // --- Check for special Slot cases
+        let slotChildren;
+        const templateName = (_b = node.props) === null || _b === void 0 ? void 0 : _b.name;
+        // console.log("templateName", templateName);
+        if (templateName) {
+            // --- Let's check the validity of the slot name
+            if (!templateName.endsWith("Template")) {
+                throw new Error(`Slot name '${templateName}' is not valid. ` +
+                    "A named slot should use a name ending with 'Template'.");
+            }
+            // --- Named slot: use a template property from the parent component
+            slotChildren = (_c = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.props) === null || _c === void 0 ? void 0 : _c[templateName];
+        }
+        else {
+            // --- Children slot: use the children of the parent component
+            slotChildren = parentRenderContext === null || parentRenderContext === void 0 ? void 0 : parentRenderContext.children;
+        }
+        if (!slotChildren) {
+            // --- No children to render, let's try the default slot template (if there is any)
+            slotChildren = node.children;
+        }
+        if (slotChildren) {
+            const toRender = Array.isArray(slotChildren) ? slotChildren : [slotChildren];
+            // --- Check for the virtual nodes. At this point, parentRendererContext is
+            // --- undefined when the parent does not provide slot children. In this case,
+            // --- the ComponentBed component will render the default slot template.
+            if (toRender.length === 1 && parentRenderContext) {
+                if (toRender[0].type === "TextNodeCData" || toRender[0].type === "TextNode") {
+                    // --- Preserve the text and render it in the parent context
+                    return parentRenderContext.renderChild(toRender);
+                }
+            }
+        }
+    }
+    // --- In other cases, we extract the component ID, and then render the component.
+    // --- A component's ID is generally a string with identifier syntax. However, some
+    // --- internal components have IDs with expressions, so we evaluate them.
+    const key = (0, extractParam_1.extractParam)(state, node.uid, appContext, true);
+    return ((0, jsx_runtime_1.jsx)(ComponentWrapper_1.ComponentWrapper, { resolvedKey: key, node: node, cleanup: cleanup, statePartChanged: statePartChanged, memoedVarsRef: memoedVarsRef, state: state, dispatch: dispatch, appContext: appContext, lookupAction: lookupAction, lookupSyncCallback: lookupSyncCallback, registerComponentApi: registerComponentApi, renderChild: renderChild, layoutContext: layoutContext, parentRenderContext: parentRenderContext, uidInfoRef: uidInfoRef }, key));
+}

package/dist/scripts/src/index.js

@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toCssVar = exports.useColors = exports.getColor = exports.Splitter = exports.Button = exports.Stack = exports.Icon = exports.ErrorBoundary = exports.AppRoot = exports.useTheme = exports.startApp = exports.parseScssVar = exports.d = exports.createMetadata = exports.createComponentRenderer = exports.StandaloneApp = void 0;
 const StandaloneApp_1 = __importStar(require("@components-core/StandaloneApp"));
@@ -43,13 +40,13 @@ Object.defineProperty(exports, "startApp", { enumerable: true, get: function ()
 const ComponentDefs_1 = require("@abstractions/ComponentDefs");
 Object.defineProperty(exports, "createMetadata", { enumerable: true, get: function () { return ComponentDefs_1.createMetadata; } });
 Object.defineProperty(exports, "d", { enumerable: true, get: function () { return ComponentDefs_1.d; } });
-const AppRoot_1 = __importDefault(require("@components-core/AppRoot"));
-exports.AppRoot = AppRoot_1.default;
+const AppRoot_1 = require("@components-core/rendering/AppRoot");
+Object.defineProperty(exports, "AppRoot", { enumerable: true, get: function () { return AppRoot_1.AppRoot; } });
 const renderers_1 = require("@components-core/renderers");
 Object.defineProperty(exports, "createComponentRenderer", { enumerable: true, get: function () { return renderers_1.createComponentRenderer; } });
 const IconNative_1 = require("@components/Icon/IconNative");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return IconNative_1.Icon; } });
-const ErrorBoundary_1 = require("@components-core/ErrorBoundary");
+const ErrorBoundary_1 = require("@components-core/rendering/ErrorBoundary");
 Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return ErrorBoundary_1.ErrorBoundary; } });
 const StackNative_1 = require("@components/Stack/StackNative");
 Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return StackNative_1.Stack; } });