@newlogic-digital/core 2.0.0-alpha.1 → 2.0.0-alpha.11

package/index.js

@@ -1,16 +1,20 @@
-import fs from 'fs'
-import os from 'os'
-import { dirname, resolve, join } 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 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 minifier from 'html-minifier-terser'
-import highlight from './prism.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)
 
@@ -35,39 +39,34 @@ const posthtmlPrism = {
     }
 }
 
-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)
-    }
-}
-
 /**
  * @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')
     },
-    vituum: {},
-    posthtml: {},
-    juice: {},
+    vituum: {
+        pages: {
+            dir: './src/views'
+        }
+    },
+    posthtml: {
+        root: resolve(process.cwd(), 'src')
+    },
+    juice: {
+        paths: ['src/views/email']
+    },
     tailwindcss: {},
-    send: {},
+    send: {
+        host: 'smtp.newlogic.cz',
+        from: 'noreply@newlogic.cz',
+        user: 'noreply@newlogic.cz'
+    },
     latte: {
         renderTransformedHtml: (filename) => dirname(filename).endsWith('email'),
         globals: {
@@ -80,56 +79,115 @@ const defaultOptions = {
             }
         },
         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']
+    },
+    twig: twigOptions
 }
 
 /**
  * @param {import('@newlogic-digital/core/types').PluginUserConfig} options
- * @returns import('vite').Plugin
+ * @returns [import('vite').Plugin]
  */
 const plugin = (options = {}) => {
     options = merge(defaultOptions, options)
 
+    const templatesPlugins = []
+
+    if (options.format.includes('twig')) {
+        templatesPlugins.push(twig(options.twig))
+    }
+
+    if (options.format.includes('latte')) {
+        templatesPlugins.push(latte(options.latte))
+    }
+
     const plugins = [
         vituum(options.vituum),
         tailwindcss(options.tailwindcss),
         posthtml(options.posthtml),
-        latte(options.latte),
+        ...templatesPlugins,
         juice(options.juice),
         send(options.send),
         posthtmlPrism
     ]
 
-    return {
+    return [{
         name,
         enforce: 'pre',
-        config (userConfig) {
-            if (!userConfig?.plugins) {
-                userConfig.plugins = plugins
-            } else if (userConfig.plugins) {
-                userConfig.plugins = plugins.concat(...userConfig.plugins)
-            }
-
-            if (
-                userConfig?.server?.https !== false &&
+        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`))
-            ) {
-                userConfig.server = Object.assign(userConfig.server ?? {}, {
-                    https: {
+
+            let defaultInput = [
+                './src/styles/*.{css,pcss,scss,sass,less,styl,stylus}',
+                './src/scripts/*.{js,ts,mjs}'
+            ]
+
+            if (!options.mode) {
+                options.mode = userEnv.mode
+            }
+
+            if (options.mode === 'development') {
+                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 === '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
+                }
+            }, userConfig.build ?? {})
+
+            userConfig.server = Object.assign({
+                host: true,
+                fsServe: {
+                    strict: false
+                },
+                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 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,7 +1,7 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.11",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
@@ -12,20 +12,24 @@
   },
   "dependencies": {
     "@vituum/vite-plugin-posthtml": "^1.0.0-alpha.3",
-    "@vituum/vite-plugin-juice": "^1.0.0-alpha.1",
-    "@vituum/vite-plugin-latte": "^1.0.0-alpha.3",
-    "@vituum/vite-plugin-tailwindcss": "^1.0.0-alpha.1",
-    "@vituum/vite-plugin-send": "^1.0.0-alpha.1",
-    "vituum": "^1.0.0-alpha.16",
+    "@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"
+    "lodash": "^4.17.21",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "picocolors": "^1.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.3.1",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "eslint-config-standard": "^17.1.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9"
@@ -33,7 +37,7 @@
   "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
+            })
+        }
+    ]
+}