Merge pull request #686 from happy-monk/react-hooks

JdeH · web-flow · commit 5cf5324eb9c4 · 2019-10-27T13:04:56.000+01:00
React Demo with hooks
diff --git a/transcrypt/demos/react_demo/react_demo.html b/transcrypt/demos/react_demo/react_demo.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <title>Hello React!</title>
-    <script src="https://fb.me/react-with-addons-15.1.0.min.js"></script>
-    <script src="https://fb.me/react-dom-15.1.0.min.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 	<style>
 		body {font-family:arial;font-size:30px;padding:50px;background-color:#eeeeee;}
 		h1 {font-size:50px;color:#0000ff;}
diff --git a/transcrypt/demos/react_demo/react_demo.py b/transcrypt/demos/react_demo/react_demo.py
@@ -1,33 +1,57 @@
-# Helper functions
+from org.reactjs import createElement, useState, useEffect, useRef
+from org.reactjs.dom import render as react_render
+
 
+# Helper functions
 
 def h(elm_type, props='', *args):
-    return React.createElement(elm_type, props, *args)
+    return createElement(elm_type, props, *args)
 
 
 def render(react_element, destination_id, callback=lambda: None):
     container = document.getElementById(destination_id)
-    ReactDOM.render(react_element, container, callback)
+    react_render(react_element, container, callback)
 
 
-# Create a component
+def useInterval(func, delay=None):
+    # can be used as `useInterval(func, delay)`
+    # or as `@useInterval(delay)`
+    if delay is None:
+        delay = func
+        return lambda fn: useInterval(fn, delay)
 
+    ref = useRef(func)
+    ref.current = func
 
-Hello = React.createClass({
-    'displayName': 'Hello',
+    @useEffect.withDeps(delay)
+    def setup():
+        id = setInterval(lambda: ref.current(), delay)
+        return lambda: clearInterval(id)
 
-    'getInitialState': lambda: {'counter': 0},
+    return func
 
-    'updateCounter': lambda: (this.setState({'counter': this.state['counter']+1})),
 
-    'componentDidMount': lambda: (setInterval(this.updateCounter, 1000)),
+# Create a component
 
-    'render': lambda: h('div', {'className': 'maindiv'},
-                          h('h1', None, 'Hello ', this.props['name']),
-                          h('p', None, 'Lorem ipsum dolor sit ame.'),
-                          h('p', None, 'Counter: ', this.state['counter'])
-                        )
-})
+def Hello(props):
+    count, setCount = useState(0)
+
+    @useInterval(1000)
+    def updateCounter():
+        setCount(count+1)
+
+    return h(
+        'div',
+        {'className': 'maindiv'},
+        h('h1', None, 'Hello ', props['name']),
+        h('p', None, 'Lorem ipsum dolor sit ame.'),
+        h('p', None, 'Counter: ', count),
+        h(
+            'button',
+            {'onClick': updateCounter},
+            'Increment',
+        )
+    )
 
 
 # Render the component in a 'container' div
diff --git a/transcrypt/modules/org/reactjs/__init__.py b/transcrypt/modules/org/reactjs/__init__.py
@@ -0,0 +1,37 @@
+createElement = React.createElement
+createContext = React.createContext
+forwardRef = React.forwardRef
+Component = ReactComponent = React.Component
+
+
+useState = React.useState
+useEffect = React.useEffect
+useContext = React.useContext
+
+useReducer = React.useReducer
+useCallback = React.useCallback
+useMemo = React.useMemo
+useRef = React.useRef
+useImperativeHandle = React.useImperativeHandle
+useLayoutEffect = React.useLayoutEffect
+useDebugValue = React.useDebugValue
+
+
+def withDeps(*deps):
+    useHook = this
+    def decorator(fn):
+        useHook(fn, deps)
+        return fn
+    return decorator
+
+
+useEffect.withDeps = withDeps
+useLayoutEffect.withDeps = withDeps
+
+
+def useCallbackWithDeps(*deps):
+    def decorator(fn):
+        return React.useCallback(fn, deps)
+    return decorator
+
+useCallback.withDeps = useCallbackWithDeps
diff --git a/transcrypt/modules/org/reactjs/dom.py b/transcrypt/modules/org/reactjs/dom.py
@@ -0,0 +1 @@
+render = ReactDOM.render
