ranuts 0.1.0-alpha.1 → 0.1.0-alpha.2

package/src/vnode/modules/props.ts

@@ -1,41 +0,0 @@
-import type { VNode, VNodeData } from '../vnode'
-
-export type Props = Record<string, any>
-
-function updateProps(oldVnode: VNode, vnode: VNode): void {
-    // 用于缓存props的name
-    let key: string
-    // 缓存遍历中当前props的值
-    let cur: any
-    // 缓存遍历中旧props的值
-    let old: any
-    // 缓存VNode的dom元素
-    const elm = vnode.elm
-    // 获取旧VNode的props属性
-    let oldProps = oldVnode.data ? oldVnode.data.props : undefined
-    // 获取新VNode的props属性
-    let props = vnode.data ? vnode.data.props : undefined
-
-    // 如果新旧VNode都没有props属性，直接返回
-    if (!oldProps && !props) return
-    // 如果新旧VNode的props属性完全一样，直接返回
-    if (oldProps === props) return
-    //  如果旧VNode没有props，将其设置为空对象
-    oldProps = oldProps || {}
-    //  如果新VNode没有props，将其设置为空对象
-    props = props || {}
-
-    // 遍历新VNode的props
-    for (key in props) {
-        // 缓存当前prop属性的值
-        cur = props[key]
-        // 缓存旧VNode中同名prop的值
-        old = oldProps[key]
-        // 如果新旧prop值不同，同时当dom是含有value属性的元素（如：input），当前value值和当前prop值不同时，将值设置为当前prop的值
-        if (old !== cur && (key !== 'value' || (elm as any)[key] !== cur)) {
-            (elm as any)[key] = cur
-        }
-    }
-}
-
-export const propsModule = { create: updateProps, update: updateProps }

package/src/vnode/modules/style.ts

@@ -1,118 +0,0 @@
-import type { VNode, VNodeData } from '../vnode'
-
-export type VNodeStyle = Record<string, any>
-
-/**
- *  在snabbdom中style有三个额外的生命周期delayed, remove和destroy，主要是方便我们css动画的使用，而我们terdom是为了学习虚拟dom
- * 的原理，所以这里我删除这两个生命周期，方便源码的阅读。
- * */
-
-let reflowForced = false
-
-function updateStyle(oldVnode: VNode, vnode: VNode): void {
-  // 缓存遍历中当前新VNode中的style
-  let cur: any
-  // 缓存遍历中当前style的name
-  let name: string
-  // 获取dom节点
-  const elm = vnode.elm
-  // 获取旧VNode的style
-  let oldStyle = (oldVnode.data as VNodeData).style
-  // 获取新VNode的style
-  let style = (vnode.data as VNodeData).style
-
-  // 如果新旧VNode都没有设置style，直接返回
-  if (!oldStyle && !style) return
-  // 如果新旧VNode的style完全相同，直接返回
-  if (oldStyle === style) return
-  // 如果没有旧VNode的style，设置为空对象
-  oldStyle = oldStyle || {}
-  // 如果没有新VNode的style，设置为空对象
-  style = style || {}
-
-  // 遍历旧VNode的style
-  for (name in oldStyle) {
-    // 如果新VNode中没有相同name的style
-    if (!style[name]) {
-      if (name[0] === '-' && name[1] === '-') {
-        // 如果是以 -- 开头,代表是css变量,使用removeProperty删除
-        ;(elm as any).style.removeProperty(name)
-      } else {
-        // 否则直接设为空
-        ;(elm as any).style[name] = ''
-      }
-    }
-  }
-
-  // 遍历新VNode中的style
-  for (name in style) {
-    // 缓存当前style的值
-    cur = style[name]
-    if (cur !== oldStyle[name]) {
-      if (name[0] === '-' && name[1] === '-') {
-        // 如果是以 -- 开头,代表是css变量,使用setProperty设置
-        ;(elm as any).style.setProperty(name, cur)
-      } else {
-        // 否则直接设置
-        ;(elm as any).style[name] = cur
-      }
-    }
-  }
-}
-
-function forceReflow(): void {
-  reflowForced = false
-}
-
-function applyDestroyStyle(vnode: VNode): void {
-  let style: any
-  let name: string
-  const elm = vnode.elm
-  const s = (vnode.data as VNodeData).style
-  if (!s || !(style = s.destroy)) return
-  for (name in style) {
-    ;(elm as any).style[name] = style[name]
-  }
-}
-
-function applyRemoveStyle(vnode: VNode, rm: () => void): void {
-  const s = (vnode.data as VNodeData).style
-  if (!s || !s.remove) {
-    rm()
-    return
-  }
-  if (!reflowForced) {
-    ;(vnode.elm as any).offsetLeft
-    reflowForced = true
-  }
-  let name: string
-  const elm = vnode.elm
-  let i = 0
-  const style = s.remove
-  let amount = 0
-  const applied: string[] = []
-  for (name in style) {
-    applied.push(name)
-    ;(elm as any).style[name] = style[name]
-  }
-  const compStyle = getComputedStyle(elm as Element)
-  const props = (compStyle as any)['transition-property'].split(', ')
-  for (; i < props.length; ++i) {
-    if (applied.indexOf(props[i]) !== -1) amount++
-  }
-  ;(elm as any).addEventListener(
-    'transitionend',
-    function (ev: TransitionEvent) {
-      if (ev.target === elm) --amount
-      if (amount === 0) rm()
-    },
-  )
-}
-
-export const styleModule = {
-  pre: forceReflow,
-  create: updateStyle,
-  update: updateStyle,
-  destroy: applyDestroyStyle,
-  remove: applyRemoveStyle,
-}

