@ethlete/core 5.0.0-next.61 → 5.0.0-next.62

package/generators/migrate-to-v5/removed-exports.js

@@ -1,7 +1,7 @@
 import * as ts from 'typescript';
 import { collectFiles } from './migration-files.js';
-const REMOVED_EXPORTS = new Map([
-    ...['Memo', 'MemoConfig', 'MemoResolver', 'MapLike'].map((name) => [name, 'the @Memo decorator']),
+export const REMOVED_EXPORTS = new Map([
+    ...['Memo', 'MemoConfig', 'MemoResolver', 'MapLike'].map((name) => [name, 'together with the @Memo decorator and has no replacement.']),
     ...[
         'createProps',
         'createHostProps',
@@ -29,7 +29,95 @@ const REMOVED_EXPORTS = new Map([
         'PropHandlers',
         'BindPropsOptions',
         'UnbindPropsOptions',
-    ].map((name) => [name, 'the props module']),
+    ].map((name) => [name, 'together with the props module and has no replacement.']),
+    ...['LetDirective', 'LetContext'].map((name) => [
+        name,
+        "in v5. Use Angular's `@let`. `@ethlete/cdk:migrate-to-v5` rewrites `*etLet` templates; without the cdk, rewrite them by hand.",
+    ]),
+    ...['IsActiveElementDirective', 'IS_ACTIVE_ELEMENT', 'IsElementDirective', 'IS_ELEMENT'].map((name) => [
+        name,
+        'in v5. Inside a scrollable, use `ScrollableIsActiveChildDirective`; `@ethlete/cdk:migrate-to-v5` rewrites it.',
+    ]),
+    ...['ObserveResizeDirective', 'ResizeObserverService', 'ResizeObserverFactory', 'createResizeObservable'].map((name) => [name, 'in v5. Use `signalElementDimensions()`.']),
+    ...['ObserveContentDirective', 'ContentObserverService', 'MutationObserverFactory', 'createMutationObservable'].map((name) => [name, 'in v5. Use `signalElementMutations()`.']),
+    ...[
+        'ObserveVisibilityDirective',
+        'OBSERVE_VISIBILITY_TOKEN',
+        'ObserveVisibilityChange',
+        'IntersectionObserverService',
+        'IntersectionObserverFactory',
+        'getIntersectionInfo',
+        'signalVisibilityChangeClasses',
+    ].map((name) => [name, 'in v5. Use `signalElementIntersection()`.']),
+    ...[
+        'ObserveScrollStateDirective',
+        'OBSERVE_SCROLL_STATE',
+        'ScrollObserverFirstElementDirective',
+        'ScrollObserverLastElementDirective',
+        'ScrollObserverIgnoreTargetDirective',
+        'SCROLL_OBSERVER_FIRST_ELEMENT_CLASS',
+        'SCROLL_OBSERVER_IGNORE_TARGET_CLASS',
+        'SCROLL_OBSERVER_LAST_ELEMENT_CLASS',
+        'SCROLL_OBSERVER_OBSERVING_FIRST_ELEMENT_CLASS',
+        'SCROLL_OBSERVER_OBSERVING_LAST_ELEMENT_CLASS',
+        'ScrollObserverScrollState',
+        'ObservedScrollableChild',
+        'areScrollStatesEqual',
+    ].map((name) => [
+        name,
+        'in v5. Use `signalElementScrollState()`, or `ScrollableScrollState` of the `@ethlete/components` scrollable.',
+    ]),
+    ...['CursorDragScrollDirective', 'CURSOR_DRAG_SCROLLING_CLASS', 'CURSOR_DRAG_SCROLLING_PREPARED_CLASS'].map((name) => [name, 'in v5. Use `useCursorDragScroll()`.']),
+    ...['RootBoundaryDirective', 'ROOT_BOUNDARY_TOKEN'].map((name) => [name, 'in v5. Use `provideBoundaryElement()`.']),
+    ...['DelayableDirective', 'DELAYABLE_TOKEN'].map((name) => [name, 'in v5. Use `provideInfinityQueryResponseDelay()` from `@ethlete/query`.']),
+    ...[
+        'SeoDirective',
+        'SEO_DIRECTIVE_TOKEN',
+        'SeoConfig',
+        'mergeSeoConfig',
+        'OpenGraph',
+        'TwitterCard',
+        'FacebookCard',
+        'AlternateLink',
+    ].map((name) => [name, 'in v5. Use the `apply*Binding` functions; the SEO guide has a per-key migration table.']),
+    ...['AnimatedOverlayDirective', 'AnimatedOverlayComponentBase'].map((name) => [
+        name,
+        'in v5. It moved to `@ethlete/cdk`; `@ethlete/components` overlays use the overlay strategy controller.',
+    ]),
+    ...[
+        'SelectionModel',
+        'ActiveSelectionModel',
+        'SelectionModelBinding',
+        'SelectionModelOptionValueFn',
+        'SelectionModelPropertyPath',
+        'SelectionModelTypes',
+    ].map((name) => [name, 'in v5. It moved into the `@ethlete/cdk` select and has no public replacement.']),
+    ...['FocusVisibleService'].map((name) => [name, 'in v5. Use `injectFocusVisibleTracker()`.']),
+    ...['createMediaQueryObservable'].map((name) => [name, 'in v5. Use `injectBreakpointIsMatched()` or the other media query signals.']),
+    ...['createReactiveBindings', 'ReactiveAttributes', 'ReactiveBindingResult'].map((name) => [name, 'in v5. Use `signalHostClasses()` / `signalHostAttributes()`.']),
+    ...['debouncedControlValueSignal', 'DebouncedControlValueSignalOptions'].map((name) => [name, 'in v5. Debounce the `controlValueSignal()` value with `toObservable()` and `debounceTime()`.']),
+    ...['ProviderResult', 'RootProviderResult', 'StaticProviderResult', 'CreateProviderOptions'].map((name) => [
+        name,
+        'in v5. It belonged to the removed `create*Provider` factories, which `@ethlete/core:migrate-provider-shape` rewrites.',
+    ]),
+    ...['VIEWPORT_CONFIG'].map((name) => [name, 'in v5. Use `provideViewportConfig()`.']),
+    ...[
+        'ClickObserverService',
+        'ClickObserverFactory',
+        'DebugDirective',
+        'DEBUG_TOKEN',
+        'HostDirective',
+        'MaybeObservable',
+        'Primitive',
+        'Reference',
+        'Size',
+        'Validators',
+        'isEmptyArray',
+        'isObjectArray',
+        'isPrimitiveArray',
+        'ScrollEnhancementsConfig',
+        'SmartBlockScrollStrategy',
+    ].map((name) => [name, 'in v5. It has no replacement.']),
 ]);
 const ET_PROPS_ATTRIBUTE = /\betProps\b/;
 export default async function reportRemovedExports(tree, scope) {
@@ -57,9 +145,9 @@ function findRemovedImports(tree, filePath) {
             continue;
         for (const element of bindings.elements) {
             const name = (element.propertyName ?? element.name).text;
-            const origin = REMOVED_EXPORTS.get(name);
-            if (origin) {
-                messages.push(`${name} was removed from @ethlete/core together with ${origin} and has no replacement.`);
+            const successor = REMOVED_EXPORTS.get(name);
+            if (successor) {
+                messages.push(`${name} was removed from @ethlete/core ${successor}`);
             }
         }
     }

package/migrations/legacy-color-themes.md

@@ -0,0 +1,38 @@
+# Move the runtime color theming to Tailwind 4
+
+`provideColorThemes()` injects the color theme CSS at runtime and pairs with a Tailwind 3 config built from
+`createTailwindColorThemes()`. It is deprecated: `@ethlete/components` expects
+`provideColorThemesWithTailwind4()`, the CSS the Tailwind 4 generators emit, and a set of surface themes.
+
+The theme data carries over unchanged. A codemod does the mechanical part; the rest is setup that depends
+on the app.
+
+## What to change
+
+1. Run the codemod:
+
+   ```bash
+   nx g @ethlete/core:migrate-legacy-color-themes
+   ```
+
+   It rewrites every `provideColorThemes(X)` imported from `@ethlete/core` into
+   `provideColorThemesWithTailwind4(X)`, fixes the import, and writes
+   `legacy-color-themes-migration-tasks.md` at the workspace root. Pass `--projects` or `--include` to
+   migrate one app at a time.
+
+2. Work through `legacy-color-themes-migration-tasks.md`. It lists, per call site, the
+   `tailwind-4-color-theme` generator run that replaces the runtime styles, every Tailwind 3 helper left
+   in a config, and - when no app provides any yet - the surface themes to build.
+
+3. Move the Tailwind 3 config to Tailwind 4, run both generators, and import the generated `.css` in each
+   app's global stylesheet. Keep the prefix the Tailwind 3 config used, so the utility names stay.
+
+4. Derive the first surface themes from the app's existing page background, text, muted text and border
+   colors. Ask the user before inventing colors the app does not have.
+
+5. Search the app's own CSS for `--et-color-alt-`. Those variables are not emitted any more; move the
+   region into its own `etProvideColor` scope and read `--et-color-primary` there.
+
+6. Build the app and compare a page against the old one: the colors must match.
+
+The guide is at <https://ethlete-sdk-docs.web.app/core/theming#migrating-from-runtime-theming>.

package/migrations/seo-directive-removed.md

@@ -9,7 +9,8 @@ function call. Both are decisions about the call site.
 
 ## What to change
 
-1. Find every component that injects `SeoDirective` or lists it in `hostDirectives` or `imports`.
+1. Find every component that injects `SeoDirective` or `SEO_DIRECTIVE_TOKEN`, or lists the directive in
+   `hostDirectives` or `imports`.
 2. Remove the directive from the component.
 3. Replace the `updateConfig({ … })` call with one `apply*Binding` call per key it set.
 4. Turn an Observable value into a signal: `toSignal()` at the edge of the component, or a

package/migrations.json

@@ -4,6 +4,7 @@
       "name": "to-v5",
       "version": "5.0.0-beta.11",
       "kind": "auto",
+      "level": "required",
       "description": "Rewrite the v4 core API into its v5 shape.",
       "generator": "@ethlete/core:migrate-to-v5"
     },
@@ -11,6 +12,7 @@
       "name": "provider-shape",
       "version": "5.0.0-next.37",
       "kind": "auto",
+      "level": "required",
       "description": "Rewrite destructured provider tuples into the tree-shakeable definition shape.",
       "generator": "@ethlete/core:migrate-provider-shape",
       "docs": "/core/providers"
@@ -19,6 +21,7 @@
       "name": "seo-directive-removed",
       "version": "5.0.0-next.41",
       "kind": "assisted",
+      "level": "required",
       "description": "SeoDirective and SeoConfig are gone. Every call site moves to the apply*Binding function for its key.",
       "instructions": "./migrations/seo-directive-removed.md",
       "docs": "/core/seo"
@@ -27,6 +30,7 @@
       "name": "surface-interaction-swatch",
       "version": "5.0.0-next.46",
       "kind": "auto",
+      "level": "required",
       "description": "Rewrite surface theme interactionColor maps into the { color, onColor, inkColor } swatch shape.",
       "generator": "@ethlete/core:migrate-surface-interaction-swatch",
       "docs": "/core/theming"
@@ -35,9 +39,20 @@
       "name": "surface-theme-regenerate",
       "version": "5.0.0-next.46",
       "kind": "manual",
+      "level": "required",
       "description": "Regenerate the surface theme stylesheet, so the new swatch reaches the CSS variables.",
       "instructions": "./migrations/surface-theme-regenerate.md",
       "docs": "/core/theming"
+    },
+    {
+      "name": "legacy-color-themes",
+      "version": "5.0.0-next.62",
+      "kind": "assisted",
+      "level": "recommended",
+      "description": "Move the runtime color theming to Tailwind 4: provideColorThemes becomes provideColorThemesWithTailwind4, and the generated CSS and surface themes replace the runtime styles.",
+      "scan": "@ethlete/core:migrate-legacy-color-themes",
+      "instructions": "./migrations/legacy-color-themes.md",
+      "docs": "/core/theming#migrating-from-runtime-theming"
     }
   ]
 }

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@ethlete/core",
-  "version": "5.0.0-next.61",
+  "version": "5.0.0-next.62",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {
-    "@angular/common": "22.1.6",
-    "@angular/core": "22.1.6",
-    "@angular/forms": "22.1.6",
-    "@angular/platform-browser": "22.1.6",
-    "@angular/router": "22.1.6",
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/forms": "^22.1.0",
+    "@angular/platform-browser": "^22.1.0",
+    "@angular/router": "^22.1.0",
     "@ethlete/types": "^2.0.0-beta.4",
-    "@floating-ui/dom": "1.8.0",
-    "@nx/devkit": "23.1.0",
-    "rxjs": "7.8.2",
-    "ts-morph": "21.0.1",
-    "typescript": "6.0.3"
+    "@floating-ui/dom": "^1.6.0",
+    "@nx/devkit": "^23.0.0",
+    "rxjs": "^7.8.0",
+    "ts-morph": "^21.0.0",
+    "typescript": "^6.0.0"
   },
   "peerDependenciesMeta": {
     "@nx/devkit": {