@potok-web-framework/core 0.1.0

package/src/signals.ts

@@ -0,0 +1,323 @@
+// Третья версия с улучшением производительности
+
+import { HMR_DEV } from './hmr/hmr-dev'
+import { isWindowDefined } from './hmr/utils'
+
+import { klona } from 'klona'
+import deepEqual from 'fast-deep-equal'
+import { CachedInstanceState } from './hmr/registered-component'
+
+export type SignalValue = Record<string, unknown> | Array<unknown>
+export type EffectCallback = () => void
+export type BatchCallback<Value> = () => Value
+export type UntrackCallback<Value> = () => Value
+export type DisposerCallback = () => void
+export type SubscriptionKey = string | number | symbol
+
+export type Signal<Value extends SignalValue> = {
+  value: Value
+  proxy: Value
+  subscribers: Set<Effect>
+  subscribe(effect: Effect, key: SubscriptionKey): void
+}
+
+export type Effect = {
+  callback: EffectCallback
+  subscriptions: Map<Signal<SignalValue>, Map<SubscriptionKey, number>>
+  version: number
+  ignoreVersion: boolean
+  dispose(): void
+  runCallback(): void
+}
+
+export type Disposer = {
+  effects: Set<Effect>
+  dispose(): void
+}
+
+let currentEffect: Effect | null = null
+let currentBatch: Set<Effect> | null = null
+let currentDisposer: Disposer | null = null
+
+const VALUE_SIGNAL_SYMBOL = Symbol('VALUE_SIGNAL')
+const ANY_KEY_SYMBOL = Symbol('ANY_KEY')
+
+export function getSignal<Value extends SignalValue>(
+  value: Value,
+): Signal<Value> | undefined {
+  return value[VALUE_SIGNAL_SYMBOL as keyof Value] as Signal<Value> | undefined
+}
+
+export function isSignal<Value extends SignalValue>(value: Value): boolean {
+  return getSignal(value) !== undefined
+}
+
+function canBeSignal(value: unknown): value is SignalValue {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (Array.isArray(value) || Object.getPrototypeOf(value).isPrototypeOf(Object))
+  )
+}
+
+export function createSignal<Value extends SignalValue>(value: Value): Value {
+  if (process.env.NODE_ENV === 'development') {
+    if (isWindowDefined()) {
+      const currentInstance = HMR_DEV.currentInstance
+      if (currentInstance) {
+        if (currentInstance.stateIndex < currentInstance.states.length) {
+          let state = currentInstance.states[currentInstance.stateIndex] as
+            | CachedInstanceState
+            | undefined
+          while (!deepEqual(state?.initial, value)) {
+            currentInstance.states.splice(currentInstance.stateIndex, 1)
+            state = currentInstance.states[currentInstance.stateIndex]
+            if (!state) {
+              break
+            }
+          }
+          if (state) {
+            const existingSignal = getSignal(state.current as SignalValue)
+            if (existingSignal) {
+              currentInstance.stateIndex++
+
+              return existingSignal.proxy as Value
+            }
+          } else {
+            currentInstance.states.push({
+              current: value,
+              initial: klona(value),
+            })
+            currentInstance.stateIndex++
+          }
+        } else {
+          currentInstance.states.push({
+            current: value,
+            initial: klona(value),
+          })
+          currentInstance.stateIndex++
+        }
+      }
+    }
+  }
+
+  const existingSignal = getSignal(value)
+
+  if (existingSignal) {
+    return existingSignal.proxy
+  }
+
+  const signal: Signal<Value> = {
+    value,
+    proxy: new Proxy(value, {
+      get(target, key, reciever) {
+        if (key === VALUE_SIGNAL_SYMBOL) {
+          return signal
+        }
+
+        const value = Reflect.get(target, key, reciever)
+
+        if (currentEffect) {
+          signal.subscribe(currentEffect, key)
+        }
+
+        if (canBeSignal(value)) {
+          return createSignal(value)
+        }
+
+        if (typeof value === 'function') {
+          return value.bind(target)
+        }
+
+        return value
+      },
+      set(target, key, value, reciever) {
+        const isSet = Reflect.set(target, key, value, reciever)
+
+        if (isSet) {
+          signal.subscribers.forEach((effect) => {
+            const subscriptions = effect.subscriptions.get(signal)
+
+            if (
+              effect.ignoreVersion ||
+              subscriptions?.get(ANY_KEY_SYMBOL) === effect.version ||
+              subscriptions?.get(key) === effect.version
+            ) {
+              effect.runCallback()
+            }
+          })
+        }
+
+        return isSet
+      },
+    }),
+    subscribers: new Set(),
+    subscribe(effect, key) {
+      let subscribedKeys = effect.subscriptions.get(signal)
+
+      if (!subscribedKeys) {
+        subscribedKeys = new Map()
+        effect.subscriptions.set(signal, subscribedKeys)
+        signal.subscribers.add(effect)
+      }
+
+      if (subscribedKeys.get(key) !== effect.version) {
+        subscribedKeys.set(key, effect.version)
+      }
+    },
+  }
+
+  Object.defineProperty(value, VALUE_SIGNAL_SYMBOL, {
+    value: signal,
+    enumerable: false,
+    writable: false,
+    configurable: false,
+  })
+
+  return signal.proxy
+}
+
+export function createEffect(
+  callback: EffectCallback,
+  disableVersionning = false,
+): Effect {
+  let isDisposed = false
+
+  const effect: Effect = {
+    callback,
+    subscriptions: new Map(),
+    version: 0,
+    ignoreVersion: disableVersionning,
+    dispose() {
+      isDisposed = true
+    },
+    runCallback() {
+      if (isDisposed) {
+        effect.subscriptions.forEach((_, signal) => {
+          signal.subscribers.delete(effect)
+        })
+        effect.subscriptions.clear()
+
+        return
+      }
+
+      if (currentBatch) {
+        currentBatch.add(effect)
+
+        return
+      }
+
+      currentEffect = effect
+      effect.version++
+      callback()
+      currentEffect = null
+    },
+  }
+
+  if (currentDisposer) {
+    currentDisposer.effects.add(effect)
+  }
+
+  effect.runCallback()
+
+  return effect
+}
+
+export function batch<Value>(callback: BatchCallback<Value>): Value {
+  if (currentBatch) {
+    return callback()
+  }
+
+  currentBatch = new Set()
+  const result = callback()
+
+  const executedBatch = currentBatch
+  currentBatch = null
+
+  executedBatch.forEach((effect) => {
+    effect.runCallback()
+  })
+
+  return result
+}
+
+export function untrack<Value>(callback: UntrackCallback<Value>): Value {
+  const effect = currentEffect
+  currentEffect = null
+  const value = callback()
+  currentEffect = effect
+
+  return value
+}
+
+function _deepTrack(value: SignalValue, depth?: number, currentDepth = 0) {
+  if (depth !== undefined && depth <= 0) {
+    console.warn(`depth=${depth} не может быть меньше или равен 0`)
+    return
+  }
+
+  if (!currentEffect) {
+    console.warn('deepTrack можно использовать только внутри эффекта')
+    return
+  }
+
+  const effect = currentEffect
+
+  untrack(() => {
+    const signal = getSignal(value)
+
+    if (!signal) {
+      console.warn('deepTrack можно использовать только с сигналами')
+      return
+    }
+
+    signal.subscribe(effect, ANY_KEY_SYMBOL)
+
+    currentDepth++
+
+    if (depth !== undefined && currentDepth >= depth) {
+      return
+    }
+
+    if (Array.isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+
+        if (canBeSignal(item)) {
+          currentEffect = effect
+          _deepTrack(item, depth, currentDepth)
+        }
+      }
+    } else {
+      for (const key in value) {
+        const item = value[key]
+
+        if (canBeSignal(item)) {
+          currentEffect = effect
+          _deepTrack(item, depth, currentDepth)
+        }
+      }
+    }
+  })
+}
+
+export function deepTrack(value: SignalValue, depth?: number) {
+  _deepTrack(value, depth)
+}
+
+export function createDisposer(callback: DisposerCallback): Disposer {
+  let disposer: Disposer = {
+    effects: new Set(),
+    dispose() {
+      disposer.effects.forEach((effect) => {
+        effect.dispose()
+      })
+    },
+  }
+
+  currentDisposer = disposer
+  callback()
+  currentDisposer = null
+
+  return disposer
+}

