flexible content transform for reshape
npm install reshape-content
Flexible content transform for reshape
> Note: This project is in early development, and versioning is a little different. Read this for more details.
Rather than having a separate plugin for each kind of content transform you want to be able to do, why not just have one? Parse natural language, markdown, or whatever else you want with a minimalistic and simple interface 🍻
``bash`
npm i reshape-content --save
> Note: This project is compatible with node v6+ only
Start with some html you want to transform in some way. Add attributes of your choosing to an element that has contents you want to transform, and they will be transformed in that order.
` Please use windows 98html`
Now pass in an object to reshape-content. Each key in the object represents an attribute that will be searched for in the html. The value is a function that will get that element's contents as a string, and replace the contents with whatever string is returned from the function.
`js
const content = require('reshape-content')({
windoge: (str) => str.replace(/windows/g, 'winDOGE')
})
reshape({ plugins: content })
.process(html)
.then((res) => res.output())
`
The plugin will remove the custom attributes from the element and replace its contents with your transformed version. Wow!
` Please use winDOGE 98html`
If you return an A+ compliant promise from your content function, it will resolve and work in your templates as well.
You can use external libraries for this as well, no problem. Just make sure you are passing in a function that takes a string and returns a string. You might have to wrap the library function if it doesn't behave like this, but it will work with anything that transforms content.
#### Markdown
` Wow, it's Markdown!html`
`js
const markdown = require('markdown-it')(/ options /)
const content = require('reshape-content')({
md: (md) => markdown.render(md)
})
reshape({ plugins: content })
.process(html)
.then((res) => res.output())
`
` Wow, it's Markdown!html`
#### PostCSS
`sugarss`
`js
const postcss = require('postcss')([ require('postcss-nested')() ])
const options = { parser: require('sugarss'), map: false }
const content = require('reshape-content')({
postcss: (css) => postcss.process(css, options).css
})
reshape({ plugins: content })
.process(html)
.then((res) => res.output())
`
`html`
#### Babel
`html`
`js
const babel = require('babel-core')
const options = { presets: ["es2015"], sourceMaps: false }
const content = require('reshape-content')({
babel: (js) => babel.transform(js, options).code
})
reshape({ plugins: content })
.process(html)
.then((res) => res.output())
`
`html`
#### Return a Promise
`sugarss`
`js
const postcss = require('postcss')([ require('postcss-nested')() ])
const options = { parser: require('sugarss'), map: false }
const content = require('reshape-content')({
postcss: (css) => {
return postcss.process(css, options).then((res) => res.css)
}
})
reshape({ plugins: content })
.process(html)
.then((res) => res.output())
``
- Licensed under MIT
- Details on running tests and contributing can be found here