@lowdefy/blocks-diff 0.0.0-experimental-20260420110710

package/dist/shared/buildDiffModel.js

@@ -0,0 +1,231 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import diff from 'microdiff';
+import { type } from '@lowdefy/helpers';
+import breadcrumbLabel from './breadcrumbLabel.js';
+import { CHANGE_TYPES, GROUP_ROOT } from './constants.js';
+import { getValueAtPath, matchesPath, pathLabel, pathToString, resolveFormatter } from './pathUtils.js';
+const MICRODIFF_TYPE_MAP = {
+    CREATE: CHANGE_TYPES.CREATE,
+    REMOVE: CHANGE_TYPES.REMOVE,
+    CHANGE: CHANGE_TYPES.CHANGE
+};
+// microdiff only accepts objects or arrays. Anything else (null, primitive)
+// becomes an empty object so "before was nothing" still produces a clean diff.
+function toInput(value) {
+    if (type.isArray(value)) return value;
+    if (type.isObject(value)) return value;
+    return {};
+}
+function enrichChange(entry, { labels, format }) {
+    const pathStr = pathToString(entry.path);
+    const mappedType = MICRODIFF_TYPE_MAP[entry.type] ?? CHANGE_TYPES.CHANGE;
+    let formatter = resolveFormatter(pathStr, format);
+    if (type.isNone(formatter) && mappedType === CHANGE_TYPES.CHANGE && (type.isArray(entry.value) || type.isObject(entry.value))) {
+        formatter = {
+            type: 'json'
+        };
+    }
+    return {
+        type: mappedType,
+        path: entry.path.slice(),
+        pathStr,
+        displayPath: pathToString(entry.path, {
+            display: true
+        }),
+        label: pathLabel(entry.path, labels),
+        oldValue: entry.type === 'CREATE' ? undefined : entry.oldValue,
+        newValue: entry.type === 'REMOVE' ? undefined : entry.value,
+        formatter,
+        depth: entry.path.length,
+        breadcrumb: breadcrumbLabel(entry.path, labels)
+    };
+}
+function collectLeafPaths(value, basePath, collected, visited) {
+    if (type.isArray(value) || type.isObject(value)) {
+        if (visited.has(value)) return;
+        visited.add(value);
+        const keys = type.isArray(value) ? value.map((_, i)=>i) : Object.keys(value);
+        if (keys.length === 0) {
+            collected.push(basePath.slice());
+            return;
+        }
+        keys.forEach((key)=>{
+            collectLeafPaths(value[key], basePath.concat(key), collected, visited);
+        });
+        return;
+    }
+    collected.push(basePath.slice());
+}
+function synthesiseUnchanged({ before, after, existingPathSet, labels, format }) {
+    const leafPaths = [];
+    collectLeafPaths(after, [], leafPaths, new WeakSet());
+    collectLeafPaths(before, [], leafPaths, new WeakSet());
+    const seen = new Set();
+    const results = [];
+    leafPaths.forEach((path)=>{
+        const pathStr = pathToString(path);
+        if (!pathStr || seen.has(pathStr) || existingPathSet.has(pathStr)) return;
+        seen.add(pathStr);
+        const beforeVal = getValueAtPath(before, path);
+        const afterVal = getValueAtPath(after, path);
+        if (beforeVal === afterVal || JSON.stringify(beforeVal) === JSON.stringify(afterVal)) {
+            results.push({
+                type: CHANGE_TYPES.UNCHANGED,
+                path: path.slice(),
+                pathStr,
+                displayPath: pathToString(path, {
+                    display: true
+                }),
+                label: pathLabel(path, labels),
+                oldValue: beforeVal,
+                newValue: afterVal,
+                formatter: resolveFormatter(pathStr, format),
+                depth: path.length,
+                breadcrumb: breadcrumbLabel(path, labels)
+            });
+        }
+    });
+    return results;
+}
+function applyFilters(changes, { hide, show }) {
+    let filtered = changes;
+    if (type.isArray(show) && show.length > 0) {
+        filtered = filtered.filter((change)=>matchesPath(change.pathStr, show));
+    }
+    if (type.isArray(hide) && hide.length > 0) {
+        filtered = filtered.filter((change)=>!matchesPath(change.pathStr, hide));
+    }
+    return filtered;
+}
+function summariseGroup(changes) {
+    const summary = {
+        added: 0,
+        removed: 0,
+        changed: 0,
+        unchanged: 0
+    };
+    let hasArrayIndices = false;
+    changes.forEach((change)=>{
+        if (change.type === CHANGE_TYPES.CREATE) summary.added += 1;
+        else if (change.type === CHANGE_TYPES.REMOVE) summary.removed += 1;
+        else if (change.type === CHANGE_TYPES.CHANGE) summary.changed += 1;
+        else if (change.type === CHANGE_TYPES.UNCHANGED) summary.unchanged += 1;
+        if (change.path.length > 1 && /^\d+$/.test(String(change.path[1]))) {
+            hasArrayIndices = true;
+        }
+    });
+    return {
+        ...summary,
+        hasArrayIndices
+    };
+}
+function groupChanges(changes, { groupByRoot }) {
+    if (!groupByRoot) {
+        return [
+            {
+                key: GROUP_ROOT,
+                label: '',
+                changes,
+                summary: summariseGroup(changes)
+            }
+        ];
+    }
+    const byKey = new Map();
+    changes.forEach((change)=>{
+        const key = change.path.length <= 1 ? GROUP_ROOT : String(change.path[0]);
+        if (!byKey.has(key)) byKey.set(key, []);
+        byKey.get(key).push(change);
+    });
+    return Array.from(byKey.entries()).map(([key, groupChangesList])=>({
+            key,
+            label: key === GROUP_ROOT ? '' : key,
+            changes: groupChangesList,
+            summary: summariseGroup(groupChangesList)
+        }));
+}
+function collapseDeep(raw, { maxDepth, before, after }) {
+    if (!type.isInt(maxDepth) || maxDepth < 1) return raw;
+    const passthrough = [];
+    const bucketOrder = [];
+    const buckets = new Map();
+    raw.forEach((entry)=>{
+        if (!type.isArray(entry.path) || entry.path.length <= maxDepth) {
+            passthrough.push(entry);
+            return;
+        }
+        const parent = entry.path.slice(0, maxDepth);
+        const key = parent.join('.');
+        if (!buckets.has(key)) {
+            buckets.set(key, parent);
+            bucketOrder.push(key);
+        }
+    });
+    const collapsed = [];
+    bucketOrder.forEach((key)=>{
+        const parent = buckets.get(key);
+        const oldValue = getValueAtPath(before, parent);
+        const newValue = getValueAtPath(after, parent);
+        if (JSON.stringify(oldValue) === JSON.stringify(newValue)) return;
+        collapsed.push({
+            type: 'CHANGE',
+            path: parent,
+            oldValue,
+            value: newValue
+        });
+    });
+    return passthrough.concat(collapsed);
+}
+function buildDiffModel({ before, after, options = {} }) {
+    const { labels, hide, show, format, showUnchanged = false, groupByRoot = true, maxDepth = 4 } = options;
+    const safeBefore = toInput(before);
+    const safeAfter = toInput(after);
+    const rawChanges = diff(safeBefore, safeAfter);
+    const collapsedRaw = collapseDeep(rawChanges, {
+        maxDepth,
+        before: safeBefore,
+        after: safeAfter
+    });
+    const enriched = collapsedRaw.map((entry)=>enrichChange(entry, {
+            labels,
+            format
+        }));
+    const changePathSet = new Set(enriched.map((change)=>change.pathStr));
+    let allChanges = enriched;
+    if (showUnchanged) {
+        const unchanged = synthesiseUnchanged({
+            before: safeBefore,
+            after: safeAfter,
+            existingPathSet: changePathSet,
+            labels,
+            format
+        });
+        allChanges = allChanges.concat(unchanged);
+    }
+    const filtered = applyFilters(allChanges, {
+        hide,
+        show
+    });
+    const groups = groupChanges(filtered, {
+        groupByRoot
+    });
+    const hasMeaningfulChanges = filtered.some((change)=>change.type !== CHANGE_TYPES.UNCHANGED);
+    return {
+        groups,
+        empty: !hasMeaningfulChanges && filtered.length === 0,
+        total: filtered.length
+    };
+}
+export default buildDiffModel;

