feat: async component

packages/core/src/optional/asyncComponent.ts

@@ -0,0 +1,113 @@
+import { ChildrenFlags } from '../flags'
+import { createComponentVNode, VNodeData } from '../vdom'
+import { Component, ComponentType, FunctionalComponent } from '../component'
+
+export interface AsyncComponentFactory {
+  (): Promise<ComponentType>
+  resolved?: ComponentType
+}
+
+export interface AsyncComponentFullOptions {
+  factory: AsyncComponentFactory
+  loading?: ComponentType
+  error?: ComponentType
+  delay?: number
+  timeout?: number
+}
+
+export type AsyncComponentOptions =
+  | AsyncComponentFactory
+  | AsyncComponentFullOptions
+
+interface AsyncContainerData {
+  comp: ComponentType | null
+  err: Error | null
+  timedOut: boolean
+}
+
+interface AsyncContainerProps {
+  options: AsyncComponentFullOptions
+  rawData: VNodeData | null
+}
+
+export class AsyncContainer extends Component<
+  AsyncContainerData,
+  AsyncContainerProps
+> {
+  data() {
+    return {
+      comp: null,
+      err: null,
+      timedOut: false
+    }
+  }
+
+  created() {
+    const { factory, timeout } = this.$props.options
+    if (factory.resolved) {
+      this.comp = factory.resolved
+    } else {
+      factory()
+        .then(resolved => {
+          this.comp = factory.resolved = resolved
+        })
+        .catch(err => {
+          this.err = err
+        })
+    }
+    if (timeout != null) {
+      setTimeout(() => {
+        this.timedOut = true
+      }, timeout)
+    }
+  }
+
+  render(props: AsyncContainerProps) {
+    if (this.err || (this.timedOut && !this.comp)) {
+      const error =
+        this.err ||
+        new Error(`Async component timed out after ${props.options.timeout}ms.`)
+      const errorComp = props.options.error
+      return errorComp
+        ? createComponentVNode(
+            errorComp,
+            { error },
+            null,
+            ChildrenFlags.NO_CHILDREN
+          )
+        : null
+    } else if (this.comp) {
+      return createComponentVNode(
+        this.comp,
+        props.rawData,
+        null,
+        ChildrenFlags.UNKNOWN_CHILDREN
+      )
+    } else {
+      const loadingComp = props.options.loading
+      return loadingComp
+        ? createComponentVNode(
+            loadingComp,
+            null,
+            null,
+            ChildrenFlags.NO_CHILDREN
+          )
+        : null
+    }
+  }
+}
+
+export function createAsyncComponent(
+  options: AsyncComponentOptions
+): FunctionalComponent {
+  if (typeof options === 'function') {
+    options = { factory: options }
+  }
+  return (_, __, ___, rawData) =>
+    createComponentVNode(
+      AsyncContainer,
+      { options, rawData },
+      null,
+      ChildrenFlags.NO_CHILDREN
+    )
+}

packages/core/src/optional/context.ts

@@ -2,7 +2,7 @@ import { observable } from '@vue/observer'
 import { Component } from '../component'
 import { Slots } from '../vdom'
 
-const contextStore = observable() as Record<string, any>
+const contextStore = observable() as Record<string | symbol, any>
 
 export class Provide extends Component {
   updateValue() {
@@ -40,7 +40,7 @@ if (__DEV__) {
   Provide.options = {
     props: {
       id: {
-        type: String,
+        type: [String, Symbol],
         required: true
       },
       value: {