Add support for Vuepress 2 (#9)

Author: padarom

.github/workflows/demo.yaml

@@ -11,6 +11,12 @@ jobs:
     steps:
       - name: Checkout Git repository
         uses: actions/checkout@v2
+      
+      - name: Install plugin dependencies
+        run: npm install
+      
+      - name: Build and link the plugin
+        run: npm run build && npm link
 
       - name: Build and Deploy
         uses: jenkey2011/vuepress-deploy@master
@@ -21,5 +27,5 @@ jobs:
           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           CNAME: code-switcher.padarom.xyz
           TARGET_BRANCH: gh-pages
-          BUILD_SCRIPT: cd demo && npm install && npm run build
+          BUILD_SCRIPT: npm run build --workspace @vuepress-plugin-code-switcher/demo
           BUILD_DIR: src/.vuepress/dist

.gitignore

@@ -2,3 +2,6 @@ node_modules
 yarn.lock
 package-lock.json
 demo/src/.vuepress/dist
+demo/src/.vuepress/.cache
+demo/src/.vuepress/.temp
+lib

.npmignore

@@ -1,23 +1,32 @@
 # vuepress-plugin-code-switcher
 Component that allows having synchronized language switchable code blocks (e.g. to switch between Java and Kotlin examples). Selected languages are persisted to local storage to have language selection be permanent across page requests.
 
-_Requires Vuepress 1.0+_
+This plugin supports both Vuepress 1 and 2. Since Vuepress 1 plugins are incompatible with Vuepress 2 I try to maintain the plugin for both Vuepress versions. Those plugin versions can be seen in different GitHub branches as shown below.
+
+| | Vuepress 1 | Vuepress 2 |
+| -- | --- | --- |
+| npm | Versions `1.x.x` | Versions `2.x.x` |
+| GitHub | [`vuepress-1` Branch](https://github.com/padarom/vuepress-plugin-code-switcher/tree/vuepress-1) | [`main` Branch](https://github.com/padarom/vuepress-plugin-code-switcher/tree/main) |
 
 ## Demo
 A live demo is available at https://code-switcher.padarom.xyz.
 
 ![](preview.gif)
 ## Installation
+**These instructions are only valid for Vuepress 2. If you use Vuepress 1, see [here](https://github.com/padarom/vuepress-plugin-code-switcher/blob/vuepress-1/README.md#installation).**
+
 ```
-$ npm install vuepress-plugin-code-switcher --save
+$ npm install vuepress-plugin-code-switcher@~2.0 --save
 ```
 
 After installing, add it to your Vuepress configuration's plugin list:
 
-```js
-module.exports = {
+```ts
+import { codeSwitcherPlugin } from 'vuepress-plugin-code-switcher'
+
+export default {
     // Your remaining configuration ...
-    plugins: [ 'code-switcher' ],
+    plugins: [ codeSwitcherPlugins(/* your config options go here */) ],
 }
 ```
 
@@ -53,18 +62,22 @@ specify your languages every single time. Therefore you can instantiate the
 plugin with options and name the default languages for a given group:
 
 ```js
-module.exports = {
+import { codeSwitcherPlugin } from 'vuepress-plugin-code-switcher'
+
+export default {
     // Your remaining configuration ...
     plugins: [
-        [
-            'code-switcher',
-            {
-                groups: {
-                    default: { ts: 'TypeScript', js: 'JavaScript' },
-                    jvm: { java: 'Java', kotlin: 'Kotlin', jruby: 'JRuby' },
-                },
+        codeSwitcherPlugins({
+            groups: {
+                default: { ts: 'TypeScript', js: 'JavaScript' },
+                jvm: { java: 'Java', kotlin: 'Kotlin', jruby: 'JRuby' },
             },
-        ],
+
+            // You can also specify a custom name for the code switcher component.
+            // If chaning the name like so, you then use the component as <CustomCodeSwitcher>
+            // in your markdown code
+            componentName: 'CustomCodeSwitcher',
+        })
     ],
 }
 ```

README.md

@@ -1,13 +1,11 @@
 {
-  "name": "vuepress-plugin-code-switcher-test",
+  "name": "@vuepress-plugin-code-switcher/demo",
+  "private": true,
   "scripts": {
     "dev": "vuepress dev src",
     "build": "vuepress build src"
   },
-  "dependencies": {
-    "vuepress-plugin-code-switcher": "file://.."
-  },
   "devDependencies": {
-    "vuepress": "^1.5.3"
+    "vuepress": "^2.0.0-beta.51"
   }
 }

components/CodeSwitcher.vue

@@ -0,0 +1,24 @@
+import { defineUserConfig } from 'vuepress'
+import { codeSwitcherPlugin } from '../../../lib/node'
+import { defaultTheme } from '@vuepress/theme-default'
+
+export default defineUserConfig({
+  title: 'Code Switcher Vuepress Plugin',
+
+  theme: defaultTheme({
+    repo: 'https://github.com/padarom/vuepress-plugin-code-switcher',
+    editLink: true,
+    docsDir: 'demo/src',
+    lastUpdated: true,
+  }),
+
+  plugins: [
+    codeSwitcherPlugin({
+      groups: {
+        synchronized: { julia: 'Julia', kotlin: 'Kotlin', perl: 'Perl' },
+        'group-1': { nim: 'Nim', ocaml: 'OCaml' },
+        'group-2': { nim: 'Nim', ocaml: 'OCaml' },
+      },
+    }),
+  ],
+})

demo/package.json

@@ -1,5 +1,6 @@
 {
   "name": "vuepress-plugin-code-switcher",
+  "version": "2.0.0",
   "author": {
     "name": "Christopher Mühl",
     "email": "christopher@padarom.xyz",
@@ -9,10 +10,35 @@
     "type": "git",
     "url": "https://github.com/padarom/vuepress-plugin-code-switcher"
   },
-  "version": "1.1.0",
-  "main": "index.js",
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json && cpx \"src/**/*.{d.ts,vue,scss}\" lib",
+    "dev": "npm run dev --workspace @vuepress-plugin-code-switcher/demo"
+  },
+  "workspaces": ["./demo"],
+  "packageManager": "pnpm@7.11.0",
+  "type": "module",
+  "exports": {
+    ".": "./lib/node/index.js",
+    "./client": "./lib/client/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/node/index.ts",
+  "types": "./lib/node/index.d.ts",
+  "files": [
+    "lib"
+  ],
   "license": "MIT",
+  "devDependencies": {
+    "cpx": "^1.5.0",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.0.2",
+    "typescript": "^4.8.4"
+  },
   "dependencies": {
-    "@vuepress/plugin-register-components": "^1.8.0"
+    "@vuepress/client": "^2.0.0-beta.51",
+    "@vuepress/core": "^2.0.0-beta.51",
+    "@vuepress/utils": "^2.0.0-beta.51",
+    "tiny-emitter": "^2.1.0",
+    "vue": "^3.2.40"
   }
 }