migrate to vite, replace require by import

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   env: {
-    node: true,
+    es2022: true,
   },
   extends: [
     'plugin:vue/recommended',
@@ -15,7 +15,4 @@ module.exports = {
     'linebreak-style': 0,
     'max-len': 0,
   },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
 };

package.json

@@ -2,6 +2,7 @@
   "name": "vue-katex",
   "version": "0.5.0",
   "description": "Vue plugin for KaTeX",
+  "type": "module",
   "main": "dist/vue-katex.cjs.js",
   "module": "dist/vue-katex.es.js",
   "unpkg": "dist/vue-katex.umd.js",
@@ -15,10 +16,11 @@
     "url": "git+https://github.com/lucpotage/vue-katex.git"
   },
   "scripts": {
-    "build": "rollup --config rollup.config.js",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit",
-    "prepublish": "yarn run lint && yarn run test:unit && yarn run build"
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "keywords": [
     "Vue",
@@ -38,31 +40,24 @@
   },
   "homepage": "https://github.com/lucpotage/vue-katex#readme",
   "peerDependencies": {
-    "katex": "^0.12",
-    "vue": "^2.6.11"
+    "katex": "^0.16.4",
+    "vue": "^2.7.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@vue/cli-plugin-babel": "^4.4.6",
-    "@vue/cli-plugin-eslint": "^4.4.6",
-    "@vue/cli-plugin-unit-jest": "^4.4.6",
-    "@vue/cli-service": "^4.4.6",
-    "@vue/test-utils": "^1.0.3",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "katex": "^0.11.1",
-    "rollup": "^1.27.2",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-terser": "^5.1.2",
-    "rollup-plugin-vue": "^5.0.0",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vue/test-utils": "1",
+    "jsdom": "^21.1.0",
+    "katex": "^0.16.4",
+    "terser": "^5.16.5",
+    "vite": "^4.1.4",
+    "vitest": "^0.29.1",
+    "vue": "^2.7.14",
+    "vue-template-compiler": "^2.7.14"
   },
   "dependencies": {
-    "deepmerge": "^4.2.2"
+    "deepmerge": "^4.3.0",
+    "eslint": "8",
+    "eslint-plugin-vue": "8",
+    "path": "^0.12.7"
   }
 }

src/components/KatexElement.vue

@@ -1,6 +1,6 @@
 <script>
 import katex from 'katex';
