@ethlete/core 5.0.0-next.59 → 5.0.0-next.60

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ethlete/core
 
+## 5.0.0-next.60
+
+### Minor Changes
+
+- `provideSurfaceThemesWithTailwind4` now warns in dev mode when the page leaves the root font size at the browser default instead of setting `html { font-size: 62.5%; }`.
+
+### Patch Changes
+
+- Element signals such as `signalElementIntersection` now accept a signal of a read-only array, so a `viewChildren` signal can be passed directly.
+- `htmlToMarkdown` keeps block alignment as an `et-rte-align-*` class instead of a `style` attribute a strict CSP blocks, and structured-data scripts carry the `CSP_NONCE`. Other renderers need CSS for that class.
+- The `provideX` functions from `defineProvider`, `defineRootProvider` and `defineStaticProvider` return `StaticProvider[]` instead of `Provider[]`. You can now spread them into a `StaticProvider[]`, for example into `Injector.create` or an overlay's `providers`.
+- `defineStaticProvider` and `defineStaticRootProvider` now replace an array or other non-object default with the override, instead of spreading the array into an object. Only two plain objects are merged.
+- `migrate-to-v5` lists every file that still uses the removed `@Memo` decorator or props module (`createProps`, `[etProps]`, …), which have no replacement.
+
 ## 5.0.0-next.59
 
 ### Patch Changes

package/fesm2022/ethlete-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { assertInInjectionContext, inject, DestroyRef, ElementRef, TemplateRef, InjectionToken, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, untracked, ApplicationRef, runInInjectionContext, NgZone, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, EnvironmentInjector, createComponent, ViewEncapsulation, Component, Directive, model, ViewContainerRef, input, provideEnvironmentInitializer, output, createEnvironmentInjector, Pipe, afterEveryRender } from '@angular/core';
+import { assertInInjectionContext, inject, DestroyRef, ElementRef, TemplateRef, InjectionToken, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, untracked, ApplicationRef, runInInjectionContext, NgZone, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, EnvironmentInjector, createComponent, ViewEncapsulation, Component, Directive, model, ViewContainerRef, input, CSP_NONCE, provideEnvironmentInitializer, output, createEnvironmentInjector, Pipe, afterEveryRender } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import { Subject, fromEvent, switchMap, startWith, of, defer, from, map, catchError, timer, takeUntil, pairwise, debounceTime, merge, distinctUntilChanged, EMPTY, expand, skip, tap, take, filter, BehaviorSubject, combineLatest, Observable, isObservable, firstValueFrom, defaultIfEmpty, concatMap, concat, finalize, exhaustMap, share, shareReplay } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
@@ -74,6 +74,36 @@ const createDestroy = () => {
     return destroy$.asObservable();
 };
 
