detach list

yisar · yisar · commit 038a9456e5aa · 2021-06-11T01:09:10.000+08:00
diff --git a/demo/index.html b/demo/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/concurrent.tsx"></script>
+    <script type="module" src="/src/keys.tsx"></script>
   </body>
 </html>
diff --git a/demo/src/keys.tsx b/demo/src/keys.tsx
@@ -82,7 +82,7 @@ export default function App() {
     <div>
       <button
         onClick={() => {
-          setState([1,2,5]);
+          setState([1]);
         }}
       >
         set
diff --git a/demo/src/mixin.tsx b/demo/src/mixin.tsx
@@ -0,0 +1,32 @@
+import { render, useState, createRoot,h } from "../../src/index"
+
+function App() {
+  console.log('父组件')
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <B i={1} />
+      <B i={2} />
+      <h1>{count}</h1>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>
+  )
+}
+
+function B({ i }) {
+  console.log('子组件', i)
+  return 111
+}
+
+const root = createRoot(document.getElementById("app"))
+root.mixin(function enableTimeSlicing() {
+  let sync = true
+  return {
+    shouldYeild() {
+      if (sync === true) {
+        return false
+      }
+    }
+  }
+})
+root.render(<App />)
diff --git a/src/commit.ts b/src/commit.ts
@@ -1,26 +1,25 @@
 import { IFiber, IRef, } from "./type"
 import { updateElement } from "./dom"
