add ember-responsive

package.json

@@ -98,6 +98,7 @@
     "ember-qunit": "8.0.2",
     "ember-resolver": "10.1.1",
     "ember-resources": "^6.3.1",
+    "ember-responsive": "^5.0.0",
     "ember-simple-auth": "6.0.0-rc.1",
     "ember-source": "5.1.2",
     "ember-truth-helpers": "^3.1.1",

readme.md

@@ -91,6 +91,7 @@ yarn dev
 1. `ember-notify`
 1. `ember-ref-bucket`
 1. `ember-modal-dialog`
+1. `ember-responsive`
 
 [(see code for samples)](https://github.com/lifeart/demo-ember-vite/tree/master/src/addons)
 

src/addons/ember-responsive.ts

@@ -0,0 +1,9 @@
+import MediaHelper from 'ember-responsive/addon/helpers/media.js';
+import MediaService from 'ember-responsive/addon/services/media.js';
+
+const registry = {
+  'helper:media': MediaHelper,
+  'service:media': MediaService,
+};
+
+export default registry;

src/addons/index.ts

@@ -11,6 +11,7 @@ import EmberPageTitle from './ember-page-title';
 import EmberData from './ember-data';
 import EmberNotify from './ember-notify';
 import EmberModalDialog from './ember-modal-dialog';
+import EmberResponsive from './ember-responsive';
 
 const registry = {
   ...EmberSimpleAuthRegistry,
@@ -26,6 +27,7 @@ const registry = {
   ...EmberData,
   ...EmberNotify,
   ...EmberModalDialog,
+  ...EmberResponsive,
 };
 
 export default registry;

src/config/breakpoints.ts

@@ -0,0 +1,6 @@
+export default {
+  mobile: '(max-width: 767px)',
+  tablet: '(min-width: 768px) and (max-width: 991px)',
+  desktop: '(min-width: 992px) and (max-width: 1200px)',
+  jumbo: '(min-width: 1201px)',
+};

src/config/initializer.ts

@@ -6,6 +6,8 @@ import { default as initializer } from '../initializers/logger';
 import { default as logger } from '../instance-initializers/logger';
 import { default as modalDialog } from '../instance-initializers/ember-modal-dialog';
 import { default as emberDataInitializer } from '../initializers/ember-data';
+import { default as emberResponsive } from '../initializers/ember-responsive';
+import breakpoints from './breakpoints';
 
 export function init(
   Application: typeof ApplicationClass,
@@ -14,6 +16,7 @@ export function init(
   // Init initializers
   Application.initializer(initializer);
   Application.initializer(emberDataInitializer);
+  Application.initializer(emberResponsive);
 
   // Init instance initializers
   Application.instanceInitializer(logger);
@@ -34,6 +37,7 @@ export function init(
 
   app.register('config:environment', ENV);
   app.register('router:main', Router);
+  app.register('breakpoints:main', breakpoints);
 
   return app;
 }

src/initializers/ember-responsive.ts

@@ -0,0 +1,6 @@
+import { initialize } from 'ember-responsive/addon/initializers/responsive.js';
+
+export default {
+  name: 'ember-responsive',
+  initialize,
+};

src/templates/application.hbs

@@ -8,6 +8,17 @@
 
 <div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-8'>
   <div class='mx-auto max-w-3xl'>
+
+  {{#if (media 'isDesktop')}}
+    looks like you on Desktop
+  {{else if (media 'isTablet')}}
+    looks like you on Tablet
+  {{else if (media 'isMobile')}}
+    looks like you on Mobile
+  {{else}}
+    wow
+  {{/if}}
+
     {{outlet}}
 
     <div class='rounded-md bg-blue-50 p-4 mt-8'>

vite.config.ts

@@ -287,7 +287,7 @@ export default defineConfig(({ mode }) => {
       babel({
         // regexp to match files in src folder
         filter:
-          /^.*(@ember-data|ember-notify|ember-wormhole|ember-modal-dialog|ember-bootstrap|ember-ref-bucket|tracked-toolbox|ember-power-select|ember-basic-dropdown|page-title)\/.*\.(ts|js|hbs)$/,
+          /^.*(@ember-data|ember-responsive|ember-notify|ember-wormhole|ember-modal-dialog|ember-bootstrap|ember-ref-bucket|tracked-toolbox|ember-power-select|ember-basic-dropdown|page-title)\/.*\.(ts|js|hbs)$/,
         babelConfig: addonBabelConfig(
           [
             dropImportSync(['ember-modal-dialog']),

yarn.lock

@@ -5907,6 +5907,13 @@ ember-resources@^6.3.1:
     "@embroider/macros" "^1.12.3"
     ember-async-data "^1.0.1"
 
+ember-responsive@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ember-responsive/-/ember-responsive-5.0.0.tgz#729e4fb3d2651a573600333aaa3b3d7cbd9c4642"
+  integrity sha512-JDwNIKHNcHrILGkpLqLqZ1idO7hxxt6f4M2wmiktOuzhBm2/JxUjkK+yec+tzIzXaD7rrl2/S7STa/Uj5s6TEw==
+  dependencies:
+    ember-cli-babel "^7.26.11"
+
 ember-rfc176-data@^0.3.15, ember-rfc176-data@^0.3.17:
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.17.tgz#d4fc6c33abd6ef7b3440c107a28e04417b49860a"