microsoft / microsoft/TypeScript

Allow non-identifiers to be used for JSXFragmentFactory

Offen
#41,400 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Awaiting More Feedback Suggestion
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.4k
Ø Merge
1 T. 19 Std.
Gemergte PRs (30 T.)
117

Beschreibung

Search Terms

JSX factory expression identifier string JSXFragmentFactory

Related Issues

https://github.com/Microsoft/TypeScript/issues/20469
https://github.com/microsoft/TypeScript/pull/38720

Suggestion

Allow non-identifiers to be used as the JSXFragmentFactory. Currently, attempting to use a non-identifier like the empty string results in the following error:

  tsconfig.json(9,27): error TS18035: Invalid value for 'jsxFragmentFactory'. '''' is not a valid identifier or qualified-name.

My config:

{
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "jsxFactory": "createElement",
    "jsxFragmentFactory": "''",
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    /* paths - If you configure Snowpack import aliases, add them here. */
    "paths": {},
    /* noEmit - Snowpack builds (emits) files, not tsc. */
    "noEmit": true,
    /* Additional Options */
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "importsNotUsedAsValues": "error"
  }
}

Use Cases

My JSX framework defines the Fragment tag as the empty string. Babel’s JSX support allows non-identifiers to be used as the JSXFragmentFactory so I wonder why we can’t do the same in TypeScript.

Using an identifier is a little more awkward.

Examples

With the jsxFactory set to createElement and the jsxFragmentFactory set to the empty string, emitted code might look like the following.

createElement(
  "",
  null,
  createElement("div", null),
  createElement("div", null),
);

Checklist

My suggestion meets these guidelines:

  • This wouldn't be a breaking change in existing TypeScript/JavaScript code
  • This wouldn't change the runtime behavior of existing JavaScript code
  • This could be implemented without emitting different JS based on the types of the expressions
  • This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
  • This feature would agree with the rest of TypeScript's Design Goals.

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 mit der Überprüfung der Validierung der Compiler-Option jsxFragmentFactory sowie des zugehörigen Issues und Pull Requests, die im Bericht verlinkt sind. Erledigt ist die Aufgabe, wenn Werte, die keine Identifier sind, wie etwa die leere Zeichenfolge, akzeptiert werden und JSX-Fragmente mit der konfigurierten Factory ausgegeben werden, ohne den derzeitigen Fehler wegen eines ungültigen Identifiers.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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