@ethlete/contentful 4.0.0-next.11 → 4.0.0-next.13

package/generators/migrate-contentful-asset-classes/migration.js

@@ -0,0 +1,163 @@
+import { formatFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-to-contentful-v5/migration-scope.js';
+export const CONTENTFUL_ASSET_CLASSES_REPORT_PATH = 'contentful-asset-classes-migration-tasks.md';
+const REMOVED_CLASS_INPUTS = {
+    'et-contentful-video': { videoClass: 'et-contentful-video-video' },
+    'et-contentful-audio': {
+        audioClass: 'et-contentful-audio-audio',
+        figureClass: 'et-contentful-audio-figure',
+        figcaptionClass: 'et-contentful-audio-figcaption',
+    },
+    'et-contentful-file': { fileClass: 'et-contentful-file-anchor' },
+    'et-contentful-link': { textClass: 'et-contentful-link-anchor', anchorClass: 'et-contentful-link-anchor' },
+};
+const TAG_REGEX = new RegExp(`<(${Object.keys(REMOVED_CLASS_INPUTS).join('|')})(?=[\\s/>])`, 'g');
+const INLINE_TEMPLATE_REGEX = /template\s*:\s*`([\s\S]*?)`/g;
+const LINK_INPUT_DECLARATION_REGEX = /\b(textClass|anchorClass)\s*=\s*input\b/g;
+const lineOf = (source, index) => source.slice(0, index).split('\n').length;
+const findTagEnd = (source, from) => {
+    let quote = null;
+    for (let index = from; index < source.length; index++) {
+        const character = source[index];
+        if (quote) {
+            if (character === quote)
+                quote = null;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+        }
+        else if (character === '>') {
+            return index;
+        }
+    }
+    return -1;
+};
+const isInsideQuotes = (tag, index) => {
+    let quote = null;
+    for (let position = 0; position < index; position++) {
+        const character = tag[position];
+        if (quote) {
+            if (character === quote)
+                quote = null;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+        }
+    }
+    return quote !== null;
+};
+const removeClassInputs = (template) => {
+    const removals = [];
+    let content = '';
+    let cursor = 0;
+    for (const tagMatch of template.matchAll(TAG_REGEX)) {
+        const start = tagMatch.index ?? 0;
+        if (start < cursor)
+            continue;
+        const end = findTagEnd(template, start);
+        if (end === -1)
+            break;
+        const tagName = tagMatch[1] ?? '';
+        const inputs = Object.keys(REMOVED_CLASS_INPUTS[tagName] ?? {});
+        const attributeRegex = new RegExp(`(\\s+)(\\[?(${inputs.join('|')})\\]?(?:\\s*=\\s*(?:"[^"]*"|'[^']*'))?)(?=[\\s/>])`, 'g');
+        const tag = template.slice(start, end + 1);
+        const attributeMatches = [...tag.matchAll(attributeRegex)].filter((attributeMatch) => !isInsideQuotes(tag, attributeMatch.index ?? 0));
+        let nextTag = tag;
+        for (const attributeMatch of [...attributeMatches].reverse()) {
+            const index = attributeMatch.index ?? 0;
+            nextTag = nextTag.slice(0, index) + nextTag.slice(index + attributeMatch[0].length);
+        }
+        for (const attributeMatch of attributeMatches) {
+            removals.push({
+                offset: start + (attributeMatch.index ?? 0) + (attributeMatch[1] ?? '').length,
+                tagName,
+                input: attributeMatch[3] ?? '',
+                attribute: attributeMatch[2] ?? '',
+            });
+        }
+        content += template.slice(cursor, start) + nextTag;
+        cursor = end + 1;
+    }
+    content += template.slice(cursor);
+    return { content, removals };
+};
+const createRemovalTask = (filePath, line, removal) => {
+    const replacement = REMOVED_CLASS_INPUTS[removal.tagName]?.[removal.input] ?? '';
+    return {
+        id: `asset-class-input:${filePath}:${line}:${removal.input}`,
+        file: filePath,
+        line,
+        message: `Removed \`${removal.attribute}\` from \`${removal.tagName}\`. Style the static \`.${replacement}\` class instead.`,
+    };
+};
+const migrateHtmlFile = (filePath, source) => {
+    const { content, removals } = removeClassInputs(source);
+    return {
+        content,
+        tasks: removals.map((removal) => createRemovalTask(filePath, lineOf(source, removal.offset), removal)),
+    };
+};
+const migrateTsFile = (filePath, source) => {
+    const tasks = [];
+    const content = source.replace(INLINE_TEMPLATE_REGEX, (match, template, offset) => {
+        const templateOffset = offset + match.indexOf('`') + 1;
+        const result = removeClassInputs(template);
+        for (const removal of result.removals) {
+            tasks.push(createRemovalTask(filePath, lineOf(source, templateOffset + removal.offset), removal));
+        }
+        return result.removals.length > 0 ? match.replace(template, () => result.content) : match;
+    });
+    for (const declaration of source.matchAll(LINK_INPUT_DECLARATION_REGEX)) {
+        const line = lineOf(source, declaration.index ?? 0);
+        tasks.push({
+            id: `link-class-input:${filePath}:${line}`,
+            file: filePath,
+            line,
+            message: `\`${declaration[1]}\` is declared as an input. If this is a custom \`components.link\`, the rich-text renderer no longer sets it - it passes \`marks\` (the shared mark types) and \`richText: true\` instead.`,
+        });
+    }
+    return { content, tasks };
+};
+const renderReport = (tasks) => [
+    '# Contentful asset class inputs migration tasks',
+    '',
+    'The class inputs of `et-contentful-video`, `et-contentful-audio`, `et-contentful-file` and',
+    '`et-contentful-link` are gone. Every inner element carries a static `et-contentful-*` class instead.',
+    'The migration removed the bindings below; move their styling onto the named class. Delete this file when done.',
+    '',
+    ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}:${task.line}`, `- ${task.message}`, ''].join('\n')),
+].join('\n');
+export default async function migrateContentfulAssetClasses(tree, schema) {
+    console.log('\n🔄 Removing the Contentful asset class inputs...');
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    const tasks = [];
+    let filesChanged = 0;
+    scope.visit(tree, (filePath) => {
+        const isHtml = filePath.endsWith('.html');
+        const isTs = filePath.endsWith('.ts') && !filePath.endsWith('.d.ts');
+        if (!isHtml && !isTs)
+            return;
+        const before = tree.read(filePath, 'utf-8');
+        if (!before)
+            return;
+        const result = isHtml ? migrateHtmlFile(filePath, before) : migrateTsFile(filePath, before);
+        tasks.push(...result.tasks);
+        if (result.content !== before) {
+            tree.write(filePath, result.content);
+            filesChanged++;
+            console.log(`   ✓ ${filePath}`);
+        }
+    });
+    if (tasks.length > 0) {
+        tree.write(CONTENTFUL_ASSET_CLASSES_REPORT_PATH, renderReport(tasks));
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    console.log(`\n✅ Updated ${filesChanged} file(s).`);
+    if (tasks.length > 0) {
+        console.log(`⚠️  ${tasks.length} site(s) need their styling moved — see ${CONTENTFUL_ASSET_CLASSES_REPORT_PATH}.`);
+    }
+}
+//# sourceMappingURL=migration.js.map

package/generators/migrate-contentful-asset-classes/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-contentful-asset-classes",
+  "title": "Remove the Contentful asset and link class inputs",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to migrate. Defaults to every project in the workspace. Every site is rewritten independently, so any scope is safe — use this to keep the diff reviewable.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to migrate, relative to the workspace root (e.g. 'libs/ui'). Unioned with `projects`. Defaults to the whole workspace.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}

package/generators/migrate-contentful-default-components/contentful-default-components.js

@@ -0,0 +1,73 @@
+const CONSTANT = 'CONTENTFUL_DEFAULT_COMPONENTS';
+const SPREAD = `...${CONSTANT}`;
+const CONTENTFUL_IMPORT = /import\s*\{([^}]*)\}\s*from\s*['"]@ethlete\/contentful['"]/g;
+const lineOf = (content, index) => content.slice(0, index).split('\n').length;
+const taskId = (filePath, line) => `contentful-default-components--${filePath.replace(/[^a-zA-Z0-9]+/g, '-')}-${line}`;
+const namesOwnComponents = (content, braceIndex) => {
+    let depth = 0;
+    let topLevel = '';
+    for (let i = braceIndex; i < content.length; i++) {
+        const char = content[i] ?? '';
+        if ('{[('.includes(char))
+            depth++;
+        else if ('}])'.includes(char))
+            depth--;
+        else if (depth === 1)
+            topLevel += char;
+        if (depth === 0)
+            break;
+    }
+    return /(^|[,\s])components\s*:/.test(topLevel);
+};
+const contentfulImportNaming = (content, name) => [...content.matchAll(CONTENTFUL_IMPORT)].find((match) => name.test(match[1] ?? ''));
+export const importsProvideContentfulConfig = (content) => contentfulImportNaming(content, /\bprovideContentfulConfig\b/) !== undefined;
+export const findUnprovidedRendererTask = (filePath, content) => {
+    const match = contentfulImportNaming(content, /\b(ContentfulRichTextRendererComponent|ContentfulImports)\b/);
+    if (!match)
+        return null;
+    const line = lineOf(content, match.index ?? 0);
+    return {
+        id: taskId(filePath, line),
+        file: filePath,
+        line,
+        message: `Renders Contentful rich text, but no file calls \`provideContentfulConfig\`. Without it embedded assets are skipped and links lose router navigation. Add \`provideContentfulConfig({ ${SPREAD} })\` to the application providers.`,
+    };
+};
+export const scanContentfulDefaultComponentsInFile = (filePath, content) => {
+    const tasks = [];
+    const importStatement = contentfulImportNaming(content, /\bprovideContentfulConfig\b/);
+    if (!importStatement || content.includes(CONSTANT))
+        return { next: null, tasks };
+    const report = (index, message) => {
+        const line = lineOf(content, index);
+        tasks.push({ id: taskId(filePath, line), file: filePath, line, message });
+    };
+    let rewrote = false;
+    const next = content.replace(/provideContentfulConfig\(\s*(\{\s*\}|\{\s*|\)|[^\s{)])/g, (call, opening, index) => {
+        if (opening === ')') {
+            rewrote = true;
+            return `provideContentfulConfig({ ${SPREAD} })`;
+        }
+        if (opening.startsWith('{')) {
+            rewrote = true;
+            if (namesOwnComponents(content, index + call.length - opening.length)) {
+                report(index, `\`provideContentfulConfig\` names its own \`components\`, which replaces the spread. Write \`components: { ...${CONSTANT}.components, ... }\` to keep the defaults.`);
+            }
+            return opening.endsWith('}')
+                ? `provideContentfulConfig({ ${SPREAD} }`
+                : `provideContentfulConfig({ ${SPREAD}, `;
+        }
+        const argument = content.slice(index + call.length - 1).match(/^[^)\n]*/)?.[0] ?? '';
+        report(index, `\`provideContentfulConfig(${argument})\` is not a literal the migration can edit. Spread \`${CONSTANT}\` into it unless it names every asset and link component itself.`);
+        return call;
+    });
+    if (!rewrote)
+        return { next: null, tasks };
+    const rewrittenImport = importStatement[0].replace('{', `{ ${CONSTANT},`);
+    const importIndex = next.indexOf(importStatement[0]);
+    return {
+        next: next.slice(0, importIndex) + rewrittenImport + next.slice(importIndex + importStatement[0].length),
+        tasks,
+    };
+};
+//# sourceMappingURL=contentful-default-components.js.map

