xmlui 0.10.10 → 0.10.12

package/dist/scripts/src/components-core/xmlui-parser.js

@@ -9,9 +9,11 @@ const parser_1 = require("../parsers/xmlui-parser/parser");
 const transform_1 = require("../parsers/xmlui-parser/transform");
 const diagnostics_1 = require("../parsers/xmlui-parser/diagnostics");
 const syntax_kind_1 = require("../parsers/xmlui-parser/syntax-kind");
-const COLOR_DANER_100 = "hsl(356, 100%, 91%)";
-const COLOR_DANER_300 = "hsl(356, 100%, 70%)";
-const SPACE_2 = "0.5rem";
+const COLOR_DANGER_100 = "hsl(356, 100%, 91%)";
+const COLOR_DANGER_300 = "hsl(356, 100%, 70%)";
+const COLOR_PRIMARY = "hsl(204, 30.3%, 13%)";
+const COLOR_PRIMARY_LINE_NUMS = "#555b5e";
+const RADIUS = "0.5rem";
 function xmlUiMarkupToComponent(source, fileId = 0) {
     const { parse, getText } = (0, parser_1.createXmlUiParser)(source);
     const { node, errors } = parse();
@@ -119,13 +121,20 @@ function createErrorReportComponent(errors, fileName) {
             const lineEnd = currentPos + line.length;
             const lineChildren = [
                 {
-                    type: "Text",
-                    props: {
-                        value: linePrefix,
-                        fontFamily: "monospace",
-                        color: "hsl(204, 30.3%, 45%)",
-                    },
+                    type: "Theme",
+                    props: {},
+                    children: [
+                        {
+                            type: "Text",
+                            props: {
+                                value: linePrefix,
+                                fontFamily: "monospace",
+                                color: COLOR_PRIMARY_LINE_NUMS,
+                            },
+                        },
+                    ],
                 },
+                ,
             ];
             if (errorStartInContext >= lineStart && errorStartInContext < lineEnd) {
                 // Error starts on this line
@@ -149,7 +158,7 @@ function createErrorReportComponent(errors, fileName) {
                             fontFamily: "monospace",
                             textDecorationLine: "underline",
                             textDecorationColor: "$color-error",
-                            backgroundColor: COLOR_DANER_100,
+                            backgroundColor: COLOR_DANGER_100,
                         },
                     });
                 }
@@ -172,7 +181,7 @@ function createErrorReportComponent(errors, fileName) {
                         fontFamily: "monospace",
                         textDecorationLine: "underline",
                         textDecorationColor: "$color-error",
-                        backgroundColor: COLOR_DANER_100,
+                        backgroundColor: COLOR_DANGER_100,
                     },
                 });
             }
@@ -190,7 +199,7 @@ function createErrorReportComponent(errors, fileName) {
                             fontFamily: "monospace",
                             textDecorationLine: "underline",
                             textDecorationColor: "$color-error",
-                            backgroundColor: COLOR_DANER_100,
+                            backgroundColor: COLOR_DANGER_100,
                         },
                     });
                 }
@@ -221,7 +230,7 @@ function createErrorReportComponent(errors, fileName) {
                         textDecorationLine: "underline",
                         fontFamily: "monospace",
                         fontWeight: "bold",
-                        backgroundColor: COLOR_DANER_100,
+                        backgroundColor: COLOR_DANGER_100,
                         color: "$color-error",
                     },
                 });
@@ -250,7 +259,7 @@ function createErrorReportComponent(errors, fileName) {
                     type: "Text",
                     props: {
                         value: `#${idx + 1}: ${fileName} (${e.errPosLine}:${e.errPosCol}):`,
-                        color: "hsl(204, 30.3%, 27%)",
+                        // color: "hsl(204, 30.3%, 27%)",
                     },
                 },
                 {
@@ -285,7 +294,7 @@ function createErrorReportComponent(errors, fileName) {
                 gap: "$gap-none",
                 padding: "16px",
                 backgroundColor: "white",
-                borderRadius: SPACE_2,
+                borderRadius: RADIUS,
             },
             children: [errMsgComponenet],
         };