-import { isFn, LANE, deletions } from './reconcile'
+import { isFn, LANE } from './reconcile'
 
 export const commit = (fiber: IFiber): void => {
-  let e = fiber.next
-  fiber.next = null
+  let d = fiber
+  let e = d.e
+  d.e = null
   do {
     const s = e.sibling
-    if (s && isFn(s.type)) {
-      e.sibling = s.child
-    }
+    if (s && isFn(s.type)) e.sibling = s.child
     paint(e)
-  } while (e = e.next)
-  deletions.forEach(e => {
-    if (isFn(e.type)) {
-      e.child.lane = LANE.REMOVE
-      paint(e.child)
+  } while (e = e.e)
+
+  while (d = d.d) {
+    if (isFn(d.type)) {
+      d.child.lane = LANE.REMOVE
+      paint(d.child)
     } else {
-      paint(e)
+      paint(d)
     }
-  })
-  deletions.length = 0
+  }
 }
 
 const paint = (fiber: IFiber): void => {
diff --git a/src/reconcile.ts b/src/reconcile.ts
@@ -16,7 +16,7 @@ import { commit } from './commit'
 let currentFiber: IFiber
 let finish = null
 let effect = null
-export let deletions = []
+let detach = null
 
 export const enum LANE {
   UPDATE = 1 << 1,
@@ -31,7 +31,8 @@ export const enum LANE {
 
 export function createRoot(root) {
   return {
-    render: (vnode) => render(vnode, root)
+    render: (vnode) => render(vnode, root),
+    mixin
   }
 }
 
@@ -51,6 +52,7 @@ export const update = (fiber?: IFiber) => {
     fiber.lane = LANE.UPDATE | LANE.DIRTY
     fiber.sibling = null
     effect = fiber
+    detach = fiber
     schedule(reconcile.bind(null, fiber) as any)
   }
 }
@@ -87,7 +89,7 @@ const bubble = (WIP) => {
     kid.lane |= WIP.lane
     invokeHooks(WIP)
   } else {
-    effect.next = WIP
+    effect.e = WIP
     effect = WIP
   }
 }
@@ -171,7 +173,8 @@ const diffKids = (WIP: any, children: FreNode): void => {
     while (aHead <= aTail) {
       let c = aCh[aTail--]
       c.lane = LANE.REMOVE
-      deletions.push(c)
+      detach.d = c
+      detach = c
     }
   } else {
     if (!keyed) {
@@ -195,14 +198,15 @@ const diffKids = (WIP: any, children: FreNode): void => {
     for (const k in keyed) {
       let c = aCh[keyed[k]]
       c.lane = LANE.REMOVE
-      deletions.push(c)
+      detach.d = c
+      detach = c
+
     }
   }
 
   while (bHead-- > 0) {
     clone(aCh[bHead], bCh[bHead], LANE.UPDATE, WIP, bHead)
   }
-
 }
 
 function linke(kid, WIP, i) {
@@ -246,6 +250,10 @@ function invokeHooks(fiber) {
   }
 }
 
+function mixin(...mixins){
+  console.log(mixins)
+}
+
 const same = (a, b) => {
   const type = (c) => isFn(c.type) ? c.type.name : c.type
   return a && b && (a.key === b.key) && (type(a) === type(b))
diff --git a/src/type.ts b/src/type.ts
@@ -54,10 +54,11 @@ export interface IFiber<P extends Attributes = any> {
   props: P
   lane: number
   time: number
-  next: IFiber,
+  e: IFiber,
   first:IFiber,
   last:IFiber,
   prev:IFiber,
+  d:IFiber,
   laziness: any[]
 }
 

Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ export default function App() {`
`82`	`82`	`<div>`
`83`	`83`	`<button`
`84`	`84`	`onClick={() => {`
`85`		`- setState([1,2,5]);`
	`85`	`+ setState([1]);`
`86`	`86`	`}}`
`87`	`87`	`>`
`88`	`88`	`set`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ import { commit } from './commit'`
`16`	`16`	`let currentFiber: IFiber`
`17`	`17`	`let finish = null`
`18`	`18`	`let effect = null`
`19`		`-export let deletions = []`
	`19`	`+let detach = null`
`20`	`20`
`21`	`21`	`export const enum LANE {`
`22`	`22`	`UPDATE = 1 << 1,`
`@@ -31,7 +31,8 @@ export const enum LANE {`
`31`	`31`
`32`	`32`	`export function createRoot(root) {`
`33`	`33`	`return {`
`34`		`- render: (vnode) => render(vnode, root)`
	`34`	`+ render: (vnode) => render(vnode, root),`
	`35`	`+ mixin`
`35`	`36`	`}`
`36`	`37`	`}`
`37`	`38`
`@@ -51,6 +52,7 @@ export const update = (fiber?: IFiber) => {`
`51`	`52`	`fiber.lane = LANE.UPDATE \| LANE.DIRTY`
`52`	`53`	`fiber.sibling = null`
`53`	`54`	`effect = fiber`
	`55`	`+ detach = fiber`
`54`	`56`	`schedule(reconcile.bind(null, fiber) as any)`
`55`	`57`	`}`
`56`	`58`	`}`
`@@ -87,7 +89,7 @@ const bubble = (WIP) => {`
`87`	`89`	`kid.lane \|= WIP.lane`
`88`	`90`	`invokeHooks(WIP)`
`89`	`91`	`} else {`
`90`		`- effect.next = WIP`
	`92`	`+ effect.e = WIP`
`91`	`93`	`effect = WIP`
`92`	`94`	`}`
`93`	`95`	`}`
`@@ -171,7 +173,8 @@ const diffKids = (WIP: any, children: FreNode): void => {`
`171`	`173`	`while (aHead <= aTail) {`
`172`	`174`	`let c = aCh[aTail--]`
`173`	`175`	`c.lane = LANE.REMOVE`
`174`		`- deletions.push(c)`
	`176`	`+ detach.d = c`
	`177`	`+ detach = c`
`175`	`178`	`}`
`176`	`179`	`} else {`
`177`	`180`	`if (!keyed) {`
`@@ -195,14 +198,15 @@ const diffKids = (WIP: any, children: FreNode): void => {`
`195`	`198`	`for (const k in keyed) {`
`196`	`199`	`let c = aCh[keyed[k]]`
`197`	`200`	`c.lane = LANE.REMOVE`
`198`		`- deletions.push(c)`
	`201`	`+ detach.d = c`
	`202`	`+ detach = c`
	`203`	`+`
`199`	`204`	`}`
`200`	`205`	`}`
`201`	`206`
`202`	`207`	`while (bHead-- > 0) {`
`203`	`208`	`clone(aCh[bHead], bCh[bHead], LANE.UPDATE, WIP, bHead)`
`204`	`209`	`}`
`205`		`-`
`206`	`210`	`}`
`207`	`211`
`208`	`212`	`function linke(kid, WIP, i) {`
`@@ -246,6 +250,10 @@ function invokeHooks(fiber) {`
`246`	`250`	`}`
`247`	`251`	`}`
`248`	`252`
	`253`	`+function mixin(...mixins){`
	`254`	`+ console.log(mixins)`
	`255`	`+}`
	`256`	`+`
`249`	`257`	`const same = (a, b) => {`
`250`	`258`	`const type = (c) => isFn(c.type) ? c.type.name : c.type`
`251`	`259`	`return a && b && (a.key === b.key) && (type(a) === type(b))`