npm - @mpen/jsxhtml - Versions diffs - 0.1.19 → 0.1.21 - Mend

@mpen/jsxhtml 0.1.19 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/custom-components.d.ts +2 -2
package/dev.d.ts +1 -0
package/escape.d.ts +1 -1
package/htmlspec/AnchorElement.d.ts +83 -0
package/htmlspec/GlobalAttributes.d.ts +286 -0
package/htmlspec/IntrinsicElements.d.ts +152 -1
package/index.cjs +1 -1
package/index.d.ts +2 -2
package/index.mjs +2 -2
package/jsx-dev-runtime.cjs +2 -1
package/jsx-dev-runtime.d.ts +2 -2
package/jsx-dev-runtime.mjs +3 -2
package/jsx-elements.d.ts +2 -2
package/{jsx-runtime-K1okUiXU.js → jsx-runtime-FjVmLblX.js} +17 -55
package/{jsx-runtime-fpN2EWm-.js → jsx-runtime-zSLyeHpr.js} +17 -55
package/jsx-runtime.cjs +1 -1
package/jsx-runtime.d.ts +3 -3
package/jsx-runtime.mjs +1 -1
package/{types.d.ts → jsx-types.d.ts} +10 -3
package/jsx.d.ts +2 -3
package/package.json +4 -1
package/render.d.ts +1 -1
package/styleObjectToString.d.ts +1 -1
package/util-types.d.ts +5 -0
package/util.d.ts +1 -1

package/custom-components.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { DocTypeProps, JsxComment, JsxDocType, JsxRawHtml } from './jsx-elements';
-import { CommonProps, StringChildren } from './types';
+import { AnyAttributes, StringChildren } from './jsx-types';
 /**
  * Unescaped HTML.
  */
@@ -15,7 +15,7 @@ export declare function DocType(props: DocTypeProps): JsxDocType;
 /**
  * `<!DOCTYPE html><html ...>{children}</html>`
  */
-export declare function HtmlDocument({ children, ...htmlAttrs }: CommonProps): import("./jsx-node").JsxNode;
+export declare function HtmlDocument({ children, ...htmlAttrs }: AnyAttributes): import("./jsx-node").JsxNode;
 /**
  * No output.
  */

package/dev.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1	+ /// <reference lib="dom" />
1 2	export {};

package/escape.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Attributes, AttributeValue, Stringable } from './types';
+import { Attributes, AttributeValue, Stringable } from './jsx-types';
 export declare function tagName(string: Stringable): string;
 export declare function attrName(string: Stringable): string;
 export declare function attrValue(value: Stringable): string;

package/htmlspec/AnchorElement.d.ts ADDED Viewed

@@ -0,0 +1,83 @@
+export type AnchorElement = {
+    /**
+     * Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:
+     *
+     *   - Without a value, the browser will suggest a filename/extension, generated from various sources:
+     *     - The `Content-Disposition` HTTP header
+     *     - The final segment in the URL path
+     *     - The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
+     *   - `filename`: defining a value suggests it as the filename. / and \ characters are converted to underscores
+     * (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if
+     * necessary.
+     */
+    download?: true | string;
+    /**
+     * The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme
+     * supported by browsers:
+     *
+     *   - Sections of a page with document fragments
+     *   - Specific text portions with text fragments
+     *   - Pieces of media files with media fragments
+     *   - Telephone numbers with tel: URLs
+     *   - Email addresses with mailto: URLs
+     *   - SMS text messages with sms: URLs
+     *   - While web browsers may not support other URL schemes, websites can with registerProtocolHandler()
+     */
+    href?: string;
+    /**
+     * Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the
+     * global lang attribute.
+     */
+    hreflang?: string;
+    /**
+     * A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body
+     * PING to the URLs. Typically for tracking.
+     */
+    ping?: string;
+    /**
+     * How much of the referrer to send when following the link.
+     */
+    referrerpolicy?: ReferrerPolicy | string;
+    /**
+     * The relationship of the linked URL as space-separated link types.
+     */
+    rel?: string;
+    /**
+     * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    /**
+     * Hints at the linked URL's format with a MIME type. No built-in functionality.
+     */
+    type?: string;
+    /**
+     * @deprecated
+     */
+    charset?: string;
+    /**
+     * @deprecated
+     */
+    coords?: string;
+    /**
+     * @deprecated
+     */
+    name?: string;
+    /**
+     * @deprecated
+     */
+    rev?: string;
+    /**
+     * @deprecated
+     */
+    shape?: string;
+};
+export declare const enum ReferrerPolicy {
+    NoReferrer = "no-referrer",
+    NoReferrerWhenDowngrade = "no-referrer-when-downgrade",
+    Origin = "origin",
+    OriginWhenCrossOrigin = "origin-when-cross-origin",
+    SameOrigin = "same-origin",
+    StrictOrigin = "strict-origin",
+    StrictOriginWhenCrossOrigin = "strict-origin-when-cross-origin",
+    UnsafeUrl = "unsafe-url"
+}

