xmlui 0.7.20 → 0.7.21

package/dist/scripts/bin/build-lib.js

@@ -51,7 +51,7 @@ const buildLib = (_a) => __awaiter(void 0, [_a], void 0, function* ({ watchMode
                 output: {
                     footer: (chunk) => {
                         if (chunk.name === "index" && chunk.fileName === umdFileName) {
-                            return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerComponent(window['${env.npm_package_name}']);}`;
+                            return `if(typeof window.xmlui !== "undefined"){window.xmlui.standalone.registerExtension(window['${env.npm_package_name}']);}`;
                         }
                     },
                     globals: {

package/dist/scripts/bin/index.js

@@ -75,8 +75,8 @@ switch (script) {
         break;
     }
     case "start": {
-        const { port, withMock, withLegacyParser } = yargs_1.argv;
-        (0, start_1.start)({ port, withMock: getBoolArg(withMock), withLegacyParser: getBoolArg(withLegacyParser) });
+        const { port, withMock, withLegacyParser, proxy } = yargs_1.argv;
+        (0, start_1.start)({ port, withMock: getBoolArg(withMock), withLegacyParser: getBoolArg(withLegacyParser), proxy });
         break;
     }
     case "preview": {

package/dist/scripts/bin/start.js

@@ -12,19 +12,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.start = void 0;
 const vite_1 = require("vite");
 const viteConfig_1 = require("./viteConfig");
-const start = (_a) => __awaiter(void 0, [_a], void 0, function* ({ port, withMock = true, withLegacyParser = false }) {
+const start = (_a) => __awaiter(void 0, [_a], void 0, function* ({ port, withMock = true, withLegacyParser = false, proxy, }) {
     console.log("Starting with options:", {
         withMock,
-        withLegacyParser
+        withLegacyParser,
+        withProxy: proxy,
     });
+    let proxyDef;
+    if (proxy) {
+        const splitProxy = proxy.split("->");
+        if (splitProxy.length !== 2) {
+            console.error("Invalid proxy definition. Example: /api->http://localhost:3000");
+        }
+        else {
+            proxyDef = {
+                [splitProxy[0]]: {
+                    target: splitProxy[1],
+                    changeOrigin: true,
+                },
+            };
+        }
+    }
     try {
         const server = yield (0, vite_1.createServer)(Object.assign(Object.assign({}, (0, viteConfig_1.getViteConfig)({ withLegacyParser })), { server: {
                 port,
+                proxy: proxyDef,
             }, define: {
-                'process.env.VITE_BUILD_MODE': JSON.stringify("ALL"),
-                'process.env.VITE_DEV_MODE': true,
-                'process.env.VITE_STANDALONE': process.env.VITE_STANDALONE,
-                'process.env.VITE_MOCK_ENABLED': withMock,
+                "process.env.VITE_BUILD_MODE": JSON.stringify("ALL"),
+                "process.env.VITE_DEV_MODE": true,
+                "process.env.VITE_STANDALONE": process.env.VITE_STANDALONE,
+                "process.env.VITE_MOCK_ENABLED": withMock,
                 "process.env.VITE_INCLUDE_ALL_COMPONENTS": JSON.stringify("true"),
                 "process.env.VITE_LEGACY_PARSER": withLegacyParser,
             } }));

package/dist/scripts/bin/viteConfig.js

@@ -52,6 +52,7 @@ function getViteConfig({ flatDist = false, withRelativeRoot = false, flatDistUiP
                 "@core": path.resolve(__dirname, "../src/core"),
                 "@components-core": path.resolve(__dirname, "../src/components-core"),
                 "@components": path.resolve(__dirname, "../src/components"),
+                "@parsers": path.resolve(__dirname, "../src/parsers"),
             },
         },
         base: withRelativeRoot ? "" : undefined,

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.7.20",
+    "version": "0.7.21",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -91,6 +91,7 @@
         "react-textarea-autosize": "8.5.3",
         "react-virtualized-auto-sizer": "1.0.24",
         "react-window": "1.8.10",
+        "recharts": "^2.15.1",
         "sass": "1.55.0",
         "scroll-into-view-if-needed": "^3.1.0",
         "shiki": "^1.14.1",

package/dist/scripts/src/abstractions/ExtensionDefs.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/scripts/src/components/ComponentProvider.js

@@ -77,9 +77,6 @@ const MockLoaderRenderer_1 = require("@components-core/loader/MockLoaderRenderer
 const DataLoader_1 = require("@components-core/loader/DataLoader");
 const DatePicker_1 = require("@components/DatePicker/DatePicker");
 const Redirect_1 = require("@components/Redirect/Redirect");
-const PieChart_1 = require("@components/PieChart/PieChart");
-const BarChart_1 = require("@components/BarChart/BarChart");
-const Map_1 = require("@components/Map/Map");
 const Tabs_1 = require("@components/Tabs/Tabs");
 const Bookmark_1 = require("@components/Bookmark/Bookmark");
 const AppState_1 = require("@components/AppState/AppState");
@@ -108,6 +105,8 @@ const APICall_2 = require("@components/APICall/APICall");
 const Option_1 = require("@components/Option/Option");
 const AutoComplete_1 = require("@components/AutoComplete/AutoComplete");
 const Backdrop_1 = require("./Backdrop/Backdrop");
+const RawHtml_1 = require("./RawHtml/RawHtml");
+const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -133,12 +132,12 @@ class ComponentRegistry {
      * `contributes` argument with information about accompanying (app-specific)
      * components that come with a particular app using the registry.
      * @param contributes Information about the components that come with the app
-     * @param componentManager Optional manager object that receives a notification
+     * @param extensionManager Optional manager object that receives a notification
      * about component registrations
      */
-    constructor(contributes = {}, componentManager) {
-        var _a, _b, _c, _d;
-        this.componentManager = componentManager;
+    constructor(contributes = {}, extensionManager) {
+        var _a, _b, _c;
+        this.extensionManager = extensionManager;
         // --- The pool of available components
         this.pool = new Map();
         // --- The pool of available theme variable names
@@ -149,10 +148,39 @@ class ComponentRegistry {
         this.actionFns = new Map();
         // --- The pool of available loader renderers
         this.loaders = new Map();
+        this.extensionRegistered = (extension) => {
+            extension.components.forEach((c) => {
+                if ("type" in c) {
+                    //we handle just the js components for now
+                    this.registerComponentRenderer(c, extension.namespace);
+                }
+            });
+        };
+        this.registerCoreComponent = (component) => {
+            const coreNamespaces = ["#xmlui-core-ns", ""];
+            if ("compoundComponentDef" in component) {
+                this.registerCompoundComponentRenderer(component, ...coreNamespaces);
+            }
+            else {
+                this.registerComponentRenderer(component, ...coreNamespaces);
+            }
+        };
+        this.registerAppComponent = (component) => {
+            const appNamespaces = ["#app-ns", ""];
+            if ("compoundComponentDef" in component) {
+                this.registerCompoundComponentRenderer(component, ...appNamespaces);
+            }
+            else {
+                this.registerComponentRenderer(component, ...appNamespaces);
+            }
+        };
         // --- Registers a renderable component using its renderer function
         // --- and metadata
-        this.registerComponentRenderer = ({ type, renderer, metadata, }) => {
-            this.pool.set(type, { renderer, descriptor: metadata });
+        this.registerComponentRenderer = ({ type, renderer, metadata }, ...namespaces) => {
+            const component = { renderer, descriptor: metadata };
+            namespaces.forEach((ns) => {
+                this.pool.set((ns ? (ns + ".") : "") + type, component);
+            });
             if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
                 Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
             }
@@ -160,229 +188,227 @@ class ComponentRegistry {
                 (0, lodash_es_1.merge)(this.defaultThemeVars, metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars);
             }
         };
-        this.componentManager = componentManager;
+        this.extensionManager = extensionManager;
+        // we register these first, so that core components with the same name can override them (without namespace)
+        (_a = contributes.components) === null || _a === void 0 ? void 0 : _a.forEach((renderer) => {
+            this.registerAppComponent(renderer);
+        });
+        (_b = contributes.compoundComponents) === null || _b === void 0 ? void 0 : _b.forEach((def) => {
+            this.registerAppComponent({ compoundComponentDef: def });
+        });
         if (process.env.VITE_USED_COMPONENTS_Stack !== "false") {
-            this.registerComponentRenderer(Stack_1.stackComponentRenderer);
-            this.registerComponentRenderer(Stack_1.vStackComponentRenderer);
-            this.registerComponentRenderer(Stack_1.hStackComponentRenderer);
-            this.registerComponentRenderer(Stack_1.cvStackComponentRenderer);
-            this.registerComponentRenderer(Stack_1.chStackComponentRenderer);
-        }
-        this.registerComponentRenderer(Slot_1.SlotHolder);
-        this.registerComponentRenderer(dataSourcePropHolder);
-        this.registerComponentRenderer(textNodePropHolder);
-        this.registerComponentRenderer(textNodeCDataPropHolder);
+            this.registerCoreComponent(Stack_1.stackComponentRenderer);
+            this.registerCoreComponent(Stack_1.vStackComponentRenderer);
+            this.registerCoreComponent(Stack_1.hStackComponentRenderer);
+            this.registerCoreComponent(Stack_1.cvStackComponentRenderer);
+            this.registerCoreComponent(Stack_1.chStackComponentRenderer);
+        }
+        this.registerCoreComponent(Slot_1.SlotHolder);
+        this.registerCoreComponent(dataSourcePropHolder);
+        this.registerCoreComponent(textNodePropHolder);
+        this.registerCoreComponent(textNodeCDataPropHolder);
         if (process.env.VITE_USED_COMPONENTS_SpaceFiller !== "false") {
-            this.registerComponentRenderer(SpaceFiller_1.spaceFillerComponentRenderer);
+            this.registerCoreComponent(SpaceFiller_1.spaceFillerComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Textarea !== "false") {
-            this.registerComponentRenderer(TextArea_1.textAreaComponentRenderer);
+            this.registerCoreComponent(TextArea_1.textAreaComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_AppHeader !== "false") {
-            this.registerComponentRenderer(AppHeader_1.appHeaderComponentRenderer);
+            this.registerCoreComponent(AppHeader_1.appHeaderComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Footer !== "false") {
-            this.registerComponentRenderer(Footer_1.footerRenderer);
+            this.registerCoreComponent(Footer_1.footerRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Logo !== "false") {
-            this.registerComponentRenderer(Logo_1.logoComponentRenderer);
+            this.registerCoreComponent(Logo_1.logoComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_NavLink !== "false") {
-            this.registerComponentRenderer(NavLink_1.navLinkComponentRenderer);
+            this.registerCoreComponent(NavLink_1.navLinkComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_NavGroup !== "false") {
-            this.registerComponentRenderer(NavGroup_1.navGroupComponentRenderer);
+            this.registerCoreComponent(NavGroup_1.navGroupComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Link !== "false") {
-            this.registerComponentRenderer(Link_1.localLinkComponentRenderer);
+            this.registerCoreComponent(Link_1.localLinkComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Form !== "false") {
-            this.registerComponentRenderer(Form_1.formComponentRenderer);
-            this.registerComponentRenderer(FormItem_1.formItemComponentRenderer);
+            this.registerCoreComponent(Form_1.formComponentRenderer);
+            this.registerCoreComponent(FormItem_1.formItemComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Tree !== "false") {
-            this.registerComponentRenderer(TreeComponent_1.treeComponentRenderer);
+            this.registerCoreComponent(TreeComponent_1.treeComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Button !== "false") {
-            this.registerComponentRenderer(Button_1.buttonComponentRenderer);
+            this.registerCoreComponent(Button_1.buttonComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Checkbox !== "false") {
-            this.registerComponentRenderer(Checkbox_1.checkboxComponentRenderer);
+            this.registerCoreComponent(Checkbox_1.checkboxComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Switch !== "false") {
-            this.registerComponentRenderer(Switch_1.switchComponentRenderer);
+            this.registerCoreComponent(Switch_1.switchComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Heading !== "false") {
-            this.registerComponentRenderer(Heading_1.headingComponentRenderer);
-            this.registerComponentRenderer(Heading_1.h1ComponentRenderer);
-            this.registerComponentRenderer(Heading_1.h2ComponentRenderer);
-            this.registerComponentRenderer(Heading_1.h3ComponentRenderer);
-            this.registerComponentRenderer(Heading_1.h4ComponentRenderer);
-            this.registerComponentRenderer(Heading_1.h5ComponentRenderer);
-            this.registerComponentRenderer(Heading_1.h6ComponentRenderer);
+            this.registerCoreComponent(Heading_1.headingComponentRenderer);
+            this.registerCoreComponent(Heading_1.h1ComponentRenderer);
+            this.registerCoreComponent(Heading_1.h2ComponentRenderer);
+            this.registerCoreComponent(Heading_1.h3ComponentRenderer);
+            this.registerCoreComponent(Heading_1.h4ComponentRenderer);
+            this.registerCoreComponent(Heading_1.h5ComponentRenderer);
+            this.registerCoreComponent(Heading_1.h6ComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Text !== "false") {
-            this.registerComponentRenderer(Text_1.textComponentRenderer);
+            this.registerCoreComponent(Text_1.textComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Fragment !== "false") {
-            this.registerComponentRenderer(Fragment_1.fragmentComponentRenderer);
+            this.registerCoreComponent(Fragment_1.fragmentComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Table !== "false") {
-            this.registerComponentRenderer(Table_1.tableComponentRenderer);
-            this.registerComponentRenderer(Column_1.columnComponentRenderer);
+            this.registerCoreComponent(Table_1.tableComponentRenderer);
+            this.registerCoreComponent(Column_1.columnComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_List !== "false") {
-            this.registerComponentRenderer(List_1.dynamicHeightListComponentRenderer);
+            this.registerCoreComponent(List_1.dynamicHeightListComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_App !== "false") {
-            this.registerComponentRenderer(App_1.appRenderer);
+            this.registerCoreComponent(App_1.appRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_NavPanel !== "false") {
-            this.registerComponentRenderer(NavPanel_1.navPanelRenderer);
+            this.registerCoreComponent(NavPanel_1.navPanelRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Pages !== "false") {
-            this.registerComponentRenderer(Pages_1.pagesRenderer);
-            this.registerComponentRenderer(Pages_1.pageRenderer);
+            this.registerCoreComponent(Pages_1.pagesRenderer);
+            this.registerCoreComponent(Pages_1.pageRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Redirect !== "false") {
-            this.registerComponentRenderer(Redirect_1.redirectRenderer);
+            this.registerCoreComponent(Redirect_1.redirectRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_StickyBox !== "false") {
-            this.registerComponentRenderer(StickyBox_1.stickyBoxComponentRenderer);
+            this.registerCoreComponent(StickyBox_1.stickyBoxComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Badge !== "false") {
-            this.registerComponentRenderer(Badge_1.badgeComponentRenderer);
+            this.registerCoreComponent(Badge_1.badgeComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Avatar !== "false") {
-            this.registerComponentRenderer(Avatar_1.avatarComponentRenderer);
+            this.registerCoreComponent(Avatar_1.avatarComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_ContentSeparator !== "false") {
-            this.registerComponentRenderer(ContentSeparator_1.contentSeparatorComponentRenderer);
+            this.registerCoreComponent(ContentSeparator_1.contentSeparatorComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Card !== "false") {
-            this.registerComponentRenderer(Card_1.cardComponentRenderer);
+            this.registerCoreComponent(Card_1.cardComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_FlowLayout !== "false") {
-            this.registerComponentRenderer(FlowLayout_1.flowLayoutComponentRenderer);
+            this.registerCoreComponent(FlowLayout_1.flowLayoutComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_ModalDialog !== "false") {
-            this.registerComponentRenderer(ModalDialog_1.modalViewComponentRenderer);
+            this.registerCoreComponent(ModalDialog_1.modalViewComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_NoResult !== "false") {
-            this.registerComponentRenderer(NoResult_1.noResultComponentRenderer);
+            this.registerCoreComponent(NoResult_1.noResultComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Option !== "false") {
-            this.registerComponentRenderer(Option_1.optionComponentRenderer);
+            this.registerCoreComponent(Option_1.optionComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_TabItem !== "false") {
-            this.registerComponentRenderer(TabItem_1.tabItemComponentRenderer);
+            this.registerCoreComponent(TabItem_1.tabItemComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_AccordionItem !== "false") {
-            this.registerComponentRenderer(AccordionItem_1.accordionItemComponentRenderer);
+            this.registerCoreComponent(AccordionItem_1.accordionItemComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_CarouselItem !== "false") {
-            this.registerComponentRenderer(CarouselItem_1.carouselItemComponentRenderer);
+            this.registerCoreComponent(CarouselItem_1.carouselItemComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_FileUploadDropZone !== "false") {
-            this.registerComponentRenderer(FileUploadDropZone_1.fileUploadDropZoneComponentRenderer);
+            this.registerCoreComponent(FileUploadDropZone_1.fileUploadDropZoneComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Icon !== "false") {
-            this.registerComponentRenderer(Icon_1.iconComponentRenderer);
+            this.registerCoreComponent(Icon_1.iconComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Items !== "false") {
-            this.registerComponentRenderer(Items_1.itemsComponentRenderer);
+            this.registerCoreComponent(Items_1.itemsComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_SelectionStore !== "false") {
-            this.registerComponentRenderer(SelectionStore_1.selectionStoreComponentRenderer);
+            this.registerCoreComponent(SelectionStore_1.selectionStoreComponentRenderer);
         }
         if (process.env.VITE_USED_COMPONENTS_Image !== "false") {
-            this.registerComponentRenderer(Image_1.imageComponentRenderer);
+            this.registerCoreComponent(Image_1.imageComponentRenderer);
         }
         if (process.env.VITE_USER_COMPONENTS_XmluiCodeHightlighter !== "false") {
-            this.registerComponentRenderer(XmluiCodeHighlighter_1.codeComponentRenderer);
+            this.registerCoreComponent(XmluiCodeHighlighter_1.codeComponentRenderer);
         }
         if (process.env.VITE_USER_COMPONENTS_Markdown !== "false") {
-            this.registerComponentRenderer(Markdown_1.markdownComponentRenderer);
+            this.registerCoreComponent(Markdown_1.markdownComponentRenderer);
         }
         if (process.env.VITE_INCLUDE_REST_COMPONENTS !== "false") {
             //TODO, if it proves to be a working solution, make these components skippable, too
-            this.registerComponentRenderer(PageMetaTitle_1.pageMetaTitleComponentRenderer);
-            this.registerComponentRenderer(ProgressBar_1.progressBarComponentRenderer);
-            this.registerComponentRenderer(Splitter_1.splitterComponentRenderer);
-            this.registerComponentRenderer(Splitter_1.vSplitterComponentRenderer);
-            this.registerComponentRenderer(Splitter_1.hSplitterComponentRenderer);
-            this.registerComponentRenderer(Queue_1.queueComponentRenderer);
-            this.registerComponentRenderer(PositionedContainer_1.positionedContainerComponentRenderer);
-            this.registerComponentRenderer(ChangeListener_1.changeListenerComponentRenderer);
-            this.registerComponentRenderer(RealTimeAdapter_1.realTimeAdapterComponentRenderer);
-            this.registerComponentRenderer(TextBox_1.textBoxComponentRenderer);
-            this.registerComponentRenderer(TextBox_1.passwordInputComponentRenderer);
-            this.registerComponentRenderer(EmojiSelector_1.emojiSelectorRenderer);
-            this.registerComponentRenderer(NumberBox_1.numberBoxComponentRenderer);
-            this.registerComponentRenderer(HoverCard_1.hoverCardComponentRenderer);
-            this.registerComponentRenderer(RadioGroup_1.radioGroupRenderer);
-            this.registerComponentRenderer(FileInput_1.fileInputRenderer);
-            this.registerComponentRenderer(DatePicker_1.datePickerComponentRenderer);
-            this.registerComponentRenderer(Spinner_1.spinnerComponentRenderer);
-            this.registerComponentRenderer(Select_1.selectComponentRenderer);
-            this.registerComponentRenderer(AutoComplete_1.autoCompleteComponentRenderer);
-            this.registerComponentRenderer(DropdownMenu_1.dropdownMenuComponentRenderer);
-            this.registerComponentRenderer(ThemeChanger_1.themeChangerButtonComponentRenderer);
-            this.registerComponentRenderer(ToneChangerButton_1.toneChangerButtonComponentRenderer);
-            this.registerCompoundComponentRenderer(FormSection_1.formSectionRenderer);
-            this.registerComponentRenderer(DropdownMenu_1.dropdownMenuComponentRenderer);
-            this.registerComponentRenderer(DropdownMenu_1.menuItemRenderer);
-            this.registerComponentRenderer(DropdownMenu_1.subMenuItemRenderer);
-            this.registerComponentRenderer(DropdownMenu_1.menuSeparatorRenderer);
-            this.registerComponentRenderer(Tabs_1.tabsComponentRenderer);
-            this.registerComponentRenderer(Bookmark_1.bookmarkComponentRenderer);
-            this.registerComponentRenderer(TableOfContents_1.tableOfContentsRenderer);
-            this.registerComponentRenderer(Breakout_1.breakoutComponentRenderer);
-        }
-        this.registerComponentRenderer(Theme_1.themeComponentRenderer);
-        this.registerComponentRenderer(AppState_1.appStateComponentRenderer);
-        this.registerComponentRenderer(APICall_2.apiCallRenderer);
+            this.registerCoreComponent(PageMetaTitle_1.pageMetaTitleComponentRenderer);
+            this.registerCoreComponent(ProgressBar_1.progressBarComponentRenderer);
+            this.registerCoreComponent(Splitter_1.splitterComponentRenderer);
+            this.registerCoreComponent(Splitter_1.vSplitterComponentRenderer);
+            this.registerCoreComponent(Splitter_1.hSplitterComponentRenderer);
+            this.registerCoreComponent(Queue_1.queueComponentRenderer);
+            this.registerCoreComponent(PositionedContainer_1.positionedContainerComponentRenderer);
+            this.registerCoreComponent(ChangeListener_1.changeListenerComponentRenderer);
+            this.registerCoreComponent(RealTimeAdapter_1.realTimeAdapterComponentRenderer);
+            this.registerCoreComponent(TextBox_1.textBoxComponentRenderer);
+            this.registerCoreComponent(TextBox_1.passwordInputComponentRenderer);
+            this.registerCoreComponent(EmojiSelector_1.emojiSelectorRenderer);
+            this.registerCoreComponent(NumberBox_1.numberBoxComponentRenderer);
+            this.registerCoreComponent(HoverCard_1.hoverCardComponentRenderer);
+            this.registerCoreComponent(RadioGroup_1.radioGroupRenderer);
+            this.registerCoreComponent(FileInput_1.fileInputRenderer);
+            this.registerCoreComponent(DatePicker_1.datePickerComponentRenderer);
+            this.registerCoreComponent(Spinner_1.spinnerComponentRenderer);
+            this.registerCoreComponent(Select_1.selectComponentRenderer);
+            this.registerCoreComponent(AutoComplete_1.autoCompleteComponentRenderer);
+            this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
+            this.registerCoreComponent(ThemeChanger_1.themeChangerButtonComponentRenderer);
+            this.registerCoreComponent(ToneChangerButton_1.toneChangerButtonComponentRenderer);
+            this.registerCoreComponent(FormSection_1.formSectionRenderer);
+            this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
+            this.registerCoreComponent(DropdownMenu_1.menuItemRenderer);
+            this.registerCoreComponent(DropdownMenu_1.subMenuItemRenderer);
+            this.registerCoreComponent(DropdownMenu_1.menuSeparatorRenderer);
+            this.registerCoreComponent(Tabs_1.tabsComponentRenderer);
+            this.registerCoreComponent(Bookmark_1.bookmarkComponentRenderer);
+            this.registerCoreComponent(TableOfContents_1.tableOfContentsRenderer);
+            this.registerCoreComponent(Breakout_1.breakoutComponentRenderer);
+        }
+        this.registerCoreComponent(Theme_1.themeComponentRenderer);
+        this.registerCoreComponent(AppState_1.appStateComponentRenderer);
+        this.registerCoreComponent(APICall_2.apiCallRenderer);
         // --- Added after tabler-clone review
-        this.registerCompoundComponentRenderer(PageHeader_1.pageHeaderRenderer);
-        this.registerCompoundComponentRenderer(TrendLabel_1.trendLabelRenderer);
-        this.registerCompoundComponentRenderer(IconInfoCard_1.iconInfoCardRenderer);
-        this.registerCompoundComponentRenderer(TableHeader_1.tableHeaderRenderer);
-        this.registerCompoundComponentRenderer(Toolbar_1.toolbarRenderer);
-        this.registerCompoundComponentRenderer(ToolbarButton_1.toolbarButtonRenderer);
+        this.registerCoreComponent(PageHeader_1.pageHeaderRenderer);
+        this.registerCoreComponent(TrendLabel_1.trendLabelRenderer);
+        this.registerCoreComponent(IconInfoCard_1.iconInfoCardRenderer);
+        this.registerCoreComponent(TableHeader_1.tableHeaderRenderer);
+        this.registerCoreComponent(Toolbar_1.toolbarRenderer);
+        this.registerCoreComponent(ToolbarButton_1.toolbarButtonRenderer);
         // --- New Bootstrap-inspired components
-        this.registerComponentRenderer(Carousel_1.carouselComponentRenderer);
-        this.registerComponentRenderer(Accordion_1.accordionComponentRenderer);
-        this.registerComponentRenderer(Alert_1.alertComponentRenderer);
-        this.registerComponentRenderer(OffCanvas_1.offCanvasComponentRenderer);
-        this.registerComponentRenderer(Range_1.rangeComponentRenderer);
-        this.registerComponentRenderer(Slider_1.sliderComponentRenderer);
-        this.registerComponentRenderer(ButtonGroup_1.buttonGroupComponentRenderer);
-        this.registerComponentRenderer(Backdrop_1.backdropComponentRenderer);
+        this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
+        this.registerCoreComponent(Accordion_1.accordionComponentRenderer);
+        this.registerCoreComponent(Alert_1.alertComponentRenderer);
+        this.registerCoreComponent(OffCanvas_1.offCanvasComponentRenderer);
+        this.registerCoreComponent(Range_1.rangeComponentRenderer);
+        this.registerCoreComponent(Slider_1.sliderComponentRenderer);
+        this.registerCoreComponent(ButtonGroup_1.buttonGroupComponentRenderer);
+        this.registerCoreComponent(Backdrop_1.backdropComponentRenderer);
+        this.registerCoreComponent(RawHtml_1.rawHtmlComponentRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
+        this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
         if (process.env.VITE_USED_COMPONENTS_Chart !== "false") {
-            this.registerComponentRenderer(Chart_1.chartRenderer);
-            this.registerComponentRenderer(PieChart_1.pieChartComponentRenderer);
-            this.registerComponentRenderer(BarChart_1.barChartComponentRenderer);
-            this.registerComponentRenderer(Map_1.mapComponentRenderer);
+            this.registerCoreComponent(Chart_1.chartRenderer);
         }
-        (_a = contributes.components) === null || _a === void 0 ? void 0 : _a.forEach((renderer) => {
-            this.registerComponentRenderer(renderer);
-        });
-        (_b = contributes.compoundComponents) === null || _b === void 0 ? void 0 : _b.forEach((def) => {
-            this.registerCompoundComponentRenderer({ compoundComponentDef: def });
-        });
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);
         this.registerActionFn(NavigateAction_1.navigateAction);
         this.registerActionFn(TimedAction_1.timedAction);
-        (_c = contributes.actions) === null || _c === void 0 ? void 0 : _c.forEach((actionRenderer) => {
-            this.registerActionFn(actionRenderer);
-        });
         this.registerLoaderRenderer(ApiLoader_1.apiLoaderRenderer);
         this.registerLoaderRenderer(ExternalDataLoader_1.externalDataLoaderRenderer);
         this.registerLoaderRenderer(MockLoaderRenderer_1.mockLoaderRenderer);
         this.registerLoaderRenderer(DataLoader_1.dataLoaderRenderer);
-        (_d = this.componentManager) === null || _d === void 0 ? void 0 : _d.subscribeToRegistrations(this.registerComponentRenderer);
+        (_c = this.extensionManager) === null || _c === void 0 ? void 0 : _c.subscribeToRegistrations(this.extensionRegistered);
     }
     /**
      * All theme variables used by the registered components.
@@ -447,19 +473,16 @@ class ComponentRegistry {
             this.actionFns.get(componentName) !== undefined);
     }
     // --- Registers a compound component using its definition and metadata
-    registerCompoundComponentRenderer({ compoundComponentDef, metadata, }) {
-        this.pool.set(compoundComponentDef.name, {
+    registerCompoundComponentRenderer({ compoundComponentDef, metadata, }, ...namespaces) {
+        const component = {
+            type: compoundComponentDef.name,
             renderer: (rendererContext) => {
                 return ((0, jsx_runtime_1.jsx)(CompoundComponent_1.CompoundComponent, Object.assign({ api: compoundComponentDef.api, scriptCollected: compoundComponentDef.scriptCollected, compound: compoundComponentDef.component }, rendererContext)));
             },
             isCompoundComponent: true,
-        });
-        if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
-            Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
-        }
-        if (metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars) {
-            (0, lodash_es_1.merge)(this.defaultThemeVars, metadata === null || metadata === void 0 ? void 0 : metadata.defaultThemeVars);
-        }
+            metadata
+        };
+        this.registerComponentRenderer(component, ...namespaces);
     }
     // --- Registers an action function using its definition
     registerActionFn({ actionName: functionName, actionFn }) {
@@ -476,7 +499,7 @@ class ComponentRegistry {
      */
     destroy() {
         var _a;
-        (_a = this.componentManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.registerComponentRenderer);
+        (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
     }
 }
 exports.ComponentRegistry = ComponentRegistry;
@@ -485,15 +508,15 @@ exports.ComponentRegistry = ComponentRegistry;
  * component registry. The component ensures that child components are not
  * rendered before the component registry is initialized.
  */
-function ComponentProvider({ children, contributes, componentManager, }) {
-    const [componentRegistry, setComponentRegistry] = (0, react_1.useState)(() => new ComponentRegistry(contributes, componentManager));
+function ComponentProvider({ children, contributes, extensionManager, }) {
+    const [componentRegistry, setComponentRegistry] = (0, react_1.useState)(() => new ComponentRegistry(contributes, extensionManager));
     // --- Make sure the component registry is updated when the contributes or
     // --- component manager changes (e.g., due to HMR).
     (0, react_1.useEffect)(() => {
         setComponentRegistry((prev) => {
             prev.destroy();
-            return new ComponentRegistry(contributes, componentManager);
+            return new ComponentRegistry(contributes, extensionManager);
         });
-    }, [componentManager, contributes]);
+    }, [extensionManager, contributes]);
     return ((0, jsx_runtime_1.jsx)(ComponentRegistryContext_1.ComponentRegistryContext.Provider, { value: componentRegistry, children: children }));
 }

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -31,7 +31,7 @@ const misc_1 = require("@components-core/utils/misc");
 const ItemWithLabel_1 = require("./ItemWithLabel");
 const DatePickerNative_1 = require("@components/DatePicker/DatePickerNative");
 const FormNative_1 = require("@components/Form/FormNative");
-const valueExtractor_1 = require("@components-core/container/valueExtractor");
+const valueExtractor_1 = require("@components-core/rendering/valueExtractor");
 const AutoCompleteNative_1 = require("@components/AutoComplete/AutoCompleteNative");
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",

package/dist/scripts/src/components/HtmlTags/HtmlTags.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlCodeTagRenderer = exports.HtmlCodeMd = exports.htmlEMTagRenderer = exports.HtmlEMMd = exports.htmlBTagRenderer = exports.HtmlBMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+exports.HtmlBMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component renders an HTML \`b\` tag.",
+    props: {},
+    events: {}
+});
+exports.htmlBTagRenderer = (0, renderers_1.createComponentRenderer)("b", exports.HtmlBMd, ({ node, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)("b", { children: renderChild(node.children) });
+});
+exports.HtmlEMMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component renders an HTML \`em\` tag.",
+    props: {},
+    events: {}
+});
+exports.htmlEMTagRenderer = (0, renderers_1.createComponentRenderer)("EM", exports.HtmlEMMd, ({ node, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)("em", { children: renderChild(node.children) });
+});
+exports.HtmlCodeMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: "This component renders an HTML \`code\` tag.",
+    props: {},
+    events: {}
+});
+exports.htmlCodeTagRenderer = (0, renderers_1.createComponentRenderer)("CODE", exports.HtmlCodeMd, ({ node, renderChild }) => {
+    return (0, jsx_runtime_1.jsx)("code", { children: renderChild(node.children) });
+});