-const merge = require('deepmerge');
+import deepmerge from 'deepmerge';
 
 const removeUndefined = (obj) =>{
   const newObj = {};
@@ -59,7 +59,7 @@ export default {
   },
   computed: {
     options() {
-      return merge(
+      return deepmerge(
           this.$katexOptions,
           removeUndefined({
             displayMode: this.displayMode,

src/directives/katex-directive.js

@@ -1,12 +1,12 @@
-import katex from 'katex';
+import katex from 'katex'
 import renderMathInElement from 'katex/dist/contrib/auto-render.js';
-const merge = require('deepmerge');
+import deepmerge from 'deepmerge';
 
 const katexDirective = (globalOptions) => ({
   name: 'katex',
   directive: function(el, binding) {
     const argOptions = (binding.value && binding.value.options) || {};
-    const allOptions = merge(globalOptions, argOptions);
+    const allOptions = deepmerge(globalOptions, argOptions);
 
     if (binding.arg && binding.arg === 'auto') {
       renderMathInElement(el, allOptions);
@@ -16,7 +16,7 @@ const katexDirective = (globalOptions) => ({
       if (binding.arg === 'display') {
         displayMode.displayMode = true;
       }
-      const options = merge(allOptions, displayMode);
+      const options = deepmerge(allOptions, displayMode);
 
       katex.render(expression, el, options);
     }

src/plugin.js → src/vite-plugin-katex.js

@@ -1,5 +1,5 @@
-import katexDirective from './directives/katex-directive';
-import KatexElement from './components/KatexElement.vue';
+import katexDirective from '@/directives/katex-directive.js';
+import KatexElement from '@/components/KatexElement.vue';
 
 const plugin = {
   install(Vue, options) {

tests/unit/components/KatexElement.spec.js

@@ -1,3 +1,4 @@
+import {describe, it, expect} from 'vitest';
 import {shallowMount, mount} from '@vue/test-utils';
 import KatexElement from '@/components/KatexElement.vue';
 import katex from 'katex';
@@ -120,7 +121,7 @@ describe('KatexElement.vue', () => {
     const wrapper = shallowMount(KatexElement, {
       propsData: {expression: '\\frac{a_i}{1+x}'},
     });
-    expect(wrapper.is('span')).toBe(true);
+    expect(wrapper.element.tagName).toBe('SPAN');
   });
 
   it('has correct root element - display mode', () => {
@@ -130,7 +131,7 @@ describe('KatexElement.vue', () => {
         displayMode: true,
       },
     });
-    expect(wrapper.is('div')).toBe(true);
+    expect(wrapper.element.tagName).toBe('DIV');
   });
 
   it('matches katex renderToString', () => {

tests/unit/components/__snapshots__/KatexElement.spec.js.snap

@@ -1,4 +1,20 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`KatexElement.vue > matches snapshot - display mode 1`] = `
+VueWrapper {
+  "_emitted": {},
+  "_emittedByOrder": [],
+  "isFunctionalComponent": undefined,
+}
+`;
+
+exports[`KatexElement.vue > matches snapshot - inline mode 1`] = `
+VueWrapper {
+  "_emitted": {},
+  "_emittedByOrder": [],
+  "isFunctionalComponent": undefined,
+}
+`;
 
 exports[`KatexElement.vue matches snapshot - display mode 1`] = `<div><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mfrac><msub><mi>a</mi><mi>i</mi></msub><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{a_i}{1+x}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.87689em;vertical-align:-0.7693300000000001em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1075599999999999em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mord mathdefault">x</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord"><span class="mord mathdefault">a</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.31166399999999994em;"><span style="top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathdefault mtight">i</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.7693300000000001em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></div>`;
 

tests/unit/directives/katex.spec.js

@@ -1,10 +1,11 @@
+import {describe, it, expect, vi} from 'vitest';
 import {createLocalVue, mount} from '@vue/test-utils';
-import katexDirective from '@/directives/katex-directive';
+import katexDirective from '@/directives/katex-directive.js';
 import katex from 'katex';
 import renderMathInElement from 'katex/dist/contrib/auto-render.js';
 
-jest.mock('katex');
-jest.mock('katex/dist/contrib/auto-render.js');
+vi.mock('katex');
+vi.mock('katex/dist/contrib/auto-render.js');
 
 const localVue = createLocalVue();
 const vKatex = katexDirective({});

tests/unit/plugin.spec.js

@@ -1,13 +1,14 @@
+import {describe, it, expect, vi} from 'vitest';
 import {createLocalVue} from '@vue/test-utils';
-import VueKatex from '@/plugin.js';
+import VueKatex from '@/vite-plugin-katex.js';
 
 const vueInNodeEnv = (options) => {
   const localVue = createLocalVue();
   localVue.use(VueKatex, options);
   return localVue;
 };
 
-describe('plugin.js', () => {
+describe('vite-plugin-katex.js', () => {
   it('registers components and directives', ()=>{
     const {components, directives} = vueInNodeEnv().options;
     expect(components.KatexElement).toBeTruthy();
@@ -24,9 +25,9 @@ describe('plugin.js', () => {
     expect(localVue.prototype.$katexOptions.someOption).toBeTruthy();
   });
 
-  it('provides v-katex with globals', ()=>{
-    const vKatex = require('@/directives/katex-directive');
-    const vKatexSpy = jest.spyOn(vKatex, 'default');
+  it('provides v-katex with globals', async () => {
+    const vKatex = await import('@/directives/katex-directive.js');
+    const vKatexSpy = vi.spyOn(vKatex, 'default');
 
     const globalOptions = {
       someOption: 'woo!',

vite.config.js

@@ -0,0 +1,43 @@
+import { defineConfig } from 'vite'
+
+import vue from '@vitejs/plugin-vue2'
+import path from 'path'
+
+export default defineConfig({
+  resolve:{
+    alias:{
+      '@' : path.resolve(__dirname, './src')
+    },
+  },
+  build: {
+    lib: {
+      entry: '@/vite-plugin-katex.js',
+      name: 'VueKatex',
+      fileName: (format) => `vite-plugin-katex.${format}.js`
+    },
+    rollupOptions: {
+      input: 'src/vite-plugin-katex.js',
+      external: [
+        'vue',
+        'katex',
+        'katex/dist/contrib/auto-render.js',
+        'deepmerge'
+      ],
+      output: {
+        globals: {
+          'katex': 'katex',
+          'katex/dist/contrib/auto-render.js': 'renderMathInElement',
+          'deepmerge': 'deepmerge'
+        },
+      }
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+
+  plugins: [
+    vue(),
+  ],
+});