@juspay/svelte-ui-components 3.5.0 → 3.5.1

package/dist-codemod/transform.js

@@ -0,0 +1,278 @@
+import { parse } from 'svelte/compiler';
+import { legacyRenameTable, legacyProps } from "./legacy-pairs.js";
+export const SUI_PACKAGE = '@juspay/svelte-ui-components';
+/**
+ * estree nodes inside `<script>` are not typed with offsets, but the acorn
+ * parser svelte uses attaches them at runtime; recover them by narrowing.
+ */
+function rangeOf(node) {
+    if ('start' in node &&
+        typeof node.start === 'number' &&
+        'end' in node &&
+        typeof node.end === 'number') {
+        return { start: node.start, end: node.end };
+    }
+    return null;
+}
+function positionOf(source, offset) {
+    const before = source.slice(0, offset);
+    const line = (before.match(/\n/g) ?? []).length + 1;
+    return { line, column: offset - before.lastIndexOf('\n') };
+}
+function applyEdits(source, edits) {
+    const ordered = [...edits].sort((a, b) => b.start - a.start);
+    return ordered.reduce((code, edit) => code.slice(0, edit.start) + edit.text + code.slice(edit.end), source);
+}
+function isPackageSpecifier(specifier) {
+    return specifier === SUI_PACKAGE || specifier.startsWith(`${SUI_PACKAGE}/`);
+}
+function resolverFor(options) {
+    return {
+        isLibraryImport: options.isLibraryImport ?? isPackageSpecifier,
+        defaultImportComponent: options.defaultImportComponent ?? (() => null)
+    };
+}
+function scanScript(source, file, program, resolver, scan) {
+    for (const statement of program.body) {
+        if (statement.type !== 'ImportDeclaration') {
+            continue;
+        }
+        const specifier = typeof statement.source.value === 'string' ? statement.source.value : '';
+        const fromLibrary = resolver.isLibraryImport(specifier);
+        if (fromLibrary) {
+            scan.importsLibrary = true;
+        }
+        for (const spec of statement.specifiers) {
+            if (spec.type === 'ImportSpecifier') {
+                const exported = spec.imported.type === 'Identifier'
+                    ? spec.imported.name
+                    : typeof spec.imported.value === 'string'
+                        ? spec.imported.value
+                        : null;
+                scan.bindings.set(spec.local.name, fromLibrary && exported !== null ? { kind: 'component', exported } : { kind: 'other' });
+            }
+            else if (spec.type === 'ImportNamespaceSpecifier') {
+                scan.bindings.set(spec.local.name, fromLibrary ? { kind: 'namespace' } : { kind: 'other' });
+            }
+            else {
+                const component = fromLibrary ? resolver.defaultImportComponent(specifier) : null;
+                scan.bindings.set(spec.local.name, component !== null ? { kind: 'component', exported: component } : { kind: 'other' });
+                if (fromLibrary && component === null) {
+                    const at = positionOf(source, rangeOf(spec)?.start ?? 0);
+                    scan.warnings.push({
+                        file,
+                        line: at.line,
+                        column: at.column,
+                        message: `default import from '${specifier}' cannot be resolved to a component; its usages are not rewritten`
+                    });
+                }
+            }
+        }
+    }
+}
+function resolveTag(tagName, bindings) {
+    const segments = tagName.split('.');
+    const head = segments.at(0);
+    if (typeof head !== 'string' || head.length === 0) {
+        return { kind: 'unresolved' };
+    }
+    const binding = bindings.get(head) ?? null;
+    if (binding === null) {
+        return { kind: 'unresolved' };
+    }
+    if (segments.length === 1) {
+        return binding.kind === 'component'
+            ? { kind: 'library', component: binding.exported }
+            : { kind: 'other' };
+    }
+    const member = segments.at(1);
+    if (segments.length === 2 && binding.kind === 'namespace' && typeof member === 'string') {
+        return { kind: 'library', component: member };
+    }
+    return { kind: 'other' };
+}
+function resolveThisExpression(expression, bindings) {
+    if (expression.type === 'Identifier') {
+        return resolveTag(expression.name, bindings);
+    }
+    if (expression.type === 'MemberExpression' &&
+        !expression.computed &&
+        expression.object.type === 'Identifier' &&
+        expression.property.type === 'Identifier') {
+        return resolveTag(`${expression.object.name}.${expression.property.name}`, bindings);
+    }
+    return { kind: 'unresolved' };
+}
+function renameAttributes(source, file, tagLabel, component, element, table, scan) {
+    if (table === null) {
+        return;
+    }
+    const presentNames = new Set();
+    for (const attribute of element.attributes) {
+        if (attribute.type === 'Attribute') {
+            presentNames.add(attribute.name);
+        }
+    }
+    for (const attribute of element.attributes) {
+        if (attribute.type === 'SpreadAttribute') {
+            const at = positionOf(source, attribute.start);
+            const renameable = [...table.keys()].sort().join(', ');
+            scan.warnings.push({
+                file,
+                line: at.line,
+                column: at.column,
+                message: `spread attribute on <${tagLabel}> (${component}) may carry renamed props (${renameable}) — not rewritten, review manually`
+            });
+            continue;
+        }
+        if (attribute.type !== 'Attribute') {
+            continue;
+        }
+        const target = table.get(attribute.name) ?? null;
+        if (target === null) {
+            continue;
+        }
+        if (presentNames.has(target)) {
+            const at = positionOf(source, attribute.start);
+            scan.warnings.push({
+                file,
+                line: at.line,
+                column: at.column,
+                message: `target prop '${target}' already present on <${tagLabel}> (${component}); '${attribute.name}' left as-is — review manually`
+            });
+            continue;
+        }
+        if (source.charAt(attribute.start) === '{') {
+            // Shorthand `{prop}`: expand to `newName={prop}`, keeping the local identifier.
+            scan.edits.push({
+                start: attribute.start,
+                end: attribute.end,
+                text: `${target}={${attribute.name}}`
+            });
+            scan.propsRenamed += 1;
+            continue;
+        }
+        const nameEnd = attribute.start + attribute.name.length;
+        if (source.slice(attribute.start, nameEnd) !== attribute.name) {
+            const at = positionOf(source, attribute.start);
+            scan.warnings.push({
+                file,
+                line: at.line,
+                column: at.column,
+                message: `could not locate attribute name '${attribute.name}' on <${tagLabel}> in source text — not rewritten`
+            });
+            continue;
+        }
+        scan.edits.push({ start: attribute.start, end: nameEnd, text: target });
+        scan.propsRenamed += 1;
+    }
+}
+function warnUnresolvedElement(source, file, tagLabel, element, renameableProps, scan) {
+    const suspicious = element.attributes
+        .filter((attribute) => attribute.type === 'Attribute')
+        .map((attribute) => attribute.name)
+        .filter((name) => renameableProps.has(name));
+    if (suspicious.length === 0) {
+        return;
+    }
+    const at = positionOf(source, element.start);
+    scan.warnings.push({
+        file,
+        line: at.line,
+        column: at.column,
+        message: `<${tagLabel}> is not resolvable to an import but has renameable prop(s) ${suspicious.join(', ')} — not rewritten, review manually`
+    });
+}
+function walkFragment(fragment, visit) {
+    for (const node of fragment.nodes) {
+        if (node.type === 'Component' || node.type === 'SvelteComponent') {
+            visit(node);
+        }
+        // Structural recursion over every fragment-bearing property covers all
+        // element and block kinds (including future ones) without enumerating them.
+        if ('fragment' in node && typeof node.fragment === 'object') {
+            walkFragment(node.fragment, visit);
+        }
+        if ('body' in node && typeof node.body === 'object') {
+            walkFragment(node.body, visit);
+        }
+        if ('consequent' in node) {
+            walkFragment(node.consequent, visit);
+        }
+        if ('alternate' in node && node.alternate !== null) {
+            walkFragment(node.alternate, visit);
+        }
+        if ('fallback' in node) {
+            const fallback = node.fallback ?? null;
+            if (fallback !== null) {
+                walkFragment(fallback, visit);
+            }
+        }
+        if ('pending' in node && node.pending !== null) {
+            walkFragment(node.pending, visit);
+        }
+        if ('then' in node && node.then !== null) {
+            walkFragment(node.then, visit);
+        }
+        if ('catch' in node && node.catch !== null) {
+            walkFragment(node.catch, visit);
+        }
+    }
+}
+/**
+ * Rewrites every deprecated event-prop spelling on a library component in a
+ * consumer's `.svelte` file to the corrected one (`legacy-pairs.ts`). Only
+ * components resolvable to an import from this package are touched; a tag
+ * that cannot be resolved but carries a renameable prop is reported instead.
+ */
+export function transformSvelte(source, file, options = {}) {
+    const resolver = resolverFor(options);
+    let root;
+    try {
+        root = parse(source, { modern: true, filename: file });
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return {
+            code: source,
+            changed: false,
+            propsRenamed: 0,
+            warnings: [{ file, line: 1, column: 1, message: `could not parse file: ${message}` }]
+        };
+    }
+    const scan = {
+        edits: [],
+        warnings: [],
+        bindings: new Map(),
+        importsLibrary: false,
+        propsRenamed: 0
+    };
+    const instance = root.instance ?? null;
+    if (instance !== null) {
+        scanScript(source, file, instance.content, resolver, scan);
+    }
+    const moduleScript = root.module ?? null;
+    if (moduleScript !== null) {
+        scanScript(source, file, moduleScript.content, resolver, scan);
+    }
+    const renames = legacyRenameTable();
+    walkFragment(root.fragment, (element) => {
+        const resolution = element.type === 'Component'
+            ? resolveTag(element.name, scan.bindings)
+            : resolveThisExpression(element.expression, scan.bindings);
+        const tagLabel = element.type === 'Component' ? element.name : 'svelte:component';
+        if (resolution.kind === 'library') {
+            renameAttributes(source, file, tagLabel, resolution.component, element, renames.get(resolution.component) ?? null, scan);
+        }
+        else if (resolution.kind === 'unresolved' && scan.importsLibrary) {
+            warnUnresolvedElement(source, file, tagLabel, element, legacyProps(), scan);
+        }
+    });
+    const code = applyEdits(source, scan.edits);
+    return {
+        code,
+        changed: code !== source,
+        propsRenamed: scan.propsRenamed,
+        warnings: scan.warnings
+    };
+}

