feat(plugin-copy-code): new plugin: plugin-copy-code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-plume",
-  "version": "1.0.0.beta.26",
+  "version": "1.0.0-beta.26",
   "private": true,
   "license": "MIT",
   "author": "pengzhanbo",

packages/plugin-copy-code/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (C) 2021 - PRESENT by pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/plugin-copy-code/README.md

@@ -0,0 +1,17 @@
+# `@vuepress-plume/vuepress-plugin-copy-code`
+
+## Install
+```
+yarn add @vuepress-plume/vuepress-plugin-copy-code
+```
+## Usage
+``` js
+// .vuepress/config.js
+module.exports = {
+  //...
+  plugins: [
+    copyCodePlugin()
+  ]
+  // ...
+}
+```

packages/plugin-copy-code/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@vuepress-plume/vuepress-plugin-copy-code",
+  "version": "1.0.0-beta.26",
+  "description": "The Plugin for VuePres 2",
+  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
+  "bugs": {
+    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pengzhanbo/vuepress-theme-plume.git"
+  },
+  "license": "MIT",
+  "author": "pengzhanbo <volodymyr@foxmail.com>",
+  "main": "lib/node/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+    "clean": "rimraf lib *.tsbuildinfo",
+    "copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
+    "copy:watch": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib -w",
+    "dev": "concurrently \"pnpm copy:watch\" \"pnpm ts:watch\"",
+    "ts": "tsc -b tsconfig.build.json",
+    "ts:watch": "tsc -b tsconfig.build.json --watch"
+  },
+  "dependencies": {
+    "@vuepress/client": "2.0.0-beta.43",
+    "@vuepress/core": "2.0.0-beta.43",
+    "vue": "^3.2.33",
+    "vue-router": "^4.0.14"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keyword": [
+    "VuePress",
+    "vuepress plugin",
+    "copyCode",
+    "vuepress-plugin-plugin-copy-code"
+  ]
+}

packages/plugin-copy-code/src/client/clientAppSetup.ts

@@ -0,0 +1,5 @@
+import { defineClientAppSetup } from '@vuepress/client'
+
+export default defineClientAppSetup(() => {
+  // do something
+})

packages/plugin-copy-code/src/node/index.ts

@@ -0,0 +1,6 @@
+import { copyCodePlugin } from './plugin'
+
+export * from './plugin'
+export * from '../shared'
+
+export default copyCodePlugin

packages/plugin-copy-code/src/node/plugin.ts

@@ -0,0 +1,42 @@
+import path from 'path'
+import type { App, Plugin } from '@vuepress/core'
+import type { CopyCodeLocaleOption, CopyCodeOptions } from '../shared'
+
+const defaultOptions: CopyCodeOptions = {
+  selector: '.theme-default-content dev[class*="language-"] pre',
+  duration: 300,
+  delay: 500,
+  showInMobile: false,
+}
+
+const defaultLocalesOption: CopyCodeLocaleOption = {
+  '/zh/': {
+    hint: '复制成功',
+    copy: '复制代码',
+  },
+  '/en/': {
+    hint: 'Copied successfully',
+    copy: 'Copy code',
+  },
+}
+
+export const copyCodePlugin = (options: CopyCodeOptions): Plugin => {
+  const locales = options.locales || {}
+  delete options.locales
+
+  options = Object.assign({}, defaultOptions, options)
+  const localesOption = Object.assign({}, defaultLocalesOption, locales)
+  return (app: App) => {
+    return {
+      name: '@vuepress-plume/vuepress-plugin-copy-code',
+      define: (): Record<string, unknown> => ({
+        COPY_CODE_OPTIONS: options,
+        COPY_CODE_LOCALES_OPTIONS: localesOption,
+      }),
+      clientAppSetupFiles: path.resolve(
+        __dirname,
+        '../client/clientAppSetup.js'
+      ),
+    }
+  }
+}

packages/plugin-copy-code/src/shared/index.ts

@@ -0,0 +1,46 @@
+import type { LocaleConfig } from '@vuepress/core'
+export interface CopyCodeOptions {
+  /**
+   * 代码块选择器
+   *
+   * @default '.theme-default-content dev[class*="language-"] pre'
+   */
+  selector?: string | string[]
+
+  /**
+   * 提示消息显示时间
+   *
+   * @description 设置为 `0` 将会禁用提示
+   *
+   * @default 300
+   */
+  duration?: number
+
+  /**
+   * 是否展示在移动端
+   */
+  showInMobile?: boolean
+
+  /**
+   * 注册复制按钮的延时，单位 ms
+   *
+   * @default 500
+   */
+  delay?: number
+
+  locales?: CopyCodeLocaleOption
+}
+
+export type CopyCodeLocaleOption = LocaleConfig<CopyCodeLocaleData>
+
+export interface CopyCodeLocaleData {
+  /**
+   * 复制按钮文字
+   */
+  copy: string
+
+  /**
+   * 复制成功提示文字
+   */
+  hint: string
+}

