From 3046f94d4d771a20c19bee4cbdc151d298d224b2 Mon Sep 17 00:00:00 2001
From: Christian Trosclair <xn@users.noreply.github.com>
Date: Fri, 19 Dec 2025 08:01:51 -0500
Subject: [PATCH] Refactor README and code for consistency and clarity

- Updated formatting in README.md for media query definitions and template usage.
- Changed import statements from `inject as service` to `service` for cleaner syntax in media.js and testing-helpers-test.js.
- Added spacing for improved readability in various sections of README.md.
---
 README.md                                 | 16 ++++++++++------
 addon/helpers/media.js                    |  2 +-
 tests/integration/testing-helpers-test.js |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 3ef2c4ce..b0ef030e 100644
--- a/README.md
+++ b/README.md
@@ -23,10 +23,10 @@ After that, simply register the breakpoints that are pertinent to your applicati
 
 ```js
 export default {
-  mobile:  '(max-width: 767px)',
-  tablet:  '(min-width: 768px) and (max-width: 991px)',
+  mobile: '(max-width: 767px)',
+  tablet: '(min-width: 768px) and (max-width: 991px)',
   desktop: '(min-width: 992px) and (max-width: 1200px)',
-  jumbo:   '(min-width: 1201px)'
+  jumbo: '(min-width: 1201px)'
 };
 ```
 
@@ -37,7 +37,7 @@ Now you can inject the _media_ service in any object with access to the containe
 
 ```js
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class SomeController extends Controller {
   @service media;
@@ -63,7 +63,7 @@ queries in CSS, instead simply use classes to style the different devices.
 In your application.hbs template:
 
 ```hbs
-<div class="{{media 'classNames'}}">
+<div class='{{media "classNames"}}'>
   {{outlet}}
 </div>
 ```
@@ -103,6 +103,7 @@ When updating this addon, make sure to run the generate command. Choose `no` to
 ## Updating to 3.x
 
 The major breaking changes to update to 3.x are so far:
+
 - Test helpers are now all covered by `setBreakpoint`
 - Calling media breakpoints in templates is now done with a helper. `{{media.isDesktop}}` -> `{{media 'isDesktop'}}`
 - Tests run into issues if you have not ported to the new style tests (https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md)
@@ -116,10 +117,12 @@ Updating to 5.x should be seamless for modern (post-Octane) Ember apps.
 If you are using engines and you want to share responsive behaviour between the main application and engine, you must pass the 'media' service to the engine app.
 
 ## Testing Helpers
+
 This project provides a single test helper which works in both integration and acceptance tests to assist in testing
 content specific to different breakpoints.
 
 ### Acceptance Tests
+
 ```javascript
 ...
 import { setBreakpoint } from 'ember-responsive/test-support';
@@ -135,6 +138,7 @@ test('example test', async function (assert) {
 ```
 
 ### Integration Tests
+
 ```javascript
 ...
 import { setBreakpoint } from 'ember-responsive/test-support';
@@ -152,7 +156,7 @@ test('it renders', function (assert) {
 
 ### Multiple Breakpoints in Tests
 
-You can set multiple breakpoints to the helper.  This is useful if your `breakpoints.js` file defines breakpoints
+You can set multiple breakpoints to the helper. This is useful if your `breakpoints.js` file defines breakpoints
 that overlap.
 
 ```javascript
diff --git a/addon/helpers/media.js b/addon/helpers/media.js
index 357f0867..b41dc4d5 100644
--- a/addon/helpers/media.js
+++ b/addon/helpers/media.js
@@ -1,5 +1,5 @@
 import Helper from '@ember/component/helper';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class Media extends Helper {
   @service media;
diff --git a/tests/integration/testing-helpers-test.js b/tests/integration/testing-helpers-test.js
index 26def410..50ae4c5f 100644
--- a/tests/integration/testing-helpers-test.js
+++ b/tests/integration/testing-helpers-test.js
@@ -4,7 +4,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import Component from '@ember/component';
 import hbs from 'htmlbars-inline-precompile';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { setBreakpoint } from 'ember-responsive/test-support';
 
 module('Test Helpers | setBreakpoint', function (hooks) {