Skip to content

Commit

Permalink
merge branch 2.x.x into master (#13)
Browse files Browse the repository at this point in the history 
* substitue with a new json tree parse for webpack modules

* fix root size as 0 Bytes

* 2.0.0-0

* add tests for cli and bundle mode

* refactor for cli passing stats.json

* fix tests

* add title tag + reformat html

* remove default sample stats and pass sample stats in command line argument

* 2.0.0

* 2.1.0-0

* update title

* fix for modes switching handlers

* add docs and fork templates

* 2.1.1-0

* add API integration to the docs

* refactor references to electrify from disc

* increase font size for title and size text in the center of the ring

* add percentages for sizes

* add keywords

* add favicon

* add test and start scripts

* add promises in tests
  • Loading branch information
@ananavati
ananavati authored Oct 24, 2016
1 parent e09674c commit f91c7fe
Show file tree
Hide file tree
Showing 13 changed files with 28,566 additions and 200 deletions.
28 changes: 26 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ for catching large and/or duplicate modules which might be either bloating up yo

Checkout a live working [DEMO](http://bit.ly/electrode_electrify).

![screencast](./img/screencast.gif)
<!-- ![screencast](./img/screencast.gif) -->

## Installation ##

Expand All @@ -23,6 +23,7 @@ sudo npm install -g electrode-electrify
```

## Command-Line Interface ##
***Note:*** *you'll need to build your project with the `fields: null` flag if you are using [webpack-stats-plugin], pass a fully generated webpack-stats-object for electrify to render the tree accurately.*

``` bash
electrify [stats-bundle(s)...] {options}
Expand All @@ -39,7 +40,7 @@ available as the quickest means of checking out your bundle. As of `electrode-el
the tool takes any [webpack-stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object [example](https://github.com/webpack/analyse/blob/master/app/pages/upload/example.json) as input and spits out a
standalone HTML page as output.

You can easily chain the stats file into another command, or use the `--open`
You can easily chain the stats file into another command, or use the `--open` or `-O`
flag to open electrify in your browser automatically:


Expand All @@ -49,6 +50,28 @@ For example:
electrify build/stats.json --open
```

## API Integration ##
***Note:*** *you'll need to build your project with the `fields: null` flag if you are using [webpack-stats-plugin], pass a fully generated webpack-stats-object for electrify to render the tree accurately.*

### `electrify.bundle(stats, [opts], callback)` ###

A callback-style interface for electrify: takes a single stats file or an array of `stats` (note: the
file names and not the file contents), calling `callback(err, html)` with
either an error or the resulting standalone HTML file as arguments.

This currently mirrors how electrify is currently implemented, but the stream API is
a little more convenient to work with.

This method takes the following options:

* `header`: HTML to include above the visualisation. Used internally to render
the "Fork me on GitHub" ribbon.
* `footer`: HTML to include beneath the visualisation. Used internally for the
description on the demo page.
* `mode`: the default file scale mode to display: one of either `"count"` or
`"size"`, defaulting to `"size"`.

`bundle` api example: [electrify.bundle(stats, [opts], callback)](https://github.com/electrode-io/electrode-electrify/blob/2.x.x/lib/bundle-demo.js#L16)

## Palettes ##

Expand Down Expand Up @@ -103,3 +126,4 @@ Built with :heart: by [Team Electrode](https://github.com/orgs/electrode-io/peop
[daviddm-url]: https://david-dm.org/electrode-io/electrode-electrify
[downloads-image]: https://img.shields.io/npm/dt/electrode-electrify.svg
[downloads-url]: https://www.npmjs.com/package/electrode-electrify
[webpack-stats-plugin]: https://www.npmjs.com/package/webpack-stats-plugin
24 changes: 20 additions & 4 deletions bin/electrify
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,17 @@ var map = require('map-async')
var open = require('opener')
var path = require('path')
var http = require('http')
var disc = require('../')
var electrify = require('../')
var fs = require('fs')
var bl = require('bl')
var btoa = require('btoa')
var marked = require('marked')

var readme = fs.readFileSync(__dirname + '/../README.md', 'utf8')
var button = fs.readFileSync(__dirname + '/../img/fork.png')

button = btoa(button)
button = 'data:image/png;base64,' + button

var argv = optimist
.wrap(70)
Expand All @@ -20,7 +28,7 @@ var argv = optimist
.describe('o', 'Output path of the bundle. Defaults to stdout.')

.alias('O', 'open')
.describe('O', 'Opens disc in a new browser window automatically')
.describe('O', 'Opens electrify in a new browser window automatically')

.alias('m', 'mode')
.describe('m', 'the default file scale mode to display: should be either "count" or "size". Default: size')
Expand Down Expand Up @@ -53,8 +61,16 @@ if (!files.length) {
}

function handle(bundles) {
disc.bundle(bundles, {
mode: argv.mode
electrify.bundle(bundles, {
mode: argv.mode,
footer: marked(readme),
header: [
'<a href="https://github.com/electrode-io/electrify">',
'<img style="position:absolute;top:-8px;left:-8px;border:0;"',
'src="' + button + '"',
'alt="Fork me on GitHub"',
'></a>'
].join(' ')
}, function(err, html) {
if (err) throw err
if (argv.output) return fs.writeFileSync(argv.output, html)
Expand Down
Binary file added img/favicon-128.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
174 changes: 33 additions & 141 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,13 @@
var builtins = require('builtins')
var through = require('through')
var flatten = require('flatten')
var duplex = require('duplexer')
var pluck = require('plucker')
var uniq = require('uniq')

var commondir = require('commondir')
var fileTree = require('file-tree')
var path = require('path')
var fs = require('fs')
var bl = require('bl')

var versions = require('./lib/versions')

var sampleStats = require('./lib/sample-stats.json')
var jsonTree = require('./json-tree')

module.exports = createStream
createStream.json = json
createStream.bundle = bundle

function createStream(opts) {
Expand All @@ -39,127 +30,29 @@ function createStream(opts) {
return stream
}

function getBundleModules(bundles) {
bundles = Array.isArray(bundles)
? bundles
: bundles ? [bundles] : []
function parseBundle(bundles) {
if (!bundles) {
return null;
}

if (bundles.length > 0) {
bundles = bundles && bundles[0]

if (bundles) {
bundles = JSON.parse(bundles.toString())
}

return bundles && bundles.modules
return bundles;
}

function json(bundles, callback) {
// bundles length is 1 because its an array of buffer
// example: [ <Buffer 7b 0a 20 20 ... > ]
// length 1 is in case of CLI
if (bundles.length === 1) {
bundles = getBundleModules(bundles)
function getStats(bundles) {
if (Array.isArray(bundles)) {
return parseBundle(bundles)
} else {
bundles = sampleStats.modules
throw new Error("**** Pass the stats.json as per instructions electrify -h ****")
}

var modules = flatten(bundles).map(function(module) {
if (typeof module === 'undefined') return callback(new Error(
'Unable to compile one of the supplied bundles!'
))

if (typeof module.identifier !== 'number') return module

return callback(new Error(
'Please recompile this webpack bundle using the fields:null flag '
))
})

modules = modules.filter(function(module) {
return module && !isEmpty(module)
})

if (!modules.length) return

var reactModules = []

var otherModules = modules.filter(function(module) {
if (path.basename(module.identifier) === '_empty.js') return false
if (reactModules.indexOf(module) === -1) return true
})

otherModules = otherModules.filter(function(module) {
var ignoreFiles = /^ignored \//;

if (ignoreFiles.test(module.identifier)) {
return false
} else {
return true
}
})

var root = commondir(otherModules.map(pluck('identifier')))

reactModules.forEach(function(module) {
var regex = /^.+\/node_modules\/react\/(?:node_modules\/)(.+)$/g

module.identifier = module.identifier.replace(regex, function(_, subpath) {
return path.resolve(root, 'react/' + subpath)
})

return module
})

otherModules.forEach(function(module) {
var stylusRegex = /^.+\/node_modules\/stylus-relative-loader\/index(.+)/;
var babelRegex = /^.+\/node_modules\/babel-loader\/index(.+)/;
var cssModulesRegex = /^.+\/node_modules\/postcss-loader\/index(.+)/;
var intlMessageRegex = /^.+\/node_modules\/intl-messageformat\/lib\/main.js|/;

if (stylusRegex.test(module.identifier)
|| babelRegex.test(module.identifier)
|| cssModulesRegex.test(module.identifier)) {
var structure = module.identifier.split("!")
module.identifier = structure[structure.length - 1]
}

if (intlMessageRegex.test(module.identifier)) {
var intlStructure = module.identifier.split("|")
module.identifier = intlStructure[intlStructure.length - 1]
}

return module;
})

uniq(modules, function(a, b) {
return a.identifier === b.identifier ? 0 : 1
}, true)

var ids = modules.map(pluck('identifier'))
var main = path.basename(root)

var byid = modules.reduce(function(memo, mod) {
memo[mod.identifier] = mod
return memo
}, {})

fileTree(ids, function(id, next) {
var row = byid[id]
next(null, {
size: (row && row.source.length) || 0
, deps: 0
, path: id
})
}, function(err, tree) {
if (err) return callback(err)

tree = { name: main, children: tree }
dirsizes(tree)
versions(tree)
callback(null, tree)
})
}

function bundle(bundles, opts, callback) {

if (typeof opts === 'function') {
callback = opts
opts = {}
Expand All @@ -171,27 +64,26 @@ function bundle(bundles, opts, callback) {
var header = opts.header || opts.button || ''
var footer = opts.footer || ''

return json(bundles, function(err, data) {
if (err) return callback(err)

data.mode = opts.mode || 'size'
data = '<script type="text/javascript">'
+ ';window.disc = ('
+ JSON.stringify(data)
+ ');</script>'

var script = '<script type="text/javascript">'
+ bundled().replace(/\/script/gi, '\\/script')
+ '</script>'

callback(null, template()({
scripts: script
, styles: styles()
, markdown: footer
, header: header
, data: data
}))
})
var data = {};

data.mode = opts.mode || 'size'

data = '<script type="text/javascript">'
+ ';window.electrify = ('
+ JSON.stringify(jsonTree(getStats(bundles)))
+ ');</script>'

var script = '<script type="text/javascript">'
+ bundled().replace(/\/script/gi, '\\/script')
+ '</script>'

return callback(null, template()({
scripts: script
, styles: styles()
, markdown: footer
, header: header
, data: data
}))
}

function template() {
Expand Down
Loading

0 comments on commit f91c7fe

Please sign in to comment.