@@ -295,51 +304,59 @@ function createErrorReportComponent(errors, fileName) {
         return errComponent;
     });
     const comp = {
-        type: "VStack",
+        type: "Theme",
         props: {
-            padding: "5px 10px 10px 38px",
-            gap: 0,
-            backgroundColor: COLOR_DANER_100,
-            margin: "10px",
-            border: "2px solid " + COLOR_DANER_300,
-            borderRadius: SPACE_2,
+            "textColor-primary": COLOR_PRIMARY,
         },
         children: [
             {
-                type: "HStack",
+                type: "VStack",
                 props: {
-                    verticalAlignment: "center",
-                    marginLeft: "-34px",
-                    padding: "15px 0px",
-                    gap: "4px",
+                    padding: "16px 32px 16px 38px",
+                    gap: 0,
+                    backgroundColor: COLOR_DANGER_100,
+                    margin: "10px",
+                    border: "2px solid " + COLOR_DANGER_300,
+                    borderRadius: RADIUS,
                 },
                 children: [
                     {
-                        type: "Icon",
+                        type: "HStack",
                         props: {
-                            name: "error",
-                            size: "30px",
-                            color: "$color-error",
+                            verticalAlignment: "center",
+                            marginLeft: "-34px",
+                            padding: "0px 0px 15px 0px",
+                            gap: "4px",
                         },
+                        children: [
+                            {
+                                type: "Icon",
+                                props: {
+                                    name: "error",
+                                    size: "30px",
+                                    color: "$color-error",
+                                },
+                            },
+                            {
+                                type: "H2",
+                                props: {
+                                    value: `${errList.length} ${errList.length > 1 ? "errors" : "error"} while processing XMLUI markup`,
+                                    fontWeight: "bold",
+                                    showAnchor: false,
+                                },
+                            },
+                        ],
                     },
                     {
-                        type: "H2",
+                        type: "VStack",
                         props: {
-                            value: `${errList.length} ${errList.length > 1 ? "errors" : "error"} while processing XMLUI markup`,
-                            fontWeight: "bold",
-                            showAnchor: false,
+                            padding: "$padding-none",
+                            gap: "16px",
                         },
+                        children: errList,
                     },
                 ],
             },
-            {
-                type: "VStack",
-                props: {
-                    padding: "$padding-none",
-                    gap: "16px",
-                },
-                children: errList,
-            },
         ],
     };
     return comp;

