@semantic-ui/templating - npm Package Compare versions

Comparing version 0.8.7 to 0.8.8

package.json

 {
   "name": "@semantic-ui/templating",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "main": "src/index.js",
@@ -11,6 +11,6 @@ "module": "src/index.js",
   "dependencies": {
-    "@semantic-ui/renderer": "^0.8.7",
-    "@semantic-ui/query": "^0.8.7",
-    "@semantic-ui/reactivity": "^0.8.7",
-    "@semantic-ui/utils": "^0.8.7"
+    "@semantic-ui/renderer": "^0.8.8",
+    "@semantic-ui/query": "^0.8.8",
+    "@semantic-ui/reactivity": "^0.8.8",
+    "@semantic-ui/utils": "^0.8.8"
   },
@@ -17,0 +17,0 @@ "devDependencies": {

tsconfig.json

 {
   "compilerOptions": {
     "allowJs": true,
-    "checkJs": false,
+    "checkJs": true,
     "noEmit": true,
@@ -14,14 +14,8 @@ "declaration": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "noImplicitThis": false,
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules"],
-  "overrides": [
-    {
-      "files": ["src/**/*.js"],
-      "compilerOptions": {
-        "noImplicitAny": false
-      }
-    }
-  ]
 }

types/compiler/string-scanner.d.ts

@@ -0,18 +1,103 @@
+// string-scanner.d.ts
+
+/**
+ * A string scanner class that provides methods for scanning and manipulating strings.
+ * Adapted from BlazeJS Scanner.
+ */
 export class StringScanner {
-    static DEBUG_MODE: boolean;
-    input: string;
-    pos: number;
+  /**
+   * Debug mode flag.  When true, `fatal` errors will include detailed error
+   * messages with context in the console and in the DOM (for easier debugging).
+   * When false, errors are simpler and less informative, but provide better
+   * performance.
+   */
+  static DEBUG_MODE: boolean;
+  /** The input string being scanned. */
+  input: string;
+  /** The current position (index) in the input string. */
+  pos: number;
 
-    constructor(input: string);
-    matches(regex: RegExp): boolean;
-    rest(): string;
-    step(step?: number): void;
-    rewind(step?: number): void;
-    isEOF(): boolean;
-    peek(): string;
-    consume(pattern: string | RegExp): string | null;
-    consumeUntil(pattern: string | RegExp): string;
-    returnTo(pattern: string | RegExp): string | undefined;
-    getContext(): { insideTag: boolean; attribute?: string; booleanAttribute?: boolean };
-    fatal(msg?: string): never;
+  /**
+   * Creates a new StringScanner instance.
+   * @param input - The input string to scan.
+   */
+  constructor(input: string);
+
+  /**
+   * Checks if the rest of the input string matches the given regular expression.
+   * @param regex - The regular expression to match.
+   * @returns True if the rest of the input matches, false otherwise.
+   */
+  matches(regex: RegExp): boolean;
+
+  /**
+   * Returns the portion of the input string from the current position to the end.
+   * @returns The remaining part of the input string.
+   */
+  rest(): string;
+
+  /**
+   * Moves the current position forward by a specified number of characters.
+   * @param step - The number of characters to move forward (default is 1).
+   */
+  step(step?: number): void;
+
+  /**
+   * Moves the current position backward by a specified number of characters.
+   * @param step - The number of characters to move backward (default is 1).
+   */
+  rewind(step?: number): void;
+
+  /**
+   * Checks if the current position is at or beyond the end of the input string.
+   * @returns True if at or beyond the end, false otherwise.
+   */
+  isEOF(): boolean;
+
+  /**
+   * Returns the character at the current position without advancing the position.
+   * @returns The character at the current position.
+   */
+  peek(): string;
+
+  /**
+   * Consumes the input string if it matches the given pattern (string or regular expression)
+   * at the current position.  Advances the current position if a match is found.
+   *
+   * @param pattern - The string or regular expression to match.
+   * @returns The matched string if a match is found, null otherwise.
+   */
+  consume(pattern: string | RegExp): string | null;
+
+  /**
+   * Consumes the input string until the given pattern (string or regular expression) is encountered.
+   * Advances the current position to the beginning of the matched pattern, or to the end of the
+   * string if the pattern is not found.
+   * @param pattern - The string or regular expression to consume until.
+   * @returns The consumed portion of the string.
+   */
+  consumeUntil(pattern: string | RegExp): string;
+
+  /**
+   * Rewinds the current position to the last occurrence of the given pattern.
+   * @param pattern The string or regular expression to search for.
+   * @returns The consumed text, up to the point where the position was rewound.
+   *    Returns `undefined` if the pattern is not found or is falsy.
+   */
+  returnTo(pattern: string | RegExp): string | undefined;
+
+  /**
+   *  Gets the context of the current scanner position
+   *  Context includes `insideTag`, `attribute`, `booleanAttribute` to aid parsing
+   *  @returns Object with context or InsideTag
+   */
+  getContext(): { insideTag: boolean; attribute?: string; booleanAttribute?: boolean };
+
+  /**
+   * Throws an error indicating a parsing issue at the current position.
+   * Includes contextual information in debug mode.
+   * @param msg - The error message.
+   * @throws An error with the provided message and context.
+   */
+  fatal(msg?: string): never;
 }

types/compiler/template-compiler.d.ts

@@ -1,7 +0,6 @@
-import { StringScanner } from './string-scanner';
-//import {  Snippets } from '../types'; // NO LONGER NEED
-
-export interface ASTNode {  // Moved ASTNode here
+// template-compiler.d.ts
+export interface ASTNode {
     type: string;
     content?: ASTNode[];
+    value?: any;
     condition?: string;
@@ -13,36 +12,175 @@ branches?: ASTNode[];
     html?: string;
-    value?: any;
     unsafeHTML?: boolean;
     ifDefined?: boolean;
-    reactiveData?: Record<string, any>;
+    attribute?: string; // Added from StringScanner.getContext()
+    booleanAttribute?: boolean; // Added from StringScanner.getContext()
+    insideTag?: boolean;
 }
 
-export interface Snippets {
-    [key:string]: {
-        type: string;
-        content: ASTNode[]
-    }
+export interface TemplateInfo{
+    name?: string;
+    reactiveData?: Record<string, any>,
+    [key: string]: any
 }
+
+/**
+ * Compiles a template string into an Abstract Syntax Tree (AST).
+ */
 export class TemplateCompiler {
+
+    /**
+     * Regular expressions used for parsing single-bracket syntax ({...}).
+     * @internal
+     */
+    static singleBracketRegExp: {
+        IF: RegExp;
+        ELSEIF: RegExp;
+        ELSE: RegExp;
+        EACH: RegExp;
+        SNIPPET: RegExp;
+        CLOSE_IF: RegExp;
+        CLOSE_EACH: RegExp;
+        CLOSE_SNIPPET: RegExp;
+        SLOT: RegExp;
+        TEMPLATE: RegExp;
+        HTML_EXPRESSION: RegExp;
+        EXPRESSION: RegExp;
+    };
+
+    /**
+     * Regular expressions used for parsing expressions in single-bracket syntax.
+     * @internal
+     */
+    static singleBracketParserRegExp: {
+        NEXT_TAG: RegExp;
+        EXPRESSION_START: RegExp;
+        EXPRESSION_END: RegExp;
+        TAG_CLOSE: RegExp;
+    };
+
+    /**
+     * Regular expressions used for parsing double-bracket syntax ({{...}}).
+     * @internal
+     */
+    static doubleBracketRegExp: {
+        IF: RegExp;
+        ELSEIF: RegExp;
+        ELSE: RegExp;
+        EACH: RegExp;
+        SNIPPET: RegExp;
+        CLOSE_IF: RegExp;
+        CLOSE_EACH: RegExp;
+        CLOSE_SNIPPET: RegExp;
+        SLOT: RegExp;
+        TEMPLATE: RegExp;
+        HTML_EXPRESSION: RegExp;
+        EXPRESSION: RegExp;
+    };
+
+    /**
+     * Regular expressions used for parsing expressions in double-bracket syntax.
+     * @internal
+     */
+    static doubleBracketParserRegExp: {
+        NEXT_TAG: RegExp;
+        EXPRESSION_START: RegExp;
+        EXPRESSION_END: RegExp;
+        TAG_CLOSE: RegExp;
+    };
+
+    /**
+     * Regular expressions used for parsing HTML tags.
+     * @internal
+     */
+    static htmlRegExp: {
+        SVG_OPEN: RegExp;
+        SVG_CLOSE: RegExp;
+    };
+
+    /**
+     * Regular expressions used during template preprocessing.
+     * @internal
+     */
+    static preprocessRegExp: {
+        WEB_COMPONENT_SELF_CLOSING: RegExp;
+    };
+    /**
+     * Regular expressions used during template parsing.
+     * @internal
+     */
+    static templateRegExp: {
+        VERBOSE_KEYWORD: RegExp;
+        VERBOSE_PROPERTIES: RegExp;
+        STANDARD: RegExp;
+        DATA_OBJECT: RegExp;
+        SINGLE_QUOTES: RegExp;
+    };
+
+    /** The input template string. */
     templateString: string;
-    snippets: Snippets;
+    /**
+     * Snippets
+     */
+    snippets: Record<string, ASTNode>;
 
-    static singleBracketRegExp: Record<string, RegExp>;
-    static singleBracketParserRegExp: Record<string, RegExp>;
-    static doubleBracketRegExp: Record<string, RegExp>;
-    static doubleBracketParserRegExp: Record<string, RegExp>;
-    static htmlRegExp: Record<string, RegExp>;
-    static preprocessRegExp: Record<string, RegExp>;
-    static templateRegExp: Record<string, RegExp>;
-
+    /**
+     * Creates a new TemplateCompiler instance.
+     * @param templateString - The template string to compile.
+     */
     constructor(templateString?: string);
 
+    /**
+     * Compiles the template string into an Abstract Syntax Tree (AST).
+     * @param templateString The template string to compile. Defaults to the instance's `templateString`.
+     * @returns The compiled AST.
+     */
     compile(templateString?: string): ASTNode[];
+
+    /**
+     * Extracts value
+     * @internal
+     * @param expression string containing value
+     * @returns the value
+     */
     getValue(expression: string): any;
-    parseTemplateString(expression?: string):  Record<string, any>;
 
+    /**
+     * Parses a template string expression (e.g., `templateName data1=value1 data2=value2`).
+     * @param {string} expression -
+     * @returns {TemplateInfo} Parsed template info.
+     * @internal
+     */
+    parseTemplateString(expression?: string): TemplateInfo;
+
+    /**
+     * Converts an object like string
+     * @internal
+     * @param {string} objectString object string
+     * @returns {Record<string, any> | string} an object or string
+     */
     static getObjectFromString(objectString?: string): Record<string, any> | string;
+
+     /**
+     * Detects whether the template uses single or double bracket syntax.
+     * @param templateString - The template string.
+     * @returns Either 'singleBracket' or 'doubleBracket'.
+     * @internal
+     */
     static detectSyntax(templateString?: string): 'singleBracket' | 'doubleBracket';
+
+    /**
+     * Preprocesses the template string, handling self-closing web component tags.
+     * @param templateString - The template string to preprocess.
+     * @returns The preprocessed template string.
+     * @internal
+     */
     static preprocessTemplate(templateString?: string): string;
+
+    /**
+     * Optimizes the AST by merging adjacent HTML nodes.
+     * @param ast - The AST to optimize.
+     * @returns The optimized AST.
+     * @internal
+     */
     static optimizeAST(ast: ASTNode[]): ASTNode[];
-}
+}

types/template.d.ts

@@ -8,27 +8,52 @@ import { LitRenderer } from '@semantic-ui/renderer';
 export interface TemplateSettings {
-    templateName?: string;
-    ast?: import('./compiler/template-compiler').ASTNode[]; // Import ASTNode
-    template?: string;
-    data?: DataContext;
-    element?: HTMLElement;
-    renderRoot?: ShadowRoot | HTMLElement;
-    css?: string;
-    events?: Record<string, Function>;
-    keys?: KeyBindings;
-    defaultState?: Record<string, any>;
-    subTemplates?: Record<string, Function>;
-    createComponent?: (this: Template) => any;
-    parentTemplate?: Template;
-    renderingEngine?: 'lit' | string;
-    isPrototype?: boolean;
-    attachStyles?: boolean;
-    onCreated?: () => void;
-    onRendered?: () => void;
-    onUpdated?: () => void;
-    onDestroyed?: () => void;
-    onThemeChanged?: () => void;
+  /** The name of the template. */
+  templateName?: string;
+  /** The compiled Abstract Syntax Tree (AST) of the template. */
+  ast?: import('./compiler/template-compiler').ASTNode[]; // Import ASTNode
+  /** The raw template string. */
+  template?: string;
+  /** The data context for the template. */
+  data?: DataContext;
+  /** The DOM element associated with the template. */
+  element?: HTMLElement;
+  /** The root element where the template will be rendered (ShadowRoot or HTMLElement). */
+  renderRoot?: ShadowRoot | HTMLElement;
+  /** CSS styles for the template (as a string). */
+  css?: string;
+  /** Event handlers for the template. */
+  events?: Record<string, Function>;
+  /** Key bindings for the template. */
+  keys?: KeyBindings;
+  /** Default state for the template. */
+  defaultState?: Record<string, any>;
+  /** Sub-templates used within the template. */
+  subTemplates?: Record<string, Function>;
+  /** A function to create a component instance associated with the template. */
+  createComponent?: (this: Template) => any;
+  /** The parent template (if this is a nested template). */
+  parentTemplate?: Template;
+  /** The rendering engine to use ('lit' or a custom engine name). */
+  renderingEngine?: 'lit' | string;
+  /** Indicates if this is a prototype template. */
+  isPrototype?: boolean;
+  /** Whether to automatically attach styles to the renderRoot. */
+  attachStyles?: boolean;
+  /** Callback function invoked after the template is created. */
+  onCreated?: () => void;
+  /** Callback function invoked after the template is rendered. */
+  onRendered?: () => void;
+  /** Callback function invoked after the template is updated. */
+  onUpdated?: () => void;
+  /** Callback function invoked after the template is destroyed. */
+  onDestroyed?: () => void;
+  /** Callback function invoked after the theme has changed */
+  onThemeChanged?: () => void;
 }
 export type DataContext = Record<string, any>;
+
+/**
+ * Represents a rendered template instance, merging the instance properties and data context.
+ */
 export interface RenderedTemplate {
-    [key: string]: any; // Allows any other properties since it merges instance and data.
+  [key: string]: any; // Allows any other properties since it merges instance and data.
 }
@@ -38,45 +63,80 @@
 export interface CallParams {
-    el: HTMLElement;
-    tpl?: any; // Assuming 'any' for simplicity, ideally define the type for your template instances.
-    self?: any;
-    component?: any;
-    $: (selector: string | Node | NodeList | HTMLCollection | Element[] | typeof Query.globalThisProxy, args?: QueryOptions) => Query;
-    $$: (selector: string | Node | NodeList | HTMLCollection | Element[] | typeof Query.globalThisProxy, args?: QueryOptions) => Query;
-    reaction: Template['reaction'];
-    signal: Template['signal'];
-    afterFlush: (callback: () => void) => void;
-    nonreactive: <T>(fn: () => T) => T;
-    flush: () => void;
-    data?: DataContext;
-    settings?: any; // Define if you have a specific type for settings.
-    state?: Record<string, Signal<any>>;
-    isRendered: () => boolean;
-    isServer: boolean;
-    isClient: boolean;
-    dispatchEvent: Template['dispatchEvent'];
-    attachEvent: Template['attachEvent']
-    bindKey: Template['bindKey'];
-    unbindKey: Template['unbindKey'];
-    abortController?: AbortController;
-    helpers: typeof TemplateHelpers;
-    template: Template;
-    templateName: string;
-    templates: Map<string, Template[]>;
-    findTemplate: (templateName: string) => Template | undefined;
-    findParent: (templateName: string) => RenderedTemplate | undefined;
-    findChild(templateName: string) => RenderedTemplate | undefined;
-    findChildren(templateName: string): RenderedTemplate[];
-    content?: any; // Define if you have a specific type for content.
-    darkMode: boolean;
-    [key: string]: any; // Allows for additional data to be passed.
+  /** The DOM element associated with the call. */
+  el: HTMLElement;
+  /** The template instance (type might need refinement). */
+  tpl?: any;
+  /** The 'this' context of the calling function. */
+  self?: any;
+  /** The component instance. */
+  component?: any;
+  /** A function for querying DOM elements (similar to jQuery). */
+  $: (selector: string | Node | NodeList | HTMLCollection | Element[] | typeof Query.globalThisProxy, args?: QueryOptions) => Query;
+  /** A function for querying DOM elements, piercing shadow DOM (similar to jQuery). */
+  $$: (selector: string | Node | NodeList | HTMLCollection | Element[] | typeof Query.globalThisProxy, args?: QueryOptions) => Query;
+  /** Creates a reactive effect. See {@link Template.reaction}. */
+  reaction: Template['reaction'];
+  /** Creates a reactive signal. See {@link Template.signal}. */
+  signal: Template['signal'];
+  /** Executes a callback after all pending reactive updates have been flushed. */
+  afterFlush: (callback: () => void) => void;
+  /** Runs a function without tracking reactive dependencies. */
+  nonreactive: <T>(fn: () => T) => T;
+  /** Forces immediate execution of pending reactive updates. */
+  flush: () => void;
+  /** The data context for the call. */
+  data?: DataContext;
+  /** Settings for the call (type might need refinement). */
+  settings?: any;
+  /** Reactive state variables. */
+  state?: Record<string, Signal<any>>;
+  /** Checks if the template is rendered. */
+  isRendered: () => boolean;
+  /** Indicates if the rendering is happening on the server. */
+  isServer: boolean;
+  /** Indicates if the rendering is happening on the client. */
+  isClient: boolean;
+  /** Dispatches a custom event from the template's element. */
+  dispatchEvent: Template['dispatchEvent'];
+  /** Attaches an event listener using event delegation. */
+  attachEvent: Template['attachEvent']
+  /** Binds a key sequence to a handler. */
+  bindKey: Template['bindKey'];
+  /** Unbinds a key sequence. */
+  unbindKey: Template['unbindKey'];
+  /** An AbortController for managing asynchronous operations. */
+  abortController?: AbortController;
+  /** Template helper functions. */
+  helpers: typeof TemplateHelpers;
+  /** The template instance. */
+  template: Template;
+  /** The name of the template. */
+  templateName: string;
+  /** A Map containing all rendered templates. */
+  templates: Map<string, Template[]>;
+  /** Finds a template by its name. */
+  findTemplate: (templateName: string) => Template | undefined;
+  /** Finds a parent template by name. */
+  findParent: (templateName: string) => RenderedTemplate | undefined;
+  /** Finds a child template by name */
+  findChild(templateName: string) => RenderedTemplate | undefined;
+  /** Finds all child templates by name. */
+  findChildren(templateName: string): RenderedTemplate[];
+  /** Content of the template (type might need refinement). */
+  content?: any;
+  /** Indicates if dark mode is enabled. */
+  darkMode: boolean;
+  /** Allows for additional data to be passed. */
+  [key: string]: any;
 }
 
 export interface EventData {
-    [key: string]: any;
+  [key: string]: any;
 }
 
 export interface EventSettings {
-   abortController?: AbortController;
-   returnHandler?: boolean;
-   [key: string]: any;
+  /** An AbortController for managing the event listener. */
+  abortController?: AbortController;
+  /** If true return value of event handler, else do not */
+  returnHandler?: boolean;
+  [key: string]: any;
 }
@@ -87,21 +147,36 @@
 export interface KeyBindings {
-    [keySequence: string]: KeyBindingHandler;
+  /** Maps key sequences (e.g., "Ctrl+Shift+A") to handler functions. */
+  [keySequence: string]: KeyBindingHandler;
 }
 export interface ParsedEvent {
-    eventName: string;
-    eventType: 'deep' | 'global' | 'delegated';
-    selector: string;
+  /** The name of the event (e.g., "click", "mouseover"). */
+  eventName: string;
+  /**
+   * The type of event binding:
+   * - 'deep': Listens for the event deeply within the DOM, even if it originates from a descendant that doesn't match the selector.
+   * - 'global': Listens for the event on the global scope (document).
+   * - 'delegated': Uses event delegation within the template's root.
+   */
+  eventType: 'deep' | 'global' | 'delegated';
+  /** The CSS selector for event delegation. */
+  selector: string;
 }
 
 export interface QuerySettings { // extends QueryOptions
-    root?: HTMLElement | ShadowRoot | Document;
-    pierceShadow?: boolean;
-    filterTemplate?: boolean;
-    [key: string]: any;
+  /** The root element for the query (defaults to the template's renderRoot). */
+  root?: HTMLElement | ShadowRoot | Document;
+  /** Whether to pierce through shadow DOM boundaries. */
+  pierceShadow?: boolean;
+  /** Whether to filter results to elements within the template. */
+  filterTemplate?: boolean;
+  [key: string]: any;
 }
 
 export interface AttachSettings {
-    parentNode?: HTMLElement | ShadowRoot;
-    startNode?: Node;
-    endNode?: Node;
+  /** The parent node to which the template's content should be attached. Defaults to renderRoot. */
+  parentNode?: HTMLElement | ShadowRoot;
+  /**  Optional start marker node for insertion. */
+  startNode?: Node;
+  /** Optional end marker node for insertion. */
+  endNode?: Node;
 }
@@ -111,93 +186,367 @@
 export class Template {
-    static templateCount: number;
-    static isServer: boolean;
-    static renderedTemplates: Map<string, Template[]>;
+  /** Static counter for the total number of templates created. */
+  static templateCount: number;
+  /** Static property indicating if the environment is server-side. */
+  static isServer: boolean;
+  /** Static Map holding all rendered templates. */
+  static renderedTemplates: Map<string, Template[]>;
 
-    ast: import('./compiler/template-compiler').ASTNode[]; // Import ASTNode
-    css?: string;
-    data: DataContext;
-    defaultState?: Record<string, any>;
-    element?: HTMLElement;
-    events?: Record<string, Function>;
-    id: string;
-    instance: Record<string, any>; // Instance methods and properties from createComponent
-    isPrototype: boolean;
-    keys: KeyBindings;
-    onCreatedCallback: Function;
-    onDestroyedCallback: Function;
-    onRenderedCallback: Function;
-    onThemeChangedCallback: Function;
-    parentTemplate?: Template;
-    reactions: Reaction[];
-    renderRoot?: ShadowRoot | HTMLElement;
-    renderingEngine: 'lit' | string; // Currently only 'lit' is supported.
-    renderer: LitRenderer;
-    startNode?: Node;
-    endNode?: Node;
-    state: Record<string, Signal<any>>;
-    stylesheet?: CSSStyleSheet;
-    subTemplates?: Record<string, Function>; // Assuming subTemplates are functions that return templates.
-    templateName: string;
-    createComponent?: (this: Template) => any;
-    attachStyles: boolean;
+  /** The compiled Abstract Syntax Tree (AST) of the template. */
+  ast: import('./compiler/template-compiler').ASTNode[]; // Import ASTNode
+  /** CSS styles for the template (as a string). */
+  css?: string;
+  /** The data context for the template. */
+  data: DataContext;
+  /** Default state for the template. */
+  defaultState?: Record<string, any>;
+  /** The DOM element associated with the template. */
+  element?: HTMLElement;
+  /** Event handlers for the template. */
+  events?: Record<string, Function>;
+  /** Unique identifier for the template instance. */
+  id: string;
+  /** Instance methods and properties created by the `createComponent` function. */
+  instance: Record<string, any>;
+  /** Indicates if this is a prototype template. */
+  isPrototype: boolean;
+  /** Key bindings for the template. */
+  keys: KeyBindings;
+  /** Callback function invoked after the template is created. */
+  onCreatedCallback: Function;
+  /** Callback function invoked after the template is destroyed. */
+  onDestroyedCallback: Function;
+  /** Callback function invoked after the template is rendered. */
+  onRenderedCallback: Function;
+  /** Callback function invoked when the theme changes. */
+  onThemeChangedCallback: Function;
+  /** The parent template (if this is a nested template). */
+  parentTemplate?: Template;
+  /** Array of reactive reactions associated with the template. */
+  reactions: Reaction[];
+  /** The root element where the template is rendered (ShadowRoot or HTMLElement). */
+  renderRoot?: ShadowRoot | HTMLElement;
+  /** The rendering engine used ('lit' or a custom engine name). */
+  renderingEngine: 'lit' | string; // Currently only 'lit' is supported.
+  /** The LitRenderer instance used for rendering. */
+  renderer: LitRenderer;
+  /** Optional start marker node for insertion. */
+  startNode?: Node;
+  /** Optional end marker node for insertion.. */
+  endNode?: Node;
+  /** The reactive state of the template. */
+  state: Record<string, Signal<any>>;
+  /** The constructed stylesheet for the template (if `attachStyles` is true). */
+  stylesheet?: CSSStyleSheet;
+  /** Sub-templates used within the template. */
+  subTemplates?: Record<string, Function>; // Assuming subTemplates are functions that return templates.
+  /** The name of the template. */
+  templateName: string;
+  /** A function to create a component instance associated with the template. */
+  createComponent?: (this: Template) => any;
+  /** Whether to automatically attach styles to the renderRoot. */
+  attachStyles: boolean;
 
-    initialized: boolean;
-    rendered: boolean;
+  /** Initialization flag */
+  initialized: boolean;
+  /** Whether or not the component is rendered. */
+  rendered: boolean;
 
-    parentNode: HTMLElement | ShadowRoot | undefined;
+  /** The parent node */
+  parentNode: HTMLElement | ShadowRoot | undefined;
 
-    _parentTemplate?: Template;
-    _childTemplates?: Template[];
-    eventController?: AbortController;
-    currentSequence?: string;
-    currentKey?: string;
-    resetSequence?:  ReturnType<typeof setTimeout>;
+  /** The parent template (if this is a nested template). */
+  _parentTemplate?: Template;
+  /** Child templates */
+  _childTemplates?: Template[];
+  /** Abort controller for events. */
+  eventController?: AbortController;
+  /** The key sequence */
+  currentSequence?: string;
+  /** the current key */
+  currentKey?: string;
+  /** The key timeout */
+  resetSequence?:  ReturnType<typeof setTimeout>;
 
-    constructor(settings?: TemplateSettings);
+  /**
+   * Creates a new Template instance.
+   * @param settings - Configuration options for the template.
+   */
+  constructor(settings?: TemplateSettings);
 
-    createReactiveState(defaultState: Record<string, any>, data: DataContext): Record<string, Signal<any>>;
-    setDataContext(data: DataContext, options?: { rerender?: boolean }): void;
-    setParent(parentTemplate: Template): void;
-    setElement(element: HTMLElement): void;
-    getGenericTemplateName(): string;
-    initialize(): void;
-    attach(renderRoot: ShadowRoot | HTMLElement, options?: AttachSettings): Promise<void>;
-    getDataContext(): DataContext;
-    adoptStylesheet(): Promise<void>;
-    clone(settings?: Partial<TemplateSettings>): Template;
-    parseEventString(eventString: string): ParsedEvent[];
-    attachEvents(events?: Record<string, Function>): void;
-    removeEvents(): void;
-    bindKeys(keys?: KeyBindings): void;
-    bindKey(key: string, callback: KeyBindingHandler): void;
-    unbindKey(key: string): void;
-    isNodeInTemplate(node: Node): boolean;
-    render(additionalData?: DataContext): any; // Returns lit-html TemplateResult
-    $(selector: string, options?: QuerySettings): Query;
-    $$(selector: string, options?: QuerySettings): Query;
-    call<T>(func: ((params: CallParams) => T) | undefined, options?: { params?: CallParams, additionalData?: Record<string, any>, firstArg?: any, additionalArgs?: any[] }): T | undefined;
-    attachEvent(selector: string, eventName: string, eventHandler: (event: Event) => void, options?: { eventSettings?: EventSettings, querySettings?: { pierceShadow?: boolean } }): Query;
-    dispatchEvent(eventName: string, eventData?: EventData, eventSettings?: EventSettings, options?: { triggerCallback?: boolean }): Query;
-    reaction(reaction: () => void): void;
-    signal<T>(value: T, options?: SignalOptions<T>): Signal<T>;
-    clearReactions(): void;
-    findTemplate(templateName: string): Template | undefined;
-    findParent(templateName: string): RenderedTemplate | undefined;
-    findChild(templateName: string): RenderedTemplate | undefined;
-    findChildren(templateName: string): RenderedTemplate[];
+  /**
+   * Creates a reactive state object from the default state and initial data.
+   * @param defaultState - The default state object.
+   * @param data - Initial data to merge with the default state.
+   * @returns The reactive state object.
+   */
+  createReactiveState(defaultState: Record<string, any>, data: DataContext): Record<string, Signal<any>>;
 
-    static addTemplate(template: Template): void;
-    static removeTemplate(template: Template): void;
-    static getTemplates(templateName: string): Template[];
-    static findTemplate(templateName: string): Template | undefined;
-    static findParentTemplate(template: Template, templateName: string): RenderedTemplate | undefined;
-    static findChildTemplates(template: Template, templateName: string): RenderedTemplate[];
-    static findChildTemplate(template: Template, templateName: string): RenderedTemplate | undefined;
+  /**
+   * Sets the data context for the template.
+   * @param data - The new data context.
+   * @param options - Options.
+   * @param options.rerender - whether to force a rerender. default true
+   */
+  setDataContext(data: DataContext, options?: { rerender?: boolean }): void;
 
+  /**
+   * Sets the parent template for this template instance.
+   * @param parentTemplate - The parent template instance.
+   */
+  setParent(parentTemplate: Template): void;
 
-    onCreated: () => void;
-    onDestroyed: () => void;
-    onRendered: () => void;
-    onUpdated: () => void;
-    onThemeChanged: (...args: any[]) => void;
+  /**
+   * Sets the element associated with this template.
+   * @param element - The DOM element.
+   */
+  setElement(element: HTMLElement): void;
+    /**
+   * Generates a generic template name (e.g., "Anonymous #1").
+   * @returns The generic template name.
+   */
+  getGenericTemplateName(): string;
+
+  /**
+   * Initializes the template instance, creating the component, setting up callbacks, and initializing the renderer.
+   */
+  initialize(): void;
+
+  /**
+   * Attaches the template to the DOM.
+   * @param renderRoot - The root element (ShadowRoot or HTMLElement) to attach to.
+   * @param options - Attach settings
+   */
+  attach(renderRoot: ShadowRoot | HTMLElement, options?: AttachSettings): Promise<void>;
+
+    /**
+   * Gets the combined data context, including data, state, and instance properties.
+   * @returns The data context object.
+   */
+  getDataContext(): DataContext;
+
+  /**
+   * Adopts the template's stylesheet to the renderRoot (if using a ShadowRoot).
+   */
+  adoptStylesheet(): Promise<void>;
+
+  /**
+   * Creates a clone of the template with optional overrides.
+   * @param settings - Partial settings to override in the cloned template.
+   * @returns The cloned Template instance.
+   */
+  clone(settings?: Partial<TemplateSettings>): Template;
+
+    /**
+   * Parses an event string into its constituent parts (eventName, eventType, selector).
+   * @param eventString - The event string to parse (e.g., "click .my-button", "global keydown .input").
+   * @returns Parsed event array.
+   */
+  parseEventString(eventString: string): ParsedEvent[];
+
+  /**
+   * Attaches event listeners to the template's renderRoot based on the provided event configuration.
+   * @param events - An object mapping event strings to handler functions.
+   */
+  attachEvents(events?: Record<string, Function>): void;
+
+  /**
+   * Removes all event listeners attached by the template.
+   */
+  removeEvents(): void;
+
+  /**
+   * Binds keybindings to the template
+   * @param keys
+   */
+  bindKeys(keys?: KeyBindings): void;
+
+  /**
+   * Binds a key sequence to a handler function.
+   * @param key - The key sequence (e.g., "Ctrl+A", "Shift+Enter").
+   * @param callback - The handler function to execute when the key sequence is pressed.
+   */
+  bindKey(key: string, callback: KeyBindingHandler): void;
+
+  /**
+   * Unbinds a previously bound key sequence.
+   * @param key - The key sequence to unbind.
+   */
+  unbindKey(key: string): void;
+
+  /**
+   * Checks if a given DOM node is within the template's rendered content.
+   * @param node - The DOM node to check.
+   * @returns True if the node is within the template, false otherwise.
+   */
+  isNodeInTemplate(node: Node): boolean;
+
+  /**
+   * Renders the template, producing a lit-html TemplateResult.
+   * @param additionalData - Additional data to be merged into the template's data context.
+   * @returns The rendered lit-html TemplateResult.
+   */
+  render(additionalData?: DataContext): any;
+
+  /**
+   * Queries for DOM elements within the template's renderRoot (similar to jQuery's $).
+   * @param selector - The CSS selector.
+   * @param options - query settings
+   * @returns A Query object representing the matched elements.
+   */
+  $(selector: string, options?: QuerySettings): Query;
+
+  /**
+   * Queries for DOM elements within the template's renderRoot, piercing shadow DOM boundaries (similar to jQuery's $$).
+   * @param selector - The CSS selector.
+    * @param options - query settings
+   * @returns A Query object representing the matched elements.
+   */
+  $$(selector: string, options?: QuerySettings): Query;
+
+  /**
+   * Calls a function within the template's context, providing convenient access to template helpers and data.
+   * @param func - The function to call.
+   * @param options - options
+   * @returns The return value of the called function, or undefined if the function is not defined.
+   */
+  call<T>(func: ((params: CallParams) => T) | undefined, options?: { params?: CallParams, additionalData?: Record<string, any>, firstArg?: any, additionalArgs?: any[] }): T | undefined;
+
+  /**
+   * Attaches an event listener using event delegation.
+   * @param selector - The CSS selector to delegate the event to.
+   * @param eventName - The name of the event (e.g., "click", "input").
+   * @param eventHandler - The event handler function.
+   * @param options
+   * @param options.eventSettings - event settings
+   * @param options.querySettings - query settings
+   * @returns A Query object for managing the event listener.
+   */
+  attachEvent(selector: string, eventName: string, eventHandler: (event: Event) => void, options?: { eventSettings?: EventSettings, querySettings?: { pierceShadow?: boolean } }): Query;
+
+  /**
+   * Dispatches a custom event from the template's element.
+   * @param eventName - The name of the custom event.
+   * @param eventData - Data to be included in the event's detail property.
+   * @param eventSettings - event settings
+   * @param options
+   * @param options.triggerCallback - whether to trigger the callback. default `true`
+   * @returns A Query object for managing the event.
+   */
+  dispatchEvent(eventName: string, eventData?: EventData, eventSettings?: EventSettings, options?: { triggerCallback?: boolean }): Query;
+
+  /**
+   * Creates a reactive effect that will re-run whenever its dependencies change.  Reactions are automatically cleaned up when the component is destroyed.
+   * @param reaction - The function to execute as a reactive effect.
+   */
+  reaction(reaction: () => void): void;
+
+  /**
+   * Creates a reactive signal.
+   * @param value - The initial value of the signal.
+   * @param options - Options for the signal.
+   * @returns The signal.
+   */
+  signal<T>(value: T, options?: SignalOptions<T>): Signal<T>;
+
+  /**
+   * Clears all reactions associated with this template.
+   */
+  clearReactions(): void;
+
+  /**
+   * Finds a template instance by its name.
+   * @param templateName - The name of the template to find.
+   * @returns The Template instance, or undefined if not found.
+   */
+  findTemplate: (templateName: string) => Template | undefined;
+
+  /**
+   * Finds a parent template instance by its name.
+   * @param templateName - The name of the parent template to find.
+   * @returns The rendered template instance, or undefined if not found.
+   */
+  findParent: (templateName: string) => RenderedTemplate | undefined;
+
+  /**
+   * Finds a child template by name.
+   * @param {string} templateName name of template
+   * @returns {RenderedTemplate | undefined} Rendered template instance or undefined
+   */
+  findChild(templateName: string): RenderedTemplate | undefined;
+
+  /**
+    * @param {string} templateName - template to find
+    * @returns The rendered template instances, or an empty array if not found.
+    */
+  findChildren(templateName: string): RenderedTemplate[];
+
+  /**
+   * Adds a template instance to the static registry of rendered templates.
+   * @param template - The Template instance to add.
+   */
+  static addTemplate(template: Template): void;
+
+  /**
+   * Removes a template instance from the static registry.
+   * @param template - The Template instance to remove.
+   */
+  static removeTemplate(template: Template): void;
+
+  /**
+   * Retrieves all rendered template instances with a given name.
+   * @param templateName - The name of the template to retrieve.
+   * @returns An array of Template instances.
+   */
+  static getTemplates(templateName: string): Template[];
+
+  /**
+   * Finds a single rendered template instance by its name.
+   * @param templateName - The name of the template to find.
+   * @returns The Template instance, or undefined if not found.
+   */
+  static findTemplate(templateName: string): Template | undefined;
+  /**
+   * Finds a parent of the provided template
+   * @param {Template} template - template instance
+   * @param {string} templateName - name of template
+   * @returns {RenderedTemplate | undefined} Returns rendered template
+   */
+  static findParentTemplate(template: Template, templateName: string): RenderedTemplate | undefined;
+
+  /**
+   * Finds all child templates with a given name within a parent template.
+   * @param template - The parent Template instance.
+   * @param templateName - The name of the child templates to find.
+   * @returns An array of rendered template instances.
+   */
+  static findChildTemplates(template: Template, templateName: string): RenderedTemplate[];
+
+    /**
+   * Finds a single, direct child, template
+   * @param {Template} template - template to search
+   * @param {string} templateName - name of template to find
+   * @returns {RenderedTemplate | undefined} Returns rendered template instance.
+   */
+  static findChildTemplate(template: Template, templateName: string): RenderedTemplate | undefined;
+
+  /**
+   * Lifecycle callback invoked after the template is created.
+   */
+  onCreated: () => void;
+  /**
+   * Lifecycle callback invoked after the template is destroyed.
+   */
+  onDestroyed: () => void;
+  /**
+   * Lifecycle callback invoked after the template is rendered.
+   */
+  onRendered: () => void;
+  /**
+   * Lifecycle callback invoked after the template is updated.
+   */
+  onUpdated: () => void;
+  /**
+   * Lifecycle callback invoked after the theme changes.
+   */
+  onThemeChanged: (...args: any[]) => void;
 }

No alert changes

Improved metrics

Total package byte prevSize

123525

increased by18.81%

Lines of code

3405

increased by17.66%

Dependency changes

• Updated@semantic-ui/query@^0.8.8

• Updated@semantic-ui/reactivity@^0.8.8

• Updated@semantic-ui/renderer@^0.8.8

• Updated@semantic-ui/utils@^0.8.8