@newlogic-digital/core 0.9.15 → 1.0.0

package/README.md

@@ -10,27 +10,25 @@
 
 # ⚙️ Newlogic Core
 
-> Still in very early development.
-
-Modern principles for creating web applications
+Starter for creating web applications. Powered by Vite and Vituum.
 
+- ⚡️ Powered by Vite
 - 💡 Modern principles
 - 🚀️ Fast development
 - 🛠️ Integrated tools
 - 📦 Modular structure
 - ✉️ Email templates
-- ⚡ Vite as webserver
 
-Newlogic Core is a set of tools that can be used to create modern web applications. Use of modern Javascript, CSS, ES modules, dynamic imports, etc.
+Newlogic Core is an integration for [Vituum](https://vituum.dev), and contains set of tools 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.
 
 ## 🛠️ 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.
-* **[Rollup](https://rollupjs.org/)** for javascript build and minification
-* **[Importmaps](https://github.com/WICG/import-maps)** generator for javascript buildless development
-* **[CleanCSS](https://github.com/jakubpawlowicz/clean-css)** for css optimization and minification
-* **[PurgeCSS](https://purgecss.com/)** for removing unused CSS
-* **[TwigJS](https://purgecss.com/)** as template engine
-* **[Vite](https://vitejs.dev)** for local webserver
+* **[TwigJS](https://github.com/vituum/vite-plugin-twig)** as template engine twig
+* **[Latte](https://github.com/vituum/vite-plugin-latte)** as template engine latte
 
 ### 💡 Basic principle
 
@@ -40,30 +38,15 @@ PHP programmers often **don't want to configure anything**, basic idea is to add
 
 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 in `gulpfile.js` config
+It's up to you - all paths are freely configurable via `vite.config.js` config
 
 ### 📦 Modularity
 
-Newlogic Core uses currently [Gulp](https://gulpjs.com/) as smart task system, tasks are generated automatically depending on which modules you use.
-
-Source files are divided by modules inside `src` directory - styles, scripts, templates, icons, 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.
-
-If you use [PhpStorm](https://www.jetbrains.com/phpstorm/) tasks will load for you automatically and dynamically according to the availability of individual modules.
-
-### ⚡ Without compilation - no building and bundling
+Newlogic Core uses [Vituum](https://vituum.dev) and [Vite](https://vitejs.dev) for frontend tooling.
 
-Lets face the facts. PHP programmers **hate javascript compilation**.
+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.
 
-Principle of Newlogic Core is to write javascript and css source code in next-gen standardized format that works in browsers or will work in the future.
-
-Javascript sources are executable in browsers via modern solutions like **[Importmaps](https://github.com/WICG/import-maps)** - changes are instant, no waiting for build.
-
-CSS sources still need to be compiled, because most of standardized features are not yet ready in browsers, but it's getting there.
-
-### 🧬 Single Page Apps
-For single page applications, [Vite](https://vitejs.dev/) is integrated, and you can use any SPA framework you want. From Newlogic Core, you can only use additional functionalities such as auto-generation of imports into files within folders, iconfont, etc. Or automate some processes by writing new tasks in `gulpfile.js`.
-
-## 🪄 Instalation
+## 🪄 Get started
 
 ```sh
 npm i @newlogic-digital/core --save-dev
@@ -71,33 +54,23 @@ npm i @newlogic-digital/core --save-dev
 
 ### Requirements
 
-- [Node.js LTS (14.x)](https://nodejs.org/en/download/)
-- [NPM (7.x)](https://www.npmjs.com/package/npm) or [Yarn (2.x)](https://yarnpkg.com/)
+- [Node.js LTS (16.x)](https://nodejs.org/en/download/)
+- [Vituum](https://vituum.dev/)
 
 ### Config
 
-Each Newlogic Core project has to have config via `gulpfile.js`
+Each **Newlogic Core** project needs to have config via `vite.config.js`
 
 ```js
-import {defineConfig} from  "@newlogic-digital/core";
+import { defineConfig } from 'vituum'
+import core from  "@newlogic-digital/core"
 
-// minimum configuration example
 export default defineConfig({
-  styles: {
-    purge: {
-      content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'app/Presenters/templates/**/*.latte', 'temp/cdn/*.js']
-    }
-  }
+  integrations: [core()]
 })
 ```
 
 You can also try minimal example project [core-starter](https://github.com/newlogic-digital/core-starter)
 
-## 📌 Future plans
-- translating docs to english
-- refactor or rewrite everything 😂
-- concept is good, but realization could be way better
-- future rewrite could drop gulp completely and use esbuild for css, js build and vite for dev server
-
 ## Licence
-GNU GPLv3
+MIT

package/index.js

@@ -1,44 +1,271 @@
-import {
-    Core,
-    Utils,
-    Styles,
-    Scripts,
-    Templates,
-    Icons,
-    Watch,
-    Emails,
-    Functions,
-    Exists,
-    Modules,
-    Package,
-    Config,
-    root
-} from "./modules/Core.js";
-
-import { tailwindColors, tailwindColorsRgba, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations } from './modules/tailwind/index.js'
-
-const defineConfig = (config) => new Core().init(config);
-
-export {
-    defineConfig,
-    tailwindColors,
-    tailwindVariables,
-    tailwindColorsRgba,
-    tailwindColorsAccent,
-    tailwindColorsCurrent,
-    tailwindAnimations,
-    Core,
-    Utils,
-    Styles,
-    Scripts,
-    Templates,
-    Icons,
-    Watch,
-    Emails,
-    Functions,
-    Exists,
-    Modules,
-    Package,
-    Config,
-    root
+import tailwind from '@vituum/tailwind'
+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 { dirname, resolve } from 'path'
+import Prism from 'prismjs'
+import loadLanguages from 'prismjs/components/index.js'
+import NormalizeWhitespace from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js'
+
+loadLanguages(['markup', 'css', 'javascript'])
+
+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 defaultConfig = {
+    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)
+
+                        const minify = await minifier.minify(output, {
+                            collapseWhitespace: true,
+                            collapseInlineTagWhitespace: false,
+                            minifyCSS: true,
+                            removeAttributeQuotes: true,
+                            quoteCharacter: '\'',
+                            minifyJS: true
+                        })
+
+                        if (name === '_null') {
+                            return {
+                                chain,
+                                output: JSON.stringify(minify)
+                            }
+                        } else {
+                            return {
+                                chain,
+                                output: JSON.stringify({
+                                    [name]: minify
+                                })
+                            }
+                        }
+                    }
+                })
+                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", "")
+                        }
+
+                        const Normalize = new NormalizeWhitespace({
+                            'remove-trailing': true,
+                            'remove-indent': true,
+                            'left-trim': true,
+                            'right-trim': true,
+                        });
+
+                        const wrap = (code, lang) => {
+                            return `<pre class="language-${lang}"><code>${code}</code></pre>`
+                        }
+
+                        const highlight = (str, lang) => {
+                            if (!lang) {
+                                return wrap(str, 'text')
+                            }
+                            lang = lang.toLowerCase()
+                            const rawLang = lang
+                            if (lang === 'vue' || lang === 'html') {
+                                lang = 'markup'
+                            }
+                            if (lang === 'md') {
+                                lang = 'markdown'
+                            }
+                            if (lang === 'ts') {
+                                lang = 'typescript'
+                            }
+                            if (lang === 'py') {
+                                lang = 'python'
+                            }
+                            if (!Prism.languages[lang]) {
+                                try {
+                                    loadLanguages([lang])
+                                } catch (e) {
+                                    console.warn(`Syntax highlight for language "${lang}" is not supported.`)
+                                }
+                            }
+                            if (Prism.languages[lang]) {
+                                const code = Prism.highlight(Normalize.normalize(str), Prism.languages[lang], lang)
+                                return wrap(code, rawLang)
+                            }
+                            return wrap(str, 'text')
+                        }
+
+                        return {
+                            chain: chain,
+                            output: `${mirror ? output : ""}${highlight(output, type)}`
+                        };
+                    }
+                });
+                Twig.exports.extendTag({
+                    type: "endcode",
+                    regex: /^endcode$/,
+                    next: [ ],
+                    open: false
+                });
+            }
+        ]
+    },
+    latte: {
+        isStringFilter: (filename) => dirname(filename).endsWith('emails')
+    }
 }
+
+const integration = (userConfig = {}) => {
+    userConfig = lodash.merge(defaultConfig, userConfig)
+
+    return {
+        config: {
+            integrations: [posthtml(userConfig.posthtml), juice(userConfig.juice), tailwind(userConfig.tailwind), twig(userConfig.twig), latte(userConfig.latte)],
+            server: {
+                open: true,
+                https: true,
+                reload: file => (file.endsWith('.tpl') || file.endsWith('.latte')) && !file.includes('temp/')
+            },
+            templates: {
+                format: 'twig'
+            },
+            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
+                }
+            }
+        }
+    }
+}
+
+export default integration

package/package.json

@@ -1,72 +1,31 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "0.9.15",
+  "version": "1.0.0",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
-  "license": "GNU GPLv3",
+  "license": "MIT",
   "scripts": {
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs",
-    "tailwind": "rollup modules/tailwind/index.js --file modules/tailwind/index.cjs --format cjs"
+    "npm-publish": "npm publish --tag next"
   },
   "dependencies": {
-    "@babel/core": "^7.17.12",
-    "@babel/preset-env": "^7.17.12",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "adm-zip": "^0.5.9",
-    "clean-css": "^5.3.0",
-    "fs-extra": "^10.1.0",
-    "plugin-error": "^1.0.1",
-    "through2": "^4.0.2",
-    "twig": "^1.15.4",
-    "gulp": "^4.0.2",
-    "gulp-data": "^1.3.1",
-    "gulp-htmlmin": "^5.0.1",
-    "gulp-if": "^3.0.0",
-    "gulp-inline-css": "^4.0.0",
-    "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^9.0.1",
-    "gulp-purgecss": "^4.1.3",
-    "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.1.3",
-    "gulp-rev": "^9.0.0",
-    "gulp-rev-rewrite": "^5.0.0",
-    "lazypipe": "^1.0.2",
+    "@vituum/tailwind": "^0.1.2",
+    "@vituum/posthtml": "^0.1.0",
+    "@vituum/juice": "^0.1.3",
+    "@vituum/twig": "^0.1.1",
+    "@vituum/latte": "^0.1.1",
+    "prismjs": "~1.29.0",
+    "html-minifier-terser": "^7.0.0",
     "lodash": "^4.17.21",
-    "postcss-custom-media": "^8.0.0",
-    "postcss-custom-properties": "^12.1.7",
-    "postcss-custom-selectors": "^6.0.0",
-    "postcss-import": "^14.1.0",
-    "postcss-nesting": "^10.1.6",
-    "rollup": "^2.73.0",
-    "rollup-plugin-import-map": "^2.2.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "vite": "~2.9.9",
-    "prismjs": "^1.28.0"
-  },
-  "peerDependencies": {
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.13",
-    "tailwindcss": "^3.0.24"
-  },
-  "devDependencies": {
-    "vitepress": "^0.22.4"
+    "vituum": "^0.0.27"
   },
   "files": [
-    "index.js",
-    "modules",
-    "packages"
+    "index.js"
   ],
   "engines": {
-    "node": ">=14.0.0",
-    "npm": ">=7.10.0",
-    "yarn": ">=2.3.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "repository": {
     "type": "git",