diff --git a/demo/index.html b/demo/index.html index 4a1e8c78..5f14e428 100644 --- a/demo/index.html +++ b/demo/index.html @@ -9,7 +9,7 @@ - + \ No newline at end of file diff --git a/demo/src/state-props.js b/demo/src/state-props.js new file mode 100644 index 00000000..55ee0110 --- /dev/null +++ b/demo/src/state-props.js @@ -0,0 +1,31 @@ +import { h, render, useState } from '../../src' + +function Counter() { + const [up, setUp] = useState(0) + const [down, setDown] = useState(0) + return ( +
+

{up}

+ +

{down}

+ + +
+ ) +} + +function Count(props) { + const [add, setAdd] = useState(0) + const [cut, setCut] = useState(0) + return ( +
+

{props.count}

+

{add}

+ +

{cut}

+ +
+ ) +} + +render(, document.body) diff --git a/demo/src/use-state.js b/demo/src/use-state.js index 55ee0110..3d13b705 100644 --- a/demo/src/use-state.js +++ b/demo/src/use-state.js @@ -1,31 +1,12 @@ -import { h, render, useState } from '../../src' +import { h, render, useState, useLayout, useEffect } from '../../src' -function Counter() { - const [up, setUp] = useState(0) - const [down, setDown] = useState(0) +function App() { + const [count, setCount] = useState(0) return ( -
-

{up}

- -

{down}

- - +
+
) } -function Count(props) { - const [add, setAdd] = useState(0) - const [cut, setCut] = useState(0) - return ( -
-

{props.count}

-

{add}

- -

{cut}

- -
- ) -} - -render(, document.body) +render(, document.body) \ No newline at end of file diff --git a/demo/src/with-context.js b/demo/src/with-context.js index 63391642..e56f7831 100644 --- a/demo/src/with-context.js +++ b/demo/src/with-context.js @@ -1,4 +1,4 @@ -import { h, useState, useEffect, render } from '../../src' +import { h, useState, useEffect, render, useCallback } from '../../src' // import { render, createElement as h } from 'preact/compat' // import { useState, useEffect } from 'preact/hooks' @@ -33,9 +33,8 @@ const useTheme = withContext('light') function App() { const [theme, setTheme] = useTheme() - const setMemoTheme = useCallback(() => - setTheme(theme === 'dark' ? 'light' : 'dark') - ) + const setMemoTheme = setTheme(theme === 'dark' ? 'light' : 'dark') + return (
{theme} diff --git a/package.json b/package.json index 7f51f2a8..9187d305 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "module": "dist/fre-esm.js", "scripts": { "test": "jest --coverage", + "test-key":"jest ./test/reconcilation.test.js", "build": "rollup -c && gzip-size dist/fre.js", "format": "prettier --write \"{src,test,demo}/**/*.js\"" }, diff --git a/test/update.test.jsx b/test/update.test.jsx index b57de24a..1de6b9c0 100644 --- a/test/update.test.jsx +++ b/test/update.test.jsx @@ -38,60 +38,6 @@ test('async state update', async () => { ]) }) -test('persist reference to any value', async () => { - const Component = () => { - const ref = useRef('') - - ref.current = ref.current + 'x' - - return

{ref.current}

- } - - const content = - - await testUpdates([ - { - content, - test: ([p]) => { - expect(p.textContent).toBe('x') - } - }, - { - content, - test: ([p]) => { - expect(p.textContent).toBe('x') - } - } - ]) -}) - -test('persist reference to any value', async () => { - const Component = () => { - const ref = useRef('') - - ref.current = ref.current + 'x' - - return

{ref.current}

- } - - const content = - - await testUpdates([ - { - content, - test: ([p]) => { - expect(p.textContent).toBe('x') - } - }, - { - content, - test: ([p]) => { - expect(p.textContent).toBe('x') - } - } - ]) -}) - test('render/update object properties and DOM attributes', async () => { let lastChildren = []