@potok-web-framework/core 0.1.0

package/src/hmr/register-component.ts

@@ -0,0 +1,109 @@
+import { fragment } from '../fragment'
+import { Lifecycle } from '../lifecycle'
+import { LibContextReader } from '../lib-context-reader'
+import { Show } from '../show'
+import { createSignal } from '../signals'
+import { Component, ComponentProps, LibContext, PotokElement } from '../types'
+import { getComponentInstanceId, isWindowDefined } from './utils'
+import { HMR_DEV } from './hmr-dev'
+
+export function registerComponent<Props extends ComponentProps>(
+  component: (props: Props) => PotokElement,
+  moduleId: string,
+  componentId: string,
+): Component<Props> {
+  if (!isWindowDefined()) {
+    return component
+  }
+
+  const registeredComponent = HMR_DEV.registry.addComponent(
+    moduleId,
+    componentId,
+    component,
+  )
+  HMR_DEV.registry.notifyComponentUpdate(moduleId, componentId)
+
+  function renderComponent(
+    props: Props,
+    context: LibContext,
+    ignoreCache = false,
+  ) {
+    const instanceId = getComponentInstanceId(context)
+    const cachedInstance = registeredComponent.getCachedInstance(instanceId)
+
+    if (!ignoreCache && cachedInstance) {
+      return cachedInstance.element
+    }
+
+    HMR_DEV.currentInstance = {
+      states: cachedInstance ? cachedInstance.states : [],
+      stateIndex: 0,
+    }
+
+    const element = registeredComponent.component(props)
+    registeredComponent.addCachedInstance(
+      instanceId,
+      element,
+      HMR_DEV.currentInstance.states,
+    )
+    HMR_DEV.currentInstance = null
+
+    return element
+  }
+
+  return (props: Props) => {
+    return LibContextReader({
+      children(context) {
+        const value = createSignal({
+          element: renderComponent(props, context) as PotokElement | null,
+        })
+
+        const instanceId = getComponentInstanceId(context)
+
+        return Lifecycle({
+          onMounted() {
+            const unsubscribe = HMR_DEV.registry.subscribeToComponent(
+              moduleId,
+              componentId,
+              () => {
+                value.element = null
+                value.element = renderComponent(props, context, true)
+              },
+            )
+
+            registeredComponent.unmarkInstanceAsRemovable(instanceId)
+
+            return () => {
+              unsubscribe()
+
+              registeredComponent.markInstanceAsRemovable(instanceId)
+
+              setTimeout(() => {
+                const cachedInstance =
+                  registeredComponent.getCachedInstance(instanceId)
+
+                if (cachedInstance?.isRemovable) {
+                  registeredComponent.removeCachedInstance(instanceId)
+                }
+              })
+            }
+          },
+          children: [
+            Show({
+              get when() {
+                return value.element !== null
+              },
+              children: [
+                fragment({
+                  get children() {
+                    return [value.element!]
+                  },
+                }),
+              ],
+            }),
+          ],
+        })
+      },
+    })
+  }
+}

package/src/hmr/registered-component.ts

@@ -0,0 +1,59 @@
+import { Component, PotokElement } from '../types'
+import { HMRSubscriber } from './types'
+
+export type CachedInstanceState = {
+  current: unknown
+  initial: unknown
+}
+
+type CachedInstance = {
+  isRemovable: boolean
+  element: PotokElement
+  states: CachedInstanceState[]
+}
+
+export class RegisteredComponent {
+  component: Component<any>
+  subscribers: Set<HMRSubscriber>
+  private cachedInstances: Map<string, CachedInstance>
+
+  constructor(component: Component<any>) {
+    this.component = component
+    this.subscribers = new Set()
+    this.cachedInstances = new Map()
+  }
+
+  getCachedInstance(instanceId: string): CachedInstance | undefined {
+    return this.cachedInstances.get(instanceId)
+  }
+
+  addCachedInstance(
+    instanceId: string,
+    element: PotokElement,
+    states: CachedInstanceState[],
+  ) {
+    this.cachedInstances.set(instanceId, {
+      isRemovable: false,
+      element,
+      states,
+    })
+  }
+
+  markInstanceAsRemovable(instanceId: string) {
+    const cachedInstance = this.cachedInstances.get(instanceId)
+    if (cachedInstance) {
+      cachedInstance.isRemovable = true
+    }
+  }
+
+  unmarkInstanceAsRemovable(instanceId: string) {
+    const cachedInstance = this.cachedInstances.get(instanceId)
+    if (cachedInstance) {
+      cachedInstance.isRemovable = false
+    }
+  }
+
+  removeCachedInstance(instanceId: string) {
+    this.cachedInstances.delete(instanceId)
+  }
+}

