Merge pull request #586 from simonihmig/rename-packages

Rename packages to use @responsive-image scope

.changeset/brave-bobcats-kneel.md

@@ -0,0 +1,9 @@
+---
+"@responsive-image/blurhash": major
+"@responsive-image/webpack": major
+"@responsive-image/ember": major
+"@responsive-image/core": major
+"@responsive-image/cdn": major
+---
+
+Rename all packages to be under a new @responsive-image scope

README.md

@@ -1,4 +1,4 @@
-# ember-responsive-image
+# responsive-image
 
 [![CI](https://github.com/simonihmig/ember-responsive-image/actions/workflows/ci.yml/badge.svg)](https://github.com/simonihmig/ember-responsive-image/actions/workflows/ci.yml)
 [![npm version](https://badge.fury.io/js/ember-responsive-image.svg)](https://badge.fury.io/js/ember-responsive-image)
@@ -37,9 +37,9 @@ Advanced optimization techniques inspired amongst others by the blog post [Maxim
 
 The `<ResponsiveImage/>` component provided with this addon expects to receive image data for the image it is supposed to display. Unlike a simple `<img>` tag, it will need more data than just the URL to a single image: it needs multiple images in different resolutions and image formats, but also some additional meta data like the aspect ratio or data related to more advanced use cases like [Low Quality Image PLaceholders](#lqip).
 
-This data can come from different sources. The most common one is to let the build plugins provided by [`@ember-responsive-image/webpack`](./packages/webpack/README.md) process local images (i.e. static images that you have in your git repo) and provide the necessary data. But you can also have the processed image data come from other sources like Image CDNs, see [Image Providers](#image-providers).
+This data can come from different sources. The most common one is to let the build plugins provided by [`@responsive-image/webpack`](./packages/webpack/README.md) process local images (i.e. static images that you have in your git repo) and provide the necessary data. But you can also have the processed image data come from other sources like Image CDNs, see [Image Providers](#image-providers).
 
-For the remainder of this documentation we will assume you will be dealing with local images using `@ember-responsive-image/webpack`.
+For the remainder of this documentation we will assume you will be dealing with local images using `@responsive-image/webpack`.
 
 ## Getting started
 
@@ -48,16 +48,16 @@ For the remainder of this documentation we will assume you will be dealing with
 In your application's directory:
 
 ```bash
-npm install ember-responsive-image @ember-responsive-image/webpack
+npm add @responsive-image/ember @responsive-image/webpack
 // or
-yarn add ember-responsive-image @ember-responsive-image/webpack
+yarn add @responsive-image/ember @responsive-image/webpack
 // or
-pnpm add ember-responsive-image @ember-responsive-image/webpack
+pnpm add @responsive-image/ember @responsive-image/webpack
 ```
 
 ### Setting up Webpack
 
-As explained above, `@ember-responsive-image/webpack` is provided for the Webpack-native build integration. Webpack is used in Ember apps, but in different ways depending on whether you are using Embroider already or a classic Ember CLI build with `ember-auto-import`.
+As explained above, `@responsive-image/webpack` is provided for the Webpack-native build integration. Webpack is used in Ember apps, but in different ways depending on whether you are using Embroider already or a classic Ember CLI build with `ember-auto-import`.
 
 In either case we need to tell Webpack which files it needs to process using the addon's custom webpack loaders. We do this by setting up a module rule such as this:
 
@@ -67,7 +67,7 @@ In either case we need to tell Webpack which files it needs to process using the
     rules: [
       {
         resourceQuery: /responsive/,
-        use: require('@ember-responsive-image/webpack').setupLoaders(),
+        use: require('@responsive-image/webpack').setupLoaders(),
       },
     ],
   }
@@ -89,7 +89,7 @@ return require('@embroider/compat').compatBuild(app, Webpack, {
         rules: [
           {
             resourceQuery: /responsive/,
-            use: require('@ember-responsive-image/webpack').setupLoaders(),
+            use: require('@responsive-image/webpack').setupLoaders(),
           },
         ],
       },
@@ -98,7 +98,7 @@ return require('@embroider/compat').compatBuild(app, Webpack, {
 });
 ```
 
-For more information on how to configure `@ember-responsive-image/webpack` and `setupLoaders()` refer to the [`@ember-responsive-image/webpack` documentation](./packages/webpack/README.md).
+For more information on how to configure `@responsive-image/webpack` and `setupLoaders()` refer to the [`@responsive-image/webpack` documentation](./packages/webpack/README.md).
 
 #### Classic build with ember-auto-import
 
@@ -113,7 +113,7 @@ let app = new EmberApp(defaults, {
         rules: [
           {
             resourceQuery: /responsive/,
-            use: require('@ember-responsive-image/webpack').setupLoaders(),
+            use: require('@responsive-image/webpack').setupLoaders(),
           },
         ],
       },
@@ -122,9 +122,9 @@ let app = new EmberApp(defaults, {
 });
 ```
 
-For more information on how to configure `@ember-responsive-image/webpack` and `setupLoaders()` refer to the [`@ember-responsive-image/webpack` documentation](./packages/webpack/README.md).
+For more information on how to configure `@responsive-image/webpack` and `setupLoaders()` refer to the [`@responsive-image/webpack` documentation](./packages/webpack/README.md).
 
-Note the use of [`allowAppImports`](https://github.com/embroider-build/ember-auto-import#app-imports) here, which is a way to make the build use ember-auto-import and thus Webpack to handle the files configured by the glob pattern of this configuration option. You can place the images files in a central subfolder under `/app`, like `app/images` as in this example, or even colocate them next to other JavaScript files by targeting specific image extensions instead of certain folders (e.g. `**/*/*.jpg`). Either way make sure that image files you import for use by `ember-responsive-image` are correctly covered by at least one glob pattern passed to `allowAppImports`!
+Note the use of [`allowAppImports`](https://github.com/embroider-build/ember-auto-import#app-imports) here, which is a way to make the build use ember-auto-import and thus Webpack to handle the files configured by the glob pattern of this configuration option. You can place the images files in a central subfolder under `/app`, like `app/images` as in this example, or even colocate them next to other JavaScript files by targeting specific image extensions instead of certain folders (e.g. `**/*/*.jpg`). Either way make sure that image files you import for use by `@responsive-image/ember` are correctly covered by at least one glob pattern passed to `allowAppImports`!
 
 ### TypeScript usage
 
@@ -138,7 +138,7 @@ you need to import the addon's Glint template registry and `extend` your app's r
 ```ts
 import '@glint/environment-ember-loose';
 
-import type ResponsiveImageRegistry from 'ember-responsive-image/template-registry';
+import type ResponsiveImageRegistry from '@responsive-image/ember/template-registry';
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry
@@ -161,7 +161,7 @@ Add this declaration to a file, e.g. your app's `types/global.d.ts`:
 
 ```ts
 declare module '*responsive' {
-  import { ImageData } from 'ember-responsive-image';
+  import { ImageData } from '@responsive-image/ember';
   const value: ImageData;
   export default value;
 }
@@ -171,7 +171,7 @@ declare module '*responsive' {
 
 ### Importing images
 
-When Webpack is set up correctly as explained above, we can start to import images that are then being processed by `@ember-responsive-image/webpack`:
+When Webpack is set up correctly as explained above, we can start to import images that are then being processed by `@responsive-image/webpack`:
 
 ```js
 import heroImage from './hero.jpg?responsive';
@@ -393,7 +393,7 @@ is less suited if you have just a few images, but shines if you need placeholder
 So far we have only dealt with local images - static images that are commonly part of your app's git repo and get processed by this addon during the build process.
 But this addon provides even a more versatile abstraction to use any kind of (remote) images: image providers.
 
-All the `<ResponsiveImage @src={{imageData}}/>` component needs is an [`ImageData`](./packages/ember-responsive-image/src/types.ts) structure, which contains some meta data for a given image, and a function to compute the actual URL for each referenced image, based on its width and type. This is what importing an image using Webpack loaders returns as explained above, but it is not restricted to that. You could pass that data structure as a static POJO, or generate it more dynamically using a simple function (helper).
+All the `<ResponsiveImage @src={{imageData}}/>` component needs is an [`ImageData`](./packages/ember/src/types.ts) structure, which contains some meta data for a given image, and a function to compute the actual URL for each referenced image, based on its width and type. This is what importing an image using Webpack loaders returns as explained above, but it is not restricted to that. You could pass that data structure as a static POJO, or generate it more dynamically using a simple function (helper).
 
 Simply pass the result of the helper as the `@src` of the component:
 
@@ -413,14 +413,14 @@ This addon comes with additional helpers for these image providers, please refer
 
 ## Configuration
 
-The configuration of the main `ember-responsive-image` addon is optional. To do so, add the configuration in your app's `config/addons.js` file (create it if not existing yet):
+The configuration of the main `@responsive-image/ember` addon is optional. To do so, add the configuration in your app's `config/addons.js` file (create it if not existing yet):
 
 ```js
 // config/addons.js
 'use strict';
 
 module.exports = {
-  'ember-responsive-image': {
+  '@responsive-image/ember': {
     env: {
       deviceWidths: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     },
@@ -432,10 +432,10 @@ Configuration options:
 
 - **deviceWidths**: an array of widths representing the typical screen widths of your user's devices, used when the available image widths are not known beforehand, like when using an image CDN. Default: `[640, 750, 828, 1080, 1200, 1920, 2048, 3840]`
 
-The options for configuring the processing of local images are handled by the `@ember-responsive-image/webpack` package, and other options related to image CDNs or BlurHash-support are handled by their respective sub-packages as well, so please refer to their documentation for detailed configuration instructions:
+The options for configuring the processing of local images are handled by the `@responsive-image/webpack` package, and other options related to image CDNs or BlurHash-support are handled by their respective sub-packages as well, so please refer to their documentation for detailed configuration instructions:
 
-- [`@ember-responsive-image/webpack`](./packages/webpack/README.md)
-- [`@ember-responsive-image/blurhash`](./packages/blurhash/README.md)
+- [`@responsive-image/webpack`](./packages/webpack/README.md)
+- [`@responsive-image/blurhash`](./packages/blurhash/README.md)
 - [Cloudinary](./docs/cdn/cloudinary.md)
 - [imgix](./docs/cdn/imgix.md)
 

docs/cdn/cloudinary.md

@@ -1,6 +1,6 @@
 # Cloudinary
 
-A provider helper for `ember-responsive-image` for the [Cloudinary](https://cloudinary.com) image CDN.
+A provider helper for `responsive-image` for the [Cloudinary](https://cloudinary.com) image CDN.
 
 ## Usage
 

docs/cdn/imgix.md

@@ -1,6 +1,6 @@
 # imgix
 
-A provider helper for `ember-responsive-image` for the [imgix](https://imgix.com/) image CDN.
+A provider helper for `responsive-image` for the [imgix](https://imgix.com/) image CDN.
 
 ## Usage
 

package.json

@@ -1,17 +1,15 @@
 {
-  "name": "ember-responsive-image",
-  "version": "0.0.0",
   "private": true,
   "repository": "https://github.com/simonihmig/ember-responsive-image",
   "license": "MIT",
   "author": "Simon Ihmig <simon.ihmig@gmail.com>",
   "scripts": {
-    "build": "pnpm --filter @ember-responsive-image/core run build && pnpm --filter @ember-responsive-image/cdn run build && pnpm --filter ember-responsive-image run build && pnpm --filter @ember-responsive-image/webpack run build && pnpm --filter @ember-responsive-image/blurhash run build",
+    "build": "pnpm --filter @responsive-image/core run build && pnpm --filter @responsive-image/cdn run build && pnpm --filter @responsive-image/ember run build && pnpm --filter @responsive-image/webpack run build && pnpm --filter @responsive-image/blurhash run build",
     "lint": "pnpm run -r lint",
     "lint:fix": "pnpm run -r lint:fix",
     "prepare": "pnpm build",
     "start": "concurrently 'npm:start:*' --restart-after 5000 --prefix-colors cyan,white,yellow",
-    "start:addon": "pnpm --filter ember-responsive-image run start",
+    "start:addon": "pnpm --filter @responsive-image/ember run start",
     "start:test": "pnpm --filter test-app run start",
     "test": "pnpm run -r test"
   },

packages/blurhash/README.md

@@ -1,20 +1,20 @@
-# @ember-responsive-image/blurhash
+# @responsive-image/blurhash
 
 Add support for [BlurHash](https://blurha.sh/) encoded [Low Quality Image Placeholders](../../README.md#lqip) (LQIP) to ember-responsive-images.
 
 ## Compatibility
 
 - Webpack v5
-- requires using `@ember-responsive-image/webpack`
+- requires using `@responsive-image/webpack`
 
 ## Installation
 
 ```
-npm install @ember-responsive-image/blurhash @ember-responsive-image/webpack
+npm install @responsive-image/blurhash @responsive-image/webpack
 // or
-yarn add @ember-responsive-image/blurhash @ember-responsive-image/webpack
+yarn add @responsive-image/blurhash @responsive-image/webpack
 // or
-pnpm add @ember-responsive-image/blurhash @ember-responsive-image/webpack
+pnpm add @responsive-image/blurhash @responsive-image/webpack
 ```
 
 The setup of this package requires to add an additional script to your `index.html`. It is important to add this _before_ your `vendor.js` script, especially when your app is served in a SSR setup using FastBoot or prember, so that the BlurHash encoded LQIPs are displayed before your app's JavaScript has loaded:

packages/blurhash/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@ember-responsive-image/blurhash",
+  "name": "@responsive-image/blurhash",
   "version": "1.0.0-beta.1",
-  "description": "Add support for BlurHash encoded LQIP to ember-responsive-images",
+  "description": "Add support for BlurHash encoded LQIP to @responsive-image/webpack",
   "repository": "https://github.com/simonihmig/ember-responsive-image",
   "license": "MIT",
   "author": "Simon Ihmig <simon.ihmig@gmail.com>",
@@ -30,13 +30,13 @@
     "blurhash": "^2.0.4"
   },
   "peerDependencies": {
-    "@ember-responsive-image/webpack": "workspace:^",
+    "@responsive-image/webpack": "workspace:^",
     "webpack": "^5.70.0"
   },
   "devDependencies": {
     "@babel/core": "7.24.5",
     "@babel/preset-typescript": "7.24.1",
-    "@ember-responsive-image/webpack": "workspace:*",
+    "@responsive-image/webpack": "workspace:*",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",

packages/blurhash/src/webpack.ts

@@ -3,12 +3,12 @@ import type { LoaderContext } from 'webpack';
 import type {
   ImageLoaderChainedResult,
   LoaderOptions,
-} from '@ember-responsive-image/webpack';
+} from '@responsive-image/webpack';
 import {
   getAspectRatio,
   getOptions,
   normalizeInput,
-} from '@ember-responsive-image/webpack';
+} from '@responsive-image/webpack';
 import blurhash from 'blurhash';
 
 export default function lqipBlurhashLoader(

packages/cdn/README.md

@@ -1,4 +1,4 @@
-# @ember-responsive-image/cdn
+# @responsive-image/cdn
 
 Support for image CDNs
 

packages/cdn/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ember-responsive-image/cdn",
+  "name": "@responsive-image/cdn",
   "version": "1.0.0-beta.0",
   "description": "Support for image CDNs",
   "repository": "https://github.com/simonihmig/ember-responsive-image",
@@ -25,7 +25,7 @@
     "prepack": "rollup --config"
   },
   "dependencies": {
-    "@ember-responsive-image/core": "workspace:^"
+    "@responsive-image/core": "workspace:^"
   },
   "devDependencies": {
     "@babel/core": "7.24.4",

packages/cdn/src/cloudinary.ts

@@ -1,5 +1,5 @@
-import { assert, getConfig } from '@ember-responsive-image/core';
-import type { ImageType, ImageData } from '@ember-responsive-image/core';
+import { assert, getConfig } from '@responsive-image/core';
+import type { ImageType, ImageData } from '@responsive-image/core';
 
 export interface CloudinaryConfig {
   cloudName: string;

packages/cdn/src/imgix.ts

@@ -1,5 +1,5 @@
-import { assert, getConfig } from '@ember-responsive-image/core';
-import type { ImageType, ImageData } from '@ember-responsive-image/core';
+import { assert, getConfig } from '@responsive-image/core';
+import type { ImageType, ImageData } from '@responsive-image/core';
 
 export interface ImgixConfig {
   domain: string;

packages/core/README.md

@@ -1,4 +1,4 @@
-# @ember-responsive-image/core
+# @responsive-image/core
 
 Internal package
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@ember-responsive-image/core",
+  "name": "@responsive-image/core",
   "version": "1.0.0-beta.0",
-  "description": "Internal core functions and config for ember-responsive-image",
+  "description": "Internal core functions and config for the responsive-image suite",
   "repository": "https://github.com/simonihmig/ember-responsive-image",
   "license": "MIT",
   "author": "Simon Ihmig <simon.ihmig@gmail.com>",

packages/ember-responsive-image/package.json → packages/ember/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ember-responsive-image",
+  "name": "@responsive-image/ember",
   "version": "5.0.0-beta.1",
   "description": "Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as <picture> elements.",
   "keywords": [
@@ -31,8 +31,8 @@
     "prepack": "rollup --config"
   },
   "dependencies": {
-    "@ember-responsive-image/cdn": "workspace:^",
-    "@ember-responsive-image/core": "workspace:^",
+    "@responsive-image/cdn": "workspace:^",
+    "@responsive-image/core": "workspace:^",
     "@ember/render-modifiers": "^2.0.0",
     "@embroider/addon-shim": "^1.8.7",
     "@embroider/macros": "^1.0.0",
@@ -44,10 +44,10 @@
   "peerDependencies": {
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@ember-responsive-image/blurhash": "workspace:^"
+    "@responsive-image/blurhash": "workspace:^"
   },
   "peerDependenciesMeta": {
-    "@ember-responsive-image/blurhash": {
+    "@responsive-image/blurhash": {
       "optional": true
     }
   },