typed-html - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

package.json

 {
   "name": "typed-html",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "src/elements.js",

readme.md

@@ -35,3 +35,2 @@ [![Build Status](https://travis-ci.org/nicojs/typed-html.svg?branch=master)](https://travis-ci.org/nicojs/typed-html)
     <li>item</li>
-    <li>item2</li>
 </ul>
@@ -56,3 +55,2 @@ <button onclick="handleClick">
     "compilerOptions": {
-        // ...
         "jsx": "react",
@@ -64,3 +62,3 @@ "jsxFactory": "elements.createElement"
 
-Although we're configuring the compiler to use [React](https://facebook.github.io/react), this is not used at all.
+Although we're configuring the compiler to use [React](https://facebook.github.io/react), this is not what is being used.
 Instead, we redirect all jsx element to typed-html's `elements.createElement`.
@@ -80,2 +78,9 @@
 
+However, the following piece of code will **NOT** compile:
+
+```typescript
+<foo></foo>; // => Error: Property 'foo' does not exist on type 'JSX.IntrinsicElements'.
+<a foo="bar"></a>; // => Error:  Property 'foo' does not exist on type 'HtmlAnchorTag'
+```
+
 ## Supported scenarios
@@ -90,3 +95,3 @@
 ```typescript
-<div>Random > 0.5: {Math.random()>.5 ? <strong>yes</strong> : 'no'}</div>
+<div>Random > 0.5: {Math.random() > .5 ? <strong>yes</strong> : 'no'}</div>
 ```
@@ -109,12 +114,12 @@
 function listItem(n: number) {
-        return <li>{n}</li>;
-    }
-    <ul>
-        {[1, 2].map(listItem)}
-    </ul>
+    return <li>{n}</li>;
+}
+<ul>
+    {[1, 2].map(listItem)}
+</ul>
 ```
 
-## Supported elements
+## Supported HTML
 
-All html5 elements and attributes are supported, except for the [svg](https://www.w3.org/TR/SVG/.
+All HTML elements and attributes are supported, except for the [svg](https://www.w3.org/TR/SVG/).
 
@@ -124,6 +129,41 @@ * Supported html elements: https://dev.w3.org/html5/html-author/#the-elements
 
-Missing an element? Please create an issue or a PR to add it. It's easy to add.
+Missing an element or attribute? Please create an issue or a PR to add it. It's easy to add.
 
-### Add custom elements
+### Void elements
 
+[Void elements](https://www.w3.org/TR/html51/syntax.html#void-elements) (elements without closing tags) are supported, however you should close them in TypeScript.
+
+```typescript
+const img = <img href="/foo/bar.png">; // => Error! JSX element 'img' has no corresponding closing tag.
+``` 
+
+In the example above, closing the image tag is required for valid TSX code:
+
+```typescript
+const img = <img href="/foo/bar.png"></img>; // => '<img href="/foo/bar.png">'
+```
+
+See [this code](https://github.com/nicojs/typed-html/blob/master/src/elements.tsx#L68) for a list of supported void elements.
+
+### Attribute types
+
+All HTML attributes support a string value, however some attributes also support a [`number`](https://developer.mozilla.org/en-US/docs/Glossary/Number) or [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype) type:
+
+```typescript
+<meter value={1} min={0} max={5} low={1} high={4} optimum={3}></meter>; 
+// => <meter value="1" min="0" max="5" low="1" high="4" optimum="3"></meter>
+<ol start={3}></ol>;
+<progress value={3} max={4}></progress>;
+<td colspan={3} rowspan={3}></td>;
+<th colspan={3} rowspan={3}></th>;
+
+const date = new Date('1914-12-20T08:00');
+<time datetime={date}></time>; 
+// => <time datetime="1914-12-20T08:00:00.000Z"></time>
+<ins datetime={date}>updated</ins>;
+<del datetime={date}>old</del>;
+```
+
+## Custom elements
+
 You can add custom elements by adding them to the [intrinsic elements](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements) yourself:
@@ -160,6 +200,53 @@
 
-## How it works
+### Custom attributes
 
+Custom attribute names are already supported out-of-the-box for attributes with a dash (`-`) in the name. For example: 
+
+```typescript
+<button data-menu-item="3"></button>
+```
+
+### Transformation
+
+As a browser is case insensitive when it comes to element and attribute names, it is common practice to use [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles) for this. However `<custom-element></custom-element>` is not allowed in TypeScript. Therefore `typed-html` will transform `<customElement></customElement>` to `<custom-element></custom-element>`.
+
+This transformation also works for custom attributes you define on a custom element yourself. For example:
+
+```typescript
+<customElement aCustomAttr="value"></customElement>
+```
+
+Becomes
+
+```html
+<custom-element a-custom-attr="value"></custom-element>
+``` 
+
+## How this all works
+
 The way this works is by using TypeScript's jsx support, but not for jsx/react interoperability. Instead, it defines the *normal* html tags as `IntrinsicElements` in the JSX namespace.
 
 At runtime, the `elements.createElement` function is called for every html tag. It simply converts the given element to a string with minimal overhead.
+
+This:
+
+```typescript
+<ol start={2}>{[1, 2].map(i => <li>{i}</li>)}</ol>
+```
+
+Compiles to:
+
+```javascript
+elements.createElement("ol", { start: 2 }, [1, 2].map(function (li) { 
+    return elements.createElement("li", null, li); 
+}));
+```
+
+Which translates to:
+
+```html
+<ol start="2">
+    <li>1</li>
+    <li>2</li>
+</ol>
+```

src/elements.js

@@ -16,3 +16,6 @@ /// <reference path="./jsx/element-types.d.ts" />
     for (var i = 0; i < camelCased.length; i++) {
-        if (isUpper(camelCased, i)) {
+        var prevUpperCased = i > 0 ? isUpper(camelCased, i - 1) : true;
+        var currentUpperCased = isUpper(camelCased, i);
+        var nextUpperCased = i < camelCased.length - 1 ? isUpper(camelCased, i + 1) : true;
+        if (!prevUpperCased && currentUpperCased || currentUpperCased && !nextUpperCased) {
             kebabCased += '-';
@@ -19,0 +22,0 @@ kebabCased += camelCased[i].toLowerCase();

src/jsx/element-types.d.ts

@@ -5,3 +5,3 @@ declare namespace JSX {
 
-    interface HtmlElement {
+    interface HtmlTag {
         accesskey?: string;
@@ -21,3 +21,3 @@ class?: string;
 
-    interface HtmlAnchorElement extends HtmlElement {
+    interface HtmlAnchorTag extends HtmlTag {
         href?: string;
@@ -34,3 +34,3 @@ target?: string;
 
-    interface HtmlAreaElement extends HtmlElement {
+    interface HtmlAreaTag extends HtmlTag {
         alt?: string;
@@ -48,3 +48,3 @@ coords?: string;
 
-    interface HtmlAudioElement extends HtmlElement {
+    interface HtmlAudioTag extends HtmlTag {
         src?: string;
@@ -57,14 +57,14 @@ autobuffer?: string;
 
-    interface BaseElement extends HtmlElement {
+    interface BaseTag extends HtmlTag {
         href?: string;
         target?: string;
     }
-    interface HtmlQuoteElement extends HtmlElement {
+    interface HtmlQuoteTag extends HtmlTag {
         cite?: string;
     }
 
-    interface HtmlBodyElement extends HtmlElement {
+    interface HtmlBodyTag extends HtmlTag {
     }
 
-    interface HtmlButtonElement extends HtmlElement {
+    interface HtmlButtonTag extends HtmlTag {
         action?: string;
@@ -83,6 +83,6 @@ autofocus?: string;
 
-    interface HtmlDataListElement extends HtmlElement {
+    interface HtmlDataListTag extends HtmlTag {
     }
 
-    interface HtmlCanvasElement extends HtmlElement {
+    interface HtmlCanvasTag extends HtmlTag {
         width?: string;
@@ -92,16 +92,16 @@ height?: string;
 
-    interface HtmlTableColElement extends HtmlElement {
+    interface HtmlTableColTag extends HtmlTag {
         span?: string;
     }
 
-    interface HtmlTableSectionElement extends HtmlElement {
+    interface HtmlTableSectionTag extends HtmlTag {
     }
 
-    interface HtmlTableRowElement extends HtmlElement {
+    interface HtmlTableRowTag extends HtmlTag {
     }
 
-    interface DataElement extends HtmlElement {
+    interface DataTag extends HtmlTag {
         value?: string;
     }
-    interface HtmlEmbedElement extends HtmlElement {
+    interface HtmlEmbedTag extends HtmlTag {
         src?: string; type?: string; width?: string; height?: string;
@@ -111,3 +111,3 @@ [anything: string]: string | undefined;
 
-    interface HtmlFieldSetElement extends HtmlElement {
+    interface HtmlFieldSetTag extends HtmlTag {
         disabled?: string;
@@ -118,3 +118,3 @@ form?: string;
 
-    interface HtmlFormElement extends HtmlElement {
+    interface HtmlFormTag extends HtmlTag {
         acceptCharset?: string;
@@ -124,15 +124,15 @@ action?: string; autocomplete?: string; enctype?: string; method?: string; name?: string; novalidate?: string; target?: string;
 
-    interface HtmlHtmlElement extends HtmlElement {
+    interface HtmlHtmlTag extends HtmlTag {
         manifest?: string;
     }
 
-    interface HtmlIFrameElement extends HtmlElement {
+    interface HtmlIFrameTag extends HtmlTag {
         src?: string; srcdoc?: string; name?: string; sandbox?: string; seamless?: string; width?: string; height?: string;
     }
 
-    interface HtmlImageElement extends HtmlElement {
+    interface HtmlImageTag extends HtmlTag {
         alt?: string; src?: string; crossorigin?: string; usemap?: string; ismap?: string; width?: string; height?: string;
     }
 
-    interface HtmlInputElement extends HtmlElement {
+    interface HtmlInputTag extends HtmlTag {
         accept?: string;
@@ -169,3 +169,3 @@ action?: string;
 
-    interface HtmlModElement extends HtmlElement {
+    interface HtmlModTag extends HtmlTag {
         cite?: string;
@@ -175,23 +175,23 @@ datetime?: string | Date;
 
-    interface KeygenElement extends HtmlElement {
+    interface KeygenTag extends HtmlTag {
         autofocus?: string; challenge?: string; disabled?: string; form?: string; keytype?: string; name?: string;
     }
 
-    interface HtmlLabelElement extends HtmlElement {
+    interface HtmlLabelTag extends HtmlTag {
         form?: string; for?: string;
     }
 
-    interface HtmlLIElement extends HtmlElement {
+    interface HtmlLITag extends HtmlTag {
         value?: string | number;
     }
 
-    interface HtmlLinkElement extends HtmlElement {
+    interface HtmlLinkTag extends HtmlTag {
         href?: string; crossorigin?: string; rel?: string; media?: string; hreflang?: string; type?: string; sizes?: string;
     }
 
-    interface HtmlMapElement extends HtmlElement {
+    interface HtmlMapTag extends HtmlTag {
         name?: string;
     }
 
-    interface HtmlMetaElement extends HtmlElement {
+    interface HtmlMetaTag extends HtmlTag {
         name?: string;
@@ -203,3 +203,3 @@ httpEquiv?: string;
 
-    interface HtmlMeterElement extends HtmlElement {
+    interface HtmlMeterTag extends HtmlTag {
         value?: string | number;
@@ -213,31 +213,31 @@ min?: string | number;
 
-    interface HtmlObjectElement extends HtmlElement {
+    interface HtmlObjectTag extends HtmlTag {
         data?: string; type?: string; name?: string; usemap?: string; form?: string; width?: string; height?: string;
     }
 
-    interface HtmlOListElement extends HtmlElement {
+    interface HtmlOListTag extends HtmlTag {
         reversed?: string; start?: string | number;
     }
 
-    interface HtmlOptgroupElement extends HtmlElement {
+    interface HtmlOptgroupTag extends HtmlTag {
         disabled?: string; label?: string;
     }
 
-    interface HtmlOptionElement extends HtmlElement {
+    interface HtmlOptionTag extends HtmlTag {
         disabled?: string; label?: string; selected?: string; value?: string;
     }
 
-    interface HtmlOutputElement extends HtmlElement {
+    interface HtmlOutputTag extends HtmlTag {
         for?: string; form?: string; name?: string;
     }
 
-    interface HtmlParamElement extends HtmlElement {
+    interface HtmlParamTag extends HtmlTag {
         name?: string; value?: string;
     }
 
-    interface HtmlProgressElement extends HtmlElement {
+    interface HtmlProgressTag extends HtmlTag {
         value?: string | number; max?: string | number;
     }
 
-    interface HtmlCommandElement extends HtmlElement {
+    interface HtmlCommandTag extends HtmlTag {
         type?: string;
@@ -252,9 +252,9 @@ label?: string;
 
-    interface HtmlLegendElement extends HtmlElement { }
+    interface HtmlLegendTag extends HtmlTag { }
 
-    interface HtmlBrowserButtonElement extends HtmlElement {
+    interface HtmlBrowserButtonTag extends HtmlTag {
         type?: string;
     }
 
-    interface HtmlMenuElement extends HtmlElement {
+    interface HtmlMenuTag extends HtmlTag {
         type?: string;
@@ -264,46 +264,46 @@ label?: string;
 
-    interface HtmlScriptElement extends HtmlElement {
+    interface HtmlScriptTag extends HtmlTag {
         src?: string; type?: string; charset?: string; async?: string; defer?: string; crossorigin?: string; text?: string;
     }
 
-    interface HtmlDetailsElement extends HtmlElement {
+    interface HtmlDetailsTag extends HtmlTag {
         open?: string;
     }
 
-    interface HtmlSelectElement extends HtmlElement {
+    interface HtmlSelectTag extends HtmlTag {
         autofocus?: string; disabled?: string; form?: string; multiple?: string; name?: string; required?: string; size?: string;
     }
 
-    interface HtmlSourceElement extends HtmlElement {
+    interface HtmlSourceTag extends HtmlTag {
         src?: string; type?: string; media?: string;
     }
 
-    interface HtmlStyleElement extends HtmlElement {
+    interface HtmlStyleTag extends HtmlTag {
         media?: string; type?: string; disabled?: string; scoped?: string;
     }
 
-    interface HtmlTableElement extends HtmlElement {
+    interface HtmlTableTag extends HtmlTag {
     }
 
-    interface HtmlTableDataCellElement extends HtmlElement {
+    interface HtmlTableDataCellTag extends HtmlTag {
         colspan?: string | number; rowspan?: string | number; headers?: string;
     }
 
-    interface HtmlTextAreaElement extends HtmlElement {
+    interface HtmlTextAreaTag extends HtmlTag {
         autofocus?: string; cols?: string; dirname?: string; disabled?: string; form?: string; maxlength?: string; minlength?: string; name?: string; placeholder?: string; readonly?: string; required?: string; rows?: string; wrap?: string;
     }
 
-    interface HtmlTableHeaderCellElement extends HtmlElement {
+    interface HtmlTableHeaderCellTag extends HtmlTag {
         colspan?:string | number; rowspan?: string | number; headers?: string; scope?: string;
     }
 
-    interface HtmlTimeElement extends HtmlElement {
+    interface HtmlTimeTag extends HtmlTag {
         datetime?: string | Date;
     }
 
-    interface HtmlTrackElement extends HtmlElement {
+    interface HtmlTrackTag extends HtmlTag {
         default?: string; kind?: string; label?: string; src?: string; srclang?: string;
     }
 
-    interface HtmlVideoElement extends HtmlElement {
+    interface HtmlVideoTag extends HtmlTag {
         src?: string;
@@ -310,0 +310,0 @@ poster?: string;

src/jsx/events.d.ts

@@ -6,3 +6,3 @@ declare namespace JSX {
     // Only used in the <body> element to specify events triggered for a window object. 
-    interface HtmlBodyElement {
+    interface HtmlBodyTag {
         onafterprint?: string;
@@ -30,3 +30,3 @@ onbeforeprint?: string;
 
-    interface HtmlElement {
+    interface HtmlTag {
         oncontextmenu?: string;
@@ -66,9 +66,9 @@ onkeydown?: string;
     }
-    interface HtmlInputElement extends FormEvents {
+    interface HtmlInputTag extends FormEvents {
     }
 
-    interface HtmlFieldSetElement extends FormEvents {
+    interface HtmlFieldSetTag extends FormEvents {
     }
 
-    interface HtmlFormElement extends FormEvents {
+    interface HtmlFormTag extends FormEvents {
     }
@@ -103,7 +103,7 @@
     }
-    interface HtmlAudioElement extends MediaEvents { }
-    interface HtmlEmbedElement extends MediaEvents { }
-    interface HtmlImageElement extends MediaEvents { }
-    interface HtmlObjectElement extends MediaEvents { }
-    interface HtmlVideoElement extends MediaEvents { }
+    interface HtmlAudioTag extends MediaEvents { }
+    interface HtmlEmbedTag extends MediaEvents { }
+    interface HtmlImageTag extends MediaEvents { }
+    interface HtmlObjectTag extends MediaEvents { }
+    interface HtmlVideoTag extends MediaEvents { }
 }

src/jsx/intrinsic-elements.d.ts

@@ -6,173 +6,115 @@ declare namespace JSX {
     interface IntrinsicElements {
-        a: HtmlAnchorElement;
-        abbr: HtmlElement;
-        address: HtmlElement;
-        area: HtmlAreaElement;
-        article: HtmlElement;
-        aside: HtmlElement;
-        audio: HtmlAudioElement;
-        b: HtmlElement;
-        bb: HtmlBrowserButtonElement;
-        base: BaseElement;
-        bdi: HtmlElement;
-        bdo: HtmlElement;
-        blockquote: HtmlQuoteElement;
-        body: HtmlBodyElement;
-        br: HtmlElement;
-        button: HtmlButtonElement;
-        canvas: HtmlCanvasElement;
-        caption: HtmlElement;
-        cite: HtmlElement;
-        code: HtmlElement;
-        col: HtmlTableColElement;
-        colgroup: HtmlTableColElement;
-        commands: HtmlCommandElement;
-        data: DataElement;
-        datalist: HtmlDataListElement;
-        dd: HtmlElement;
-        del: HtmlModElement;
-        details: HtmlDetailsElement;
-        dfn: HtmlElement;
-        div: HtmlElement;
-        dl: HtmlElement;
-        dt: HtmlElement;
-        em: HtmlElement;
-        embed: HtmlEmbedElement;
-        fieldset: HtmlFieldSetElement;
-        figcaption: HtmlElement;
-        figure: HtmlElement;
-        footer: HtmlElement;
-        form: HtmlFormElement;
-        h1: HtmlElement;
-        h2: HtmlElement;
-        h3: HtmlElement;
-        h4: HtmlElement;
-        h5: HtmlElement;
-        h6: HtmlElement;
-        head: HtmlElement;
-        header: HtmlElement;
-        hr: HtmlElement;
-        html: HTMLElement;
-        i: HtmlElement;
-        iframe: HtmlIFrameElement;
-        img: HtmlImageElement;
-        input: HtmlInputElement;
-        ins: HtmlModElement;
-        kbd: HtmlElement;
-        keygen: KeygenElement;
-        label: HtmlLabelElement;
-        legend: HtmlLegendElement;
-        li: HtmlLIElement ;
-        link: HtmlLinkElement;
-        main: HtmlElement;
-        map: HtmlMapElement;
-        mark: HtmlElement;
-        menu: HtmlMenuElement;
-        meta: HtmlMetaElement;
-        meter: HtmlMeterElement;
-        nav: HtmlElement;
-        noscript: HtmlElement;
-        object: HtmlObjectElement;
-        ol: HtmlOListElement ;
-        optgroup: HtmlOptgroupElement;
-        option: HtmlOptionElement;
-        output: HtmlOutputElement;
-        p: HtmlElement;
-        param: HtmlParamElement;
-        pre: HtmlElement;
-        progress: HtmlProgressElement;
-        q: HtmlQuoteElement;
-        rb: HtmlElement;
-        rp: HtmlElement;
-        rt: HtmlElement;
-        rtc: HtmlElement;
-        ruby: HtmlElement;
-        s: HtmlElement;
-        samp: HtmlElement;
-        script: HtmlScriptElement;
-        section: HtmlElement;
-        select: HtmlSelectElement;
-        small: HtmlElement;
-        source: HtmlSourceElement;
-        span: HtmlElement;
-        strong: HtmlElement;
-        style: HtmlStyleElement;
-        sub: HtmlElement;
-        sup: HtmlElement;
-        table: HtmlTableElement;
-        tbody: HtmlElement;
-        td: HtmlTableDataCellElement ;
-        template: HtmlElement;
-        textarea: HtmlTextAreaElement;
-        tfoot: HtmlTableSectionElement;
-        th: HtmlTableHeaderCellElement;
-        thead: HtmlTableSectionElement;
-        time: HtmlTimeElement;
-        title: HtmlElement;
-        tr: HtmlTableRowElement;
-        track: HtmlTrackElement;
-        u: HtmlElement;
-        ul: HtmlElement;
-        var: HtmlElement;
-        video: HtmlVideoElement
-        wbr: HtmlElement;
-
-        // SVG
-        // svg: React.SVGProps<SVGSVGElement>;
-
-        // animate: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.
-        // circle: React.SVGProps<SVGCircleElement>;
-        // clipPath: React.SVGProps<SVGClipPathElement>;
-        // defs: React.SVGProps<SVGDefsElement>;
-        // desc: React.SVGProps<SVGDescElement>;
-        // ellipse: React.SVGProps<SVGEllipseElement>;
-        // feBlend: React.SVGProps<SVGFEBlendElement>;
-        // feColorMatrix: React.SVGProps<SVGFEColorMatrixElement>;
-        // feComponentTransfer: React.SVGProps<SVGFEComponentTransferElement>;
-        // feComposite: React.SVGProps<SVGFECompositeElement>;
-        // feConvolveMatrix: React.SVGProps<SVGFEConvolveMatrixElement>;
-        // feDiffuseLighting: React.SVGProps<SVGFEDiffuseLightingElement>;
-        // feDisplacementMap: React.SVGProps<SVGFEDisplacementMapElement>;
-        // feDistantLight: React.SVGProps<SVGFEDistantLightElement>;
-        // feFlood: React.SVGProps<SVGFEFloodElement>;
-        // feFuncA: React.SVGProps<SVGFEFuncAElement>;
-        // feFuncB: React.SVGProps<SVGFEFuncBElement>;
-        // feFuncG: React.SVGProps<SVGFEFuncGElement>;
-        // feFuncR: React.SVGProps<SVGFEFuncRElement>;
-        // feGaussianBlur: React.SVGProps<SVGFEGaussianBlurElement>;
-        // feImage: React.SVGProps<SVGFEImageElement>;
-        // feMerge: React.SVGProps<SVGFEMergeElement>;
-        // feMergeNode: React.SVGProps<SVGFEMergeNodeElement>;
-        // feMorphology: React.SVGProps<SVGFEMorphologyElement>;
-        // feOffset: React.SVGProps<SVGFEOffsetElement>;
-        // fePointLight: React.SVGProps<SVGFEPointLightElement>;
-        // feSpecularLighting: React.SVGProps<SVGFESpecularLightingElement>;
-        // feSpotLight: React.SVGProps<SVGFESpotLightElement>;
-        // feTile: React.SVGProps<SVGFETileElement>;
-        // feTurbulence: React.SVGProps<SVGFETurbulenceElement>;
-        // filter: React.SVGProps<SVGFilterElement>;
-        // foreignObject: React.SVGProps<SVGForeignObjectElement>;
-        // g: React.SVGProps<SVGGElement>;
-        // image: React.SVGProps<SVGImageElement>;
-        // line: React.SVGProps<SVGLineElement>;
-        // linearGradient: React.SVGProps<SVGLinearGradientElement>;
-        // marker: React.SVGProps<SVGMarkerElement>;
-        // mask: React.SVGProps<SVGMaskElement>;
-        // metadata: React.SVGProps<SVGMetadataElement>;
-        // path: React.SVGProps<SVGPathElement>;
-        // pattern: React.SVGProps<SVGPatternElement>;
-        // polygon: React.SVGProps<SVGPolygonElement>;
-        // polyline: React.SVGProps<SVGPolylineElement>;
-        // radialGradient: React.SVGProps<SVGRadialGradientElement>;
-        // rect: React.SVGProps<SVGRectElement>;
-        // stop: React.SVGProps<SVGStopElement>;
-        // switch: React.SVGProps<SVGSwitchElement>;
-        // symbol: React.SVGProps<SVGSymbolElement>;
-        // text: React.SVGProps<SVGTextElement>;
-        // textPath: React.SVGProps<SVGTextPathElement>;
-        // tspan: React.SVGProps<SVGTSpanElement>;
-        // use: React.SVGProps<SVGUseElement>;
-        // view: React.SVGProps<SVGViewElement>;
+        a: HtmlAnchorTag;
+        abbr: HtmlTag;
+        address: HtmlTag;
+        area: HtmlAreaTag;
+        article: HtmlTag;
+        aside: HtmlTag;
+        audio: HtmlAudioTag;
+        b: HtmlTag;
+        bb: HtmlBrowserButtonTag;
+        base: BaseTag;
+        bdi: HtmlTag;
+        bdo: HtmlTag;
+        blockquote: HtmlQuoteTag;
+        body: HtmlBodyTag;
+        br: HtmlTag;
+        button: HtmlButtonTag;
+        canvas: HtmlCanvasTag;
+        caption: HtmlTag;
+        cite: HtmlTag;
+        code: HtmlTag;
+        col: HtmlTableColTag;
+        colgroup: HtmlTableColTag;
+        commands: HtmlCommandTag;
+        data: DataTag;
+        datalist: HtmlDataListTag;
+        dd: HtmlTag;
+        del: HtmlModTag;
+        details: HtmlDetailsTag;
+        dfn: HtmlTag;
+        div: HtmlTag;
+        dl: HtmlTag;
+        dt: HtmlTag;
+        em: HtmlTag;
+        embed: HtmlEmbedTag;
+        fieldset: HtmlFieldSetTag;
+        figcaption: HtmlTag;
+        figure: HtmlTag;
+        footer: HtmlTag;
+        form: HtmlFormTag;
+        h1: HtmlTag;
+        h2: HtmlTag;
+        h3: HtmlTag;
+        h4: HtmlTag;
+        h5: HtmlTag;
+        h6: HtmlTag;
+        head: HtmlTag;
+        header: HtmlTag;
+        hr: HtmlTag;
+        html: HtmlHtmlTag;
+        i: HtmlTag;
+        iframe: HtmlIFrameTag;
+        img: HtmlImageTag;
+        input: HtmlInputTag;
+        ins: HtmlModTag;
+        kbd: HtmlTag;
+        keygen: KeygenTag;
+        label: HtmlLabelTag;
+        legend: HtmlLegendTag;
+        li: HtmlLITag;
+        link: HtmlLinkTag;
+        main: HtmlTag;
+        map: HtmlMapTag;
+        mark: HtmlTag;
+        menu: HtmlMenuTag;
+        meta: HtmlMetaTag;
+        meter: HtmlMeterTag;
+        nav: HtmlTag;
+        noscript: HtmlTag;
+        object: HtmlObjectTag;
+        ol: HtmlOListTag;
+        optgroup: HtmlOptgroupTag;
+        option: HtmlOptionTag;
+        output: HtmlOutputTag;
+        p: HtmlTag;
+        param: HtmlParamTag;
+        pre: HtmlTag;
+        progress: HtmlProgressTag;
+        q: HtmlQuoteTag;
+        rb: HtmlTag;
+        rp: HtmlTag;
+        rt: HtmlTag;
+        rtc: HtmlTag;
+        ruby: HtmlTag;
+        s: HtmlTag;
+        samp: HtmlTag;
+        script: HtmlScriptTag;
+        section: HtmlTag;
+        select: HtmlSelectTag;
+        small: HtmlTag;
+        source: HtmlSourceTag;
+        span: HtmlTag;
+        strong: HtmlTag;
+        style: HtmlStyleTag;
+        sub: HtmlTag;
+        sup: HtmlTag;
+        table: HtmlTableTag;
+        tbody: HtmlTag;
+        td: HtmlTableDataCellTag ;
+        template: HtmlTag;
+        textarea: HtmlTextAreaTag;
+        tfoot: HtmlTableSectionTag;
+        th: HtmlTableHeaderCellTag;
+        thead: HtmlTableSectionTag;
+        time: HtmlTimeTag;
+        title: HtmlTag;
+        tr: HtmlTableRowTag;
+        track: HtmlTrackTag;
+        u: HtmlTag;
+        ul: HtmlTag;
+        var: HtmlTag;
+        video: HtmlVideoTag;
+        wbr: HtmlTag;
     }
-
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

244

increased by54.43%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

30976

decreased by-1.37%

Lines of code

645

decreased by-7.06%

No dependency changes