BREAKING: fix typechecking for async components

This change is unfortunately necessary until either
microsoft/TypeScript#61620 (a new issue
reported by me) or microsoft/TypeScript#21699
(a longstanding old issue unlikely to be fixed) are resolved.

TypeScript uses the JSX.Element type to determine the type of any
JSX expression. It is not possible for two different JSX expressions to
evaluate to different types.

Gooey supports asynchronous components, **but** in order for this to
work a component must be defined as something that returns a
JSX.Element; so JSX.Element must be extended to become:

    RenderNode | (Promise<RenderNode> & Partial<RenderNode>)

This extension of (Promise<RenderNode> & Partial<RenderNode>) means that
in practice, users can easily call rendernode methods (like `.retain()`) via:

    const jsx = <div />;
    jsx.retain?.();
    // ...
    jsx.release?.();

Which should always work, as the `createElement` jsxFactory function
always returns a `RenderNode`.

It's really unfortunate that the optional chaining operation is needed
here.

Hopefully when either of those issues are fixed, the JSX evaluation type
can be separated from the function component return type.

Author: sufianrhazi

src/demos/garbage-test/garbage-test.tsx

@@ -1,13 +1,12 @@
-import type {
-    Component} from '../../index';
+import type { Component } from '../../index';
 import Gooey, {
-    mount,
-    collection,
-    model,
     calc,
-    subscribe,
+    collection,
     flush,
     IntrinsicObserver,
+    model,
+    mount,
+    subscribe,
 } from '../../index';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -463,7 +462,7 @@ const App = () => (
                     const components = strings.map((item) => (
                         <MyComponent name={item} />
                     ));
-                    components.forEach((component) => component.retain());
+                    components.forEach((component) => component.retain?.());
                     const unmount = mount(
                         el,
                         <>{calc(() => state.isMounted && components)}</>
@@ -479,7 +478,7 @@ const App = () => (
                         destroy: () => {
                             unmount();
                             components.forEach((component) =>
-                                component.release()
+                                component.release?.()
                             );
                         },
                     };

src/demos/teleportation/teleportation.tsx

@@ -1,5 +1,5 @@
-import type { Component} from '../../index';
-import Gooey, { mount, model, calc } from '../../index';
+import type { Component } from '../../index';
+import Gooey, { calc, model, mount } from '../../index';
 
 const appRoot = document.getElementById('app');
 if (!appRoot) {
@@ -34,12 +34,12 @@ const Example: Component<{ children: JSX.Element }> = (
         left: false,
     });
     onMount(() => {
-        children.retain();
+        children.retain?.();
         const handle = setInterval(() => {
             state.left = !state.left;
         }, 3000);
         return () => {
-            children.release();
+            children.release?.();
             clearInterval(handle);
         };
     });

src/viewcontroller/jsx.ts

@@ -52,7 +52,7 @@ declare global {
         /**
          * The core type produced by a JSX expression
          */
-        type Element = RenderNode;
+        type Element = RenderNode | (Promise<RenderNode> & Partial<RenderNode>);
 
         /**
          * The core type allowable as a child node in a JSX expression

src/viewcontroller/mount.ts

@@ -1,5 +1,6 @@
 import * as log from '../common/log';
 import { flush } from '../model/engine';
+import { renderJSXNode } from './renderjsx';
 import { ArrayRenderNode } from './rendernode/arrayrendernode';
 import { ForeignRenderNode } from './rendernode/foreignrendernode';
 import { PortalRenderNode } from './rendernode/portalrendernode';
@@ -8,14 +9,14 @@ import { HTML_NAMESPACE } from './xmlnamespace';
 
 export function mount(
     target: Element | ShadowRoot,
-    node: RenderNode
+    node: JSX.Node
 ): () => void {
     const skipNodes = target.childNodes.length;
     const children: RenderNode[] = [];
     for (let i = 0; i < target.childNodes.length; ++i) {
         children.push(ForeignRenderNode(target.childNodes[i]));
     }
-    children.push(node);
+    children.push(renderJSXNode(node));
     const root = PortalRenderNode(
         target,
         ArrayRenderNode(children),

src/viewcontroller/rendernode/componentrendernode.ts

@@ -66,7 +66,7 @@ export function ComponentRenderNode<TProps>(
     let onUnmountCallbacks: undefined | (() => void)[];
     let onDestroyCallbacks: undefined | (() => void)[];
     let owned: Set<Retainable> = new Set();
-    let errorHandler: undefined | ((e: Error) => RenderNode | null);
+    let errorHandler: undefined | ((e: Error) => JSX.Element | null);
 
     function ensureResult() {
         if (!result) {
@@ -96,7 +96,7 @@ export function ComponentRenderNode<TProps>(
                     if (!onDestroyCallbacks) onDestroyCallbacks = [];
                     onDestroyCallbacks.push(handler);
                 },
-                onError: (handler: (e: Error) => RenderNode | null) => {
+                onError: (handler: (e: Error) => JSX.Element | null) => {
                     log.assert(
                         callbacksAllowed,
                         'onError must be called in component body'
@@ -116,7 +116,7 @@ export function ComponentRenderNode<TProps>(
             } else {
                 componentProps = props ? { ...props, children } : { children };
             }
-            let jsxResult: RenderNode | Error;
+            let jsxResult: JSX.Element | Error;
             try {
                 jsxResult =
                     Component(componentProps, lifecycle) || emptyRenderNode;

src/viewcontroller/rendernode/webcomponentrendernode.ts

@@ -134,7 +134,7 @@ export function WebComponentRenderNode<
     let onUnmountCallbacks: undefined | (() => void)[];
     let onDestroyCallbacks: undefined | (() => void)[];
     const owned: Set<Retainable> = new Set();
-    let errorHandler: ((e: Error) => RenderNode | null) | undefined;
+    let errorHandler: ((e: Error) => JSX.Element | null) | undefined;
 
     function ensureResult() {
         if (!result) {
@@ -164,7 +164,7 @@ export function WebComponentRenderNode<
                     if (!onDestroyCallbacks) onDestroyCallbacks = [];
                     onDestroyCallbacks.push(handler);
                 },
-                onError: (handler: (e: Error) => RenderNode | null) => {
+                onError: (handler: (e: Error) => JSX.Element | null) => {
                     log.assert(
                         callbacksAllowed,
                         'onError must be called in component body'
@@ -298,7 +298,7 @@ export function WebComponentRenderNode<
                           ...fields,
                       };
             const Component = options.Component;
-            let jsxResult: RenderNode | Error;
+            let jsxResult: JSX.Element | Error;
             try {
                 jsxResult =
                     Component(componentProps, lifecycle) || emptyRenderNode;

src/viewcontroller/view.test.tsx

@@ -495,7 +495,7 @@ suite('mount static', () => {
                 hello
             </div>
         );
-        const dest = source.clone({ class: 'dest', 'data-cloned': 'true' }, [
+        const dest = source.clone?.({ class: 'dest', 'data-cloned': 'true' }, [
             <>howdy</>,
         ]);
         mount(
@@ -555,7 +555,7 @@ suite('mount static', () => {
                 </span>
             </div>
         );
-        const dest = source.clone();
+        const dest = source.clone?.();
         mount(
             testRoot,
             <>
@@ -763,7 +763,7 @@ suite('mount calculations', () => {
                 {calc(() => state.content)}
             </div>
         );
-        jsx.retain();
+        jsx.retain?.();
         const unmount = mount(testRoot, jsx);
         const divEl = testRoot.querySelector('#ok');
         unmount();
@@ -903,7 +903,7 @@ suite('mount components', () => {
         };
 
         const jsx = <Greet />;
-        jsx.retain();
+        jsx.retain?.();
 
         let unmount = mount(testRoot, jsx);
         assert.deepEqual(['render', 'onMount:1'], sequence);
@@ -1339,7 +1339,7 @@ suite('mount class components', () => {
         }
 
         const jsx = <Greet />;
-        jsx.retain();
+        jsx.retain?.();
 
         let unmount = mount(testRoot, jsx);
         assert.deepEqual(['construct', 'render', 'onMount:1'], sequence);
@@ -2307,7 +2307,7 @@ suite('mount collection mapped view', () => {
         const jsx = <>{items.mapView((item) => calc(() => <>{item}</>))}</>;
         const unmount = mount(testRoot, jsx);
         assert.is('foobarbazbum', testRoot.textContent);
-        jsx.retain();
+        jsx.retain?.();
         unmount();
         items.shift();
         items.pop();
@@ -2325,7 +2325,7 @@ suite('mount collection mapped view', () => {
         const jsx = <>{items.mapView((item) => calc(() => <>{item}</>))}</>;
         const unmount = mount(testRoot, jsx);
         assert.is('foobarbazbum', testRoot.textContent);
-        jsx.retain();
+        jsx.retain?.();
         unmount();
         items.shift();
         items.pop();
@@ -3131,7 +3131,7 @@ suite('rendered node reuse', () => {
         };
         const state = model({ isMounted: false });
         const jsx = <p ref={refFunc}>hello, world!</p>;
-        jsx.retain();
+        jsx.retain?.();
         mount(testRoot, <div>{calc(() => state.isMounted && jsx)}</div>);
 
         assert.deepEqual([], references);
@@ -3203,7 +3203,7 @@ suite('rendered node reuse', () => {
                 </p>
             </div>
         );
-        jsx.retain();
+        jsx.retain?.();
         mount(testRoot, <div>{calc(() => state.isMounted && jsx)}</div>);
 
         assert.deepEqual([], references);
@@ -3279,7 +3279,7 @@ suite('rendered node reuse', () => {
                 <strong>hello</strong>, <em>world</em>!
             </span>
         );
-        jsx.retain();
+        jsx.retain?.();
         mount(
             testRoot,
             <div>
@@ -3324,7 +3324,7 @@ suite('rendered node reuse', () => {
                 <strong>hello</strong>, <em>world</em>!
             </span>
         );
-        jsx.retain();
+        jsx.retain?.();
         const leftMount = document.createElement('div');
         const rightMount = document.createElement('div');
 
@@ -3375,7 +3375,7 @@ suite('rendered node reuse', () => {
                 <strong>hello</strong>, <em>world</em>!
             </button>
         );
-        jsx.retain();
+        jsx.retain?.();
         const leftMount = document.createElement('div');
         const rightMount = document.createElement('div');
 
@@ -5501,7 +5501,7 @@ suite('custom elements', () => {
             <div id="f">f</div>,
         ];
         for (const rn of jsx) {
-            rn.retain();
+            rn.retain?.();
         }
 
         const indexOffset = field(0);
@@ -5586,7 +5586,7 @@ suite('custom elements', () => {
 
         unmount();
         for (const rn of jsx) {
-            rn.release();
+            rn.release?.();
         }
     });