Drop service class

The `responsive-image` service has been dropped and replaced with a simple static module from the new `core` package.
simonihmig · Apr 26, 2024 · 5a69e21 · 5a69e21
1 parent 71270e7
commit 5a69e21
Show file tree

Hide file tree

Showing 18 changed files with 85 additions and 198 deletions.
diff --git a/.changeset/tidy-toys-hide.md b/.changeset/tidy-toys-hide.md
@@ -0,0 +1,7 @@
+---
+'ember-responsive-image': major
+---
+
+Drop service class
+
+The `responsive-image` service has been dropped and replaced with a simple static module from the new `core` package.
diff --git a/README.md b/README.md
@@ -439,7 +439,7 @@ The options for configuring the processing of local images are handled by the `@
 
 ## Advanced Usage
 
-The addon provides a service and a helper for more advances usages if required. This is described in detail in the [Advanced Usage documentation](docs/ADVANCED.md).
+The addon provides a helper for more advances usages if required. This is described in detail in the [Advanced Usage documentation](docs/ADVANCED.md).
 
 ## Contributing
 

diff --git a/docs/ADVANCED.md b/docs/ADVANCED.md
@@ -1,30 +1,5 @@
 # Advanced Usage
 
-## Service
-
-The `responsive-image-local` service provides the available images (local privider) with the sizes for a given origin image, and retrieves the image that fits for the current screen size.
-
-```js
-let availableImages = responsiveImageService.getImages('myImage.png');
-/**
-availableImages contains now: 
-[
-    {width: 640, height: 320, image: "/assets/images/responsive/myImage640w.png"},
-    {width: 750, height: 375, image: "/assets/images/responsive/myImage750w.png"},
-    ...
-    {width: 2048, height: 1012, image: "/assets/images/responsive/myImage2048w.png"}
-]
-*/
-
-let imageData = responsiveImageService.getImageDataBySize('myImage.png', 100); // The size argument is in ´vw´, 100 is the default and can be omitted
-// {width: 750, height: 375, image: "/assets/images/responsive/myImage750w.png"}
-
-let fittingImage = responsiveImageService.getImageBySize('myImage.png', 100); // The size argument is in ´vw´, 100 is the default and can be omitted
-// "/assets/images/responsive/myImage1080w.png"
-```
-
-The base width to calculate the necessary image width is the `screen.width` assigned to the `screenWidth` property of the services. If this doesn't fit your needs, you can assign an other value, e.g. `document.documentElement.clientWidth`.
-
 ## Helper
 
 The `responsive-image-resolve` helper provides the image url that fits for the current screen size. The first parameter is the name of the origin image.

diff --git a/packages/cloudinary/package.json b/packages/cloudinary/package.json
@@ -38,15 +38,13 @@
   },
   "peerDependencies": {
     "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "ember-responsive-image": "workspace:^"
+    "@glimmer/tracking": "^1.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.24.4",
     "@babel/plugin-transform-typescript": "7.24.4",
     "@babel/runtime": "7.24.4",
     "@ember-responsive-image/core": "workspace:*",
-    "ember-responsive-image": "workspace:*",
     "@embroider/addon-dev": "4.3.1",
     "@glimmer/component": "1.1.2",
     "@glimmer/tracking": "1.1.2",

diff --git a/packages/cloudinary/src/helpers/responsive-image-cloudinary-provider.ts b/packages/cloudinary/src/helpers/responsive-image-cloudinary-provider.ts
@@ -1,11 +1,6 @@
-import { inject as service } from '@ember/service';
-import Helper from '@ember/component/helper';
 import { assert } from '@ember/debug';
 import { getOwnConfig } from '@embroider/macros';
 import type { CloudinaryConfig } from '../types.ts';
-
-import type { ResponsiveImageService } from 'ember-responsive-image';
-
 import type { ImageType, ImageData } from '@ember-responsive-image/core';
 
 interface CloudinaryOptions {
@@ -14,14 +9,6 @@ interface CloudinaryOptions {
   quality?: number;
 }
 
-interface CloudinaryProviderSignature {
-  Args: {
-    Positional: [string];
-    Named: CloudinaryOptions;
-  };
-  Return: ImageData;
-}
-
 const URL_REGEX = /https?:/;
 
 const formatMap: Record<string, string> = {
@@ -32,11 +19,10 @@ function normalizeSrc(src: string): string {
   return src[0] === '/' ? src.slice(1) : src;
 }
 
-export const provider = (
+export default function CloudinaryProvider(
   image: string,
-  _service: ResponsiveImageService,
-  options: CloudinaryOptions,
-): ImageData => {
+  options: CloudinaryOptions = {},
+): ImageData {
   const cloudName = getOwnConfig<CloudinaryConfig | undefined>()?.cloudName;
   assert(
     'cloudName must be set for cloudinary provider!',
@@ -72,13 +58,4 @@ export const provider = (
       }`;
     },
   };
