choojs / bankai Goto Github PK

We need to better communicate intent here-o

18:13 <yoshuawuyts> maxogden: biggest difference is built-in sheetify, and it being usable as a library which is cool for in-process Electron compiling
18:15 <maxogden> yoshuawuyts: api looks like web framework, which isnt bad pe rse, just should be clear in the readme its a web framework etc
18:16 <yoshuawuyts> maxogden: ah ok, so "it's fine as long as you document it well enough"
18:17 <maxogden> yoshuawuyts: yea like reading the api you have i got the feeling i get when i read a new web framework and have no idea what the apis are supposed to mean cause apis are a bad way to get at the intent of a complicated set of actions
18:17 <yoshuawuyts> maxogden: ah yeah, that's good feedback

Thanks for the tool! Stumbled into an error:

~/ bankai start
/usr/local/lib/node_modules/bankai/bin/start.js:59
    const route = opts.html.entry || '/bundle.js'
    ^

SyntaxError: Identifier 'route' has already been declared
    at start (/usr/local/lib/node_modules/bankai/bin/start.js:27:16)
    at main (/usr/local/lib/node_modules/bankai/bin/index.js:143:3)
    at Object.<anonymous> (/usr/local/lib/node_modules/bankai/bin/index.js:146:1)

Hi all,

First of I would say that I am really fond of your project and I just want to make a contribution to make it better. :)

I found out while integrating bankai in my codebase that in the current README there is a tricky error in the proposed code:

var bankai = require('bankai')
var http = require('http')
var path = require('path')

var clientPath = path.join(__dirname, 'client.js')
var assets = bankai(clientPath)

http.createServer((req, res) => {
  switch (req.url) {
    case '/': return assets.html(req, res).pipe(res)
    case '/bundle.js': return assets.js(req, res).pipe(res)
    case '/bundle.css': return assets.css(req, res).pipe(res)
    default: return (res.statusCode = 404 && res.end('404 not found'))
  }
}).listen(8080)

In the default clause, the && operator has precedence on the = operator[1], so in fact the value stored in res.statusCode is not 404 but true. The fact that res.statusCode store the value true make the response come with a 200 status code, which is not the expected behavior.

To make it more explicit, the following line:

    default: return (res.statusCode = 404 && res.end('404 not found'))

is equivalent with explicit parentheses to

    default: return (res.statusCode = (404 && res.end('404 not found')))

Which store true into res.statusCode.

So the line should be fixed with explicit parentheses as such:

    default: return (res.statusCode = 404) && res.end('404 not found')

Sorry for not making a pull request, but I do think the matter is too small that it would need such.

It's probably good to include it by default

Steps to reproduce:

1. Create a blank project using bankai

2. For your client.js code, simply add the following lines:

var foo = `bar`
var func = (args) => console.log

Expected results
Should be no error

Actual results
the node instance blows up and appears that uglifyjs is parsing with es5 rules.

some notes/findings:
Using babelify, es2020 do not work

When trying to use those as transforms in package.json or passed into browserify using the js property you get another error stating that the path to client.js cannot be found. If you disable yoyoify you then get the same damn uglifyjs error anyway. I think that the transforms might not be called in the correct order, but I am not sure.

yoyoify transpiles backticks if you use them with bel/yo/choo - Optimize will not fail if you are using template tag strings that are passed in to bel/yo/choo - but that is the only case. using fat arrow functions though will not work at all.

Suggested fix
Let developers overload js or optimize and have the ability to explicitly use different transforms when optimize is true. this could be messy but this would add some flexibility.

Or maybe ditch the uglifyjs transform all together and just pipe the finished browserify stream to uglifyjs when everything is done?? idk if that will work but right now I'm just not sure how to get this to work other than to use es5 only which makes me sad.

See also: mishoo/UglifyJS#1411

Im having some issues figuring out how to port over an older bankai app to using 5.0.0 with the current set of docs.

How would I port over the following?

var bankai = require('bankai')()
var browserify = require('browserify')
var staticClient = require('./client/app')
var js = bankai.js(browserify, require.resolve('./client'), {debug: true})
var html = bankai.html({ favicon: false, css: false })

