Releases: hmsk/frontmatter-markdown-loader
Releases · hmsk/frontmatter-markdown-loader
v3.0.0: Assets Transformation for vue.*
Assets paths in markdown body will be transformed
<img src="./img/something.png" />
➡ <img src=require("./img/something.png") />
This matches the default behavior of vue-loader
. So this change will support Nuxt's home alias like ~/assets/image.png
naturally.
Breaking Changes
Relative path on assets attributes on Markdown body will be replaced with require(attributeValue)
video
element:src
,poster
attributesource
element:src
attributeimg
element:src
attributeimage
element:xlink:href
,href
attributeuse
element:xlink:href
,href
attribute
Custom element should have "closing tag" (or close itself) always
<child-element>
(without closing tag) shoul be updated to <child-element />
vue.render
, vue.staticRenderFns
return function instead of source string
import fm from "something.md"
import OtherComponent from "OtherComponent.vue"
export default {
data () {
return {
templateRender: null
}
},
components: {
OtherComponent // If markdown has `<other-component>` in body, will work :)
},
render (createElement) {
return this.templateRender ? this.templateRender() : createElement("div", "Rendering");
},
created () {
- this.templateRender = new Function(fm.vue.render)();
- this.$options.staticRenderFns = new Function(fm.vue.staticRenderFns)()
+ this.templateRender = fm.vue.render;
+ this.$options.staticRenderFns = fm.vue.staticRenderFns;
}
}
See migration guide: https://hmsk.github.io/frontmatter-markdown-loader/migration.html#migrate-to-3
Other Changes
- Update devDependencies
v3.0.0-2
- Accept
vue.transformAssetUrls: false
to disable transformation - Update docs for release
v3.0.0-1
- Accept
vue.transformAssetUrls
option to configure
v3.0.0-0
v2.3.0: Renderable React Component
Import markdown, render as React component 👾
Mode.REACT
requests to get function which renders React component.
{
test: /\.md$/,
loader: 'frontmatter-markdown-loader'
options: {
mode: [Mode.REACT]
}
}
import React from 'react'
import { react as Sample } from './sample.md' // <-- THIS
export default function OneComponent() {
return (
<div>
<h1>Content</h1>
<Sample /> <!-- This renders compiled markdown! -->
</div>
);
}
The React component can take prop for components on markdown 🔮
---
title: A frontmatter
description: Having ExternalComponent on the content
---
Hi, I'm a component. <MyDecorator>Apparently, this sentence will be made bold and italic</MyDecorator>
import React from 'react'
import { react as Sample } from './sample.md'
export default function DecoratedMarkdown() {
const BoldAndItalic = ({children}) => <strong><i>{children}</i></strong>
return (
<div>
<h1>Content</h1>
<Sample MyDecorator={BoldAndItalic} />
</div>
);
}
Other Changes
- Update devDependencies
- Add optionalDependencies for React
- Start funding on https://www.buymeacoffee.com/hmsk
v2.3.0 beta 0
- Add "react-component" mode #69
- Importing
.md
returnsreact
property which is renderable React component
- Importing
v2.2.0: Support configuration for markdown-it
- Support
markdownIt
option to configuremarkdown-it
or giving an instance ofmarkdown-it
renderer - Update devDependencies
Special Thanks
v2.1.0
- Update dependency:
markdown-it
9 -> 10
v2.0.0: Selective Import
- Save importing size as much as possible by introducing selective options
- The whole documentation is moved to
/doc
and deployed to the page
Breaking Changes
See the migration guide: https://hmsk.github.io/frontmatter-markdown-loader/migration.html
Introduce options.mode
- On the default, doesn't return
body
vue: true
is replaced withVUE_COMPONENT
mode,VUE_RENDER_FUNCTIONS
mode
Refer https://hmsk.github.io/frontmatter-markdown-loader/options.html#mode to understand each mode.
Move attributes._meta
- To
meta
on the top level META
mode should be enabled to import
Commits from v1.8.0
v2.0.0 beta 1
- Stop exporting multiple members Webpack doesn't expect that 902bc12