Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TS 4.0: jsxFragmentFactory ignored in Preact + TypeScript setup #39451

Closed
ddprrt opened this issue Jul 6, 2020 · 1 comment · Fixed by #39475
Closed

TS 4.0: jsxFragmentFactory ignored in Preact + TypeScript setup #39451

ddprrt opened this issue Jul 6, 2020 · 1 comment · Fixed by #39475
Assignees
Labels
Bug A bug in TypeScript Domain: JSX/TSX Relates to the JSX parser and emitter Fix Available A PR has been opened for this issue Good First Issue Well scoped, documented and has the green light

Comments

@ddprrt
Copy link

ddprrt commented Jul 6, 2020

I'm using the new jsxFragmentFactory to make Fragment work in a Preact setup, but TypeScript won't recognize it.

TypeScript Versions: 4.0.0-beta, 4.0.0-dev.20200706

Search Terms: JSX Fragment Factory, Preact

Code

Counter.tsx

import { Fragment, h } from "preact"

import { useState } from "preact/hooks"

type CounterProps = {
  count?: number
}

export function Counter({count = 0}: CounterProps) {
  const [cnt, setCnt] = useState(count)
  return <>
    <p>{cnt}</p>
    <button onClick={() => setCnt((prev) => prev + 1)} type="button">Update</button>
  </>
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["DOM", "DOM.Iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "noUnusedLocals": true
  },
  "include": ["src"]
}

See also:

Screenshot 2020-07-06 at 12 55 33

Expected behavior: TypeScript recognizes that I use <>...</> as a shorthand for the imported Fragment

Actual behavior:
With "noUnusedLocals" set to true, TypeScript throws error TS6133: 'Fragment' is declared but its value is never read.

Playground Link: No playground, but a GitHub repo (https://github.com/ddprrt/preact-vite-ts-playground) -- this is a Vite setup that compiles, but I think this can be ignored for this issue. Editor feedback and running tsc show the actual behavior.

Hope this helps!

@DanielRosenwasser DanielRosenwasser added Bug A bug in TypeScript Domain: JSX/TSX Relates to the JSX parser and emitter labels Jul 7, 2020
@DanielRosenwasser DanielRosenwasser added this to the Typescript 4.0.1 milestone Jul 7, 2020
@DanielRosenwasser
Copy link
Member

DanielRosenwasser commented Jul 7, 2020

Should be quick for us to fix.

@DanielRosenwasser DanielRosenwasser added Good First Issue Well scoped, documented and has the green light Help Wanted You can do this labels Jul 7, 2020
@weswigham weswigham added Fix Available A PR has been opened for this issue and removed Help Wanted You can do this labels Jul 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Domain: JSX/TSX Relates to the JSX parser and emitter Fix Available A PR has been opened for this issue Good First Issue Well scoped, documented and has the green light
Projects
None yet
3 participants