A framework that lets you write your entire UI
- as functions
- with React hooks
- without React
- without classes
- without vDOM/DOM diffing
- without web components
- without build step
Last active
July 25, 2020 13:43
-
-
Save Munawwar/3e66dae374ccda679742f49d02655c15 to your computer and use it in GitHub Desktop.
Functions only UI POC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <script src="https://unpkg.com/tng-hooks"></script> | |
| </head> | |
| <body> | |
| <div id="app1"></div> | |
| <div id="app2"></div> | |
| <script type="module"> | |
| // THE FRAMEWORK | |
| import { html, render } from 'https://unpkg.com/lit-html/lit-html.js'; | |
| const importFramework = () => { | |
| let rendering = null; | |
| var useTNGSetState = useState; | |
| function useCustomSetState(...args) { | |
| // actual state user wants to use | |
| var [state,setState] = useTNGSetState(...args); | |
| // note down the root component and mount element on first render | |
| var [rendererMeta] = useTNGSetState(rendering); | |
| return [ | |
| state, | |
| // any setState() call needs to re-render entire app | |
| (...args2) => { | |
| const result = setState(...args2); | |
| render( | |
| rendererMeta.componentToRender(), | |
| rendererMeta.target | |
| ); | |
| return result; | |
| } | |
| ]; | |
| }; | |
| const mount = (componentToRender, target) => { | |
| rendering = { | |
| componentToRender, | |
| target, | |
| }; | |
| render(componentToRender(), target); | |
| rendering = null; | |
| }; | |
| return { | |
| html, | |
| mount, | |
| component: TNG, | |
| useState: useCustomSetState, | |
| } | |
| }; | |
| // Framework done | |
| /** example usage of framework **/ | |
| (() => { | |
| const { | |
| component, | |
| html, | |
| mount, | |
| useState, | |
| } = importFramework(); | |
| function func() { | |
| const [count, setCount] = useState(0); | |
| return html` | |
| <div id="count">${count}</div> | |
| <button type="button" @click=${() => setCount(count + 1)}> | |
| Increment | |
| </button> | |
| `; | |
| } | |
| mount(component(func), document.getElementById('app1')); | |
| mount(component(func), document.getElementById('app2')); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment