Upgrade to svelte 4

.eslintrc.js

@@ -7,11 +7,12 @@ module.exports = {
     es6: true,
     browser: true,
   },
-  plugins: ['svelte3'],
+  plugins: [],
+  extends: ['plugin:svelte/recommended'],
   overrides: [
     {
       files: ['**/*.svelte'],
-      processor: 'svelte3/svelte3',
+      parser: "svelte-eslint-parser",
     },
   ],
   rules: {
@@ -44,4 +45,4 @@ module.exports = {
       },
     ],
   },
-};
+}

.github/workflows/npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       - run: yarn
       - run: yarn test
 
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: yarn publish

.github/workflows/tests.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 18.x]
 
     steps:
     - uses: actions/checkout@v2

package.json

@@ -6,6 +6,7 @@
   "module": "dist/sveltemarkdown.es.js",
   "jsnext:main": "dist/sveltemarkdown.es.js",
   "svelte": "src/index.js",
+  "type": "module",
   "files": [
     "dist",
     "src",
@@ -18,53 +19,36 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "test": "jest tests",
-    "test:watch": "yarn test -- --watch"
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/preset-env": "^7.12.16",
     "@rollup/plugin-commonjs": "17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/svelte": "^3.0.3",
-    "babel-jest": "^27.4.5",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/svelte": "^4.0.3",
     "eslint": "^7.20.0",
-    "eslint-plugin-svelte3": "^3.1.0",
-    "jest": "^27.4.5",
+    "eslint-plugin-svelte": "^2.32.2",
+    "jsdom": "^22.1.0",
     "prettier": "^2.2.1",
     "rollup": "^2.39.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-bundle-size": "^1.0.3",
-    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-svelte": "^7.1.6",
     "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^1.0.11",
-    "svelte": "^3.32.3",
-    "svelte-jester": "^1.3.0"
+    "svelte": "^4.0.5",
+    "svelte-eslint-parser": "^0.32.1",
+    "vite": "^4.4.4",
+    "vitest": "^0.33.0"
   },
   "dependencies": {
     "@types/marked": "^4.0.1",
     "marked": "^4.0.10"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0"
+    "svelte": "^4.0.0"
   },
-  "types": "./types/index.d.ts",
-  "jest": {
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.svelte$": "svelte-jester"
-    },
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-dom/extend-expect"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "svelte"
-    ],
-    "moduleNameMapper": {
-      "marked/lib/marked.esm.js": "marked"
-    }
-  }
+  "types": "./types/index.d.ts"
 }

tests/default-renderers.spec.js

@@ -1,14 +1,9 @@
 import '@testing-library/jest-dom/extend-expect'