package/src/store.ts

@@ -0,0 +1,68 @@
+import { createContext } from './context'
+import { batch, createSignal } from './signals'
+import { PotokElement, WithChildren } from './types'
+
+type State = Record<string, any>
+type StateOptions<P extends StoreProps> = {
+  props: P
+}
+type Actions = Record<string, (...args: any[]) => any>
+type ActionsOptions<P extends StoreProps, S extends State> = {
+  props: P
+  state: S
+}
+type StoreProps = Record<string, any>
+type StoreInitiator<
+  P extends StoreProps,
+  S extends State,
+  A extends Actions,
+> = {
+  state: (options: StateOptions<P>) => S
+  actions: (options: ActionsOptions<P, S>) => A
+}
+
+export type Store<P extends StoreProps, S extends State, A extends Actions> = {
+  provider(props: WithChildren<P>): PotokElement
+  reader(props: {
+    children: (options: { state: S; actions: A }) => PotokElement
+  }): PotokElement
+}
+
+export function createStore<P extends StoreProps>() {
+  return function <S extends State, A extends Actions>(
+    initiator: StoreInitiator<P, S, A>,
+  ): Store<P, S, A> {
+    const context = createContext<{ state: S; actions: A }>()
+
+    return {
+      provider(props) {
+        const proxiedState = createSignal(initiator.state({ props }))
+        const initializedActions = initiator.actions({
+          props,
+          state: proxiedState,
+        })
+        const batchedActions = Object.entries(
+          initializedActions,
+        ).reduce<Actions>((acc, [key, value]) => {
+          acc[key] = (...args: any[]) => {
+            return batch(() => {
+              return value.apply(initializedActions, args)
+            })
+          }
+
+          return acc
+        }, {}) as A
+
+        return context.provider({
+          value: { state: proxiedState, actions: batchedActions },
+          children: props.children,
+        })
+      },
+      reader(props) {
+        return context.reader({
+          children: (value) => props.children(value),
+        })
+      },
+    }
+  }
+}

