@zeix/ui-element

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Class: InvalidComponentNameError – UIElement Docs</title> <meta name="description" content="" /> <link rel="preload" href="../../assets/main.css?v=452f3291" as="style" /> <link rel="modulepreload" href="../../assets/main.js?v=4387827c" /> <link rel="stylesheet" href="../../assets/main.css?v=452f3291" /> <script type="module" src="../../assets/main.js?v=4387827c" ></script> </head> <body class="api"> <context-router> <header class="content-grid"> <a href="#main" class="skiplink visually-hidden"> Skip to main content </a> <h1 class="content"> UIElement Docs <small>Version 0.14.0</small> </h1> <section-menu> <nav> <h2 class="visually-hidden">Main Menu</h2> <ol> <li> <a href="../../index.html"> <span class="icon">📖</span> <strong>Introduction</strong> <small>Overview and key benefits of UIElement</small> </a> </li> <li> <a href="../../getting-started.html"> <span class="icon">🚀</span> <strong>Getting Started</strong> <small>Installation, setup, and first steps</small> </a> </li> <li> <a href="../../components.html"> <span class="icon">🏗️</span> <strong>Components</strong> <small>Anatomy, lifecycle, signals, effects</small> </a> </li> <li> <a href="../../styling.html"> <span class="icon">🎨</span> <strong>Styling</strong> <small>Scoped styles, CSS custom properties</small> </a> </li> <li> <a href="../../data-flow.html"> <span class="icon">🔄</span> <strong>Data Flow</strong> <small>Passing state, events, context</small> </a> </li> <li> <a href="../../examples.html"> <span class="icon">🍽️</span> <strong>Examples</strong> <small>Common use cases and demos</small> </a> </li> <li> <a href="../../blog.html"> <span class="icon">📜</span> <strong>Blog</strong> <small>Latest articles and updates</small> </a> </li> <li> <a href="../../api.html"> <span class="icon">📚</span> <strong>API Reference</strong> <small>Functions, types, and constants</small> </a> </li> <li> <a href="../../about.html"> <span class="icon">🤝</span> <strong>About</strong> <small>License, versioning, getting involved</small> </a> </li> </ol> </nav> </section-menu> <card-callout class="content danger" hidden> <p class="error" role="alert" aria-live="polite"></p> </card-callout> </header> <main id="main" class="content-grid"><section class="api-content"> <h1 id="class-invalidcomponentnameerror"> <a name="class-invalidcomponentnameerror" class="anchor" href="#class-invalidcomponentnameerror"> <span class="permalink">🔗</span> <span class="title">Class: InvalidComponentNameError</span> </a> </h1> <p>Defined in: <a href="https://github.com/zeixcom/ui-element/blob/bc5efd047a1ae7f13c4c9861e40f8a1b07b7e003/src/core/errors.ts#L28">src/core/errors.ts:28</a></p> <p>Error thrown when component name violates rules for custom element names</p> <h2 id="since"> <a name="since" class="anchor" href="#since"> <span class="permalink">🔗</span> <span class="title">Since</span> </a> </h2> <p>0.14.0</p> <h2 id="extends"> <a name="extends" class="anchor" href="#extends"> <span class="permalink">🔗</span> <span class="title">Extends</span> </a> </h2> <ul> <li><code>Error</code></li> </ul> <h2 id="constructors"> <a name="constructors" class="anchor" href="#constructors"> <span class="permalink">🔗</span> <span class="title">Constructors</span> </a> </h2> <h3 id="constructor"> <a name="constructor" class="anchor" href="#constructor"> <span class="permalink">🔗</span> <span class="title">Constructor</span> </a> </h3> <blockquote> <p><strong>new InvalidComponentNameError</strong>(<code>component</code>): <code>InvalidComponentNameError</code></p> </blockquote> <p>Defined in: <a href="https://github.com/zeixcom/ui-element/blob/bc5efd047a1ae7f13c4c9861e40f8a1b07b7e003/src/core/errors.ts#L32">src/core/errors.ts:32</a></p> <h4 id="parameters"> <a name="parameters" class="anchor" href="#parameters"> <span class="permalink">🔗</span> <span class="title">Parameters</span> </a> </h4> <h5 id="component"> <a name="component" class="anchor" href="#component"> <span class="permalink">🔗</span> <span class="title">component</span> </a> </h5> <p><code>string</code></p> <p>Component name</p> <h4 id="returns"> <a name="returns" class="anchor" href="#returns"> <span class="permalink">🔗</span> <span class="title">Returns</span> </a> </h4> <p><code>InvalidComponentNameError</code></p> <h4 id="overrides"> <a name="overrides" class="anchor" href="#overrides"> <span class="permalink">🔗</span> <span class="title">Overrides</span> </a> </h4> <p><code>Error.constructor</code></p> <h2 id="properties"> <a name="properties" class="anchor" href="#properties"> <span class="permalink">🔗</span> <span class="title">Properties</span> </a> </h2> <h3 id="cause"> <a name="cause" class="anchor" href="#cause"> <span class="permalink">🔗</span> <span class="title">cause?</span> </a> </h3> <blockquote> <p><code>optional</code> <strong>cause</strong>: <code>unknown</code></p> </blockquote> <p>Defined in: node_modules/typescript/lib/lib.es2022.error.d.ts:26</p> <p>The cause of the error.</p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.cause</code></p> <hr> <h3 id="message"> <a name="message" class="anchor" href="#message"> <span class="permalink">🔗</span> <span class="title">message</span> </a> </h3> <blockquote> <p><strong>message</strong>: <code>string</code></p> </blockquote> <p>Defined in: node_modules/typescript/lib/lib.es5.d.ts:1077</p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.message</code></p> <hr> <h3 id="name"> <a name="name" class="anchor" href="#name"> <span class="permalink">🔗</span> <span class="title">name</span> </a> </h3> <blockquote> <p><strong>name</strong>: <code>string</code></p> </blockquote> <p>Defined in: node_modules/typescript/lib/lib.es5.d.ts:1076</p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.name</code></p> <hr> <h3 id="stack"> <a name="stack" class="anchor" href="#stack"> <span class="permalink">🔗</span> <span class="title">stack?</span> </a> </h3> <blockquote> <p><code>optional</code> <strong>stack</strong>: <code>string</code></p> </blockquote> <p>Defined in: node_modules/typescript/lib/lib.es5.d.ts:1078</p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.stack</code></p> <hr> <h3 id="stacktracelimit"> <a name="stacktracelimit" class="anchor" href="#stacktracelimit"> <span class="permalink">🔗</span> <span class="title">stackTraceLimit</span> </a> </h3> <blockquote> <p><code>static</code> <strong>stackTraceLimit</strong>: <code>number</code></p> </blockquote> <p>Defined in: node_modules/bun-types/globals.d.ts:990</p> <p>The maximum number of stack frames to capture.</p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.stackTraceLimit</code></p> <h2 id="methods"> <a name="methods" class="anchor" href="#methods"> <span class="permalink">🔗</span> <span class="title">Methods</span> </a> </h2> <h3 id="capturestacktrace"> <a name="capturestacktrace" class="anchor" href="#capturestacktrace"> <span class="permalink">🔗</span> <span class="title">captureStackTrace()</span> </a> </h3> <h4 id="call-signature"> <a name="call-signature" class="anchor" href="#call-signature"> <span class="permalink">🔗</span> <span class="title">Call Signature</span> </a> </h4> <blockquote> <p><code>static</code> <strong>captureStackTrace</strong>(<code>targetObject</code>, <code>constructorOpt?</code>): <code>void</code></p> </blockquote> <p>Defined in: node_modules/bun-types/globals.d.ts:985</p> <p>Create .stack property on a target object</p> <h5 id="parameters"> <a name="parameters" class="anchor" href="#parameters"> <span class="permalink">🔗</span> <span class="title">Parameters</span> </a> </h5> <h6 id="targetobject"> <a name="targetobject" class="anchor" href="#targetobject"> <span class="permalink">🔗</span> <span class="title">targetObject</span> </a> </h6> <p><code>object</code></p> <h6 id="constructoropt"> <a name="constructoropt" class="anchor" href="#constructoropt"> <span class="permalink">🔗</span> <span class="title">constructorOpt?</span> </a> </h6> <p><code>Function</code></p> <h5 id="returns"> <a name="returns" class="anchor" href="#returns"> <span class="permalink">🔗</span> <span class="title">Returns</span> </a> </h5> <p><code>void</code></p> <h5 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h5> <p><code>Error.captureStackTrace</code></p> <h4 id="call-signature"> <a name="call-signature" class="anchor" href="#call-signature"> <span class="permalink">🔗</span> <span class="title">Call Signature</span> </a> </h4> <blockquote> <p><code>static</code> <strong>captureStackTrace</strong>(<code>targetObject</code>, <code>constructorOpt?</code>): <code>void</code></p> </blockquote> <p>Defined in: node_modules/@types/node/globals.d.ts:145</p> <p>Creates a <code>.stack</code> property on <code>targetObject</code>, which when accessed returns<br>a string representing the location in the code at which<br><code>Error.captureStackTrace()</code> was called.</p> <module-codeblock language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="language">js</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#66D9EF;font-style:italic">const</span><span style="color:#F8F8F2"> myObject </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> {};</span></span> <span class="line"><span style="color:#F8F8F2">Error.</span><span style="color:#A6E22E">captureStackTrace</span><span style="color:#F8F8F2">(myObject);</span></span> <span class="line"><span style="color:#F8F8F2">myObject.stack; </span><span style="color:#88846F">// Similar to `new Error().stack`</span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> </module-codeblock> <p>The first line of the trace will be prefixed with<br><code>${myObject.name}: ${myObject.message}</code>.</p> <p>The optional <code>constructorOpt</code> argument accepts a function. If given, all frames<br>above <code>constructorOpt</code>, including <code>constructorOpt</code>, will be omitted from the<br>generated stack trace.</p> <p>The <code>constructorOpt</code> argument is useful for hiding implementation<br>details of error generation from the user. For instance:</p> <module-codeblock collapsed language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="language">js</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#66D9EF;font-style:italic">function</span><span style="color:#A6E22E"> a</span><span style="color:#F8F8F2">() {</span></span> <span class="line"><span style="color:#A6E22E"> b</span><span style="color:#F8F8F2">();</span></span> <span class="line"><span style="color:#F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color:#66D9EF;font-style:italic">function</span><span style="color:#A6E22E"> b</span><span style="color:#F8F8F2">() {</span></span> <span class="line"><span style="color:#A6E22E"> c</span><span style="color:#F8F8F2">();</span></span> <span class="line"><span style="color:#F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color:#66D9EF;font-style:italic">function</span><span style="color:#A6E22E"> c</span><span style="color:#F8F8F2">() {</span></span> <span class="line"><span style="color:#88846F"> // Create an error without stack trace to avoid calculating the stack trace twice.</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> const</span><span style="color:#F8F8F2"> { stackTraceLimit } </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> Error;</span></span> <span class="line"><span style="color:#F8F8F2"> Error.stackTraceLimit </span><span style="color:#F92672">=</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">;</span></span> <span class="line"><span style="color:#66D9EF;font-style:italic"> const</span><span style="color:#F8F8F2"> error </span><span style="color:#F92672">=</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">();</span></span> <span class="line"><span style="color:#F8F8F2"> Error.stackTraceLimit </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> stackTraceLimit;</span></span> <span class="line"></span> <span class="line"><span style="color:#88846F"> // Capture the stack trace above function b</span></span> <span class="line"><span style="color:#F8F8F2"> Error.</span><span style="color:#A6E22E">captureStackTrace</span><span style="color:#F8F8F2">(error, b); </span><span style="color:#88846F">// Neither function c, nor b is included in the stack trace</span></span> <span class="line"><span style="color:#F92672"> throw</span><span style="color:#F8F8F2"> error;</span></span> <span class="line"><span style="color:#F8F8F2">}</span></span> <span class="line"></span> <span class="line"><span style="color:#A6E22E">a</span><span style="color:#F8F8F2">();</span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> <button type="button" class="overlay">Expand</button> </module-codeblock> <h5 id="parameters"> <a name="parameters" class="anchor" href="#parameters"> <span class="permalink">🔗</span> <span class="title">Parameters</span> </a> </h5> <h6 id="targetobject"> <a name="targetobject" class="anchor" href="#targetobject"> <span class="permalink">🔗</span> <span class="title">targetObject</span> </a> </h6> <p><code>object</code></p> <h6 id="constructoropt"> <a name="constructoropt" class="anchor" href="#constructoropt"> <span class="permalink">🔗</span> <span class="title">constructorOpt?</span> </a> </h6> <p><code>Function</code></p> <h5 id="returns"> <a name="returns" class="anchor" href="#returns"> <span class="permalink">🔗</span> <span class="title">Returns</span> </a> </h5> <p><code>void</code></p> <h5 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h5> <p><code>Error.captureStackTrace</code></p> <hr> <h3 id="iserror"> <a name="iserror" class="anchor" href="#iserror"> <span class="permalink">🔗</span> <span class="title">isError()</span> </a> </h3> <blockquote> <p><code>static</code> <strong>isError</strong>(<code>value</code>): <code>value is Error</code></p> </blockquote> <p>Defined in: node_modules/bun-types/globals.d.ts:980</p> <p>Check if a value is an instance of Error</p> <h4 id="parameters"> <a name="parameters" class="anchor" href="#parameters"> <span class="permalink">🔗</span> <span class="title">Parameters</span> </a> </h4> <h5 id="value"> <a name="value" class="anchor" href="#value"> <span class="permalink">🔗</span> <span class="title">value</span> </a> </h5> <p><code>unknown</code></p> <p>The value to check</p> <h4 id="returns"> <a name="returns" class="anchor" href="#returns"> <span class="permalink">🔗</span> <span class="title">Returns</span> </a> </h4> <p><code>value is Error</code></p> <p>True if the value is an instance of Error, false otherwise</p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.isError</code></p> <hr> <h3 id="preparestacktrace"> <a name="preparestacktrace" class="anchor" href="#preparestacktrace"> <span class="permalink">🔗</span> <span class="title">prepareStackTrace()</span> </a> </h3> <blockquote> <p><code>static</code> <strong>prepareStackTrace</strong>(<code>err</code>, <code>stackTraces</code>): <code>any</code></p> </blockquote> <p>Defined in: node_modules/@types/node/globals.d.ts:149</p> <h4 id="parameters"> <a name="parameters" class="anchor" href="#parameters"> <span class="permalink">🔗</span> <span class="title">Parameters</span> </a> </h4> <h5 id="err"> <a name="err" class="anchor" href="#err"> <span class="permalink">🔗</span> <span class="title">err</span> </a> </h5> <p><code>Error</code></p> <h5 id="stacktraces"> <a name="stacktraces" class="anchor" href="#stacktraces"> <span class="permalink">🔗</span> <span class="title">stackTraces</span> </a> </h5> <p><code>CallSite</code>[]</p> <h4 id="returns"> <a name="returns" class="anchor" href="#returns"> <span class="permalink">🔗</span> <span class="title">Returns</span> </a> </h4> <p><code>any</code></p> <h4 id="see"> <a name="see" class="anchor" href="#see"> <span class="permalink">🔗</span> <span class="title">See</span> </a> </h4> <p><a href="https://v8.dev/docs/stack-trace-api#customizing-stack-traces">https://v8.dev/docs/stack-trace-api#customizing-stack-traces</a></p> <h4 id="inherited-from"> <a name="inherited-from" class="anchor" href="#inherited-from"> <span class="permalink">🔗</span> <span class="title">Inherited from</span> </a> </h4> <p><code>Error.prepareStackTrace</code></p> </section></main> <footer class="content-grid"> <div class="content"> <h2 class="visually-hidden">Footer</h2> <p>© 2024 – 2025 Zeix AG</p> </div> </footer> </context-router> </body> </html>