Merge pull request #577 from simonihmig/core-package

Extract shared utils and types into core package

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "author": "Simon Ihmig <[email protected]>",
   "scripts": {
-    "build": "pnpm --filter ember-responsive-image run build && pnpm --filter @ember-responsive-image/webpack run build && pnpm --filter @ember-responsive-image/blurhash run build && pnpm --filter @ember-responsive-image/cloudinary run build && pnpm --filter @ember-responsive-image/imgix run build",
+    "build": "pnpm --filter @ember-responsive-image/core 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 && pnpm --filter @ember-responsive-image/cloudinary run build && pnpm --filter @ember-responsive-image/imgix run build",
     "lint": "pnpm run -r lint",
     "lint:fix": "pnpm run -r lint:fix",
     "prepare": "pnpm build",

packages/cloudinary/.gitignore

@@ -1,7 +1,6 @@
 # The authoritative copies of these live in the monorepo root (because they're
 # more useful on github that way), but the build copies them into here so they
 # will also appear in published NPM packages.
-/README.md
 /LICENSE.md
 
 # compiled output

packages/cloudinary/package.json

@@ -45,6 +45,7 @@
     "@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",

packages/cloudinary/src/helpers/responsive-image-cloudinary-provider.ts

@@ -4,11 +4,9 @@ import { assert } from '@ember/debug';
 import { getOwnConfig } from '@embroider/macros';
 import type { CloudinaryConfig } from '../types.ts';
 
-import type {
-  ResponsiveImageService,
-  ImageType,
-  ImageData,
-} from 'ember-responsive-image';
+import type { ResponsiveImageService } from 'ember-responsive-image';
+
+import type { ImageType, ImageData } from '@ember-responsive-image/core';
 
 interface CloudinaryOptions {
   transformations?: string;

packages/core/.eslintignore

@@ -0,0 +1,13 @@
+# compiled output
+/dist/
+/declarations/
+/tmp/
+
+# dependencies
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache

packages/core/.eslintrc.js

@@ -0,0 +1,44 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    babelOptions: {
+      root: __dirname,
+    },
+  },
+  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+  env: {
+    browser: true,
+  },
+  rules: {},
+  overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        // Add any custom rules here
+      },
+    },
+    // node files
+    {
+      files: ['./.eslintrc.js', './.prettierrc.js'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      plugins: ['n'],
+      extends: ['plugin:n/recommended'],
+    },
+  ],
+};

packages/core/.gitignore

@@ -0,0 +1,11 @@
+# The authoritative copies of these live in the monorepo root (because they're
+# more useful on github that way), but the build copies them into here so they
+# will also appear in published NPM packages.
+/LICENSE.md
+
+# compiled output
+/dist
+/declarations
+
+# npm/pnpm/yarn pack output
+*.tgz

packages/core/README.md

@@ -0,0 +1,7 @@
+# @ember-responsive-image/core
+
+Internal package
+
+## License
+
+This project is licensed under the [MIT License](../../LICENSE.md).

packages/core/babel.config.json

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "@babel/plugin-transform-typescript",
+      {
+        "allExtensions": true,
+        "onlyRemoveTypeImports": true,
+        "allowDeclareFields": true
+      }
+    ]
+  ]
+}

packages/core/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@ember-responsive-image/core",
+  "version": "1.0.0-beta.0",
+  "description": "Internal core functions and config for ember-responsive-image",
+  "repository": "https://github.com/simonihmig/ember-responsive-image",
+  "license": "MIT",
+  "author": "Simon Ihmig <[email protected]>",
+  "files": [
+    "declarations",
+    "dist"
+  ],
+  "scripts": {
+    "build": "concurrently 'npm:build:*'",
+    "build:js": "rollup --config",
+    "build:types": "tsc --emitDeclarationOnly",
+    "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
+    "lint:types": "tsc --noEmit",
+    "start": "concurrently 'npm:start:*'",
+    "start:js": "rollup --config --watch --no-watch.clearScreen",
+    "start:types": "tsc --emitDeclarationOnly --watch",
+    "test": "echo 'No tests available'",
+    "prepack": "rollup --config"
+  },
+  "devDependencies": {
+    "@babel/core": "7.24.4",
+    "@babel/plugin-transform-typescript": "7.24.4",
+    "@babel/runtime": "7.24.4",
+    "@tsconfig/ember": "3.0.6",
+    "@typescript-eslint/eslint-plugin": "7.7.1",
+    "@typescript-eslint/parser": "7.7.1",
+    "@rollup/plugin-babel": "6.0.4",
+    "concurrently": "8.2.2",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-n": "17.3.1",
+    "eslint-plugin-prettier": "5.1.3",
+    "prettier": "3.2.5",
+    "rollup": "4.16.4",
+    "rollup-plugin-copy": "3.5.0",
+    "typescript": "5.4.5"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "exports": {
+    ".": {
+      "types": "./declarations/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "declarations/index"
+      ]
+    }
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

packages/core/rollup.config.mjs

@@ -0,0 +1,23 @@
+import { babel } from '@rollup/plugin-babel';
+import copy from 'rollup-plugin-copy';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: './dist',
+  },
+
+  plugins: [
+    babel({
+      extensions: ['.js', '.ts'],
+    }),
+
+    // Copy Readme and License into published package
+    copy({
+      targets: [
+        // { src: '../../README.md', dest: '.' },
+        { src: '../../LICENSE.md', dest: '.' },
+      ],
+    }),
+  ],
+};

packages/core/src/index.ts

