@vituum/vite-plugin-pug 0.1.5 → 1.0.0-alpha.2

package/README.md

@@ -7,46 +7,29 @@
 import pug from '@vituum/vite-plugin-pug'
 
 export default {
-  plugins: [
-    pug({
-      reload: true,
-      root: null,
-      filters: {},
-      data: '*.json',
-      globals: {
-          template: 'path/to/template.pug'
-      },
-      filetypes: {
-          html: /.(json.html|pug.json.html|pug.html)$/,
-          json: /.(json.pug.html)$/
-      },
-      pug: {}
-    })
-  ]
+    plugins: [
+        pug()
+    ],
+    build: {
+        rollupOptions: {
+            input: ['index.pug.html']
+        }
+    }
 }
 ```
 
-Read the [docs](https://vituum.dev/config/integrations-options.html#vituum-pug) to learn more about the plugin options.
+* Read the [docs](https://vituum.dev/plugins/pug.html) to learn more about the plugin options.
+* Use with [Vituum](https://vituum.dev) to get full functionality.
 
 ## Basic usage
 
 ```html
-<!-- index.html -->
-<script type="application/json" data-format="pug">
-  {
-    "template": "path/to/template.pug",
-    "title": "Hello world"
-  }
-</script>
-```
-or
-```html
-<!-- index.pug.html -->
+<!-- index.pug -->
 include /path/to/template.pug
 ```
 or
 ```html
