xmlui 0.10.8 → 0.10.11

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

@@ -0,0 +1,823 @@
+"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"));
+const js_yaml_1 = __importDefault(require("js-yaml"));
+require("../index.scss");
+const AppRoot_1 = require("./rendering/AppRoot");
+const misc_1 = require("./utils/misc");
+const ApiInterceptorProvider_1 = require("./interception/ApiInterceptorProvider");
+const constants_1 = require("./constants");
+const xmlui_parser_1 = require("./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("./markup-check");
+const StandaloneExtensionManager_1 = __importDefault(require("./StandaloneExtensionManager"));
+const ThemeProvider_1 = require("./theming/ThemeProvider");
+const lint_1 = require("../parsers/xmlui-parser/lint");
+const collectedComponentMetadata_1 = require("../components/collectedComponentMetadata");
+const metadata_utils_1 = require("../language-server/services/common/metadata-utils");
+const MAIN_FILE = "Main." + fileExtensions_1.componentFileExtension;
+const MAIN_CODE_BEHIND_FILE = "Main." + fileExtensions_1.codeBehindFileExtension;
+const CONFIG_FILE = "config.json";
+const metadataProvider = new metadata_utils_1.MetadataProvider(collectedComponentMetadata_1.collectedComponentMetadata);
+/**
+ * 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, appGlobals: globals, decorateComponentsWithTestId, debugEnabled = false, runtime, extensionManager, waitForApiInterceptor = false, children }) {
+    var _a;
+    // --- Fetch all files constituting the standalone app, including components,
+    // --- themes, and other artifacts. Display the app version numbers in the
+    // --- console.
+    const { standaloneApp, projectCompilation } = useStandalone(appDef, runtime, extensionManager);
+    usePrintVersionNumber(standaloneApp);
+    const { apiInterceptor, name, appGlobals, defaultTheme, defaultTone, resources, resourceMap, entryPoint, components, themes, sources, } = standaloneApp || {};
+    const globalProps = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({ name: name }, (appGlobals || {})), (globals || {}));
+    }, [appGlobals, globals, name]);
+    let contributes = (0, react_1.useMemo)(() => {
+        return {
+            compoundComponents: components,
+            themes,
+        };
+    }, [components, themes]);
+    if (!standaloneApp) {
+        // --- Problems found, the standalone app cannot run
+        return null;
+    }
+    // --- 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, waitForApiInterceptor: waitForApiInterceptor, children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { projectCompilation: projectCompilation, decorateComponentsWithTestId: shouldDecorateWithTestId, node: entryPoint, standalone: true, debugEnabled: debugEnabled, 
+            // @ts-ignore
+            routerBaseName: typeof window !== "undefined" ? window.__PUBLIC_PATH || "" : "", globalProps: globalProps, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, resourceMap: resourceMap, sources: sources, extensionManager: extensionManager, contributes: contributes, children: children }) }));
+}
+/**
+ * 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) {
+            console.error("Error parsing code behind", e);
+            // throw new Error(`Failed to fetch ${response.url}`);
+            if (parser.errors.length > 0) {
+                return {
+                    component: (0, xmlui_parser_1.errReportScriptError)(parser.errors[0], response.url),
+                    file: response.url,
+                    hasError: true,
+                };
+            }
+        }
+        try {
+            const codeBehind = (0, code_behind_collect_1.collectCodeBehindFromSource)("Main", code);
+            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 {
+                src: code,
+                codeBehind: codeBehind,
+                file: response.url,
+            };
+        }
+        catch (e) {
+            console.error("Error collecting code behind", e);
+        }
+    });
+}
+// --- 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 projectCompilation = {
+        entrypoint: {
+            filename: "",
+            definition: null,
+            dependencies: new Set(),
+        },
+        components: [],
+        themes: {},
+    };
+    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;
+                projectCompilation.entrypoint.codeBehindSource = value.default.src;
+            }
+            else {
+                projectCompilation.entrypoint.filename = key;
+                // --- "default" contains the component definition, the file index,
+                // --- and the source code.
+                entryPoint = value.default.component;
+                projectCompilation.entrypoint.definition = entryPoint;
+                projectCompilation.entrypoint.markupSource = value.default.src;
+                if (value.default.file) {
+                    // TODO: Remove this prop
+                    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;
+                const componentCompilationForCodeBehind = projectCompilation.components.findLast(({ filename }) => {
+                    const idxOfCodeBehindFileExtension = key.lastIndexOf(fileExtensions_1.codeBehindFileExtension);
+                    const idxOfComponentFileExtension = filename.lastIndexOf(fileExtensions_1.componentFileExtension);
+                    const extensionlessFilenamesMatch = filename.substring(0, idxOfComponentFileExtension) ===
+                        key.substring(0, idxOfCodeBehindFileExtension);
+                    return extensionlessFilenamesMatch;
+                });
+                componentCompilationForCodeBehind.codeBehindSource = value.default.src;
+            }
+            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;
+                const componentCompilation = {
+                    definition: value.default.component,
+                    filename: key,
+                    markupSource: value.default.src,
+                    dependencies: new Set(),
+                };
+                projectCompilation.components.push(componentCompilation);
+            }
+        }
+        // --- 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 {
+        standaloneApp: 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 }),
+        projectCompilation,
+    };
+}
+/**
+ * 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 });
+}
+function resolvePath(basePath, relativePath) {
+    // Create a base URL. The 'http://dummy.com' is just a placeholder.
+    const baseUrl = new URL(basePath, "http://dummy.com");
+    // Create a new URL by resolving the relative path against the base URL.
+    const resolvedUrl = new URL(relativePath, baseUrl);
+    // Return the pathname, removing the leading slash.
+    return resolvedUrl.pathname.substring(1);
+}
+/**
+ * Helper function to load theme files with support for both JSON and YAML formats.
+ * First tries to load as JSON, if that fails, attempts to load as YAML.
+ * @param url The URL to fetch the theme from
+ * @returns A Promise resolving to the parsed theme definition
+ */
+function loadThemeFile(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // First try to load as JSON
+        try {
+            const response = yield fetchWithoutCache(url);
+            if (!response.ok) {
+                // If the JSON file doesn't exist, try YAML immediately
+                throw new Error(`Failed to fetch ${url}`);
+            }
+            // Get the content as text first
+            const text = yield response.text();
+            // Try to parse as JSON
+            try {
+                return JSON.parse(text);
+            }
+            catch (jsonParseError) {
+                // If JSON parsing fails, it might be a YAML file with a .json extension
+                // or we need to try the .yml version
+                console.warn(`Failed to parse ${url} as JSON, attempting YAML parsing.`);
+                try {
+                    return js_yaml_1.default.load(text);
+                }
+                catch (yamlParseError) {
+                    // If both JSON and YAML parsing fail for this file, try the .yml version
+                    throw jsonParseError;
+                }
+            }
+        }
+        catch (jsonError) {
+            // If JSON file loading fails, try YAML
+            const yamlUrl = url.replace(/\.json$/, ".yml");
+            try {
+                const response = yield fetchWithoutCache(yamlUrl);
+                if (!response.ok)
+                    throw new Error(`Failed to fetch ${yamlUrl}`);
+                const text = yield response.text();
+                return js_yaml_1.default.load(text);
+            }
+            catch (yamlError) {
+                console.error(`Failed to load theme file: ${url} (JSON error:`, jsonError, "YAML error:", yamlError, ")");
+                throw new Error(`Failed to load theme file ${url} in either JSON or YAML format`);
+            }
+        }
+    });
+}
+/**
+ * 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, extensionManager) {
+    const [standaloneApp, setStandaloneApp] = (0, react_1.useState)(() => {
+        // --- Initialize the standalone app
+        const resolvedRuntime = resolveRuntime(runtime);
+        const appDef = mergeAppDefWithRuntime(resolvedRuntime.standaloneApp, 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;
+    });
+    const [projectCompilation, setProjectCompilation] = (0, react_1.useState)(null);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        (function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d, _e, _f;
+                const resolvedRuntime = resolveRuntime(runtime);
+                const appDef = mergeAppDefWithRuntime(resolvedRuntime.standaloneApp, 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");
+                    }
+                    const lintErrorComponent = processAppLinting(appDef, metadataProvider);
+                    if (lintErrorComponent) {
+                        appDef.entryPoint = lintErrorComponent;
+                    }
+                    discoverCompilationDependencies({
+                        projectCompilation: resolvedRuntime.projectCompilation,
+                        extensionManager,
+                    });
+                    setProjectCompilation(resolvedRuntime.projectCompilation);
+                    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(loadThemeFile(theme));
+                    });
+                    const themes = yield Promise.all(themePromises);
+                    const newAppDef = Object.assign(Object.assign({}, appDef), { name: config.name, appGlobals: config.appGlobals, defaultTheme: config.defaultTheme, resources: config.resources, resourceMap: config.resourceMap, themes });
+                    const lintErrorComponent = processAppLinting(newAppDef, metadataProvider);
+                    if (lintErrorComponent) {
+                        newAppDef.entryPoint = lintErrorComponent;
+                    }
+                    discoverCompilationDependencies({
+                        projectCompilation: resolvedRuntime.projectCompilation,
+                        extensionManager,
+                    });
+                    setProjectCompilation(resolvedRuntime.projectCompilation);
+                    setStandaloneApp(newAppDef);
+                    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 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
+                let themePromises;
+                if (((_b = config === null || config === void 0 ? void 0 : config.themes) !== null && _b !== void 0 ? _b : []).length === 0 && (config === null || config === void 0 ? void 0 : config.defaultTheme)) {
+                    // --- Special case, we have only a single "defaultTheme" in the configuration
+                    const fetchDefaultTheme = loadThemeFile(`themes/${config === null || config === void 0 ? void 0 : config.defaultTheme}.json`);
+                    themePromises = [fetchDefaultTheme];
+                }
+                else {
+                    // --- In any other case, we fetch all themes defined in the configuration
+                    themePromises = (_c = config === null || config === void 0 ? void 0 : config.themes) === null || _c === void 0 ? void 0 : _c.map((themePath) => {
+                        return loadThemeFile(themePath);
+                    });
+                }
+                // --- Fetch component files according to the configuration
+                const componentPromises = (_d = config === null || config === void 0 ? void 0 : config.components) === null || _d === void 0 ? void 0 : _d.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, loadedComponents, themes] = yield Promise.all([
+                    entryPointPromise,
+                    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);
+                }
+                let loadedEntryPointCodeBehind = null;
+                if (((_e = loadedEntryPoint.component.props) === null || _e === void 0 ? void 0 : _e.codeBehind) !== undefined) {
+                    // --- We have a code-behind file for the main component
+                    loadedEntryPointCodeBehind = (yield new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                        var _a;
+                        try {
+                            const resp = yield fetchWithoutCache(resolvePath(MAIN_FILE, ((_a = loadedEntryPoint.component.props) === null || _a === void 0 ? void 0 : _a.codeBehind) || MAIN_CODE_BEHIND_FILE));
+                            const codeBehind = yield parseCodeBehindResponse(resp);
+                            resolve(codeBehind.hasError ? codeBehind : codeBehind.codeBehind);
+                        }
+                        catch (e) {
+                            resolve(null);
+                        }
+                    })));
+                    if (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;
+                    resolvedRuntime.projectCompilation.entrypoint.filename = MAIN_FILE;
+                    resolvedRuntime.projectCompilation.entrypoint.definition = loadedEntryPoint.component;
+                    resolvedRuntime.projectCompilation.entrypoint.markupSource = loadedEntryPoint.src;
+                    if ((loadedEntryPointCodeBehind === null || loadedEntryPointCodeBehind === void 0 ? void 0 : loadedEntryPointCodeBehind.src) !== undefined) {
+                        resolvedRuntime.projectCompilation.entrypoint.codeBehindSource =
+                            loadedEntryPointCodeBehind.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;
+                            // resolvedRuntime.projectCompilation.entrypoint.filename = MAIN_FILE;
+                            // resolvedRuntime.projectCompilation.entrypoint.definition = loadedEntryPoint.component;
+                            // resolvedRuntime.projectCompilation.entrypoint.markupSource = loadedEntryPoint.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 = (_f = entryPointWithCodeBehind.props) === null || _f === void 0 ? void 0 : _f.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 loadThemeFile(`themes/${defaultTheme}.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, extensionManager);
+                // --- 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* () {
+                        var _a, _b;
+                        try {
+                            // --- Promises for the component markup files
+                            const componentPromise = fetchWithoutCache(`components/${componentPath}.${fileExtensions_1.componentFileExtension}`);
+                            // --- Let the promises resolve
+                            const componentMarkup = yield componentPromise;
+                            // --- 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;
+                            const compCompilation = {
+                                dependencies: new Set(),
+                                filename: compWrapper.file,
+                                markupSource: compWrapper.src,
+                                definition: compWrapper.component,
+                            };
+                            let componentCodeBehind = null;
+                            if ("codeBehind" in compWrapper.component &&
+                                ((_a = compWrapper.component) === null || _a === void 0 ? void 0 : _a.codeBehind) !== undefined) {
+                                // --- Promises for the component code-behind files
+                                componentCodeBehind = (yield new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                                    var _a;
+                                    try {
+                                        const codeBehind = yield fetchWithoutCache(resolvePath(`components/${componentPath}`, ((_a = compWrapper.component) === null || _a === void 0 ? void 0 : _a.codeBehind) ||
+                                            `${componentPath}.${fileExtensions_1.codeBehindFileExtension}`));
+                                        const codeBehindWrapper = yield parseCodeBehindResponse(codeBehind);
+                                        if (codeBehindWrapper.hasError) {
+                                            errorComponents.push(codeBehindWrapper.component);
+                                        }
+                                        resolve(codeBehindWrapper.hasError
+                                            ? codeBehindWrapper.component
+                                            : codeBehindWrapper);
+                                    }
+                                    catch (_b) {
+                                        resolve(null);
+                                    }
+                                })));
+                                if (componentCodeBehind && "src" in componentCodeBehind) {
+                                    compCompilation.codeBehindSource = componentCodeBehind.src;
+                                }
+                            }
+                            resolvedRuntime.projectCompilation.components.push(compCompilation);
+                            const compoundComp = Object.assign(Object.assign({}, compWrapper.component), { component: Object.assign(Object.assign({}, compWrapper.component.component), { vars: Object.assign(Object.assign({}, compWrapper.component.component.vars), (_b = componentCodeBehind === null || componentCodeBehind === void 0 ? void 0 : componentCodeBehind.component) === null || _b === void 0 ? void 0 : _b.vars) }) });
+                            if (componentCodeBehind && "codeBehind" in componentCodeBehind) {
+                                compoundComp.component.functions = componentCodeBehind.codeBehind.functions;
+                                compoundComp.component.scriptError = componentCodeBehind.codeBehind.moduleErrors;
+                            }
+                            return compoundComp;
+                        }
+                        catch (e) {
+                            componentsFailedToLoad.add(componentPath);
+                            return null;
+                        }
+                    }));
+                    const componentWrappers = yield Promise.all(componentPromises);
+                    componentsWithCodeBehinds.push(...componentWrappers.filter((comp) => !!comp));
+                    componentsToLoad = collectMissingComponents(entryPointWithCodeBehind, componentsWithCodeBehinds, componentsFailedToLoad, extensionManager);
+                }
+                // --- Let's check for errors to display
+                const newAppDef = Object.assign(Object.assign({}, config), { themes,
+                    sources, components: componentsWithCodeBehinds, entryPoint: entryPointWithCodeBehind });
+                const lintErrorComponent = processAppLinting(newAppDef, metadataProvider);
+                const errorComponent = errorComponents.length > 0
+                    ? {
+                        type: "VStack",
+                        props: { gap: 0, padding: 0 },
+                        children: errorComponents,
+                    }
+                    : null;
+                if (errorComponent) {
+                    if (lintErrorComponent) {
+                        errorComponent.children.push(lintErrorComponent);
+                    }
+                    newAppDef.entryPoint = errorComponent;
+                }
+                else if (lintErrorComponent) {
+                    newAppDef.entryPoint = lintErrorComponent;
+                }
+                discoverCompilationDependencies({
+                    projectCompilation: resolvedRuntime.projectCompilation,
+                    extensionManager,
+                });
+                setProjectCompilation(resolvedRuntime.projectCompilation);
+                setStandaloneApp(newAppDef);
+            });
+        })();
+    }, [runtime, standaloneAppDef]);
+    return { standaloneApp, projectCompilation };
+}
+/**
+ * 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(), extensionManager) {
+    // --- Add the discovered compound components to the registry
+    const componentRegistry = new ComponentProvider_1.ComponentRegistry({ compoundComponents: components }, extensionManager);
+    // --- 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 and the ones that are not in #app-ns namespace
+    return new Set(result
+        .filter((r) => r.code === "M001")
+        .map((r) => r.args[0].replace("#app-ns.", ""))
+        .filter((comp) => !componentsFailedToLoad.has(comp) && !comp.includes(".")));
+}
+// --- 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, extensions = [], extensionManager = new StandaloneExtensionManager_1.default()) {
+    extensionManager.registerExtension(extensions);
+    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, extensionManager: extensionManager }));
+    return contentRoot;
+}
+exports.default = StandaloneApp;
+function processAppLinting(appDef, metadataProvider) {
+    var _a;
+    const lintSeverity = (0, lint_1.getLintSeverity)((_a = appDef.appGlobals) === null || _a === void 0 ? void 0 : _a.lintSeverity);
+    if (lintSeverity !== lint_1.LintSeverity.Skip) {
+        const allComponentLints = (0, lint_1.lintApp)({
+            appDef,
+            metadataProvider,
+        });
+        if (allComponentLints.length > 0) {
+            if (lintSeverity === lint_1.LintSeverity.Warning) {
+                allComponentLints.forEach(lint_1.printComponentLints);
+            }
+            else if (lintSeverity === lint_1.LintSeverity.Error) {
+                return (0, lint_1.lintErrorsComponent)(allComponentLints);
+            }
+        }
+        return null;
+    }
+}
+function discoverCompilationDependencies({ projectCompilation: { components, entrypoint }, extensionManager, }) {
+    const registry = new ComponentProvider_1.ComponentRegistry({}, extensionManager);
+    const entrypointDependencies = discoverDirectComponentDependencies(entrypoint.definition, registry);
+    entrypoint.dependencies = entrypointDependencies;
+    for (const componentCompilation of components) {
+        const compDependencies = discoverDirectComponentDependencies(componentCompilation.definition.component, registry);
+        compDependencies.delete(componentCompilation.definition.name);
+        componentCompilation.dependencies = compDependencies;
+    }
+    registry.destroy();
+}
+function discoverDirectComponentDependencies(entrypoint, registry) {
+    return discoverDirectComponentDependenciesHelp(entrypoint, registry, new Set());
+}
+function discoverDirectComponentDependenciesHelp(component, registry, deps) {
+    if (!component) {
+        return deps;
+    }
+    const compName = component.type;
+    if (!registry.hasComponent(compName)) {
+        deps.add(compName);
+    }
+    if (!component.children) {
+        return deps;
+    }
+    for (const child of component.children) {
+        discoverDirectComponentDependenciesHelp(child, registry, deps);
+    }
+    return deps;
+}