package/dist/shared/constants.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ export const CHANGE_TYPES = {
+    CREATE: 'CREATE',
+    REMOVE: 'REMOVE',
+    CHANGE: 'CHANGE',
+    UNCHANGED: 'UNCHANGED'
+};
+// Sentinel for the synthetic group that holds top-level primitive changes when
+// groupByRoot is enabled, and every change when groupByRoot is false. Leading
+// underscores keep it from colliding with user keys in typical datasets.
+export const GROUP_ROOT = '__root__';
+export const DEFAULT_CHANGE_TYPE_LABELS = {
+    added: 'Added',
+    removed: 'Removed',
+    changed: 'Changed',
+    unchanged: 'Unchanged'
+};
+export const CHANGE_TYPE_TAG_COLORS = {
+    [CHANGE_TYPES.CREATE]: 'success',
+    [CHANGE_TYPES.REMOVE]: 'error',
+    [CHANGE_TYPES.CHANGE]: 'warning',
+    [CHANGE_TYPES.UNCHANGED]: 'default'
+};

package/dist/shared/formatValue.js

@@ -0,0 +1,111 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { Tag, Typography } from 'antd';
+import dayjs from 'dayjs';
+import { type } from '@lowdefy/helpers';
+const { Text } = Typography;
+function renderEmpty() {
+    return /*#__PURE__*/ React.createElement(Text, {
+        type: "secondary"
+    }, "—");
+}
+function renderDate(value, { pattern = 'YYYY-MM-DD' } = {}) {
+    const parsed = dayjs(value);
+    if (!parsed.isValid()) return /*#__PURE__*/ React.createElement(Text, null, String(value));
+    return /*#__PURE__*/ React.createElement(Text, null, parsed.format(pattern));
+}
+function renderDateTime(value, { pattern = 'YYYY-MM-DD HH:mm' } = {}) {
+    const parsed = dayjs(value);
+    if (!parsed.isValid()) return /*#__PURE__*/ React.createElement(Text, null, String(value));
+    return /*#__PURE__*/ React.createElement(Text, null, parsed.format(pattern));
+}
+function renderBoolean(value, { yes = 'Yes', no = 'No' } = {}) {
+    const truthy = Boolean(value);
+    return /*#__PURE__*/ React.createElement(Tag, {
+        color: truthy ? 'success' : 'default'
+    }, truthy ? yes : no);
+}
+function renderCurrency(value, { locale, currency = 'USD' } = {}) {
+    const number = Number(value);
+    if (!Number.isFinite(number)) return /*#__PURE__*/ React.createElement(Text, null, String(value));
+    try {
+        const formatted = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency
+        }).format(number);
+        return /*#__PURE__*/ React.createElement(Text, null, formatted);
+    } catch (_err) {
+        return /*#__PURE__*/ React.createElement(Text, null, String(value));
+    }
+}
+function renderJson(value) {
+    return /*#__PURE__*/ React.createElement("pre", {
+        style: {
+            margin: 0,
+            padding: '8px 10px',
+            fontSize: '0.85em',
+            background: 'var(--ant-color-fill-tertiary, rgba(0,0,0,0.04))',
+            border: '1px solid var(--ant-color-border-secondary, rgba(0,0,0,0.06))',
+            borderRadius: 'var(--ant-border-radius-sm, 4px)',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word'
+        }
+    }, JSON.stringify(value, null, 2));
+}
+function renderCode(value) {
+    return /*#__PURE__*/ React.createElement(Typography.Text, {
+        code: true
+    }, String(value));
+}
+function renderEnum(value, { map = {} } = {}) {
+    const key = String(value);
+    const entry = map[key];
+    if (type.isNone(entry)) return /*#__PURE__*/ React.createElement(Tag, null, key);
+    if (type.isString(entry)) return /*#__PURE__*/ React.createElement(Tag, null, entry);
+    if (type.isObject(entry)) {
+        return /*#__PURE__*/ React.createElement(Tag, {
+            color: entry.color
+        }, entry.label ?? key);
+    }
+    return /*#__PURE__*/ React.createElement(Tag, null, key);
+}
+function renderFallback(value) {
+    if (type.isPrimitive(value)) return /*#__PURE__*/ React.createElement(Text, null, String(value));
+    return renderJson(value);
+}
+function formatValue(value, formatter) {
+    if (type.isNone(value)) return renderEmpty();
+    const formatType = type.isObject(formatter) ? formatter.type : undefined;
+    switch(formatType){
+        case 'date':
+            return renderDate(value, formatter);
+        case 'datetime':
+            return renderDateTime(value, formatter);
+        case 'boolean':
+            return renderBoolean(value, formatter);
+        case 'currency':
+            return renderCurrency(value, formatter);
+        case 'json':
+            return renderJson(value);
+        case 'code':
+            return renderCode(value);
+        case 'enum':
+            return renderEnum(value, formatter);
+        default:
+            return renderFallback(value);
+    }
+}
+export default formatValue;

