@live-change/frontend-base 0.2.54 → 0.2.56

package/Page.vue

@@ -38,12 +38,12 @@
     }
   })
 
-  console.log("SETUP PAGE!!!")
+  //console.log("SETUP PAGE!!!")
 
   import { computed } from 'vue'
   import { useRoute } from 'vue-router'
   const route = useRoute()
 
-  const pageType = computed(() => route.meta.pageType ?? 'simple' )
+  const pageType = computed(() => route?.meta?.pageType ?? 'simple' )
 
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-base",
-  "version": "0.2.54",
+  "version": "0.2.56",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --templatePath ../../base-frontend/index.html",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,30 +20,46 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
-    "@live-change/cli": "0.7.31",
-    "@live-change/dao": "0.5.20",
-    "@live-change/dao-message": "0.5.20",
-    "@live-change/dao-sockjs": "0.5.20",
-    "@live-change/dao-vue3": "0.5.20",
-    "@live-change/dao-websocket": "0.5.20",
+    "@live-change/cli": "0.7.32",
+    "@live-change/dao": "0.5.21",
+    "@live-change/dao-message": "0.5.21",
+    "@live-change/dao-sockjs": "0.5.21",
+    "@live-change/dao-vue3": "0.5.21",
+    "@live-change/dao-websocket": "0.5.21",
     "@live-change/email-service": "0.3.30",
     "@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.54",
+    "@live-change/security-frontend": "^0.2.56",
     "@live-change/session-service": "0.3.30",
     "@live-change/user-service": "0.3.30",
-    "@live-change/vue3-components": "0.2.28",
-    "@live-change/vue3-ssr": "0.2.28",
+    "@live-change/vue3-components": "0.2.29",
+    "@live-change/vue3-ssr": "0.2.29",
     "@unhead/ssr": "^1.6.2",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/compiler-sfc": "^3.3.4",
     "@vueuse/core": "^10.4.1",
     "@vueuse/head": "^1.3.1",
+    "@wekanteam/markdown-it-mermaid": "^0.6.4",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "get-port-sync": "1.0.1",
+    "markdown-it-abbr": "^1.0.4",
+    "markdown-it-anchor": "^8.6.7",
+    "markdown-it-deflist": "^2.1.0",
+    "markdown-it-echarts": "^0.1.3",
+    "markdown-it-footnote": "^3.0.3",
+    "markdown-it-highlight": "^0.2.0",
+    "markdown-it-katex": "^2.0.3",
+    "markdown-it-mark": "^3.0.1",
+    "markdown-it-plugin-echarts": "^0.0.1",
+    "markdown-it-prism": "^2.3.0",
+    "markdown-it-source-map": "^0.1.1",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
+    "markdown-it-table-of-contents": "^0.6.0",
+    "markdown-it-task-lists": "^2.1.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.34.1",
@@ -52,17 +68,20 @@
     "serialize-javascript": "^6.0.1",
     "serve-static": "^1.15.0",
     "unhead": "^1.6.2",
+    "unplugin-vue-components": "^0.25.2",
+    "unplugin-vue-markdown": "^0.24.3",
     "v-shared-element": "3.1.1",
     "vite-plugin-compression": "0.5.1",
+    "vite-plugin-pages": "^0.31.0",
     "vite-plugin-vue-images": "^0.6.1",
-    "vue-i18n": "^9.3.0",
+    "vue-i18n": "^9.4.0",
     "vue-meta": "^3.0.0-alpha.9",
     "vue-router": "^4.2.4",
     "vue3-lazyload": "0.3.8",
     "vue3-scroll-border": "0.1.5"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.31",
+    "@live-change/codeceptjs-helper": "0.7.32",
     "@wdio/selenium-standalone-service": "^8.15.0",
     "codeceptjs": "^3.5.4",
     "generate-password": "1.7.0",
@@ -74,5 +93,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "9ce85bd9846af64482469fbf858f9f9554ea3a77"
+  "gitHead": "73eeefa38a8af813aa244a711de9765eedfba306"
 }

package/vite-config.js

@@ -1,6 +1,25 @@
 const { findFreePorts } = require("find-free-ports")
 const path = require('path')
 const vuePlugin = require('@vitejs/plugin-vue')
+
+const Markdown = require('unplugin-vue-markdown/vite')
+const MarkdownItAnchor = require('markdown-it-anchor')
+const MarkdownItSub = require('markdown-it-sub')
+const MarkdownItSup = require('markdown-it-sup')
+const MarkdownItFootnote = require('markdown-it-footnote')
+const MarkdownItDefList = require('markdown-it-deflist')
+const MarkdownItAbbr = require('markdown-it-abbr')
+const MarkdownItMark = require('markdown-it-mark')
+const MarkdownItKatex = require('markdown-it-katex')
+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 Components = require('unplugin-vue-components/vite')
 const { visualizer } = require('rollup-plugin-visualizer')
 const viteImages = require('vite-plugin-vue-images')
 const viteCompression = require('vite-plugin-compression')
@@ -15,6 +34,7 @@ const ssrTransformCustomDir = () => {
 
 module.exports = async ({ command, mode }) => {
   console.log("VITE CONFIG", command, mode)
+  //const MarkdownItEcharts = await import('markdown-it-echarts')
   return {
     define: {
       ENV_BASE_HREF: JSON.stringify(process.env.BASE_HREF || 'http://localhost:8001')
@@ -33,6 +53,7 @@ module.exports = async ({ command, mode }) => {
     },
     plugins: [
       vuePlugin({
+        include: [/\.vue$/, /\.md$/],
         template: {
           compilerOptions: {
             //   whitespace: "preserve",
@@ -46,6 +67,67 @@ module.exports = async ({ command, mode }) => {
           }
         },
       }),
+      Markdown({
+        headEnabled: true,
+        markdownItOptions: {
+          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>`
+          },
+        },
+        markdownItSetup(md) {
+          md.use(MarkdownItSub)
+          md.use(MarkdownItSup)
+          md.use(MarkdownItFootnote)
+          md.use(MarkdownItDefList)
+          md.use(MarkdownItAbbr)
+          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'
+      }),
+      Components({
+        types: [{
+          from: 'vue-router',
+          names: ['RouterLink', 'RouterView'],
+        }],
+        // allow auto load markdown components under `./src/components/`
+        dirs: ['src/components'],
+        // search for subdirectories
+        deep: true,
+        extensions: ['vue', 'md'],
+        // allow auto import and register components used in markdown
+        customLoaderMatcher: path => path.endsWith('.md'),
+      }),
       viteImages({ extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'] }),
       viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),
       viteCompression({ algorithm: 'gzip', ext: '.gz' }),
@@ -117,6 +199,7 @@ module.exports = async ({ command, mode }) => {
         '@live-change/url-frontend',
         '@live-change/user-frontend',
         '@live-change/wysiwyg-frontend',
+        '@live-change/frontend-auto-form',
         'vue3-scroll-border',
         'pretty-bytes',
         'primevue',