ranuts 0.1.0-alpha → 0.1.0-alpha.1

package/src/vnode/modules/props.ts

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

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

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