dutc/index.html

## index.html
<html>
    <head>
        <title>Coroutines</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.jsx" async type="module"></script>
    </body>
</html>

## index.jsx
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 />)

## package.json
{
  "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"
  }
}

## vite.config.js
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: []
            },
        }),
    ],
})
	<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: []
	},
	}),
	],
	})