@potok-web-framework/core 0.1.0 → 0.2.0

package/src/html-element.ts

@@ -1,95 +0,0 @@
-import { LibBlock } from './block'
-import type { LibHTMLElementTagNameMap } from './prop-types'
-import { createEffect } from './signals'
-import type { LibContext, LibHtmlElementNode, PotokElement } from './types'
-import {
-  extractListenersFromProps,
-  mergeContext,
-  normalizeChildren,
-  objectKeys,
-} from './utils'
-
-export type LibHTMLElementProps<Tag extends keyof LibHTMLElementTagNameMap> = {
-  tag: Tag
-} & LibHTMLElementTagNameMap[Tag]
-
-class LibHTMLElement<
-  Tag extends keyof LibHTMLElementTagNameMap
-> extends LibBlock {
-  constructor(
-    readonly props: LibHTMLElementProps<Tag>,
-    readonly context: LibContext
-  ) {
-    super()
-
-    const element: LibHtmlElementNode<Tag> = {
-      type: 'html-element',
-      context,
-      props,
-    }
-
-    this.node = element
-
-    const descriptors = Object.getOwnPropertyDescriptors(props)
-
-    for (const [key, descriptor] of Object.entries(descriptors)) {
-      if (['tag', 'children', 'ref'].includes(key)) {
-        continue
-      }
-
-      if (descriptor.value) {
-        context.updateHtmlElementNodeProp(element, key, descriptor.value)
-      }
-
-      const getter = descriptor.get
-      if (getter) {
-        this.addEffect(
-          createEffect(() => {
-            context.updateHtmlElementNodeProp(element, key, getter())
-          }, true)
-        )
-      }
-    }
-
-    if (context.isHydrating) {
-      this.insertNode()
-    }
-
-    normalizeChildren(props.children).forEach((childCreator, index) => {
-      this.children.push(
-        childCreator(
-          mergeContext(context, {
-            parentBlock: this,
-            index,
-          })
-        )
-      )
-    })
-
-    if (!context.isHydrating) {
-      this.insertNode()
-    }
-  }
-
-  override unmount() {
-    if (this.node) {
-      objectKeys(extractListenersFromProps(this.props)).forEach((key) => {
-        this.context.listeners[key]?.delete(this.node as unknown as HTMLElement)
-      })
-    }
-
-    if (this.props.ref) {
-      this.props.ref.element = null
-    }
-
-    super.unmount()
-  }
-}
-
-export function htmlElement<Tag extends keyof LibHTMLElementTagNameMap>(
-  props: LibHTMLElementProps<Tag>
-): PotokElement {
-  return function (context: LibContext) {
-    return new LibHTMLElement(props, context)
-  }
-}

package/src/jsx-types.ts

@@ -1,13 +0,0 @@
-import { LibHTMLElementTagNameMap } from './prop-types'
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements extends LibHTMLElementTagNameMap {}
-
-    interface ElementChildrenAttribute {
-      children: {}
-    }
-  }
-}
-
-export {}

package/src/lazy.ts

@@ -1,44 +0,0 @@
-import { fragment } from './fragment'
-import { LibContextReader } from './lib-context-reader'
-import { Show } from './show'
-import { createSignal } from './signals'
-import { PotokElement } from './types'
-
-export type LazyProps<Module> = {
-  import: () => Promise<Module>
-  resolve: (module: Module) => PotokElement
-  fallback?: PotokElement
-}
-
-export function Lazy<Module>(props: LazyProps<Module>): PotokElement {
-  return LibContextReader({
-    children: (context) => {
-      const signal = createSignal({
-        block: null as PotokElement | null,
-      })
-
-      context.promises.push(
-        props.import().then((module) => {
-          signal.block = props.resolve(module)
-        }),
-      )
-
-      return fragment({
-        children: [
-          Show({
-            get when() {
-              return signal.block !== null
-            },
-            children: [signal.block!],
-          }),
-          Show({
-            get when() {
-              return signal.block === null
-            },
-            children: [props.fallback],
-          }),
-        ],
-      })
-    },
-  })
-}

package/src/lib-context-reader.ts

@@ -1,33 +0,0 @@
-import { LibBlock } from './block'
-import type { LibContext, MaybeArray, PotokElement } from './types'
-import { mergeContext, normalizeArray } from './utils'
-
-export type LibContextReaderProps = {
-  children: MaybeArray<(context: LibContext) => PotokElement>
-}
-
-class LibContextReaderClass extends LibBlock {
-  constructor(
-    readonly props: LibContextReaderProps,
-    readonly context: LibContext
-  ) {
-    super()
-
-    normalizeArray(props.children).forEach((childCreator, index) => {
-      this.children.push(
-        childCreator(context)(
-          mergeContext(context, {
-            parentBlock: this,
-            index,
-          })
-        )
-      )
-    })
-  }
-}
-
-export function LibContextReader(props: LibContextReaderProps): PotokElement {
-  return function (context: LibContext) {
-    return new LibContextReaderClass(props, context)
-  }
-}

package/src/lib-scripts.ts

@@ -1,8 +0,0 @@
-import { PortalOut } from './portal'
-import { PotokElement } from './types'
-
-export function LibScripts(): PotokElement {
-  return PortalOut({
-    name: 'lib-scripts',
-  })
-}

package/src/lifecycle.ts