-<!-- index.json.html or index.pug.json.html  -->
+<!-- index.json  -->
 {
   "template": "path/to/template.pug",
   "title": "Hello world"
@@ -55,5 +38,5 @@ or
 
 ### Requirements
 
-- [Node.js LTS (16.x)](https://nodejs.org/en/download/)
-- [Vite](https://vitejs.dev/) or [Vituum](https://vituum.dev/)
+- [Node.js LTS (18.x)](https://nodejs.org/en/download/)
+- [Vite](https://vitejs.dev/)

package/index.js

@@ -1,138 +1,148 @@
-import { dirname, resolve, relative } from 'path'
+import { resolve, relative } from 'path'
 import fs from 'fs'
 import process from 'node:process'
-import FastGlob from 'fast-glob'
 import lodash from 'lodash'
 import pug from 'pug'
-import chalk from 'chalk'
-import { fileURLToPath } from 'url'
+import { getPackageInfo, merge, pluginBundle, pluginError, pluginReload, processData } from 'vituum/utils/common.js'
+import { renameBuildEnd, renameBuildStart } from 'vituum/utils/build.js'
+import { minimatch } from 'minimatch'
 
-const { name } = JSON.parse(fs.readFileSync(resolve(dirname((fileURLToPath(import.meta.url))), 'package.json')).toString())
+const { name } = getPackageInfo(import.meta.url)
+
+/**
+ * @type {import('@vituum/vite-plugin-pug/types').PluginUserConfig}
+ */
 const defaultOptions = {
     reload: true,
     root: null,
     filters: {},
-    globals: {},
-    data: '',
-    filetypes: {
-        html: /.(json.html|pug.json.html|pug.html)$/,
-        json: /.(json.pug.html)$/
+    globals: {
+        format: 'pug'
     },
-    pug: {}
-}
-
-function processData(paths, data = {}) {
-    let context = {}
-
-    lodash.merge(context, data)
-
-    const normalizePaths = Array.isArray(paths) ? paths.map(path => path.replace(/\\/g, '/')) : paths.replace(/\\/g, '/')
-
-    FastGlob.sync(normalizePaths).forEach(entry => {
-        const path = resolve(process.cwd(), entry)
-
-        context = lodash.merge(context, JSON.parse(fs.readFileSync(path).toString()))
-    })
-
-    return context
+    data: ['src/data/**/*.json'],
+    formats: ['pug', 'json.pug', 'json'],
+    ignoredPaths: [],
+    options: {}
 }
 
-const renderTemplate = async(filename, content, options) => {
+const renderTemplate = async ({ filename, server, root }, content, options) => {
+    const initialFilename = filename.replace('.html', '')
     const output = {}
-    const context = options.data ? processData(options.data, options.globals) : options.globals
+    const context = options.data
+        ? processData({
+            paths: options.data,
+            root
+        }, options.globals)
+        : options.globals
 
-    const isJson = filename.endsWith('.json.html') || filename.endsWith('.json')
-    const isHtml = filename.endsWith('.html') && !options.filetypes.html.test(filename) && !options.filetypes.json.test(filename) && !isJson
-
-    if (isJson || isHtml) {
-        lodash.merge(context, isHtml ? content : JSON.parse(fs.readFileSync(filename).toString()))
+    if (initialFilename.endsWith('.json')) {
+        lodash.merge(context, JSON.parse(content))
 
         output.template = true
 
         if (typeof context.template === 'undefined') {
-            console.error(chalk.red(name + ' template must be defined - ' + filename))
+            const error = `${name}: template must be defined for file ${initialFilename}`
+
+            return new Promise((resolve) => {
+                output.error = error
+                resolve(output)
+            })
         }
 
         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()))
+    } else if (fs.existsSync(`${initialFilename}.json`)) {
+        lodash.merge(context, JSON.parse(fs.readFileSync(`${initialFilename}.json`).toString()))
     }
 
-    try {
-        const template = pug.compileFile(output.template ? context.template : filename, Object.assign(options.pug, {
-            basedir: options.root,
-            filters: options.filters
-        }))
+    return new Promise((resolve) => {
+        try {
+            const template = pug.compileFile(output.template ? context.template : server ? initialFilename : filename, Object.assign(options.options, {
+                basedir: options.root,
+                filters: options.filters
+            }))
 
-        output.content = template(context)
-    } catch (error) {
-        output.error = error
-    }
+            output.content = template(context)
+
+            resolve(output)
+        } catch (error) {
+            output.error = error
 
-    return output
+            resolve(output)
+        }
+    })
 }
 
+/**
+ * @param {import('@vituum/vite-plugin-pug/types').PluginUserConfig} options
+ * @returns [import('vite').Plugin]
+ */
 const plugin = (options = {}) => {
-    options = lodash.merge(defaultOptions, options)
+    let resolvedConfig
+    let userEnv
 
-    return {
+    options = merge(defaultOptions, options)
+
+    return [{
         name,
-        config: ({ root }) => {
+        config (userConfig, env) {
+            userEnv = env
+        },
+        configResolved (config) {
+            resolvedConfig = config
+
             if (!options.root) {
-                options.root = root
+                options.root = config.root
             }
         },
-        transformIndexHtml: {
-            enforce: 'pre',
-            async transform(content, { path, filename, server }) {
-                path = path.replace('?raw', '')
-                filename = filename.replace('?raw', '')
+        buildStart: async () => {
+            if (userEnv.command !== 'build') {
+                return
+            }
 
+            await renameBuildStart(resolvedConfig.build.rollupOptions.input, options.formats)
+        },
+        buildEnd: async () => {
+            if (userEnv.command !== 'build') {
+                return
+            }
+
+            await renameBuildEnd(resolvedConfig.build.rollupOptions.input, options.formats)
+        },
+        transformIndexHtml: {
+            order: 'pre',
+            async transform (content, { path, filename, server }) {
                 if (
-                    !options.filetypes.html.test(path) &&
-                    !options.filetypes.json.test(path) &&
-                    !content.startsWith('<script type="application/json" data-format="pug"')
+                    !options.formats.find(format => filename.replace('.html', '').endsWith(format)) ||
+                    (filename.replace('.html', '').endsWith('.json') && !content.startsWith('{'))
                 ) {
                     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)
+                if (
+                    (filename.replace('.html', '').endsWith('.json') && content.startsWith('{')) &&
+                    (JSON.parse(content)?.format && !options.formats.includes(JSON.parse(content)?.format))
+                ) {
+                    return content
+                }
 
-                    for (const match of matches) {
-                        content = JSON.parse(match.groups.data)
-                    }
+                if (options.ignoredPaths.find(ignoredPath => minimatch(path.replace('.html', ''), ignoredPath) === true)) {
+                    return content
                 }
 
-                const render = await renderTemplate(filename, content, options)
-
-                if (render.error) {
-                    if (!server) {
-                        console.error(chalk.red(render.error))
-                        return
-                    }
-
-                    setTimeout(() => server.ws.send({
-                        type: 'error',
-                        err: {
-                            message: render.error.message,
-                            plugin: name
-                        }
-                    }), 50)
+                const render = await renderTemplate({ filename, server, root: resolvedConfig.root }, content, options)
+                const renderError = pluginError(render.error, server, name)
+
+                if (renderError && server) {
+                    return
+                } else if (renderError) {
+                    return renderError
                 }
 
                 return render.content
             }
         },
-        handleHotUpdate({ file, server }) {
-            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' })
-            }
-        }
-    }
+        handleHotUpdate: ({ file, server }) => pluginReload({ file, server }, options)
+    }, pluginBundle(options.formats)]
 }
 
 export default plugin

package/package.json

@@ -1,24 +1,37 @@
 {
   "name": "@vituum/vite-plugin-pug",
-  "version": "0.1.5",
+  "version": "1.0.0-alpha.2",
   "type": "module",
   "main": "index.js",
+  "scripts": {
+    "tsc": "tsc",
+    "eslint": "eslint '**/*.js' --fix"
+  },
   "dependencies": {
     "pug": "^3.0.2",
     "lodash": "^4.17.21",
-    "chalk": "^5.2.0",
-    "fast-glob": "^3.2.12"
+    "fast-glob": "^3.2.12",
+    "vituum": "^1.0.0-alpha.23",
+    "minimatch": "^9.0.1"
   },
   "devDependencies": {
-    "eslint": "^8.29.0",
-    "eslint-config-standard": "^17.0.0"
+    "@types/node": "^20.3.1",
+    "eslint": "^8.43.0",
+    "eslint-config-standard": "^17.1.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   },
   "files": [
-    "index.js"
+    "index.js",
+    "types"
   ],
+  "exports": {
+    ".": "./index.js",
+    "./types": "./types/*"
+  },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=8.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
   },
   "repository": {
     "type": "git",

package/types/index.d.ts

@@ -0,0 +1,37 @@
+interface PugOptions {
+    /** The name of the file being compiled. Used in exceptions, and required for relative includes and extends. Defaults to 'Pug'. */
+    filename?: string | undefined,
+    /** The root directory of all absolute inclusion. */
+    basedir?: string | undefined,
+    /** If the doctype is not specified as part of the template, you can specify it here. It is sometimes useful to get self-closing tags and remove mirroring of boolean attributes; see doctype documentation for more information. */
+    doctype?: string | undefined,
+    /** Adds whitespace to the resulting HTML to make it easier for a human to read using '  ' as indentation. If a string is specified, that will be used as indentation instead (e.g. '\t'). Defaults to false. */
+    pretty?: boolean | string | undefined,
+    /** Hash table of custom filters. Defaults to undefined. */
+    filters?: any,
+    /** Use a self namespace to hold the locals. It will speed up the compilation, but instead of writing variable you will have to write self.variable to access a property of the locals object. Defaults to false. */
+    self?: boolean | undefined,
+    /** If set to true, the tokens and function body are logged to stdout. */
+    debug?: boolean | undefined,
+    /** If set to true, the function source will be included in the compiled template for better error messages (sometimes useful in development). It is enabled by default unless used with Express in production mode. */
+    compileDebug?: boolean | undefined,
+    /** Add a list of global names to make accessible in templates. */
+    globals?: Array<string> | undefined,
+    /** If set to true, compiled functions are cached. filename must be set as the cache key. Only applies to render functions. Defaults to false. */
+    cache?: boolean | undefined,
+    /** Inline runtime functions instead of require-ing them from a shared version. For compileClient functions, the default is true so that one does not have to include the runtime. For all other compilation or rendering types, the default is false. */
+    inlineRuntimeFunctions?: boolean | undefined,
+    /** The name of the template function. Only applies to compileClient functions. Defaults to 'template'. */
+    name?: string | undefined
+}
+
+export interface PluginUserConfig {
+    reload?: boolean | Function
+    root?: string
+    filters?: Object
+    globals?: Object
+    data?: string | string[]
+    formats?: string[]
+    ignoredPaths?: string[]
+    options?: PugOptions
+}