@newlogic-digital/core 2.0.0-alpha.6 → 2.0.0-alpha.8

package/index.js

@@ -1,6 +1,6 @@
-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'
@@ -13,6 +13,9 @@ import { getPackageInfo, merge } from 'vituum/utils/common.js'
 import parseMinifyHtml from './src/minify.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)
 
@@ -41,6 +44,7 @@ const posthtmlPrism = {
  * @type {import('@newlogic-digital/core/types').PluginUserConfig}
  */
 const defaultOptions = {
+    mode: null,
     cert: 'localhost',
     emails: {
         outputDir: resolve(process.cwd(), 'public/email'),
@@ -106,11 +110,38 @@ const plugin = (options = {}) => {
     return [{
         name,
         enforce: 'pre',
-        config (userConfig) {
+        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/styles/*.{css,pcss,scss,sass,less,styl,stylus}',
+                './src/scripts/*.{js,ts,mjs}',
+                './src/views/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
+                '!./src/views/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json'
+            ]
+
+            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,
@@ -118,12 +149,7 @@ const plugin = (options = {}) => {
                 assetsInlineLimit: 0,
                 outDir: resolve(userConfig.root ?? process.cwd(), 'public'),
                 rollupOptions: {
-                    input: [
-                        './src/styles/*.{css,pcss,scss,sass,less,styl,stylus}',
-                        './src/scripts/*.{js,ts,mjs}',
-                        './src/views/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
-                        '!./src/views/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json'
-                    ]
+                    input: defaultInput
                 }
             }, userConfig.build ?? {})
 
@@ -139,6 +165,20 @@ const plugin = (options = {}) => {
                     }
                     : 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]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.8",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
@@ -22,7 +22,10 @@
     "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",
@@ -34,7 +37,7 @@
   "files": [
     "latte",
     "index.js",
-    "src/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
+            })
+        }
+    ]
+}