Files
  • index.js
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const React = (function() {
  let VDOM, hooks = [], idx = 0 
  return {
    useState(initialState) {
      hooks[idx] = hooks[idx] || initialState
      const state = hooks[idx]
      const setStateIndex = idx
      const setState = newState => {
        hooks[setStateIndex] = newState
      }
      idx = idx + 1
      return [state, setState]
    },
    useEffect(cb, depArray) {
      const hasNoDeps = !depArray
      const deps = hooks[idx]
      const depsHaveChanged = deps && !depArray.every((v, i) => v === deps[i])
      if (cb && (hasNoDeps || depsHaveChanged)) cb()
      hooks[idx] = depArray
      idx = idx + 1
    },
    render(Component) {
      VDOM = Component()
      VDOM.render()
      idx = 0
      return VDOM
    }
  }
})()

function Button() {
  const [num, setNum] = React.useState(0)
  const [url, setURL] = useThePlatform('www.egghead.io')
  React.useEffect(() => {
    console.log('effect1', num, url)
  })
  React.useEffect(() => {
    console.log('effect2', num, url)
  }, [num, url])
  return {
    click: () => setNum(num + 1),
    type: newtext => setURL(newtext),
    render: () => console.log({num, url})
  }
}

function useThePlatform(_url) {
  const [url, setURL] = React.useState(_url)
  const betterURL = 'https://google.com/amp/' + url
  return [betterURL, setURL]
}

const App = React.render(Button) // { num: 0, text: 'foo' }
App.click()
React.render(Button) // { num: 1, text: 'foo' }
App.type('reactjs.org')
React.render(Button) // { num: 1, text: 'bar' }
node v10.15.2 linux/amd64