@jumoo/usync 18.2.1 → 18.3.0

package/dist/preview/types.d.ts

@@ -0,0 +1,72 @@
+import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api';
+import type { DataTypeResponseModel, DocumentResponseModel, DocumentTypeResponseModel, MediaResponseModel, MediaTypeResponseModel, MemberTypeResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import type { SyncItemPreviewResponse } from '../api';
+/**
+ * An element that shows the preview of an import for one or more entity types.
+ */
+export interface uSyncItemPreviewElement extends HTMLElement {
+    preview?: SyncItemPreviewResponse;
+}
+/**
+ * Shows the preview for items of the given entity types in the details dialog.
+ *
+ * The entity types match the `EntityType` of the server side preview mapper,
+ * and `preview.preview` is the model that mapper built.
+ */
+export interface ManifestuSyncItemPreview extends ManifestElement<uSyncItemPreviewElement> {
+    type: 'usync-item-preview';
+    forEntityTypes: Array<string>;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        ManifestuSyncItemPreview: ManifestuSyncItemPreview;
+    }
+}
+/** the model a preview mapper built, as the type the element expects. */
+export declare const getPreviewModel: <T>(preview?: SyncItemPreviewResponse) => T | undefined;
+export type uSyncPreviewContentTypeModel = DocumentTypeResponseModel | MediaTypeResponseModel | MemberTypeResponseModel;
+/** preview model for a data type (entity type data-type) */
+export interface SyncDataTypePreview {
+    current?: DataTypeResponseModel | null;
+    incoming?: DataTypeResponseModel | null;
+}
+/** what the preview needs to lay out the properties of an item */
+export interface SyncPropertiesPreview<TTypeModel> {
+    /** the content types either side is composed of (as they are in the site) */
+    compositions: Array<TTypeModel>;
+    /** the data types used by the properties on either side */
+    dataTypes: Array<DataTypeResponseModel>;
+    /** keys of the data types that aren't in the site yet */
+    newDataTypes: Array<string>;
+    /** keys of the compositions that aren't in the site yet */
+    newCompositions: Array<string>;
+}
+/** preview model for a document, media or member type */
+export interface SyncContentTypePreview<TTypeModel extends uSyncPreviewContentTypeModel = uSyncPreviewContentTypeModel> extends SyncPropertiesPreview<TTypeModel> {
+    current?: TTypeModel | null;
+    incoming?: TTypeModel | null;
+}
+export interface SyncContentPreviewCulture {
+    culture: string;
+    published: boolean;
+}
+/** the settings of a content or media item that aren't property values */
+export interface SyncContentPreviewInfo {
+    /** name of the parent item (null when the item is at the root) */
+    parent?: string | null;
+    sortOrder: number;
+    trashed: boolean;
+    /** alias of the template (content only) */
+    template?: string | null;
+    /** published state for each culture (an empty culture for invariant content) */
+    published: Array<SyncContentPreviewCulture>;
+}
+/** preview model for a document or media item */
+export interface SyncContentPreview<TModel extends DocumentResponseModel | MediaResponseModel = DocumentResponseModel | MediaResponseModel, TTypeModel extends DocumentTypeResponseModel | MediaTypeResponseModel = DocumentTypeResponseModel | MediaTypeResponseModel> extends SyncPropertiesPreview<TTypeModel> {
+    current?: TModel | null;
+    incoming?: TModel | null;
+    currentInfo?: SyncContentPreviewInfo | null;
+    incomingInfo?: SyncContentPreviewInfo | null;
+    /** the document (or media) type of the item, as it is in the site */
+    contentType?: TTypeModel | null;
+}

package/dist/preview/types.js

@@ -0,0 +1,2 @@
+/** the model a preview mapper built, as the type the element expects. */
+export const getPreviewModel = (preview) => preview?.preview;

package/dist/repository/SyncAction.respositoy.d.ts

@@ -118,4 +118,17 @@ export declare class uSyncActionRepository extends UmbControllerBase {
         request?: Request;
         response?: Response;
     }>>;