+const isObject = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isArray = (value) => {
+    return Array.isArray(value);
+};
+const getObjectProperty = (obj, prop) => {
+    const hasDotNotation = prop.includes('.');
+    const hasBracketNotation = prop.includes('[');
+    if (!hasDotNotation && !hasBracketNotation)
+        return obj[prop];
+    const props = prop.split('.');
+    let value = obj;
+    for (const prop of props) {
+        if (!isObject(value))
+            return undefined;
+        if (prop.includes('[')) {
+            const [key, index] = prop.split('[').map((part) => part.replace(']', ''));
+            const arr = value[key];
+            if (!Array.isArray(arr))
+                return undefined;
+            value = arr[+index];
+        }
+        else {
+            value = value[prop];
+        }
+    }
+    return value;
+};
+
 const injectHostElement = () => inject(ElementRef).nativeElement;
 const injectTemplateRef = () => inject(TemplateRef);
 const createInjectFunction = (token) => {
@@ -156,7 +186,7 @@ const createValueProviders = (token, defaultValue, valueOverride, options) => [
     ...(options?.extraInjectionToken ? [{ provide: options.extraInjectionToken, useExisting: token }] : []),
 ];
 const maybeMergeValues = (defaultValue, valueOverride) => {
-    if (valueOverride && defaultValue && typeof defaultValue === 'object') {
+    if (isObject(valueOverride) && isObject(defaultValue)) {
         return { ...defaultValue, ...valueOverride };
     }
     return valueOverride ?? defaultValue;
@@ -3803,13 +3833,13 @@ const htmlToMarkdown = (html) => {
     if (!html)
         return '';
     let md = html;
-    // Aligned blocks: text-align has no Markdown form, so preserve them verbatim as native HTML (their
-    // inner markup stays HTML) and round-trip via a placeholder - extracted before the block passes
-    // below rewrite them, restored after the final tag-strip.
+    // Aligned blocks: text-align has no Markdown form, so preserve them as HTML (their inner markup
+    // stays HTML) and round-trip via a placeholder - extracted before the block passes below rewrite
+    // them, restored after the final tag-strip.
     const alignedBlocks = [];
     md = md.replace(/<(p|h[1-6]|div)\b([^>]*\b(?:style="[^"]*text-align|class="[^"]*\bet-rte-align-)[^>]*)>([\s\S]*?)<\/\1>/gi, (_, tag, attrs, inner) => {
         const name = tag.toLowerCase();
-        return makePlaceholder('ALIGN', alignedBlocks.push(`<${name} style="text-align: ${alignOf(attrs)}">${inner}</${name}>`) - 1);
+        return makePlaceholder('ALIGN', alignedBlocks.push(`<${name}${alignClass(alignOf(attrs))}>${inner}</${name}>`) - 1);
     });
     // Code blocks - process before inline code
     md = md.replace(/<pre[^>]*><code[^>]*class="language-([^"]+)"[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, lang, code) => `\n\`\`\`${lang}\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
@@ -3907,36 +3937,6 @@ const round = (value, precision = 0) => {
     return Math.round(value * multiplier) / multiplier;
 };
 
-const isObject = (value) => {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-};
-const isArray = (value) => {
-    return Array.isArray(value);
-};
-const getObjectProperty = (obj, prop) => {
-    const hasDotNotation = prop.includes('.');
-    const hasBracketNotation = prop.includes('[');
-    if (!hasDotNotation && !hasBracketNotation)
-        return obj[prop];
-    const props = prop.split('.');
-    let value = obj;
-    for (const prop of props) {
-        if (!isObject(value))
-            return undefined;
-        if (prop.includes('[')) {
-            const [key, index] = prop.split('[').map((part) => part.replace(']', ''));
-            const arr = value[key];
-            if (!Array.isArray(arr))
-                return undefined;
-            value = arr[+index];
-        }
-        else {
-            value = value[prop];
-        }
-    }
-    return value;
-};
-
 /**
  * Creates an object URL for a `Blob`/`File` and hands back a handle that owns it. Keep the handle
  * for as long as the URL is on screen and call `revoke()` when it is not - the browser holds the
@@ -6182,6 +6182,7 @@ const STRUCTURED_DATA_STORE_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const document = inject(DOCUMENT$1);
     const renderer = injectRenderer();
     const config = injectStructuredDataConfig();
+    const nonce = inject(CSP_NONCE, { optional: true });
     const scripts = signal(new Map(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scripts" }] : /* istanbul ignore next */ []));
     const getTargetElement = () => {
@@ -6196,6 +6197,8 @@ const STRUCTURED_DATA_STORE_DEF = /* @__PURE__ */ defineRootProvider(() => {
             }
             const script = renderer.createElement('script');
             renderer.setAttributes(script, { type: 'application/ld+json' });
+            if (nonce)
+                renderer.setAttribute(script, 'nonce', nonce);
             renderer.setTextContent(script, JSON.stringify(data));
             const target = getTargetElement();
             renderer.appendChild(target, script);
@@ -9295,6 +9298,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const TOLERANCE_PX = 0.5;
+const readFontSizePx = (view, element) => {
+    const match = /^(\d+(?:\.\d+)?)px$/.exec(view.getComputedStyle(element).fontSize ?? '');
+    return match ? Number(match[1]) : null;
+};
+const measureProbe = (document, view, fontSize) => {
+    const probe = document.createElement('div');
+    probe.style.setProperty('display', 'none', 'important');
+    probe.style.setProperty('font-size', fontSize, 'important');
+    document.documentElement.appendChild(probe);
+    try {
+        return readFontSizePx(view, probe);
+    }
+    finally {
+        probe.remove();
+    }
+};
+const measureUnsetRootFontSize = (document) => {
+    const view = document.defaultView;
+    if (!view)
+        return null;
+    const root = readFontSizePx(view, document.documentElement);
+    const browserDefault = measureProbe(document, view, 'medium');
+    const smallest = measureProbe(document, view, '1px');
+    if (root === null || browserDefault === null || smallest === null)
+        return null;
+    // A browser minimum font size at or above the default clamps any root to the default.
+    if (smallest >= browserDefault - TOLERANCE_PX)
+        return null;
+    return Math.abs(root - browserDefault) <= TOLERANCE_PX ? root : null;
+};
+const warnIfRootFontSizeUnset = (document) => {
+    const root = measureUnsetRootFontSize(document);
+    if (root === null)
+        return;
+    console.warn(`[provideSurfaceThemesWithTailwind4] The root font size is ${root}px, the browser default, so every SDK control renders 1.6x too large. The SDK sizes everything in rem against a 10px root (${root * 0.625}px here). Add \`html { font-size: 62.5%; }\` to your global styles. See https://ethlete-sdk-docs-next.web.app/components/setup`);
+};
+const provideRootFontSizeCheck = () => provideEnvironmentInitializer(() => {
+    if (!isDevMode() || !isPlatformBrowser(inject(PLATFORM_ID)))
+        return;
+    const document = inject(DOCUMENT$1);
+    const destroyRef = inject(DestroyRef);
+    const injector = inject(EnvironmentInjector);
+    afterNextRender(() => {
+        const view = document.defaultView;
+        if (!view)
+            return;
+        if (document.readyState === 'complete') {
+            warnIfRootFontSizeUnset(document);
+            return;
+        }
+        const removeListener = () => view.removeEventListener('load', onLoad);
+        const unregisterOnDestroy = destroyRef.onDestroy(removeListener);
+        const onLoad = () => {
+            removeListener();
+            unregisterOnDestroy();
+            warnIfRootFontSizeUnset(document);
+        };
+        view.addEventListener('load', onLoad);
+    }, { injector });
+});
+
 const SURFACE_TYPE = {
     LIGHT: 'light',
     DARK: 'dark',
@@ -9311,9 +9376,14 @@ const SURFACE_THEMES_PREFIX_DEF = /* @__PURE__ */ defineStaticProvider('et', {
 });
 const ɵProvideSurfaceThemesPrefix = /* @__PURE__ */ toProvideFn(SURFACE_THEMES_PREFIX_DEF);
 const injectSurfaceThemesPrefix = /* @__PURE__ */ toInjectFn(SURFACE_THEMES_PREFIX_DEF);
+/**
+ * Registers the app's surface themes. In dev mode it also warns once the page has loaded if the root
+ * font size is still the browser default, i.e. the app is missing `html { font-size: 62.5%; }`.
+ */
 const provideSurfaceThemesWithTailwind4 = (themes, prefix = 'et') => [
     ɵProvideSurfaceThemes(themes),
     ɵProvideSurfaceThemesPrefix(prefix),
+    ngDevMode ? provideRootFontSizeCheck() : [],
 ];
 /**
  * Inject the registered `isDefault` surface theme of a `type` - the surface an app renders on
@@ -10074,7 +10144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/core` this build was cut from. */
-const CORE_VERSION = '5.0.0-next.59';
+const CORE_VERSION = '5.0.0-next.60';
 
 /**
  * Generated bundle index. Do not edit.