@ethlete/contentful 4.0.0-next.7 → 4.0.0-next.9

package/generators/migrate-to-contentful-v5/migration.js

@@ -1,4 +1,4 @@
-import { formatFiles, updateJson } from '@nx/devkit';
+import { formatFiles, installPackagesTask, readJson, updateJson } from '@nx/devkit';
 import { createMigrationScope } from './migration-scope.js';
 export const CONTENTFUL_V5_REPORT_PATH = 'contentful-v5-migration-tasks.md';
 const COMPONENTS_PACKAGE = '@ethlete/components';
@@ -24,15 +24,55 @@ const REMOVED_EXPORTS = [
     'isExecutedHtmlOrTextCommandCacheItem',
     'isExecutedTextCommandCacheItem',
 ];
-const IMAGE_TAG_REGEX = /<et-contentful-image\b[^>]*>/g;
 const INLINE_TEMPLATE_REGEX = /template\s*:\s*`([\s\S]*?)`/g;
-const CONTENTFUL_IMPORT_REGEX = /import\s+(?:type\s+)?\{([^}]*)\}\s+from\s+['"]@ethlete\/contentful['"]/g;
+const CONTENTFUL_NAMED_REFERENCE_REGEX = /(?:import|export)\s+(?:type\s+)?(?:[\w$]+\s*,\s*)?\{([\s\S]*?)\}\s+from\s+['"]@ethlete\/contentful['"]/g;
+const CONTENTFUL_NAMESPACE_REFERENCE_REGEX = /(?:import\s+\*\s+as\s+([\w$]+)|export\s+\*)\s+from\s+['"]@ethlete\/contentful['"]/g;
 const lineOf = (source, index) => source.slice(0, index).split('\n').length;
+const replaceImageTags = (source, replace) => {
+    const tagStart = '<et-contentful-image';
+    let result = '';
+    let cursor = 0;
+    while (cursor < source.length) {
+        const start = source.indexOf(tagStart, cursor);
+        if (start === -1) {
+            result += source.slice(cursor);
+            break;
+        }
+        const boundary = source[start + tagStart.length];
+        if (boundary && !/[\s/>]/.test(boundary)) {
+            result += source.slice(cursor, start + tagStart.length);
+            cursor = start + tagStart.length;
+            continue;
+        }
+        let quote = null;
+        let end = start + tagStart.length;
+        for (; end < source.length; end++) {
+            const character = source[end];
+            if (quote) {
+                if (character === quote)
+                    quote = null;
+            }
+            else if (character === '"' || character === "'" || character === '`') {
+                quote = character;
+            }
+            else if (character === '>') {
+                break;
+            }
+        }
+        if (end === source.length) {
+            result += source.slice(cursor);
+            break;
+        }
+        result += source.slice(cursor, start) + replace(source.slice(start, end + 1), start);
+        cursor = end + 1;
+    }
+    return result;
+};
 /** Renames `hasPriority` to `priority` and collects removed class inputs, on `et-contentful-image` only. */
 const migrateTemplate = (template) => {
     let changed = false;
     const classInputHits = [];
-    const content = template.replace(IMAGE_TAG_REGEX, (tag, offset) => {
+    const content = replaceImageTags(template, (tag, offset) => {
         const foundInputs = REMOVED_CLASS_INPUTS.filter((input) => new RegExp(`(^|[\\s[])${input}(\\]|=|(?=[\\s/>]))`).test(tag));
         if (foundInputs.length > 0) {
             classInputHits.push({ line: lineOf(template, offset), inputs: foundInputs });
@@ -58,8 +98,7 @@ const createClassInputTask = (filePath, hit) => ({
         .map((input) => `\`${input}\``)
         .join(', ')}. Those inputs were removed — the rendered picture now only carries static \`et-picture-*\` classes. Drop the binding and target the \`et-picture-*\` classes from your own CSS instead.`,
 });
-/** Matches a whole `useTailwindClasses: <literal>,` property line — the option was removed in v5. */
-const USE_TAILWIND_CLASSES_REGEX = /^[ \t]*useTailwindClasses\s*:\s*(?:true|false|[\w.]+)\s*,?[ \t]*\r?\n/gm;
+const USE_TAILWIND_CLASSES_REGEX = /^[ \t]*useTailwindClasses\s*:\s*(?:true|false|[\w.$]+)\s*,?[ \t]*\r?\n|\buseTailwindClasses\s*:\s*(?:true|false|[\w.$]+)\s*,[ \t]*|,\s*useTailwindClasses\s*:\s*(?:true|false|[\w.$]+)(?=\s*[}\n])/gm;
 const migrateTsFile = (filePath, source) => {
     const tasks = [];
     let changed = false;
@@ -78,7 +117,7 @@ const migrateTsFile = (filePath, source) => {
         changed = true;
         return match.replace(template, () => result.content);
     });
-    for (const importMatch of source.matchAll(CONTENTFUL_IMPORT_REGEX)) {
+    for (const importMatch of source.matchAll(CONTENTFUL_NAMED_REFERENCE_REGEX)) {
         const symbols = (importMatch[1] ?? '')
             .split(',')
             .map((specifier) => specifier
@@ -98,36 +137,54 @@ const migrateTsFile = (filePath, source) => {
             });
         }
     }
+    for (const namespaceMatch of source.matchAll(CONTENTFUL_NAMESPACE_REFERENCE_REGEX)) {
+        const namespace = namespaceMatch[1] ?? '*';
+        tasks.push({
+            id: `removed-export:${filePath}:${namespace}`,
+            file: filePath,
+            line: lineOf(source, namespaceMatch.index ?? 0),
+            message: `The ${namespace === '*' ? 'star re-export' : `\`${namespace}\` namespace import`} may reference renderer internals that are no longer public API. Replace it with explicit supported imports and remove any command-helper usage.`,
+        });
+    }
     return { content, changed, tasks };
 };
 const migratePackageJson = (tree, filePath) => {
     const tasks = [];
     let changed = false;
-    updateJson(tree, filePath, (json) => {
-        const dependencies = json['dependencies'];
-        const peerDependencies = json['peerDependencies'];
-        const section = dependencies?.['@ethlete/contentful']
-            ? 'dependencies'
-            : peerDependencies?.['@ethlete/contentful']
-                ? 'peerDependencies'
-                : null;
-        if (!section)
-            return json;
-        const hasComponents = Boolean(dependencies?.[COMPONENTS_PACKAGE] ?? peerDependencies?.[COMPONENTS_PACKAGE]);
-        if (!hasComponents) {
-            json[section] = { ...json[section], [COMPONENTS_PACKAGE]: COMPONENTS_VERSION };
-            changed = true;
-            console.log(`   ✓ ${filePath}: added ${COMPONENTS_PACKAGE}@${COMPONENTS_VERSION} to ${section}`);
-        }
-        if (dependencies?.['@ethlete/cdk'] ?? peerDependencies?.['@ethlete/cdk']) {
-            tasks.push({
-                id: `cdk-dependency:${filePath}`,
-                file: filePath,
-                message: '`@ethlete/contentful` no longer depends on `@ethlete/cdk`. The dependency was left in place because you may use it directly — if nothing in this project imports `@ethlete/cdk`, remove it.',
-            });
-        }
-        return json;
-    });
+    const source = tree.read(filePath, 'utf-8');
+    if (!source) {
+        return { changed, tasks };
+    }
+    if (!source.includes('@ethlete/contentful')) {
+        return { changed, tasks };
+    }
+    const json = readJson(tree, filePath);
+    const dependencies = json['dependencies'];
+    const peerDependencies = json['peerDependencies'];
+    const section = dependencies?.['@ethlete/contentful']
+        ? 'dependencies'
+        : peerDependencies?.['@ethlete/contentful']
+            ? 'peerDependencies'
+            : null;
+    if (!section) {
+        return { changed, tasks };
+    }
+    const hasComponents = Boolean(dependencies?.[COMPONENTS_PACKAGE] ?? peerDependencies?.[COMPONENTS_PACKAGE]);
+    if (!hasComponents) {
+        updateJson(tree, filePath, (packageJson) => {
+            packageJson[section] = { ...packageJson[section], [COMPONENTS_PACKAGE]: COMPONENTS_VERSION };
+            return packageJson;
+        });
+        changed = true;
+        console.log(`   ✓ ${filePath}: added ${COMPONENTS_PACKAGE}@${COMPONENTS_VERSION} to ${section}`);
+    }
+    if (dependencies?.['@ethlete/cdk'] ?? peerDependencies?.['@ethlete/cdk']) {
+        tasks.push({
+            id: `cdk-dependency:${filePath}`,
+            file: filePath,
+            message: '`@ethlete/contentful` no longer depends on `@ethlete/cdk`. The dependency was left in place because you may use it directly — if nothing in this project imports `@ethlete/cdk`, remove it.',
+        });
+    }
     return { changed, tasks };
 };
 const renderReport = (tasks) => [
@@ -153,6 +210,7 @@ export default async function migrateToContentfulV5(tree, schema) {
     console.log(`   Scope: ${scope.describe()}`);
     const tasks = [];
     let filesChanged = 0;
+    let dependenciesChanged = false;
     scope.visit(tree, (filePath) => {
         if (filePath === CONTENTFUL_V5_REPORT_PATH)
             return;
@@ -161,6 +219,8 @@ export default async function migrateToContentfulV5(tree, schema) {
             tasks.push(...result.tasks);
             if (result.changed)
                 filesChanged++;
+            if (result.changed)
+                dependenciesChanged = true;
             return;
         }
         const isHtml = filePath.endsWith('.html');
@@ -188,5 +248,9 @@ export default async function migrateToContentfulV5(tree, schema) {
     if (tasks.length > 0) {
         console.log(`⚠️  ${tasks.length} site(s) need a manual decision — see ${CONTENTFUL_V5_REPORT_PATH}.`);
     }
+    if (dependenciesChanged) {
+        return (() => installPackagesTask(tree, true));
+    }
+    return undefined;
 }
 //# sourceMappingURL=migration.js.map

package/migrations.json

@@ -0,0 +1,12 @@
+{
+  "migrations": [
+    {
+      "name": "to-contentful-v5",
+      "version": "4.0.0-next.7",
+      "kind": "auto",
+      "description": "Move to the components picture, the renamed image inputs and the removed renderer internals.",
+      "generator": "@ethlete/contentful:migrate-to-contentful-v5",
+      "docs": "/contentful/"
+    }
+  ]
+}

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@ethlete/contentful",
-  "version": "4.0.0-next.7",
+  "version": "4.0.0-next.9",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {
-    "@analogjs/vite-plugin-angular": "2.6.3",
     "@angular/common": "22.0.7",
     "@angular/core": "22.0.7",
     "@angular/router": "22.0.7",
@@ -12,20 +11,16 @@
     "@ethlete/components": "^1.0.0-next.32",
     "@ethlete/core": "^5.0.0-beta.11",
     "@ethlete/query": "^6.0.0-beta.8",
-    "@nx/devkit": "23.1.0",
-    "vite": "8.1.5"
+    "@nx/devkit": "23.1.0"
   },
   "peerDependenciesMeta": {
-    "@analogjs/vite-plugin-angular": {
-      "optional": true
-    },
     "@nx/devkit": {
       "optional": true
-    },
-    "vite": {
-      "optional": true
     }
   },
+  "ethlete": {
+    "migrations": "./migrations.json"
+  },
   "generators": "./generators/generators.json",
   "module": "fesm2022/ethlete-contentful.mjs",
   "typings": "types/ethlete-contentful.d.ts",

package/types/ethlete-contentful.d.ts

@@ -1,10 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { Type, InputSignal, InjectionToken } from '@angular/core';
+import { Type, InputSignal, InjectionToken, Provider } from '@angular/core';
 import { NgClassType } from '@ethlete/core';
 import { GQL } from '@ethlete/query';
 import { Mark, BLOCKS, INLINES, NodeData, Block } from '@contentful/rich-text-types';
 import * as _ethlete_components from '@ethlete/components';
 import { PictureSource } from '@ethlete/components';
+import * as _angular_router from '@angular/router';
 
 declare const GQL_FRAGMENT_CONTENTFUL_ASSET: GQL;
 type ContentfulGqlAsset = {
@@ -84,43 +85,6 @@ type ContentfulGqlCollectionFilterVariables<TCustomWhere extends Record<string,
     locale?: string;
 };
 
-type HtmlOpenRenderCommand = {
-    kind: 'htmlOpen';
-    nestingLevel: number;
-    domPosition: number;
-    index: number;
-    attributes: Record<string, string>;
-    tagName: keyof HTMLElementTagNameMap;
-    id: string;
-};
-type HtmlCloseRenderCommand = {
-    kind: 'htmlClose';
-    nestingLevel: number;
-    domPosition: number;
-    index: number;
-    tagName: keyof HTMLElementTagNameMap;
-    id: string;
-};
-type TextRenderCommand = {
-    kind: 'text';
-    nestingLevel: number;
-    domPosition: number;
-    index: number;
-    attributes: Record<string, string>;
-    markTags: MarkTagName[];
-    text: string;
-    id: string;
-};
-type ComponentRenderCommand = {
-    kind: 'component';
-    nestingLevel: number;
-    domPosition: number;
-    index: number;
-    component: Type<unknown>;
-    inputs: Record<string, unknown>;
-    id: string;
-};
-type RenderCommand = HtmlOpenRenderCommand | HtmlCloseRenderCommand | TextRenderCommand | ComponentRenderCommand;
 type MarkTagName = 'strong' | 'em' | 'u' | 'code' | 's' | 'sub' | 'sup';
 /**
  * Translates contentful text marks into the semantic html elements the marked text is
@@ -178,9 +142,9 @@ type CreateContentfulIncludeMapConfig = {
 declare const createContentfulIncludeMap: (config: CreateContentfulIncludeMapConfig) => ContentfulIncludeMap;
 declare class ContentfulRichTextRendererComponent {
     private viewContainerRef;
-    private readonly renderer;
+    private renderer;
     private elementRef;
-    private readonly config;
+    private config;
     /**
      * The contentful response gotten via their REST api.
      * @see https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/entries/entries-collection
@@ -191,24 +155,10 @@ declare class ContentfulRichTextRendererComponent {
      * @example "items[0].fields.html"
      */
     richTextPath: _angular_core.InputSignal<string>;
-    /**
-     * A cache for all executed commands that are not deleted.
-     * This is used to keep track of all rendered elements and components.
-     * The key is the render command ID.
-     */
     private readonly executedCommandsCache;
-    /**
-     * A map of all includes in the contentful response.
-     * This is useful for looking up assets and entries that are referenced in the rich text without having to use loops.
-     */
-    contentIncludesMap: _angular_core.Signal<ContentfulIncludeMap>;
-    /**
-     * The rich text data that should be rendered.
-     */
-    richTextData: _angular_core.Signal<RichTextResponse | null>;
-    renderCommands: _angular_core.Signal<RenderCommand[]>;
-    private renderCommandHistory;
-    private previousRenderCommandMap;
+    private contentIncludesMap;
+    private richTextData;
+    private renderCommands;
     private renderInstructions;
     constructor();
     private createRenderCommands;
@@ -263,8 +213,8 @@ type ContentfulConfig = {
     /**
      * Additional hostnames that should be treated as internal links (in addition to the current page's host).
      * Useful when the app runs on localhost during development but Contentful content references the production domain.
-     * Comparison is done by primary domain (last two hostname labels), so adding "example.com" is sufficient
-     * to also treat "foo.example.com" as internal.
+     * A configured hostname also covers its subdomains, so adding "example.com" treats
+     * "foo.example.com" as internal without matching unrelated public-suffix siblings.
      *
      * @example ['example.com']
      */
@@ -278,7 +228,7 @@ type ContentfulConfig = {
          * - `"400"` - 400px width
          * - `"400x300"` - 400px width and 300px height
          * - `"400w"` - 400px width
-         * - `"400h"` - 400px height
+         * - `"400h"` - 400px height (requires image dimensions to derive a valid width descriptor)
          * - `"400wx300h"` - 400px width and 300px height
          **/
         srcsetSizes: string[];
@@ -368,9 +318,9 @@ type ContentfulEntry<T = {
     metadata: ContentfulMetadata;
 };
 type ContentfulCollection = {
-    includes: {
-        Asset: ContentfulRestAsset[];
-        Entry: ContentfulEntry[];
+    includes?: {
+        Asset?: ContentfulRestAsset[];
+        Entry?: ContentfulEntry[];
     };
     items: ContentfulEntry[];
     limit: number;
@@ -391,8 +341,8 @@ declare class ContentfulAudioComponent {
     audioClass: _angular_core.InputSignal<NgClassType>;
     figureClass: _angular_core.InputSignal<NgClassType>;
     figcaptionClass: _angular_core.InputSignal<NgClassType>;
-    data: _angular_core.Signal<{
-        url: string | null;
+    protected data: _angular_core.Signal<{
+        url: string;
         title: string | null;
     } | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulAudioComponent, never>;
@@ -402,9 +352,8 @@ declare class ContentfulAudioComponent {
 declare class ContentfulFileComponent {
     asset: _angular_core.InputSignal<ContentfulGqlAsset | ContentfulRestAsset | null | undefined>;
     fileClass: _angular_core.InputSignal<NgClassType>;
-    data: _angular_core.Signal<{
-        url: string | null;
-        contentType: string | null;
+    protected data: _angular_core.Signal<{
+        url: string;
         size: number | null;
         title: string | null;
     } | null>;
@@ -451,14 +400,16 @@ declare const generateContentfulImageSources: (data: ContentfulRestAsset | Conte
 
 declare class ContentfulLinkComponent {
     private document;
-    private readonly config;
+    private router;
+    private config;
     href: _angular_core.InputSignal<string>;
     text: _angular_core.InputSignal<string>;
     textClass: _angular_core.InputSignal<string>;
-    isExternal: _angular_core.Signal<boolean>;
-    openInNewTab: _angular_core.Signal<boolean>;
-    internalPath: _angular_core.Signal<string>;
-    linkClass: _angular_core.Signal<string>;
+    protected usesRouterLink: _angular_core.Signal<boolean>;
+    protected openInNewTab: _angular_core.Signal<boolean>;
+    protected internalPath: _angular_core.Signal<string>;
+    protected internalUrlTree: _angular_core.Signal<_angular_router.UrlTree>;
+    protected linkClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulLinkComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentfulLinkComponent, "et-contentful-link", never, { "href": { "alias": "href"; "required": true; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; "textClass": { "alias": "textClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -466,8 +417,8 @@ declare class ContentfulLinkComponent {
 declare class ContentfulVideoComponent {
     asset: _angular_core.InputSignal<ContentfulGqlAsset | ContentfulRestAsset | null | undefined>;
     videoClass: _angular_core.InputSignal<NgClassType>;
-    data: _angular_core.Signal<{
-        url: string | null;
+    protected data: _angular_core.Signal<{
+        url: string;
         contentType: string | null;
     } | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentfulVideoComponent, never>;
@@ -478,17 +429,14 @@ declare const CONTENTFUL_CONFIG: InjectionToken<ContentfulConfig>;
 
 declare const ContentfulImports: readonly [typeof ContentfulAudioComponent, typeof ContentfulFileComponent, typeof ContentfulImageComponent, typeof ContentfulVideoComponent, typeof ContentfulRichTextRendererComponent];
 
-declare const createContentfulConfig: (config?: Partial<ContentfulConfig> | null | undefined) => ContentfulConfig;
+declare const createContentfulConfig: (config?: Partial<ContentfulConfig> | null) => ContentfulConfig;
 /**
  * Reads the contentful config from the current injector. Falls back to a config without
  * any `components` when none was provided via `provideContentfulConfig()`.
  */
 declare const injectContentfulConfig: () => ContentfulConfig;
 
-declare const provideContentfulConfig: (contentfulConfig?: Partial<ContentfulConfig> | null | undefined) => {
-    provide: _angular_core.InjectionToken<ContentfulConfig>;
-    useValue: ContentfulConfig;
-};
+declare const provideContentfulConfig: (contentfulConfig?: Partial<ContentfulConfig> | null) => Provider;
 declare const isContentfulEntryType: <T extends ContentfulEntry>(entry: ContentfulEntry, type: string) => entry is T;
 
 export { CONTENTFUL_CONFIG, ContentfulAudioComponent, ContentfulFileComponent, ContentfulImageComponent, ContentfulImports, ContentfulLinkComponent, ContentfulRichTextRendererComponent, ContentfulVideoComponent, ET_CONTENTFUL_ANY_ENTRY_CONTENT_TYPE_SYS_ID, GQL_FRAGMENT_CONTENTFUL_ASSET, createContentfulConfig, createContentfulIncludeMap, generateContentfulImageSources, generateDefaultContentfulImageSource, injectContentfulConfig, isContentfulEntryType, isContentfulGqlAsset, isRichTextRootNode, marksToClass, marksToTags, parseContentfulImageSize, provideContentfulConfig, translateContentfulNodeTypeToHtmlTag };