package/dist-codemod/wc-children.js

@@ -0,0 +1,66 @@
+/**
+ * Detects the breaking change in the 4.0.0 custom-element surface (the other
+ * 4.0.0 break, the deprecated event spellings, is handled by legacy-pairs.ts):
+ * `children` is no longer a declared prop on any `sui-*` element.
+ *
+ * Three elements shipped it in 3.1.4 — `sui-chat-bubble`, `sui-draggable` and
+ * `sui-resizable` — and none of them had a `<slot>`, so assigning the property
+ * was the only way to give them content. Declaring it was also what left
+ * `element.children` returning undefined instead of the native HTMLCollection,
+ * so `el.children.length` threw. Both are fixed together: the declaration is
+ * gone and those wrappers forward the default slot instead.
+ *
+ * This reports rather than rewrites. The fix moves content from a JavaScript
+ * assignment into markup, which changes where the content is authored, not just
+ * how it is spelled — a person has to decide what the light-DOM children are.
+ * Auto-editing that would be guesswork dressed as a codemod.
+ */
+export const CHILDREN_BREAKING_TAGS = [
+    'sui-chat-bubble',
+    'sui-draggable',
+    'sui-resizable'
+];
+/**
+ * Matches `<expr>.children =` but not `==`/`===`, and not `.childNodes`.
+ * Deliberately loose on the left-hand side: a consumer reaches these elements
+ * through any expression at all (`ref.current`, `this.$refs.panel`, a query
+ * result), so anchoring on the property and confirming the tag appears in the
+ * same file gives far better recall than trying to type the receiver.
+ */
+const CHILDREN_ASSIGNMENT = /(^|[^.\w])([\w$\][().]*?)\.children\s*=(?!=)/gm;
+const lineAndColumn = (source, index) => {
+    const upTo = source.slice(0, index);
+    const lines = upTo.split('\n');
+    return { line: lines.length, column: (lines.at(-1)?.length ?? 0) + 1 };
+};
+/**
+ * Returns one warning per `.children =` assignment in a file that also mentions
+ * an affected tag. Requiring the tag in the same file is what keeps this from
+ * flagging every DOM manipulation in a codebase: `element.children` is a common
+ * expression, and only these three elements changed.
+ */
+export const findChildrenAssignments = (source, file) => {
+    const mentioned = CHILDREN_BREAKING_TAGS.filter((tag) => source.includes(tag));
+    if (mentioned.length === 0) {
+        return [];
+    }
+    const warnings = [];
+    for (const match of source.matchAll(CHILDREN_ASSIGNMENT)) {
+        if (typeof match.index !== 'number') {
+            continue;
+        }
+        const { line, column } = lineAndColumn(source, match.index + match[1].length);
+        warnings.push({
+            file,
+            line,
+            column,
+            message: `assignment to \`.children\` in a file using ${mentioned.join(', ')}. ` +
+                'That property is no longer declared on those elements in 4.0.0; assigning it ' +
+                'now sets an inert expando and the content silently disappears. Pass the ' +
+                'content as light-DOM children instead — `<sui-draggable><div>…</div></sui-draggable>` ' +
+                '— which the wrappers now forward through their default slot. Reading ' +
+                '`element.children` is unaffected, and in fact returns a real HTMLCollection again.'
+        });
+    }
+    return warnings;
+};