kitajs / html

🏛️ Super fast JSX runtime to generate HTML strings that works everywhere. If it supports string we got you covered.
http://kitajs.org/discord
MIT License
596 stars 29 forks source link

Html Namespace not found in `.tsx` files #265

Open ashmortar opened 3 months ago

ashmortar commented 3 months ago

Prerequisites

Versions

4.2.0, 4.2.1

Description

I am having this same issue for 4.2.0 and 4.2.1 using express and node in any tsx file in my project.

example:

type LinkProps = { class: string }  &
  (
    | {
        'hx-get': string;
      }
    | {
        href: string;
      }
  );

export function Link({
  class: className,
  children,
  ...rest
}: Html.PropsWithChildren<LinkProps>) {
  const props =
    `href` in rest
      ? { ...rest, target: '_blank', rel: 'noopener noreferrer' }
      : rest;
  const ourClass = className ? className : 'link';

  return (
    <a class={ourClass} {...props}>
      {children}
    </a>
  );
}

Error at Html reported by typescript:

Cannot find namespace 'Html'.ts(2503)
⚠ Error(TS2503)  | 
Cannot find namespace Html .

Error at {children}

Usage of xss-prone content without `safe` attribute. https://kitajs.github.io/ts-html-plugin#k601ts(0 K601)
⚠ Error
Usage of xss-prone content without `safe` attribute. https://kitajs.github.io/ts-html-plugin#k601
(parameter) children: Html.PropsWithChildren<LinkProps>

Steps to Reproduce

Create a project

mkdir nsamespace-bug
cd namespace-bug
touch index.tsx
touch tsconfig.json
npm init -y # ... your choices
npm i -E typescript@5.5.4 @kitajs/html@4.2.1 @kitajs/ts-html-plugin@4.0.2

export function Link({ class: className, children, ...rest }: Html.PropsWithChildren) { const props = href in rest ? { ...rest, target: "_blank", rel: "noopener noreferrer" } : rest; const ourClass = className ? className : "link";

return ( <a class={ourClass} {...props}> {children} ); }

- tsconfig.json
```json
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "module": "commonjs",
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "target": "ES2021",
    "outDir": "./dist",
    "baseUrl": "./",
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@kitajs/html",
    "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
  }
}

Expected Behavior

Namespace should be recognized in the file as it is if you install @kitajs/html@4.1.0

arthurfiorette commented 3 months ago

You need to manually import it if you want to use types.

arthurfiorette commented 3 months ago

I'll see what I can do to replicate 4.1.0 behavior's, but its a problem with current's typescript version and the register.d.ts file.

However I don't have enough time for now, are you able to start a PR?