yapplabs / ember-freestyle

Create a component explorer for your Ember app

Ember Freestyle

Ember Freestyle is an Ember addon that allows you to quickly create a component explorer for your Ember app.

Documentation

This README provides a lightweight overview of Ember Freestyle to get you going. More complete documentation can be found at https://chrislopresto.github.io/ember-freestyle

Live Demo

To see Ember Freestyle in action, visit https://chrislopresto.github.io/ember-freestyle/#/acceptance

Compatibility

• Ember.js v3.12 or above
• Ember CLI v3.12 or above
• Node.js v10 or above

Support

Ember Freestyle support is only provided for the 2 latest Ember versions

Installation

This installation process is opinionated in order to get you going quickly.

1. ember install ember-freestyle

   This will do the following:

   • Install the ember-freestyle addon itself
   • Add a freestyle template in your app
   • Add a freestyle controller in your app

   Note: Ember CLI versions < 0.2.3 should use ember install:addon instead of ember install

2. Add this.route('freestyle'); to your router.js file

3. Navigate to /freestyle. You should now see something like:

   

All of the generated output is optional. If you don't want a freestyle route, for example, feel free to get rid of it in and add a freestyle-guide somewhere else in your app.

You can use the freestyle-guide component anywhere you'd like in your app. You can organize your components into multiple Freestyle guides if you want to. You can even use the constituent components like freestyle-usage on their own.

Problems? No problem.

Hopefully the installation instructions got you off to a smooth, seamless start. If you have any problems, feel free to chat with us in the Ember Community Discord or open an issue. As always, PRs are welcome!

Removing Ember Freestyle from Your Production Payload

We recommend blacklisting Ember Freestyle for production builds using Ember CLI's addon blacklist feature.

var environment = process.env.EMBER_ENV;
var pluginsToBlacklist = environment === 'production' ? ['ember-freestyle'] : [];

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    addons: {
      blacklist: pluginsToBlacklist
    }
  };
}

Using Ember Freestyle Within an Addon

Dependency Configuration

You should include Ember Freestyle as a devDependency so that apps using your addon will not include Ember Freestyle CSS and JavaScript in their production payloads.

Running

• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Chris LoPresto 💻 📖 ⚠️	Luke Melia 💻 📖 ⚠️	Andrew Fan 💻	Chris van der Ploeg 💻 📖	Ilya Radchenko 💻 📖	Mike Szörnyi 💻 📖	miguel barcos ⚠️
Nathan Ward 💻 📖	zidjian257 💻 ⚠️	Eli Dupuis 💻	Peter Wagenet 💻	Sivakumar Kailasam 💻	Manuel Wiedenmann 💻	Lucas Hill 💻
Alex Zlotnik 💻	Tamzin Blake 💻	Simon Ihmig 📖	Ryan Tablada 💻	Kerrick Long 💻	Hajdukovic Radovan 💻 📖	Rob 💻
Gijs Boddeus 💻	Sarah Canieso 💻	Brian Runnells 💻	Dan Wenzel 💻 ⚠️	Camille TJHOA 💻 📖	Michael Swanson ⚠️	Sam Van Campenhout 📖
Chris Krycho 💻	Will Bagby 💻 ⚠️	Noah 💻	Stanley Stuart 💻	Matt McManus 💻	Suzi Dao 💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!