packages/plugin-copy-code/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "references": [
+    {
+      "path": "./tsconfig.esm.json"
+    },
+    {
+      "path": "./tsconfig.cjs.json"
+    }
+  ],
+  "files": []
+}

packages/plugin-copy-code/tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src/node", "./src/shared"]
+}

packages/plugin-copy-code/tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2020",
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "types": ["@vuepress/client/types"]
+  },
+  "include": ["./src/client", "./src/shared"]
+}

packages/theme/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@vuepress-plume/vuepress-plugin-caniuse": "workspace:*",
+    "@vuepress-plume/vuepress-plugin-copy-code": "workspace:*",
     "@vuepress/client": "2.0.0-beta.43",
     "@vuepress/core": "2.0.0-beta.43",
     "@vuepress/plugin-active-header-links": "2.0.0-beta.43",

packages/theme/src/node/plugins/copyCode.ts

@@ -1,24 +1,19 @@
-import type { App, Plugin } from '@vuepress/core'
-import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
+import { copyCodePlugin } from '@vuepress-plume/vuepress-plugin-copy-code'
+import type { Plugin } from '@vuepress/core'
+// import { copyCodePlugin } from 'vuepress-plugin-copy-code2'
 import type { PlumeThemePluginOptions } from '../../shared'
 
-type PluginFunc = (options: any, app: App) => Plugin
-
 export const resolveCopyCode = (plugins: PlumeThemePluginOptions): Plugin => {
   if (plugins.copyCode === false) return [] as unknown as Plugin
-  return (app: App) => {
-    console.log(app.dir.source())
-    return (copyCodePlugin as unknown as PluginFunc)(
-      plugins.copyCode || {
-        selector: '.page-content div[class*="language-"] pre',
-        locales: {
-          '/': {
-            copy: '复制成功',
-            hint: '复制代码',
-          },
+  return copyCodePlugin(
+    plugins.copyCode || {
+      selector: '.page-content div[class*="language-"] pre',
+      locales: {
+        '/': {
+          copy: '复制成功',
+          hint: '复制代码',
         },
       },
-      app
-    )
-  }
+    }
+  )
 }

packages/theme/tsconfig.build.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "references": [
     { "path": "../plugin-caniuse/tsconfig.build.json" },
+    { "path": "../plugin-copy-code/tsconfig.build.json" },
     { "path": "./tsconfig.esm.json" },
     { "path": "./tsconfig.cjs.json" }
   ],

pnpm-lock.yaml

@@ -107,14 +107,19 @@ importers:
     specifiers:
       '@vuepress/client': 2.0.0-beta.43
       '@vuepress/core': 2.0.0-beta.43
+      vue: ^3.2.33
+      vue-router: ^4.0.14
     dependencies:
       '@vuepress/client': 2.0.0-beta.43
       '@vuepress/core': 2.0.0-beta.43
+      vue: 3.2.33
+      vue-router: 4.0.14_vue@3.2.33
 
   packages/theme:
     specifiers:
       '@types/lodash.merge': ^4.6.6
       '@vuepress-plume/vuepress-plugin-caniuse': workspace:*
+      '@vuepress-plume/vuepress-plugin-copy-code': workspace:*
       '@vuepress/client': 2.0.0-beta.43
       '@vuepress/core': 2.0.0-beta.43
       '@vuepress/plugin-active-header-links': 2.0.0-beta.43
@@ -153,6 +158,7 @@ importers:
     dependencies:
       '@types/lodash.merge': 4.6.7
       '@vuepress-plume/vuepress-plugin-caniuse': link:../plugin-caniuse
+      '@vuepress-plume/vuepress-plugin-copy-code': link:../plugin-copy-code
       '@vuepress/client': 2.0.0-beta.43
       '@vuepress/core': 2.0.0-beta.43
       '@vuepress/plugin-active-header-links': 2.0.0-beta.43

tsconfig.build.json

@@ -3,6 +3,7 @@
   "files": [],
   "references": [
     { "path": "./packages/theme/tsconfig.build.json" },
-    { "path": "./packages/plugin-caniuse/tsconfig.build.json" }
+    { "path": "./packages/plugin-caniuse/tsconfig.build.json" },
+    { "path": "./packages/plugin-copy-code/tsconfig.build.json" }
   ]
 }

tsconfig.json

@@ -7,7 +7,7 @@
     "paths": {
       "@theme-plume/*": ["./packages/theme/src/client/components/*"],
       "@internal/*": ["./docs/.vuepress/.temp/internal/*"],
-      "@vuepress-plume/vuepress-*": ["./packages/*/src"],
+      "@vuepress-plume/vuepress-*": ["./packages/*/src/node/index.ts"],
       "@vuepress-plume/vuepress-theme-plume": [
         "./packages/theme/src/node/index.ts"
       ]