(from https://github.com/bcomnes/hyperblog/blob/master/index.js)

README should also probably link to the full set of possible options for css, js and html, as well as include some of the more common options.

having one would be grand

It would be fun to have logging like budo. Would you accept a PR to add https://github.com/mattdesl/garnish logging to the CLI?

the <script async> tag is neat, if we have it in the <head> element we can remove the nanomount code from choo (which would be greattt)

• ref sethvincent/create-html#4

In this case I was trying to serve bunny.png from the current directory. The process crashes with the following after the request for /bunny.png is received. This is a regression from 5.4.0 -- I downgraded to that for now, which seems to work fine.

[sww@figure8 BoardingAction]$ bankai -a . game.js
17:48:25 ✨  bankai Started for game.js on http://localhost:8080
17:48:25 ✨  http req /
17:48:25 ✨  http res / GET:200 46ms 242B
17:48:25 ✨  http req /bundle.css
17:48:26 ✨  http req /bundle.js
17:48:36 ✨  http res /bundle.css GET:200 10954ms
17:48:36 ✨  http res /bundle.js GET:200 10965ms 1.3 MB
17:48:38 ✨  http req /bunny.png
/home/sww/.npm-global/lib/node_modules/bankai/node_modules/send/index.js:873
  if (this._acceptRanges && !res.getHeader('Accept-Ranges')) {
                                 ^

TypeError: res.getHeader is not a function
    at SendStream.setHeader (/home/sww/.npm-global/lib/node_modules/bankai/node_modules/send/index.js:873:34)
    at SendStream.send (/home/sww/.npm-global/lib/node_modules/bankai/node_modules/send/index.js:632:8)
    at onstat (/home/sww/.npm-global/lib/node_modules/bankai/node_modules/send/index.js:737:10)
    at FSReqWrap.oncomplete (fs.js:112:15)

CSS and HTML options are no longer passed on from bankai start and CSS options are no longer passed on to sheetify from bankai.

As per choojs/choo#444 (woot, triples!) we should probably be running envify to do the process.env.NODE_ENV stuff for --optimize. I think this should be fairly similar to other transforms. Happy to help if someone wants to pick this up!

taking choo's minimal example and changing the view to read

function mainView (state, emit) {
  var onclick = () => emit('increment', 1)

  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onclick}>Increment</button>
    </body>
  `
}

and running bankai build index ./target produces an unexpected token: punc ()) error with bankai 7.0.0, but works fine with bankai 6.1.1.

The --help option has disappeared.

https://webpack.js.org/configuration/performance/ - pretty neat; probably requires us to improve the logger first tho

would be cool to be able to put installify in the repo and like have auto installs all over the place. Yeah that'd be cool C:

• https://github.com/hughsk/installify

Hooks are already in place in html, should probably add to sheetify hooks to send a msg when updated

Currently, you must register css before js, but register js before outputting css. What if everything is registered in the bankai constructor? it would return an assets object with registered html, js, css methods. The order of registration would thus be abstracted.

As titled, the browser complains that it can't load livereload.js

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. #126)
• optimize and or compile particular assets (e.g. #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!

was hoping this would remove the peer dep issue but somehow css-extract is not kicking in in time to strip out all the sheetify/insert calls hmmmmm

Deps such as get-server-port are in devDependencies and aren't installed via npm install -g bankai. I think browserify too, but gotta run!

choojs/choo#73 was tripping up; look into why this happens and at the very least document this behavior

As per dat-ecosystem-archive/dat-desktop#189 there's a bunch of stuff that must be disabled to bundle for electron compat; might be worth adding a flag for that so boilerplate can be evaded.

should wrap this https://github.com/chinedufn/hot-app-replacement by @chinedufn

On a project that already have browserify transforms in the browserify field of package.json, it would be cool to not have to type them all on the bankai start cli command as --js.transform... (And maybe to bankai build as well)

Expected behavior:

The command should be able to guess if the user have configured browserify on the package.json file and use those by default.

Ugly patch for start.js:

--- left
+++ right
@@ -55,6 +55,10 @@
   }

   if (opts.js) {
+    try {
+      const pkgOpt = require(cwd + '/package.json').browserify;
+      opts.js = xtend(opts.js, pkgOpt);
+    } catch (e) {};
     const js = bankai.js(browserify, entryFile, opts.js)
     const route = opts.html.entry || '/bundle.js'
     routes.push([route, js])

# doesn't work
$ bankai --js [ -t brfs ] index.js

# this does
$ bankai --js [ --transform brfs ] index.js

we probs need to preparse the arguments and expand them - quite sure we can copy the aliases from the browserify code since it's v v stable - probs also need to do this for sheetify

should probs have those using exorcist and a separate method to serve em

subarg doesn't seem to process multiple arguments:

node_modules/.bin/bankai comparator.js --uglify=false
i have argv { _: [ 'start', 'comparator.js' ],
  watch: false,
  w: false,
  verbose: false,
  V: false,
  help: false,
  h: false,
  version: false,
  v: false,
  debug: false,
  d: false,
  electron: false,
  e: false,
  uglify: false,
  u: false,
  address: 'localhost',
  A: 'localhost',
  assets: 'assets',
  a: 'assets',
  open: false,
  o: false,
  port: 8080,
  p: 8080 }
opts uglify is false

vs

node_modules/.bin/bankai comparator.js -w -o --uglify=false

i have argv { _: [ 'start', 'comparator.js' ],
  watch: true,
  w: true,
  verbose: false,
  V: false,
  help: false,
  h: false,
  version: false,
  v: false,
  debug: false,
  d: false,
  electron: false,
  e: false,
  uglify: true,
  u: true,
  o: false,
  open: false,
  address: 'localhost',
  A: 'localhost',
  assets: 'assets',
  a: 'assets',
  port: 8080,
  p: 8080 }
opts uglify is true

hey, so this has come up for me a few times, most recently when i used ngraph.pixel/lib/tooltip.js#L12.

basically, if any code uses insert-css in a way that isn't naively statically analyzable (if it uses a variable defined elsewhere, even if it's not dynamic), bankai removes the insertCss = require('insert-css') but leaves the expression using insertCss that it couldn't analyze.

leaving this issue here because it happens when i use bankai, even though i'm guessing it's css-extract's fault.

move from .on('bundle') to .on('write'); makes it so bundles aren't reloaded until everything is done. Ref dat-ecosystem-archive/dat-desktop#313 (review)

Budo lets you use --css styles.css to pipe in a stylesheet for those not bought into the CSS-in-JS idea. Is there a way to do this with bankai?

This might be an issue with sheetify or css-extract rather than bankai, but I've noticed that you can't do the following on a bankai server:

const insertCSS = require('insert-css')
insertCSS('html, body { height: 100%; }')

The page will throw an error that insertCSS is not defined. I believe it's because the browserify transform that bankai runs removes all require('insert-css') references. It does work if I do it on the same line:

require('insert-css')('html, body { height: 100%; }')

Which seems to support the theory.

I'd like to suggest changing the --optimize flag to another word so that we can use -o for the output path in the build tool just like browserify offers. Perhaps --production?

It'd be fun if we could inline critical CSS into each HTML document we create. I've taken a good look (read: gone through the source) of a fair number of packages that do this, and it seems the right approach is to use phantomJS to figure out what's critical.

I'd love to use an existing package, but unfortunately none live up to the standards I'm holding for this repo (e.g. doing async IO). So we'll have to write our own.

For whoever's interested in doing this, I can recommend reading the source in https://github.com/pocketjoso/penthouse/blob/master/lib/index.js - most packages indirectly depend on Penthouse, and in turn the core of what they do is basically instrumenting PhantomJS.

I think with a few hours of adapting we should be there. The API I'd like to see for this would be:

var critical = require('<our package>')
var fs = require('fs')

var html = fs.readFileSync(__dirname + 'index.html')
var css = fs.readFileSync(__dirname + 'bundle.css')

// with opts
var opts = { height: 900, width: 1300 } // default viewport arguments
critical(html, css, opts, function (err, criticalCss) {
  console.log(criticalCss)
})

// without opts
critical(html, css, function (err, criticalCss) {
  console.log(criticalCss)
})

That's all we need. From there we can do the inlining ourselves using hyperstream. No need to extract from the existing CSS, I'm not sure how good of an idea it is in the first place, but it's definitely a different concern. Also no need to minify, there's minifiers for that purpose.

I hope this makes sense!

See Also

• https://github.com/pagespeed/ngx_pagespeed
• https://github.com/pocketjoso/penthouse

This is a litle feature request, but maybe is an edge case. The thing is that listening on localhost works fine for most cases, but in my case, I'm developing on a cloud ide (c9.io) and I can run almost anything with the litle condition that it must be run on 0.0.0.0:8080 and not localhost:8080. So, running bankai start -p 8080 is crashing.
So, would it be posible to pass an option to bankai cli to configure the host? what would be a good option, since -h and -H are already taken? Maybe -a for --address?

Source maps make it much easier to debug. Happy to pitch in on this but wanted to check first in case it was intentionally excluded.

Wondering what is the best approach for serving fonts with bankai. Has anyone tried doing this yet?

Experimenting with sheetify and font-awesome for now.

I notice that unless I use the --entry option, bankai uses the main field from package.json for the entry module.

Used watchify again for the first time in a while; they got a cool incremental rebuild reporting going on:

It looks like the lolsemicolon is for some reason not being placed correctly after running css-extract on it. Definitely a regression somewhere. Tried debugging it and not entirely sure what's wrong. Help is welcome; either fixes or trying out the repro:

// so the problem is that css is transformed to ((/* code */)) and that's interpreted as
// a function call. Instead it should become ;((/* code */)). Lol semicolons
var css = require('sheetify')

function () {console.log('I should not be called')}

css`
  .foo { color: blue }
`

Is it required in order to avoid peer dependencies or something? Seems like a rare case someone would want to pass anything other than browserify (not even sure what else you could pass).

When using sheetify styling and providing a bundle.css viabundle.css the resulting CSS is embedded twice. Once as extracted css via bundle.css and a second time via an insert-css call.

This appears to be solved when stackcss/css-extract#6 lands

I want to plug in https://github.com/traducer/browserify-livereload but don't see an easy way to get options to watchify.

Just FYI, const entry = ['.', '/'].includes(first) throws an error on includes as it's an ES6 feature

might be good to add that too; just a static file that's served. Black hex would be rad I reckon

We could maybs add a way to properly handle svg icons, e.g. as per https://www.sitepoint.com/a-working-svg-workflow-for-accessible-icons/

We'd then probably need to use something like:

• https://github.com/edenspiekermann/sprite.sh
• https://github.com/svg/svgo

Is this a good idea? I do think there's a need for this, as using svgs in projects is fairly common - anything we can do to help with that in a clean way is probably worth our efforts

It appears bankai.js(browserify, './src/index.js') throws an error Cannot find module './src/index.js'. It only works when I give it the full path, /Users/tim/...etc. I think this is because of require.resolve on this line. Not very familiar with resolve but would path.resolve be a better fit perhaps? Or am I just using it incorrectly?

When using nvm, when I try to run bankai from my ./node_modules/.bin folder (ie. when installed as a local dev dependency) or from an npm run <script> I get this error:

$ ./node_modules/.bin/bankai
/Users/eugeneware/Dropbox/work/scratch/choo-incdec/node_modules/resolve/lib/sync.js:33
    throw new Error("Cannot find module '" + x + "' from '" + y + "'");
    ^

Error: Cannot find module './index.js' from '/Users/eugeneware/Dropbox/work/scratch/choo-incdec'
    at Function.module.exports [as sync] (/Users/eugeneware/Dropbox/work/scratch/choo-incdec/node_modules/resolve/lib/sync.js:33:11)
    at main (/Users/eugeneware/Dropbox/work/scratch/choo-incdec/node_modules/bankai/bin.js:82:23)
    at Object.<anonymous> (/Users/eugeneware/Dropbox/work/scratch/choo-incdec/node_modules/bankai/bin.js:73:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:425:7)

I've tested this in linux and mac OS X. I'm running node v7.7.7, but it seems to happen on earlier version of node. I'm running npm v4.1.2.