package/src/text.ts

@@ -0,0 +1,35 @@
+import { LibBlock } from './block'
+import { createEffect } from './signals'
+import type { LibContext, LibTextNode, PotokElement } from './types'
+
+export type LibTextProps = {
+  text: unknown
+}
+
+class LibText extends LibBlock {
+  constructor(readonly props: LibTextProps, readonly context: LibContext) {
+    super()
+
+    const textNode: LibTextNode = {
+      type: 'text',
+      props,
+      context,
+    }
+
+    this.node = textNode
+
+    this.addEffect(
+      createEffect(() => {
+        context.updateTextNode(textNode)
+      }, true)
+    )
+
+    this.insertNode()
+  }
+}
+
+export function text(props: LibTextProps): PotokElement {
+  return function (context: LibContext) {
+    return new LibText(props, context)
+  }
+}

package/src/types.ts

@@ -0,0 +1,69 @@
+import type { LibBlock } from './block'
+import type { LibHTMLElementProps } from './html-element'
+import type {
+  LibHTMLElementEventMap,
+  LibHTMLElementTagNameMap,
+} from './prop-types'
+import type { LibTextProps } from './text'
+
+export type LibProps = Record<string, any>
+
+export type LibTextNode = {
+  type: 'text'
+  context: LibContext
+  props: LibTextProps
+}
+
+export type LibHtmlElementNode<
+  Tag extends keyof LibHTMLElementTagNameMap = keyof LibHTMLElementTagNameMap,
+> = {
+  type: 'html-element'
+  context: LibContext
+  props: LibHTMLElementProps<Tag>
+}
+
+export type LibNode = LibTextNode | LibHtmlElementNode
+
+export type LibContext = {
+  parentBlock: LibBlock | null
+  index: number
+  insertNode(
+    parent: LibHtmlElementNode | null,
+    node: LibNode,
+    after: LibNode | null,
+  ): void
+  updateTextNode(node: LibTextNode): void
+  updateHtmlElementNodeProp(
+    node: LibHtmlElementNode,
+    key: string,
+    value: unknown,
+  ): void
+  removeNode(node: LibNode): void
+  portals: Record<string, WithChildren<{}>['children']>
+  contexts: Record<symbol, Record<string, unknown>>
+  listeners: Record<
+    keyof LibHTMLElementEventMap,
+    Map<HTMLElement, LibHTMLElementEventMap[keyof LibHTMLElementEventMap]>
+  >
+  isServer: boolean
+  promises: Promise<unknown>[]
+  isHydrating: boolean
+}
+
+export type PotokElement = (context: LibContext) => LibBlock
+
+export type MaybeArray<T> = T | T[]
+
+export type Child = PotokElement | Child[] | string | number | null | undefined
+
+export type Children = MaybeArray<Child> | undefined
+
+export type WithChildren<Props extends Record<string, unknown>> = Props & {
+  children?: Children
+}
+
+export type ComponentProps = Record<string, unknown>
+
+export type Component<Props extends ComponentProps = ComponentProps> = (
+  props: Props,
+) => PotokElement

