@live-change/frontend-base 0.2.56 → 0.3.0

package/Page.vue

@@ -29,21 +29,24 @@
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
 
-  const { working, loading } = defineProps({
+  const { working, loading, pageType } = defineProps({
     working: {
       type: Boolean
     },
     loading: {
       type: Boolean
+    },
+    pageType: {
+      type: String,
+      default: 'simple'
     }
   })
 
   //console.log("SETUP PAGE!!!")
 
   import { computed } from 'vue'
-  import { useRoute } from 'vue-router'
+  import { useRoute, useRouter } from 'vue-router'
   const route = useRoute()
-
-  const pageType = computed(() => route?.meta?.pageType ?? 'simple' )
+  const router = useRouter()
 
 </script>

package/ViewRoot.vue

@@ -12,7 +12,7 @@
         </div>
       </template>
       <template v-slot:default="{ isLoading }">
-        <page :loading="loading" :working="working">
+        <page :loading="loading" :working="working" :route="route" :pageType="route?.meta?.pageType">
           <template #navbar>
             <slot name="navbar"></slot>
           </template>
@@ -53,7 +53,7 @@
     ]
   })
 
-  import { ref } from 'vue'
+  import { computed, onMounted, ref } from 'vue'
   const working = ref(false)
   const loading = ref(false)
 

package/lezer.js

@@ -0,0 +1,63 @@
+const { parser: javascriptParser } = require("@lezer/javascript")
+const { parser: htmlParser } = require("@lezer/html")
+const { parser: markdownParser } = require("@lezer/markdown")
+const { parser: cssParser } = require("@lezer/css")
+const { parser: jsonParser } = require("@lezer/json")
+const { parser: cppParser } = require("@lezer/cpp")
+const { parser: sassParser } = require("@lezer/sass")
+const { parser: javaParser } = require("@lezer/java")
+const { parser: pythonParser } = require("@lezer/python")
+const { parser: phpParser } = require("@lezer/php")
+const { parser: rustParser } = require("@lezer/rust")
+
+const { highlightTree } = require("@lezer/highlight")
+const { defaultHighlightStyle } = require("@codemirror/language")
+
+const parsers = {
+  javascript: javascriptParser,
+  html: htmlParser,
+  markdown: markdownParser,
+  css: cssParser,
+  json: jsonParser,
+  cpp: cppParser,
+  sass: sassParser,
+  java: javaParser,
+  python: pythonParser,
+  php: phpParser,
+  rust: rustParser,
+  scss: sassParser,
+  less: cssParser,
+  stylus: cssParser,
+  ts: javascriptParser,
+  tsx: javascriptParser,
+  jsx: javascriptParser,
+  vue: htmlParser,
+}
+
+function hightlight(code, language) {
+  //console.log("HIGHLIGHT", language, code)
+  const parser = parsers[language]
+  if(parser) {
+    const tree = parser.parse(code)
+    let pos = 0
+    const output = []
+    highlightTree(tree, defaultHighlightStyle, (from, to, classes) => {
+      if (from > pos) output.push(`<span>${
+          code.slice(pos, from).replace(/</g, "&lt;").replace(/>/g, "&gt;")
+      }</span>`)
+      console.log("HIGHLIGHT", from, to, classes, code.slice(from, to))
+      output.push(`<span class="${classes}">${
+          code.slice(from, to).replace(/</g, "&lt;").replace(/>/g, "&gt;")
+      }</span>`)
+      pos = to
+    })
+    if (code.length > pos) output.push(`<span>${
+        code.slice(pos).replace(/</g, "&lt;").replace(/>/g, "&gt;")
+    }</span>`)
+    return `<pre class="code${language ? ' code-language-'+language : ''}">${output.join('')}</pre>`
+  }
+}
+
+module.exports = {
+  parsers, hightlight
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-base",
-  "version": "0.2.56",
+  "version": "0.3.0",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,6 +20,17 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
+    "@lezer/cpp": "^1.1.1",
+    "@lezer/css": "^1.1.3",
+    "@lezer/html": "^1.3.6",
+    "@lezer/java": "^1.0.4",
+    "@lezer/javascript": "^1.4.7",
+    "@lezer/json": "^1.0.1",
+    "@lezer/markdown": "^1.1.0",
+    "@lezer/php": "^1.0.1",
+    "@lezer/python": "^1.1.8",
+    "@lezer/rust": "^1.0.1",
+    "@lezer/sass": "^1.0.3",
     "@live-change/cli": "0.7.32",
     "@live-change/dao": "0.5.21",
     "@live-change/dao-message": "0.5.21",
@@ -30,7 +41,7 @@
     "@live-change/password-authentication-service": "0.3.30",
     "@live-change/secret-code-service": "0.3.30",
     "@live-change/secret-link-service": "0.3.30",
-    "@live-change/security-frontend": "^0.2.56",
+    "@live-change/security-frontend": "^0.3.0",
     "@live-change/session-service": "0.3.30",
     "@live-change/user-service": "0.3.30",
     "@live-change/vue3-components": "0.2.29",
@@ -53,6 +64,7 @@
     "markdown-it-highlight": "^0.2.0",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-mark": "^3.0.1",
+    "markdown-it-mermaid": "^0.2.5",
     "markdown-it-plugin-echarts": "^0.0.1",
     "markdown-it-prism": "^2.3.0",
     "markdown-it-source-map": "^0.1.1",
@@ -93,5 +105,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "73eeefa38a8af813aa244a711de9765eedfba306"
+  "gitHead": "ad1cf7e6deb52afdc69eb4748656f121417d31b3"
 }

