choojs / bankai Goto Github PK
View Code? Open in Web Editor NEW:station: - friendly web compiler
License: Apache License 2.0
:station: - friendly web compiler
License: Apache License 2.0
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?
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
I want to plug in https://github.com/traducer/browserify-livereload but don't see an easy way to get options to watchify.
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).
having one would be grand
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
As titled, the browser complains that it can't load livereload.js
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)
The command should be able to guess if the user have configured browserify on the package.json file and use those by default.
--- 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])
The --help
option has disappeared.
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.
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)
choojs/choo#73 was tripping up; look into why this happens and at the very least document this behavior
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 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!
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!
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.
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 }
`
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)
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?
Hooks are already in place in html, should probably add to sheetify hooks to send a msg when updated
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.
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)
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.
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.
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)
I notice that unless I use the --entry
option, bankai uses the main
field from package.json for the entry module.
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
Just FYI, const entry = ['.', '/'].includes(first)
throws an error on includes
as it's an ES6 feature
CSS and HTML options are no longer passed on from bankai start
and CSS options are no longer passed on to sheetify from bankai.
https://webpack.js.org/configuration/performance/ - pretty neat; probably requires us to improve the logger first tho
It's probably good to include it by default
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.
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:
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
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.
should wrap this https://github.com/chinedufn/hot-app-replacement by @chinedufn
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
?
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
?
might be good to add that too; just a static file that's served. Black hex would be rad I reckon
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.
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
[sww@figure8 tmp]$ bankai -h
/home/sww/.npm-global/lib/node_modules/bankai/node_modules/resolve/lib/sync.js:39
throw err;
^
Error: Cannot find module './index.js' from '/tmp'
at Function.module.exports [as sync] (/home/sww/.npm-global/lib/node_modules/bankai/node_modules/resolve/lib/sync.js:37:15)
at main (/home/sww/.npm-global/lib/node_modules/bankai/bin.js:82:23)
at Object.<anonymous> (/home/sww/.npm-global/lib/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:420:7)
[sww@figure8 tmp]$ touch index.js
[sww@figure8 tmp]$ bankai -h
Usage:
$ bankai <command> [options]
...
# 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
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!
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.
should probs have those using exorcist and a separate method to serve em
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:
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
choo
router to static htmlcc/ @toddself @kristoferjoseph think this might be of interest for y'all; input would be v welcome!
Steps to reproduce:
Create a blank project using bankai
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.