package/htmlspec/GlobalAttributes.d.ts ADDED Viewed

@@ -0,0 +1,286 @@
+/// <reference lib="dom" />
+export type StandardGlobalAttributes = {
+    /**
+     * Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a
+     * space-separated list of characters. The browser should use the first one that exists on the computer keyboard
+     * layout.
+     */
+    accesskey?: string;
+    /**
+     * Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can
+     * have the following values:
+     *
+     * - `off` or `none`, no autocapitalization is applied (all letters default to lowercase)
+     * - `on` or `sentences`, the first letter of each sentence defaults to a capital letter; all other letters default
+     * to lowercase
+     * - `words`, the first letter of each word defaults to a capital letter; all other letters default to lowercase
+     * - `characters`, all letters should default to uppercase
+     */
+    autocapitalize?: string;
+    /**
+     * Indicates that an element is to be focused on page load, or as soon as the <dialog> it is part of is displayed.
+     * This attribute is a boolean, initially false.
+     */
+    autofocus?: string;
+    /**
+     * A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access
+     * specific elements via the class selectors or functions like the method Document.getElementsByClassName().
+     */
+    class?: string;
+    /**
+     * An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies
+     * its widget to allow editing. The attribute must take one of the following values:
+     *
+     * - `true` or the empty string, which indicates that the element must be editable;
+     * - `false`, which indicates that the element must not be editable.
+     */
+    contenteditable?: string;
+    /**
+     * The id of a `<menu>` to use as the contextual menu for this element.
+     *
+     * @deprecated
+     */
+    contextmenu?: string;
+    /**
+     * Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged
+     * between the HTML and its DOM representation that may be used by scripts. All such custom data are available via
+     * the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access
+     * to them.
+     */
+    [data: `data-${string}`]: string;
+    /**
+     * An enumerated attribute indicating the directionality of the element's text. It can have the following values:
+     *
+     * - `ltr`, which means left to right and is to be used for languages that are written from the left to the right
+     * (like English);
+     * - `rtl`, which means right to left and is to be used for languages that are written from the right to the left
+     * (like Arabic);
+     * - `auto`, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the
+     * element until it finds a character with a strong directionality, then it applies that directionality to the
+     * whole element.
+     */
+    dir?: string;
+    /**
+     * An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have
+     * the following values:
+     *
+     * - `true`, which indicates that the element may be dragged
+     * - `false`, which indicates that the element may not be dragged.
+     */
+    draggable?: string;
+    /**
+     * Hints what action label (or icon) to present for the enter key on virtual keyboards.
+     */
+    enterkeyhint?: string;
+    /**
+     * Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
+     * @experimental
+     */
+    exportparts?: string;
+    /**
+     * An enumerated attribute indicating that the element is not yet, or is no longer, relevant. For example, it can
+     * be used to hide elements of the page that can't be used until the login process has been completed. The browser
+     * won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
+     */
+    hidden?: boolean | 'hidden' | 'until-found';
+    /**
+     * Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the
+     * element when linking (using a fragment identifier), scripting, or styling (with CSS).
+     */
+    id?: string;
+    /**
+     * A boolean value that makes the browser disregard user input events for the element. Useful when click events are
+     * present.
+     */
+    inert?: boolean;
+    /**
+     * Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or
+     * its contents. Used primarily on <input> elements, but is usable on any element while in contenteditable mode.
+     */
+    inputmode?: InputMode | string;
+    /**
+     * Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see
+     * Using custom elements for more details).
+     */
+    is?: string;
+    /**
+     * [Microdata](https://html.spec.whatwg.org/multipage/microdata.html#microdata)
+     *
+     * The unique, global identifier of an item.
+     */
+    itemid?: string;
+    /**
+     * [Microdata](https://html.spec.whatwg.org/multipage/microdata.html#microdata)
+     *
+     * Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an
+     * itemprop consists of a name and value pair.
+     */
+    itemprop?: string;
+    /**
+     * [Microdata](https://html.spec.whatwg.org/multipage/microdata.html#microdata)
+     *
+     * Properties that are not descendants of an element with the itemscope attribute can be associated with the item
+     * using an itemref. It provides a list of element ids (not itemids) with additional properties elsewhere in the
+     * document.
+     */
+    itemref?: string;
+    /**
+     * [Microdata](https://html.spec.whatwg.org/multipage/microdata.html#microdata)
+     *
+     * itemscope (usually) works along with itemtype to specify that the HTML contained in a block is about a
+     * particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype
+     * is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
+     */
+    itemscope?: string;
+    /**
+     * [Microdata](https://html.spec.whatwg.org/multipage/microdata.html#microdata)
+     *
+     * Specifies the URL of the vocabulary that will be used to define itemprops (item properties) in the data
+     * structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will
+     * be active.
+     */
+    itemtype?: string;
+    /**
+     * Helps define the language of an element: the language that non-editable elements are in, or the language that
+     * editable elements should be written in by the user. The attribute contains one "language tag" (made of
+     * hyphen-separated "language subtags") in the format defined in RFC 5646: Tags for Identifying Languages (also
+     * known as BCP 47). xml:lang has priority over it.
+     */
+    lang?: string;
+    /**
+     * A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or
+     * not a given fetch will be allowed to proceed.
+     */
+    nonce?: string;
+    /**
+     * A space-separated list of the part names of the element. Part names allows CSS to select and style specific
+     * elements in a shadow tree via the ::part pseudo-element.
+     */
+    part?: string;
+    /**
+     * Used to designate an element as a popover element (see Popover API). Popover elements are hidden via display:
+     * none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget
+     * attribute) or a HTMLElement.showPopover() call.
+     */
+    popover?: string;
+    /**
+     * An enumerated attribute defines whether the element may be checked for spelling errors. It may have the
+     * following values:
+     *
+     * - empty string or true, which indicates that the element should be, if possible, checked for spelling errors;
+     * - `false`, which indicates that the element should not be checked for spelling errors.
+     */
+    spellcheck?: string;
+    /**
+     * Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be
+     * defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing
+     * for quick styling, for example for testing purposes.
+     */
+    style?: string;
+    /**
+     * An integer attribute indicating if the element can take input focus (is focusable), if it should participate to
+     * sequential keyboard navigation, and if so, at what position. It can take several values:
+     *
+     * - a negative value means that the element should be focusable, but should not be reachable via sequential
+     * keyboard navigation;
+     * - 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its
+     * relative order is defined by the platform convention;
+     * - a positive value means that the element should be focusable and reachable via sequential keyboard navigation;
+     * the order in which the elements are focused is the increasing value of the tabindex. If several elements share
+     * the same tabindex, their relative order follows their relative positions in the document.
+     */
+    tabindex?: Numeric;
+    /**
+     * Contains a text representing advisory information related to the element it belongs to. Such information can
+     * typically, but not necessarily, be presented to the user as a tooltip.
+     */
+    title?: string;
+    /**
+     * An enumerated attribute that is used to specify whether an element's attribute values and the values of its Text
+     * node children are to be translated when the page is localized, or whether to leave them unchanged. It can have
+     * the following values:
+     *
+     * - empty string or yes, which indicates that the element will be translated.
+     * - no, which indicates that the element will not be translated.
+     */
+    translate?: true | 'yes' | 'no';
+    /**
+     * An enumerated attribute used to control the on-screen virtual keyboard behavior on devices such as tablets,
+     * mobile phones, or other devices where a hardware keyboard may not be available for elements that also uses the
+     * contenteditable attribute.
+     *
+     * - `auto` or an empty string, which automatically shows the virtual keyboard when the element is focused or
+     * tapped.
+     * - `manual`, which decouples focus and tap on the element from the virtual keyboard's state.
+     */
+    virtualkeyboardpolicy?: true | 'auto' | 'manual';
+};
+export type Numeric = number | `${number}`;
+export declare const enum InputMode {
+    /**
+     * No virtual keyboard. For when the page implements its own keyboard input control.
+     */
+    None = "none",
+    /**
+     * Standard input keyboard for the user's current locale.
+     */
+    Text = "text",
+    /**
+     * Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically .
+     * or ,). Devices may or may not show a minus key (-).
+     */
+    Decimal = "decimal",
+    /**
+     * Numeric input keyboard, but only requires the digits 0–9. Devices may or may not show a minus key.
+     */
+    Numeric = "numeric",
+    /**
+     * A telephone keypad input, including the digits 0–9, the asterisk (*), and the pound (#) key. Inputs that
+     * *require* a telephone number should typically use <input type="tel"> instead.
+     */
+    Tel = "tel",
+    /**
+     * A virtual keyboard optimized for search input. For instance, the return/submit key may be labeled "Search",
+     * along with possible other optimizations. Inputs that require a search query should typically use <input
+     * type="search"> instead.
+     */
+    Search = "search",
+    /**
+     * A virtual keyboard optimized for entering email addresses. Typically includes the @character as well as other
+     * optimizations. Inputs that require email addresses should typically use <input type="email"> instead.
+     */
+    Email = "email",
+    /**
+     * A keypad optimized for entering URLs. This may have the / key more prominent, for example. Enhanced features
+     * could include history access and so on. Inputs that require a URL should typically use <input type="url">
+     * instead.
+     */
+    Url = "url"
+}
+export type AriaAttributes = {
+    /**
+     * Roles define the semantic meaning of content, allowing screen readers and other tools to present and support
+     * interaction with an object in a way that is consistent with user expectations of that type of object. roles are
+     * added to HTML elements using role="role_type", where role_type is the name of a role in the ARIA specification.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+     */
+    role?: string;
+    [aria: `aria-${string}`]: string;
+};
+export type XmlAttributes = {
+    /**
+     * @deprecated
+     */
+    'xml:lang': string;
+    /**
+     * @deprecated
+     */
+    'xml:base': string;
+};
+export type GlobalEventHandlers = {
+    [evt in EventHandlerNames]?: string | ((this: HTMLElement) => void);
+};
+export type AllGlobalAttributes = StandardGlobalAttributes | AriaAttributes | GlobalEventHandlers;
+type EventHandlerNames = 'onauxclick' | 'onbeforeinput' | 'onbeforematch' | 'onbeforetoggle' | 'onblur' | 'oncancel' | 'oncanplay' | 'oncanplaythrough' | 'onchange' | 'onclick' | 'onclose' | 'oncontextlost' | 'oncontextmenu' | 'oncontextrestored' | 'oncopy' | 'oncuechange' | 'oncut' | 'ondblclick' | 'ondrag' | 'ondragend' | 'ondragenter' | 'ondragleave' | 'ondragover' | 'ondragstart' | 'ondrop' | 'ondurationchange' | 'onemptied' | 'onended' | 'onerror' | 'onfocus' | 'onformdata' | 'oninput' | 'oninvalid' | 'onkeydown' | 'onkeypress' | 'onkeyup' | 'onload' | 'onloadeddata' | 'onloadedmetadata' | 'onloadstart' | 'onmousedown' | 'onmouseenter' | 'onmouseleave' | 'onmousemove' | 'onmouseout' | 'onmouseover' | 'onmouseup' | 'onpaste' | 'onpause' | 'onplay' | 'onplaying' | 'onprogress' | 'onratechange' | 'onreset' | 'onresize' | 'onscroll' | 'onscrollend' | 'onsecuritypolicyviolation' | 'onseeked' | 'onseeking' | 'onselect' | 'onslotchange' | 'onstalled' | 'onsubmit' | 'onsuspend' | 'ontimeupdate' | 'ontoggle' | 'onvolumechange' | 'onwaiting' | 'onwheel';
+export {};

