jstransformer

jstransformer copied to clipboard

I put together a Metalsmith plugin to use JSTransformer, and thought it would be a good idea to have a list of potential ideas for other integration points with external systems to help encourage collaboration. Feel free to edit this list and add any other ideas.

• [x] Jade - Put together a Jade filter
• [x] Metalsmith - metalsmith-jstransformer
• [ ] Grunt - Plugin to process files through JSTransformers
• [x] Gulp - Plugin to process streams through JSTransformers http://github.com/jstransformers/gulp-jstransformer
• [ ] Duo - plugin for DuoJS
• [ ] koa ?
• [ ] connect ?
• [ ] DocPad - Plugin to process files with JSTransformers
• [ ] browserify - plugin to inline the results of calls to jstransformer methods where the args are constants Should some of these live in the jstransformers org? I could move metalsmith in.
• [x] PHP Port - PHPTransformers
• [x] Webpack jstransformer-loader
• [ ] Fly Build System
• [ ] Cha task chaining
• [x] start task
• [ ] rollup plugin

Should some of these live in the jstransformers org?

yea, I think it should.

Yesterday I thought for something like jstransformer-duo and jstransformer-gulp, but Im not sure what is my exact idea, lol.

But your ideas SG2M and easy to be done.

Also maybe as koa plugin? hmm. I'll think of it when free my mind.

btw, also just popped up in my mind, something called "jstemplates" or "jsengines" or somthing else (names welcome, i thought of it to be org) which will be on top of jstransformer to normalize API for benchmarks. because template-benchmark is out-of-date and there we have dozens of template engines to be tested against some real world use cases and benchmarks

@RobLoach said:

• [ ] Jade - Put together a Jade filter

We are planning on completely switching to jstransformers in Jade, so:

:supermarked
  ## Heading 2

will be mapped to

var name = 'supermarked'
require('jstransformers')(require('jstransformer-' + name)).render(text).body

or something like that.

@ForbesLindesay should be able to tell you more about Jade integration.

Yes, jade will have full built in support for jstransformers. See https://github.com/jadejs/jade/pull/1928 for approximately how this will be implemented.

I've added browserify to the list.

I've added browserify to the list. - @ForbesLindesay

jstransformify is okey?

@tunnckoCore https://github.com/andreypopp/jstransformify

jstransformerify?

haha... probably :D

I just added rollup plugin and task for Start Runner bullets.

https://github.com/tunnckoCore/start-jstransformer is started

Btw, reminder (at least for me). Rollup plugin would be awesome. Don't know if you thought for it, but we can use inputformat-to-jstransformer to load different kind of sources - won't be needed "loaders" and etc.. we already have huge database of "loaders" :)) So it would look like more awesome Webpack haha.

just dream

rollup({
  plugins: [
    jstransformer.css({
      extensions: ['.css', '.sss'],
      transform: [
        ['stylus', {
          some: 'options'
        }],
        ['postcss', {
          plugins: [cssnext()]
          // or
          // plugins: ['cssnext']
          // or
          // plugins: ['cssnext', {options: 'to cssnext'}]
        }],
        ['stylelint', {
          foo: 'bar'
        }]
        'cssnano'
      ]
    }),
    jstransformer.html({
      extensions: ['.html', '.hbs', '.pug', '.vue'],
      transform: [
        ['pug', { some: 'opts' }],
        'handlebars',
        ['vue', {
          some: 'awesome',
          opts: 'here'
        }]
      ]
    })
  ]
})

browserify style transform resolving is awesome. Feels and looks fantastic, and is very inspiring.

:+1:

accidentally made rollup-plugin-jstransformer, because I'm playing, haha:

function jstransformer (opts) {
  const filter = createFilter(opts.include, opts.exclude, opts)

  return {
    name: 'jstransformer',
    transform (code, id) {
      if (!filter(id)) {
        return null
      }

      return new Promise((resolve) => {
        JSTransformer.renderAsync(code, {
          engine: opts.engine
        }, opts.locals).then((result) => {
          resolve({
            code: `export default ${JSON.stringify(result.body)};`,
            map: result.map || { mappings: '' }
          })
        })
      })
    }
  }
}

where createFilter can be from rollup-pluginutils or

const path = require('path')
const micromatch = require('micromatch')

const arrayify = (val) => {
  if (!val) return []
  if (Array.isArray(val)) return val
  return [val]
}

const createFilter = (include, exclude, options) => (id) => {
  if (typeof id !== 'string') return false
  if (/\0/.test(id)) return false

  const fn = (pattern) => path.resolve(pattern)
  include = arrayify(include).map(fn)
  exclude = arrayify(exclude).map(fn)

  options = Object.assign({ ignore: exclude }, options)
  return micromatch(id, include, options).length > 0
}

it is working and uses micromatch better as v2 of pluginutils (suggested by me). I'm thinking to extract it to rollup-create-filter

usage

const jstransformer = require('rollup-plugin-jstransformer')
module.exports = {
  plugins: [
    jstransformer({
      engine: 'handlebars',
      locals: { adjective: 'cool' },
      include: './src/components/Test2.html'
    })
  ]
}

:+1: