xmlui 0.11.4 → 0.11.6

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

@@ -1,821 +0,0 @@
-"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 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)(() => {
-        void (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.codeBehind) === 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;
-}