[feature] plugins

[yoshuawuyts]

Was thinking of some stuff I'd like bankai to do, and then realized it might get too bloaty. Instead having a plugin system might perhaps help. Is it great? Nah. But it's probably the lesser of a bunch of evils.

I think we could probably learn from browserify's plugin architecture because it's super solid. I don't think transforms make a lot of sense for us here because it could refer to either JS, CSS or HTML which already have specific transforms available (html not so much, but yeah).

I was thinking in package.json people could do something like:

{
  "bankai": {
    "plugin": [
      "server-render/plugin"
    ]
  }
}

Or from the CLI:

$ bankai -p server-render/plugin

plugin examples

• compile all routes in the choo router to static html
• module split on a per-route basis
• inline all JS and CSS into the HTML (goes nicely with the two points above)
• perhaps doing performance budgets is like cool (e.g. Performance budgets #126)
• optimize and or compile particular assets (e.g. [feature] svg workflow #104)
• use packages like purifycss which require knowledge of multiple resource types (e.g. JS and CSS in this case)

todo

• figure out if this is actually the best way to approach the problem
• come up with a JS API for the plugins
• create example implementation for some existing things

cc/ @toddself @kristoferjoseph think this might be of interest for y'all; input would be v welcome!

[yoshuawuyts]

Another cool plugin idea: https://github.com/mafintosh/browser-sync-stream - goes esp. well with offline apps I think

[yoshuawuyts]

And more codesplitting stuff https://github.com/GoogleChrome/preload-webpack-plugin

[yoshuawuyts]

I'm sensing https://github.com/yoshuawuyts/nanostack might be a good option to add - but yeah unsure

[yoshuawuyts]

Can't help but have the feeling we're recreating gulp; but this my best guess at doing a plugin system ghmmm

// single input with transform
var bankai = require('bankai')
var assets = bankai('index.js')
assets.transform(purifyCss()) // optimizes CSS based on HTML, JS
var b = assets.bundle()

b.js().pipe(process.stdout)
b.css().pipe(process.stdout)
b.html().pipe(process.stdout)

// multi JS input
//
// if there's multiple files of the same type, you need to specify which stream
// you're creating
var bankai = require('bankai')
var assets = bankai(['index.js', 'outdex.js'])
assets.transform()
var b = assets.bundle()

b.js('index').pipe(process.stdout)
b.js('outdex').pipe(process.stdout)
b.js('common').pipe(process.stdout)
b.css().pipe(process.stdout)
b.html().pipe(process.stdout)

// render JS to HTML
// is a plugin b/c it needs to change single HTML file to multiple HTML files.
// We wanna copy the labeled-stream-splicer approach browserify has (TBI, lots
// of details here)
var bankai = require('bankai')
var assets = bankai('index.js')
assets.plugin(renderHTMLOnServerSomehow())
var b = assets.bundle()

b.js().pipe(process.stdout)
b.css().pipe(process.stdout)
b.html('/').pipe(process.stdout)
b.html('/mainView').pipe(process.stdout)
b.html('/:otherView').pipe(process.stdout)
b.html('/:and/:another/:one').pipe(process.stdout)

[okdistribute]

What is the purpose behind b.html('/mainView').pipe(process.stdout)? This is a router?

[yoshuawuyts]

@Karissa it's to select one of many files - in this case renderHTMLOnServerSomehow() creates a file for each route passed, which is then added to html.

[toddself]

to summarize from irc: i'm not sure bankai needs a plugin system. Sometimes bloat on a developer tool is OK since it takes away the paralysis of choice (eg: standard, tap). Install size is partially irrelevant (or you wouldn't use it, or you can install it globally), and if you aren't using something that comes with it, you're not increasing my cognitive load for using the product (again, tap comes with a TON of shit I couldn't care less about but I don't really care...)

[yoshuawuyts]

very good point - closing for now!