@newlogic-digital/core 1.0.1 → 1.0.4

package/index.js

@@ -7,11 +7,34 @@ 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'
+import postHtml from 'posthtml'
+import highlight from './prism.js'
 
-loadLanguages(['markup', 'css', 'javascript'])
+const posthtmlPrism = {
+    name: '@vituum/vite-plugin-posthtml-prism',
+    enforce: 'post',
+    transformIndexHtml: {
+        enforce: 'post',
+        transform: async(html, { filename }) => {
+            filename = filename.replace('?raw', '')
+
+            if (!filename.endsWith('ui.json')) {
+                console.log(filename)
+                return
+            }
+
+            const plugins = [highlight({ inline: false  })]
+
+            const result = await postHtml(plugins).process(html)
+
+            return result.html
+        }
+    }
+}
+
+const wrapPreCode = (code, lang) => {
+    return `<pre class="language-${lang}"><code class="language-${lang}">${code}</code></pre>`
+}
 
 const stripIndent = (string) => {
     const indent = () => {
@@ -33,53 +56,6 @@ const stripIndent = (string) => {
     return string.replace(regex, '')
 }
 
-const parsePrism = (type, input) => {
-    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 highlight(input, type);
-}
-
 const parseMinifyHtml = async (input, name) => {
     const minify = await minifier.minify(input, {
         collapseWhitespace: true,
@@ -237,7 +213,7 @@ const defaultConfig = {
 
                         return {
                             chain: chain,
-                            output: `${mirror ? output : ""}${parsePrism(type, output)}`
+                            output: `${mirror ? output : ""}${wrapPreCode(output, type)}`
                         };
                     }
                 });
@@ -259,22 +235,13 @@ const defaultConfig = {
         functions: {
             pages: () => {
                 return fs.readdirSync(resolve(process.cwd(), 'src/views')).filter(file => fs.statSync(resolve(process.cwd(), 'src/views/' + file)).isFile())
-            },
-            // code: (input, type = '') => {
-            //     let mirror = false;
-            //
-            //     if (type.includes(":mirror")) {
-            //         mirror = true;
-            //         type = type.replace(":mirror", "")
-            //     }
-            //
-            //     return `${mirror ? input : ""}${parsePrism(type, input)}`
-            // }
+            }
         },
         filters: {
             json: async (input, name) => {
                 return await parseMinifyHtml(input, name)
-            }
+            },
+            code: 'node_modules/@newlogic-digital/core/latte/CodeFilter.php'
         }
     }
 }
@@ -285,6 +252,7 @@ const integration = (userConfig = {}) => {
     return {
         config: {
             integrations: [posthtml(userConfig.posthtml), juice(userConfig.juice), tailwind(userConfig.tailwind), twig(userConfig.twig), latte(userConfig.latte)],
+            plugins: [posthtmlPrism],
             server: {
                 open: true,
                 https: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newlogic-digital/core",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "main": "index.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Set of tools that can be used to create modern web applications",
@@ -15,13 +15,15 @@
     "@vituum/juice": "^0.1.3",
     "@vituum/twig": "^0.1.1",
     "@vituum/latte": "^0.1.1",
-    "prismjs": "~1.29.0",
+    "posthtml-prism": "^1.0.4",
+    "prismjs": "^1.29.0",
     "html-minifier-terser": "^7.0.0",
     "lodash": "^4.17.21",
     "vituum": "^0.0.27"
   },
   "files": [
-    "index.js"
+    "index.js",
+    "prism.js"
   ],
   "engines": {
     "node": ">=16.0.0",

package/prism.js

@@ -0,0 +1,90 @@
+import Prism from 'prismjs'
+import {render} from 'posthtml-render'
+import loadLanguages from 'prismjs/components/index.js'
+import NormalizeWhitespace from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js'
+
+const Normalize = new NormalizeWhitespace({
+    'remove-trailing': true,
+    'remove-indent': true,
+    'left-trim': true,
+    'right-trim': true,
+});
+
+const createPrismPlugin = options => {
+    return tree => {
+        const highlightCodeTags = node => tree.match.call(node, {tag: 'code'}, highlightNode)
+
+        if (options.inline) {
+            highlightCodeTags(tree)
+        } else {
+            tree.match({tag: 'pre'}, highlightCodeTags)
+        }
+    }
+}
+
+const highlightNode = node => {
+    const attrs = node.attrs || {}
+    const classList = `${attrs.class || ''}`.trimStart()
+
+    if ('prism-ignore' in attrs) {
+        delete node.attrs['prism-ignore']
+
+        return node
+    }
+
+    if (classList.includes('prism-ignore')) {
+        node.attrs.class = node.attrs.class.replace('prism-ignore', '').trim()
+
+        return node
+    }
+
+    const lang = getExplicitLanguage(classList)
+
+    if (lang && !classList.includes(`language-${lang}`)) {
+        attrs.class = `${classList || ''} language-${lang}`.trimStart()
+    }
+
+    node.attrs = attrs
+
+    if (node.content) {
+        const html = (node.content[0].tag && !node.content[0].content) ? `<${node.content[0].tag}>` : render(node.content)
+
+        node.content = mapStringOrNode(html, lang)
+    }
+
+    return node
+}
+
+const mapStringOrNode = (stringOrNode, lang = null) => {
+    if (typeof stringOrNode === 'string') {
+        if (lang) {
+            if (!Object.keys(Prism.languages).includes(lang)) {
+                loadLanguages.silent = true
+                loadLanguages([lang])
+            }
+
+            return Prism.highlight(Normalize.normalize(stringOrNode), Prism.languages[lang], lang)
+        }
+
+        return Prism.highlight(Normalize.normalize(stringOrNode), Prism.languages.markup, 'markup')
+    }
+
+    highlightNode(stringOrNode)
+
+    return stringOrNode
+}
+
+const getExplicitLanguage = classList => {
+    const matches = classList.match(/(?:lang|language)-(\w*)/)
+
+    return matches === null ? null : matches[1]
+}
+
+const plugin = options => {
+    options = options || {}
+    options.inline = options.inline || false
+
+    return tree => createPrismPlugin(options)(tree)
+}
+
+export default plugin