variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace Vite with ESBuild for the playground (#213)

Browse source
This commit is contained in:
Andrew Prifer 2022-06-13 14:47:07 +02:00 • committed by GitHub
parent a6951effd8
commit 162174568b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 231 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

29
packages/playground/src/index.html
View file

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground – Theatre.js</title>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
background: black;
color: white;
font-family: sans-serif;
font-size: 12px;
}
a {
color: inherit;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>

92
packages/playground/src/index.tsx
View file

@ -1,92 +0,0 @@
/**
* TODO explain this file
* */
/// <reference types="vite/client" />
import type {$FixMe} from '@theatre/shared/utils/types'
import {mapKeys} from 'lodash-es'
import React from 'react'
import ReactDOM from 'react-dom'
const groups = {
shared: mapKeys(import.meta.glob('./shared/*/index.tsx'), (_, path) =>
pathToModuleName(path),
),
personal: mapKeys(import.meta.glob('./personal/*/index.tsx'), (_, path) =>
pathToModuleName(path),
),
tests: mapKeys(import.meta.glob('./tests/*/index.tsx'), (_, path) =>
pathToModuleName(path),
),
}
function pathToModuleName(path: string): string {
const matches = path.match(
/^\.\/(shared|personal|tests)\/([a-zA-Z0-9\-\s]+)\/index\.tsx$/,
)
if (!matches) {
throw new Error(
`module ${path} has invalid characters in its path. Valid names should match the regexp above this line.`,
)
}
return matches[2]
}
const Home = () => (
<ul>
{Object.entries(groups).map(([groupName, modules]) => (
<li key={`li-${groupName}`}>
<span>{groupName}</span>
<Group
key={`group-${groupName}`}
groupName={groupName}
modules={modules}
/>
</li>
))}
</ul>
)
const Group = (props: {groupName: string; modules: Record<string, $FixMe>}) => {
const {groupName, modules} = props
return (
<ul>
{Object.entries(modules).map(([moduleName, callback]) => (
<li key={`li-${moduleName}`}>
<a href={`/${groupName}/${moduleName}`}>{moduleName}</a>
{/* <Group key={`group-${group}`} modules={modules} /> */}
</li>
))}
</ul>
)
}
const currentPathname = document.location.pathname
if (currentPathname === '/') {
renderHome()
} else {
const parts = currentPathname.match(
/^\/(shared|personal|tests)\/([a-zA-Z0-9\-]+)$/,
)
if (parts) {
const [, groupName, moduleName] = parts
const group = groups[groupName as 'shared' | 'personal']
if (!group) {
throw new Error(`Unknown group ${groupName}`)
}
const module = group[moduleName]
if (!module) {
throw new Error(`Unknown module ${moduleName}`)
}
module()
} else {
throw new Error(`Unknown path ${currentPathname}`)
}
}
function renderHome() {
ReactDOM.render(React.createElement(Home), document.getElementById('root'))
}