finish theme apply; upgrade vite to v4

package.json

@@ -11,9 +11,11 @@
     "@iconify-json/mdi": "^1.1.33",
     "@iconify/utils": "^2.0.0",
     "ajv-cli": "^5.0.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "sass": "^1.54.8",
-    "vite": "^3.0.7",
-    "vite-plugin-handlebars": "^1.6.0"
+    "vite": "^4.1.1",
+    "vite-plugin-handlebars": "^1.6.0",
+    "vite-plugin-node-polyfills": "^0.7.0"
   },
   "dependencies": {
     "@iconify/json": "^2.2.15",

src/lib/fs-polyfill.js

@@ -0,0 +1 @@
+export default {}

src/main.js

@@ -1,11 +1,5 @@
-import {
-  getTemplate,
-  render,
-} from './renderer';
-
-const template = getTemplate('default')
-console.log('template', template)
-
+import { applyThemeTo } from './themer';
 
 const elCV = document.querySelector('#cv-container')
-elCV.innerHTML = render(template, {})
+
+applyThemeTo('default', {}, elCV)

src/renderer/index.js

@@ -1,15 +0,0 @@
-import ejs from 'ejs';
-
-const templateModules  = {
-  reorx: await import('../templates/reorx.ejs'),
-}
-
-templateModules['default'] = templateModules['reorx']
-
-export function getTemplate(name) {
-  return templateModules[name].default
-}
-
-export function render(template, data, options) {
-  return ejs.render(template, data, options)
-}

src/templates/reorx/index.scss

@@ -0,0 +1,7 @@
+body {
+  background-color: green;
+
+  div {
+    color: red;
+  }
+}

src/themer/index.js

@@ -0,0 +1,47 @@
+import ejs from 'ejs';
+
+const themes = {}
+
+const themeNames = ['reorx']
+
+// https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page
+// note that `?raw` (https://vitejs.dev/guide/assets.html#importing-asset-as-string)
+// cannot be used because we need vite to transform scss into css
+const styleMoudules = import.meta.glob("../templates/*/index.scss", { "query": "?inline" })
+
+for (const name of themeNames) {
+  const templateModule = await import(`../templates/${name}/index.ejs`)
+
+  // https://vitejs.dev/guide/features.html#glob-import
+  const styleModule = await styleMoudules[`../templates/${name}/index.scss`]()
+
+  themes[name] = {
+    template: templateModule.default,
+    style: styleModule.default,
+  }
+}
+
+// set default
+themes.default = themes.reorx
+
+export function getTheme(name) {
+  return themes[name]
+}
+
+export function render(template, data, options) {
+  return ejs.render(template, data, options)
+}
+
+const cvStyleId = 'cv-style'
+
+export function applyThemeTo(name, data, el) {
+  const theme = getTheme(name)
+  el.innerHTML = render(theme.template, data)
+
+  let elStyle = document.getElementById(cvStyleId)
+  if (!elStyle) {
+    elStyle = document.createElement('style')
+    document.head.appendChild(elStyle)
+  }
+  elStyle.innerHTML = theme.style
+}

vite.config.js

@@ -45,6 +45,12 @@ export default defineConfig({
       },
     },
   },
+  resolve: {
+    alias: {
+      // remove the "Module "fs" has been externalized" warning for ejs
+      'fs': 'src/lib/fs-polyfill.js',
+    },
+  },
   plugins: [
     TransformEjs(),
   ],