demos: Add setup for plain js demos (#2288)

* add basic js demo

* improve js demos

* change demo button

* fix js demos on build

* add tailwind experiment

* docs: replace tailwind demo

Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>
This commit is contained in:
Philipp Kühn
2021-12-17 13:49:45 +01:00
committed by GitHub
parent c980bb2f5f
commit 318592ba22
5 changed files with 159 additions and 16 deletions

View File

@@ -39,6 +39,88 @@ export default defineConfig({
vue(),
reactRefresh(),
{
name: 'html-transform',
transformIndexHtml: {
enforce: 'pre',
transform(html: string, context) {
const dir = dirname(context.path)
const data = dir.split('/')
const demoCategory = data[2]
const demoName = data[3]
if (dir.endsWith('/JS')) {
return {
html: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
${html}
<script type="module">
import setup from '../../../../setup/js.ts'
import source from '@source'
setup('${demoCategory}/${demoName}', source)
</script>
</body>
</html>
`,
tags: [],
}
}
if (dir.endsWith('/Vue')) {
return {
html: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from '../../../../setup/vue.ts'
import source from '@source'
setup('${demoCategory}/${demoName}', source)
</script>
</body>
</html>
`,
tags: [],
}
}
if (dir.endsWith('/React')) {
return {
html: `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from '../../../../setup/react.ts'
import source from '@source'
setup('${demoCategory}/${demoName}', source)
</script>
</body>
</html>
`,
tags: [],
}
}
},
},
},
{
name: 'raw',
resolveId(id, importer) {
@@ -97,13 +179,16 @@ export default defineConfig({
load(id) {
if (id.startsWith('source!')) {
const path = id.split('!!')[0].replace('source!', '')
const files = fg.sync(`${path}/**/*`, {
ignore: [
'**/index.html',
'**/*.spec.js',
'**/*.spec.ts',
],
})
const ignore = [
'**/*.spec.js',
'**/*.spec.ts',
]
if (!path.endsWith('/JS')) {
ignore.push('**/index.html')
}
const files = fg.sync(`${path}/**/*`, { ignore })
.map(filePath => {
const name = filePath.replace(`${path}/`, '')