@@ -1,44 +0,0 @@
-import { LibBlock } from './block'
-import type { LibContext, PotokElement, WithChildren } from './types'
-import { mergeContext, normalizeChildren } from './utils'
-
-type OnMoutedReturnCallback = () => void
-
-export type LifecycleProps = WithChildren<{
-  onMounted?: () => OnMoutedReturnCallback | void
-  onUnmounted?: () => void
-}>
-
-class LifecycleClass extends LibBlock {
-  private onMountedReturn?: OnMoutedReturnCallback | void
-
-  constructor(readonly props: LifecycleProps, readonly context: LibContext) {
-    super()
-
-    normalizeChildren(props.children).forEach((childCreator, index) => {
-      this.children.push(
-        childCreator(
-          mergeContext(context, {
-            parentBlock: this,
-            index,
-          })
-        )
-      )
-    })
-
-    this.onMountedReturn = props.onMounted?.()
-  }
-
-  override unmount() {
-    super.unmount()
-
-    this.onMountedReturn?.()
-    this.props.onUnmounted?.()
-  }
-}
-
-export function Lifecycle(props: LifecycleProps): PotokElement {
-  return function (context: LibContext) {
-    return new LifecycleClass(props, context)
-  }
-}

package/src/list.ts

@@ -1,175 +0,0 @@
-import { LibBlock } from './block'
-import {
-  createEffect,
-  createSignal,
-  deepTrack,
-  getSignal,
-  isSignal,
-  untrack,
-  type Signal,
-} from './signals'
-import type { LibContext, PotokElement } from './types'
-import { mergeContext } from './utils'
-
-export type ListProps<Item> = {
-  items: Item[]
-  render: (each: { item: Item; index: number }) => PotokElement
-}
-
-type ArrayDiff<Item> =
-  | {
-      type: 'delete'
-      index: number
-    }
-  | {
-      type: 'add'
-      index: number
-      item: Item
-    }
-  | {
-      type: 'replace'
-      index: number
-      oldItem: Item
-      newItem: Item
-    }
-
-class ListClass<Item> extends LibBlock {
-  signals: Signal<{
-    item: Item
-    index: number
-  }>[] = []
-
-  constructor(readonly props: ListProps<Item>, readonly context: LibContext) {
-    super()
-
-    let prevItems: Item[] = []
-
-    this.addEffect(
-      createEffect(() => {
-        const items = props.items
-
-        if (isSignal(items)) {
-          deepTrack(items, 1)
-        }
-
-        untrack(() => {
-          const changes = this.diff(prevItems, items)
-
-          changes.forEach((change) => {
-            if (change.type === 'add') {
-              const signal = createSignal({
-                item: change.item,
-                index: change.index,
-              })
-
-              this.children.splice(change.index, 0, null)
-              this.signals.splice(change.index, 0, getSignal(signal)!)
-
-              const creator = props.render(signal)
-
-              const block = creator(
-                mergeContext(context, {
-                  parentBlock: this,
-                  get index() {
-                    return signal.index
-                  },
-                })
-              )
-
-              this.children[change.index] = block
-            } else if (change.type === 'replace') {
-              this.signals[change.index]!.proxy.item = change.newItem
-            } else if (change.type === 'delete') {
-              const child = this.children[change.index]
-              this.children.splice(change.index, 1)
-              this.signals.splice(change.index, 1)
-              child?.unmount()
-            }
-          })
-
-          this.signals.forEach((signal, index) => {
-            if (signal.value.index !== index) {
-              signal.proxy.index = index
-            }
-          })
-
-          prevItems = [...items]
-        })
-      }, true)
-    )
-  }
-
-  diff(firstArray: Item[], secondArray: Item[]): ArrayDiff<Item>[] {
-    const paths: number[][] = []
-
-    for (let y = 0; y <= firstArray.length; y++) {
-      paths.push([y])
-
-      for (let x = 1; x <= secondArray.length; x++) {
-        if (y === 0) {
-          paths[y]!.push(x)
-        } else {
-          const top = paths[y - 1]![x]! + 1
-          const left = paths[y]![x - 1]! + 1
-          const topLeft =
-            paths[y - 1]![x - 1]! +
-            (firstArray[y - 1] !== secondArray[x - 1] ? 1 : 0)
-
-          paths[y]!.push(Math.min(top, left, topLeft))
-        }
-      }
-    }
-
-    const diffs: ArrayDiff<Item>[] = []
-
-    let x = secondArray.length
-    let y = firstArray.length
-
-    while (x > 0 || y > 0) {
-      const top = y > 0 ? paths[y - 1]![x]! : Infinity
-      const left = x > 0 ? paths[y]![x - 1]! : Infinity
-      const topLeft = y > 0 && x > 0 ? paths[y - 1]![x - 1]! : Infinity
-
-      const min = Math.min(top, left, topLeft)
-
-      if (min === topLeft) {
-        if (firstArray[y - 1] !== secondArray[x - 1]) {
-          diffs.push({
-            type: 'replace',
-            index: y - 1,
-            oldItem: firstArray[y - 1]!,
-            newItem: secondArray[x - 1]!,
-          })
-        }
-        x--
-        y--
-      } else if (min === top) {
-        diffs.push({
-          type: 'delete',
-          index: y - 1,
-        })
-        y--
-      } else {
-        diffs.push({
-          type: 'add',
-          index: y,
-          item: secondArray[x - 1]!,
-        })
-        x--
-      }
-    }
-
-    return diffs
-  }
-
-  override unmount() {
-    super.unmount()
-    this.signals = []
-  }
-}
-
-export function List<Item>(props: ListProps<Item>): PotokElement {
-  return function (context: LibContext) {
-    return new ListClass(props, context)
-  }
-}

package/src/portal.ts

@@ -1,101 +0,0 @@
-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)
-  }
-}