package/dist/scripts/src/index.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandaloneComponent = exports.useEvent = exports.StyleRegistry = exports.StyleProvider = exports.useAppLayoutContext = exports.useSearchContextContent = exports.Breakout = exports.Logo = exports.ToneChangerButton = exports.LinkNative = exports.VisuallyHidden = exports.NestedApp = exports.TextBox = exports.Text = exports.XmlUiHelper = exports.builtInThemes = exports.useThemes = exports.Spinner = exports.ApiInterceptorProvider = exports.xmlUiMarkupToComponent = exports.errReportComponent = exports.useLogger = exports.useDevTools = exports.toCssVar = exports.useColors = exports.Tabs = exports.TabItem = exports.getColor = exports.Splitter = exports.Button = exports.Stack = exports.Icon = exports.ErrorBoundary = exports.AppRoot = exports.useTheme = exports.startApp = exports.parseScssVar = exports.dComponent = exports.d = exports.createMetadata = exports.createComponentRenderer = exports.StandaloneExtensionManager = exports.StandaloneApp = void 0;
+const StandaloneApp_1 = __importStar(require("./components-core/StandaloneApp"));
+exports.StandaloneApp = StandaloneApp_1.default;
+Object.defineProperty(exports, "startApp", { enumerable: true, get: function () { return StandaloneApp_1.startApp; } });
+const AppRoot_1 = require("./components-core/rendering/AppRoot");
+Object.defineProperty(exports, "AppRoot", { enumerable: true, get: function () { return AppRoot_1.AppRoot; } });
+const renderers_1 = require("./components-core/renderers");
+Object.defineProperty(exports, "createComponentRenderer", { enumerable: true, get: function () { return renderers_1.createComponentRenderer; } });
+const IconNative_1 = require("./components/Icon/IconNative");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return IconNative_1.Icon; } });
+const ErrorBoundary_1 = require("./components-core/rendering/ErrorBoundary");
+Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return ErrorBoundary_1.ErrorBoundary; } });
+const StackNative_1 = require("./components/Stack/StackNative");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return StackNative_1.Stack; } });
+const ButtonNative_1 = require("./components/Button/ButtonNative");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return ButtonNative_1.Button; } });
+const SplitterNative_1 = require("./components/Splitter/SplitterNative");
+Object.defineProperty(exports, "Splitter", { enumerable: true, get: function () { return SplitterNative_1.Splitter; } });
+const ThemeContext_1 = require("./components-core/theming/ThemeContext");
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeContext_1.useTheme; } });
+Object.defineProperty(exports, "useThemes", { enumerable: true, get: function () { return ThemeContext_1.useThemes; } });
+const StyleParser_1 = require("./parsers/style-parser/StyleParser");
+Object.defineProperty(exports, "toCssVar", { enumerable: true, get: function () { return StyleParser_1.toCssVar; } });
+const css_utils_1 = require("./components-core/utils/css-utils");
+Object.defineProperty(exports, "getColor", { enumerable: true, get: function () { return css_utils_1.getColor; } });
+const hooks_1 = require("./components-core/utils/hooks");
+Object.defineProperty(exports, "useColors", { enumerable: true, get: function () { return hooks_1.useColors; } });
+const themeVars_1 = require("./components-core/theming/themeVars");
+Object.defineProperty(exports, "parseScssVar", { enumerable: true, get: function () { return themeVars_1.parseScssVar; } });
+const StandaloneExtensionManager_1 = __importDefault(require("./components-core/StandaloneExtensionManager"));
+exports.StandaloneExtensionManager = StandaloneExtensionManager_1.default;
+const InspectorContext_1 = require("./components-core/InspectorContext");
+Object.defineProperty(exports, "useDevTools", { enumerable: true, get: function () { return InspectorContext_1.useDevTools; } });
+const LoggerContext_1 = require("./logging/LoggerContext");
+Object.defineProperty(exports, "useLogger", { enumerable: true, get: function () { return LoggerContext_1.useLogger; } });
+const TabItemNative_1 = require("./components/Tabs/TabItemNative");
+Object.defineProperty(exports, "TabItem", { enumerable: true, get: function () { return TabItemNative_1.TabItemComponent; } });
+const TabsNative_1 = require("./components/Tabs/TabsNative");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabsNative_1.Tabs; } });
+const xmlui_parser_1 = require("./components-core/xmlui-parser");
+Object.defineProperty(exports, "errReportComponent", { enumerable: true, get: function () { return xmlui_parser_1.errReportComponent; } });
+Object.defineProperty(exports, "xmlUiMarkupToComponent", { enumerable: true, get: function () { return xmlui_parser_1.xmlUiMarkupToComponent; } });
+const ApiInterceptorProvider_1 = require("./components-core/interception/ApiInterceptorProvider");
+Object.defineProperty(exports, "ApiInterceptorProvider", { enumerable: true, get: function () { return ApiInterceptorProvider_1.ApiInterceptorProvider; } });
+const SpinnerNative_1 = require("./components/Spinner/SpinnerNative");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return SpinnerNative_1.Spinner; } });
+const xmlui_parser_2 = require("./parsers/xmlui-parser");
+Object.defineProperty(exports, "XmlUiHelper", { enumerable: true, get: function () { return xmlui_parser_2.XmlUiHelper; } });
+const TextNative_1 = require("./components/Text/TextNative");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return TextNative_1.Text; } });
+const TextBoxNative_1 = require("./components/TextBox/TextBoxNative");
+Object.defineProperty(exports, "TextBox", { enumerable: true, get: function () { return TextBoxNative_1.TextBox; } });
+const NestedAppNative_1 = require("./components/NestedApp/NestedAppNative");
+Object.defineProperty(exports, "NestedApp", { enumerable: true, get: function () { return NestedAppNative_1.NestedApp; } });
+const ThemeProvider_1 = require("./components-core/theming/ThemeProvider");
+Object.defineProperty(exports, "builtInThemes", { enumerable: true, get: function () { return ThemeProvider_1.builtInThemes; } });
+const VisuallyHidden_1 = require("./components/VisuallyHidden");
+Object.defineProperty(exports, "VisuallyHidden", { enumerable: true, get: function () { return VisuallyHidden_1.VisuallyHidden; } });
+const LinkNative_1 = require("./components/Link/LinkNative");
+Object.defineProperty(exports, "LinkNative", { enumerable: true, get: function () { return LinkNative_1.LinkNative; } });
+const BreakoutNative_1 = require("./components/Breakout/BreakoutNative");
+Object.defineProperty(exports, "Breakout", { enumerable: true, get: function () { return BreakoutNative_1.Breakout; } });
+const ToneChangerButton_1 = require("./components/ToneChangerButton/ToneChangerButton");
+Object.defineProperty(exports, "ToneChangerButton", { enumerable: true, get: function () { return ToneChangerButton_1.ToneChangerButton; } });
+const LogoNative_1 = require("./components/Logo/LogoNative");
+Object.defineProperty(exports, "Logo", { enumerable: true, get: function () { return LogoNative_1.Logo; } });
+const SearchContext_1 = require("./components/App/SearchContext");
+Object.defineProperty(exports, "useSearchContextContent", { enumerable: true, get: function () { return SearchContext_1.useSearchContextContent; } });
+const AppLayoutContext_1 = require("./components/App/AppLayoutContext");
+Object.defineProperty(exports, "useAppLayoutContext", { enumerable: true, get: function () { return AppLayoutContext_1.useAppLayoutContext; } });
+const StyleContext_1 = require("./components-core/theming/StyleContext");
+Object.defineProperty(exports, "StyleProvider", { enumerable: true, get: function () { return StyleContext_1.StyleProvider; } });
+const StyleRegistry_1 = require("./components-core/theming/StyleRegistry");
+Object.defineProperty(exports, "StyleRegistry", { enumerable: true, get: function () { return StyleRegistry_1.StyleRegistry; } });
+const misc_1 = require("./components-core/utils/misc");
+Object.defineProperty(exports, "useEvent", { enumerable: true, get: function () { return misc_1.useEvent; } });
+const metadata_helpers_1 = require("./components/metadata-helpers");
+Object.defineProperty(exports, "createMetadata", { enumerable: true, get: function () { return metadata_helpers_1.createMetadata; } });
+Object.defineProperty(exports, "d", { enumerable: true, get: function () { return metadata_helpers_1.d; } });
+Object.defineProperty(exports, "dComponent", { enumerable: true, get: function () { return metadata_helpers_1.dComponent; } });
+const StandaloneComponent_1 = __importDefault(require("./components-core/rendering/StandaloneComponent"));
+exports.StandaloneComponent = StandaloneComponent_1.default;

