{"id":13431283,"url":"https://github.com/choojs/bankai","last_synced_at":"2025-05-15T10:07:17.645Z","repository":{"id":3125494,"uuid":"48496835","full_name":"choojs/bankai","owner":"choojs","description":":station: - friendly web compiler","archived":false,"fork":false,"pushed_at":"2022-05-19T12:03:36.000Z","size":1799,"stargazers_count":1088,"open_issues_count":56,"forks_count":78,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-15T10:06:36.434Z","etag":null,"topics":["assets","browserify","compile","css","css-in-js","modular","server","sheetify"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/choojs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-23T15:15:33.000Z","updated_at":"2025-05-12T14:12:14.000Z","dependencies_parsed_at":"2022-08-25T18:31:09.011Z","dependency_job_id":null,"html_url":"https://github.com/choojs/bankai","commit_stats":null,"previous_names":["yoshuawuyts/bankai"],"tags_count":115,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fbankai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fbankai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fbankai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fbankai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/choojs","download_url":"https://codeload.github.com/choojs/bankai/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319722,"owners_count":22051074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["assets","browserify","compile","css","css-in-js","modular","server","sheetify"],"created_at":"2024-07-31T02:01:01.909Z","updated_at":"2025-05-15T10:07:12.630Z","avatar_url":"https://github.com/choojs.png","language":"JavaScript","funding_links":["https://opencollective.com/choo"],"categories":["JavaScript","css"],"sub_categories":[],"readme":"# bankai\n[![npm version][2]][3] [![build status][4]][5]\n[![downloads][8]][9] [![js-standard-style][10]][11]\n\nThe easiest way to compile JavaScript, HTML and CSS.\n\nWe want people to have fun building things for the web. There should be no\nhurdles between a great idea, and your first prototype. And once you're ready,\nit should be easy to package it up and share it online. That's Bankai: a tool\nthat helps you build for the web. No configuration, and no hassle - that's our\npromise.\n\nIf this is your first time building something for the web, take a look at\n[choojs/create-choo-app](https://github.com/choojs/create-choo-app) to help get\na project setup from scratch :sparkles:.\n\n## Usage\n```txt\n  $ bankai \u003ccommand\u003e [entry] [options]\n\n  Commands:\n\n    build       compile all files to dist/\n    inspect     inspect the bundle dependencies\n    start       start a development server\n\n  Options:\n\n    -d, --debug       output lots of logs\n    -h, --help        print usage\n    -q, --quiet       don't output any logs\n    -v, --version     print version\n\n  Examples:\n\n    Start a development server\n    $ bankai start index.js\n\n    Visualize all dependencies in your project\n    $ bankai inspect index.js\n\n    Compile all files in the project to disk\n    $ bankai build index.js\n\n  Running into trouble? Feel free to file an issue:\n  https://github.com/choojs/bankai/issues/new\n\n  Do you enjoy using this software? Become a backer:\n  https://opencollective.com/choo\n```\n\n## ⚠️  HTTPS Instructions\nWhen you first open up your application in a browser, you'll probably see a\nwarning page about HTTPS connections being untrusted. No worries, this is\nentirely expected behavior. Follow the instructions below to solve this for\nyour browser.\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cb\u003eHow does this work?\u003c/b\u003e\n  \u003c/summary\u003e\n  For HTTPS to run on \u003ccode\u003elocalhost\u003c/code\u003e, we must sign a TLS certificate\n  locally. This is better known as a \"self-signed certificate\". Browsers\n  actively check for certificates from uknown providers, and warn you (for good\n  reason!) In our case, however, it's safe to ignore.\n\n  HTTPS is needed for an increasing amount of APIs to work in the browser. For\n  example if you want to test HTTP/2 connections or use parts of the storage\n  API, you have no choice but to use an HTTPS connection on localhost. That's\n  why we try and make this work as efficiently, and securely as possible.\n\n  We generate a unique certificate for each Bankai installation. This means\n  that you'll only need to trust an HTTPS certificate for Bankai once. This\n  should be secure from remote attackers, because unless they have successfully\n  acquired access to your machine's filesystem, they won't be able to replicate\n  the certificate.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cb\u003eFirefox Instructions\u003c/b\u003e\n  \u003c/summary\u003e\n  \u003ch3\u003eStep 1\u003c/h3\u003e\n\n  A wild security screen appears!. Click on \"advanced\".\n  \u003cimg src=\"/assets/firefox01.png\" alt=\"firefox01\"\u003e\n\n  \u003ch3\u003eStep 2\u003c/h3\u003e\n  More details emerge! Click on \"Add Exception\".\n  \u003cimg src=\"/assets/firefox02.png\" alt=\"firefox02\"\u003e\n\n  \u003ch3\u003eStep 3\u003c/h3\u003e\n  In the dropdown click \"Confirm Security Exception\".\n  \u003cimg src=\"/assets/firefox03.png\" alt=\"firefox03\"\u003e\n\n  \u003ch3\u003eStep 4\u003c/h3\u003e\n  Success!\n  \u003cimg src=\"/assets/firefox04.png\" alt=\"firefox04\"\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cb\u003eChrome Instructions\u003c/b\u003e\n  \u003c/summary\u003e\n  Click the \"more details\" dropdown, then click \"proceed\". Pull Request for\n  screenshots welcome!\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cb\u003eSafari Instructions\u003c/b\u003e\n  \u003c/summary\u003e\n  \u003ch3\u003eStep 1\u003c/h3\u003e\n  A wild security screen appears! Click \"Show Certificate\".\n  \u003cimg src=\"/assets/safari01.png\" alt=\"safari01\"\u003e\n\n  \u003ch3\u003eStep 2\u003c/h3\u003e\n  More details emerge! Check \"Always trust 'localhost'…\".\n  \u003cimg src=\"/assets/safari02.png\" alt=\"safari02\"\u003e\n\n  \u003ch3\u003eStep 3\u003c/h3\u003e\n  The box is checked! Click \"Continue\".\n  \u003cimg src=\"/assets/safari03.png\" alt=\"safari03\"\u003e\n\n  \u003ch3\u003eStep 4\u003c/h3\u003e\n  A box is asking you for your crendentials. Fill them in, and hit \"Enter\".\n\n  \u003ch3\u003eStep 5\u003c/h3\u003e\n  Success!\n  \u003cimg src=\"/assets/safari04.png\" alt=\"safari04\"\u003e\n\u003c/details\u003e\n\n## Optimizations\nBankai applies lots of optimizations to projects. Generally you won't need to\ncare how we do this: it's lots of glue code, and not necessarily pretty. But it\ncan be useful to know which optimizations we apply. This is a list:\n\n### JavaScript\n- __[nanohtml][]:__ Optimize `choo` HTML code so it runs significantly faster in the\n  browser.\n- __[glslify][]:__ Adds a module system to GLSL shaders.\n- __[brfs][]:__ Statically inline calls to `fs.readFile()`. Useful to ship assets\n  in the browser.\n- __[envify][]:__ Allow environment variables to be used in the bundle. Especially\n  useful in combination with minification, which removes unused code paths.\n- __[split-require][]:__ Lazy load parts of your application using the\n  [`require('split-require')`][split-require] function.\n- __[babelify][]:__ Bring the latest browser features to _all_ browsers. See\n  [our babel section](#babel) for more details.\n\nAnd bankai uses [tinyify][], which adds the following optimizations:\n\n- __[browser-pack-flat][]:__ Remove function wrappers from the bundle, making\n  the result faster to run and easier to minify.\n- __[bundle-collapser][]:__ Remove all pathnames from inside the bundle, and\n  replace them with IDs. This not only makes bundles smaller, it prevents\n  details from your local dev setup leaking.\n- __[common-shakeify][]:__ Remove unused JavaScript code from the bundle. Best\n  known as _dead code elimination_ or _tree shaking_.\n- __[unassertify][]:__ Remove all `require('assert')` statements from the code.\n  Only applied for production builds.\n- __[uglifyify][]:__ Minify the bundle.\n\n### CSS\n- __[sheetify][]:__ extract all inline CSS from JavaScript, and include it in\n  `bundle.js`.\n- __[purifyCSS][purify-css]:__ removes unused CSS from the project.\n- __[cleanCSS][clean-css]:__ minify the bundle.\n\n### HTML\n- __[inline-critical-css][]:__ extract all crititical CSS for a page into the\n  `\u003chead\u003e` of the document. This means that every page will be able to render\n  after the first roundtrip, which makes for super snappy pages.\n- __async load scripts:__ loads scripts in the background using the\n  [`defer`](https://devdocs.io/html/attributes#defer-attribute) attribute.\n- __async load styles:__ loads styles in the background using the\n  [`preload`](https://devdocs.io/html/attributes#preload-attribute) attribute.\n- __async load styles:__ preloads fonts in the background using the\n  [`preload`](https://devdocs.io/html/attributes#preload-attribute) attribute.\n- __server render:__ server renders Choo applications. We're welcome to\n  supporting other frameworks too. PRs welcome!\n- __manifest:__ includes a link to `manifest.json` so the application can be\n  installed on mobile.\n- __viewport:__ defines the right viewport dimensions to make applications\n  accessible for everyone.\n- __theme color:__ sets the theme color defined in `manifest.json` so the\n  navigator bar on mobile is styled on brand.\n- __title:__ sets the right title on a page. Either extracts it from the\n  application (choo only, for now) or uses whatever the title is in\n  `manifest.json`.\n- __live reload:__ during development, we inject a live reload script.\n\n## Configuration\nThe Bankai CLI doesn't take any flags, other than to manipulate how we log to\nthe console. Configuring Bankai is done by modifying `package.json`.\n\nBankai is built on three technologies: [`browserify`][browserify],\n[`sheetify`][sheetify], and [`documentify`][documentify]. Because these can be\nconfigured inside `package.json` it means that Bankai itself can be configured\nfrom there too. Also if people ever decide to switch from the command line to\nJavaScript, no extra configuration is needed.\n\n```json\n{\n  \"name\": \"my-app\",\n  \"browserify\": {\n     \"transform\": [\n       \"some-browserify-transform\"\n     ]\n   },\n   \"sheetify\": {\n     \"transform\": [\n       \"some-sheetify-transform\"\n     ]\n   },\n   \"documentify\": {\n     \"transform\": [\n       \"some-documentify-transform\"\n     ]\n   }\n}\n```\n\n\n### Custom HTML\nBy default, Bankai starts with an empty HTML document, injecting the tags\nmentioned [above](#html). You can also create a custom template as `index.html`,\nand Bankai will inject tags into it instead.\n\nIf you export your Choo app instance after doing `.mount()`, Bankai respects the\nmount location during server side rendering:\n\n```js\n// app.js\n...\nmodule.exports = app.mount('#app')\n```\n\n```html\n\u003c!-- index.html --\u003e\n...\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"footer\"\u003e© 2018\u003c/div\u003e\n\u003c/body\u003e\n...\n```\n\n### Injecting headers - favicon.ico, CDNs, manifests etc...\n\nYou might be looking to use some of the fantastic third party libraries or tools out there. Take the [font-awesome](https://fontawesome.com/) library for example, but there are plenty of others. To do so, you typically need to include additional css or js libraries in your ```\u003chead\u003e```. And you can do this by setting up your documentify transform.\n\nIn this example, you will need to add a \"documentify\" transform which specifies a js file used, but you will also need a couple of extra npm libraries which you can install with:\n\n```bash\nnpm i hstream dedent\n```\n\nNow in ```package.json```, add the following transform:\n\n```json\n\"documentify\": {\n    \"transform\": [\n      [\n        \"./lib/document.js\",\n        {\n          \"order\": \"end\"\n        }\n      ]\n    ]\n  },\n```\n\nIn this example, we are storing the transform in a folder called ```lib```, which you will need to create, and create a ```document.js``` file in it. Edit the file called ```document.js``` and put the following transform code in it:\n\n```js\nvar dedent = require('dedent')\nvar hyperstream = require('hstream')\n\nmodule.exports = document\n\nfunction document () {\n  return hyperstream({\n    'meta[name=\"viewport\"]': {\n      content: 'width=device-width, initial-scale=1, viewport-fit=cover'\n    },\n    head: {\n      _prependHtml: dedent`\n      \u003clink rel=\"manifest\" href=\"manifest.json\"\u003e\n      \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\"\u003e\n      `,\n      _appendHtml: dedent`\n        \u003clink rel=\"shortcut icon\" href=\"/favicon.ico\"\u003e\n      `\n    }\n  })\n}\n```\n\nThis example now enables Bankai to generate an ```index.html``` file which has a link to the font-awesome css cdn, a ```manifest.json``` file, and a ```favicon.ico``` file ready for deployment.\n\n### Service Workers\nBankai comes with support for service workers. You can place a service worker\nentry point in a file called `sw.js` or `service-worker.js`. Bankai will output\na browserify bundle by the same name.\n\nYou can easily register service workers using\n[choo-service-worker](https://github.com/choojs/choo-service-worker):\n```js\napp.use(require('choo-service-worker')())\n```\n\nchoo-service-worker defaults to `/sw.js` for the service worker file name. If\nyou named your service worker `service-worker.js` instead, do:\n```js\napp.use(require('choo-service-worker')('/service-worker.js'))\n```\n\nService workers have access to some environment variables:\n * __process.env.STYLE_LIST:__ An array of URLs to stylesheet files.\n * __process.env.SCRIPT_LIST:__ An array of URLs to script files.\n * __process.env.ASSET_LIST:__ An array of URLs to assets.\n * __process.env.DOCUMENT_LIST:__ An array of URLs to server-rendered routes.\n * __process.env.MANIFEST_LIST:__ An array containing the URL to the manifest\n   file.\n * __process.env.FILE_LIST:__ An array of URLs to assets and routes. This can\n   be used to add all your app's files to a service worker cache.\n\n## HTTP\nBankai can be hooked up directly to an HTTP server, which is useful when\nworking on full stack code.\n```js\nvar bankai = require('bankai/http')\nvar http = require('http')\nvar path = require('path')\n\nvar compiler = bankai(path.join(__dirname, 'client.js'))\nvar server = http.createServer(function (req, res) {\n  compiler(req, res, function () {\n    res.statusCode = 404\n    res.end('not found')\n  })\n})\n\nserver.listen(8080, function () {\n  console.log('listening on port 8080')\n})\n```\n\n## Babel\nNot all browsers support all of the Web Platform's features. So in order to use\nnewer features on older browsers, we have to find a solution. The best solution\nout there at the moment is Babel.\n\n[Babel](https://babeljs.io/) is a plugin-based JavaScript compiler. It takes\nJavaScript in, and outputs JavaScript based for the platforms you've decided to\ntarget. In Bankai we target the last 2 versions of FireFox, Chrome and Edge,\nand every other browser that's used by more than 1% of people on earth. This\nincludes IE11. And if you have different opinions on which browsers to use,\nBankai respects `.babelrc` and [`.browserslistrc`](https://github.com/ai/browserslist) files.\n\nSome newer JavaScript features require loading an extra library; `async/await`\nbeing the clearest example. To enable such features, the `babel-polyfill`\nlibrary needs to be included in your application's root (e.g. `index.js`).\n\n```js\nrequire('babel-polyfill')\n```\n\nWe don't include this file by default in Bankai, because it has a significant\nsize overhead. Once Babel includes only the language features you're using,\nwe'll work to include `babel-polyfill` by default.\n\n## Events\n### `compiler.on('error', callback(nodeName, edgeName, error))`\nWhenever an internal error occurs.\n\n### `compiler.on('change', callback(nodeName, edgeName, state))`\nWhenever a change in the internal graph occurs.\n\n## API\n### `compiler = bankai(entry, [opts])`\nCreate a new bankai instance. Takes a path to a JavaScript file as the first\nargument. The following options are available:\n\n- __opts.quiet:__ Defaults to `false`. Don't output any data to `stdout`. Useful\n  if you have your own logging system.\n- __opts.watch:__ Defaults to `true`. Watch for changes in the source files and\n  rebuild. Set to `false` to get optimized bundles.\n- __babelifyDeps:__ Defaults to true. Transform dependencies with babelify.\n\n### `compiler.documents(routename, [opts], done(err, { buffer, hash }))`\nOutput an HTML bundle for a route. Routes are determined based on the project's\nrouter. Pass `'/'` to get the default route.\n\n- __opts.state:__ Will be passed the render function for the route, and inlined\n  in the `\u003chead\u003e` of the body as `window.initialState`.\n\n### `compiler.scripts(filename, done(err, { buffer, hash }))`\nPass in a filename and output a JS bundle.\n\n### `compiler.assets(assetName, done(err, { buffer, hash }))`\nOutput any other file besides JS, CSS or HTML.\n\n### `compiler.styles(name, done(err, { buffer, hash }))`\nOutput a CSS bundle.\n\n### `compiler.manifest(done(err, { buffer, hash }))`\nOutput a `manifest.json`.\n\n### `compiler.serviceWorker(done(err, { buffer, hash }))`\nOutput a service worker.\n\n### `compiler.close()`\nClose all file watchers.\n\n## License\nApache License 2.0\n\n[babelify]: https://github.com/babel/babelify\n[brfs]: https://github.com/browserify/brfs\n[browser-pack-flat]: https://github.com/goto-bus-stop/browser-pack-flat\n[browserify]: https://github.com/browserify/browserify\n[bundle-collapser]: https://github.com/substack/bundle-collapser\n[clean-css]: https://github.com/jakubpawlowicz/clean-css\n[common-shakeify]: https://github.com/browserify/common-shakeify\n[documentify]: https://github.com/stackhtml/documentify\n[envify]: https://github.com/hughsk/envify\n[glslify]: https://github.com/glslify/glslify\n[inline-critical-css]: https://github.com/stackcss/inline-critical-css\n[nanohtml]: https://github.com/choojs/nanohtml\n[purify-css]: https://github.com/purifycss/purifycss\n[sheetify]: https://github.com/stackcss/sheetify\n[split-require]: https://github.com/goto-bus-stop/split-require\n[tinyify]: https://github.com/browserify/tinyify\n[uglifyify]: https://github.com/hughsk/uglifyify\n[unassertify]: https://github.com/unassert-js/unassertify\n\n[0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\n[1]: https://nodejs.org/api/documentation.html#documentation_stability_index\n[2]: https://img.shields.io/npm/v/bankai.svg?style=flat-square\n[3]: https://npmjs.org/package/bankai\n[4]: https://img.shields.io/travis/choojs/bankai/master.svg?style=flat-square\n[5]: https://travis-ci.org/choojs/bankai\n[6]: https://img.shields.io/codecov/c/github/choojs/bankai/master.svg?style=flat-square\n[7]: https://codecov.io/github/choojs/bankai\n[8]: http://img.shields.io/npm/dm/bankai.svg?style=flat-square\n[9]: https://npmjs.org/package/bankai\n[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[11]: https://github.com/feross/standard\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoojs%2Fbankai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchoojs%2Fbankai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoojs%2Fbankai/lists"}