package/src/vnode/vnode.ts

@@ -1,65 +0,0 @@
-import type { On } from './modules/listeners'
-import type { Attrs } from './modules/attributes'
-import type { Classes } from './modules/class'
-import type { Props } from './modules/props'
-import type { VNodeStyle } from './modules/style'
-import type { Hooks } from "./hooks";
-
-
-export type VNodes = VNode[]
-export type VNodeChildElement = VNode | string | number
-export type ArrayOrElement<T> = T | T[]
-export type VNodeChildren = ArrayOrElement<VNodeChildElement>
-
-// key属性类型
-export type Key = string | number
-
-type Listener<T> = (this: VNode, ev: T, vnode: VNode) => void
-
-// VNode接口
-export interface VNode {
-  // dom节点的选择器，
-  // 虚拟节点的 .sel 属性通过对 h() 传入一个 CSS 选择器生成，
-  // 比如： h('div#container', {}, [...]) 将会创建一个虚拟节点并以 div#container 作为其 .sel 属性的值。
-  sel: string | undefined
-  // 节点数据
-  data: VNodeData | undefined
-  // 子节点，和text互斥
-  children: Array<VNode | string | number> | undefined
-  // 存储VNode转化成的真实dom
-  elm: Node | undefined
-  // 节点的文本内容，和children互斥
-  text: string | number | undefined
-  // key，用于优化diff算法
-  key: Key | undefined
-  listener?: EventListenerOrEventListenerObject | undefined
-}
-
-export interface VNodeData {
-  // 设置VNode对应的DOM元素的属性,通过 对象.属性 的方式来设置,它内部不会去处理布尔类型的属性
-  props?: Props
-  // 设置VNode对应的DOM元素的属性,通过 setAttributes 来设置,它内部不会去处理布尔类型的属性
-  attrs?: Attrs
-  // 设置VNode对应的DOM元素的class
-  class?: Classes
-  // 设置VNode对应的DOM元素的css style
-  style?: VNodeStyle
-  // 设置VNode对应的DOM元素的监听事件
-  on?: On
-  // 设置VNode对应的key
-  key?: Key
-  // svg元素
-  ns?: string
-  hook?: Hooks
-}
-
-export function vnode(
-  sel: string | undefined,
-  data: any | undefined,
-  children: Array<VNode | string | number> | undefined,
-  text: string | number | undefined,
-  elm: Element | Text | undefined,
-): VNode {
-  const key = data === undefined ? undefined : data.key
-  return { sel, data, children, text, elm, key }
-}