From 1aa3100ca0ec5251c1bf2b1d85a59da0cd30bb60 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Mon, 3 May 2021 21:40:06 +0200 Subject: [PATCH 1/5] Make type definitions work for classic runtime Nesting properties in a `@typedef` type annotation will generate a namespace, which can be used to generate the required JSX namespace. --- lib/index.js | 6 ++-- lib/jsx-classic.d.ts | 68 +++++++++++++++++++++----------------------- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/lib/index.js b/lib/index.js index c801572..6af9859 100644 --- a/lib/index.js +++ b/lib/index.js @@ -10,10 +10,12 @@ * @typedef {string|number|null|undefined} XPrimitiveChild * @typedef {Array.} XArrayChild * @typedef {Node|XPrimitiveChild|XArrayChild} XChild + * @typedef {import('./jsx-classic').Element} x.JSX.Element + * @typedef {import('./jsx-classic').IntrinsicAttributes} x.JSX.IntrinsicAttributes + * @typedef {import('./jsx-classic').IntrinsicElements} x.JSX.IntrinsicElements + * @typedef {import('./jsx-classic').ElementChildrenAttribute} x.JSX.ElementChildrenAttribute */ -export * from './jsx-classic.js' - /** * Create XML trees in xast. * diff --git a/lib/jsx-classic.d.ts b/lib/jsx-classic.d.ts index ac73277..1e1e0a0 100644 --- a/lib/jsx-classic.d.ts +++ b/lib/jsx-classic.d.ts @@ -1,4 +1,4 @@ -import {XAttributes, XChild, XResult, x} from './index.js' +import {XAttributes, XChild, XResult} from './index.js' /** * This unique symbol is declared to specify the key on which JSX children are passed, without conflicting @@ -6,43 +6,41 @@ import {XAttributes, XChild, XResult, x} from './index.js' */ declare const children: unique symbol -export namespace JSX { - /** - * This defines the return value of JSX syntax. - */ - type Element = XResult +/** + * This defines the return value of JSX syntax. + */ +export type Element = XResult - /** - * This disallows the use of functional components. - */ - type IntrinsicAttributes = never +/** + * This disallows the use of functional components. + */ +export type IntrinsicAttributes = never - /** - * This defines the prop types for known elements. - * - * For `xastscript` this defines any string may be used in combination with `xast` `Attributes`. - * - * This **must** be an interface. - */ - // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style - interface IntrinsicElements { - [name: string]: - | XAttributes - | { - /** - * The prop that matches `ElementChildrenAttribute` key defines the type of JSX children, defines the children type. - */ - [children]?: XChild - } - } +/** + * This defines the prop types for known elements. + * + * For `xastscript` this defines any string may be used in combination with `xast` `Attributes`. + * + * This **must** be an interface. + */ +// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style +export interface IntrinsicElements { + [name: string]: + | XAttributes + | { + /** + * The prop that matches `ElementChildrenAttribute` key defines the type of JSX children, defines the children type. + */ + [children]?: XChild + } +} +/** + * The key of this interface defines as what prop children are passed. + */ +export interface ElementChildrenAttribute { /** - * The key of this interface defines as what prop children are passed. + * Only the key matters, not the value. */ - interface ElementChildrenAttribute { - /** - * Only the key matters, not the value. - */ - [children]?: never - } + [children]?: never } From 3fabdc0c7e2d31bc270aa77fff0df7e792fa88d3 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Mon, 3 May 2021 22:14:47 +0200 Subject: [PATCH 2/5] Specify automatic runtime uses children prop This specifies the children prop must be a valid xast child for the automatic runtime, but a valid attribute for the classic runtime. --- lib/jsx-automatic.d.ts | 10 ++-------- test-d/automatic.tsx | 3 +++ test-d/classic.tsx | 3 +++ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/jsx-automatic.d.ts b/lib/jsx-automatic.d.ts index 2e8f6b1..3c45020 100644 --- a/lib/jsx-automatic.d.ts +++ b/lib/jsx-automatic.d.ts @@ -1,11 +1,5 @@ import {XAttributes, XChild, XResult} from './index.js' -/** - * This unique symbol is declared to specify the key on which JSX children are passed, without conflicting - * with the Attributes type. - */ -declare const children: unique symbol - export namespace JSX { /** * This defines the return value of JSX syntax. @@ -32,7 +26,7 @@ export namespace JSX { /** * The prop that matches `ElementChildrenAttribute` key defines the type of JSX children, defines the children type. */ - [children]?: XChild + children?: XChild } } @@ -43,6 +37,6 @@ export namespace JSX { /** * Only the key matters, not the value. */ - [children]?: never + children?: never } } diff --git a/test-d/automatic.tsx b/test-d/automatic.tsx index 7754abd..f692af7 100644 --- a/test-d/automatic.tsx +++ b/test-d/automatic.tsx @@ -49,5 +49,8 @@ expectError() expectError() expectError({{invalid: 'child'}}) +// This is where the automatic runtime differs from the classic runtime. +expectType(} />) + declare function Bar(props?: Record): Element expectError() diff --git a/test-d/classic.tsx b/test-d/classic.tsx index a9907e3..796f407 100644 --- a/test-d/classic.tsx +++ b/test-d/classic.tsx @@ -40,6 +40,9 @@ expectError() expectError() expectError({{invalid: 'child'}}) +// This is where the classic runtime differs from the automatic runtime. +expectError(} />) + declare function Bar(props?: Record): Element expectError() From d2f58978bc4178786f173f9f747038c445fffa37 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Mon, 3 May 2021 22:33:26 +0200 Subject: [PATCH 3/5] Remve unused eslint-disable comments --- test-d/classic.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/test-d/classic.tsx b/test-d/classic.tsx index 796f407..d0b44c5 100644 --- a/test-d/classic.tsx +++ b/test-d/classic.tsx @@ -7,7 +7,6 @@ import {x} from '../index.js' type Result = Element | Root // To do: fix classic types. -/* eslint-disable @typescript-eslint/no-unsafe-argument */ expectType(<>) expectType() expectType() @@ -45,5 +44,3 @@ expectError(} />) declare function Bar(props?: Record): Element expectError() - -/* eslint-enable @typescript-eslint/no-unsafe-argument */ From 06ce846688d6a7af0aca1bb722855f1373e4cc52 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Tue, 4 May 2021 10:59:36 +0200 Subject: [PATCH 4/5] Update test-d/classic.tsx Co-authored-by: Titus --- test-d/classic.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/test-d/classic.tsx b/test-d/classic.tsx index d0b44c5..b993c8f 100644 --- a/test-d/classic.tsx +++ b/test-d/classic.tsx @@ -6,7 +6,6 @@ import {x} from '../index.js' type Result = Element | Root -// To do: fix classic types. expectType(<>) expectType() expectType() From 87d20010243976ef68574af89a772b1e4e50a240 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Tue, 4 May 2021 16:22:17 +0200 Subject: [PATCH 5/5] Describe diff between automatic and classic runtime --- test-d/automatic.tsx | 1 + test-d/classic.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/test-d/automatic.tsx b/test-d/automatic.tsx index f692af7..7203678 100644 --- a/test-d/automatic.tsx +++ b/test-d/automatic.tsx @@ -50,6 +50,7 @@ expectError() expectError({{invalid: 'child'}}) // This is where the automatic runtime differs from the classic runtime. +// The automatic runtime the children prop to define JSX children, whereas it’s used as an attribute in the classic runtime. expectType(} />) declare function Bar(props?: Record): Element diff --git a/test-d/classic.tsx b/test-d/classic.tsx index b993c8f..c880686 100644 --- a/test-d/classic.tsx +++ b/test-d/classic.tsx @@ -39,6 +39,8 @@ expectError() expectError({{invalid: 'child'}}) // This is where the classic runtime differs from the automatic runtime. +// The automatic runtime the children prop to define JSX children, whereas it’s +// used as an attribute in the classic runtime. expectError(} />) declare function Bar(props?: Record): Element