Skip to content

Instantly share code, notes, and snippets.

@dutc
Last active March 17, 2023 15:45
Show Gist options
  • Save dutc/15ef3c7ede71ce7848b8aab785f05c27 to your computer and use it in GitHub Desktop.
Save dutc/15ef3c7ede71ce7848b8aab785f05c27 to your computer and use it in GitHub Desktop.
React but with Coroutines
<html>
<head>
<title>Coroutines</title>
</head>
<body>
<div id="root"></div>
<script src="index.jsx" async type="module"></script>
</body>
</html>
import { useState, useEffect, useMemo } from 'react'
import { createRoot } from 'react-dom/client'
import styled from 'styled-components'
const R = styled.h2`color: red;`
const G = styled.h2`color: green;`
const B = styled.h2`color: blue;`
const c2c = coro => props => {
const inst = useMemo(() => coro(props), [])
useEffect(() => () => inst.return(props), [inst])
return inst.next(props.value).value
}
const Component = c2c(function*({ value }) {
let renders = 0
while (true)
for (let C of [R, G, B])
value = yield <C>value: { value } (renders: { renders++ })</C>
})
const App = () => {
const [ value, setValue ] = useState(0)
return <>
<h1>What's next after functional components?</h1>
<button onClick={ () => setValue(x => x + 1) }>
<Component value={ value } />
<h2>+</h2>
</button>
</>
}
createRoot(document.getElementById('root')).render(<App />)
{
"scripts": {
"serve": "vite serve --debug --logLevel info --config vite.config.js .",
"build": "vite build"
},
"devDependencies": {
"@babel/cli": "^7.19.3",
"@babel/core": "^7.19.3",
"@vitejs/plugin-react": "^2.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.6",
"superagent": "^8.0.2",
"vite": "^3.1.7",
"vite-plugin-babel": "^1.1.2",
"vite-require": "^0.2.3"
}
}
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteRequire } from 'vite-require'
export default defineConfig({
server: {},
plugins: [
viteRequire(),
react({
jsxRuntime: 'classic',
babel: {
plugins: []
},
}),
],
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment