Merge pull request #17 from JanGuillermo/1.0.2

🚢 Ship 1.0.2

.eslintrc.js

@@ -10,17 +10,11 @@ module.exports = {
   },
   plugins: ['prettier'],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-
     'prettier/prettier': ['error']
   },
   overrides: [
     {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/__tests__/**/*.spec.{j,t}s?(x)'],
       env: {
         jest: true
       }

.npmignore

@@ -0,0 +1,4 @@
+/**/*
+!dist/**/*
+!LICENSE.md
+!package*.json

CHANGELOG.md

@@ -0,0 +1,44 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.2] - 2020-09-15
+### Added
+- Added information on README for including LaTeX + highlight.js styles
+
+### Changed
+- Split test cases into individual plugin test files
+- Utilize Vue's Compositions API for the component
+
+### Fixed
+- [Syntax highlighting indentation issues #14](https://github.com/JanGuillermo/vue3-markdown-it/issues/14)
+
+### Removed
+- Omitted the production library folder
+- Omitted the includes for LaTeX + highlight.js styles
+- `dedent` dependency
+- `highlight.js` dependency
+
+## [1.0.1] - 2020-09-14
+### Added
+- Released vue3-markdown-it with support for 14 plugins:
+  - [markdown-it](https://github.com/markdown-it/markdown-it) - __The one__ that started it all
+  - [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) - Add abbreviations
+  - [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) - Add anchors
+  - [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) - Add definition lists
+  - [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) - Add emojis
+  - [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) - Add footnotes
+  - [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) - Add highlighting for code blocks
+  - [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) - Add `<ins>` tags
+  - [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex) - Add LaTeX formatting
+  - [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) - Add marking/highlighting
+  - [markdown-it-strikethrough-alt](https://github.com/jay-hodgson/markdown-it-strikethrough-alt) - Add strikethrough
+  - [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) - Add subscript
+  - [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) - Add superscript
+  - [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - Add task lists
+  - [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) - Add table of contents
+
+[1.0.2]: https://github.com/JanGuillermo/vue3-markdown-it/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/JanGuillermo/vue3-markdown-it/releases/tag/v1.0.1

README.md

@@ -41,9 +41,15 @@ const app = createApp();
 app.use(VueMarkdownIt);
 ```
 
-#### CSS
+### CSS
+If you want to use LaTeX, you'll have to import a CSS file from [markdown-it-latex](https://github.com/tylingsoft/markdown-it-latex).
 ```js
-import 'vue3-markdown-it/lib/vue3-markdown-it.css';
+import 'markdown-it-latex/dist/index.css';
+```
+
+If you want to use highlighting for code blocks, you'll have to import a CSS file from [highlight.js](https://github.com/highlightjs/highlight.js). View more styles [here](https://github.com/highlightjs/highlight.js/tree/master/src/styles). The code sample below imports the Monokai styling.
+```js
+import 'highlight.js/styles/monokai.css';
 ```
 
 ### Single Use

__tests__/mocks/style.js

@@ -0,0 +1 @@
+export default {};

__tests__/plugins/markdown-it-abbr.spec.js

@@ -0,0 +1,16 @@
+import render from '#/render';
+
+describe('markdown-it-abbr tests', () => {
+  let source, result;
+
+  it('should be able to support abbreviations', async () => {
+    source = `
+      *[D4C]: Dirty Deeds Done Dirt Cheap
+      D4C is such a bizarre stand.
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+  });
+});

__tests__/plugins/markdown-it-anchor.spec.js

@@ -0,0 +1,17 @@
+import render from '#/render';
+
+describe('markdown-it-anchor tests', () => {
+  let source, result;
+
+  it('should be able to support anchors', async () => {
+    source = `
+# First header
+Lorem ipsum.
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('first-header');
+  });
+});

__tests__/plugins/markdown-it-deflist.spec.js

@@ -0,0 +1,23 @@
+import render from '#/render';
+
+describe('markdown-it-deflist tests', () => {
+  let source, result;
+
+  it('should be able to support definition lists', async () => {
+    source = `
+First Term
+: This is the definition of the first term.
+
+Second Term
+: This is one definition of the second term.
+: This is another definition of the second term.
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('</dl>');
+    expect(global.wrapper.html()).toContain('</dt>');
+    expect(global.wrapper.html()).toContain('</dd>');
+  });
+});

__tests__/plugins/markdown-it-emoji.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-emoji tests', () => {
+  let source, result;
+
+  it('should be able to support emojis', async () => {
+    source = ':tada:';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.text()).toEqual('🎉');
+  });
+});

__tests__/plugins/markdown-it-footnote.spec.js

