@vituum/vite-plugin-pug 0.0.1 → 0.1.2

package/README.md

@@ -4,9 +4,13 @@
 # ⚡️🐕 VitePug
 
 ```js
+import pug from '@vituum/vite-plugin-pug'
+
 export default {
   plugins: [
     pug({
+      reload: true,
+      root: null,
       filters: {},
       data: '*.json',
       globals: {
@@ -15,12 +19,17 @@ export default {
       filetypes: {
           html: /.(json.html|pug.json.html|pug.html)$/,
           json: /.(json.pug.html)$/
-      }
+      },
+      pug: {}
     })
   ]
 }
 ```
 
+Read the [docs](https://vituum.dev/config/integrations-options.html#vituum-pug) to learn more about the plugin options.
+
+## Basic usage
+
 ```html
 <!-- index.html -->
 <script type="application/json" data-format="pug">
@@ -33,7 +42,7 @@ export default {
 or
 ```html
 <!-- index.pug.html -->
-{{> "path/to/template.hbs"}}
+include /path/to/template.pug
 ```
 or
 ```html
@@ -47,3 +56,4 @@ or
 ### Requirements
 
 - [Node.js LTS (16.x)](https://nodejs.org/en/download/)
+- [Vite](https://vitejs.dev/) or [Vituum](https://vituum.dev/)

package/index.js

@@ -1,4 +1,4 @@
-import { dirname, extname, resolve, relative } from 'path'
+import { dirname, resolve, relative } from 'path'
 import fs from 'fs'
 import process from 'node:process'
 import FastGlob from 'fast-glob'
@@ -9,13 +9,16 @@ import { fileURLToPath } from 'url'
 
 const { name } = JSON.parse(fs.readFileSync(resolve(dirname((fileURLToPath(import.meta.url))), 'package.json')).toString())
 const defaultOptions = {
+    reload: true,
+    root: null,
     filters: {},
     globals: {},
     data: '',
     filetypes: {
         html: /.(json.html|pug.json.html|pug.html)$/,
         json: /.(json.pug.html)$/
-    }
+    },
+    pug: {}
 }
 
 function processData(paths, data = {}) {
@@ -34,25 +37,27 @@ function processData(paths, data = {}) {
 
 const renderTemplate = async(filename, content, options) => {
     const output = {}
-    const context = processData(options.data, options.globals)
-    let isTemplate = false
+    const context = options.data ? processData(options.data, options.globals) : options.globals
+
+    const isJson = filename.endsWith('.json.html') || filename.endsWith('.json')
+    const isHtml = filename.endsWith('.html') && !filename.endsWith('.json.html')
+
+    if (isJson || isHtml) {
+        lodash.merge(context, isHtml ? content : JSON.parse(fs.readFileSync(filename).toString()))
 
-    if (
-        filename.endsWith('.json.html') ||
-        filename.endsWith('.json')
-    ) {
-        lodash.merge(context, JSON.parse(fs.readFileSync(filename).toString()))
+        output.template = true
 
-        context.template = relative(process.cwd(), context.template)
+        context.template = relative(process.cwd(), context.template).startsWith(relative(process.cwd(), options.root))
+            ? resolve(process.cwd(), context.template) : resolve(options.root, context.template)
     } else if (fs.existsSync(filename + '.json')) {
         lodash.merge(context, JSON.parse(fs.readFileSync(filename + '.json').toString()))
     }
 
     try {
-        const template = pug.compileFile(isTemplate ? context.template : filename, {
+        const template = pug.compileFile(output.template ? context.template : filename, Object.assign(options.pug, {
             basedir: options.root,
             filters: options.filters
-        })
+        }))
 
         output.content = template(context)
     } catch(error) {
@@ -68,21 +73,30 @@ const plugin = (options = {}) => {
     return {
         name,
         config: ({ root }) => {
-            options.root = root
+            if (!options.root) {
+                options.root = root
+            }
         },
         transformIndexHtml: {
             enforce: 'pre',
             async transform(content, { path, filename, server }) {
+                path = path.replace('?raw', '')
+                filename = filename.replace('?raw', '')
+
                 if (
                     !options.filetypes.html.test(path) &&
                     !options.filetypes.json.test(path) &&
-                    !content.startsWith('<script type="application/json"')
+                    !content.startsWith('<script type="application/json" data-format="pug"')
                 ) {
                     return content
                 }
 
-                if (content.startsWith('<script type="application/json"') && !content.includes('data-format="pug"')) {
-                    return content
+                if (content.startsWith('<script type="application/json" data-format="pug"')) {
+                    const matches = content.matchAll(/<script\b[^>]*data-format="(?<format>[^>]+)"[^>]*>(?<data>[\s\S]+?)<\/script>/gmi)
+
+                    for (const match of matches) {
+                        content = JSON.parse(match.groups.data)
+                    }
                 }
 
                 const render = await renderTemplate(filename, content, options)
@@ -100,15 +114,16 @@ const plugin = (options = {}) => {
                             plugin: name
                         }
                     })
-
-                    return '<html style="background: #222"><head></head><body></body></html>'
                 }
 
                 return render.content
             }
         },
         handleHotUpdate({ file, server }) {
-            if (extname(file) === '.pug' || extname(file) === '.html' || extname(file) === '.json') {
+            if (
+                (typeof options.reload === 'function' && options.reload(file)) ||
+                (options.reload && (options.filetypes.html.test(file) || options.filetypes.json.test(file)))
+            ) {
                 server.ws.send({ type: 'full-reload' })
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vituum/vite-plugin-pug",
-  "version": "0.0.1",
+  "version": "0.1.2",
   "type": "module",
   "main": "index.js",
   "dependencies": {
@@ -10,7 +10,7 @@
     "fast-glob": "^3.2.11"
   },
   "devDependencies": {
-    "eslint": "^8.21.0",
+    "eslint": "^8.23.0",
     "eslint-config-standard": "^17.0.0"
   },
   "files": [