microsoft / microsoft/TypeScript

'h' (Preact JSX factory) is not imported when '<>...</>' is used with no other JSX tags

Offen
#40,210 3 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bug Domain: JSX/TSX
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.4k
Ø Merge
1 T. 19 Std.
Gemergte PRs (30 T.)
117

Beschreibung

I'm using the new jsxFragmentFactory with preact.
It works almost well, but has a problem when no JSX tags other than <></> exist in a file:
An existing import of h (jsxFactory) is removed when transpiled.
This problem occurs with ES modules.

TypeScript Version: 4.0.2

Search Terms: jsx, jsxFactory, jsxFragmentFactory, preact

Code

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",

    "strict": true,

    "moduleResolution": "node",
    "esModuleInterop": true,

    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

empty.tsx

import { Fragment, h } from 'preact';

export default <></>;

Expected behavior:
The import of h remains.

empty.js

import { Fragment, h } from 'preact';
export default h(Fragment, null);

Actual behavior:
The import of h is removed.

empty.js

import { Fragment } from 'preact';
export default h(Fragment, null);

This problem does not occur when any other tag exists.

empty.tsx

import { Fragment, h } from 'preact';

export default <><div /></>;

empty.js

import { Fragment, h } from 'preact';
export default h(Fragment, null,
    h("div", null));

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, empty.tsx mit der bereitgestellten tsconfig.json zu transpilieren, und vergleiche die Ausgabe für eine Datei, die nur ein Fragment enthält, mit der Ausgabe, wenn ein div enthalten ist. Verfolge die JSX-Fragment-Transformation und die Importbehandlung; fertig ist es, wenn das generierte ES-Modul h beibehält und h(Fragment, null) ausgibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.