@potok-web-framework/core 0.1.0 → 0.2.0

package/src/ref.ts

@@ -1,11 +0,0 @@
-import { createSignal } from './signals'
-
-export type LibHTMLElementReference<Element extends HTMLElement> = {
-  element: Element | null
-}
-
-export function createElementReference<Element extends HTMLElement>() {
-  return createSignal({
-    element: null as Element | null,
-  })
-}

package/src/render-to-dom.ts

@@ -1,325 +0,0 @@
-import { HTML_ELEMENT_STYLE_PX_PROPERTIES } from './constants'
-import type { LibHTMLElementEventMap } from './prop-types'
-import { createEffect, createSignal, deepTrack, untrack } from './signals'
-import type { LibContext, LibNode, PotokElement, WithChildren } from './types'
-import { objectKeys } from './utils'
-
-type RenderToDOMOptions = {
-  app: () => PotokElement
-  needToHydrate?: boolean
-  root?: Element
-}
-
-export function renderToDOM(options: RenderToDOMOptions) {
-  const rootNode = options.root ?? document
-  const libNodeToDOMNodeMap = new Map<LibNode, Node>()
-
-  const signal = createSignal({
-    portals: {} as Record<string, WithChildren<{}>['children']>,
-    listeners: {} as LibContext['listeners'],
-    isHydrating: options.needToHydrate ?? false,
-  })
-
-  function addDocumentListener(eventType: keyof LibHTMLElementEventMap) {
-    const normalizedEventType = eventType.replace(/^on([A-Z])/, (_, letter) =>
-      letter.toLowerCase(),
-    ) as keyof DocumentEventMap
-
-    document.addEventListener(normalizedEventType, (event) => {
-      let isBubbleCancelled = false
-      let node = event.target as HTMLElement | null
-
-      let originalStopPropagation = event.stopPropagation.bind(event)
-      let originalStopImmediatePropagation =
-        event.stopImmediatePropagation.bind(event)
-
-      event.stopPropagation = () => {
-        isBubbleCancelled = true
-        originalStopPropagation()
-      }
-
-      event.stopImmediatePropagation = () => {
-        isBubbleCancelled = true
-        originalStopImmediatePropagation()
-      }
-
-      while (node) {
-        const eventListeningNodes = signal.listeners[eventType]
-
-        const handler = eventListeningNodes?.get(node)
-
-        if (handler) {
-          Object.defineProperty(event, 'currentTarget', {
-            configurable: true,
-            enumerable: true,
-            get: () => node,
-          })
-
-          handler(event as any)
-
-          if (isBubbleCancelled) {
-            break
-          }
-        }
-
-        node = node.parentElement
-      }
-    })
-  }
-
-  const listenedEventTypes = new Set<keyof LibHTMLElementEventMap>()
-
-  createEffect(() => {
-    deepTrack(signal.listeners, 1)
-
-    untrack(() => {
-      objectKeys(signal.listeners).forEach((eventType) => {
-        if (listenedEventTypes.has(eventType)) {
-          return
-        }
-
-        addDocumentListener(eventType)
-
-        listenedEventTypes.add(eventType)
-      })
-    })
-  }, true)
-
-  const insertDomNode = (
-    parentDomNode: Node,
-    domNode: Node,
-    afterDomNode: Node | null,
-  ) =>
-    parentDomNode.insertBefore(
-      domNode,
-      afterDomNode ? afterDomNode.nextSibling : parentDomNode.firstChild,
-    )
-
-  const isHTMLElementNode = (node: Node): node is HTMLElement =>
-    node instanceof HTMLElement
-
-  if (!options.needToHydrate) {
-    while (rootNode.firstChild) {
-      rootNode.removeChild(rootNode.firstChild)
-    }
-  }
-
-  options.app()({
-    parentBlock: null,
-    index: 0,
-    portals: signal.portals,
-    contexts: {},
-    listeners: signal.listeners,
-    isServer: false,
-    promises: [],
-    get isHydrating() {
-      return signal.isHydrating
-    },
-    insertNode(parent, node, after) {
-      if (signal.isHydrating) {
-        if (parent === null) {
-          libNodeToDOMNodeMap.set(node, document.querySelector('html')!)
-        } else {
-          const parentNode = libNodeToDOMNodeMap.get(parent)
-
-          if (!parentNode) {
-            throw new Error('Ошибка гидрации')
-          }
-
-          let childNode: Node | null = null
-
-          if (after) {
-            const node = libNodeToDOMNodeMap.get(after)
-
-            if (!node) {
-              throw new Error('Ошибка гидрации')
-            }
-
-            childNode = node.nextSibling
-          } else {
-            childNode = parentNode.firstChild
-          }
-
-          while (true) {
-            if (!childNode) {
-              throw new Error('Ошибка гидрации')
-            }
-
-            if (
-              (node.type === 'text' &&
-                String(node.props.text) === childNode.textContent) ||
-              (node.type === 'html-element' &&
-                isHTMLElementNode(childNode) &&
-                node.props.tag === childNode.tagName.toLowerCase())
-            ) {
-              libNodeToDOMNodeMap.set(node, childNode)
-
-              break
-            } else {
-              const oldChildNode = childNode
-              childNode = childNode.nextSibling
-              oldChildNode.parentElement?.removeChild(oldChildNode)
-            }
-          }
-        }
-
-        return
-      }
-
-      if (parent && !libNodeToDOMNodeMap.has(parent)) {
-        libNodeToDOMNodeMap.set(
-          parent,
-          document.createElement(parent.props.tag),
-        )
-      }
-
-      const parentDomNode = parent ? libNodeToDOMNodeMap.get(parent)! : rootNode
-
-      const afterDomNode = (after && libNodeToDOMNodeMap.get(after)) ?? null
-
-      if (node.type === 'text') {
-        const domNode = document.createTextNode(String(node.props.text))
-        libNodeToDOMNodeMap.set(node, domNode)
-
-        this.updateTextNode(node)
-
-        insertDomNode(parentDomNode, domNode, afterDomNode)
-      } else if (node.type === 'html-element') {
-        if (!libNodeToDOMNodeMap.has(node)) {
-          libNodeToDOMNodeMap.set(node, document.createElement(node.props.tag))
-        }
-
-        for (const [key, descriptor] of Object.entries(
-          Object.getOwnPropertyDescriptors(node.props),
-        )) {
-          if (['tag', 'children', 'ref'].includes(key)) {
-            continue
-          }
-
-          let value = descriptor.get?.() ?? descriptor.value
-          this.updateHtmlElementNodeProp(node, key, value)
-        }
-
-        const domNode = libNodeToDOMNodeMap.get(node)! as HTMLElement
-
-        insertDomNode(parentDomNode, domNode, afterDomNode)
-
-        if (node.props.ref) {
-          node.props.ref.element = domNode
-        }
-      } else {
-        let _: never = node
-        throw new Error('Неверный тип ноды')
-      }
-    },
-    updateTextNode(node) {
-      const value = node.props.text
-      const domNode = libNodeToDOMNodeMap.get(node)
-
-      if (!domNode) {
-        return
-      }
-
-      domNode.textContent = String(value)
-    },
-    updateHtmlElementNodeProp(node, key, value) {
-      const domNode = libNodeToDOMNodeMap.get(node)
-
-      if (!domNode) {
-        return
-      }
-
-      const element = domNode as HTMLElement
-
-      const isEventTypeKey = (
-        key: string,
-      ): key is keyof LibHTMLElementEventMap => key.startsWith('on')
-
-      if (isEventTypeKey(key)) {
-        if (value) {
-          this.listeners[key] ??= new Map()
-
-          this.listeners[key].set(
-            element,
-            value as LibHTMLElementEventMap[keyof LibHTMLElementEventMap],
-          )
-        } else {
-          this.listeners[key]?.delete(element)
-        }
-
-        return
-      }
-
-      if (key.startsWith('aria')) {
-        const name = key.toLowerCase().replace('aria', 'aria-')
-
-        if (value) {
-          element.setAttribute(name, value as string)
-        } else {
-          element.removeAttribute(name)
-        }
-
-        return
-      }
-
-      if (key === 'className') {
-        if (value) {
-          element.className = value as string
-        } else {
-          element.removeAttribute('class')
-        }
-
-        return
-      }
-
-      if (key === 'style') {
-        if (value) {
-          Object.keys(value).forEach((key) => {
-            const keyValue = value[key as keyof typeof value]
-            if (keyValue !== undefined) {
-              const normalizedValue = String(
-                HTML_ELEMENT_STYLE_PX_PROPERTIES.has(key) &&
-                  typeof keyValue === 'number'
-                  ? `${keyValue}px`
-                  : keyValue,
-              )
-
-              element.style.setProperty(key, normalizedValue)
-            } else {
-              element.style.removeProperty(key)
-            }
-          })
-        } else {
-          element.removeAttribute('style')
-        }
-
-        return
-      }
-
-      if (value !== undefined && value !== null) {
-        element.setAttribute(key, String(value))
-      } else {
-        element.removeAttribute(key)
-      }
-    },
-    removeNode(node) {
-      const domNode = libNodeToDOMNodeMap.get(node)
-
-      if (!domNode) {
-        return
-      }
-
-      libNodeToDOMNodeMap.delete(node)
-
-      if (isHTMLElementNode(domNode)) {
-        domNode.remove()
-      } else {
-        domNode.parentElement?.removeChild(domNode)
-      }
-    },
-  })
-
-  if (options.needToHydrate) {
-    signal.isHydrating = false
-  }
-}