@@ -0,0 +1,24 @@
+import render from '#/render';
+
+describe('markdown-it-footnote tests', () => {
+  let source, result;
+
+  it('should be able to support footnotes', async () => {
+    source = `
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote.
+
+[^longnote]: Here's one with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('footnote-ref');
+    expect(global.wrapper.html()).toContain('footnote-backref');
+  });
+});

__tests__/plugins/markdown-it-highlightjs.spec.js

@@ -0,0 +1,20 @@
+import render from '#/render';
+
+describe('markdown-it-highlightjs tests', () => {
+  let source, result;
+
+  it('should be able to support highlighting', async () => {
+    source = `
+      \`\`\`
+      this is code
+      \`\`\`
+
+      this isn't code
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('hljs');
+  });
+});

__tests__/plugins/markdown-it-ins.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-ins tests', () => {
+  let source, result;
+
+  it('should be able to support <insert> tags', async () => {
+    source = '++inserted++';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('</ins>');
+  });
+});

__tests__/plugins/markdown-it-latex.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-latex tests', () => {
+  let source, result;
+
+  it('should be able to support LaTeX', async () => {
+    source = '`$E = mc^2$`';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('katex');
+  });
+});

__tests__/plugins/markdown-it-mark.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-mark tests', () => {
+  let source, result;
+
+  it('should be able to support <mark> tags', async () => {
+    source = '==marked==';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('</mark>');
+  });
+});

__tests__/plugins/markdown-it-strikethrough-alt.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-strikethrough-alt tests', () => {
+  let source, result;
+
+  it('should be able to support strikethrough', async () => {
+    source = '--vue3-markdown-it sucks--';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('</s>');
+  });
+});

__tests__/plugins/markdown-it-sub.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-sub tests', () => {
+  let source, result;
+
+  it('should be able to support subscript', async () => {
+    source = 'H~2~0';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('</sub>');
+  });
+});

__tests__/plugins/markdown-it-sup.spec.js

@@ -0,0 +1,14 @@
+import render from '#/render';
+
+describe('markdown-it-sup tests', () => {
+  let source, result;
+
+  it('should be able to support superscript', async () => {
+    source = '29^th^';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('</sup>');
+  });
+});

__tests__/plugins/markdown-it-task-lists.spec.js

@@ -0,0 +1,17 @@
+import render from '#/render';
+
+describe('markdown-it-task-lists tests', () => {
+  let source, result;
+
+  it('should be able to support task lists', async () => {
+    source = `
+- [ ] unchecked
+- [x] checked
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('checkbox');
+  });
+});

__tests__/plugins/markdown-it-toc-done-right.spec.js

@@ -0,0 +1,22 @@
+import render from '#/render';
+
+describe('markdown-it-toc-done-right tests', () => {
+  let source, result;
+
+  it('should be able to support table of contents', async () => {
+    source = `
+[[toc]]
+
+# First heading
+Swag
+
+## Second heading
+Awesome sauce!
+    `;
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+    expect(global.wrapper.html()).toContain('table-of-contents');
+  });
+});

__tests__/plugins/markdown-it.spec.js

@@ -0,0 +1,17 @@
+import render from '#/render';
+
+describe('markdown-it tests', () => {
+  let source, result;
+
+  it('should initialize properly', async () => {
+    expect(global.wrapper.text()).toEqual('');
+  });
+
+  it('should update with "<h2>Hello World!</h2>"', async () => {
+    source = '## Hello World!';
+    result = render(source);
+
+    await global.wrapper.setProps({ source });
+    expect(global.wrapper.html()).toContain(result);
+  });
+});

__tests__/render.js

@@ -0,0 +1,35 @@
+import MarkdownIt from 'markdown-it';
+import MarkdownItAbbr from 'markdown-it-abbr';
+import MarkdownItAnchor from 'markdown-it-anchor';
+import MarkdownItDeflist from 'markdown-it-deflist';
+import MarkdownItEmoji from 'markdown-it-emoji';
+import MarkdownItFootnote from 'markdown-it-footnote';
+import MarkdownItHighlightjs from 'markdown-it-highlightjs';
+import MarkdownItIns from 'markdown-it-ins';
+import MarkdownItLatex from 'markdown-it-latex';
+import MarkdownItMark from 'markdown-it-mark';
+import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt';
+import MarkdownItSub from 'markdown-it-sub';
+import MarkdownItSup from 'markdown-it-sup';
+import MarkdownItTasklists from 'markdown-it-task-lists';
+import MarkdownItTOC from 'markdown-it-toc-done-right';
+
+const md = new MarkdownIt();
+const render = (source) => md.render(source);
+
+md.use(MarkdownItAbbr)
+  .use(MarkdownItAnchor)
+  .use(MarkdownItDeflist)
+  .use(MarkdownItEmoji)
+  .use(MarkdownItFootnote)
+  .use(MarkdownItHighlightjs)
+  .use(MarkdownItIns)
+  .use(MarkdownItLatex)
+  .use(MarkdownItMark)
+  .use(MarkdownItStrikethroughAlt)
+  .use(MarkdownItSub)
+  .use(MarkdownItSup)
+  .use(MarkdownItTasklists)
+  .use(MarkdownItTOC);
+
+export default render;