Robin Malfait
123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
const fs = require('fs')
|
|
const path = require('path')
|
|
|
|
const prettier = require('prettier')
|
|
const Prism = require('prismjs')
|
|
require('prismjs/plugins/custom-class/prism-custom-class')
|
|
|
|
const routes = require('./examples/src/routes')
|
|
|
|
function flatten(routes, resolver) {
|
|
return routes
|
|
.map(route => (route.children ? flatten(route.children, resolver) : resolver(route)))
|
|
.flat(Infinity)
|
|
}
|
|
|
|
// This is a hack, but the idea is that we want to import all the examples from the routes.json
|
|
// file. However just doing dynamic imports() doesn't work well at build time. Therefore we will
|
|
// generate a fake file that contains them all.
|
|
let i = 0
|
|
const map = {}
|
|
const contents = flatten(routes, route => route.component)
|
|
.map(path => {
|
|
const name = `Component$${++i}`
|
|
map[path] = name
|
|
return `import ${name} from ".${path}";`
|
|
})
|
|
.join('\n')
|
|
fs.writeFileSync(
|
|
path.resolve(__dirname, './examples/src/.generated/preload.js'),
|
|
`${contents}\n\nexport default {\n${Object.entries(map)
|
|
.map(([path, name]) => ` "${path}": ${name}`)
|
|
.join(',\n')}\n}`,
|
|
'utf8'
|
|
)
|
|
|
|
// ---
|
|
|
|
function pipe(...fns) {
|
|
return fns.reduceRight((f, g) => (...args) => f(g(...args)), fns.pop())
|
|
}
|
|
|
|
Prism.plugins.customClass.map({
|
|
tag: 'text-code-red',
|
|
'attr-name': 'text-code-yellow',
|
|
'attr-value': 'text-code-green',
|
|
deleted: 'text-code-red',
|
|
inserted: 'text-code-green',
|
|
punctuation: 'text-code-white',
|
|
keyword: 'text-code-purple',
|
|
string: 'text-code-green',
|
|
function: 'text-code-blue',
|
|
boolean: 'text-code-red',
|
|
comment: 'text-gray-400 italic',
|
|
})
|
|
|
|
const sourcePipeline = pipe(
|
|
path => fs.readFileSync(path, 'utf8'),
|
|
contents =>
|
|
prettier.format(contents, {
|
|
parser: 'vue',
|
|
printWidth: 100,
|
|
semi: false,
|
|
singleQuote: true,
|
|
trailingComma: 'es5',
|
|
}),
|
|
contents => Prism.highlight(contents, Prism.languages.markup),
|
|
contents =>
|
|
[
|
|
'<pre class="language-vue rounded-md bg-gray-800 py-3 px-4 overflow-x-auto">',
|
|
'<code class="language-vue text-gray-200">',
|
|
contents,
|
|
'</code>',
|
|
'</pre>',
|
|
].join('')
|
|
)
|
|
|
|
const skipRoutes = ['/']
|
|
const source = Object.assign(
|
|
{},
|
|
...flatten(routes, route => ({
|
|
urlPath: route.path,
|
|
sourcePath: route.component,
|
|
}))
|
|
.filter(({ urlPath }) => !skipRoutes.includes(urlPath))
|
|
.map(({ urlPath, sourcePath }) => ({
|
|
[urlPath]: sourcePipeline(path.resolve(__dirname, 'examples', 'src', sourcePath), 'utf8'),
|
|
}))
|
|
)
|
|
fs.writeFileSync(
|
|
path.resolve(__dirname, './examples/src/.generated/source.json'),
|
|
JSON.stringify(source, null, 2),
|
|
'utf8'
|
|
)
|
|
// ---
|
|
|
|
const TailwindUIPlugin = ({
|
|
root, // project root directory, absolute path
|
|
app, // Koa app instance
|
|
server, // raw http server instance
|
|
watcher, // chokidar file watcher instance
|
|
resolver, // chokidar file watcher instance
|
|
}) => {
|
|
const routePaths = flatten(routes, route => route.path)
|
|
|
|
app.use(async (ctx, next) => {
|
|
if (routePaths.includes(ctx.path)) {
|
|
ctx.path = './index.html'
|
|
}
|
|
|
|
await next()
|
|
})
|
|
}
|
|
|
|
module.exports = {
|
|
alias: {
|
|
[process.env.NODE_ENV === 'production' ? '@headlessui/vue' : '/@headlessui/vue/']: path.resolve(
|
|
__dirname,
|
|
'./src/index.ts'
|
|
),
|
|
},
|
|
configureServer: [TailwindUIPlugin],
|
|
}
|