+    /**
+     * gets the current and incoming versions of an item, when its handler supports previews.
+     */
+    getPreview(handler: string, key: string): Promise<import("@umbraco-cms/backoffice/resources").UmbApiResponse<({
+        data: import("@jumoo/uSync").SyncItemPreviewResponse;
+        error: undefined;
+    } | {
+        data: undefined;
+        error: unknown;
+    }) & {
+        request?: Request;
+        response?: Response;
+    }>>;
 }

package/dist/repository/SyncAction.respositoy.js

@@ -121,5 +121,11 @@ export class uSyncActionRepository extends UmbControllerBase {
     async getSyncFileInfo() {
         return await __classPrivateFieldGet(this, _uSyncActionRepository_actionDataSource, "f").getSyncFileInfo();
     }
+    /**
+     * gets the current and incoming versions of an item, when its handler supports previews.
+     */
+    async getPreview(handler, key) {
+        return await __classPrivateFieldGet(this, _uSyncActionRepository_actionDataSource, "f").getPreview(handler, key);
+    }
 }
 _uSyncActionRepository_actionDataSource = new WeakMap(), _uSyncActionRepository_settingsDataSource = new WeakMap(), _uSyncActionRepository_migrartionDataSource = new WeakMap();

package/dist/repository/sources/SyncAction.source.d.ts

@@ -54,4 +54,14 @@ export declare class uSyncActionDataSource implements SyncActionDataSource {
         request?: Request;
         response?: Response;
     }>>;
+    getPreview(handler: string, key: string): Promise<import("@umbraco-cms/backoffice/resources").UmbApiResponse<({
+        data: import("@jumoo/uSync").SyncItemPreviewResponse;
+        error: undefined;
+    } | {
+        data: undefined;
+        error: unknown;
+    }) & {
+        request?: Request;
+        response?: Response;
+    }>>;
 }

package/dist/repository/sources/SyncAction.source.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _uSyncActionDataSource_host;
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
-import { getActionsBySet, getRunning, getStatus, getSyncFileInfo, postDownload, postImport, postPerform, postProcessUpload, } from '@jumoo/uSync';
+import { getActionsBySet, getPreview, getRunning, getStatus, getSyncFileInfo, postDownload, postImport, postPerform, postProcessUpload, } from '@jumoo/uSync';
 export class uSyncActionDataSource {
     constructor(host) {
         _uSyncActionDataSource_host.set(this, void 0);
@@ -53,5 +53,10 @@ export class uSyncActionDataSource {
             body: view,
         }));
     }
+    async getPreview(handler, key) {
+        return await tryExecute(__classPrivateFieldGet(this, _uSyncActionDataSource_host, "f"), getPreview({
+            query: { handler, key },
+        }), { disableNotifications: true });
+    }
 }
 _uSyncActionDataSource_host = new WeakMap();

package/dist/utils/preview/content-type-diff.d.ts

@@ -0,0 +1,18 @@
+import { type USyncPreviewContentType } from './content-type-layout.js';
+export type USyncPreviewStatus = 'added' | 'removed' | 'changed';
+export interface USyncPreviewItemChange {
+    status: USyncPreviewStatus;
+    /** the fields that differ (for a changed item) */
+    fields: string[];
+}
+export interface USyncContentTypeDiff {
+    /** top level fields (name, icon, compositions...) that differ */
+    fields: Set<string>;
+    properties: Map<string, USyncPreviewItemChange>;
+    containers: Map<string, USyncPreviewItemChange>;
+}
+/**
+ * compare two versions of a content type by key. Items only in the current
+ * version are being removed, items only in the incoming version are being added.
+ */
+export declare function diffContentTypes(current: USyncPreviewContentType | undefined, incoming: USyncPreviewContentType | undefined): USyncContentTypeDiff;

package/dist/utils/preview/content-type-diff.js

