ember-freestyle 0.12.9 → 0.13.2

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn compile-styles
+git add ./vendor/ember-freestyle.css

package/CHANGELOG.md

@@ -2,6 +2,60 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.13.2](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.1...v0.13.2) (2021-11-21)
+
+### [0.13.1](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.0...v0.13.1) (2021-11-21)
+
+
+### Features
+
+* remove dependency on `ember-cli-sass` and `sass` ([5482db1](https://github.com/chrislopresto/ember-freestyle/commit/5482db1b11332526e6916f2147e59216120b5fd2))
+
+
+### Bug Fixes
+
+* pass down [@hide](https://github.com/hide)Controls argument ([c8eac40](https://github.com/chrislopresto/ember-freestyle/commit/c8eac406cc1e59b99f659b68fed7af5b4722d5d4))
+
+## [0.13.0](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.11...v0.13.0) (2021-10-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove the use of `ember-json-viewer`
+* drop support for Node v10
+
+### Features
+
+* deprecate `<FreestyleShowdownContent />` component ([78f2568](https://github.com/chrislopresto/ember-freestyle/commit/78f25681c40d33d56c1789601503f3d5ccca88da))
+
+
+### Bug Fixes
+
+* fix generated id for `freestyle-dynamic-input` component ([942c901](https://github.com/chrislopresto/ember-freestyle/commit/942c901293827e51f35a976623ccdeb0139181e9))
+* import computed.or directly ([ecb6811](https://github.com/chrislopresto/ember-freestyle/commit/ecb6811368e41c10466bf859e3bb9118f5683bfc))
+* import htmlSafe from @ember/template ([57ea33f](https://github.com/chrislopresto/ember-freestyle/commit/57ea33f6651342488e6cc6209a041dbc15ce977f))
+* make AST plugin functional ([87f521c](https://github.com/chrislopresto/ember-freestyle/commit/87f521ce1371a31f0f1fad9530a973f595819723))
+* resolve deprecations related to built-in component events ([a4d07c6](https://github.com/chrislopresto/ember-freestyle/commit/a4d07c6661299e9ab161a75a35a50ead5e755707))
+
+
+* drop support for Node v10 ([2add9c7](https://github.com/chrislopresto/ember-freestyle/commit/2add9c7152a5b58b9de45b4e188b836b656d5fb5))
+* remove the use of `ember-json-viewer` ([023f559](https://github.com/chrislopresto/ember-freestyle/commit/023f5591f5531d61188c20d4107447e26172d2b0))
+
+### [0.12.11](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.10...v0.12.11) (2021-03-23)
+
+
+### Bug Fixes
+
+* Move glimmer/tracker to the deps list since ([3a39dc6](https://github.com/chrislopresto/ember-freestyle/commit/3a39dc6daa2d6a69f6b1e090c19e216edf3fef8d))
+* rendering a color palette ([336af81](https://github.com/chrislopresto/ember-freestyle/commit/336af817a43553a3662ebb0cc4b0d174fcf0b23b))
+
+### [0.12.10](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.9...v0.12.10) (2021-03-17)
+
+
+### Bug Fixes
+
+* blueprint subsection invocation ([#515](https://github.com/chrislopresto/ember-freestyle/issues/515)) ([ad7f63a](https://github.com/chrislopresto/ember-freestyle/commit/ad7f63abf60f2b7013b91881ea2aa0484835226b))
+
 ### [0.12.9](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.8...v0.12.9) (2021-03-12)
 
 

package/README.md

@@ -2,36 +2,33 @@
 
 [![Build Status](https://github.com/chrislopresto/ember-freestyle/workflows/CI/badge.svg?branch=master)](https://github.com/chrislopresto/ember-freestyle/actions)
 
-[![npm version](https://badge.fury.io/js/ember-freestyle.svg)](https://badge.fury.io/js/ember-freestyle)
-![Download count all time](https://img.shields.io/npm/dt/ember-freestyle.svg)
+![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)
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-37-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-Ember Freestyle is an Ember addon that allows you to quickly create a component explorer for your Ember app.
+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
+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)
+To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-freestyle/#/acceptance](https://chrislopresto.github.io/ember-freestyle/#/acceptance).
 
-### Compatibility
+## Compatibility
 
 * Ember.js v3.16 or above
-* Ember CLI v2.13 or above
-* Node.js v10 or above
+* Ember CLI v3.16 or above
+* Node.js v12 or above
 
-### Support
-
-Ember Freestyle support is only provided for the 2 latest Ember versions
-
-Installation
-------------------------------------------------------------------------------
+## Installation
 
 This installation process is opinionated in order to get you going quickly.
 
@@ -43,63 +40,80 @@ This installation process is opinionated in order to get you going quickly.
     - 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`
-
-1. Add `this.route('freestyle');` to your `router.js` file
-1. Navigate to `/freestyle`. You should now see something like:
+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 in and add a `freestyle-guide` somewhere else in your app.
+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.
+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://discordapp.com/invite/zT3asNS) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome!
+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!
 
-## Removing Ember Freestyle from Your Production Payload
+## Excluding Ember Freestyle's Styles
 
-We recommend blacklisting Ember Freestyle for production builds using Ember CLI's [addon blacklist feature](https://ember-cli.com/user-guide/#whitelisting-and-blacklisting-assets).
+If you want to exclude Ember Freestyle's styles, you can set the `includeStyles`
+option to `false` in your `ember-cli-build.js` file:
 
-```javascript
-var environment = process.env.EMBER_ENV;
-var pluginsToBlacklist = environment === 'production' ? ['ember-freestyle'] : [];
+```js
+// ember-cli-build.js
 
-module.exports = function(defaults) {
-  var app = new EmberApp(defaults, {
-    addons: {
-      blacklist: pluginsToBlacklist
-    }
+module.exports = function (defaults) {
+  const app = new EmberApp(defaults, {
+    'ember-freestyle': {
+      includeStyles: false,
+    },
   };
-}
+};
 ```
 
-## Using Ember Freestyle Within an Addon
+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:
 
-### Dependency Configuration
+```scss
+$FreestyleGuide-color--primary: #C70039;
+$FreestyleGuide-color--accent: #DAF7A6;
 
-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.
+@import 'ember-freestyle';
+```
 
-## Running
+## Excluding Ember Freestyle from Your Production Build
 
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+We recommend excluding Ember Freestyle from production builds using Ember CLI's
+`addons.blacklist` option.
 
-### Running tests
+```js
+// ember-cli-build.js
 
-* `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
+const environment = process.env.EMBER_ENV;
+const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];
 
-### Running the dummy application
+module.exports = function (defaults) {
+  const app = new EmberAddon(defaults, {
+    addons: {
+      blacklist: addonsToExclude,
+    },
+  };
+};
+```
+
+## Using Ember Freestyle Within an Addon
 
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+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.
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+## Contributing
 
+See the [Contributing](CONTRIBUTING.md) guide for details.
 
 ## Contributors ✨
 
@@ -157,6 +171,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tr>
     <td align="center"><a href="https://github.com/lucasmerat"><img src="https://avatars.githubusercontent.com/u/32575355?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lucasmerat</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=lucasmerat" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/skwongr"><img src="https://avatars.githubusercontent.com/u/19978361?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kit</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=skwongr" title="Code">💻</a></td>
+    <td align="center"><a href="https://lolma.us/"><img src="https://avatars.githubusercontent.com/u/200884?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrey Mikhaylov (lolmaus)</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/issues?q=author%3Alolmaus" title="Bug reports">🐛</a> <a href="https://github.com/chrislopresto/ember-freestyle/commits?author=lolmaus" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/bertdeblock"><img src="https://avatars.githubusercontent.com/u/7403183?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bert De Block</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=bertdeblock" title="Code">💻</a> <a href="#ideas-bertdeblock" title="Ideas, Planning, & Feedback">🤔</a></td>
   </tr>
 </table>
 
@@ -165,4 +181,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+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).

package/addon/components/freestyle/usage/argument/index.hbs

@@ -15,7 +15,7 @@
     {{#if @required}}
       <span class="FreestyleUsageArgument-required">Required</span>
     {{/if}}
-    {{#if (is-present @defaultValue)}}
+    {{#if this.shouldRenderDefaultValue}}
       <span class="FreestyleUsageArgument-default u-codePill">
         {{@defaultValue}}
       </span>

package/addon/components/freestyle/usage/argument/index.js

@@ -1,6 +1,11 @@
+import { isPresent } from '@ember/utils';
 import Component from '@glimmer/component';
 
 export default class FreestyleUsageArgumentComponent extends Component {
+  get shouldRenderDefaultValue() {
+    return isPresent(this.args.defaultValue);
+  }
+
   get typeLabel() {
     return this.args.typeLabel || this.args.type;
   }

package/addon/components/freestyle/usage/array/index.hbs

@@ -5,6 +5,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   {{#each @items key=@identity as |item index|}}
     <div class="FreestyleUsageArray-item">

package/addon/components/freestyle/usage/bool/{control.hbs → control/index.hbs}

@@ -4,6 +4,6 @@
   <input
     type="checkbox"
     checked={{@value}}
-    {{on 'input' (pick 'target.checked' @onInput)}}
+    {{on 'input' this.callOnInput}}
   />
 </label>

package/addon/components/freestyle/usage/bool/control/index.js

@@ -0,0 +1,9 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export default class FreestyleUsageBoolControlComponent extends Component {
+  @action
+  callOnInput(event) {
+    this.args.onInput(event.target.checked);
+  }
+}

package/addon/components/freestyle/usage/bool/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Bool::Control
     @value={{@value}}

package/addon/components/freestyle/usage/number/{control.hbs → control/index.hbs}

@@ -1,5 +1,6 @@
+{{! template-lint-disable require-input-label }}
 
-{{#if (is-present @min @max)}}
+{{#if this.shouldRenderRangeInput}}
   <input
     type="range"
     value={{@value}}

package/addon/components/freestyle/usage/number/{control.js → control/index.js}

@@ -1,7 +1,12 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { isPresent } from '@ember/utils';
 
 export default class FreestyleUsageNumberComponent extends Component {
+  get shouldRenderRangeInput() {
+    return isPresent(this.args.min) && isPresent(this.args.max);
+  }
+
   @action onInput(event) {
     let { value } = event.target;
     this.args.onInput(value ? parseFloat(value) : null);

package/addon/components/freestyle/usage/number/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Number::Control
     @value={{@value}}

package/addon/components/freestyle/usage/object/control/index.hbs

@@ -0,0 +1,5 @@
+{{#if @value}}
+  <div class="FreestyleUsageArgument-jsonViewer">
+    {{this.jsonTree}}
+  </div>
+{{/if}}

package/addon/components/freestyle/usage/object/control/index.js

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import JsonFormatter from 'json-formatter-js';
+
+const OPTIONS = {
+  animateClose: false,
+  animateOpen: false,
+  theme: 'dark',
+};
+
+export default class FreestyleUsageObjectControlComponent extends Component {
+  get jsonTree() {
+    const json = this.args.value;
+    const openDepth = this.args.jsonCollapseDepth;
+    const jsonFormatter = new JsonFormatter(json, openDepth, OPTIONS);
+
+    return jsonFormatter.render();
+  }
+}

package/addon/components/freestyle/usage/object/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Object::Control
     @value={{@value}}

package/addon/components/freestyle/usage/string/{control.hbs → control/index.hbs}

@@ -1,5 +1,7 @@
+{{! template-lint-disable require-input-label }}
+
 {{#if @options}}
-  <select {{on 'change' (pick 'target.value' @onInput)}}>
+  <select {{on 'change' this.callOnInput}}>
     {{#each @options as |optionValue|}}
       <option value={{optionValue}} selected={{eq optionValue @value}}>{{optionValue}}</option>
     {{/each}}
@@ -8,6 +10,6 @@
   <input
     type="text"
     value={{@value}}
-    {{on this.inputEvent (pick 'target.value' @onInput)}}
+    {{on this.inputEvent this.callOnInput}}
   />
 {{/if}}

package/addon/components/freestyle/usage/string/{control.js → control/index.js}

@@ -1,7 +1,13 @@
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 export default class FreestyleUsageStringControlComponent extends Component {
   get inputEvent() {
     return this.args.inputEvent || 'input';
   }
+
+  @action
+  callOnInput(event) {
+    this.args.onInput(event.target.value);
+  }
 }

package/addon/components/freestyle/usage/string/index.hbs

@@ -5,6 +5,7 @@
   @required={{@required}}
   @array={{@array}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::String::Control
     @options={{@options}}

package/addon/components/freestyle-collection/index.js

@@ -3,8 +3,7 @@ import { and, not } from '@ember/object/computed';
 import { A } from '@ember/array';
 import { next } from '@ember/runloop';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
 
 export default Component.extend({
   tagName: '',

package/addon/components/freestyle-dynamic/index.js

@@ -1,8 +1,7 @@
 import { assign } from '@ember/polyfills';
 import Component from '@ember/component';
-import { set, get, computed } from '@ember/object';
+import { action, set, get, computed } from '@ember/object';
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 
 export default Component.extend({
   tagName: '',

package/addon/components/freestyle-dynamic-input/index.hbs

@@ -3,22 +3,50 @@
     {{@propertyName}}:
   </label>
   {{#if this.isCheckbox}}
-    <Input @type="checkbox" @checked={{readonly @value}} @id={{this.inputId}} @change={{this.toggleCheckbox}} />
+    <input
+      checked={{@value}}
+      id={{this.inputId}}
+      type="checkbox"
+      {{on "input" this.toggleCheckbox}}
+    >
   {{else if this.isTextarea}}
-    <Textarea @value={{@value}} @id={{this.inputId}} @rows={{5}} @cols={{40}} @key-up={{this.sendChangedText}} />
+    <textarea
+      cols="40"
+      id={{this.inputId}}
+      rows="5"
+      value={{@value}}
+      {{on "input" this.sendChangedText}}
+    />
   {{else if this.isSelect}}
-    <select {{on 'change' this.onChange}}>
+    <select id={{this.inputId}} {{on "change" this.onChange}}>
       {{#each @options as |option|}}
         <FreestyleDynamicInputSelectOption @selectedValue={{@value}} @optionValue={{option}} />
       {{/each}}
     </select>
   {{else if this.isNumber}}
-    <Input @type="number" @value={{@value}} @id={{this.inputId}} @input={{this.onChangeWithNumericCoercion}} />
+    <input
+      id={{this.inputId}}
+      type="number"
+      value={{@value}}
+      {{on "input" this.onChangeWithNumericCoercion}}
+    >
   {{else if this.isRange}}
-    <Input @type="range" @id={{this.inputId}} @min={{@min}} @max={{@max}} @input={{this.onChangeWithNumericCoercion}} @value={{readonly @value}} />
+    <input
+      id={{this.inputId}}
+      max={{@max}}
+      min={{@min}}
+      type="range"
+      value={{@value}}
+      {{on "input" this.onChangeWithNumericCoercion}}
+    >
     {{@value}}
   {{else}}
-    <Input @value={{@value}} @id={{this.inputId}} @key-up={{this.onChange}} />
+    <input
+      id={{this.inputId}}
+      type="text"
+      value={{@value}}
+      {{on "input" this.onChange}}
+    >
   {{/if}}
   {{#if @description}}
     <small class="FreestyleDynamic-inputDescription">

package/addon/components/freestyle-dynamic-input/index.js

@@ -1,7 +1,7 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
-import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 
 export default Component.extend({
   tagName: '',
@@ -12,8 +12,8 @@ export default Component.extend({
   isNumber: equal('inputType', 'number'),
   isRange: equal('inputType', 'range'),
 
-  inputId: computed('elementId', 'propertyName', function () {
-    return `${this.elementId}_${this.propertyName}`;
+  inputId: computed('propertyName', function () {
+    return `${guidFor(this)}_${this.propertyName}`;
   }),
 
   @action
@@ -27,8 +27,8 @@ export default Component.extend({
     this.changeValueTo(ev.target.value);
   },
   @action
-  sendChangedText(text) {
-    this.changeValueTo(text);
+  sendChangedText(ev) {
+    this.changeValueTo(ev.target.value);
   },
   @action
   onChangeWithNumericCoercion(ev) {

package/addon/components/freestyle-palette/index.hbs

@@ -1,7 +1,7 @@
 <div class='FreestylePalette'>
-  <div class='FreestylePalette-title'>{{@title}}</div>
-  <div class='FreestylePalette-description'>{{@description}}</div>
-  {{#each @colors as |color|}}
+  <div class='FreestylePalette-title'>{{this.title}}</div>
+  <div class='FreestylePalette-description'>{{this.description}}</div>
+  {{#each this.colors as |color|}}
     <FreestylePaletteItem @color={{color}} />
   {{/each}}
   {{yield}}

package/addon/components/freestyle-palette/index.js

@@ -5,6 +5,7 @@ import { computed } from '@ember/object';
 export default Component.extend({
   tagName: '',
   title: 'Freestyle Palette',
+  description: 'Represents all colors used in this project.',
 
   colors: computed('colorPalette', function () {
     return A(

package/addon/components/freestyle-palette-item/index.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { computed } from '@ember/object';
 
 export default Component.extend({

package/addon/components/freestyle-section/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable ember/no-component-lifecycle-hooks */
-
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 

package/addon/components/freestyle-showdown-content/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable ember/no-component-lifecycle-hooks */
 /* eslint-disable ember/require-tagless-components */
+import { deprecate } from '@ember/debug';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 
@@ -8,7 +9,20 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
+
+    deprecate(
+      'The `<FreestyleShowdownContent />` component is deprecated. Please use `ember-cli-showdown` directly if you need Markdown support.',
+      false,
+      {
+        for: 'ember-freestyle',
+        id: 'freestyle-showdown-content-component',
+        since: '0.13.0',
+        until: '0.14.0',
+      }
+    );
+
     let pre = this.element.getElementsByTagName('pre');
+
     if (pre[0]) {
       this.emberFreestyle.highlight(pre[0]);
     }

package/addon/components/freestyle-source/index.js

@@ -1,9 +1,8 @@
 /* eslint-disable ember/no-component-lifecycle-hooks */
 /* eslint-disable ember/require-tagless-components */
-import { set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import { computed, get } from '@ember/object';
+import { computed, get, set } from '@ember/object';
 
 export default Component.extend({
   initialHighlightComplete: false,

package/addon/components/freestyle-subsection/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable ember/no-component-lifecycle-hooks */
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 

package/addon/components/freestyle-typeface/index.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { computed } from '@ember/object';
 
 export default Component.extend({