GithubHelp home page GithubHelp logo

read-components's Introduction

read-components Build Status

Read Twitter Bower components.

Install with npm install read-components.

read-components was made for automatic builders like Brunch. Automatic means you don’t need to specify bower files which will be built. Instead, read-components reads root bower.json, opens bower.json of all packages and their dependencies and auto-calculates concatenation order.

Component JSON file must have main property.

Every component which is handled by bower must have "main" property in bower.json. You can specify this in your own bower.json in overrides section. See below for examples.

Why

For automatic builds, read-components requires files to have dependencies and main properties specified. But not all bower packages have bower.json with main property specified. I’d say less than 50%. So parsing these will fail:

// Root bower.json
{
  ...
  "dependencies": {
    "chaplin": "*"
  }
}

// bower_components/chaplin/bower.json
{
  ...
  "dependencies": {"backbone": "*"}
}

// bower_components/backbone/bower.json
{// no deps, no `main`}

read-components solves the problem by allowing user to specify bower.json overrides in root config file.

For example, if your root bower.json looks like that

{
  "dependencies": {"chaplin": "*"},
  "overrides": {
    "backbone": {
      "main": "backbone.js",
      "dependencies": {
        "underscore": "~1.5.0",
        "jquery": "~2.0.0"
      }
    }
  }
}

read-components will treate backbone bower.json as completed and will produce correct output for automatic builders.

Usage

Node.js:

var read = require('read-components');

read('your-project-dir-with-bower.json', 'bower', function(error, components) {
  console.log('All components:', components);
});

read('.', 'bower', function(error, components) {});

Output is a list of packages like this:

[{ "name": "d",
  "version": "1.0.2",
  "files": [ "/Users/john/project/bower_components/d/index.js" ],
  "dependencies": { },
  "sortingLevel": 2 },
{ "name": "e",
  "version": "1.0.1",
  "files": [ "/Users/paul/project/bower_components/e/index.js" ],
  "dependencies": { "d": "~1.0.0" },
  "sortingLevel": 1 } ]

Each package will also have sortingLevel and files specified. You can use it to get concatenation order like this:

// Note that it is sorted like this by default.
packages
  .sort(function(a, b) {
    var field = 'sortingLevel';
    return b[field] - a[field];
  })
  .map(function(pkg) {
    return pkg.files;
  });

License

MIT (c) 2016 Paul Miller (http://paulmillr.com)

read-components's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

read-components's Issues

Throws an exception when overriding dependencies that were specified in bower package

I tried to override the dependencies in an existing bower package (one that has a valid dependencies list and main), and I got an error:

Error: Dependency "components-modernizr" is not present in the list of deps [foundation, jquery, modernizr, fastclick, jquery.cookie, jquery-placeholder]. Specify correct dependency in bower.json or contact package author.
  at .../node_modules/brunch/node_modules/read-components/index.js:232:15
  ...
  at .../node_modules/brunch/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:104:5
  at Object.oncomplete (fs.js:107:15)

My bower.json looks like this:

{
    "name": "...valid name here...",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "foundation": "~5.5.0",
        "components-modernizr": ">= 2.7.2"
    },
    "overrides": {
        "foundation": {
            "dependencies": {
                "jquery": ">= 2.1.0",
                "components-modernizr": ">= 2.7.2",
                "fastclick": ">=0.6.11",
                "jquery.cookie": "~1.4.0",
                "jquery-placeholder": "~2.0.7"
            }
        }
    }
}

Maybe it was intentional that read-components won't allow you to replace settings for dependencies in an existing bower manifest. I wanted to do this because modernizr doesn't include bower.json, and I wanted to simply substitute that dependency with a version that has a bower.json: components-modernizr.

In Brunch 1.8

Paul, is your read-components plugin still needed in Brunch 1.8 ?

CLDR + Brunch + read-components throws exception

I can't seem to get CLDR to work with the overrides and brunch. I originally got the error that I needed to use read-components. I npm-installed it and add this overrides block to my bower.json:

{
  "name": "foo",
  "version": "0.0.0",
  "dependencies": {
   ...
  },
  "devDependencies": {
   ...
  },
  "overrides": {
    "cldr": {
      "main": "plurals.js"
    }
  }
}

Brunch no longer throws the read-components error, but the build fails with this exception:

/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:90
    pkg[property].forEach(function(item) {
                  ^
TypeError: Object #<Object> has no method 'forEach'
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:90:19
  at Array.forEach (native)
  at exports.getPackageFiles (/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:89:13)
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:118:19
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:69:7
  at fs.js:266:14
  at Object.oncomplete (fs.js:107:15)

Any ideas?

component(1)

Is it already doing component(1) integration someplace where I can't see it? Or is that just intended functionality that hasn't been addressed yet?

Apparent confusion with knockout.js dependency

brunch build errors out with the following:

/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:176
        throw new Error('Dependency "' + depName + '" is not present in the li
              ^
Error: Dependency "knockout.js" is not present in the list of deps [jquery, requirejs, requirejs-text, knockout, Durandal, knockout]. Specify correct dependency in bower.json or contact package author.
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:176:15
  at Array.forEach (native)
  at setLevel (/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:168:10)
  at Array.forEach (native)
  at setSortingLevels (/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:182:12)
  at sortPackages (/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:188:10)
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:218:20
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:144:7
  at /usr/local/lib/node_modules/brunch/node_modules/async-each/index.js:24:44
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:101:7
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:49:7
  at fs.js:266:14
  at Object.oncomplete (fs.js:107:15)

The bower.json file is as follows:

{
  "name": "someproject",
  "dependencies": {
    "jquery": "~1.9.1",
    "requirejs": "~2.1.8",
    "requirejs-text": "~2.0.3",
    "knockout.js": "~2.3.0",
    "durandal": "~2.0.1"
  },
  "overrides": {
    "jquery": {
      "main": "jquery.js"
    },
    "requirejs-text": {
      "main": "text.js"
    },
    "durandal": {
      "main": ["js/system.js", "js/app.js"],
      "dependencies": {
        "jquery": "~1.9.1",
        "requirejs": "~2.1.8",
        "requirejs-text": "~2.0.3",
        "knockout.js": "~2.3.0"
      }
    }
  }
}

The error occurs after running bower install and brunch build. The output of bower list is as follows:

├─┬ durandal#2.0.1
│ ├── jquery#1.9.1 (latest is 2.1.1)
│ ├── knockout.js#2.3.0 (latest is 3.1.0)
│ ├── requirejs#2.1.8 (latest is 2.1.11)
│ └── requirejs-text#2.0.3 (latest is 2.0.12)
├── jquery#1.9.1 (latest is 2.1.1)
├── knockout.js#2.3.0 (latest is 3.1.0)
├── requirejs#2.1.8 (2.1.11 available)
└── requirejs-text#2.0.3 (2.0.12 available)

The error refers to knockout (twice) in the list of dependencies, but the actual dependency is on knockout.js.

Why async?

Why not to to read components synchronously (or at least allow it as some option)?
While provided functionality is so useful - sometimes it can't be used together with third-party tools.
Brunch was designed to work with this reader asynchronously. Grunt gives us 'this.async()' inside task, and it helps. But what about something more specific? For example, I want to compose modules list for LMD builder. All I need is to specify module.exports field in config file - but there is no way to wait until filelist will be read.

So can this tool be upgraded to be synchronous?
Or, maybe, I just don't know how to return async result from module (without exporting functions) - then, could you give me some advice about this?

Fails to detect sortingLevel for Lungo.js

I have Lungo.js (~2.2) as a dependency in my root bower.json file. When I execute brunch build, it fails with the following error:

TypeError: Cannot read property 'sortingLevel' of undefined
at setLevel (/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:164:29)
....

When I remove Lungo.js from the list of dependencies, brunch builds without a problem. This occurs wwhen using the default component.json from Lungo, Bower's bridged .bower.json, or defining overrides in my root bower.json file.

breaks when used with polymerjs

I am trying to use brunch on a project that is using polymerjs. Polymerjs has a bower.json for all its components however none of them apparently has "main" property. I created an override with "main" property for all polymer components in my bower.json file. However, I am getting following error

/usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:189
    deps.forEach(function(depName) {
         ^
RangeError: Maximum call stack size exceeded

This could have been due to circular dependencies. Is there an easier way to integrate bower_components.

dependency names should be lower cased

0.5.2 introduces a bug for packages with mixed case names. read-components now calls toLowerCase() on the package name when it reads it however it doesn't do the same for dependency names. So dependencies with mixed cases can't be found when setting sorting levels.

https://github.com/paulmillr/read-components/blob/master/index.js#L170

return _.name === dep;

will now return undefined if dep is mixed case e.g. "componentName" because _.name would be "comonentname" at that point.

Changing to the following fixes...

return _.name === dep.toLowerCase();

... but it might be better to lower case all dependencies from processPackage() instead.

Support for the custom bower directory

Bower support specifying custom directory where components will be placed via directory option in .bowerrc file. Would be nice if read-components will also respect this option.

bower.json "scripts"

Currently looking in bower.json scripts and styles for possible dependency file specification, but that's not what scripts is supposed to be used for at this point: https://github.com/bower/bower/blob/master/HOOKS.md

See brunch/brunch#841

There are several potential ways to fix this. The most backward compatible way would probably be to ignore whatever is in scripts if it isn't an array. A more modern bower-compliant way would be to drop support for these alternates and stick to just main.

read-components does not even try to

if the bower component has a component.json but no bower.json, it'll just fail with an error message, not even trying to reach other .json

is this by design?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.