@@ -0,0 +1,72 @@
+import { deepEqual } from '../diff/deep-equal.js';
+import { compositionIds, } from './content-type-layout.js';
+const TYPE_FIELDS = [
+    'alias',
+    'name',
+    'description',
+    'icon',
+    'allowedAsRoot',
+    'variesByCulture',
+    'variesBySegment',
+    'isElement',
+    'collection',
+];
+const PROPERTY_FIELDS = [
+    'alias',
+    'name',
+    'description',
+    'dataType',
+    'container',
+    'sortOrder',
+    'variesByCulture',
+    'variesBySegment',
+    'validation',
+    'appearance',
+];
+const CONTAINER_FIELDS = ['name', 'type', 'parent', 'sortOrder'];
+/**
+ * compare two versions of a content type by key. Items only in the current
+ * version are being removed, items only in the incoming version are being added.
+ */
+export function diffContentTypes(current, incoming) {
+    const fields = new Set();
+    if (current && incoming) {
+        for (const field of TYPE_FIELDS) {
+            if (!deepEqual(current[field], incoming[field]))
+                fields.add(field);
+        }
+        if (!deepEqual([...compositionIds(current)].sort(), [...compositionIds(incoming)].sort())) {
+            fields.add('compositions');
+        }
+    }
+    return {
+        fields,
+        properties: diffById(current?.properties, incoming?.properties, PROPERTY_FIELDS),
+        containers: diffById(current?.containers, incoming?.containers, CONTAINER_FIELDS),
+    };
+}
+function diffById(current, incoming, fields) {
+    const changes = new Map();
+    // a whole type being added or removed is shown by its headline, don't mark every item.
+    if (!current || !incoming)
+        return changes;
+    const before = new Map(current.map((item) => [item.id, item]));
+    const after = new Map(incoming.map((item) => [item.id, item]));
+    for (const [id, item] of before) {
+        const other = after.get(id);
+        if (!other) {
+            changes.set(id, { status: 'removed', fields: [] });
+            continue;
+        }
+        const changed = fields
+            .filter((field) => !deepEqual(item[field], other[field]))
+            .map(String);
+        if (changed.length > 0)
+            changes.set(id, { status: 'changed', fields: changed });
+    }
+    for (const id of after.keys()) {
+        if (!before.has(id))
+            changes.set(id, { status: 'added', fields: [] });
+    }
+    return changes;
+}

package/dist/utils/preview/content-type-layout.d.ts

