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

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,32 @@
-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 os from 'os'
+import { dirname, resolve, join } from 'path'
 import postHtml from 'posthtml'
+import vituum from 'vituum'
+import posthtml from '@vituum/vite-plugin-posthtml'
+import latte from '@vituum/vite-plugin-latte'
+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 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 FastGlob from 'fast-glob'
+
+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,30 +35,6 @@ 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,
@@ -83,163 +54,32 @@ const parseMinifyHtml = async (input, name) => {
     }
 }
 
-const defaultConfig = {
-    format: 'twig',
+/**
+ * @type {import('@newlogic-digital/core/types').PluginUserConfig}
+ */
+const defaultOptions = {
+    cert: 'localhost',
     emails: {
         outputDir: resolve(process.cwd(), 'public/email'),
         appDir: resolve(process.cwd(), 'app/Templates/Emails')
     },
+    vituum: {
+        pages: {
+            dir: './src/views'
+        }
+    },
     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
-                });
-            }
-        ]
+    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')
@@ -255,59 +95,68 @@ const defaultConfig = {
             },
             code: 'node_modules/@newlogic-digital/core/latte/CodeFilter.php'
         },
-        ignoredPaths: ['**/views/email/**/!(*.test).latte']
-    },
-    postcssNesting: {
-        noIsPseudoSelector: true
+        ignoredPaths: ['**/views/email/**/!(*.test).latte', '**/emails/!(*.test).latte']
     }
 }
 
-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)
+
+    const plugins = [
+        vituum(options.vituum),
+        tailwindcss(options.tailwindcss),
+        posthtml(options.posthtml),
+        latte(options.latte),
+        juice(options.juice),
+        send(options.send),
+        posthtmlPrism
+    ]
 
     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')
-                        })
-
-                        await Promise.all(emails.map((file, i) =>
-                            fse.move(file, emailsProd[i], { overwrite: true })
-                        ))
+        name,
+        enforce: 'pre',
+        config (userConfig) {
+            if (!userConfig?.plugins) {
+                userConfig.plugins = plugins
+            } else if (userConfig.plugins) {
+                userConfig.plugins = plugins.concat(...userConfig.plugins)
+            }
 
-                        console.info(`${chalk.cyan(`newlogic-core`)} ${chalk.green('all email files moved')}`)
-                    }
+            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.build = Object.assign({
+                manifest: true,
+                emptyOutDir: false,
+                modulePreload: false,
+                outDir: resolve(userConfig.root ?? process.cwd(), 'public'),
+                rollupOptions: {
+                    input: [
+                        './src/views/**/*.{json,latte,twig,liquid,njk,hbs,pug,html}',
+                        '!./src/views/**/*.{latte,twig,liquid,njk,hbs,pug,html}.json'
+                    ]
                 }
-            }],
-            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 ?? {})
         }
     }
 }
 
-export default integration
+export default plugin

package/package.json

@@ -1,25 +1,34 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "1.1.1",
+  "version": "2.0.0-alpha.2",
   "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.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",
+    "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"
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.1",
+    "eslint": "^8.42.0",
+    "eslint-config-standard": "^17.1.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   },
   "files": [
     "latte",