package/src/hmr/registry.ts

@@ -0,0 +1,78 @@
+import { Component } from '../types'
+import { ComponentId, HMRSubscriber, ModudeId } from './types'
+import { RegisteredComponent } from './registered-component'
+
+export class HMRRegistry {
+  private components: Map<ModudeId, Map<ComponentId, RegisteredComponent>> =
+    new Map()
+
+  private getModuleComponentsMap(moduleId: ModudeId) {
+    if (!this.components.has(moduleId)) {
+      this.components.set(moduleId, new Map())
+    }
+
+    return this.components.get(moduleId)!
+  }
+
+  addComponent(
+    moduleId: ModudeId,
+    componentId: ComponentId,
+    component: Component<any>,
+  ): RegisteredComponent {
+    const moduleComponentsMap = this.getModuleComponentsMap(moduleId)
+
+    if (!moduleComponentsMap.has(componentId)) {
+      moduleComponentsMap.set(componentId, new RegisteredComponent(component))
+    }
+
+    const registeredComponent = moduleComponentsMap.get(componentId)!
+
+    registeredComponent.component = component
+
+    return registeredComponent
+  }
+
+  getRegisteredComponent(
+    moduleId: ModudeId,
+    componentId: ComponentId,
+  ): RegisteredComponent | undefined {
+    return this.getModuleComponentsMap(moduleId).get(componentId)
+  }
+
+  subscribeToComponent(
+    moduleId: ModudeId,
+    componentId: ComponentId,
+    subscriber: HMRSubscriber,
+  ) {
+    this.getRegisteredComponent(moduleId, componentId)?.subscribers.add(
+      subscriber,
+    )
+
+    return () => {
+      this.unsubscribeFromComponent(moduleId, componentId, subscriber)
+    }
+  }
+
+  unsubscribeFromComponent(
+    moduleId: ModudeId,
+    componentId: ComponentId,
+    subscriber: HMRSubscriber,
+  ) {
+    this.getRegisteredComponent(moduleId, componentId)?.subscribers.delete(
+      subscriber,
+    )
+  }
+
+  notifyComponentUpdate(moduleId: ModudeId, componentId: ComponentId) {
+    const registeredComponent = this.getRegisteredComponent(
+      moduleId,
+      componentId,
+    )
+
+    if (!registeredComponent) return
+
+    for (const subscriber of registeredComponent.subscribers) {
+      subscriber(registeredComponent)
+    }
+  }
+}

package/src/hmr/types.ts

@@ -0,0 +1,6 @@
+import { RegisteredComponent } from './registered-component'
+
+export type HMRSubscriber = (component: RegisteredComponent | undefined) => void
+
+export type ModudeId = string
+export type ComponentId = string

package/src/hmr/utils.ts

@@ -0,0 +1,20 @@
+import { LibContext } from '../types'
+
+export function isWindowDefined(): boolean {
+  return typeof window !== 'undefined'
+}
+
+export function getComponentInstanceId(context: LibContext): string {
+  const indexes: number[] = []
+
+  let currentContext: LibContext | null = context
+
+  while (currentContext) {
+    indexes.push(currentContext.index)
+    currentContext = currentContext.parentBlock
+      ? currentContext.parentBlock.context
+      : null
+  }
+
+  return indexes.reverse().join('_')
+}

package/src/html-element.ts

@@ -0,0 +1,95 @@
+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

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

package/src/lazy.ts

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,33 @@
+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

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

package/src/lifecycle.ts

@@ -0,0 +1,44 @@
+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

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