@@ -0,0 +1,39 @@
+import type { DocumentTypeResponseModel, MediaTypeResponseModel, MemberTypeResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+/**
+ * the shape document, media and member types share - enough to lay out
+ * the editor view and compare two versions.
+ */
+export type USyncPreviewContentType = DocumentTypeResponseModel | MediaTypeResponseModel | MemberTypeResponseModel;
+export type USyncPreviewProperty = USyncPreviewContentType['properties'][number];
+export type USyncPreviewContainer = USyncPreviewContentType['containers'][number];
+export interface USyncLayoutProperty {
+    property: USyncPreviewProperty;
+    /** name of the composition this property comes from (undefined when it's the type's own) */
+    inheritedFrom?: string;
+}
+export interface USyncLayoutGroup {
+    name: string;
+    /** ids of every container merged into this group (own + compositions) */
+    ids: string[];
+    inherited: boolean;
+    sortOrder: number;
+    properties: USyncLayoutProperty[];
+}
+export interface USyncLayoutTab {
+    name: string;
+    ids: string[];
+    inherited: boolean;
+    sortOrder: number;
+    /** properties placed directly on the tab, outside any group */
+    properties: USyncLayoutProperty[];
+    groups: USyncLayoutGroup[];
+}
+/** name used for the tab that holds groups which aren't inside a tab */
+export declare const USYNC_GENERIC_TAB = "";
+/** the ids of the types this one is composed of (or inherits from). */
+export declare function compositionIds(type: USyncPreviewContentType): string[];
+/**
+ * build the tabs and groups an editor would see, merging in the containers
+ * and properties from compositions the way the backoffice does (by name).
+ */
+export declare function buildContentTypeLayout(type: USyncPreviewContentType, compositions: Map<string, USyncPreviewContentType>): USyncLayoutTab[];

package/dist/utils/preview/content-type-layout.js

@@ -0,0 +1,100 @@
+/** name used for the tab that holds groups which aren't inside a tab */
+export const USYNC_GENERIC_TAB = '';
+/** the ids of the types this one is composed of (or inherits from). */
+export function compositionIds(type) {
+    return type.compositions.map((composition) => {
+        if ('documentType' in composition)
+            return composition.documentType.id;
+        if ('mediaType' in composition)
+            return composition.mediaType.id;
+        return composition.memberType.id;
+    });
+}
+/**
+ * build the tabs and groups an editor would see, merging in the containers
+ * and properties from compositions the way the backoffice does (by name).
+ */
+export function buildContentTypeLayout(type, compositions) {
+    const tabs = new Map();
+    const tabFor = (name, id, sortOrder, inherited) => {
+        let tab = tabs.get(name);
+        if (!tab) {
+            tab = { name, ids: [], inherited, sortOrder, properties: [], groups: [] };
+            tabs.set(name, tab);
+        }
+        if (id)
+            tab.ids.push(id);
+        tab.inherited && (tab.inherited = inherited);
+        return tab;
+    };
+    const groupFor = (tab, name, id, sortOrder, inherited) => {
+        let group = tab.groups.find((g) => g.name === name);
+        if (!group) {
+            group = { name, ids: [], inherited, sortOrder, properties: [] };
+            tab.groups.push(group);
+        }
+        group.ids.push(id);
+        group.inherited && (group.inherited = inherited);
+        return group;
+    };
+    for (const source of contributors(type, compositions)) {
+        const inherited = source !== type;
+        const containers = new Map(source.containers.map((c) => [c.id, c]));
+        // where each container (and so each property) lands in the merged layout.
+        const placed = new Map();
+        for (const container of [...source.containers].sort(bySortOrder)) {
+            if (container.type === 'Tab') {
+                placed.set(container.id, tabFor(container.name ?? '', container.id, container.sortOrder, inherited));
+            }
+        }
+        for (const container of [...source.containers].sort(bySortOrder)) {
+            if (container.type !== 'Group')
+                continue;
+            const parent = container.parent ? containers.get(container.parent.id) : undefined;
+            const tab = parent
+                ? tabFor(parent.name ?? '', undefined, parent.sortOrder, inherited)
+                : tabFor(USYNC_GENERIC_TAB, undefined, -1, inherited);
+            placed.set(container.id, groupFor(tab, container.name ?? '', container.id, container.sortOrder, inherited));
+        }
+        for (const property of [...source.properties].sort(bySortOrder)) {
+            const target = property.container ? placed.get(property.container.id) : undefined;
+            const entry = { property, inheritedFrom: inherited ? source.name : undefined };
+            if (target) {
+                target.properties.push(entry);
+            }
+            else {
+                tabFor(USYNC_GENERIC_TAB, undefined, -1, inherited).properties.push(entry);
+            }
+        }
+    }
+    const result = [...tabs.values()].sort(bySortOrder);
+    for (const tab of result) {
+        tab.groups.sort(bySortOrder);
+        tab.properties.sort((a, b) => a.property.sortOrder - b.property.sortOrder);
+        for (const group of tab.groups) {
+            group.properties.sort((a, b) => a.property.sortOrder - b.property.sortOrder);
+        }
+    }
+    return result.filter((tab) => tab.properties.length > 0 || tab.groups.length > 0);
+}
+/** the type itself first, then everything it is composed of (depth first, no repeats). */
+function contributors(type, compositions) {
+    const seen = new Set();
+    const out = [];
+    const visit = (current) => {
+        if (seen.has(current.id))
+            return;
+        seen.add(current.id);
+        out.push(current);
+        for (const id of compositionIds(current)) {
+            const composition = compositions.get(id);
+            if (composition)
+                visit(composition);
+        }
+    };
+    visit(type);
+    return out;
+}
+function bySortOrder(a, b) {
+    return a.sortOrder - b.sortOrder;
+}

package/package.json

@@ -8,7 +8,7 @@
 	"homepage": "https://jumoo.co.uk/uSync",
 	"license": "MPL-2.0",
 	"type": "module",
-	"version": "18.2.1",
+	"version": "18.3.0",
 	"main": "./dist/usync.js",
 	"types": "./dist/index.d.ts",
 	"module": "./dist/usync.js",