@@ -0,0 +1,2 @@
+export type * from './types.ts';
+export { findMatchingImage } from './match.ts';

packages/ember-responsive-image/src/utils/match.ts → packages/core/src/match.ts

@@ -1,4 +1,4 @@
-import type { ImageOutputResult, ImageType } from '../types.ts';
+import type { ImageOutputResult, ImageType } from './types.ts';
 
 export function findMatchingImage(
   images: ImageOutputResult[],

packages/core/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": ["src/**/*", "unpublished-development-types/**/*"],
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": false,
+    "declarationDir": "declarations",
+
+    /**
+      https://www.typescriptlang.org/tsconfig#rootDir
+      "Default: The longest common path of all non-declaration input files."
+
+      Because we want our declarations' structure to match our rollup output,
+      we need this "rootDir" to match the "srcDir" in the rollup.config.mjs.
+
+      This way, we can have simpler `package.json#exports` that matches
+      imports to files on disk
+    */
+    "rootDir": "./src",
+
+    /**
+      https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax
+
+      We don't want to include types dependencies in our compiled output, so tell TypeScript
+      to enforce using `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
+
+      We want our tooling to know how to resolve our custom files so the appropriate plugins
+      can do the proper transformations on those files.
+    */
+    "allowImportingTsExtensions": true
+  }
+}

packages/ember-responsive-image/package.json

@@ -31,6 +31,7 @@
     "prepack": "rollup --config"
   },
   "dependencies": {
+    "@ember-responsive-image/core": "workspace:^",
     "@ember/render-modifiers": "^2.0.0",
     "@embroider/addon-shim": "^1.8.7",
     "@embroider/macros": "^1.0.0",

packages/ember-responsive-image/src/components/responsive-image.ts

@@ -5,7 +5,11 @@ import { assert } from '@ember/debug';
 import { cached, tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { macroCondition, dependencySatisfies } from '@embroider/macros';
-import type { ImageType, LqipBlurhash, ImageData } from '../types.ts';
+import type {
+  ImageType,
+  LqipBlurhash,
+  ImageData,
+} from '@ember-responsive-image/core';
 
 import './responsive-image.css';
 

packages/ember-responsive-image/src/helpers/responsive-image-resolve.ts

@@ -2,7 +2,7 @@ import { inject as service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
 import Helper from '@ember/component/helper';
 import ResponsiveImageService from '../services/responsive-image.ts';
-import type { ImageType, ImageData } from '../types.ts';
+import type { ImageType, ImageData } from '@ember-responsive-image/core';
 
 interface ResponsiveImageResolveSignature {
   Args: {

packages/ember-responsive-image/src/index.ts

@@ -1,5 +1,4 @@
 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 * from './types.ts';
-export { findMatchingImage } from './utils/match.ts';
+export type { ImageData } from '@ember-responsive-image/core';

packages/imgix/.gitignore

@@ -1,7 +1,6 @@
 # The authoritative copies of these live in the monorepo root (because they're
 # more useful on github that way), but the build copies them into here so they
 # will also appear in published NPM packages.
-/README.md
 /LICENSE.md
 
 # compiled output

packages/imgix/package.json

@@ -45,6 +45,7 @@
     "@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",

packages/imgix/src/helpers/responsive-image-imgix-provider.ts

@@ -4,11 +4,9 @@ import { assert } from '@ember/debug';
 import { getOwnConfig } from '@embroider/macros';
 import type { ImgixConfig } from '../types.ts';
 
-import type {
-  ResponsiveImageService,
-  ImageType,
-  ImageData,
-} from 'ember-responsive-image';
+import type { ResponsiveImageService } from 'ember-responsive-image';
+
+import type { ImageType, ImageData } from '@ember-responsive-image/core';
 
 interface ImgixProviderSignature {
   Args: {

packages/webpack/package.json

@@ -22,6 +22,7 @@
     "prepack": "rollup --config"
   },
   "dependencies": {
+    "@ember-responsive-image/core": "workspace:^",
     "base-n": "^3.0.0",
     "loader-utils": "^3.2.0",
     "sharp": "^0.33.0"

packages/webpack/src/export.ts

@@ -1,4 +1,7 @@
-import type { ImageOutputResult, ImageType } from 'ember-responsive-image';
+import type {
+  ImageOutputResult,
+  ImageType,
+} from '@ember-responsive-image/core';
 import { interpolateName } from 'loader-utils';
 import * as path from 'path';
 import type { LoaderContext } from 'webpack';
@@ -63,7 +66,7 @@ export default function exportLoader(
   const aspectRatio = input.sharpMeta ? getAspectRatio(input.sharpMeta) : 1;
 
   const moduleOutput: string[] = [
-    "import { findMatchingImage } from 'ember-responsive-image/utils/match';",
+    "import { findMatchingImage } from '@ember-responsive-image/core';",
   ];
 
   for (const importedModule of input.imports) {

packages/webpack/src/images.ts

@@ -1,4 +1,4 @@
-import type { ImageType } from 'ember-responsive-image';
+import type { ImageType } from '@ember-responsive-image/core';
 import type { Metadata, Sharp } from 'sharp';
 import type { LoaderContext } from 'webpack';
 import type {

packages/webpack/src/types.ts

@@ -3,7 +3,7 @@ import type {
   LqipBlurhash,
   LqipColor,
   LqipInline,
-} from 'ember-responsive-image';
+} from '@ember-responsive-image/core';
 import type { Metadata, Sharp } from 'sharp';
 
 export type OutputImageType = 'original' | ImageType;