package/dist/shared/pathUtils.js

@@ -0,0 +1,99 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import pluralize from 'pluralize';
+import { type } from '@lowdefy/helpers';
+export function isIndex(segment) {
+    return type.isInt(segment) || type.isString(segment) && /^\d+$/.test(segment);
+}
+function joinInternal(path) {
+    return path.map((segment)=>String(segment)).join('.');
+}
+function joinDisplay(path) {
+    return path.reduce((acc, segment, index)=>{
+        if (isIndex(segment)) return `${acc}[${segment}]`;
+        return index === 0 ? String(segment) : `${acc}.${segment}`;
+    }, '');
+}
+export function pathToString(path, { display = false } = {}) {
+    if (!type.isArray(path)) return '';
+    return display ? joinDisplay(path) : joinInternal(path);
+}
+export function matchesPath(pathStr, patterns) {
+    if (!type.isArray(patterns) || patterns.length === 0) return false;
+    return patterns.some((pattern)=>{
+        if (!type.isString(pattern) || pattern === '') return false;
+        if (pattern === pathStr) return true;
+        if (pattern.endsWith('.*')) {
+            const prefix = pattern.slice(0, -2);
+            return pathStr === prefix || pathStr.startsWith(`${prefix}.`);
+        }
+        if (pattern.startsWith('*.')) {
+            const suffix = pattern.slice(2);
+            return pathStr === suffix || pathStr.endsWith(`.${suffix}`);
+        }
+        return false;
+    });
+}
+export function humaniseSegment(segment) {
+    const str = String(segment);
+    const spaced = str.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').trim();
+    if (spaced.length === 0) return str;
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+export function pathLabel(path, labelsMap) {
+    if (!type.isArray(path) || path.length === 0) return '';
+    const pathStr = pathToString(path);
+    if (type.isObject(labelsMap) && type.isString(labelsMap[pathStr])) {
+        return labelsMap[pathStr];
+    }
+    const leaf = path[path.length - 1];
+    if (isIndex(leaf)) {
+        if (path.length > 1) {
+            const parent = pathToString(path.slice(0, -1));
+            const parentLabel = type.isObject(labelsMap) && type.isString(labelsMap[parent]) ? labelsMap[parent] : humaniseSegment(path[path.length - 2]);
+            return `${parentLabel} [${leaf}]`;
+        }
+        return `[${leaf}]`;
+    }
+    return humaniseSegment(leaf);
+}
+export function resolveFormatter(pathStr, formatMap) {
+    if (!type.isObject(formatMap)) return undefined;
+    if (type.isObject(formatMap[pathStr])) return formatMap[pathStr];
+    const keys = Object.keys(formatMap);
+    for (const key of keys){
+        if (key.endsWith('.*')) {
+            const prefix = key.slice(0, -2);
+            if (pathStr === prefix || pathStr.startsWith(`${prefix}.`)) return formatMap[key];
+        } else if (key.startsWith('*.')) {
+            const suffix = key.slice(2);
+            if (pathStr === suffix || pathStr.endsWith(`.${suffix}`)) return formatMap[key];
+        }
+    }
+    return undefined;
+}
+export function getValueAtPath(obj, path) {
+    let current = obj;
+    for (const segment of path){
+        if (type.isNone(current)) return undefined;
+        current = current[segment];
+    }
+    return current;
+}
+export function singularise(label) {
+    if (!type.isString(label) || label.length === 0) return label;
+    return pluralize.singular(label);
+}
+export { default as breadcrumbLabel } from './breadcrumbLabel.js';

package/dist/shared/renderers/GitDiffRenderer.js

@@ -0,0 +1,87 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { diffLines } from 'diff';
+import serializeYaml from '../serializeYaml.js';
+const ADDED_STYLE = {
+    background: 'var(--ant-color-success-bg, rgba(82,196,26,0.1))',
+    color: 'var(--ant-color-success-text, var(--ant-color-text))',
+    display: 'block'
+};
+const REMOVED_STYLE = {
+    background: 'var(--ant-color-error-bg, rgba(255,77,79,0.1))',
+    color: 'var(--ant-color-error-text, var(--ant-color-text))',
+    display: 'block'
+};
+const CONTEXT_STYLE = {
+    color: 'var(--ant-color-text-secondary, rgba(0,0,0,0.65))',
+    display: 'block'
+};
+const PRE_STYLE = {
+    fontFamily: 'var(--ant-font-family-code, monospace)',
+    fontSize: 'var(--ant-font-size-sm, 12px)',
+    padding: '12px',
+    background: 'var(--ant-color-fill-tertiary, rgba(0,0,0,0.04))',
+    borderRadius: 'var(--ant-border-radius-sm, 4px)',
+    whiteSpace: 'pre',
+    overflowX: 'auto',
+    margin: 0
+};
+function splitHunkLines(value) {
+    const lines = value.split('\n');
+    if (lines.length > 0 && lines[lines.length - 1] === '') lines.pop();
+    return lines;
+}
+function GitDiffRenderer({ before, after, hide, show, classNames = {}, styles = {} }) {
+    const beforeYaml = serializeYaml(before, {
+        hide,
+        show
+    });
+    const afterYaml = serializeYaml(after, {
+        hide,
+        show
+    });
+    const hunks = diffLines(beforeYaml, afterYaml);
+    const nodes = [];
+    hunks.forEach((hunk, hunkIndex)=>{
+        const lines = splitHunkLines(hunk.value);
+        let prefix;
+        let style;
+        if (hunk.added) {
+            prefix = '+ ';
+            style = ADDED_STYLE;
+        } else if (hunk.removed) {
+            prefix = '- ';
+            style = REMOVED_STYLE;
+        } else {
+            prefix = '  ';
+            style = CONTEXT_STYLE;
+        }
+        lines.forEach((line, lineIndex)=>{
+            nodes.push(/*#__PURE__*/ React.createElement("span", {
+                key: `${hunkIndex}-${lineIndex}`,
+                style: style
+            }, `${prefix}${line}`));
+        });
+    });
+    return /*#__PURE__*/ React.createElement("pre", {
+        className: classNames.group,
+        style: {
+            ...PRE_STYLE,
+            ...styles.group
+        }
+    }, nodes);
+}
+export default GitDiffRenderer;