package/vite-config.js

@@ -15,11 +15,13 @@ const MarkdownItTaskLists = require('markdown-it-task-lists')
 const MarkdownItTableOfContents = require('markdown-it-table-of-contents')
 const MarkdownItMermaid = require('markdown-it-mermaid').default
 
-const { parser: javascriptParser } = require("@lezer/javascript")
-const { highlightTree } = require("@lezer/highlight")
-const { defaultHighlightStyle } = require("@codemirror/language")
+const { highlight } = require('@live-change/frontend-base/lezer.js')
 
 const Components = require('unplugin-vue-components/vite')
+const {
+  PrimeVueResolver
+} = require('unplugin-vue-components/resolvers')
+
 const { visualizer } = require('rollup-plugin-visualizer')
 const viteImages = require('vite-plugin-vue-images')
 const viteCompression = require('vite-plugin-compression')
@@ -33,8 +35,7 @@ const ssrTransformCustomDir = () => {
 }
 
 module.exports = async ({ command, mode }) => {
-  console.log("VITE CONFIG", command, mode)
-  //const MarkdownItEcharts = await import('markdown-it-echarts')
+  //console.log("VITE CONFIG", command, mode)
   return {
     define: {
       ENV_BASE_HREF: JSON.stringify(process.env.BASE_HREF || 'http://localhost:8001')
@@ -73,26 +74,7 @@ module.exports = async ({ command, mode }) => {
           html: true,
           linkify: true,
           typographer: true,
-          highlight: function (code, lang) {
-            //console.log("HIGHLIGHT", lang, str)
-            const tree = javascriptParser.parse(code)
-            let pos = 0
-            const output = []
-            highlightTree(tree, defaultHighlightStyle, (from, to, classes) => {
-              if(from > pos) output.push(`<span>${
-                code.slice(pos, from).replace(/</g, "&lt;").replace(/>/g, "&gt;")
-              }</span>`)
-              console.log("HIGHLIGHT", from, to, classes, code.slice(from, to))
-              output.push(`<span class="${classes}">${
-                  code.slice(from, to).replace(/</g, "&lt;").replace(/>/g, "&gt;")
-              }</span>`)
-              pos = to
-            })
-            if(code.length > pos) output.push(`<span>${
-                code.slice(pos).replace(/</g, "&lt;").replace(/>/g, "&gt;")
-            }</span>`)
-            return `<pre>${output.join('')}</pre>`
-          },
+          highlight,
         },
         markdownItSetup(md) {
           md.use(MarkdownItSub)
@@ -103,15 +85,12 @@ module.exports = async ({ command, mode }) => {
           md.use(MarkdownItMark)
           md.use(MarkdownItKatex)
           md.use(MarkdownItTaskLists)
-          //md.use(MarkdownItEcharts)
           md.use(MarkdownItMermaid)
           md.use(MarkdownItAnchor)
           md.use(MarkdownItTableOfContents, {
             includeLevel: [1, 2, 3],
             containerClass: 'table-of-contents',
           })
-
-          console.log('MDO', md.options.highlight.toString())
         },
         wrapperClasses: 'markdown-body'
       }),
@@ -120,13 +99,18 @@ module.exports = async ({ command, mode }) => {
           from: 'vue-router',
           names: ['RouterLink', 'RouterView'],
         }],
+        resolvers: [
+          PrimeVueResolver({
+          })
+        ],
         // allow auto load markdown components under `./src/components/`
         dirs: ['src/components'],
         // search for subdirectories
         deep: true,
         extensions: ['vue', 'md'],
+        dts: true,
         // allow auto import and register components used in markdown
-        customLoaderMatcher: path => path.endsWith('.md'),
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       }),
       viteImages({ extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'] }),
       viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),