package/src/utils.ts

@@ -0,0 +1,118 @@
+import type {
+  LibHTMLElementEventMap,
+  LibHTMLElementTagNameMap,
+} from './prop-types'
+import { text } from './text'
+import type {
+  Child,
+  Children,
+  LibContext,
+  MaybeArray,
+  PotokElement,
+} from './types'
+
+export function mergeContext(
+  rootContext: LibContext,
+  childContext: Pick<LibContext, 'parentBlock' | 'index'> &
+    Partial<Pick<LibContext, 'contexts'>>
+): LibContext {
+  return {
+    parentBlock: childContext.parentBlock,
+    get index() {
+      return childContext.index
+    },
+    portals: rootContext.portals,
+    contexts: {
+      ...rootContext.contexts,
+      ...childContext.contexts,
+    },
+    listeners: rootContext.listeners,
+    isServer: rootContext.isServer,
+    promises: rootContext.promises,
+    get isHydrating() {
+      return rootContext.isHydrating
+    },
+    insertNode: rootContext.insertNode,
+    updateTextNode: rootContext.updateTextNode,
+    updateHtmlElementNodeProp: rootContext.updateHtmlElementNodeProp,
+    removeNode: rootContext.removeNode,
+  }
+}
+
+export function objectKeys<Obj extends Record<string, unknown>>(
+  obj: Obj
+): (keyof Obj)[] {
+  return Object.keys(obj)
+}
+
+export function extractListenersFromProps(
+  props: LibHTMLElementTagNameMap[keyof LibHTMLElementTagNameMap]
+): LibHTMLElementEventMap {
+  return Object.entries(props).reduce<LibHTMLElementEventMap>(
+    (acc, [key, value]) => {
+      if (key.startsWith('on')) {
+        acc[key as keyof LibHTMLElementEventMap] = value
+      }
+
+      return acc
+    },
+    {}
+  )
+}
+
+export function map<T extends string | number | symbol, K>(
+  field: T,
+  mapObject: Record<T, K>
+): K
+export function map<T extends string | number | symbol, K>(
+  field: T | undefined | null,
+  mapObject: Partial<Record<T, K>>,
+  defaultValue: K
+): K
+export function map<T extends boolean, K>(
+  field: T,
+  mapObject: Record<'true' | 'false', K>
+): K
+export function map<T extends string | number | symbol | 'true' | 'false', K>(
+  field: T | undefined,
+  mapObject: Record<T, K>,
+  defaultValue?: K
+): K {
+  if (field === undefined) return defaultValue as K
+
+  return mapObject[field] ?? (defaultValue as K)
+}
+
+export function normalizeArray<T>(array: MaybeArray<T>): T[] {
+  if (Array.isArray(array)) {
+    return array
+  }
+
+  return [array]
+}
+
+export function normalizeChild(child: NonNullable<Child>): PotokElement[] {
+  if (typeof child === 'string' || typeof child === 'number') {
+    return [
+      text({
+        text: String(child),
+      }),
+    ]
+  }
+
+  if (Array.isArray(child)) {
+    return child.flatMap(normalizeChildren)
+  }
+
+  return [child]
+}
+
+export function normalizeChildren(children: Children): PotokElement[] {
+  if (!children) {
+    return []
+  }
+
+  return normalizeArray(children)
+    .filter((child) => child !== null && child !== undefined)
+    .flatMap(normalizeChild)
+}