package/dist/scripts/src/parsers/xmlui-parser/syntax-kind.js

@@ -15,14 +15,23 @@ var SyntaxKind;
     SyntaxKind[SyntaxKind["WhitespaceTrivia"] = 4] = "WhitespaceTrivia";
     // Effective tokens
     SyntaxKind[SyntaxKind["Identifier"] = 5] = "Identifier";
+    /** < */
     SyntaxKind[SyntaxKind["OpenNodeStart"] = 6] = "OpenNodeStart";
+    /** </ */
     SyntaxKind[SyntaxKind["CloseNodeStart"] = 7] = "CloseNodeStart";
+    /** > */
     SyntaxKind[SyntaxKind["NodeEnd"] = 8] = "NodeEnd";
+    /** /> */
     SyntaxKind[SyntaxKind["NodeClose"] = 9] = "NodeClose";
+    /** : */
     SyntaxKind[SyntaxKind["Colon"] = 10] = "Colon";
+    /** = */
     SyntaxKind[SyntaxKind["Equal"] = 11] = "Equal";
+    /** string literal */
     SyntaxKind[SyntaxKind["StringLiteral"] = 12] = "StringLiteral";
+    /** <![CDATA[ ... ]]> */
     SyntaxKind[SyntaxKind["CData"] = 13] = "CData";
+    /** <script>...</script> */
     SyntaxKind[SyntaxKind["Script"] = 14] = "Script";
     // A token created by the parser which contains arbitrary text, but not the '<' character
     SyntaxKind[SyntaxKind["TextNode"] = 15] = "TextNode";

package/dist/scripts/src/parsers/xmlui-parser/transform.js

