feat: 以同步方式实现事件监听

rzx007 · Dec 3, 2023 · bd2339b · bd2339b
1 parent d030e98
commit bd2339b
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 10 deletions.
diff --git a/docs/.vitepress/configs/highlight.ts b/docs/.vitepress/configs/highlight.ts
@@ -0,0 +1,54 @@
+import escapeHtml from 'escape-html'
+import prism from 'prismjs'
+let loadLanguages: any
+load(['markup', 'css', 'javascript'])
+function wrap(code: string, lang: string): string {
+  if (lang === 'text') {
+    code = escapeHtml(code)
+  }
+  return `<pre v-pre><code>${code}</code></pre>`
+}
+
+export const highlight = (str: string, lang: string) => {
+  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 {
+      load([lang])
+    } catch {
+      console.warn(
+        `[vitepress] Syntax highlight for language "${lang}" is not supported.`
+      )
+    }
+  }
+  if (prism.languages[lang]) {
+    const code = prism.highlight(str, prism.languages[lang], lang)
+    return wrap(code, rawLang)
+  }
+  return wrap(str, 'text')
+}
+
+async function load(lans: string[]) {
+  if (!loadLanguages) {
+    const mod = await import('prismjs/components/index.js')
+    loadLanguages = mod.default
+    loadLanguages(lans)
+  } else {
+    loadLanguages(lans)
+  }
+}
diff --git a/docs/.vitepress/configs/plugins.ts b/docs/.vitepress/configs/plugins.ts
@@ -0,0 +1,69 @@
+import MarkdownIt from 'markdown-it'
+import mdContainer from 'markdown-it-container'
+import type Token from 'markdown-it/lib/token'
+import type Renderer from 'markdown-it/lib/renderer'
+import path from 'path'
+import fs from 'fs'
+
+import { highlight } from './highlight'
+
+const localMd = MarkdownIt()
+
+interface ContainerOpts {
+  marker?: string | undefined
+  validate?(params: string): boolean
+  render?(
+    tokens: Token[],
+    index: number,
+    options: any,
+    env: any,
+    self: Renderer
+  ): string
+}
+
+export const mdPlugin = (md: MarkdownIt) => {
+  md.use(mdContainer, 'div', {
+    validate(params) {
+      return !!params.trim().match(/^demo\s*(.*)$/)
+    },
+    render(tokens, idx) {
+      /**
+        :::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
+        button/basic
+        :::
+      */
+      // console.log(tokens[idx].info, 'tokens, idx')
+
+      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
+      if (tokens[idx].nesting === 1 /* means the tag is opening */) {
+        // 拿到描述 Use `type`, `plain`, `round` and `circle` to define Button's style.
+        const description = m && m.length > 1 ? m[1] : ''
+
+        // 获取文件路径的 token
+        const sourceFileToken = tokens[idx + 2]
+        let source = ''
+        // 文件路径 button/basic
+        const sourceFile = sourceFileToken.children?.[0].content ?? ''
+
+        if (sourceFileToken.type === 'inline') {
+          // 根据路径读取 examples/button/basic.vue
+          source = fs.readFileSync(
+            path.resolve(__dirname, '../../examples', `${sourceFile}.vue`),
+            'utf-8'
+          )
+        }
+        if (!source) throw new Error(`Incorrect source file: ${sourceFile}`)
+
+        // 将代码传给 Demo 组件，Demo 组件的封装下面讲
+        // highlight 的作用就是将代码包裹一下，根据传递的语言加载该语言的样式
+        return `<Demo source="${encodeURIComponent(
+          highlight(source, 'vue')
+        )}" path="${sourceFile}" raw-source="${encodeURIComponent(
+          source
+        )}" description="${encodeURIComponent(localMd.render(description))}">`
+      } else {
+        return `</Demo>`
+      }
+    }
+  } as ContainerOpts)
+}
diff --git a/docs/.vitepress/configs/sidebar.ts b/docs/.vitepress/configs/sidebar.ts
@@ -43,6 +43,7 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
         { text: '复制高亮代码到剪贴板', link: '/html-dom/copy-highlighted-code-to-the-clipboard' },
         { text: '创建自定义滚动条', link: '/html-dom/create-a-custom-scrollbar' },
         { text: '基于流式数据的类似 chatgpt 的打字机式输出', link: '/html-dom/server-sent-events' },
+        { text: '已同步方式实现事件监听', link: '/html-dom/async-addEventListener'}
       ]
     }
   ]

diff --git a/docs/code/demo/AsyncAddlistener.vue b/docs/code/demo/AsyncAddlistener.vue
@@ -0,0 +1,33 @@
+<template>
+  <button id="btn">按钮</button>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+const getElement = (cssSelector) => {
+  const dom = document.querySelector(cssSelector)
+  // Proxy 代理
+  const proxy = new Proxy(dom, {
+    get(target, key: string) {
+      if (!key.startsWith('wait')) {
+        return Reflect.get(target, key)
+      }
+      return new Promise(resolve => {
+        const eventName = key.replace('wait', '').toLowerCase()
+
+        dom.addEventListener(eventName, resolve, { once: true })
+      })
+    }
+  })
+  return proxy
+}
+onMounted(() => {
+  (async () => {
+    const btn = getElement('#btn')
+    while (1) {
+      await btn.waitClick;
+      console.log('click')
+    }
+  })()
+})
+</script>
+<style></style>
diff --git a/docs/html-dom/async-addEventListener.md b/docs/html-dom/async-addEventListener.md
@@ -0,0 +1,35 @@
+# 以同步方式实现事件监听
+
+```js
+const getElement = (cssSelector) => {
+  const dom = document.querySelector(cssSelector)
+  // Proxy 代理
+  const proxy = new Proxy(dom, {
+    get(target, key) {
+      if(!key.startsWith('wait')) {
+        return Reflect.get(target, key)
+      }
+      return new Promise(resolve => {
+        const eventName = key.replace('wait', '').toLowerCase()
+
+        dom.addEventListener(eventName, resolve, { once: true })
+      })
+    }
+  })
+  return proxy
+}
+(async () => {
+  const btn = getElement('#btn')
+  while(1) {
+    await btn.waitClick;
+    console.log('click')
+  }
+})()
+
+```
+### 示例
+
+<script setup>
+import AsyncAddlistener from '../code/demo/AsyncAddlistener.vue'
+</script>
+<AsyncAddlistener />
diff --git a/package.json b/package.json
@@ -19,9 +19,12 @@
   "homepage": "https://github.com/rzx007/nav.git#readme",
   "devDependencies": {
     "@femm/prettier": "^1.0.2",
-
     "@mdit-vue/shared": "^0.12.0",
+    "@types/escape-html": "^1.0.4",
+    "@types/markdown-it": "^13.0.6",
+    "@types/markdown-it-container": "^2.0.9",
     "@types/node": "^18.16.3",
+    "@types/prismjs": "^1.26.3",
     "cross-env": "^7.0.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
@@ -35,5 +38,12 @@
     "*.{js,jsx,tsx,vue,css,scss,less,md,json}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "escape-html": "^1.0.3",
+    "markdown-it": "^13.0.2",
+    "markdown-it-container": "^3.0.0",
+    "prism-theme-vars": "^0.2.4",
+    "prismjs": "^1.29.0"
   }
 }