xmlui 0.7.13 → 0.7.15

package/dist/scripts/src/components-core/StandaloneApp.js

@@ -0,0 +1,589 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startApp = startApp;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = __importDefault(require("react-dom/client"));
+require("../index.scss");
+const AppRoot_1 = __importDefault(require("@components-core/AppRoot"));
+const misc_1 = require("@components-core/utils/misc");
+const ApiInterceptorProvider_1 = require("@components-core/interception/ApiInterceptorProvider");
+const constants_1 = require("@components-core/constants");
+const xmlui_parser_1 = require("@components-core/xmlui-parser");
+const hooks_1 = require("./utils/hooks");
+const fileExtensions_1 = require("../parsers/xmlui-parser/fileExtensions");
+const Parser_1 = require("../parsers/scripting/Parser");
+const code_behind_collect_1 = require("../parsers/scripting/code-behind-collect");
+const ComponentProvider_1 = require("@components/ComponentProvider");
+const markup_check_1 = require("@components-core/markup-check");
+const ThemeProvider_1 = require("@components-core/theming/ThemeProvider");
+const MAIN_FILE = "Main." + fileExtensions_1.componentFileExtension;
+const MAIN_CODE_BEHIND_FILE = "Main." + fileExtensions_1.codeBehindFileExtension;
+const CONFIG_FILE = "config.json";
+/**
+ * This React component represents a standalone app that implements a web
+ * application with xmlui components. A StandaloneApp instance uses a
+ * AppRoot wrapped into an ApiInterceptor.
+ *
+ * AppRoot is responsible for rendering the app (using an internal
+ * representation); ApiInterceptor can emulate some backend functionality
+ * running in the browser.
+ */
+function StandaloneApp({ appDef, decorateComponentsWithTestId, debugEnabled = false, runtime, components: customComponents, componentManager, }) {
+    var _a;
+    const servedFromSingleFile = (0, react_1.useMemo)(() => {
+        return typeof window !== "undefined" && window.location.href.startsWith("file");
+    }, []);
+    // --- Fetch all files constituting the standalone app, including components,
+    // --- themes, and other artifacts. Display the app version numbers in the
+    // --- console.
+    const standaloneApp = useStandalone(appDef, runtime, componentManager);
+    usePrintVersionNumber(standaloneApp);
+    if (!standaloneApp) {
+        // --- Problems found, the standalone app cannot run
+        return null;
+    }
+    const { apiInterceptor, name, appGlobals, defaultTheme, defaultTone, resources, resourceMap, entryPoint, components, themes, sources, } = standaloneApp;
+    // --- The app may use a mocked API already defined in `window.XMLUI_MOCK_API`
+    // --- or within the standalone app's definition, in `apiInterceptor`.
+    const mockedApi = 
+    // @ts-ignore
+    typeof window !== "undefined" && window.XMLUI_MOCK_API ? window.XMLUI_MOCK_API : apiInterceptor;
+    // --- Components can be decorated with test IDs used in end-to-end tests.
+    // --- This flag checks the environment if the app runs in E2E test mode.
+    const shouldDecorateWithTestId = decorateComponentsWithTestId ||
+        // @ts-ignore
+        (typeof window !== "undefined" ? window.XMLUI_MOCK_TEST_ID : false);
+    // --- An app can turn off the default hash routing.
+    const useHashBasedRouting = (_a = appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) !== null && _a !== void 0 ? _a : true;
+    return ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mockedApi, useHashBasedRouting: useHashBasedRouting, children: (0, jsx_runtime_1.jsx)(AppRoot_1.default, { servedFromSingleFile: servedFromSingleFile, decorateComponentsWithTestId: shouldDecorateWithTestId, node: entryPoint, standalone: true, debugEnabled: debugEnabled, 
+            // @ts-ignore
+            routerBaseName: typeof window !== "undefined" ? window.__PUBLIC_PATH || "" : "", globalProps: Object.assign({ name: name }, (appGlobals || {})), defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, resourceMap: resourceMap, sources: sources, componentManager: componentManager, contributes: {
+                compoundComponents: components,
+                components: customComponents,
+                themes,
+            } }) }));
+}
+/**
+ * This function parses the response of a fetch retrieving the contents of a
+ * component markup file.
+ * @param response The response coming from the fetch
+ * @returns If parsing is successful, it returns the parsed response containing
+ * the component definition. Otherwise, it returns a component definition that
+ * displays the errors.
+ */
+function parseComponentMarkupResponse(response) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${response.url}`);
+        }
+        const code = yield response.text();
+        const fileId = response.url;
+        let { component, errors, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(code, fileId);
+        if (errors.length > 0) {
+            const compName = erroneousCompoundComponentName !== null && erroneousCompoundComponentName !== void 0 ? erroneousCompoundComponentName : response.url.substring(response.url.lastIndexOf("/") + 1, response.url.length - ".xmlui".length);
+            component = (0, xmlui_parser_1.errReportComponent)(errors, fileId, compName);
+        }
+        return {
+            component,
+            src: code,
+            file: fileId,
+            hasError: errors.length > 0,
+        };
+    });
+}
+/**
+ * This function parses the response of a fetch retrieving the contents of a
+ * code-behind file.
+ * @param response The response coming from the fetch
+ * @returns If parsing is successful, it returns the parsed response containing
+ * the code-behind declarations. Otherwise, it returns a component definition that
+ * displays the errors.
+ */
+function parseCodeBehindResponse(response) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${response.url}`);
+        }
+        const code = yield response.text();
+        const parser = new Parser_1.Parser(code);
+        try {
+            parser.parseStatements();
+        }
+        catch (e) {
+            if (parser.errors.length > 0) {
+                return {
+                    component: (0, xmlui_parser_1.errReportScriptError)(parser.errors[0], response.url),
+                    file: response.url,
+                    hasError: true,
+                };
+            }
+        }
+        const codeBehind = (0, code_behind_collect_1.collectCodeBehindFromSource)("Main", code, () => {
+            return "";
+        }, (a) => a);
+        if (Object.keys((_a = codeBehind.moduleErrors) !== null && _a !== void 0 ? _a : {}).length > 0) {
+            return {
+                component: (0, xmlui_parser_1.errReportModuleErrors)(codeBehind.moduleErrors, response.url),
+                file: response.url,
+                hasError: true,
+            };
+        }
+        // --- Remove the code-behind tokens from the tree shrinking the tree
+        (0, code_behind_collect_1.removeCodeBehindTokensFromTree)(codeBehind);
+        return {
+            codeBehind: codeBehind,
+            file: response.url,
+        };
+    });
+}
+// --- Tests is the given path matches the speified file name
+function matchesFileName(path, fileName) {
+    return (path.endsWith(`/${fileName}.ts`) ||
+        path.endsWith(`/${fileName}.js`) ||
+        path.endsWith(`/${fileName}.${fileExtensions_1.componentFileExtension}`) ||
+        path.endsWith(`/${fileName}.${fileExtensions_1.codeBehindFileExtension}`));
+}
+// --- Tests if the given path contains the specified folder
+function matchesFolder(path, folderName) {
+    return path.includes(`/${folderName}/`);
+}
+/**
+ * This function turns a collection of runtime file declarations into a standalone
+ * app description.
+ * @param runtime A hash object containing the runtime files. The keys are the file
+ * paths and the values are the file contents.
+ * @returns The standalone app description.
+ *
+ * When the standalone app is pre-compiled, each property in `runtime` holds such a
+ * pre-compiled item. Otherwise, `runtime` is an empty object.
+ *
+ * While processing the files here, we can assume they are free from compilation
+ * errors, as such errors would be observed in the compile phase.
+ */
+function resolveRuntime(runtime) {
+    // --- Collect the components and their sources. We pass the sources to the standalone app
+    // --- so that it can be used for error display and debugging purposes.
+    const sources = {};
+    const componentsByFileName = {};
+    const codeBehindsByFileName = {};
+    const themes = [];
+    // --- Some working variables
+    let config;
+    let entryPoint;
+    let entryPointCodeBehind;
+    let apiInterceptor;
+    // --- Process the runtime files
+    for (const [key, value] of Object.entries(runtime)) {
+        if (matchesFileName(key, "config")) {
+            // --- We assume that the config file has a default export and this
+            // --- export is the standalone app's configuration.
+            config = value.default;
+        }
+        // --- We assume that the entry point is either named "Main" or "App".
+        if (matchesFileName(key, "Main") || matchesFileName(key, "App")) {
+            if (key.endsWith(fileExtensions_1.codeBehindFileExtension)) {
+                // --- "default" contains the functions and variables declared in the
+                // --- code behind file.
+                entryPointCodeBehind = value.default;
+            }
+            else {
+                // --- "default" contains the component definition, the file index,
+                // --- and the source code.
+                entryPoint = value.default.component;
+                if (value.default.file) {
+                    sources[value.default.file] = value.default.src;
+                }
+            }
+        }
+        // --- Use API emulation if available
+        if (matchesFileName(key, "api")) {
+            apiInterceptor = value.default;
+        }
+        // --- Collect the components and their code behinds
+        if (matchesFolder(key, "components")) {
+            if (key.endsWith(`.${fileExtensions_1.codeBehindFileExtension}`)) {
+                // --- "default" contains the functions and variables declared in the
+                // --- component's code behind file.
+                codeBehindsByFileName[key] = value.default;
+            }
+            else {
+                // --- "default" contains the component definition, the file index,
+                // --- and the source code.
+                componentsByFileName[key] = value.default.component;
+                sources[value.default.file] = value.default.src;
+            }
+        }
+        // --- Collect the themes declared with the app
+        if (matchesFolder(key, "themes")) {
+            themes.push(value.default);
+        }
+    }
+    // --- We have an entry point defined in the configuration file or in the main app file.
+    const safeEntryPoint = (config === null || config === void 0 ? void 0 : config.entryPoint) || entryPoint;
+    // --- We may have a code-behind file. If so, we merge the variables and functions
+    const entryPointWithCodeBehind = Object.assign(Object.assign({}, safeEntryPoint), { vars: Object.assign(Object.assign({}, entryPointCodeBehind === null || entryPointCodeBehind === void 0 ? void 0 : entryPointCodeBehind.vars), safeEntryPoint === null || safeEntryPoint === void 0 ? void 0 : safeEntryPoint.vars), functions: entryPointCodeBehind === null || entryPointCodeBehind === void 0 ? void 0 : entryPointCodeBehind.functions, scriptError: entryPointCodeBehind === null || entryPointCodeBehind === void 0 ? void 0 : entryPointCodeBehind.moduleErrors });
+    // --- Collect the component definition we pass to the rendering engine
+    let components = [];
+    if (config === null || config === void 0 ? void 0 : config.components) {
+        // --- We have a list of components defined in the configuration file
+        components = config.components;
+    }
+    else {
+        // --- Use the components collected from the runtime files; merge the components
+        // --- with their code behinds
+        Object.entries(componentsByFileName).forEach(([key, compound]) => {
+            const componentCodeBehind = codeBehindsByFileName[`${key}.xs`];
+            const componentWithCodeBehind = Object.assign(Object.assign({}, compound), { component: Object.assign(Object.assign({}, compound.component), { vars: Object.assign(Object.assign({}, compound.component.vars), componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.vars), functions: componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.functions, scriptError: componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.moduleErrors }) });
+            components.push(componentWithCodeBehind);
+        });
+    }
+    // --- Done.
+    return Object.assign(Object.assign({}, config), { entryPoint: entryPointWithCodeBehind, components, themes: (config === null || config === void 0 ? void 0 : config.themes) || themes, apiInterceptor: (config === null || config === void 0 ? void 0 : config.apiInterceptor) || apiInterceptor, sources });
+}
+/**
+ * Merges app definitions
+ * @param resolvedRuntime Standalone app definition coming from the resolved runtime
+ * @param standaloneAppDef Standalode app definition coming from the source
+ * @returns Merged standalone app definition
+ */
+function mergeAppDefWithRuntime(resolvedRuntime, standaloneAppDef) {
+    if (!standaloneAppDef) {
+        return resolvedRuntime;
+    }
+    return Object.assign(Object.assign({}, standaloneAppDef), { entryPoint: standaloneAppDef.entryPoint || resolvedRuntime.entryPoint, components: standaloneAppDef.components || resolvedRuntime.components, themes: standaloneAppDef.themes || resolvedRuntime.themes, apiInterceptor: standaloneAppDef.apiInterceptor || resolvedRuntime.apiInterceptor });
+}
+/**
+ * Fetch the up-to-date state of the source file
+ * @param url The URL to fetch the source file from
+ * @returns The source file contents response
+ */
+function fetchWithoutCache(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return fetch((0, misc_1.normalizePath)(url), {
+            headers: {
+                "Cache-Control": "no-cache, no-store",
+            },
+        });
+    });
+}
+/**
+ * Using its definition, this React hook prepares the runtime environment of a
+ * standalone app. It runs every time an app source file changes.
+ * @param standaloneAppDef The standalone app description
+ * @param runtime The pre-compiled runtime environment
+ * @returns The prepared StandaloneAppDescription if the collection is
+ * successful; otherwise, null.
+ */
+function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, componentManager) {
+    const [standaloneApp, setStandaloneApp] = (0, react_1.useState)(() => {
+        // --- Initialize the standalone app
+        const resolvedRuntime = resolveRuntime(runtime);
+        const appDef = mergeAppDefWithRuntime(resolvedRuntime, standaloneAppDef);
+        // --- In dev mode or when the app is inlined (provided we do not use the standalone mode),
+        // --- we must have the app definition available.
+        if ((process.env.VITE_DEV_MODE || process.env.VITE_BUILD_MODE === "INLINE_ALL") &&
+            !process.env.VITE_STANDALONE) {
+            if (!appDef) {
+                throw new Error("couldn't find the application metadata");
+            }
+            return appDef;
+        }
+        // --- No standalone app yet, we need to get that from the fetched source code
+        return null;
+    });
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        (function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d;
+                const resolvedRuntime = resolveRuntime(runtime);
+                const appDef = mergeAppDefWithRuntime(resolvedRuntime, standaloneAppDef);
+                // --- In dev mode or when the app is inlined (provided we do not use the standalone mode),
+                // --- we must have the app definition available.
+                if ((process.env.VITE_DEV_MODE || process.env.VITE_BUILD_MODE === "INLINE_ALL") &&
+                    !process.env.VITE_STANDALONE) {
+                    if (!appDef) {
+                        throw new Error("couldn't find the application metadata");
+                    }
+                    setStandaloneApp(appDef);
+                    return;
+                }
+                // --- In standalone mode, we must fetch the XMLUI app's source files,
+                // --- compile them, and prepare the app's definition for the rendering
+                // --- engine.
+                if (process.env.VITE_BUILD_MODE === "CONFIG_ONLY") {
+                    // --- In config-only mode, we override the pre-compiled app definition
+                    // --- with elements from the configuration file. Note that we do not
+                    // --- check whether the config file's content is semantically valid.
+                    const configResponse = yield fetchWithoutCache(CONFIG_FILE);
+                    const config = yield configResponse.json();
+                    const themePromises = [];
+                    (_a = config.themes) === null || _a === void 0 ? void 0 : _a.forEach((theme) => {
+                        themePromises.push(fetchWithoutCache(theme).then((value) => value.json()));
+                    });
+                    const themes = yield Promise.all(themePromises);
+                    setStandaloneApp(Object.assign(Object.assign({}, appDef), { name: config.name, appGlobals: config.appGlobals, defaultTheme: config.defaultTheme, resources: config.resources, resourceMap: config.resourceMap, themes }));
+                    return;
+                }
+                // --- Fetch the main file
+                const entryPointPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const resp = yield fetchWithoutCache(MAIN_FILE);
+                        if (resp.ok) {
+                            resolve(parseComponentMarkupResponse(resp));
+                        }
+                        else {
+                            resolve({
+                                component: (0, xmlui_parser_1.errReportMessage)(`Failed to load the main component (${MAIN_FILE})`),
+                                file: MAIN_FILE,
+                                hasError: true,
+                            });
+                        }
+                    }
+                    catch (e) {
+                        resolve(null);
+                    }
+                }));
+                // --- Fetch the main code-behind file (if any)
+                const entryPointCodeBehindPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const resp = yield fetchWithoutCache(MAIN_CODE_BEHIND_FILE);
+                        const codeBehind = yield parseCodeBehindResponse(resp);
+                        resolve(codeBehind.hasError ? codeBehind : codeBehind.codeBehind);
+                    }
+                    catch (e) {
+                        resolve(null);
+                    }
+                }));
+                // --- Fetch the configuration file (we do not check whether the content is semantically valid)
+                let config = undefined;
+                try {
+                    const configResponse = yield fetchWithoutCache(CONFIG_FILE);
+                    config = yield configResponse.json();
+                }
+                catch (e) { }
+                // --- Fetch the themes according to the configuration
+                const themePromises = (_b = config === null || config === void 0 ? void 0 : config.themes) === null || _b === void 0 ? void 0 : _b.map((themePath) => {
+                    return fetchWithoutCache(themePath).then((value) => value.json());
+                });
+                // --- Fetch component files according to the configuration
+                const componentPromises = (_c = config === null || config === void 0 ? void 0 : config.components) === null || _c === void 0 ? void 0 : _c.map((componentPath) => __awaiter(this, void 0, void 0, function* () {
+                    const value = yield fetchWithoutCache(componentPath);
+                    if (componentPath.endsWith(`.${fileExtensions_1.componentFileExtension}`)) {
+                        return yield parseComponentMarkupResponse(value);
+                    }
+                    else {
+                        return yield parseCodeBehindResponse(value);
+                    }
+                }));
+                // --- Let the promises resolve
+                const [loadedEntryPoint, loadedEntryPointCodeBehind, loadedComponents, themes] = yield Promise.all([
+                    entryPointPromise,
+                    entryPointCodeBehindPromise,
+                    Promise.all(componentPromises || []),
+                    Promise.all(themePromises || []),
+                ]);
+                // --- Collect the elements of the standalone app (and potential errors)
+                const errorComponents = [];
+                // --- Check if the main component has errors
+                if (loadedEntryPoint.hasError) {
+                    errorComponents.push(loadedEntryPoint.component);
+                }
+                if (loadedEntryPointCodeBehind === null || loadedEntryPointCodeBehind === void 0 ? void 0 : loadedEntryPointCodeBehind.hasError) {
+                    errorComponents.push(loadedEntryPointCodeBehind.component);
+                }
+                // --- Check if any of the components have markup errors
+                loadedComponents.forEach((compWrapper) => {
+                    if (compWrapper.hasError) {
+                        errorComponents.push(compWrapper.component);
+                    }
+                });
+                // --- Collect the sources and code-behinds
+                const sources = {};
+                const codeBehinds = {};
+                // --- The main component source
+                if (loadedEntryPoint.file) {
+                    sources[loadedEntryPoint.file] = loadedEntryPoint.src;
+                }
+                // --- Components may have code-behind files
+                loadedComponents.forEach((compWrapper) => {
+                    var _a;
+                    if ((_a = compWrapper === null || compWrapper === void 0 ? void 0 : compWrapper.file) === null || _a === void 0 ? void 0 : _a.endsWith(`.${fileExtensions_1.codeBehindFileExtension}`)) {
+                        codeBehinds[compWrapper.file] = compWrapper.codeBehind;
+                    }
+                    else {
+                        if (compWrapper.file) {
+                            sources[compWrapper.file] = compWrapper.src;
+                        }
+                    }
+                });
+                // --- Assemble the runtime for the main app file
+                const entryPointWithCodeBehind = Object.assign(Object.assign({}, loadedEntryPoint.component), { vars: Object.assign(Object.assign({}, loadedEntryPointCodeBehind === null || loadedEntryPointCodeBehind === void 0 ? void 0 : loadedEntryPointCodeBehind.vars), loadedEntryPoint.component.vars), functions: loadedEntryPointCodeBehind === null || loadedEntryPointCodeBehind === void 0 ? void 0 : loadedEntryPointCodeBehind.functions, scriptError: loadedEntryPointCodeBehind === null || loadedEntryPointCodeBehind === void 0 ? void 0 : loadedEntryPointCodeBehind.moduleErrors });
+                const defaultTheme = (_d = entryPointWithCodeBehind.props) === null || _d === void 0 ? void 0 : _d.defaultTheme;
+                // --- We test whether the default theme is not from a binding
+                // --- expression and is not a built-in theme already loaded. If so,
+                // --- we load it from the `themes` folder.
+                if (defaultTheme && typeof defaultTheme === "string" && !defaultTheme.includes("{")) {
+                    if (!ThemeProvider_1.builtInThemes.find((theme) => theme.id === defaultTheme) &&
+                        !themes.find((theme) => theme.id === defaultTheme)) {
+                        themes.push(yield fetchWithoutCache(`themes/${defaultTheme}.json`).then((value) => value.json()));
+                    }
+                }
+                // --- Assemble the runtime for the components
+                const componentsWithCodeBehinds = loadedComponents
+                    .filter((compWrapper) => { var _a; return !((_a = compWrapper === null || compWrapper === void 0 ? void 0 : compWrapper.file) === null || _a === void 0 ? void 0 : _a.endsWith(".xmlui.xs")); })
+                    .map((compWrapper) => {
+                    const componentCodeBehind = codeBehinds[compWrapper.file + ".xs"];
+                    return Object.assign(Object.assign({}, compWrapper.component), { component: Object.assign(Object.assign({}, compWrapper.component.component), { vars: Object.assign(Object.assign({}, compWrapper.component.component.vars), componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.vars), functions: componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.functions, scriptError: componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.moduleErrors }) });
+                });
+                // --- We may have components that are not in the configuration file.
+                // --- We need to load them and their code-behinds. First, we collect
+                // --- the components to load.
+                let componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, undefined, componentManager);
+                // --- Try to load the components referenced in the markup, collect
+                // --- those that failed
+                const componentsFailedToLoad = new Set();
+                while (componentsToLoad.size > 0) {
+                    const componentPromises = [...componentsToLoad].map((componentPath) => __awaiter(this, void 0, void 0, function* () {
+                        try {
+                            // --- Promises for the component markup files
+                            const componentPromise = fetchWithoutCache(`components/${componentPath}.${fileExtensions_1.componentFileExtension}`);
+                            // --- Promises for the component code-behind files
+                            const componentCodeBehindPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                                try {
+                                    const codeBehindWrapper = yield parseCodeBehindResponse(yield fetchWithoutCache(`components/${componentPath}.${fileExtensions_1.codeBehindFileExtension}`));
+                                    if (codeBehindWrapper.hasError) {
+                                        errorComponents.push(codeBehindWrapper.component);
+                                    }
+                                    resolve(codeBehindWrapper.hasError
+                                        ? codeBehindWrapper.component
+                                        : codeBehindWrapper.codeBehind);
+                                }
+                                catch (_a) {
+                                    resolve(null);
+                                }
+                            }));
+                            // --- Let the promises resolve
+                            const [componentMarkup, componentCodeBehind] = yield Promise.all([
+                                componentPromise,
+                                componentCodeBehindPromise,
+                            ]);
+                            // --- Parse the component markup and check for errors
+                            const compWrapper = yield parseComponentMarkupResponse(componentMarkup);
+                            if (compWrapper.hasError) {
+                                errorComponents.push(compWrapper.component);
+                            }
+                            sources[compWrapper.file] = compWrapper.src;
+                            return Object.assign(Object.assign({}, compWrapper.component), { component: Object.assign(Object.assign({}, compWrapper.component.component), { vars: Object.assign(Object.assign({}, compWrapper.component.component.vars), componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.vars), functions: componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.functions, scriptError: componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.moduleErrors }) });
+                        }
+                        catch (e) {
+                            componentsFailedToLoad.add(componentPath);
+                            return null;
+                        }
+                    }));
+                    const componentWrappers = yield Promise.all(componentPromises);
+                    componentsWithCodeBehinds.push(...componentWrappers.filter((comp) => !!comp));
+                    componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, componentsFailedToLoad, componentManager);
+                }
+                // --- Let's check for errors to display
+                const errorComponent = errorComponents.length > 0
+                    ? {
+                        type: "VStack",
+                        props: { gap: 0, padding: 0 },
+                        children: errorComponents,
+                    }
+                    : null;
+                setStandaloneApp(Object.assign(Object.assign({}, config), { themes,
+                    sources, components: componentsWithCodeBehinds, entryPoint: errorComponent || entryPointWithCodeBehind }));
+            });
+        })();
+    }, [runtime, standaloneAppDef]);
+    return standaloneApp;
+}
+/**
+ * Collect the missing components referenced by any part of the app
+ * @param entryPoint The app's main markup
+ * @param components The component markups
+ * @param componentsFailedToLoad The components that failed to load here
+ * @returns The components that are still missing
+ */
+function collectMissingComponents(entryPoint, components, componentsFailedToLoad = new Set(), componentManager) {
+    // --- Add the discovered compound components to the registry
+    const componentRegistry = new ComponentProvider_1.ComponentRegistry({ compoundComponents: components }, componentManager);
+    // --- Check the xmlui markup. This check will find all unloaded components
+    const result = (0, markup_check_1.checkXmlUiMarkup)(entryPoint, components, {
+        getComponentProps: (componentName) => {
+            var _a, _b;
+            return (_b = (_a = componentRegistry.lookupComponentRenderer(componentName)) === null || _a === void 0 ? void 0 : _a.descriptor) === null || _b === void 0 ? void 0 : _b.props;
+        },
+        acceptArbitraryProps: () => {
+            return true;
+        },
+        getComponentValidator: () => {
+            return null;
+        },
+        getComponentEvents: () => {
+            return null;
+        },
+        componentRegistered: (componentName) => {
+            return componentRegistry.hasComponent(componentName);
+        },
+    });
+    componentRegistry.destroy();
+    // --- Collect all missing components.Omit the components that failed to load
+    return new Set(result
+        .filter((r) => r.code === "M001")
+        .map((r) => r.args[0])
+        .filter((comp) => !componentsFailedToLoad.has(comp)));
+}
+// --- This React hook logs the app's version number to the browser's console at startup
+function usePrintVersionNumber(standaloneApp) {
+    const logged = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (logged.current) {
+            return;
+        }
+        logged.current = true;
+        let log = `XMLUI version: ${process.env.VITE_XMLUI_VERSION || "dev"}`;
+        if (standaloneApp === null || standaloneApp === void 0 ? void 0 : standaloneApp.name) {
+            log += `; ${standaloneApp.name} version: ${process.env.VITE_APP_VERSION || "dev"}`;
+        }
+        console.log(log);
+    }, [standaloneApp === null || standaloneApp === void 0 ? void 0 : standaloneApp.name]);
+}
+let contentRoot = null;
+/**
+ * This function injects the StandaloneApp component into a React app. It looks
+ * up a component with the "root" id as the host of the standalone app. If such
+ * an element does not exist, it creates a `<div id="root">` element.
+ * @param runtime The app's runtime representation
+ * @param components The related component's runtime representation
+ * @returns The content's root element
+ */
+function startApp(runtime, components, componentManager) {
+    let rootElement = document.getElementById("root");
+    if (!rootElement) {
+        rootElement = document.createElement("div");
+        rootElement.setAttribute("id", "root");
+        document.body.appendChild(rootElement);
+    }
+    if (!contentRoot) {
+        contentRoot = client_1.default.createRoot(rootElement);
+    }
+    contentRoot.render((0, jsx_runtime_1.jsx)(StandaloneApp, { runtime: runtime, components: components, componentManager: componentManager }));
+    return contentRoot;
+}
+exports.default = StandaloneApp;

