From 3105404f5b8a8211a0c207ff9e25076b4689db0e Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 10 Jan 2024 12:58:06 -0800 Subject: [PATCH] deprecate prefixed spcial props in favor unprefixed special props --- src/crank.ts | 183 +++++++++++++++---------------- src/html.ts | 12 +++ src/jsx-runtime.ts | 7 +- test/copy.tsx | 28 ++--- test/events.tsx | 2 +- test/jsx-tag.ts | 4 +- test/keys.tsx | 254 ++++++++++++++++++++++---------------------- test/provisions.tsx | 5 +- test/refs.tsx | 20 ++-- test/static.tsx | 42 ++++---- 10 files changed, 286 insertions(+), 271 deletions(-) diff --git a/src/crank.ts b/src/crank.ts index fd94d959f..5a1cc217e 100644 --- a/src/crank.ts +++ b/src/crank.ts @@ -56,8 +56,8 @@ export type Tag = string | symbol | Component; export type TagProps = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component - ? TProps - : Record; + ? TProps & JSX.IntrinsicAttributes + : Record & JSX.IntrinsicAttributes; /*** * SPECIAL TAGS @@ -190,29 +190,6 @@ export interface Element { * the attribute syntax from JSX. */ props: TagProps; - - /** - * A value which uniquely identifies an element from its siblings so that it - * can be added/updated/moved/removed by key rather than position. - * - * Passed in createElement() as the prop "c-key". - */ - key: Key; - - /** - * A callback which is called with the element’s result when it is committed. - * - * Passed in createElement() as the prop "c-ref". - */ - ref: ((value: unknown) => unknown) | undefined; - - /** - * A possible boolean which indicates that element should NOT be rerendered. - * If the element has never been rendered, this property has no effect. - * - * Passed in createElement() as the prop "c-static". - */ - static_: boolean | undefined; } /** @@ -236,18 +213,21 @@ export interface Element { * rather than instatiating this class directly. */ export class Element { - constructor( - tag: TTag, - props: TagProps, - key: Key, - ref?: ((value: unknown) => unknown) | undefined, - static_?: boolean | undefined, - ) { + constructor(tag: TTag, props: TagProps) { this.tag = tag; this.props = props; - this.key = key; - this.ref = ref; - this.static_ = static_; + } + + get key(): Key { + return this.props.key; + } + + get ref(): unknown { + return this.props.ref; + } + + get static_(): boolean { + return !!this.props["static"]; } } @@ -258,6 +238,17 @@ export function isElement(value: any): value is Element { return value != null && value.$$typeof === ElementSymbol; } +const DEPRECATED_PROP_PREFIXES = ["crank-", "c-", "$"]; + +const SPECIAL_PROP_BASES = ["key", "ref", "static"]; + +const SPECIAL_PROPS = new Set(["children", ...SPECIAL_PROP_BASES]); +for (const propPrefix of DEPRECATED_PROP_PREFIXES) { + for (const propBase of SPECIAL_PROP_BASES) { + SPECIAL_PROPS.add(propPrefix + propBase); + } +} + /** * Creates an element with the specified tag, props and children. * @@ -271,47 +262,32 @@ export function createElement( props?: TagProps | null | undefined, ...children: Array ): Element { - let key: Key; - let ref: ((value: unknown) => unknown) | undefined; - let static_ = false; - const props1 = {} as TagProps; - if (props != null) { - for (const name in props) { - switch (name) { - case "crank-key": - case "c-key": - case "$key": - // We have to make sure we don’t assign null to the key because we - // don’t check for null keys in the diffing functions. - if (props[name] != null) { - key = props[name]; - } - break; - case "crank-ref": - case "c-ref": - case "$ref": - if (typeof props[name] === "function") { - ref = props[name]; - } - break; - case "crank-static": - case "c-static": - case "$static": - static_ = !!props[name]; - break; - default: - props1[name] = props[name]; + if (props == null) { + props = {} as TagProps; + } + + for (const propPrefix of DEPRECATED_PROP_PREFIXES) { + for (const propName of SPECIAL_PROP_BASES) { + const deprecatedPropName = propPrefix + propName; + if (deprecatedPropName in (props as TagProps)) { + // eslint-disable-next-line no-console + console.warn( + `The \`${deprecatedPropName}\` prop is deprecated. Use \`${propName}\` instead.`, + ); + (props as TagProps)[propName] = (props as TagProps)[ + deprecatedPropName + ]; } } } if (children.length > 1) { - props1.children = children; + (props as TagProps).children = children; } else if (children.length === 1) { - props1.children = children[0]; + (props as TagProps).children = children[0]; } - return new Element(tag, props1, key, ref, static_); + return new Element(tag, props as TagProps); } /** Clones a given element, shallowly copying the props object. */ @@ -322,7 +298,7 @@ export function cloneElement( throw new TypeError("Cannot clone non-element"); } - return new Element(el.tag, {...el.props}, el.key, el.ref); + return new Element(el.tag, {...el.props}); } /*** ELEMENT UTILITIES ***/ @@ -354,9 +330,10 @@ function narrow(value: Children): NarrowedChild { * When asking the question, what is the "value" of a specific element, the * answer varies depending on the tag: * - * For host elements, the value is the nodes created for the element. + * For host elements, the value is the nodes created for the element, e.g. the + * DOM node in the case of the DOMRenderer. * - * For fragments, the value is usually an array of nodes. + * For fragments, the value is the value of the * * For portals, the value is undefined, because a Portal element’s root and * children are opaque to its parent. @@ -616,24 +593,24 @@ export interface RendererImpl< tag: TTag, node: TNode, name: TName, - value: TagProps[TName], - oldValue: TagProps[TName] | undefined, + value: unknown, + oldValue: unknown, scope: TScope, ): unknown; arrange( tag: TTag, node: TNode, - props: TagProps, + props: Record, children: Array, - oldProps: TagProps | undefined, + oldProps: Record | undefined, oldChildren: Array | undefined, ): unknown; dispose( tag: TTag, node: TNode, - props: TagProps, + props: Record, ): unknown; flush(root: TRoot): unknown; @@ -659,7 +636,8 @@ const defaultRendererImpl: RendererImpl = { const _RendererImpl = Symbol.for("crank.RendererImpl"); /** * An abstract class which is subclassed to render to different target - * environments. This class is responsible for kicking off the rendering + * environments. Subclasses will typically call super() with a custom + * RendererImpl. This class is responsible for kicking off the rendering * process and caching previous trees by root. * * @template TNode - The type of the node for a rendering environment. @@ -1140,7 +1118,7 @@ function updateRaw( ): ElementValue { const props = ret.el.props; if (!oldProps || oldProps.value !== props.value) { - ret.value = renderer.raw(props.value, scope, hydrationData); + ret.value = renderer.raw(props.value as any, scope, hydrationData); } return ret.value; @@ -1162,7 +1140,7 @@ function updateFragment( ctx, scope, ret, - ret.el.props.children, + ret.el.props.children as any, hydrationData, ); @@ -1187,7 +1165,7 @@ function updateHost( const tag = el.tag as string | symbol; let hydrationValue: TNode | string | undefined; if (el.tag === Portal) { - root = ret.value = el.props.root; + root = ret.value = el.props.root as any; } else { if (hydrationData !== undefined) { const value = hydrationData.children.shift(); @@ -1211,7 +1189,7 @@ function updateHost( ctx, scope, ret, - ret.el.props.children, + ret.el.props.children as any, childHydrationData, ); @@ -1261,7 +1239,7 @@ function commitHost( // TODO: The Copy tag doubles as a way to skip the patching of a prop. // Not sure about this feature. Should probably be removed. (copied = copied || new Set()).add(propName); - } else if (propName !== "children") { + } else if (!SPECIAL_PROPS.has(propName)) { renderer.patch( tag, value, @@ -1280,7 +1258,7 @@ function commitHost( props[name] = oldProps && oldProps[name]; } - ret.el = new Element(tag, props, ret.el.key, ret.el.ref); + ret.el = new Element(tag, props); } renderer.arrange( @@ -1535,7 +1513,9 @@ class ContextImpl< | AsyncIterator | undefined; - // The following properties are used to implement the + // A "block" is a promise which represents the duration during which new + // updates are queued, whereas "value" is a promise which represents the + // actual pending result of rendering. declare inflightBlock: Promise | undefined; declare inflightValue: Promise> | undefined; declare enqueuedBlock: Promise | undefined; @@ -1611,7 +1591,7 @@ export class Context implements EventTarget { * plugins or utilities which wrap contexts. */ get props(): ComponentProps { - return this[_ContextImpl].ret.el.props; + return this[_ContextImpl].ret.el.props as ComponentProps; } // TODO: Should we rename this??? @@ -1637,7 +1617,7 @@ export class Context implements EventTarget { ctx.f |= NeedsToYield; } - yield ctx.ret.el.props!; + yield ctx.ret.el.props as ComponentProps; } } finally { ctx.f &= ~IsInForOfLoop; @@ -1661,7 +1641,7 @@ export class Context implements EventTarget { if (ctx.f & PropsAvailable) { ctx.f &= ~PropsAvailable; - yield ctx.ret.el.props; + yield ctx.ret.el.props as ComponentProps; } else { const props = await new Promise((resolve) => (ctx.onProps = resolve)); if (ctx.f & IsUnmounted) { @@ -1962,8 +1942,8 @@ export class Context implements EventTarget { { setEventProperty(ev, "eventPhase", AT_TARGET); setEventProperty(ev, "currentTarget", ctx.owner); - const propCallback = ctx.ret.el.props["on" + ev.type]; - if (propCallback != null) { + const propCallback = ctx.ret.el.props["on" + ev.type] as unknown; + if (typeof propCallback === "function") { propCallback(ev); if (immediateCancelBubble || ev.cancelBubble) { return true; @@ -2991,6 +2971,31 @@ declare global { [tag: string]: any; } + export interface IntrinsicAttributes { + children?: unknown; + key?: unknown; + ref?: unknown; + ["static"]?: unknown; + /** @deprecated */ + ["crank-key"]?: unknown; + /** @deprecated */ + ["crank-ref"]?: unknown; + /** @deprecated */ + ["crank-static"]?: unknown; + /** @deprecated */ + ["c-key"]?: unknown; + /** @deprecated */ + ["c-ref"]?: unknown; + /** @deprecated */ + ["c-static"]?: unknown; + /** @deprecated */ + $key?: unknown; + /** @deprecated */ + $ref?: unknown; + /** @deprecated */ + $static?: unknown; + } + export interface ElementChildrenAttribute { children: {}; } diff --git a/src/html.ts b/src/html.ts index 2855d315f..051622c50 100644 --- a/src/html.ts +++ b/src/html.ts @@ -56,6 +56,18 @@ function printAttrs(props: Record): string { switch (true) { case name === "children": case name === "innerHTML": + case name === "key": + case name === "ref": + case name === "static": + case name === "crank-key": + case name === "crank-ref": + case name === "crank-static": + case name === "c-key": + case name === "c-ref": + case name === "c-static": + case name === "$key": + case name === "$ref": + case name === "$static": break; case name === "style": { if (typeof value === "string") { diff --git a/src/jsx-runtime.ts b/src/jsx-runtime.ts index 6352566cf..8d1cb5eb2 100644 --- a/src/jsx-runtime.ts +++ b/src/jsx-runtime.ts @@ -4,9 +4,10 @@ import {createElement} from "./crank.js"; function jsxAdapter(tag: any, props: Record, key: any) { - // The new JSX transform extracts the key from props for reasons, but key is - // not a special property in Crank. - return createElement(tag, {...props, key}); + // The new JSX transform extracts the key from props for performance reasons, + // but key is not a special property in Crank. + props.key = key; + return createElement(tag, props); } export const Fragment = ""; diff --git a/test/copy.tsx b/test/copy.tsx index 66e467e57..4c521d2ce 100644 --- a/test/copy.tsx +++ b/test/copy.tsx @@ -18,7 +18,7 @@ test("copy of nothing", () => { }); test("copy of nothing keyed", () => { - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, ""); }); @@ -62,7 +62,7 @@ test("copy of nothing keyed between elements", () => { renderer.render(
1 - + 2
, document.body, @@ -118,9 +118,9 @@ test("elements replaced with keyed copies", () => { renderer.render(
- - - + + +
, document.body, ); @@ -173,11 +173,11 @@ test("copy array return value", () => { test("copy children", () => { let spans = [ - 2, - 3, - 4, - 5, - 6, + 2, + 3, + 4, + 5, + 6, ]; renderer.render(
@@ -198,7 +198,7 @@ test("copy children", () => { const span5 = document.body.firstChild!.childNodes[4]; const span6 = document.body.firstChild!.childNodes[5]; const span7 = document.body.firstChild!.childNodes[6]; - spans = spans.reverse().map((el) => ); + spans = spans.reverse().map((el) => ); renderer.render(
1 @@ -226,7 +226,7 @@ test("copy children", () => { Assert.is(document.body.firstChild!.childNodes[4], span3); Assert.is(document.body.firstChild!.childNodes[5], span2); Assert.is(document.body.firstChild!.childNodes[6], span7); - spans = spans.reverse().map((el) => ); + spans = spans.reverse().map((el) => ); renderer.render(
1 @@ -349,7 +349,7 @@ test("copy async generator siblings with refresh", async () => { test("refs", () => { renderer.render(
Hello
, document.body); const mock = Sinon.fake(); - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(mock.lastCall.args[0], document.body.firstChild); }); @@ -361,7 +361,7 @@ test("async refs", async () => { const p = renderer.render(, document.body); const mock = Sinon.fake(); - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(mock.callCount, 0); await p; Assert.is(mock.lastCall.args[0], document.body.firstChild); diff --git a/test/events.tsx b/test/events.tsx index 90550cfc0..94a617f6a 100644 --- a/test/events.tsx +++ b/test/events.tsx @@ -315,7 +315,7 @@ test("unmount and dispatch", () => { test("event props", () => { let ctx!: Context; - function Component(this: Context) { + function Component(this: Context, _props: {onfoo: (ev: Event) => any}) { ctx = this; return Hello; } diff --git a/test/jsx-tag.ts b/test/jsx-tag.ts index cfe56a5b1..8085adbfb 100644 --- a/test/jsx-tag.ts +++ b/test/jsx-tag.ts @@ -261,7 +261,7 @@ test("weird identifiers", () => { jsx` <$a $b$ _c> <-custom-element -prop="foo" _-_="bar" /> - <__ $key=${1}/> + <__ key=${1}/> `, createElement( @@ -269,7 +269,7 @@ test("weird identifiers", () => { {$b$: true, _c: true}, ...[ createElement("-custom-element", {"-prop": "foo", "_-_": "bar"}), - createElement("__", {$key: 1}), + createElement("__", {key: 1}), ], ), ); diff --git a/test/keys.tsx b/test/keys.tsx index f9bd47bf1..66785c9fe 100644 --- a/test/keys.tsx +++ b/test/keys.tsx @@ -17,11 +17,11 @@ test.after.each(() => { test("keys with no changes", () => { renderer.render(
- 1 - 2 - 3 - 4 - 5 + 1 + 2 + 3 + 4 + 5
, document.body, ); @@ -31,11 +31,11 @@ test("keys with no changes", () => { ); renderer.render(
- 1 - 2 - 3 - 4 - 5 + 1 + 2 + 3 + 4 + 5
, document.body, ); @@ -48,11 +48,11 @@ test("keys with no changes", () => { test("no shared keys", () => { renderer.render(
- 1 - 2 - 3 - 4 - 5 + 1 + 2 + 3 + 4 + 5
, document.body, ); @@ -67,11 +67,11 @@ test("no shared keys", () => { const span5 = document.body.firstChild!.childNodes[4]; renderer.render(
- 6 - 7 - 8 - 9 - 10 + 6 + 7 + 8 + 9 + 10
, document.body, ); @@ -89,7 +89,7 @@ test("no shared keys", () => { test("keyed child moves forward", () => { renderer.render(
- 1 + 1 2
, document.body, @@ -99,7 +99,7 @@ test("keyed child moves forward", () => { renderer.render(
0 - 1 + 1
, document.body, ); @@ -111,7 +111,7 @@ test("keyed child moves backward", () => { renderer.render(
1 - 2 + 2
, document.body, ); @@ -119,7 +119,7 @@ test("keyed child moves backward", () => { const span2 = document.body.firstChild!.lastChild; renderer.render(
- 2 + 2 3
, document.body, @@ -141,7 +141,7 @@ test("keyed child added between unkeyed children", () => { renderer.render(
1 - 2 + 2 3
, document.body, @@ -155,9 +155,9 @@ test("keyed child added between unkeyed children", () => { test("keyed array", () => { const spans = [ - 2, - 3, - 4, + 2, + 3, + 4, ]; renderer.render(
@@ -198,11 +198,11 @@ test("keyed array", () => { test("reversed keyed array", () => { const spans = [ - 2, - 3, - 4, - 5, - 6, + 2, + 3, + 4, + 5, + 6, ]; renderer.render(
@@ -272,7 +272,7 @@ test("reversed keyed array", () => { test("keyed child added", () => { renderer.render(
- 2 + 2
, document.body, ); @@ -280,8 +280,8 @@ test("keyed child added", () => { const span2 = document.body.firstChild!.lastChild; renderer.render(
- 1 - 2 + 1 + 2
, document.body, ); @@ -300,7 +300,7 @@ test("unkeyed replaced with keyed", () => { let span = document.body.firstChild!.firstChild; renderer.render(
- 1 + 1
, document.body, ); @@ -322,7 +322,7 @@ test("text and unkeyed and keyed children", () => {
Hello ... - World + World ...
, document.body, @@ -336,7 +336,7 @@ test("text and unkeyed and keyed children", () => { renderer.render(
... - World + World ... Hello
, @@ -351,7 +351,7 @@ test("text and unkeyed and keyed children", () => {
... Hello - World + World ...
, document.body, @@ -366,7 +366,7 @@ test("text and unkeyed and keyed children", () => { test("keyed children added before removed unkeyed child", () => { renderer.render(
-
1
+
1
2
, document.body, @@ -374,10 +374,10 @@ test("keyed children added before removed unkeyed child", () => { Assert.is(document.body.innerHTML, "
1
2
"); renderer.render(
- 1 - 2 - 3 - 4 + 1 + 2 + 3 + 4
, document.body, ); @@ -391,14 +391,14 @@ test("same key, different tag", () => { renderer.render(
0 - 1 + 1
, document.body, ); Assert.is(document.body.innerHTML, "
01
"); renderer.render(
-
1
+
1
2
, document.body, @@ -410,14 +410,14 @@ test("same key, different tag 2", () => { renderer.render(
0 - 1 + 1
, document.body, ); Assert.is(document.body.innerHTML, "
01
"); renderer.render(
-
1
+
1
0
, document.body, @@ -426,14 +426,14 @@ test("same key, different tag 2", () => { renderer.render(
0 - 1 + 1
, document.body, ); Assert.is(document.body.innerHTML, "
01
"); renderer.render(
-
1
+
1
0
, document.body, @@ -444,10 +444,10 @@ test("same key, different tag 2", () => { test("unkeyed elements added in random spots", () => { renderer.render(
- 1 - 2 - 3 - 4 + 1 + 2 + 3 + 4
, document.body, ); @@ -462,13 +462,13 @@ test("unkeyed elements added in random spots", () => { renderer.render(
0.5 - 1 + 1 1.5 - 2 + 2 2.5 - 3 + 3 3.5 - 4 + 4 4.5
, document.body, @@ -483,10 +483,10 @@ test("unkeyed elements added in random spots", () => { Assert.is(span4, document.body.firstChild!.childNodes[7]); renderer.render(
- 1 - 2 - 3 - 4 + 1 + 2 + 3 + 4
, document.body, ); @@ -503,12 +503,12 @@ test("unkeyed elements added in random spots", () => { test("moving a keyed item backwards", () => { renderer.render(
- 1 - 2 - 3 - 4 - 5 - 6 + 1 + 2 + 3 + 4 + 5 + 6
, document.body, ); @@ -524,12 +524,12 @@ test("moving a keyed item backwards", () => { const span6 = document.body.firstChild!.childNodes[5]; renderer.render(
- 1 - 5 - 2 - 3 - 4 - 6 + 1 + 5 + 2 + 3 + 4 + 6
, document.body, ); @@ -545,12 +545,12 @@ test("moving a keyed item backwards", () => { Assert.is(span6, document.body.firstChild!.childNodes[5]); renderer.render(
- 1 - 2 - 3 - 4 - 5 - 6 + 1 + 2 + 3 + 4 + 5 + 6
, document.body, ); @@ -569,12 +569,12 @@ test("moving a keyed item backwards", () => { test("moving a keyed item forwards", () => { renderer.render(
- 1 - 2 - 3 - 4 - 5 - 6 + 1 + 2 + 3 + 4 + 5 + 6
, document.body, ); @@ -590,12 +590,12 @@ test("moving a keyed item forwards", () => { const span6 = document.body.firstChild!.childNodes[5]; renderer.render(
- 1 - 3 - 4 - 5 - 2 - 6 + 1 + 3 + 4 + 5 + 2 + 6
, document.body, ); @@ -611,12 +611,12 @@ test("moving a keyed item forwards", () => { Assert.is(span6, document.body.firstChild!.childNodes[5]); renderer.render(
- 1 - 2 - 3 - 4 - 5 - 6 + 1 + 2 + 3 + 4 + 5 + 6
, document.body, ); @@ -634,12 +634,12 @@ test("moving a keyed item forwards", () => { test("swapping two keyed rows", () => { renderer.render(
- 1 - 2 - 3 - 4 - 5 - 6 + 1 + 2 + 3 + 4 + 5 + 6
, document.body, ); @@ -655,12 +655,12 @@ test("swapping two keyed rows", () => { const span6 = document.body.firstChild!.childNodes[5]; renderer.render(
- 1 - 5 - 3 - 4 - 2 - 6 + 1 + 5 + 3 + 4 + 2 + 6
, document.body, ); @@ -676,12 +676,12 @@ test("swapping two keyed rows", () => { Assert.is(span6, document.body.firstChild!.childNodes[5]); renderer.render(
- 1 - 2 - 3 - 4 - 5 - 6 + 1 + 2 + 3 + 4 + 5 + 6
, document.body, ); @@ -702,9 +702,9 @@ test("duplicate keys", () => { try { renderer.render(
- 1 - 2 - 3 + 1 + 2 + 3
, document.body, ); @@ -716,9 +716,9 @@ test("duplicate keys", () => { Assert.is(mock.callCount, 2); renderer.render(
- 1 - 2 - 3 + 1 + 2 + 3
, document.body, ); @@ -750,7 +750,7 @@ test("component unmounts with key", () => { } renderer.render( -
{[, , ]}
, +
{[, , ]}
, document.body, ); renderer.render(
{[, ]}
, document.body); @@ -770,8 +770,8 @@ test("changing list", () => { renderer.render(
- 1 - 2 + 1 + 2
, document.body, ); @@ -780,7 +780,7 @@ test("changing list", () => { renderer.render(
- 2 + 2
, document.body, ); diff --git a/test/provisions.tsx b/test/provisions.tsx index b50a9d5e5..4a3262ba3 100644 --- a/test/provisions.tsx +++ b/test/provisions.tsx @@ -15,7 +15,10 @@ declare module "../src/crank.js" { } } -function* Provider(this: Context): Generator { +function* Provider( + this: Context, + _props: {message?: string}, +): Generator { let i = 1; for (const {children, message = "Hello "} of this) { this.provide("greeting", message + i++); diff --git a/test/refs.tsx b/test/refs.tsx index 93e0fa718..73cdc6f0c 100644 --- a/test/refs.tsx +++ b/test/refs.tsx @@ -21,7 +21,7 @@ test.after.each(() => { test("basic", () => { const fn = Sinon.fake(); - renderer.render(
Hello
, document.body); + renderer.render(
Hello
, document.body); Assert.is(document.body.innerHTML, "
Hello
"); Assert.is(fn.callCount, 1); @@ -32,7 +32,7 @@ test("child", () => { const fn = Sinon.fake(); renderer.render(
- Hello + Hello
, document.body, ); @@ -46,7 +46,7 @@ test("Fragment element", () => { const fn = Sinon.fake(); renderer.render(
- + 1 2 3 @@ -69,7 +69,7 @@ test("Fragment element", () => { test("Raw element", () => { const fn = Sinon.fake(); renderer.render( - , + , document.body, ); @@ -88,7 +88,7 @@ test("function component", () => { renderer.render(
- +
, document.body, ); @@ -108,7 +108,7 @@ test("generator component", () => { renderer.render(
- +
, document.body, ); @@ -126,7 +126,7 @@ test("async function component", async () => { await renderer.render(
- +
, document.body, ); @@ -146,7 +146,7 @@ test("async generator component", async () => { await renderer.render(
- +
, document.body, ); @@ -166,7 +166,7 @@ test("transcluded in function component", async () => { return (
- Hello + Hello
); @@ -190,7 +190,7 @@ test("transcluded in async function component", async () => { return (
- Hello + Hello
); diff --git a/test/static.tsx b/test/static.tsx index 1f6a05f4a..4e1c8a7d4 100644 --- a/test/static.tsx +++ b/test/static.tsx @@ -12,12 +12,12 @@ test.after.each(() => { }); test("host", () => { - renderer.render(
Hello world
, document.body); + renderer.render(
Hello world
, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); renderer.render( -
+
Hello again
, document.body, @@ -30,15 +30,15 @@ test("component", () => { return
Hello {name}
; } - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello Bob
"); }); @@ -50,11 +50,11 @@ test("component refresh", () => { return
Hello {name}
; } - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); @@ -68,14 +68,11 @@ test("async component", async () => { return
Hello {name}
; } - await renderer.render( - , - document.body, - ); + await renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); const p1 = renderer.render( - , + , document.body, ); @@ -84,7 +81,7 @@ test("async component", async () => { Assert.is(document.body.innerHTML, "
Hello world
"); const p2 = renderer.render( - , + , document.body, ); @@ -101,14 +98,11 @@ test("async component refresh", async () => { return
Hello {name}
; } - await renderer.render( - , - document.body, - ); + await renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world
"); const p1 = renderer.render( - , + , document.body, ); @@ -132,7 +126,7 @@ test("inflight", async () => { const p1 = renderer.render(, document.body); const p2 = renderer.render( - , + , document.body, ); @@ -163,11 +157,11 @@ test("generator component", async () => { } } - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world 0
"); - renderer.render(, document.body); + renderer.render(, document.body); Assert.is(document.body.innerHTML, "
Hello world 0
"); @@ -178,7 +172,7 @@ test("generator component", async () => { test("isolate higher-order component", () => { function isolate(Component: any) { return function Wrapper(props: any) { - return ; + return ; }; } @@ -211,8 +205,8 @@ test("isolate higher-order component", () => { }); test("tag change", () => { - renderer.render(
Hello world
, document.body); - renderer.render(Hello world, document.body); + renderer.render(
Hello world
, document.body); + renderer.render(Hello world, document.body); Assert.is(document.body.innerHTML, "Hello world"); });