@potok-web-framework/core 0.1.0

package/src/portal.ts

@@ -0,0 +1,101 @@
+import { LibBlock } from './block'
+import { createEffect, untrack } from './signals'
+import type { LibContext, PotokElement, WithChildren } from './types'
+import { mergeContext, normalizeChildren } from './utils'
+
+type PortalInProps = WithChildren<{
+  name: string
+}>
+
+class PortalInClass extends LibBlock {
+  constructor(
+    readonly props: PortalInProps,
+    readonly context: LibContext,
+  ) {
+    super()
+
+    let previousName: string
+
+    if (context.portals[props.name]) {
+      console.warn(`Портал ${props.name} уже существует`)
+    } else {
+      this.addEffect(
+        createEffect(() => {
+          const name = props.name
+
+          if (name !== previousName) {
+            untrack(() => {
+              delete context.portals[name]
+              context.portals[name] = props.children
+            })
+          }
+
+          previousName = name
+        }),
+      )
+    }
+  }
+
+  override unmount() {
+    super.unmount()
+    delete this.context.portals[this.props.name]
+  }
+}
+
+export function PortalIn(props: PortalInProps): PotokElement {
+  return function (context: LibContext) {
+    return new PortalInClass(props, context)
+  }
+}
+
+type PortalOutProps = {
+  name: string
+}
+
+class PortalOutClass extends LibBlock {
+  constructor(
+    readonly props: PortalOutProps,
+    readonly context: LibContext,
+  ) {
+    super()
+
+    let previousChildren: PotokElement[] | null
+
+    this.addEffect(
+      createEffect(() => {
+        const name = props.name
+
+        const children = normalizeChildren(context.portals[name])
+
+        if (!children) {
+          this.unmountChildren()
+
+          previousChildren = null
+        } else if (children !== previousChildren) {
+          this.unmountChildren()
+
+          untrack(() => {
+            children.forEach((childCreator, index) => {
+              this.children.push(
+                childCreator(
+                  mergeContext(context, {
+                    parentBlock: this,
+                    index,
+                  }),
+                ),
+              )
+            })
+          })
+
+          previousChildren = children
+        }
+      }),
+    )
+  }
+}
+
+export function PortalOut(props: PortalOutProps): PotokElement {
+  return function (context: LibContext) {
+    return new PortalOutClass(props, context)
+  }
+}