@maggioli-design-system/magma-codemods 2.0.0-beta.0

package/dist/surfaces/angular.js

@@ -0,0 +1,489 @@
+/**
+ * Angular template surface. Uses `@angular/compiler`'s `parseTemplate` (which
+ * preserves case and gives precise source spans for static attributes
+ * `name="x"`, property bindings `[name]="expr"`, event bindings `(name)="…"`
+ * and interpolations `{{ x }}`) and emits offset edits on the original source.
+ *
+ * Static attributes use the v2 dash-case attribute name; property bindings use
+ * the camelCase prop. Dynamic enum values and element/mixed slot content are
+ * reported under `dynamic` instead of being rewritten.
+ */
+import { parseTemplate, TmplAstBoundText, TmplAstElement, TmplAstTemplate, TmplAstText, } from '@angular/compiler';
+import { getByTag, ruleId, rulesForComponent } from '../manifest/registry.js';
+import { classRulesOf, hasClassRules, rewriteClassList, } from './shared/class-ops.js';
+import { invertBoolean, remapEnum } from './shared/attribute-ops.js';
+import { bareTrue, dynamic, stringLiteral } from './shared/value-model.js';
+import { applyEdits } from './shared/edits.js';
+import { ruleEnabled } from './shared/transform.js';
+const collapseWhitespace = (s) => s.replace(/\s+/g, ' ').trim();
+const escapeAttr = (s) => s.replace(/&/g, '&').replace(/"/g, '"');
+export const transformAngular = (source, manifest, ctx) => {
+    let parsed;
+    try {
+        parsed = parseTemplate(source, ctx.file, { preserveWhitespaces: true });
+    }
+    catch {
+        return { output: source, changed: false, findings: [] };
+    }
+    const edits = [];
+    const findings = [];
+    const classRules = classRulesOf(manifest);
+    const text = (span) => source.slice(span.start.offset, span.end.offset);
+    const removeSpanEdit = (span) => {
+        const start = span.start.offset > 0 && source[span.start.offset - 1] === ' '
+            ? span.start.offset - 1
+            : span.start.offset;
+        return { start, end: span.end.offset, text: '' };
+    };
+    const visit = (node) => {
+        if (node instanceof TmplAstElement) {
+            processElement(node);
+            for (const child of node.children)
+                visit(child);
+        }
+        else if (node instanceof TmplAstTemplate) {
+            for (const child of node.children)
+                visit(child);
+        }
+    };
+    const processElement = (el) => {
+        const tag = el.name;
+        const statics = el.attributes;
+        const inputs = el.inputs;
+        const line = el.startSourceSpan.start.line;
+        const findStatic = (name) => statics.find((a) => a.name === name);
+        const findInput = (name) => inputs.find((a) => a.name === name);
+        // Global: remove slot="default".
+        if (manifest.global.removeDefaultSlot && ruleEnabled(ctx, 'global/removeDefaultSlot')) {
+            const slot = findStatic('slot');
+            if (slot && slot.value === 'default') {
+                edits.push(removeSpanEdit(slot.sourceSpan));
+                findings.push({
+                    kind: 'change',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line,
+                    ruleId: 'global/removeDefaultSlot',
+                    message: 'remove slot="default"',
+                });
+            }
+        }
+        // Global: utility-class migrations (J) on any element — the static `class`
+        // attribute, `[class.x]` bindings (bare class in the key) and the string
+        // literals inside `[ngClass]` / `[class]` / `[attr.class]` expressions.
+        if (hasClassRules(classRules)) {
+            const enabled = (id) => ruleEnabled(ctx, id);
+            const emitRename = (atLine, entry, before, after) => {
+                findings.push({
+                    kind: 'change',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line: atLine,
+                    ruleId: entry.id,
+                    message: 'rename utility class',
+                    before,
+                    after,
+                });
+                if (entry.rule.note) {
+                    findings.push({
+                        kind: 'flag',
+                        surface: 'angular',
+                        file: ctx.file,
+                        line: atLine,
+                        ruleId: entry.id,
+                        message: entry.rule.note,
+                    });
+                }
+            };
+            const emitReport = (atLine, entry, token) => {
+                findings.push({
+                    kind: 'warn',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line: atLine,
+                    ruleId: entry.id,
+                    message: `\`${token}\`: ${entry.rule.message}`,
+                });
+            };
+            const classAttr = findStatic('class');
+            if (classAttr?.valueSpan) {
+                const span = classAttr.valueSpan;
+                const atLine = classAttr.sourceSpan.start.line;
+                const result = rewriteClassList(text(span), classRules, enabled, (entry, before, after) => emitRename(atLine, entry, before, after), (entry, token) => emitReport(atLine, entry, token));
+                if (result.changed)
+                    edits.push({ start: span.start.offset, end: span.end.offset, text: result.value });
+            }
+            for (const input of inputs) {
+                const keySpan = input.keySpan;
+                if (!keySpan)
+                    continue;
+                const key = text(keySpan);
+                const atLine = input.sourceSpan.start.line;
+                if (key.startsWith('class.')) {
+                    const token = key.slice('class.'.length);
+                    const rename = classRules.renames.get(token);
+                    if (rename && enabled(rename.id)) {
+                        edits.push({
+                            start: keySpan.start.offset,
+                            end: keySpan.end.offset,
+                            text: `class.${rename.rule.to}`,
+                        });
+                        emitRename(atLine, rename, key, `class.${rename.rule.to}`);
+                        continue;
+                    }
+                    const report = classRules.reports.get(token);
+                    if (report && enabled(report.id))
+                        emitReport(atLine, report, token);
+                    continue;
+                }
+                if (key !== 'ngClass' && key !== 'class' && key !== 'attr.class')
+                    continue;
+                const span = input.valueSpan;
+                if (!span)
+                    continue;
+                const raw = text(span);
+                if (!classRules.candidateRe?.test(raw))
+                    continue;
+                let exprChanged = false;
+                const newRaw = raw.replace(/(['"`])((?:\\.|(?!\1)[^\\])*)\1/g, (match, quote, body) => {
+                    const result = rewriteClassList(body, classRules, enabled, (entry, before, after) => {
+                        exprChanged = true;
+                        emitRename(atLine, entry, before, after);
+                    }, (entry, token) => emitReport(atLine, entry, token));
+                    return result.changed ? `${quote}${result.value}${quote}` : match;
+                });
+                if (exprChanged)
+                    edits.push({ start: span.start.offset, end: span.end.offset, text: newRaw });
+            }
+        }
+        const component = getByTag(manifest, tag);
+        if (!component)
+            return;
+        for (const rule of rulesForComponent(manifest, component)) {
+            const id = ruleId(tag, rule);
+            if (!ruleEnabled(ctx, id))
+                continue;
+            switch (rule.kind) {
+                case 'booleanInvert':
+                    applyBooleanInvert(rule, id);
+                    break;
+                case 'propRename':
+                    applyPropRename(rule, id);
+                    break;
+                case 'propRemove':
+                    applyPropRemove(rule, id);
+                    break;
+                case 'enumRemap':
+                    applyEnumRemap(rule, id);
+                    break;
+                case 'slotToAttr':
+                    applySlotToAttr(rule, id);
+                    break;
+                case 'ensureAttr':
+                    applyEnsureAttr(rule, id);
+                    break;
+                case 'slotRemove':
+                    applySlotRemove(rule, id);
+                    break;
+                case 'tagRename':
+                    applyTagRename(rule, id);
+                    break;
+                default:
+                    break;
+            }
+        }
+        /**
+         * Rename the start tag and the end tag. The end span is only an end tag when
+         * the source there reads `</tag`: a self-closing element reports its start
+         * span again.
+         */
+        function applyTagRename(rule, id) {
+            const nameEdit = (at) => ({ start: at, end: at + tag.length, text: rule.to });
+            const startSpan = el.startSourceSpan;
+            edits.push(nameEdit(startSpan.start.offset + 1));
+            const endSpan = el.endSourceSpan;
+            if (endSpan && source.startsWith(`</${tag}`, endSpan.start.offset))
+                edits.push(nameEdit(endSpan.start.offset + 2));
+            findings.push({
+                kind: 'change',
+                surface: 'angular',
+                file: ctx.file,
+                line,
+                ruleId: id,
+                component: tag,
+                message: `rename <${tag}> to <${rule.to}>`,
+                before: tag,
+                after: rule.to,
+            });
+        }
+        function applyEnsureAttr(rule, id) {
+            const startSpan = el.startSourceSpan;
+            if (rule.unless.some((p) => findStatic(p.attr) || findInput(p.prop)))
+                return;
+            const insertAt = startSpan.end.offset - 1;
+            const after = rule.value === undefined ? rule.attr.attr : `${rule.attr.attr}="${escapeAttr(rule.value)}"`;
+            edits.push({ start: insertAt, end: insertAt, text: ` ${after}` });
+            findings.push({
+                kind: 'change',
+                surface: 'angular',
+                file: ctx.file,
+                line,
+                ruleId: id,
+                component: tag,
+                message: rule.reason,
+                after,
+            });
+        }
+        function applySlotRemove(rule, id) {
+            for (const child of el.children) {
+                if (!(child instanceof TmplAstElement))
+                    continue;
+                const slot = child.attributes.find((a) => a.name === 'slot' && a.value === rule.from);
+                if (!slot)
+                    continue;
+                findings.push({
+                    kind: 'warn',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line: child.startSourceSpan.start.line,
+                    ruleId: id,
+                    component: tag,
+                    message: `the \`${rule.from}\` slot of ${tag} was removed in v2; migrate the slotted content manually`,
+                });
+            }
+        }
+        function replaceStaticBoolean(rule, attr, id) {
+            const value = attr.valueSpan ? stringLiteral(attr.value) : bareTrue();
+            const outcome = invertBoolean(value, rule.newDefault);
+            const span = attr.sourceSpan;
+            if (outcome.action === 'omit')
+                edits.push(removeSpanEdit(span));
+            else if (outcome.action === 'shorthandTrue')
+                edits.push({ start: span.start.offset, end: span.end.offset, text: rule.to.attr });
+            else if (outcome.action === 'explicitFalse')
+                edits.push({
+                    start: span.start.offset,
+                    end: span.end.offset,
+                    text: `${rule.to.attr}="false"`,
+                });
+            findings.push({
+                kind: 'change',
+                surface: 'angular',
+                file: ctx.file,
+                line,
+                ruleId: id,
+                component: tag,
+                message: `invert ${rule.from.prop} → ${rule.to.prop}`,
+                before: text(span),
+            });
+        }
+        function replaceInputBoolean(rule, input, id) {
+            const expr = input.valueSpan ? text(input.valueSpan) : '';
+            const outcome = invertBoolean(dynamic(expr), rule.newDefault);
+            const span = input.sourceSpan;
+            let after = '';
+            if (outcome.action === 'omit')
+                edits.push(removeSpanEdit(span));
+            else if (outcome.action === 'shorthandTrue') {
+                after = rule.to.attr;
+                edits.push({ start: span.start.offset, end: span.end.offset, text: after });
+            }
+            else if (outcome.action === 'explicitFalse') {
+                after = `${rule.to.attr}="false"`;
+                edits.push({ start: span.start.offset, end: span.end.offset, text: after });
+            }
+            else {
+                after = `[${rule.to.prop}]="${outcome.expr}"`;
+                edits.push({ start: span.start.offset, end: span.end.offset, text: after });
+            }
+            findings.push({
+                kind: 'change',
+                surface: 'angular',
+                file: ctx.file,
+                line,
+                ruleId: id,
+                component: tag,
+                message: `invert ${rule.from.prop} → ${rule.to.prop}`,
+                before: text(span),
+                after,
+            });
+        }
+        function applyBooleanInvert(rule, id) {
+            const s = findStatic(rule.from.attr);
+            if (s)
+                replaceStaticBoolean(rule, s, id);
+            const i = findInput(rule.from.prop);
+            if (i)
+                replaceInputBoolean(rule, i, id);
+        }
+        function applyPropRename(rule, id) {
+            const s = findStatic(rule.from.attr);
+            if (s) {
+                const span = s.sourceSpan;
+                const text2 = s.valueSpan ? `${rule.to.attr}="${s.value}"` : rule.to.attr;
+                edits.push({ start: span.start.offset, end: span.end.offset, text: text2 });
+                findings.push({
+                    kind: 'change',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line,
+                    ruleId: id,
+                    component: tag,
+                    message: `rename ${rule.from.prop} → ${rule.to.prop}`,
+                });
+            }
+            const i = findInput(rule.from.prop);
+            if (i && i.valueSpan) {
+                const span = i.sourceSpan;
+                edits.push({
+                    start: span.start.offset,
+                    end: span.end.offset,
+                    text: `[${rule.to.prop}]="${text(i.valueSpan)}"`,
+                });
+                findings.push({
+                    kind: 'change',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line,
+                    ruleId: id,
+                    component: tag,
+                    message: `rename [${rule.from.prop}] → [${rule.to.prop}]`,
+                });
+            }
+        }
+        function applyPropRemove(rule, id) {
+            const s = findStatic(rule.prop.attr);
+            const i = findInput(rule.prop.prop);
+            const span = (s?.sourceSpan ?? i?.sourceSpan);
+            if (!span)
+                return;
+            edits.push(removeSpanEdit(span));
+            findings.push({
+                kind: 'warn',
+                surface: 'angular',
+                file: ctx.file,
+                line,
+                ruleId: id,
+                component: tag,
+                message: rule.message,
+            });
+        }
+        function applyEnumRemap(rule, id) {
+            const v2set = rule.v2set ? component.v2EnumSets?.[rule.v2set] : undefined;
+            const s = findStatic(rule.prop.attr);
+            if (s) {
+                const outcome = remapEnum(s.valueSpan ? stringLiteral(s.value) : bareTrue(), rule.map, v2set);
+                if (outcome.action === 'rename') {
+                    edits.push({
+                        start: s.sourceSpan.start.offset,
+                        end: s.sourceSpan.end.offset,
+                        text: `${rule.prop.attr}="${outcome.value}"`,
+                    });
+                    findings.push({
+                        kind: 'change',
+                        surface: 'angular',
+                        file: ctx.file,
+                        line,
+                        ruleId: id,
+                        component: tag,
+                        message: `remap ${rule.prop.prop}`,
+                        after: outcome.value,
+                    });
+                }
+                else if (outcome.action === 'flag') {
+                    findings.push({
+                        kind: 'flag',
+                        surface: 'angular',
+                        file: ctx.file,
+                        line,
+                        ruleId: id,
+                        component: tag,
+                        message: `${rule.prop.prop}="${s.value}": ${outcome.reason}`,
+                    });
+                }
+            }
+            const i = findInput(rule.prop.prop);
+            if (i)
+                findings.push({
+                    kind: 'dynamic',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line,
+                    ruleId: id,
+                    component: tag,
+                    message: `[${rule.prop.prop}] is dynamic; remap the enum value by hand`,
+                });
+        }
+        function applySlotToAttr(rule, id) {
+            if (rule.slot !== 'default')
+                return;
+            if (findStatic(rule.to.attr) || findInput(rule.to.prop))
+                return;
+            const startSpan = el.startSourceSpan;
+            const endSpan = el.endSourceSpan;
+            if (!endSpan)
+                return;
+            const elementChildren = el.children.filter((c) => c instanceof TmplAstElement || c instanceof TmplAstTemplate);
+            const textChildren = el.children.filter((c) => c instanceof TmplAstText);
+            const boundChildren = el.children.filter((c) => c instanceof TmplAstBoundText);
+            const staticText = collapseWhitespace(textChildren.map((c) => c.value).join(''));
+            const flag = (message) => {
+                findings.push({
+                    kind: 'dynamic',
+                    surface: 'angular',
+                    file: ctx.file,
+                    line,
+                    ruleId: id,
+                    component: tag,
+                    message,
+                });
+            };
+            let attrText;
+            let before = '';
+            if (elementChildren.length > 0) {
+                flag(`<${tag}> content contains elements; move the text into \`${rule.to.attr}\` manually`);
+                return;
+            }
+            else if (boundChildren.length === 0 && staticText !== '') {
+                attrText = `${rule.to.attr}="${escapeAttr(staticText)}"`;
+                before = staticText;
+            }
+            else if (boundChildren.length === 1 && staticText === '') {
+                const raw = text(boundChildren[0].sourceSpan).trim();
+                const single = raw.startsWith('{{') && raw.endsWith('}}') && raw.indexOf('{{', 2) === -1;
+                if (!single) {
+                    flag(`<${tag}> has complex interpolation; move it into \`${rule.to.attr}\` manually`);
+                    return;
+                }
+                attrText = `[${rule.to.prop}]="${raw.slice(2, -2).trim()}"`;
+                before = raw;
+            }
+            else if (boundChildren.length === 0 && staticText === '') {
+                return;
+            }
+            else {
+                flag(`<${tag}> has mixed content; move it into \`${rule.to.attr}\` manually`);
+                return;
+            }
+            const insertAt = startSpan.end.offset - 1;
+            edits.push({ start: insertAt, end: insertAt, text: ` ${attrText}` });
+            edits.push({ start: startSpan.end.offset, end: endSpan.start.offset, text: '' });
+            findings.push({
+                kind: 'change',
+                surface: 'angular',
+                file: ctx.file,
+                line,
+                ruleId: id,
+                component: tag,
+                message: `lift content into \`${rule.to.attr ?? rule.to.prop}\``,
+                before,
+                after: attrText,
+            });
+        }
+    };
+    for (const node of parsed.nodes)
+        visit(node);
+    if (edits.length === 0)
+        return { output: source, changed: false, findings };
+    return { output: applyEdits(source, edits), changed: true, findings };
+};

package/dist/surfaces/css.d.ts

@@ -0,0 +1,5 @@
+import { type Manifest } from '../manifest/schema.js';
+import { type TransformContext, type TransformResult } from './shared/transform.js';
+export declare const transformCss: (source: string, manifest: Manifest, ctx: TransformContext, options?: {
+    scss?: boolean;
+}) => TransformResult;