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

.nvmrc

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

package.json

@@ -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"
  }
 }

packages/deploy/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/docs/modules/markdown/index.ts

@@ -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/modules/markdown/runtime/plugins/external-links.spec.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/runtime/plugins/external-links.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/plugins/localized-links.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 };
+}

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

@@ -0,0 +1,29 @@
+import { InjectionKey } from "vue"
+import { marked } from 'marked';
+import { fixTargetLinks } from "./plugins/external-links";
+import { localizedLinkMarkedPlugin } from './plugins/localized-links'
+
+let localizePlugin: null | ReturnType<typeof localizedLinkMarkedPlugin> = null
+
+export const useMarkdownProvideKey = 'vuestic:markdown' as unknown as InjectionKey<ReturnType<typeof marked>>
+
+export const useMarkdown = () => {
+ const { locale } = useI18n()
+
+ if (!localizePlugin) {
+ localizePlugin = localizedLinkMarkedPlugin(locale)
+ marked.use(localizePlugin)
+ } else {
+ marked.use(localizePlugin)
+ }
+
+ const parse = (markdown: string) => {
+ return fixTargetLinks((marked.parse(markdown)).toString())
+ }
+
+ const parseInline = (markdown: string) => {
+ return fixTargetLinks((marked.parseInline(markdown)).toString())
+ }
+
+ return { parse, parseInline }
+}