# Ember Freestyle [![Build Status](https://github.com/chrislopresto/ember-freestyle/workflows/CI/badge.svg?branch=master)](https://github.com/chrislopresto/ember-freestyle/actions) ![NPM Version](https://img.shields.io/npm/v/ember-freestyle?logo=npm) ![Download Count All Time](https://img.shields.io/npm/dt/ember-freestyle.svg) [![Ember Observer Score](http://emberobserver.com/badges/ember-freestyle.svg)](http://emberobserver.com/addons/ember-freestyle) [![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors-) 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](https://chrislopresto.github.io/ember-freestyle). ## Live Demo To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-freestyle/#/acceptance](https://chrislopresto.github.io/ember-freestyle/#/acceptance). ## Compatibility * Ember.js v4.4 or above * Ember CLI v4.4 or above * Node.js v20 or above * Ember Auto Import v2 or above ember-freestyle includes TypeScript types, and provides a template registry that can be imported from `ember-freestyle/template-registry` for Glint usage. ## 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 2. Add `this.route('freestyle');` to your `app/router.js` file 3. Navigate to `/freestyle`. You should now see something like: ![](doc/freestyle-generated.png) All of the generated output is optional. If you don't want a `freestyle` route, for example, feel free to get rid of it 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](https://discord.gg/emberjs) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome! ## Excluding Ember Freestyle's Styles If you want to exclude Ember Freestyle's styles, you can set the `includeStyles` option to `false` in your `ember-cli-build.js` file: ```js // ember-cli-build.js module.exports = function (defaults) { const app = new EmberApp(defaults, { 'ember-freestyle': { includeStyles: false, }, }; }; ``` This might be useful in case you want to define your own styles _or_ if you are using `ember-cli-sass` and want to import Ember Freestyle's styles explicitly: ```scss $FreestyleGuide-color--primary: #C70039; $FreestyleGuide-color--accent: #DAF7A6; @import 'ember-freestyle'; ``` ## Excluding Ember Freestyle from Your Production Build We recommend excluding Ember Freestyle from production builds using Ember CLI's `addons.exclude` option. ```js // ember-cli-build.js const environment = process.env.EMBER_ENV; const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : []; module.exports = function (defaults) { const app = new EmberApp(defaults, { addons: { exclude: addonsToExclude, }, }; }; ``` ## Using Ember Freestyle Within an Addon You should include `ember-freestyle` in your `devDependencies` so that apps using your addon will not include Ember Freestyle CSS and JavaScript in their production builds. ### In V2 addons You will need to configure babel to run ember-freestyle's AST Transform in order to capture source code from Freestyle::Usage example blocks. For example: ```js // babel.config.mjs import FreestyleTransform from 'ember-freestyle/lib/ast-transform.js'; export default { plugins: [ // ... [ 'babel-plugin-ember-template-compilation', { targetFormat: 'hbs', transforms: [FreestyleTransform], }, ], // ... ], }; ``` ## Contributing See the [Contributing](CONTRIBUTING.md) guide for details. ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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
πŸ’» ⚠️
Ray Tiley
πŸ’»

lucasmerat
πŸ’»
Kit
πŸ’»
Andrey Mikhaylov (lolmaus)
πŸ› πŸ’»
Bert De Block
πŸ’» πŸ€”
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome! ## License This project is licensed under the [MIT License](LICENSE.md).