package/htmlspec/IntrinsicElements.d.ts CHANGED Viewed

@@ -1 +1,152 @@
-export type HtmlElements = 'a' | 'abbr' | 'acronym' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'big' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'center' | 'cite' | 'code' | 'col' | 'colgroup' | 'content' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'dir' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'font' | 'footer' | 'form' | 'frame' | 'frameset' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'image' | 'img' | 'input' | 'ins' | 'kbd' | 'keygen' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'marquee' | 'menu' | 'menuitem' | 'meta' | 'meter' | 'nav' | 'nobr' | 'noembed' | 'noframes' | 'noscript' | 'object' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'param' | 'picture' | 'plaintext' | 'portal' | 'pre' | 'progress' | 'q' | 'rb' | 'rp' | 'rt' | 'rtc' | 'ruby' | 's' | 'samp' | 'script' | 'search' | 'section' | 'select' | 'shadow' | 'slot' | 'small' | 'source' | 'span' | 'strike' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'tt' | 'u' | 'ul' | 'var' | 'video' | 'wbr' | 'xmp';
+import { AnyAttributes, CommonProps } from '../jsx-types';
+import { AnchorElement } from './AnchorElement';
+export type IntrinsicElements = {
+    /**
+     * The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files,
+     * email addresses, locations in the same page, or anything else a URL can address.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+     */
+    a: AnchorElement & CommonProps;
+    abbr: AnyAttributes;
+    acronym: AnyAttributes;
+    address: AnyAttributes;
+    area: AnyAttributes;
+    article: AnyAttributes;
+    aside: AnyAttributes;
+    audio: AnyAttributes;
+    b: AnyAttributes;
+    base: AnyAttributes;
+    bdi: AnyAttributes;
+    bdo: AnyAttributes;
+    big: AnyAttributes;
+    blockquote: AnyAttributes;
+    body: AnyAttributes;
+    br: AnyAttributes;
+    button: AnyAttributes;
+    canvas: AnyAttributes;
+    caption: AnyAttributes;
+    center: AnyAttributes;
+    cite: AnyAttributes;
+    code: AnyAttributes;
+    col: AnyAttributes;
+    colgroup: AnyAttributes;
+    content: AnyAttributes;
+    data: AnyAttributes;
+    datalist: AnyAttributes;
+    dd: AnyAttributes;
+    del: AnyAttributes;
+    details: AnyAttributes;
+    dfn: AnyAttributes;
+    dialog: AnyAttributes;
+    dir: AnyAttributes;
+    div: AnyAttributes;
+    dl: AnyAttributes;
+    dt: AnyAttributes;
+    em: AnyAttributes;
+    embed: AnyAttributes;
+    fieldset: AnyAttributes;
+    figcaption: AnyAttributes;
+    figure: AnyAttributes;
+    font: AnyAttributes;
+    footer: AnyAttributes;
+    form: AnyAttributes;
+    frame: AnyAttributes;
+    frameset: AnyAttributes;
+    h1: AnyAttributes;
+    h2: AnyAttributes;
+    h3: AnyAttributes;
+    h4: AnyAttributes;
+    h5: AnyAttributes;
+    h6: AnyAttributes;
+    head: AnyAttributes;
+    header: AnyAttributes;
+    hgroup: AnyAttributes;
+    hr: AnyAttributes;
+    html: AnyAttributes;
+    i: AnyAttributes;
+    iframe: AnyAttributes;
+    image: AnyAttributes;
+    img: AnyAttributes;
+    /**
+     * The `<input>` HTML element is used to create interactive controls for web-based forms in order to accept data
+     * from the user; a wide variety of types of input data and control widgets are available, depending on the device
+     * and user agent. The `<input>` element is one of the most powerful and complex in all of HTML due to the sheer
+     * number of combinations of input types and attributes.
+     */
+    input: AnyAttributes;
+    ins: AnyAttributes;
+    kbd: AnyAttributes;
+    keygen: AnyAttributes;
+    label: AnyAttributes;
+    legend: AnyAttributes;
+    li: AnyAttributes;
+    link: AnyAttributes;
+    main: AnyAttributes;
+    map: AnyAttributes;
+    mark: AnyAttributes;
+    marquee: AnyAttributes;
+    menu: AnyAttributes;
+    menuitem: AnyAttributes;
+    meta: AnyAttributes;
+    meter: AnyAttributes;
+    nav: AnyAttributes;
+    nobr: AnyAttributes;
+    noembed: AnyAttributes;
+    noframes: AnyAttributes;
+    noscript: AnyAttributes;
+    object: AnyAttributes;
+    ol: AnyAttributes;
+    optgroup: AnyAttributes;
+    option: AnyAttributes;
+    output: AnyAttributes;
+    p: AnyAttributes;
+    param: AnyAttributes;
+    picture: AnyAttributes;
+    plaintext: AnyAttributes;
+    portal: AnyAttributes;
+    pre: AnyAttributes;
+    progress: AnyAttributes;
+    q: AnyAttributes;
+    rb: AnyAttributes;
+    rp: AnyAttributes;
+    rt: AnyAttributes;
+    rtc: AnyAttributes;
+    ruby: AnyAttributes;
+    s: AnyAttributes;
+    samp: AnyAttributes;
+    script: AnyAttributes;
+    search: AnyAttributes;
+    section: AnyAttributes;
+    select: AnyAttributes;
+    shadow: AnyAttributes;
+    slot: AnyAttributes;
+    small: AnyAttributes;
+    source: AnyAttributes;
+    span: AnyAttributes;
+    strike: AnyAttributes;
+    strong: AnyAttributes;
+    style: AnyAttributes;
+    sub: AnyAttributes;
+    summary: AnyAttributes;
+    sup: AnyAttributes;
+    table: AnyAttributes;
+    tbody: AnyAttributes;
+    td: AnyAttributes;
+    template: AnyAttributes;
+    textarea: AnyAttributes;
+    tfoot: AnyAttributes;
+    th: AnyAttributes;
+    thead: AnyAttributes;
+    time: AnyAttributes;
+    title: AnyAttributes;
+    tr: AnyAttributes;
+    track: AnyAttributes;
+    tt: AnyAttributes;
+    u: AnyAttributes;
+    ul: AnyAttributes;
+    var: AnyAttributes;
+    video: AnyAttributes;
+    wbr: AnyAttributes;
+    xmp: AnyAttributes;
+};

