Skip to content

types: support xastscript used as JSX in typescript #7

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

types: support xastscript used as JSX in typescript #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 32 additions & 3 deletions types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// TypeScript Version: 3.7

import {Element, Node, Root} from 'xast'
import {Element as XastElement, Node, Root} from 'xast'

type Children = string | Node | number | Children[]

Expand All @@ -17,7 +17,7 @@ type Attributes = Record<string, Primitive>
* @param name Qualified name. Case sensitive and can contain a namespace prefix (such as rdf:RDF).
* @param children (Lists of) child nodes. When strings are encountered, they are mapped to Text nodes.
*/
declare function xastscript(name: string, ...children: Children[]): Element
declare function xastscript(name: string, ...children: Children[]): XastElement

/**
* Create XML trees in xast.
Expand All @@ -38,6 +38,35 @@ declare function xastscript(
name: string,
attributes?: Attributes,
...children: Children[]
): Element
): XastElement

declare namespace xastscript.JSX {
/**
* This defines the return value of JSX syntax.
*/
type Element = XastElement

/**
* This disallows the use of intrinsics
*/
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`.
*/
type IntrinsicElements = Record<string, Attributes>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following tests are is missing:

declare function Bar(props?: Attributes): Element
jsx = <Bar /> // $ExpectError
jsx = <foo>{{}}</foo> // $ExpectError

To fix this, this line should be changed to:

  type IntrinsicElements = Record<string, Attributes & { ''?: Node }>;

This might interfere with support for fragments though.


/**
* The key of this interface defines as what prop children are passed.
*/
interface ElementChildrenAttribute {
/**
* Only the key matters, not the value.
*/
'': never
}
}

export = xastscript
6 changes: 3 additions & 3 deletions types/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import x = require('xastscript')

const xmlns = 'http://www.sitemaps.org/schemas/sitemap/0.9'
const xmlNumberAttribute = 100

x('urlset') // $ExpectType Element
x('urlset', 'string') // $ExpectType Element
x('urlset', 1) // $ExpectType Element
Expand All @@ -14,8 +17,6 @@ x(null, 'string') // $ExpectType Root
x(null, 1) // $ExpectType Root
x(null, []) // $ExpectType Root

const xmlns = 'http://www.sitemaps.org/schemas/sitemap/0.9'

x('urlset', {xmlns}) // $ExpectType Element
x('urlset', {xmlns}, 'string') // $ExpectType Element
x('urlset', {xmlns}, ['string', 'string']) // $ExpectType Element
Expand All @@ -26,7 +27,6 @@ x('urlset', {xmlns}, x('loc'), x('loc')) // $ExpectType Element
x('urlset', {xmlns}, [x('loc'), x('loc')]) // $ExpectType Element
x('urlset', {xmlns}, []) // $ExpectType Element

const xmlNumberAttribute = 100
x('urlset', {xmlNumberAttribute}, 'string') // $ExpectType Element
x('urlset', {xmlNumberAttribute}, 100) // $ExpectType Element
x('urlset', {xmlNumberAttribute}, x('loc'), 100) // $ExpectType Element
Expand Down
41 changes: 41 additions & 0 deletions types/test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/** @jsx x */
import x = require('xastscript')
Comment on lines +1 to +2
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two notes:

  1. I opted to create two test files, one for plain ts and another for tsx, to ensure the script can be used independent of jsx
  2. this file does not test fragments, custom fragment syntax /** @jsxFrag null */ is only supported in typescript 4 and above. Out current typings support this usage, however dtslint does not appear to offer a way to run tests in multiple versions of typescript on the same typing file. We would need to have two typings files which would be identical except the header comment.
// TypeScript Version: 3.7

vs

// TypeScript Version: 4.0

and I'd like to avoid splitting the typing just for a header.
Open to other suggestions though.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’d just drop support for TypeScript < 4. New users will probably already use the latest TypeScript, and users upgrading hastscript are likely to upgrade TypeScript to the latest version in the same change. I know I didn’t encounter any issues when upgrading TypeScript any of my projects.


const xmlns = 'http://www.sitemaps.org/schemas/sitemap/0.9'
const xmlNumberAttribute = 100

const t0 = <urlset /> // $ExpectType Element
const t1 = <urlset xmlns={xmlns} /> // $ExpectType Element
const t2 = <urlset xmlNumberAttribute={xmlNumberAttribute} /> // $ExpectType Element
const t3 = <urlset>string</urlset> // $ExpectType Element
// $ExpectType Element
const t4 = (
<urlset>
<text />
</urlset>
)
// $ExpectType Element
const t5 = <urlset>text</urlset>
// $ExpectType Element
const t6 = (
<urlset>
<text />
<text />
</urlset>
)
// $ExpectType Element
const t7 = (
<urlset>
test
<text />
</urlset>
)
// $ExpectType Element
const t8 = (
<urlset>
{['a', 'b'].map((value) => (
<text>{value}</text>
))}
</urlset>
)
const t9 = <urlset xmlns /> // $ExpectError
1 change: 1 addition & 0 deletions types/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"compilerOptions": {
"module": "commonjs",
"lib": ["es2015"],
"jsx": "react",
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
Expand Down