tiptap/demos/vite.config.ts
Dominik f387ad3dd4
feat(pm): new prosemirror package for dependency resolving
* chore:(core): migrate to tsup

* chore: migrate blockquote and bold to tsup

* chore: migrated bubble-menu and bullet-list to tsup

* chore: migrated more packages to tsup

* chore: migrate code and character extensions to tsup

* chore: update package.json to simplify build for all packages

* chore: move all packages to tsup as a build process

* chore: change ci build task

* feat(pm): add prosemirror meta package

* rfix: resolve issues with build paths & export mappings

* docs: update documentation to include notes for @tiptap/pm

* chore(pm): update tsconfig

* chore(packages): update packages

* fix(pm): add package export infos & fix dependencies

* chore(general): start moving to pm package as deps

* chore: move to tiptap pm package internally

* fix(demos): fix demos working with new pm package

* fix(tables): fix tables package

* fix(tables): fix tables package

* chore(demos): pinned typescript version

* chore: remove unnecessary tsconfig

* chore: fix netlify build

* fix(demos): fix package resolving for pm packages

* fix(tests): fix package resolving for pm packages

* fix(tests): fix package resolving for pm packages

* chore(tests): fix tests not running correctly after pm package

* chore(pm): add files to files array

* chore: update build workflow

* chore(tests): increase timeout time back to 12s

* chore(docs): update docs

* chore(docs): update installation guides & pm information to docs

* chore(docs): add link to prosemirror docs

* fix(vue-3): add missing build step

* chore(docs): comment out cdn link

* chore(docs): remove semicolons from docs

* chore(docs): remove unnecessary installation note

* chore(docs): remove unnecessary installation note
2023-02-02 17:37:33 +01:00

299 lines
8.2 KiB
TypeScript

import { svelte } from '@sveltejs/vite-plugin-svelte'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import fg from 'fast-glob'
import fs from 'fs'
import {
basename,
dirname,
join,
resolve,
} from 'path'
import { v4 as uuid } from 'uuid'
import { defineConfig } from 'vite'
// import checker from 'vite-plugin-checker'
const getPackageDependencies = () => {
const paths: Array<{ find: string, replacement: any }> = []
fg.sync('../packages/*', { onlyDirectories: true })
.map(name => name.replace('../packages/', ''))
.forEach(name => {
if (name === 'pm') {
fg.sync(`../packages/${name}/*`, { onlyDirectories: true })
.forEach(subName => {
const subPkgName = subName.replace(`../packages/${name}/`, '')
paths.push({ find: `@tiptap/${name}/${subPkgName}`, replacement: resolve(`../packages/${name}/${subPkgName}/index.ts`) })
})
} else {
paths.push({ find: `@tiptap/${name}`, replacement: resolve(`../packages/${name}/src/index.ts`) })
}
})
return paths
}
const includeDependencies = fs.readFileSync('./includeDependencies.txt')
.toString()
.replace(/\r\n/g, '\n')
.split('\n')
.filter(value => value)
export default defineConfig({
optimizeDeps: {
include: includeDependencies,
},
build: {
rollupOptions: {
input: fg.sync('./**/index.html', {
ignore: ['dist'],
}),
},
},
plugins: [
// checker({ typescript: { tsconfigPath: './tsconfig.base.json' } }),
// checker({ typescript: { tsconfigPath: './tsconfig.react.json' } }),
// checker({ typescript: { tsconfigPath: './tsconfig.vue-2.json' } }),
// checker({ typescript: { tsconfigPath: './tsconfig.vue-3.json' } }),
vue(),
react(),
svelte(),
{
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('/Svelte')) {
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/svelte.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) {
if (id.startsWith('raw!') && importer) {
const [, relativePath] = id.split('raw!')
const fullPath = join(dirname(importer), relativePath)
return `virtual!${fullPath}!!${uuid()}`
}
},
load(id) {
if (id.startsWith('virtual!')) {
const path = id.split('!!')[0].replace('virtual!', '')
const data = fs.readFileSync(path, 'utf8')
return `export default ${JSON.stringify(data)}`
}
},
},
{
name: 'demos',
resolveId(id) {
if (id === '@demos') {
return '@demos'
}
},
load(id) {
if (id === '@demos') {
const demos = fg.sync('./src/*/*', { onlyDirectories: true })
.map(demoPath => {
const name = demoPath.replace('./src/', '')
const tabs = fg.sync(`./src/${name}/*`, { onlyDirectories: true })
.map(tabPath => ({
name: basename(tabPath),
}))
return {
name,
tabs,
}
})
return `export const demos = ${JSON.stringify(demos)}`
}
},
},
{
name: 'source',
resolveId(id, importer) {
if (id === '@source' && importer) {
return `source!${dirname(importer)}!!${uuid()}`
}
},
load(id) {
if (id.startsWith('source!')) {
const path = id.split('!!')[0].replace('source!', '')
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}/`, '')
return {
name,
content: fs.readFileSync(`${path}/${name}`, 'utf8'),
}
})
.sort((a, b) => {
const depthA = a.name.split('/').length
const depthB = b.name.split('/').length
if (depthA > depthB) {
return 1
}
if (depthA < depthB) {
return -1
}
const aIsIndex = basename(a.name).includes('index.')
const bIsIndex = basename(b.name).includes('index.')
if (aIsIndex) {
return -1
}
if (bIsIndex) {
return 1
}
return 0
})
return `export default ${JSON.stringify(files)}`
}
},
},
{
name: 'middleware',
apply: 'serve',
configureServer(viteDevServer) {
return () => {
viteDevServer.middlewares.use(async (req, res, next) => {
if (req?.originalUrl?.startsWith('/preview')) {
req.url = '/preview/index.html'
}
next()
})
}
},
},
],
resolve: {
alias: getPackageDependencies(),
},
})