package/dist/scripts/src/components-core/StandaloneComponentManager.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * This class allows external component libraries to add their components to
+ * the xmlui component registry. The framework resolves the components used
+ * in an application markup with this registry.
+ */
+class StandaloneComponentManager {
+    constructor() {
+        this.subscriptions = new Set();
+        this.registeredComponents = [];
+    }
+    /**
+     * You can add a callback function invoked whenever a new component is added
+     * to the registry. When you register a new callback function, the component
+     * manager automatically invokes it for all components already in the
+     * registry.
+     * @param cb Function to call when a new component is registered
+     */
+    subscribeToRegistrations(cb) {
+        this.subscriptions.add(cb);
+        this.registeredComponents.forEach((component) => {
+            cb(component);
+        });
+    }
+    /**
+     * You can remove a function added by `subscribeToRegistrations`. After
+     * calling this method, the particular callback function won't be invoked
+     * for a new component registration.
+     * @param cb Function to call when a new component is registered
+     */
+    unSubscribeFromRegistrations(cb) {
+        this.subscriptions.delete(cb);
+    }
+    /**
+     * Use this function to add a new component to the registry. Adding a new
+     * component will invoke all callbacks that have already subscribed to the
+     * component registration.
+     * @param component The component to register. You can pass a single
+     * component or an array of components.
+     */
+    registerComponent(component) {
+        (Array.isArray(component) ? component : [component]).forEach((component) => {
+            this.registeredComponents.push(component);
+            this.subscriptions.forEach((cb) => {
+                cb(component);
+            });
+        });
+    }
+}
+exports.default = StandaloneComponentManager;