d9859f1564
- we have a static astro website under /website. It has the implementation docs of the homepage/gaufre templates, and it handles the few API endpoints (the gaufre js, backgrounds, logos) - we have a vite app under /packages/integration. It has the react components generating the homepage and the gaufre button, and their css. Its used to generate an npm package
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { resolve, basename, join, dirname } from "path"
|
|
import { defineConfig } from "vite"
|
|
import { renderToStaticMarkup } from "react-dom/server"
|
|
import { importSingleTs } from "import-single-ts"
|
|
import * as prettier from "prettier"
|
|
import { reactConfig } from "./vite.config"
|
|
import { ReactNode } from "react"
|
|
|
|
/*
|
|
* this config file takes care of building the HTML files
|
|
*
|
|
* it is meant to be run just after the react build, as it doesn't empty the dist/ folder
|
|
* it works by checking src/html.tsx and generate static HTML files from each exported component
|
|
*
|
|
* see vite.config.ts for the react files
|
|
*/
|
|
export default defineConfig({
|
|
...reactConfig,
|
|
plugins: [...reactConfig.plugins, htmlFromComponents()],
|
|
build: {
|
|
...reactConfig.build,
|
|
emptyOutDir: false,
|
|
lib: {
|
|
entry: resolve(__dirname, "src/html.tsx"),
|
|
name: "lasuite-empty-html-bundle",
|
|
fileName: "lasuite-empty-html-bundle",
|
|
formats: ["es"],
|
|
},
|
|
},
|
|
})
|
|
|
|
function htmlFromComponents() {
|
|
const reactHtmlComponentRegex = /\.?html\.tsx$/
|
|
return {
|
|
name: "transform-file",
|
|
async transform(_, id) {
|
|
if (reactHtmlComponentRegex.test(id)) {
|
|
const component = await importSingleTs(id)
|
|
component.templates.forEach(async (template: { name: string; render: ReactNode }) => {
|
|
const html = await prettier.format(renderToStaticMarkup(template.render), {
|
|
parser: "html",
|
|
printWidth: 100,
|
|
tabWidth: 4,
|
|
bracketSameLine: false,
|
|
htmlWhitespaceSensitivity: "ignore",
|
|
})
|
|
this.emitFile({
|
|
type: "asset",
|
|
fileName: `html/${template.name}.html`,
|
|
source: html,
|
|
})
|
|
})
|
|
|
|
return {
|
|
code: "",
|
|
map: null,
|
|
}
|
|
}
|
|
},
|
|
// in the end, don't generate the js bundle, it's empty, we only want the html files
|
|
generateBundle(_, bundle) {
|
|
delete bundle["lasuite-empty-html-bundle.js"]
|
|
},
|
|
}
|
|
}
|