package/generators/migrate-contentful-default-components/migration.js

@@ -0,0 +1,74 @@
+import { formatFiles, visitNotIgnoredFiles } from '@nx/devkit';
+import { createMigrationScope } from '../migrate-to-contentful-v5/migration-scope.js';
+import { findUnprovidedRendererTask, importsProvideContentfulConfig, scanContentfulDefaultComponentsInFile, } from './contentful-default-components.js';
+export const CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH = 'contentful-default-components-migration-tasks.md';
+const isSourceFile = (filePath) => filePath.endsWith('.ts') && !filePath.endsWith('.d.ts');
+const workspaceProvidesContentfulConfig = (tree) => {
+    let found = false;
+    visitNotIgnoredFiles(tree, '', (filePath) => {
+        if (found || !isSourceFile(filePath))
+            return;
+        found = importsProvideContentfulConfig(tree.read(filePath, 'utf-8') ?? '');
+    });
+    return found;
+};
+const renderReport = (tasks) => [
+    '# Contentful default components migration tasks',
+    '',
+    'The shipped asset and link components are opt-in. Without them embedded assets are skipped and',
+    'hyperlinks render as plain anchors. The migration spread `CONTENTFUL_DEFAULT_COMPONENTS` into every',
+    'literal `provideContentfulConfig` call; the places below need it by hand:',
+    '',
+    '```ts',
+    "import { CONTENTFUL_DEFAULT_COMPONENTS, provideContentfulConfig } from '@ethlete/contentful';",
+    '',
+    'provideContentfulConfig({ ...CONTENTFUL_DEFAULT_COMPONENTS });',
+    '```',
+    '',
+    'A config that names every asset and link component itself needs nothing. Delete this file when done.',
+    '',
+    ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}:${task.line}`, `- ${task.message}`, ''].join('\n')),
+].join('\n');
+export default async function migrateContentfulDefaultComponents(tree, schema) {
+    console.log('\n🔎 Spreading CONTENTFUL_DEFAULT_COMPONENTS into provideContentfulConfig...');
+    const scope = createMigrationScope(tree, schema);
+    console.log(`   Scope: ${scope.describe()}`);
+    const changed = [];
+    const tasks = [];
+    const rendererTasks = [];
+    scope.visit(tree, (filePath) => {
+        if (!isSourceFile(filePath))
+            return;
+        const content = tree.read(filePath, 'utf-8');
+        if (!content)
+            return;
+        const result = scanContentfulDefaultComponentsInFile(filePath, content);
+        const rendererTask = findUnprovidedRendererTask(filePath, content);
+        tasks.push(...result.tasks);
+        if (rendererTask)
+            rendererTasks.push(rendererTask);
+        if (result.next !== null) {
+            tree.write(filePath, result.next);
+            changed.push(filePath);
+        }
+    });
+    if (rendererTasks.length > 0 && !workspaceProvidesContentfulConfig(tree)) {
+        tasks.push(...rendererTasks);
+    }
+    if (tasks.length > 0) {
+        tree.write(CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH, renderReport(tasks));
+    }
+    if (!schema.skipFormat) {
+        await formatFiles(tree);
+    }
+    if (changed.length > 0) {
+        console.log(`\n✅ Spread CONTENTFUL_DEFAULT_COMPONENTS in ${changed.length} file(s).`);
+    }
+    if (tasks.length > 0) {
+        console.log(`\n⚠️  ${tasks.length} place(s) need the default components by hand — see ${CONTENTFUL_DEFAULT_COMPONENTS_REPORT_PATH}.`);
+    }
+    else if (changed.length === 0) {
+        console.log('\n✅ Nothing to do.');
+    }
+}
+//# sourceMappingURL=migration.js.map

package/generators/migrate-contentful-default-components/schema.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "migrate-contentful-default-components",
+  "title": "Spread CONTENTFUL_DEFAULT_COMPONENTS into provideContentfulConfig",
+  "type": "object",
+  "properties": {
+    "projects": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Nx projects to migrate. Defaults to every project in the workspace. Every site is rewritten independently, so any scope is safe — use this to keep the diff reviewable.",
+      "alias": "project"
+    },
+    "include": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Path prefixes to migrate, relative to the workspace root (e.g. 'libs/ui'). Unioned with `projects`. Defaults to the whole workspace.",
+      "alias": "includePath"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files after migration",
+      "default": false
+    }
+  },
+  "required": []
+}

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

@@ -3,7 +3,7 @@ import { createMigrationScope } from './migration-scope.js';
 export const CONTENTFUL_V5_REPORT_PATH = 'contentful-v5-migration-tasks.md';
 const COMPONENTS_PACKAGE = '@ethlete/components';
 const COMPONENTS_VERSION = '^1.0.0-next.32';
-/** Inputs that v5 dropped — the picture element now only carries static `et-picture-*` classes. */
+/** Inputs that 4.0 dropped — the picture element now only carries static `et-picture-*` classes. */
 const REMOVED_CLASS_INPUTS = ['imgClass', 'figureClass', 'figcaptionClass', 'pictureClass'];
 /** Renderer internals that are no longer exported from `@ethlete/contentful`. */
 const REMOVED_EXPORTS = [
@@ -188,7 +188,7 @@ const migratePackageJson = (tree, filePath) => {
     return { changed, tasks };
 };
 const renderReport = (tasks) => [
-    '# @ethlete/contentful v5 migration tasks',
+    '# @ethlete/contentful 4 migration tasks',
     '',
     'The codemod renamed the `et-contentful-image` `hasPriority` input to `priority`, removed the dropped',
     '`useTailwindClasses` config option and made sure `@ethlete/components` is declared. The sites below',
@@ -205,7 +205,7 @@ const renderReport = (tasks) => [
     ...tasks.map((task) => [`## \`${task.id}\``, '', `- ${task.file}${task.line ? `:${task.line}` : ''}`, `- ${task.message}`, ''].join('\n')),
 ].join('\n');
 export default async function migrateToContentfulV5(tree, schema) {
-    console.log('\n🔄 Migrating to @ethlete/contentful v5...');
+    console.log('\n🔄 Migrating to @ethlete/contentful 4...');
     const scope = createMigrationScope(tree, schema);
     console.log(`   Scope: ${scope.describe()}`);
     const tasks = [];

package/migrations.json

@@ -4,9 +4,28 @@
       "name": "to-contentful-v5",
       "version": "4.0.0-next.7",
       "kind": "auto",
+      "level": "required",
       "description": "Move to the components picture, the renamed image inputs and the removed renderer internals.",
       "generator": "@ethlete/contentful:migrate-to-contentful-v5",
       "docs": "/contentful/"
+    },
+    {
+      "name": "contentful-default-components",
+      "version": "4.0.0-next.12",
+      "kind": "auto",
+      "level": "required",
+      "description": "Spread CONTENTFUL_DEFAULT_COMPONENTS into provideContentfulConfig, and report the calls that need it by hand.",
+      "generator": "@ethlete/contentful:migrate-contentful-default-components",
+      "docs": "/contentful/"
+    },
+    {
+      "name": "contentful-asset-classes",
+      "version": "4.0.0-next.13",
+      "kind": "auto",
+      "level": "required",
+      "description": "Remove the dropped video, audio, file and link class inputs, and report each removal with the static class that replaces it.",
+      "generator": "@ethlete/contentful:migrate-contentful-asset-classes",
+      "docs": "/contentful/"
     }
   ]
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@ethlete/contentful",
-  "version": "4.0.0-next.11",
+  "version": "4.0.0-next.13",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {
-    "@angular/common": "22.1.6",
-    "@angular/core": "22.1.6",
-    "@angular/router": "22.1.6",
-    "@contentful/rich-text-types": "17.2.7",
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/router": "^22.1.0",
+    "@contentful/rich-text-types": "^17.0.0",
     "@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"
+    "@nx/devkit": "^23.0.0"
   },
   "peerDependenciesMeta": {
     "@nx/devkit": {