init commit🌈

Author: waynecz

README.md

@@ -0,0 +1,3 @@
+# Tiny React
+
+Entirely empty here

example/index.tsx

@@ -0,0 +1,42 @@
+import Freact, { useState } from 'src'
+import FreactDOM from 'src/vnode'
+;(window as any).react = Freact
+
+function plus(curValue, setValue) {
+  setValue(!curValue)
+}
+
+function App({ data, children }: any) {
+  const [value, setValue] = useState(true)
+
+  return (
+    <section id={data} className="clazz1">
+      <h1>{value.toString()}</h1>
+      {value ? <strong>yes</strong> : ''}
+      <div className="wrap">
+        <div className="button" onClick={_ => plus(value, setValue)}>
+          toggle
+        </div>
+      </div>
+
+      {children}
+    </section>
+  )
+}
+
+function Kid() {
+  const [value, setValue] = useState(~~(Math.random() * 100))
+  
+  function handleClick() {
+    setValue(~~(Math.random() * 100))
+  }
+
+  return <div onClick={handleClick} className="kid button">{value}</div>
+}
+
+FreactDOM.render(
+  <App data={1}>
+    <Kid />
+  </App>,
+  document.getElementById('friday')
+)

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@waynecz/tiny-react",
+  "version": "0.0.1",
+  "description": "Minimum implementation of React with hooks",
+  "main": "dist/index",
+  "scripts": {
+    "test": "npm run test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/waynecz/tiny-react.git"
+  },
+  "keywords": [
+    "react"
+  ],
+  "author": "waynecz <451578533@qq.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/waynecz/tiny-react/issues"
+  },
+  "homepage": "https://github.com/waynecz/tiny-react#readme"
+}

rollup.config.js

@@ -0,0 +1,113 @@
+import { isClass } from './utils'
+import { patch } from './vnode'
+import { ReactVNODE, FunctionComponent } from './model'
+
+// TODO: comment for every variable
+// TODO: make codes human-readable
+let __currentDispatcher = null
+
+const memoizedStates = []
+const stateSetters = []
+let cursor = 0
+
+interface memoCursor {
+  value: number
+  __inited: boolean
+}
+
+export class Component {
+  private memoStatesCursors: memoCursor[] = []
+  private pointer = -1
+  private renderFunc = null
+
+  public base = null
+  public isReactComponent = {}
+
+  public componentDidMount = null
+
+  constructor(public props = {}) {}
+
+  public _render(func) {
+    this.renderFunc = func
+    const vnode = this.renderFunc(this.props)
+
+    // every time after finishing render, reset cursor to -1
+    this.pointer = -1
+    return vnode
+  }
+
+  public useState(initialValue) {
+    this.pointer++
+
+    if (!this.memoStatesCursors[this.pointer]) {
+      const memoState = initialValue
+
+      memoizedStates.push(memoState)
+      stateSetters.push(createStateSetter(cursor, this))
+
+      let currentCursor = { value: cursor, __inited: true }
+
+      this.memoStatesCursors.push(currentCursor)
+      cursor++
+    }
+
+    const memoCursor = this.memoStatesCursors[this.pointer]
+
+    const getter = memoizedStates[memoCursor.value]
+    const setter = stateSetters[memoCursor.value]
+
+    return [getter, setter]
+  }
+
+  public useEffect(callback) {
+    this.componentDidMount = callback
+  }
+}
+
+export function setCurrentDispatcher(instance) {
+  __currentDispatcher = instance
+}
+
+function createStateSetter(cursor, instance) {
+  return function(newValue) {
+    memoizedStates[cursor] = newValue
+    const { base, renderFunc } = instance
+    setCurrentDispatcher(instance)
+    const newVnode = instance._render(renderFunc)
+    patch(base, newVnode)
+  }
+}
+
+export function createElement(
+  type: string | FunctionComponent,
+  props: { [key: string]: any } | null,
+  ...children: []
+): ReactVNODE {
+  if (isClass(type)) {
+    console.warn(`Doesn\'t support class Component: ${type.toString()}`)
+    return
+  } else {
+    const VDOM = {
+      type: type,
+      props: props || {},
+      children
+    }
+
+    return VDOM
+  }
+}
+
+export function useState(initialValue) {
+  return __currentDispatcher.useState(initialValue)
+}
+
+export function useEffect(callback) {
+  return __currentDispatcher.useEffect(callback)
+}
+
+export default {
+  createElement,
+  Component,
+  useState,
+  useEffect
+}

src/index.ts

@@ -0,0 +1,23 @@
+export interface ReactVNODE {
+  type: string | ((...args: any[]) => ReactVNODE)
+  props: {
+    [key: string]: any
+  }
+  children: ReactVNODE[]
+  key?: string | number
+
+  __isComponent?: boolean
+  updater?: any
+}
+
+export interface ReactElement extends HTMLElement {
+  __react__?: any
+  __key__?: any
+  __listeners__?: Map<string, any>
+}
+
+export interface FunctionComponent {
+  (props: object, children: ReactVNODE[]): ReactVNODE
+}
+
+export type Primitive = string | number | boolean | undefined | null

src/model.ts

@@ -0,0 +1,40 @@
+export function isFunction(anything: any): boolean {
+  return !isClass(anything) && typeof anything === 'function'
+}
+
+export function isClass(anything: any): boolean {
+  return (
+    typeof anything === 'function' &&
+    Function.prototype.toString.call(anything).startsWith('class')
+  )
+}
+
+export function isEventBinding(prop: string): boolean {
+  return prop.startsWith('on')
+}
+
+export function isStrOrNumber(anything: any): boolean {
+  return typeof anything === 'string' || typeof anything === 'number'
+}
+
+export function isNegitiveValue(anything: any): boolean {
+  return anything === false || anything === null || anything === undefined
+}
+
+export function isObject(anything: any): boolean {
+  return Object.prototype.toString.call(anything) === '[object Object]'
+}
+
+export function flatten<T>(array: T[]): T[] {
+  return array.reduce((a, b) => {
+    if (Array.isArray(b)) {
+      return [...a, ...flatten(b)]
+    } else {
+      return [...a, b]
+    }
+  }, [])
+}
+
+export function isEqual(object, other):Boolean {
+  return object === other
+}