From d671e3d4b71c14d4232f73247840deee791f3466 Mon Sep 17 00:00:00 2001 From: Levy Barbosa Date: Sat, 6 Aug 2022 13:11:12 -0300 Subject: [PATCH 1/3] implemented option to import as tokens --- README.md | 36 +++++++++++++++++++++++++++++++++--- src/index.ts | 10 +++++++++- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7412501..0186504 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ console.log(attributes) //=> { title: 'Awesome Title', description: 'Describe th ### Options ```ts -mode?: ('html' | 'toc' | 'react' | 'vue')[] +mode?: ('html' | 'toc' | 'tokens' | 'react' | 'vue')[] markdown?: (body: string) => string markdownIt?: MarkdownIt | MarkdownIt.Options ``` @@ -66,11 +66,12 @@ import { Mode } from 'vite-plugin-markdown' console.log(Mode.HTML) //=> 'html' console.log(Mode.TOC) //=> 'toc' +console.log(Mode.TOKENS) //=> 'tokens' console.log(Mode.REACT) //=> 'react' console.log(Mode.VUE) //=> 'vue' ``` -"Mode" enables you to import markdown file in various formats (HTML, ToC, React/Vue Component) +"Mode" enables you to import markdown file in various formats (HTML, ToC, Tokens, React/Vue Component) #### `Mode.HTML` @@ -216,6 +217,31 @@ export default { +#### `Mode.TOKENS` + +
+ Import as parsed markdown tokens from MarkdownIt + +```md +# vite + +Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. + +## Status + +## Getting Started + +# Notes +``` + +```ts +import { tokens } from './contents/the-doc.md' + +console.log(tokens) //=> [{ type: 'heading_open', tag: 'h1', ... }, ...] +``` + +
+ ### Type declarations In TypeScript project, need to declare typedefs for `.md` file as you need. @@ -231,6 +257,10 @@ declare module '*.md' { // When "Mode.HTML" is requested const html: string; + // When "Mode.Tokens" is requested + import Token from 'markdown-it/lib/token' + const tokens: Token[]; + // When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }> import React from 'react' const ReactComponent: React.VFC; @@ -241,7 +271,7 @@ declare module '*.md' { const VueComponentWith: (components: Record) => ComponentOptions; // Modify below per your usage - export { attributes, toc, html, ReactComponent, VueComponent, VueComponentWith }; + export { attributes, toc, html, tokens, ReactComponent, VueComponent, VueComponentWith }; } ``` diff --git a/src/index.ts b/src/index.ts index 2b18b0f..13260c7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ import { Element, Node as DomHandlerNode } from 'domhandler' export enum Mode { TOC = 'toc', HTML = 'html', + TOKENS = 'tokens', REACT = 'react', VUE = 'vue', } @@ -56,7 +57,8 @@ const tf = (code: string, id: string, options: PluginOptions): TransformResult = content.addContext(`const attributes = ${JSON.stringify(fm.attributes)}`) content.addExporting('attributes') - const html = markdownCompiler(options).render(fm.body) + const compiler = markdownCompiler(options) + const html = compiler.render(fm.body) if (options.mode?.includes(Mode.HTML)) { content.addContext(`const html = ${JSON.stringify(html)}`) content.addExporting('html') @@ -77,6 +79,12 @@ const tf = (code: string, id: string, options: PluginOptions): TransformResult = content.addExporting('toc') } + if (options.mode?.includes(Mode.TOKENS) && compiler instanceof MarkdownIt) { + const tokens = compiler.parse(fm.body, {}) + content.addContext(`const tokens = ${JSON.stringify(tokens)}`) + content.addExporting('tokens') + } + if (options.mode?.includes(Mode.REACT)) { const root = parseDOM(html, { lowerCaseTags: false }) const subComponentNamespace = 'SubReactComponent' From 5fdb147043efa0e09be69d5b0cafecb24ee5e4d1 Mon Sep 17 00:00:00 2001 From: Levy Barbosa Date: Sat, 6 Aug 2022 13:30:21 -0300 Subject: [PATCH 2/3] fix when using custom markdownIt instance --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 13260c7..f6d4a15 100644 --- a/src/index.ts +++ b/src/index.ts @@ -79,7 +79,7 @@ const tf = (code: string, id: string, options: PluginOptions): TransformResult = content.addExporting('toc') } - if (options.mode?.includes(Mode.TOKENS) && compiler instanceof MarkdownIt) { + if (options.mode?.includes(Mode.TOKENS) && 'parse' in compiler) { const tokens = compiler.parse(fm.body, {}) content.addContext(`const tokens = ${JSON.stringify(tokens)}`) content.addExporting('tokens') From 79ec698c74184ce2d4fecf8849726ecb5aae3f14 Mon Sep 17 00:00:00 2001 From: Levy Barbosa Date: Sat, 6 Aug 2022 13:54:08 -0300 Subject: [PATCH 3/3] updated type declarations guide in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0186504..0d429b9 100644 --- a/README.md +++ b/README.md @@ -258,7 +258,7 @@ declare module '*.md' { const html: string; // When "Mode.Tokens" is requested - import Token from 'markdown-it/lib/token' + import Token from '@types/markdown-it/lib/token'; const tokens: Token[]; // When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }>