Upgrade to svelte 4 (#73)

* bump svelte related deps

- this includes replacing eslint-plugin-svelte3 with eslint-plugin-svelte which is recommend

* remove svelte3 plugin for plugin:svelte/recommended and svelte-eslint-parser

* remove yarn-error.log

* replace jest with vitest

@pablo-abc this simplifies testing with almost zero config and eliminates the hair pulling that comes with esm/cjs environments

* update spec files with test handlers from vitest

* set node-version  to 16|18

.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',
+ },
+})