-};
-
-export default class CloudinaryProvider extends Helper<CloudinaryProviderSignature> {
-  @service
-  responsiveImage!: ResponsiveImageService;
-
-  compute([image]: [string], options: CloudinaryOptions): ImageData {
-    return provider(image, this.responsiveImage, options);
-  }
 }
diff --git a/packages/core/src/env.ts b/packages/core/src/env.ts
@@ -0,0 +1,23 @@
+// import { config } from '../config.ts';
+
+import type { Env } from './types';
+
+const screenWidth = typeof screen !== 'undefined' ? screen.width : 320;
+const devicePixelRatio = window?.devicePixelRatio ?? 1;
+const physicalWidth = screenWidth * devicePixelRatio;
+// TODO: figure out user config
+// const deviceWidths =  config.deviceWidths;
+const deviceWidths = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+
+export const env: Env = {
+  screenWidth,
+  physicalWidth,
+  devicePixelRatio,
+  deviceWidths,
+};
+
+export function getDestinationWidthBySize(size = 100): number {
+  const factor = size / 100;
+
+  return physicalWidth * factor;
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,2 +1,4 @@
-export type * from './types.ts';
 export { findMatchingImage } from './match.ts';
+export * from './env.ts';
+
+export type * from './types.ts';
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -35,3 +35,10 @@ export interface ImageOutputResult {
   width: number;
   format: ImageType;
 }
+
+export interface Env {
+  screenWidth: number;
+  physicalWidth: number;
+  devicePixelRatio: number;
+  deviceWidths: number[];
+}
diff --git a/packages/ember-responsive-image/package.json b/packages/ember-responsive-image/package.json
@@ -112,8 +112,7 @@
     "main": "addon-main.js",
     "app-js": {
       "./components/responsive-image.js": "./dist/_app_/components/responsive-image.js",
-      "./helpers/responsive-image-resolve.js": "./dist/_app_/helpers/responsive-image-resolve.js",
-      "./services/responsive-image.js": "./dist/_app_/services/responsive-image.js"
+      "./helpers/responsive-image-resolve.js": "./dist/_app_/helpers/responsive-image-resolve.js"
     }
   },
   "exports": {

diff --git a/packages/ember-responsive-image/src/components/responsive-image.ts b/packages/ember-responsive-image/src/components/responsive-image.ts
@@ -1,10 +1,9 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
-import type ResponsiveImageService from '../services/responsive-image.ts';
 import { assert } from '@ember/debug';
 import { cached, tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { macroCondition, dependencySatisfies } from '@embroider/macros';
+import { env, getDestinationWidthBySize } from '@ember-responsive-image/core';
 import type {
   ImageType,
   LqipBlurhash,
@@ -33,7 +32,7 @@ export interface ResponsiveImageComponentSignature {
   };
 }
 
-interface PictureSource {
+interface ImageSource {
   srcset: string;
   type: ImageType;
   mimeType: string;
@@ -56,9 +55,6 @@ const typeScore = new Map<ImageType, number>([
 ]);
 
 export default class ResponsiveImageComponent extends Component<ResponsiveImageComponentSignature> {
-  @service
-  responsiveImage!: ResponsiveImageService;
-
   @tracked
   isLoaded = false;
 
@@ -80,12 +76,12 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
       : Layout.FIXED;
   }
 
-  get sources(): PictureSource[] {
+  get sources(): ImageSource[] {
     if (this.layout === Layout.RESPONSIVE) {
       return this.args.src.imageTypes.map((type) => {
         let widths = this.args.src.availableWidths;
         if (!widths) {
-          widths = this.responsiveImage.deviceWidths;
+          widths = env.deviceWidths;
         }
         const sources: string[] = widths.map((width) => {
           const url = this.args.src.imageUrlFor(width, type);
@@ -128,7 +124,7 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
     }
   }
 
-  get sourcesSorted(): PictureSource[] {
+  get sourcesSorted(): ImageSource[] {
     return this.sources.sort(
       (a, b) => (typeScore.get(b.type) ?? 0) - (typeScore.get(a.type) ?? 0),
     );
@@ -151,9 +147,7 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
   @cached
   get width(): number | undefined {
     if (this.layout === Layout.RESPONSIVE) {
-      return this.responsiveImage.getDestinationWidthBySize(
-        this.args.size ?? 0,
-      );
+      return getDestinationWidthBySize(this.args.size);
     } else {
       if (this.args.width) {
         return this.args.width;

diff --git a/packages/ember-responsive-image/src/helpers/responsive-image-resolve.ts b/packages/ember-responsive-image/src/helpers/responsive-image-resolve.ts
@@ -1,39 +1,18 @@
-import { inject as service } from '@ember/service';
+import {
+  getDestinationWidthBySize,
+  type ImageData,
+  type ImageType,
+} from '@ember-responsive-image/core';
 import { htmlSafe } from '@ember/template';
-import Helper from '@ember/component/helper';
-import ResponsiveImageService from '../services/responsive-image.ts';
-import type { ImageType, ImageData } from '@ember-responsive-image/core';
 
-interface ResponsiveImageResolveSignature {
-  Args: {
-    Positional: [ImageData];
-    Named: {
-      size?: number;
-      format?: ImageType;
-    };
-  };
-  Return: ReturnType<typeof htmlSafe> | undefined;
-}
-
-/**
- * @class responsiveImageResolve
- * @namespace Helpers
- * @extends Ember.Helper
- * @public
- */
-export default class ResponsiveImageResolve extends Helper<ResponsiveImageResolveSignature> {
-  @service
-  responsiveImage!: ResponsiveImageService;
-
-  compute(
-    [data]: [ImageData],
-    {
-      size,
-      format = data.imageTypes[0],
-    }: { size?: number; format?: ImageType },
-  ): ReturnType<typeof htmlSafe> | undefined {
-    const width = this.responsiveImage.getDestinationWidthBySize(size ?? 0);
+export default function responsiveImageResolve(
+  data: ImageData,
+  {
+    size,
+    format = data.imageTypes[0],
+  }: { size?: number; format?: ImageType } = {},
+): ReturnType<typeof htmlSafe> | undefined {
+  const width = getDestinationWidthBySize(size);
 
-    return htmlSafe(data.imageUrlFor(width, format));
-  }
+  return htmlSafe(data.imageUrlFor(width, format));
 }
diff --git a/packages/ember-responsive-image/src/index.ts b/packages/ember-responsive-image/src/index.ts
@@ -1,4 +1,3 @@
 export { default as ResponsiveImage } from './components/responsive-image.ts';
-export { default as ResponsiveImageService } from './services/responsive-image.ts';
 export { default as resolve } from './helpers/responsive-image-resolve.ts';
 export type { ImageData } from '@ember-responsive-image/core';
diff --git a/packages/ember-responsive-image/src/services/responsive-image.ts b/packages/ember-responsive-image/src/services/responsive-image.ts
diff --git a/packages/imgix/package.json b/packages/imgix/package.json
@@ -38,15 +38,13 @@
   },
   "peerDependencies": {
     "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "ember-responsive-image": "workspace:^"
+    "@glimmer/tracking": "^1.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.24.4",
     "@babel/plugin-transform-typescript": "7.24.4",
     "@babel/runtime": "7.24.4",
     "@ember-responsive-image/core": "workspace:*",
-    "ember-responsive-image": "workspace:*",
     "@embroider/addon-dev": "4.3.1",
     "@glimmer/component": "1.1.2",
     "@glimmer/tracking": "1.1.2",

diff --git a/packages/imgix/src/helpers/responsive-image-imgix-provider.ts b/packages/imgix/src/helpers/responsive-image-imgix-provider.ts
@@ -1,21 +1,8 @@
-import { inject as service } from '@ember/service';
-import Helper from '@ember/component/helper';
 import { assert } from '@ember/debug';
 import { getOwnConfig } from '@embroider/macros';
 import type { ImgixConfig } from '../types.ts';
-
-import type { ResponsiveImageService } from 'ember-responsive-image';
-
 import type { ImageType, ImageData } from '@ember-responsive-image/core';
 
-interface ImgixProviderSignature {
-  Args: {
-    Positional: [string];
-    Named: ImgixOptions;
-  };
-  Return: ImageData;
-}
-
 interface ImgixOptions {
   params?: Record<string, string | number>;
   formats?: ImageType[];
@@ -30,11 +17,10 @@ function normalizeSrc(src: string): string {
   return src[0] === '/' ? src.slice(1) : src;
 }
 
-export const provider = (
+export default function imgixProvider(
   image: string,
-  _service: ResponsiveImageService,
-  options: ImgixOptions,
-): ImageData => {
+  options: ImgixOptions = {},
+): ImageData {
   const domain = getOwnConfig<ImgixConfig | undefined>()?.domain;
   assert('domain must be set for imgix provider!', typeof domain === 'string');
 
@@ -68,13 +54,4 @@ export const provider = (
       return url.toString();
     },
   };
-};
-
-export default class ImgixProvider extends Helper<ImgixProviderSignature> {
-  @service
-  responsiveImage!: ResponsiveImageService;
-
-  compute([image]: [string], options: ImgixOptions): ImageData {
-    return provider(image, this.responsiveImage, options);
-  }
 }