package/src/render-to-string.ts

@@ -1,65 +0,0 @@
-import { ServerNode } from './server-node'
-import { createSignal } from './signals'
-import type { LibNode, LibContext, PotokElement } from './types'
-
-export async function renderToString(creator: PotokElement) {
-  const signal = createSignal({
-    portals: {} as Record<string, PotokElement[]>,
-    listeners: {} as LibContext['listeners'],
-  })
-
-  let libNodeToServerNodeMap = new Map<LibNode, ServerNode>()
-  let rootNode: ServerNode | undefined
-
-  let promises: Promise<void>[] = []
-
-  creator({
-    parentBlock: null,
-    index: 0,
-    portals: signal.portals,
-    contexts: {},
-    listeners: signal.listeners,
-    isServer: true,
-    promises,
-    isHydrating: false,
-    insertNode(parent, libNode, after) {
-      if (parent && !libNodeToServerNodeMap.has(parent)) {
-        libNodeToServerNodeMap.set(parent, new ServerNode(parent))
-      }
-
-      if (!libNodeToServerNodeMap.has(libNode)) {
-        libNodeToServerNodeMap.set(libNode, new ServerNode(libNode))
-      }
-
-      const serverNode = libNodeToServerNodeMap.get(libNode)!
-
-      libNodeToServerNodeMap.set(libNode, serverNode)
-
-      if (parent === null) {
-        rootNode = serverNode
-      } else {
-        const afterServerNode =
-          after && libNodeToServerNodeMap.has(after)
-            ? libNodeToServerNodeMap.get(after)!
-            : null
-
-        libNodeToServerNodeMap
-          .get(parent)
-          ?.addChild(serverNode, afterServerNode)
-      }
-    },
-    updateTextNode() {},
-    updateHtmlElementNodeProp() {},
-    removeNode(node) {
-      libNodeToServerNodeMap.get(node)?.remove()
-    },
-  })
-
-  await Promise.all(promises)
-
-  if (!rootNode) {
-    throw new Error('Корневая нода не найдена')
-  }
-
-  return rootNode.stringify()
-}

