lusito / tsx-dom Goto Github PK

Hi, I have used tsx-dom in my project, and also, I have import VUE.

When I build my project, error occured:

TS2322: Type '{ children: Element; class: string; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.
  Property 'children' does not exist on type 'ElementAttrs<HTMLAttributes>'.

Have you have any idea about this issue?

Setting the prop className as per the type results in unexpected behavior.
The property to set in this case is "class", eg:

// TSX
<div className="myClass" />

would be equivalent to:

// HTML
<div class="myClass" />

I notice React uses the className method as well, which makes sense as the types used in this project seem to be taken from React (Preact?).

I have made the change which I've been using in my project in this fork. I would have submitted a pull request but the tests fail even before I make any changes.

Typescript has JSX fragment support (microsoft/TypeScript#38720), but tsx-dom hasn't implemented it yet
Edit: I've found a temporary workaround:

"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "\"span\"",

Edit 2: The temporary workaround does not work

When I try to use tsx-dom in ie11, there was SCRIPT1053: Const must be initialized, any solution for that?

When using:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 250 250" width="100%" height="100%">:

Property 'xmlns' does not exist on type 'SVGElementAttributes<"svg"> & HTMLComponentProps<SVGSVGElement> & EventAttributesBase<SVGSVGElement> & { ...; }'.

When using:
<path fill="url(#a)" d="M250 125q0-52-37-88-36-37-88-37T37 37Q0 73 0 125t37 88q36 37 88 37t88-37q37-36 37-88M87 195V55l100 70-100 70z"></path>

Property 'fill' does not exist on type 'SVGElementAttributes<"path"> & HTMLComponentProps<SVGPathElement> & EventAttributesBase<SVGPathElement> & { ...; }'.

Property 'd' does not exist on type 'SVGElementAttributes<"path"> & HTMLComponentProps<SVGPathElement> & EventAttributesBase<SVGPathElement> & { ...; }'.

When using:
<circle class="spinner" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>

Property 'fill' does not exist on type 'SVGElementAttributes<"circle"> & HTMLComponentProps<SVGCircleElement> & EventAttributesBase<SVGCircleElement> & { ...; }'.

When using:
<text id="unmute-text" x="256" y="560" text-anchor="middle" font-size="60px" fill="#FFF" stroke="#FFF">

Property 'fill' does not exist on type 'SVGElementAttributes<"text"> & HTMLComponentProps<SVGTextElement> & EventAttributesBase<SVGTextElement> & { ...; }'.

When using:
<input id="virtual-keyboard" type="text" autocapitalize="none" autocomplete="off" autocorrect="off" />

Property 'autocorrect' does not exist on type 'ElementAttributes<HTMLInputElement, HTMLAttributes> & HTMLComponentProps<HTMLInputElement> & EventAttributesBase<...> & { ...; }'.

Property 'autocapitalize' does not exist on type 'ElementAttributes<HTMLInputElement, HTMLAttributes> & HTMLComponentProps<HTMLInputElement> & EventAttributesBase<...> & { ...; }'.

I am sorry to ask a question through issues.
I want to use this library, but I can't run it , I don't know how to compile it .
Could you give me some suggestion ？

thanks!

This package is awesome for tsx component, but after upgrade version from 1.3.0 to 1.4.0, The return type changed from JSX .HTMLElement to JSX.Element.

Is there any way help me to migrate from version 1.3.0 to 1.4.0.
Or
I need keep use version 1.3.0 ?

Currently, trying to append an array using this syntax breaks for me:

function SomeComponent({ children }: BaseProps): JSX.Element {
    return (
        <h2>
            {children}
        </h2>
    );
}

const myArray = [<h3>Hello World</h3>, <p>1+1=2</p>, <p>foo bar baz quux</p>];

document.body.appendChild(<SomeComponent>{...myArray}</SomeComponent>)

I get a warning saying something like index.js?e931:17 Unknown type to append: (3) [h3, p, p]
It seems that applyChildren correctly identifies children as an array, and calls applyChild. On closer inspection, for some reason the children argument to applyChildren is a nested array: [[h3, p, p]]

A possible fix would be to call applyChildren from applyChild, making nested arrays possible.

It seems that Firefox returns false for all style attributes of DOM elements, causing style attributes to be missing.

Example:

const el = document.createElement('div')
console.log(Object.prototype.hasOwnProperty.call(el.style, 'width')) // Chrome: true, Firefox: false

Therefore, no style on Firefox. I'd suggest optimistically copying all attributes to target.style no matter what. Shouldn't break anything, if the property doesn't exist.

When using the dangerouslySetInnerHTML prop, it always sets the innerHTML to [object Object].

The type for dangerouslySetInnerHTML is:

export interface HTMLComponentProps extends BaseProps {
    dangerouslySetInnerHTML?: { __html: string };
}

but the setAttribute file treats it as a string:

if (name === "dangerouslySetInnerHTML") element.innerHTML = value as string;

The fix I found for this is a bit coercive so I'm not particularly happy about it. I made a branch in my fork, but beware it did merge with my previous issue so that line can be ignored. My branch/example can be found here

I just noticed that the onError callback for the elements were missing.

In the following block:

<script
    type="application/javascript"
    onLoad={() => {
        alert("ok");
    }}
    onError={() => {
        alert("not ok");
    }}
    src={src} />

The following error appears for me:

TS2322: Type '{ type: string; onLoad: () => void; onError: () => void; src: string; }' is not assignable to type 'HTMLAttributes'.
   Property 'onError' does not exist on type 'HTMLAttributes'.

Is this a small oversight or was this intentional?

Now, tsx-dom don't support svg element.

I advice that tsx-dom can support svg elements.