package/index.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
-var jsxRuntime = require("./jsx-runtime-fpN2EWm-.js");
+var jsxRuntime = require("./jsx-runtime-zSLyeHpr.js");
 function RawHtml({children}) {
     return new jsxRuntime.JsxRawHtml(jsxRuntime.flattenString(children));

package/index.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ export * from './jsx-elements';
 export * from './custom-components';
 export * from './elysia-plugin';
 export { isJsxNode } from './jsx-node';
-import type { CommonProps, JsxComponent, JsxRenderable } from './types';
+import type { AnyAttributes, JsxComponent, JsxRenderable } from './jsx-types';
 import { Fragment as _Fragment } from './jsx-runtime';
 declare namespace React {
-    function createElement(tag: string | JsxComponent, props: CommonProps, ...children: JsxRenderable[]): import("./jsx-node").JsxNode;
+    function createElement(tag: string | JsxComponent, props: AnyAttributes, ...children: JsxRenderable[]): import("./jsx-node").JsxNode;
     const Fragment: typeof _Fragment;
 }
 export default React;

package/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { J as JsxRawHtml, f as flattenString, E as EMPTY, a as JsxDocType, j as jsxs, b as jsx, F as Fragment, i as isJsxNode } from "./jsx-runtime-K1okUiXU.js";
+import { J as JsxRawHtml, f as flattenString, E as EMPTY, a as JsxDocType, j as jsxs, b as jsx, F as Fragment, i as isJsxNode } from "./jsx-runtime-FjVmLblX.js";
-export { d as JsxComment, c as JsxElement, e as JsxEmpty, g as JsxFragment } from "./jsx-runtime-K1okUiXU.js";
+export { d as JsxComment, c as JsxElement, e as JsxEmpty, g as JsxFragment } from "./jsx-runtime-FjVmLblX.js";
 function RawHtml({children}) {
     return new JsxRawHtml(flattenString(children));

package/jsx-dev-runtime.cjs CHANGED Viewed

@@ -1,9 +1,10 @@
 "use strict";
-var jsxRuntime = require("./jsx-runtime-fpN2EWm-.js");
+var jsxRuntime = require("./jsx-runtime-zSLyeHpr.js");
 function jsxDEV(tag, props, key, isStaticChildren, source, self) {
     let node = jsxRuntime.jsx(...arguments);
+    if (process.env.JSXHTML_DEV) return node;
     if (jsxRuntime.isJsxComponent(tag) && !(node instanceof jsxRuntime.JsxComment)) {
         const name = tag.displayName ?? tag.name ?? "Unknown";
         node = new jsxRuntime.JsxFragment([ new jsxRuntime.JsxComment(`<${name}>`), node, new jsxRuntime.JsxComment(`</${name}>`) ]);

package/jsx-dev-runtime.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { CommonProps, JsxComponent } from './types';
+import type { AnyAttributes, JsxComponent } from './jsx-types';
 import { JsxNode } from './jsx-node';
 export { jsx, Fragment } from './jsx-runtime';
-export declare function jsxDEV(tag: string | JsxComponent, props: CommonProps, key: unknown, isStaticChildren: unknown, source: unknown, self: unknown): JsxNode;
+export declare function jsxDEV(tag: string | JsxComponent, props: AnyAttributes, key: unknown, isStaticChildren: unknown, source: unknown, self: unknown): JsxNode;

package/jsx-dev-runtime.mjs CHANGED Viewed

@@ -1,9 +1,10 @@
-import { b as jsx, h as isJsxComponent, d as JsxComment, g as JsxFragment } from "./jsx-runtime-K1okUiXU.js";
+import { b as jsx, h as isJsxComponent, d as JsxComment, g as JsxFragment } from "./jsx-runtime-FjVmLblX.js";
-export { F as Fragment } from "./jsx-runtime-K1okUiXU.js";
+export { F as Fragment } from "./jsx-runtime-FjVmLblX.js";
 function jsxDEV(tag, props, key, isStaticChildren, source, self) {
     let node = jsx(...arguments);
+    if (process.env.JSXHTML_DEV) return node;
     if (isJsxComponent(tag) && !(node instanceof JsxComment)) {
         const name = tag.displayName ?? tag.name ?? "Unknown";
         node = new JsxFragment([ new JsxComment(`<${name}>`), node, new JsxComment(`</${name}>`) ]);

package/jsx-elements.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { CommonProps, JsxChildren } from './types';
+import { AnyAttributes, JsxChildren } from './jsx-types';
 import { JsxNode } from './jsx-node';
 export declare class JsxElement extends JsxNode {
     private readonly tag;
     private readonly props;
-    constructor(tag: string, props: CommonProps);
+    constructor(tag: string, props: AnyAttributes);
     get [Symbol.toStringTag](): string;
     toString(): string;
 }

package/{jsx-runtime-K1okUiXU.js → jsx-runtime-FjVmLblX.js} RENAMED Viewed

@@ -1316,62 +1316,22 @@ const entityMap = {
     ﬄ: "ffllig"
 };
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-var classnames = {
-    exports: {}
-};
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/ (function(module) {
-    (function() {
-        var hasOwn = {}.hasOwnProperty;
-        function classNames() {
-            var classes = [];
-            for (var i = 0; i < arguments.length; i++) {
-                var arg = arguments[i];
-                if (!arg) continue;
-                var argType = typeof arg;
-                if (argType === "string" || argType === "number") {
-                    classes.push(arg);
-                } else if (Array.isArray(arg)) {
-                    if (arg.length) {
-                        var inner = classNames.apply(null, arg);
-                        if (inner) {
-                            classes.push(inner);
-                        }
-                    }
-                } else if (argType === "object") {
-                    if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-                        classes.push(arg.toString());
-                        continue;
-                    }
-                    for (var key in arg) {
-                        if (hasOwn.call(arg, key) && arg[key]) {
-                            classes.push(key);
-                        }
-                    }
-                }
+function cc(names) {
+    if (typeof names === "string" || typeof names === "number") return "" + names;
+    let out = "";
+    if (Array.isArray(names)) {
+        for (let i = 0, tmp; i < names.length; i++) {
+            if ((tmp = cc(names[i])) !== "") {
+                out += (out && " ") + tmp;
             }
-            return classes.join(" ");
         }
-        if (module.exports) {
-            classNames.default = classNames;
-            module.exports = classNames;
-        } else {
-            window.classNames = classNames;
+    } else {
+        for (let k in names) {
+            if (names[k]) out += (out && " ") + k;
         }
-    })();
-})(classnames);
-var classnamesExports = classnames.exports;
-var classNames = getDefaultExportFromCjs(classnamesExports);
+    }
+    return out;
+}
 function isFunction(obj) {
     return typeof obj === "function";
@@ -1496,7 +1456,7 @@ function attrKvPair(rawAttr, rawVal) {
         return null;
     }
     if (rawAttr === "class" && !isString_1(rawVal)) {
-        rawVal = classNames(rawVal);
+        rawVal = cc(rawVal);
     }
     if (rawAttr === "style" && isPlainObject_1(rawVal)) {
         rawVal = styleObjectToString(rawVal);
@@ -1718,7 +1678,9 @@ function jsx(tag, props, key, isStaticChildren, source, self) {
     return new JsxElement(tag, props);
 }
-const jsxs = jsx;
+function jsxs(...args) {
+    return new JsxRawHtml(jsx(...args).toString());
+}
 function Fragment({children}) {
     return new JsxFragment(children);

package/{jsx-runtime-fpN2EWm-.js → jsx-runtime-zSLyeHpr.js} RENAMED Viewed

@@ -1318,62 +1318,22 @@ const entityMap = {
     ﬄ: "ffllig"
 };
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-var classnames = {
-    exports: {}
-};
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/ (function(module) {
-    (function() {
-        var hasOwn = {}.hasOwnProperty;
-        function classNames() {
-            var classes = [];
-            for (var i = 0; i < arguments.length; i++) {
-                var arg = arguments[i];
-                if (!arg) continue;
-                var argType = typeof arg;
-                if (argType === "string" || argType === "number") {
-                    classes.push(arg);
-                } else if (Array.isArray(arg)) {
-                    if (arg.length) {
-                        var inner = classNames.apply(null, arg);
-                        if (inner) {
-                            classes.push(inner);
-                        }
-                    }
-                } else if (argType === "object") {
-                    if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-                        classes.push(arg.toString());
-                        continue;
-                    }
-                    for (var key in arg) {
-                        if (hasOwn.call(arg, key) && arg[key]) {
-                            classes.push(key);
-                        }
-                    }
-                }
+function cc(names) {
+    if (typeof names === "string" || typeof names === "number") return "" + names;
+    let out = "";
+    if (Array.isArray(names)) {
+        for (let i = 0, tmp; i < names.length; i++) {
+            if ((tmp = cc(names[i])) !== "") {
+                out += (out && " ") + tmp;
             }
-            return classes.join(" ");
         }
-        if (module.exports) {
-            classNames.default = classNames;
-            module.exports = classNames;
-        } else {
-            window.classNames = classNames;
+    } else {
+        for (let k in names) {
+            if (names[k]) out += (out && " ") + k;
         }
-    })();
-})(classnames);
-var classnamesExports = classnames.exports;
-var classNames = getDefaultExportFromCjs(classnamesExports);
+    }
+    return out;
+}
 function isFunction(obj) {
     return typeof obj === "function";
@@ -1498,7 +1458,7 @@ function attrKvPair(rawAttr, rawVal) {
         return null;
     }
     if (rawAttr === "class" && !isString_1(rawVal)) {
-        rawVal = classNames(rawVal);
+        rawVal = cc(rawVal);
     }
     if (rawAttr === "style" && isPlainObject_1(rawVal)) {
         rawVal = styleObjectToString(rawVal);
@@ -1720,7 +1680,9 @@ function jsx(tag, props, key, isStaticChildren, source, self) {
     return new JsxElement(tag, props);
 }
-const jsxs = jsx;
+function jsxs(...args) {
+    return new JsxRawHtml(jsx(...args).toString());
+}
 function Fragment({children}) {
     return new JsxFragment(children);

package/jsx-runtime.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
-var jsxRuntime = require("./jsx-runtime-fpN2EWm-.js");
+var jsxRuntime = require("./jsx-runtime-zSLyeHpr.js");
 exports.Fragment = jsxRuntime.Fragment;

package/jsx-runtime.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { JsxComponent, CommonProps, ChildrenOnly } from './types';
+import { JsxComponent, AnyAttributes, ChildrenOnly } from './jsx-types';
 import { JsxFragment } from './jsx-elements';
 import { JsxNode } from './jsx-node';
-export declare function jsx(tag: string | JsxComponent, props: CommonProps, key?: unknown, isStaticChildren?: unknown, source?: unknown, self?: unknown): JsxNode;
-export declare const jsxs: typeof jsx;
+export declare function jsx(tag: string | JsxComponent, props: AnyAttributes, key?: unknown, isStaticChildren?: unknown, source?: unknown, self?: unknown): JsxNode;
+export declare function jsxs(...args: Parameters<typeof jsx>): JsxNode;
 export declare function Fragment({ children }: ChildrenOnly): JsxFragment;

package/jsx-runtime.mjs CHANGED Viewed

	@@ -1 +1 @@
1	- export { F as Fragment, b as jsx, j as jsxs } from "./jsx-runtime-~~K1okUiXU~~.js";
1	+ export { F as Fragment, b as jsx, j as jsxs } from "./jsx-runtime-FjVmLblX.js";

package/{types.d.ts → jsx-types.d.ts} RENAMED Viewed

@@ -1,9 +1,11 @@
 import { JsxNode } from './jsx-node';
+import { AllGlobalAttributes } from './htmlspec/GlobalAttributes';
+import { Override } from './util-types';
 export interface Stringable {
     toString(): string;
 }
 export type PlainObject = Record<PropertyKey, unknown>;
-export type ClassNames = import('classnames').Argument;
+export type ClassNames = import('classcat').Class;
 export type StyleObject = import('csstype').Properties | import('csstype').PropertiesHyphen;
 export type AttributeValue = Stringable | StyleObject | ClassNames;
 export type AttrKvPair = [name: string, value: AttributeValue];
@@ -17,12 +19,17 @@ export type HtmlSafe = {
 };
 export type JsxRenderable = any;
 export type JsxChildren = JsxRenderable | Iterable<JsxRenderable>;
-export type CommonProps = Omit<AttrObj, 'children' | 'style' | 'class'> & {
+export type SpecialProps = {
     children?: JsxChildren;
     style?: StyleObject | string;
+    /**
+     * CSS class.
+     */
     class?: ClassNames;
 };
-export type JsxComponent<P = CommonProps> = ((props: P) => JsxNode) & {
+export type CommonProps = Override<AllGlobalAttributes, SpecialProps>;
+export type AnyAttributes = Override<AttrObj, CommonProps>;
+export type JsxComponent<P = AnyAttributes> = ((props: P) => JsxNode) & {
     displayName?: string;
     name?: string;
 };

package/jsx.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
+/// <reference no-default-lib="true"/>
 declare namespace JSX {
-    type IntrinsicElements = {
-        [_ in import('./htmlspec/IntrinsicElements').HtmlElements]: import('./types').CommonProps;
-    };
+    type IntrinsicElements = import('./htmlspec/IntrinsicElements').IntrinsicElements;
     type Element = import('./jsx-node').JsxNode;
     interface ElementChildrenAttribute {
         children: unknown;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mpen/jsxhtml",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "packageManager": "bun@1.0.7",
   "main": "./index.cjs",
   "module": "./index.mjs",
@@ -25,5 +25,8 @@
   ],
   "optionalDependencies": {
     "elysia": ">=0.7.21"
+  },
+  "dependencies": {
+    "classcat": "^5.0.4"
   }
 }

package/render.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { JsxRenderable } from './types';
+import { JsxRenderable } from './jsx-types';
 export declare function render(el: JsxRenderable): string;

package/styleObjectToString.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { StyleObject } from './types';
+import { StyleObject } from './jsx-types';
 /**
  * Serializes a mapping of style properties for use as inline styles:
  *

package/util-types.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+/**
+ * Same as a string type but allows autocompletion of literal values
+ */
+export type AnyString = string & {};
+export type Override<Base, Extension, DeleteKeys extends PropertyKey = never> = Omit<Base, keyof Extension | DeleteKeys> & Extension;

package/util.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FlatString, JsxChildren, JsxComponent } from './types';
+import { FlatString, JsxChildren, JsxComponent } from './jsx-types';
 export declare function mapIter<In, Out>(iterable: Iterable<In>, cb: (el: In, i: number) => Out): Out[];
 export declare function getStringTag(value: any): string;
 export declare function isEmptyChildren(children: JsxChildren): boolean;