package/src/server-node.ts

@@ -1,98 +0,0 @@
-import type { LibNode } from './types'
-
-export class ServerNode {
-  libNode: LibNode
-  parent: ServerNode | null = null
-  children: ServerNode[] = []
-
-  constructor(libNode: LibNode) {
-    this.libNode = libNode
-  }
-
-  addChild(node: ServerNode, after: ServerNode | null) {
-    if (after) {
-      const afterIndex = this.children.indexOf(after)
-      this.children.splice(afterIndex + 1, 0, node)
-    } else {
-      this.children.push(node)
-    }
-
-    node.parent = this
-  }
-
-  remove() {
-    if (this.parent) {
-      this.parent.children.splice(this.parent.children.indexOf(this), 1)
-    }
-  }
-
-  stringify(): string {
-    if (this.libNode.type === 'text') {
-      const parentTagName =
-        this.libNode.context.parentBlock?.nearestParentElement?.props.tag
-      if (parentTagName && ['title', 'script'].includes(parentTagName)) {
-        return String(this.libNode.props.text)
-      }
-
-      return `<!-- -->${this.libNode.props.text}`
-    } else if (this.libNode.type === 'html-element') {
-      let result = `<${this.libNode.props.tag}`
-
-      for (const [key, descriptor] of Object.entries(
-        Object.getOwnPropertyDescriptors(this.libNode.props)
-      )) {
-        if (['tag', 'children', 'ref'].includes(key)) {
-          continue
-        }
-
-        if (key.startsWith('on')) {
-          continue
-        }
-
-        let value = descriptor.get?.() ?? descriptor.value
-
-        if (!value) {
-          continue
-        }
-
-        if (key === 'style') {
-          let styleStr = ''
-          Object.entries(value as CSSStyleDeclaration).forEach(
-            ([key, value]) => {
-              styleStr += `${key
-                .replace(/([A-Z])/g, '-$1')
-                .toLowerCase()}:${value};`
-            }
-          )
-
-          result += ` style="${styleStr}"`
-          continue
-        }
-
-        if (key.startsWith('aria')) {
-          result += ` ${key.toLowerCase().replace('aria', 'aria-')}="${value}"`
-          continue
-        }
-
-        if (key === 'className') {
-          result += ` class="${value}"`
-          continue
-        }
-
-        result += ` ${key}="${value}"`
-      }
-
-      result += '>'
-
-      this.children.forEach((child) => {
-        result += child.stringify()
-      })
-
-      result += `</${this.libNode.props.tag}>`
-
-      return result
-    }
-
-    throw new Error('Not implemented')
-  }
-}

package/src/show.ts

@@ -1,46 +0,0 @@
-import { LibBlock } from './block'
-import { createEffect, untrack } from './signals'
-import type { LibContext, PotokElement, WithChildren } from './types'
-import { mergeContext, normalizeChildren } from './utils'
-
-type ShowProps = WithChildren<{
-  when: boolean
-}>
-
-class ShowClass<Props extends ShowProps> extends LibBlock {
-  constructor(
-    readonly props: Props,
-    readonly context: LibContext,
-  ) {
-    super()
-
-    const normalizedChildren = normalizeChildren(props.children)
-
-    this.addEffect(
-      createEffect(() => {
-        if (props.when) {
-          untrack(() => {
-            normalizedChildren.forEach((childCreator, index) => {
-              this.children.push(
-                childCreator(
-                  mergeContext(context, {
-                    parentBlock: this,
-                    index,
-                  }),
-                ),
-              )
-            })
-          })
-        } else {
-          this.unmountChildren()
-        }
-      }, true),
-    )
-  }
-}
-
-export function Show(props: ShowProps): PotokElement {
-  return function (context: LibContext) {
-    return new ShowClass(props, context)
-  }
-}