-
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/svelte'
-
 import SvelteMarkdown from '../src/SvelteMarkdown.svelte'
 
 describe('testing default renderers', () => {
-  beforeAll(() => {
-    console.warn = jest.fn()
-  })
-
   test('renders a paragraph', () => {
     render(SvelteMarkdown, { source: 'Plain text' })
 
@@ -47,12 +42,26 @@ describe('testing default renderers', () => {
     expect(element).toContainHTML('<blockquote><p>Plain text</p></blockquote>')
   })
 
-  test('renders a link', () => {
-    render(SvelteMarkdown, { source: '[link](https://pablo.berganza.dev "link title")' })
+  describe('renders a link', () => {
+    test('renders link title', () => {
+      render(SvelteMarkdown, {
+        source: '[link](https://pablo.berganza.dev "link title")',
+      })
 
-    const element = screen.getByRole('link', { name: /link title/ })
-    expect(element).toBeInTheDocument()
-    expect(element).toHaveTextContent('link')
+      const element = screen.getByRole('link', { title: /link title/ })
+      expect(element).toBeInTheDocument()
+      expect(element).toHaveTextContent('link')
+    })
+
+    test('renders link name', () => {
+      render(SvelteMarkdown, {
+        source: '[link](https://pablo.berganza.dev "link title")',
+      })
+
+      const element = screen.getByRole('link', { name: /link/ })
+      expect(element).toBeInTheDocument()
+      expect(element).toHaveTextContent('link')
+    })
   })
 
   describe('heading', () => {
@@ -73,45 +82,61 @@ describe('testing default renderers', () => {
     })
 
     test('renders a heading with id and preffix', () => {
-      render(SvelteMarkdown, { source: '# This is a title', options: { headerPrefix: 'test-' } })
+      render(SvelteMarkdown, {
+        source: '# This is a title',
+        options: { headerPrefix: 'test-' },
+      })
 
       const element = screen.getByRole('heading', { name: /This is a title/ })
       expect(element).toHaveAttribute('id', 'test-this-is-a-title')
     })
 
     test('renders a heading with non-duplicate id', () => {
-      render(SvelteMarkdown, { source: '# This is a title\n\n## This is a title' })
+      render(SvelteMarkdown, {
+        source: '# This is a title\n\n## This is a title',
+      })
 
-      const element = screen.getAllByRole('heading', { name: /This is a title/ })
+      const element = screen.getAllByRole('heading', {
+        name: /This is a title/,
+      })
       expect(element[0]).toHaveAttribute('id', 'this-is-a-title')
       expect(element[1]).toHaveAttribute('id', 'this-is-a-title-1')
     })
 
     test('renders a heading without id', () => {
-      render(SvelteMarkdown, { source: '# This is a title', options: { headerIds: false } })
+      render(SvelteMarkdown, {
+        source: '# This is a title',
+        options: { headerIds: false },
+      })
 
       const element = screen.getByRole('heading', { name: /This is a title/ })
       expect(element).not.toHaveAttribute('id')
     })
   })
 
   test('renders an image', () => {
-    render(SvelteMarkdown, { source: '![Image](https://pablo.berganza.dev/img/profile-pic-400.jpeg "image title")' })
+    render(SvelteMarkdown, {
+      source:
+        '![Image](https://pablo.berganza.dev/img/profile-pic-400.jpeg "image title")',
+    })
 
     const element = screen.getByRole('img', { name: /Image/ })
     expect(element).toBeInTheDocument()
     expect(element).toHaveAttribute('title', 'image title')
   })
 
-
   test('renders a table', () => {
-    render(SvelteMarkdown, { source: `
-| header |
-|--------|
-| value |` })
+    render(SvelteMarkdown, {
+      source: `
+  | header |
+  |--------|
+  | value |`,
+    })
 
     const element = screen.getByRole('table')
-    const tableHeaderElement = screen.getByRole('columnheader', { name: /header/ })
+    const tableHeaderElement = screen.getByRole('columnheader', {
+      name: /header/,
+    })
     const tableCellElement = screen.getByRole('cell', { name: /value/ })
     expect(element).toBeInTheDocument()
     expect(element).toContainElement(tableHeaderElement)

tests/svelte-markdown.spec.js

@@ -1,28 +1,28 @@
 import '@testing-library/jest-dom/extend-expect'
-
+import { describe, test, expect } from 'vitest'
 import { render, screen } from '@testing-library/svelte'
-
 import SvelteMarkdown from '../src/SvelteMarkdown.svelte'
 
 describe('testing initialization', () => {
-  beforeAll(() => {
-    console.warn = jest.fn()
-  })
-
   test('accepts pre-processed tokens as source', () => {
-    render(SvelteMarkdown, { source: [{
-      type: 'paragraph',
-      raw: 'this is an **example**',
-      text: 'this is an **example**',
-      tokens: [
-        { type: 'text', raw: 'this is an ', text: 'this is an ' },
-        { type: 'strong',
-          raw: '**example**',
-          text: 'example',
-          tokens: [ { type: 'text', raw: 'example', text: 'example' } ],
+    render(SvelteMarkdown, {
+      source: [
+        {
+          type: 'paragraph',
+          raw: 'this is an **example**',
+          text: 'this is an **example**',
+          tokens: [
+            { type: 'text', raw: 'this is an ', text: 'this is an ' },
+            {
+              type: 'strong',
+              raw: '**example**',
+              text: 'example',
+              tokens: [{ type: 'text', raw: 'example', text: 'example' }],
+            },
+          ],
         },
       ],
-    }]})
+    })
 
     const element = screen.getByText('example')
     expect(element).toBeInTheDocument()

vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+export default defineConfig({
+  plugins: [svelte({ hot: !process.env.VITEST })],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+})