ember-component-analyzer

Information

This project is an experimental dark thing O_O**

This library extracts the "possibles" components that may exists in the different routes of an Ember application. It uses Glimmer compiler to make & read the AST trees.

The lib reads all the handlebars files to find all the components (usually names that contains - for components and . for contextual components). Once the "possible" components are found, it replaces all the contextual components by its real name. This part is only possible for the application components (right now its unable to read the components inside the ember-addons).

Information

How to use

1. Import the lib

const lib = require('ember-component-analyzer');

2. Process the application

#!/usr/bin/env node

const { Analyzer, parse } = lib;

const analyzer = new Analyzer(process.argv.slice(2), {
  // options...
});
const result = analyzer.process(); // Hell JSON
const output = parse(result); // Friendly JSON with the application data

3. Save the results, process or do whatever you want

Options

The Analyzer class accepts an object as config. The possible attributes are:

• families: An object containing the different typologies of the templates (components, helpers, routes, ...) and the RegExp used to recognize the type. These families represents the attributes of the result object after parsing the files.

Defaults to:

{
  components: /components/, // the file path contains the word "components"
  default: /^((?!components).)*$/ // the file path not contains the word "components"
}

• getNodeName: This function receives an AST node as first argument and it should return the component name (if valid) or null if you don't want the element to appear in the report (for example a blacklisted element).

Example

Given:

• Component my-wrapper.hbs:

<div>
  {{yield (hash header=(component 'my-header'))}}
  {{my-footer}}
</div>

• Component my-header.hbs:

{{link-to}}

• Route index.hbs:

{{#my-wrapper as |wrapper|}}
  {{wrapper.header}}
{{/my-wrapper}}

Then it will generate an output (using the exported parser) similar to:

{
  "default": [{
    "moduleId": "index.hbs",
    "components": ["my-wrapper", "header-main", "link-to", "my-footer"]
  },
  "components": [{
    "moduleId": "my-wrapper",
    "components": ["my-footer"]
  }, {
    "moduleId": "my-header",
    "components": ["link-to"]
  }]
}

Readable report?

Working on it :)

Contributing

We're thankful to the community for contributing any improvements.

Do not forget to follow our eslint rules and make test for the new functionalities/fixes.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details