Fix memory leak in SSR docs (#3386)

* chore: add serve node module to docs

* chore: fix generate build command

* chore: fix ts build

* chore: fix ts build issues and sync all deps

* chore: fix i18n build error

* fix(docs): markdownit build error

* fix: types build and update ts to ^5.0

* raw new markdown

* fix(docs): memory leaks in ssr

* fix(build): typo

* fix(docs): show old props with vue-component-meta

* raw markdown plugins

* fix(docs): external links

* fix(docs): update node to 18

* docs(chore): remove markdown-it

* fix(deps): remove hardcoded deps

* chore(deps): update ts to 5

* chore(deps): update eslint to ^7

Author: m0ksem

.eslintignore

@@ -1 +1 @@
-v16.16.0
+v18.14.0

.nvmrc

@@ -5,6 +5,7 @@
   "repository": "https://github.com/epicmaxco/vuestic-ui",
   "devDependencies": {
     "lerna": "^3.20.2",
+    "syncpack": "^9.8.6",
     "yorkie": "^2.0.0"
   },
   "private": true,
@@ -17,6 +18,7 @@
     "build:book": "yarn workspace vuestic-ui build:book",
     "build:types": "yarn workspace vuestic-ui build:types",
     "test:unit": "yarn workspace vuestic-ui test:unit",
+    "test:bundlers": "yarn workspace bundler-test test",
     "lint:style": "yarn workspace vuestic-ui lint:style",
     "serve:docs": "yarn workspace docs serve",
     "build:docs": "yarn workspace docs build",
@@ -39,12 +41,5 @@
   },
   "gitHooks": {
     "pre-commit": "lerna run --concurrency 1 --stream precommit --since HEAD"
-  },
-  "resolutions": {
-    "nuxt": "3.1.1",
-    "vue": "3.2.37",
-    "vite": "^4",
-    "vue-router": "4.1.6",
-    "@nuxt/schema": "3.0.0"
   }
 }

package.json

@@ -6,10 +6,10 @@
     "release": "tsx release-script/release-script.ts"
   },
   "devDependencies": {
-    "tsx": "^3.5.0",
+    "tsx": "^3.12.1",
     "inquirer": "^9.0.0",
-    "typescript": "^4.3.2",
-    "chalk": "^5.0.1"
+    "typescript": "^5",
+    "chalk": "^5.2.0"
   },
   "exports": {
     "./execute": "./execute/index.ts"

packages/deploy/package.json

@@ -6,14 +6,11 @@ export default defineNuxtModule({
     mame: 'vuestic:markdown',
   },
 
-  setup(_, nuxt) {
-    nuxt.options.plugins.push(resolve(__dirname, 'runtime/plugin.ts'))
-
-
+  setup() {
     addImports({
-      name: 'useMarkdownIt',
-      as: 'useMarkdownIt',
-      from: resolve(__dirname, './runtime/useMarkdownIt'),
+      name: 'useMarkdown',
+      as: 'useMarkdown',
+      from: resolve(__dirname, './runtime/useMarkdown'),
     })
   }
 })

packages/docs/i18n.config.ts

@@ -0,0 +1,13 @@
+import { it, describe, expect } from 'vitest';
+import { marked } from 'marked';
+import { fixTargetLinks } from './external-links';
+
+describe('externalLinkMarkedPlugin', () => {
+  it('targetBlankPlugin: adds target="_blank" to links', () => {
+    const markdown = `[vue-press](https://vuepress.vuejs.org/)[[target=_blank]]`;
+    const html = fixTargetLinks(marked(markdown));
+
+    expect(/target="_blank"/.test(html)).toBeTruthy();
+  });
+})
+

packages/docs/modules/markdown/index.ts

@@ -0,0 +1,24 @@
+const addAttrToLink = (str: string, attr: string) => {
+  const [start, end] = str.split('<a')
+  return start + '<a ' + attr + end
+}
+
+export const fixTargetLinks = (textToRender: string) => {
+  const targetRegex = /\[\[(.*?)\]\]/g;  // Search for the [[target="_blank"]] in the markdown.
+  const linkRegexPattern = /<a[^>]*>.*<\/a>\[\[(.*)\]\]/g; // Searching for all <a href=""> tags
+
+  let matchedTarget;
+
+  while ((matchedTarget = linkRegexPattern.exec(textToRender)) !== null) {
+    let target = matchedTarget[1].trim().replaceAll('&quot;', '"')
+    if (target === 'target=_blank') {
+      target = 'target="_blank"';
+    }
+    const [link] = matchedTarget
+
+    textToRender = addAttrToLink(textToRender
+      .replace(link, link.replace(targetRegex, '')), target)
+  }
+
+  return textToRender;
+}

packages/docs/modules/markdown/runtime/plugin.ts

@@ -0,0 +1,30 @@
+import { Renderer, Parser } from 'marked'
+import { Ref } from 'vue'
+export const externalLinkStartWith = ['http://', 'https://']
+
+export function localizedLinkMarkedPlugin(locale: Ref<string>) {
+  const renderer = new Renderer();
+  const originalRenderer = renderer.link;
+
+  renderer.link = function (href, title, text) {
+    const isExternalLink = externalLinkStartWith.some((item) => href?.startsWith(item))
+
+    if (isExternalLink) {
+      return originalRenderer.call(renderer, href, title, text);
+    }
+
+    const normalizedHref = href?.startsWith('/')
+      ? href.substring(1)
+      : href
+
+    const localePrefix = `${locale.value}/`
+
+    if (normalizedHref?.startsWith(localePrefix)) {
+      return originalRenderer.call(renderer, href, title, text);
+    }
+
+    return originalRenderer.call(renderer, '/' + localePrefix + href, title, text);
+  }
+
+  return { renderer };
+}