@@ -304,7 +304,8 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         }
         catch (err) {
             if (parser.errors && parser.errors.length > 0) {
-                comp.scriptError = parser.errors;
+                const errMsg = parser.errors[0];
+                throw new ParserError_1.ParserError(`${errMsg.text} [${errMsg.line}: ${errMsg.column}]`, errMsg.code);
             }
             else {
                 comp.scriptError = err;
@@ -354,6 +355,9 @@ function nodeToComponentDef(node, originalGetText, fileId) {
             case "when":
                 comp.when = value;
                 return;
+            case "uses":
+                comp.uses = splitUsesValue(value);
+                return;
             default:
                 if (startSegment === "var") {
                     (_a = comp.vars) !== null && _a !== void 0 ? _a : (comp.vars = {});
@@ -565,21 +569,26 @@ function nodeToComponentDef(node, originalGetText, fileId) {
             setter(name, updatedValue);
         }
     }
-    function collectUsesElements(comp, uses) {
-        var _a;
+    function collectUsesElements(comp, usesNode) {
         // --- Compound component do not have a uses
         if (!isComponent(comp)) {
             reportError("T009", "uses");
             return;
         }
-        const attributes = getAttributes(uses).map(segmentAttr);
+        const attributes = getAttributes(usesNode).map(segmentAttr);
         const valueAttr = attributes.find((attr) => attr.name === "value");
         if (!(valueAttr === null || valueAttr === void 0 ? void 0 : valueAttr.value) || attributes.length !== 1) {
             reportError("T015", "uses");
             return;
         }
         // --- Extract the value
-        (_a = comp.uses) !== null && _a !== void 0 ? _a : (comp.uses = valueAttr.value.split(",").map((v) => v.trim()));
+        const usesValues = splitUsesValue(valueAttr.value);
+        if (comp.uses) {
+            comp.uses.push(...usesValues);
+        }
+        else {
+            comp.uses = usesValues;
+        }
     }
     function segmentAttr(attr) {
         let key = attr.children[0];
@@ -1117,3 +1126,6 @@ function getNamespaceResolvedComponentName(node, getText, namespaceStack) {
 function stripOnPrefix(name) {
     return name[2].toLowerCase() + name.substring(3);
 }
+function splitUsesValue(value) {
+    return value.split(",").map((v) => v.trim());
+}

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -557,7 +557,7 @@ declare type ContributesDefinition = {
  * @param metadata Optional hints to help fix the rendering errors coming from invalid component property definitions
  * @returns The view renderer definition composed of the arguments
  */
-declare function createComponentRenderer<TMd extends ComponentMetadata>(type: string, metadata: TMd, renderer: ComponentRendererFn<ComponentDef<TMd>>): ComponentRendererDef;
+declare function createComponentRenderer<TMd extends ComponentMetadata>(type: string, metadata: TMd, renderer: ComponentRendererFn<ComponentDef<any>>): ComponentRendererDef;
 
 declare function createMetadata<TProps extends Record<string, ComponentPropertyMetadata>, TEvents extends Record<string, ComponentPropertyMetadata>, TContextVars extends Record<string, ComponentPropertyMetadata> = Record<string, any>, TApis extends Record<string, ComponentPropertyMetadata> = Record<string, any>>(metadata: ComponentMetadata<TProps, TEvents, TContextVars, TApis>): ComponentMetadata<TProps, TEvents, TContextVars, TApis>;
 
@@ -828,6 +828,8 @@ declare interface IconBaseProps extends default_2.SVGAttributes<SVGElement> {
     fallback?: string;
     style?: CSSProperties;
     className?: string;
+    tabIndex?: number;
+    onKeyDown?: default_2.KeyboardEventHandler<any>;
 }
 
 declare type IconPosition = (typeof iconPositionValues)[number];
@@ -1267,7 +1269,7 @@ declare interface SequenceExpression extends ExpressionBase {
 
 declare type SizeType = (typeof sizeValues)[number];
 
-declare const sizeValues: readonly ["xs", "sm", "md", "lg"];
+declare const sizeValues: readonly ["xs", "sm", "md", "lg", "xl"];
 
 declare const Spinner: ForwardRefExoticComponent<SpinnerProps & RefAttributes<HTMLDivElement>>;
 
@@ -1454,6 +1456,7 @@ declare const standaloneExports: {
         breakMode?: BreakMode;
         style?: default_2.CSSProperties;
         className?: string;
+        registerComponentApi?: xmluiExports.RegisterComponentApiFn;
     }, "ref"> & default_2.RefAttributes<unknown>>;
     TextBox: default_2.ForwardRefExoticComponent<{
         id?: string;
@@ -1793,6 +1796,7 @@ declare type TextProps = {
     breakMode?: BreakMode;
     style?: CSSProperties;
     className?: string;
+    registerComponentApi?: RegisterComponentApiFn;
     [variantSpecificProps: string]: any;
 };