@newlogic-digital/core 1.1.1 → 2.0.0-alpha.10

package/README.md

@@ -19,58 +19,42 @@ Starter for creating web applications. Powered by Vite and Vituum.
 - 📦 Modular structure
 - ✉️ Email templates
 
-Newlogic Core is an integration for [Vituum](https://vituum.dev), and contains set of tools that can be used to create modern web applications.
+Newlogic Core is a plugin for [Vite](https://vitejs.dev), and contains set of plugins that can be used to create modern web applications.
 
-We use it as our main front-end tool at [Newlogic Digital](https://www.newlogic.cz/) to create wonders.
+We use it as our main front-end set of tools at [Newlogic Digital](https://www.newlogic.cz/) to create wonders.
 
 ## 🛠️ Integrated tools
 * **[Vite](https://vitejs.dev)** next-generation frontend tooling
 * **[Vituum](https://vituum.dev)** fast prototyping with template engines
-* **[PostCSS](https://postcss.org/)** with basic plugins and [Tailwind CSS](https://tailwindcss.com/) for utility classes.
-* **[TwigJS](https://github.com/vituum/vite-plugin-twig)** as template engine twig
+* **[PostCSS](https://postcss.org/)** with basic plugins
+* **[TailwindCSS](https://tailwindcss.com/)** for utility classes
 * **[Latte](https://github.com/vituum/vite-plugin-latte)** as template engine latte
 
-### 💡 Basic principle
-
-Most of today build tools are hard to configure and not focused primary on PHP server side applications. 
-
-PHP programmers often **don't want to configure anything**, basic idea is to add as many files you want to `src` and get output in `public/assets` - without worrying about anything.
-
-It doesn't matter if you use Nette, Symfony or Laravel - the structure can be freely adjusted as needed - `resources` and` public`, `src` and` dist` or `app/assets` and` www` 
-
-It's up to you - all paths are freely configurable via `vite.config.js` config
-
-### 📦 Modularity
-
-Newlogic Core uses [Vituum](https://vituum.dev) and [Vite](https://vitejs.dev) for frontend tooling.
-
-Source files are divided by modules inside `src` directory - styles, scripts, templates, data, emails, assets. It is optional which modules you want to use for the project, simple delete the directory. You really only use what you want to use.
-
 ## 🪄 Get started
 
 ```sh
 npm i @newlogic-digital/core --save-dev
 ```
 
-### Requirements
-
-- [Node.js LTS (16.x)](https://nodejs.org/en/download/)
-- [Vituum](https://vituum.dev/)
-
 ### Config
 
 Each **Newlogic Core** project needs to have config via `vite.config.js`
 
 ```js
-import { defineConfig } from 'vituum'
 import core from  "@newlogic-digital/core"
 
-export default defineConfig({
-  integrations: [core()]
-})
+export default {
+  plugins: [core()]
+}
 ```
 
 You can also try minimal example project [core-starter](https://github.com/newlogic-digital/core-starter)
 
+### Requirements
+
+- [Node.js LTS (18.x)](https://nodejs.org/en/download/)
+- [Vite](https://vitejs.dev/)
+- [PHP 8.2](https://www.php.net/) for Latte support
+
 ## Licence
 MIT

package/index.js

@@ -1,37 +1,36 @@
-import posthtml from '@vituum/posthtml'
-import juice from '@vituum/juice'
-import twig from '@vituum/twig'
-import latte from '@vituum/latte'
-import lodash from 'lodash'
-import minifier from 'html-minifier-terser'
-import fs from 'fs'
-import fse from 'fs-extra'
-import { dirname, resolve } from 'path'
+import fs from 'node:fs'
+import os from 'node:os'
+import { dirname, resolve, join, relative } from 'node:path'
 import postHtml from 'posthtml'
-import highlight from './prism.js'
-import tailwindcss from 'tailwindcss'
-import tailwindcssNesting from 'tailwindcss/nesting/index.js'
-import postcssImport from 'postcss-import'
-import postcssNesting from 'postcss-nesting'
-import postcssCustomMedia from 'postcss-custom-media'
-import postcssCustomSelectors from 'postcss-custom-selectors'
-import autoprefixer from 'autoprefixer'
-import chalk from 'chalk'
+import vituum from 'vituum'
+import posthtml from '@vituum/vite-plugin-posthtml'
+import latte from '@vituum/vite-plugin-latte'
+import twig from '@vituum/vite-plugin-twig'
+import juice from '@vituum/vite-plugin-juice'
+import send from '@vituum/vite-plugin-send'
+import tailwindcss from '@vituum/vite-plugin-tailwindcss'
+import { getPackageInfo, merge } from 'vituum/utils/common.js'
+import highlight from './src/prism.js'
+import twigOptions from './src/twig.js'
 import FastGlob from 'fast-glob'
+import fse from 'fs-extra'
+import pc from 'picocolors'
+
+const { name } = getPackageInfo(import.meta.url)
 
 const posthtmlPrism = {
-    name: '@vituum/vite-plugin-posthtml-prism',
+    name: '@newlogic-digital/vite-plugin-posthtml-prism',
     enforce: 'post',
     transformIndexHtml: {
         enforce: 'post',
-        transform: async(html, { filename }) => {
+        transform: async (html, { filename }) => {
             filename = filename.replace('?raw', '')
 
-            if (!filename.endsWith('ui.json') && !filename.endsWith('ui.vituum.json.html')) {
+            if (!filename.replace('.html', '').endsWith('ui.json')) {
                 return
             }
 
-            const plugins = [highlight({ inline: false  })]
+            const plugins = [highlight({ inline: false })]
 
             const result = await postHtml(plugins).process(html)
 
@@ -40,206 +39,36 @@ const posthtmlPrism = {
     }
 }
 
-const wrapPreCode = (code, lang) => {
-    return `<pre class="language-${lang}"><code class="language-${lang}">${code}</code></pre>`
-}
-
-const stripIndent = (string) => {
-    const indent = () => {
-        const match = string.match(/^[ \t]*(?=\S)/gm)
-
-        if (!match) {
-            return 0
-        }
-
-        return match.reduce((r, a) => Math.min(r, a.length), Infinity)
-    }
-
-    if (indent() === 0) {
-        return string
-    }
-
-    const regex = new RegExp(`^[ \\t]{${indent()}}`, 'gm')
-
-    return string.replace(regex, '')
-}
-
-const parseMinifyHtml = async (input, name) => {
-    const minify = await minifier.minify(input, {
-        collapseWhitespace: true,
-        collapseInlineTagWhitespace: false,
-        minifyCSS: true,
-        removeAttributeQuotes: true,
-        quoteCharacter: '\'',
-        minifyJS: true
-    })
-
-    if (name) {
-        return JSON.stringify({
-            [name]: minify
-        })
-    } else {
-        return JSON.stringify(minify)
-    }
-}
-
-const defaultConfig = {
-    format: 'twig',
+/**
+ * @type {import('@newlogic-digital/core/types').PluginUserConfig}
+ */
+const defaultOptions = {
+    mode: null,
+    cert: 'localhost',
+    format: ['latte'],
     emails: {
         outputDir: resolve(process.cwd(), 'public/email'),
         appDir: resolve(process.cwd(), 'app/Templates/Emails')
     },
-    posthtml: {},
-    juice: {},
-    tailwind: {},
-    twig: {
-        namespaces: {
-            src: resolve(process.cwd(), 'src'),
-            templates: resolve(process.cwd(), 'src/templates')
-        },
-        functions: {
-            pages: () => {
-                return fs.readdirSync('src/views').filter(file => fs.statSync('src/views/' + file).isFile())
-            },
-            fetch: (data) => {
-                if (typeof data !== 'undefined') {
-                    if (data.indexOf('http') > -1) {
-                        return data
-                    } else {
-                        let slash = data.indexOf('/') + 1
-                        if (slash > 1) {
-                            slash = 0
-                        }
-
-                        return fs.readFileSync(process.cwd() + '/' + data.substring(slash, data.length), 'utf8').toString()
-                    }
-                }
-            },
-            randomColor: () => {
-                return '#' + Math.random().toString(16).slice(2, 8)
-            },
-            placeholder: (width, height) => {
-                const colors = ['333', '444', '666', '222', '777', '888', '111']
-                return 'https://via.placeholder.com/' + width + 'x' + height + '/' + colors[Math.floor(Math.random() * colors.length)] + '.webp'
-            },
-            lazy: (width, height) => {
-                const svg = encodeURIComponent(stripIndent('<svg width="' + width + '" height="' + height + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + width + ' ' + height + '"></svg>'))
-
-                return 'data:image/svg+xml;charset=UTF-8,' + svg
-            },
-            ratio: (width, height) => {
-                return (height / width) * 100
-            }
-        },
-        filters: {
-            asset: (url) => {
-                return url.replace('/src/', '/')
-            },
-            rem: (value) => {
-                return `${value / 16}rem`
-            },
-            encode64: (path) => {
-                const svg = encodeURIComponent(stripIndent(path))
-
-                return 'data:image/svg+xml;charset=UTF-8,' + svg
-            },
-            exists: (path) => {
-                if (path.indexOf('/') === 0) {
-                    path = path.slice(1)
-                }
-
-                return fs.existsSync(resolve(process.cwd(), path))
-            },
-            tel: (value) => {
-                return value.replace(/\s+/g, '').replace('(', '').replace(')', '')
-            }
-        },
-        extensions: [
-            (Twig) => {
-                Twig.exports.extendTag({
-                    type: 'json',
-                    regex: /^json\s+(.+)$|^json$/,
-                    next: ['endjson'],
-                    open: true,
-                    compile: function(token) {
-                        const expression = token.match[1] ?? '\'_null\''
-
-                        token.stack = Reflect.apply(Twig.expression.compile, this, [{
-                            type: Twig.expression.type.expression,
-                            value: expression
-                        }]).stack
-
-                        delete token.match
-                        return token
-                    },
-                    parse: async function(token, context, chain) {
-                        const name = Reflect.apply(Twig.expression.parse, this, [token.stack, context])
-                        const output = this.parse(token.output, context)
-
-                        if (name === '_null') {
-                            return {
-                                chain,
-                                output: await parseMinifyHtml(output)
-                            }
-                        } else {
-                            return {
-                                chain,
-                                output: await parseMinifyHtml(output, name)
-                            }
-                        }
-                    }
-                })
-                Twig.exports.extendTag({
-                    type: 'endjson',
-                    regex: /^endjson$/,
-                    next: [],
-                    open: false
-                })
-            },
-            (Twig) => {
-                Twig.exports.extendTag({
-                    type: "code",
-                    regex: /^code\s+(.+)$/,
-                    next: ["endcode"], // match the type of the end tag
-                    open: true,
-                    compile: function (token) {
-                        const expression = token.match[1];
-
-                        token.stack = Reflect.apply(Twig.expression.compile, this, [{
-                            type: Twig.expression.type.expression,
-                            value: expression
-                        }]).stack;
-
-                        delete token.match;
-                        return token;
-                    },
-                    parse: function (token, context, chain) {
-                        let type = Reflect.apply(Twig.expression.parse, this, [token.stack, context]);
-                        let output = this.parse(token.output, context);
-                        let mirror = false;
-
-                        if (type.includes(":mirror")) {
-                            mirror = true;
-                            type = type.replace(":mirror", "")
-                        }
-
-                        return {
-                            chain: chain,
-                            output: `${mirror ? output : ""}${wrapPreCode(output, type)}`
-                        };
-                    }
-                });
-                Twig.exports.extendTag({
-                    type: "endcode",
-                    regex: /^endcode$/,
-                    next: [ ],
-                    open: false
-                });
-            }
-        ]
+    vituum: {
+        pages: {
+            dir: './src/views'
+        }
+    },
+    posthtml: {
+        root: resolve(process.cwd(), 'src')
+    },
+    juice: {
+        paths: ['src/views/email']
+    },
+    tailwindcss: {},
+    send: {
+        host: 'smtp.newlogic.cz',
+        from: 'noreply@newlogic.cz',
+        user: 'noreply@newlogic.cz'
     },
     latte: {
-        isStringFilter: (filename) => dirname(filename).endsWith('email'),
+        renderTransformedHtml: (filename) => dirname(filename).endsWith('email'),
         globals: {
             srcPath: resolve(process.cwd(), 'src'),
             templatesPath: resolve(process.cwd(), 'src/templates')
@@ -250,64 +79,115 @@ const defaultConfig = {
             }
         },
         filters: {
-            json: async (input, name) => {
-                return await parseMinifyHtml(input, name)
-            },
+            json: resolve(process.cwd(), 'node_modules/@newlogic-digital/core/latte/JsonFilter.js'),
             code: 'node_modules/@newlogic-digital/core/latte/CodeFilter.php'
         },
-        ignoredPaths: ['**/views/email/**/!(*.test).latte']
+        ignoredPaths: ['**/views/email/**/!(*.test).latte', '**/emails/!(*.test).latte']
     },
-    postcssNesting: {
-        noIsPseudoSelector: true
-    }
+    twig: twigOptions
 }
 
-const integration = (userConfig = {}) => {
-    userConfig = lodash.merge(defaultConfig, userConfig)
+/**
+ * @param {import('@newlogic-digital/core/types').PluginUserConfig} options
+ * @returns [import('vite').Plugin]
+ */
+const plugin = (options = {}) => {
+    options = merge(defaultOptions, options)
 
-    return {
-        config: {
-            integrations: [posthtml(userConfig.posthtml), juice(userConfig.juice), twig(userConfig.twig), latte(userConfig.latte), {
-                task: {
-                    name: 'emails',
-                    action: async () => {
-                        const emails = FastGlob.sync(`${resolve(process.cwd(), userConfig.emails.outputDir)}/**`).filter(entry => !entry.endsWith('test.html'))
-                        const emailsProd = emails.map(path => {
-                            return path.replace(resolve(process.cwd(), userConfig.emails.outputDir), resolve(process.cwd(), userConfig.emails.appDir)).replace('.html', '.latte')
-                        })
+    const templatesPlugins = []
 
-                        await Promise.all(emails.map((file, i) =>
-                            fse.move(file, emailsProd[i], { overwrite: true })
-                        ))
+    if (options.format.includes('twig')) {
+        templatesPlugins.push(twig(options.twig))
+    }
 
-                        console.info(`${chalk.cyan(`newlogic-core`)} ${chalk.green('all email files moved')}`)
-                    }
+    if (options.format.includes('latte')) {
+        templatesPlugins.push(latte(options.latte))
+    }
+
+    const plugins = [
+        vituum(options.vituum),
+        tailwindcss(options.tailwindcss),
+        posthtml(options.posthtml),
+        ...templatesPlugins,
+        juice(options.juice),
+        send(options.send),
+        posthtmlPrism
+    ]
+
+    return [{
+        name,
+        enforce: 'pre',
+        config (userConfig, userEnv) {
+            const isHttps = userConfig?.server?.https !== false &&
+                fs.existsSync(join(os.homedir(), `.ssh/${options.cert}.pem`)) &&
+                fs.existsSync(join(os.homedir(), `.ssh/${options.cert}-key.pem`))
+
+            let defaultInput = [
+                './src/views/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
+                '!./src/views/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json',
+                './src/styles/*.{css,pcss,scss,sass,less,styl,stylus}',
+                './src/scripts/*.{js,ts,mjs}'
+            ]
+
+            if (!options.mode) {
+                options.mode = userEnv.mode
+            }
+
+            if (userEnv.mode === 'headless') {
+                userEnv.mode = 'production'
+
+                defaultInput = [
+                    './src/styles/*.{css,pcss,scss,sass,less,styl,stylus}',
+                    './src/scripts/*.{js,ts,mjs}'
+                ]
+            } else if (userEnv.mode === 'emails') {
+                userEnv.mode = 'production'
+
+                defaultInput = [
+                    './src/views/email/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
+                    '!./src/views/email/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json'
+                ]
+            }
+
+            userConfig.build = Object.assign({
+                manifest: true,
+                emptyOutDir: false,
+                modulePreload: false,
+                assetsInlineLimit: 0,
+                outDir: resolve(userConfig.root ?? process.cwd(), 'public'),
+                rollupOptions: {
+                    input: defaultInput
                 }
-            }],
-            plugins: [posthtmlPrism],
-            server: {
-                open: true,
-                https: true,
-                reload: file => (file.endsWith('.tpl') || file.endsWith('.latte')) && !file.includes('temp/')
-            },
-            templates: {
-                format: userConfig.format
-            },
-            imports: {
-                paths: ['./src/styles/**', './src/scripts/**', '!./src/styles/Utils/**']
-            },
-            vite: {
-                server: {
-                    origin: fs.existsSync(resolve(process.cwd(), 'app/settings.php')) ? (fs.readFileSync(resolve(process.cwd(), 'app/settings.php')).toString().match(/VITE_URL = '(.+)';/) || [null, null])[1] : null
+            }, userConfig.build ?? {})
+
+            userConfig.server = Object.assign({
+                host: true,
+                fsServe: {
+                    strict: false
                 },
-                css: {
-                    postcss: {
-                        plugins: [postcssImport, tailwindcssNesting(postcssNesting(userConfig.postcssNesting)), postcssCustomMedia, postcssCustomSelectors, tailwindcss(userConfig.tailwind), autoprefixer]
+                https: isHttps
+                    ? {
+                        key: fs.readFileSync(join(os.homedir(), `.ssh/${options.cert}-key.pem`)),
+                        cert: fs.readFileSync(join(os.homedir(), `.ssh/${options.cert}.pem`))
                     }
-                }
+                    : false
+            }, userConfig.server ?? {})
+        },
+        writeBundle: async () => {
+            if (options.mode === 'emails') {
+                const emails = FastGlob.sync(`${resolve(process.cwd(), options.emails.outputDir)}/**`).filter(entry => !entry.endsWith('test.html'))
+                const emailsProd = emails.map(path => {
+                    return path.replace(resolve(process.cwd(), options.emails.outputDir), resolve(process.cwd(), options.emails.appDir)).replace('.html', '.latte')
+                })
+
+                await Promise.all(emails.map((file, i) =>
+                    fse.move(file, emailsProd[i], { overwrite: true })
+                ))
+
+                console.info(`${pc.cyan('@newlogic-digital/core')} ${pc.green(`all email files were moved to ${relative(process.cwd(), options.emails.appDir)}`)}`)
             }
         }
-    }
+    }, ...plugins]
 }
 
-export default integration
+export default plugin

package/latte/JsonFilter.js

@@ -0,0 +1,7 @@
+import parseMinifyHtml from '../src/minify.js'
+
+const json = async (input, name) => {
+    return await parseMinifyHtml(input, name)
+}
+
+export default json

package/package.json

@@ -1,30 +1,43 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "1.1.1",
+  "version": "2.0.0-alpha.10",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
   "license": "MIT",
   "scripts": {
-    "npm-publish": "npm publish --tag next"
+    "tsc": "tsc",
+    "eslint": "eslint '**/*.js' --fix"
   },
   "dependencies": {
-    "@vituum/posthtml": "^0.1.0",
-    "@vituum/juice": "^0.1.5",
-    "@vituum/twig": "^0.1.1",
-    "@vituum/latte": "^0.1.1",
-    "tailwindcss": "^3.3.1",
+    "@vituum/vite-plugin-posthtml": "^1.0.0-alpha.3",
+    "@vituum/vite-plugin-juice": "^1.0.0-alpha.2",
+    "@vituum/vite-plugin-latte": "^1.0.0-alpha.8",
+    "@vituum/vite-plugin-twig": "^1.0.0-alpha.6",
+    "@vituum/vite-plugin-tailwindcss": "^1.0.0-alpha.2",
+    "@vituum/vite-plugin-send": "^1.0.0-alpha.2",
+    "vituum": "^1.0.0-alpha.18",
+    "posthtml": "^0.16.6",
     "posthtml-prism": "^2.0.0",
     "prismjs": "^1.29.0",
     "html-minifier-terser": "^7.2.0",
     "lodash": "^4.17.21",
-    "vituum": "^0.0.42"
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "picocolors": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.1",
+    "eslint": "^8.43.0",
+    "eslint-config-standard": "^17.1.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   },
   "files": [
     "latte",
     "index.js",
-    "prism.js"
+    "src"
   ],
   "engines": {
     "node": ">=16.0.0",

package/src/minify.js

@@ -0,0 +1,22 @@
+import minifier from 'html-minifier-terser'
+
+const parseMinifyHtml = async (input, name) => {
+    const minify = await minifier.minify(input, {
+        collapseWhitespace: true,
+        collapseInlineTagWhitespace: false,
+        minifyCSS: true,
+        removeAttributeQuotes: true,
+        quoteCharacter: '\'',
+        minifyJS: true
+    })
+
+    if (name) {
+        return JSON.stringify({
+            [name]: minify
+        })
+    } else {
+        return JSON.stringify(minify)
+    }
+}
+
+export default parseMinifyHtml

package/src/twig.js

@@ -0,0 +1,174 @@
+import fs from 'fs'
+import { resolve } from 'path'
+import parseMinifyHtml from './minify.js'
+
+const wrapPreCode = (code, lang) => {
+    return `<pre class="language-${lang}"><code class="language-${lang}">${code}</code></pre>`
+}
+
+const stripIndent = (string) => {
+    const indent = () => {
+        const match = string.match(/^[ \t]*(?=\S)/gm)
+
+        if (!match) {
+            return 0
+        }
+
+        return match.reduce((r, a) => Math.min(r, a.length), Infinity)
+    }
+
+    if (indent() === 0) {
+        return string
+    }
+
+    const regex = new RegExp(`^[ \\t]{${indent()}}`, 'gm')
+
+    return string.replace(regex, '')
+}
+
+export default {
+    namespaces: {
+        src: resolve(process.cwd(), 'src'),
+        templates: resolve(process.cwd(), 'src/templates')
+    },
+    functions: {
+        pages: () => {
+            return fs.readdirSync('src/views').filter(file => fs.statSync('src/views/' + file).isFile())
+        },
+        fetch: (data) => {
+            if (typeof data !== 'undefined') {
+                if (data.indexOf('http') > -1) {
+                    return data
+                } else {
+                    let slash = data.indexOf('/') + 1
+                    if (slash > 1) {
+                        slash = 0
+                    }
+
+                    return fs.readFileSync(process.cwd() + '/' + data.substring(slash, data.length), 'utf8').toString()
+                }
+            }
+        },
+        randomColor: () => {
+            return '#' + Math.random().toString(16).slice(2, 8)
+        },
+        placeholder: (width, height) => {
+            const colors = ['333', '444', '666', '222', '777', '888', '111']
+            return 'https://via.placeholder.com/' + width + 'x' + height + '/' + colors[Math.floor(Math.random() * colors.length)] + '.webp'
+        },
+        lazy: (width, height) => {
+            const svg = encodeURIComponent(stripIndent('<svg width="' + width + '" height="' + height + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + width + ' ' + height + '"></svg>'))
+
+            return 'data:image/svg+xml;charset=UTF-8,' + svg
+        },
+        ratio: (width, height) => {
+            return (height / width) * 100
+        }
+    },
+    filters: {
+        asset: (url) => {
+            return url
+        },
+        rem: (value) => {
+            return `${value / 16}rem`
+        },
+        encode64: (path) => {
+            const svg = encodeURIComponent(stripIndent(path))
+
+            return 'data:image/svg+xml;charset=UTF-8,' + svg
+        },
+        exists: (path) => {
+            if (path.indexOf('/') === 0) {
+                path = path.slice(1)
+            }
+
+            return fs.existsSync(resolve(process.cwd(), path))
+        },
+        tel: (value) => {
+            return value.replace(/\s+/g, '').replace('(', '').replace(')', '')
+        }
+    },
+    extensions: [
+        (Twig) => {
+            Twig.exports.extendTag({
+                type: 'json',
+                regex: /^json\s+(.+)$|^json$/,
+                next: ['endjson'],
+                open: true,
+                compile: function (token) {
+                    const expression = token.match[1] ?? '\'_null\''
+
+                    token.stack = Reflect.apply(Twig.expression.compile, this, [{
+                        type: Twig.expression.type.expression,
+                        value: expression
+                    }]).stack
+
+                    delete token.match
+                    return token
+                },
+                parse: async function (token, context, chain) {
+                    const name = Reflect.apply(Twig.expression.parse, this, [token.stack, context])
+                    const output = this.parse(token.output, context)
+
+                    if (name === '_null') {
+                        return {
+                            chain,
+                            output: await parseMinifyHtml(output)
+                        }
+                    } else {
+                        return {
+                            chain,
+                            output: await parseMinifyHtml(output, name)
+                        }
+                    }
+                }
+            })
+            Twig.exports.extendTag({
+                type: 'endjson',
+                regex: /^endjson$/,
+                next: [],
+                open: false
+            })
+        },
+        (Twig) => {
+            Twig.exports.extendTag({
+                type: 'code',
+                regex: /^code\s+(.+)$/,
+                next: ['endcode'], // match the type of the end tag
+                open: true,
+                compile: function (token) {
+                    const expression = token.match[1]
+
+                    token.stack = Reflect.apply(Twig.expression.compile, this, [{
+                        type: Twig.expression.type.expression,
+                        value: expression
+                    }]).stack
+
+                    delete token.match
+                    return token
+                },
+                parse: function (token, context, chain) {
+                    let type = Reflect.apply(Twig.expression.parse, this, [token.stack, context])
+                    const output = this.parse(token.output, context)
+                    let mirror = false
+
+                    if (type.includes(':mirror')) {
+                        mirror = true
+                        type = type.replace(':mirror', '')
+                    }
+
+                    return {
+                        chain,
+                        output: `${mirror ? output : ''}${wrapPreCode(output, type)}`
+                    }
+                }
+            })
+            Twig.exports.extendTag({
+                type: 'endcode',
+                regex: /^endcode$/,
+                next: [],
+                open: false
+            })
+        }
+    ]
+}