@supernova-studio/client 0.47.42 → 0.47.44

package/src/yjs/version-room/base.ts

@@ -0,0 +1,224 @@
+import {
+  DocumentationPageSnapshot,
+  DocumentationPageV2,
+  ElementGroup,
+  ElementGroupSnapshot,
+} from "@supernova-studio/model";
+import * as Y from "yjs";
+import { ZodSchema, ZodTypeDef } from "zod";
+import { DocumentationHierarchySettings } from "../design-system-content";
+
+type YJSSerializable = { id: string };
+
+export class VersionRoomBaseYDoc {
+  private readonly yDoc: Y.Doc;
+
+  constructor(yDoc: Y.Doc) {
+    this.yDoc = yDoc;
+  }
+
+  //
+  // Pages
+  //
+
+  getPages(): DocumentationPageV2[] {
+    return this.getObjects(this.pagesYMap, DocumentationPageV2);
+  }
+
+  updatePages(pages: DocumentationPageV2[]) {
+    pages = pages.map(page => {
+      // We remove blocks from the payload here because it will not get parsed anyway
+      return {
+        ...page,
+        data: {
+          configuration: page.data.configuration,
+        },
+      };
+    });
+
+    this.setObjects(this.pagesYMap, pages);
+  }
+
+  deletePages(ids: string[]) {
+    this.deleteObjects(this.pagesYMap, ids);
+  }
+
+  private get pagesYMap() {
+    return this.yDoc.getMap<object>("documentationPages");
+  }
+
+  //
+  // Groups
+  //
+
+  getGroups(): ElementGroup[] {
+    return this.getObjects(this.groupsYMap, ElementGroup);
+  }
+
+  updateGroups(groups: ElementGroup[]) {
+    this.setObjects(this.groupsYMap, groups);
+  }
+
+  deleteGroups(ids: string[]) {
+    this.deleteObjects(this.groupsYMap, ids);
+  }
+
+  private get groupsYMap() {
+    return this.yDoc.getMap<object>("documentationGroups");
+  }
+
+  //
+  // Documentation internal settings
+  //
+
+  getDocumentationInternalSettings(): DocumentationHierarchySettings {
+    const map = this.internalSettingsYMap;
+
+    const rawSettings: Record<keyof DocumentationHierarchySettings, any> = {
+      routingVersion: map.get("routingVersion"),
+      isDraftFeatureAdopted: map.get("isDraftFeatureAdapted") ?? false,
+    };
+
+    const settingsParseResult = DocumentationHierarchySettings.safeParse(rawSettings);
+    if (!settingsParseResult.success) {
+      return {
+        routingVersion: "2",
+        isDraftFeatureAdopted: false,
+      };
+    }
+
+    return settingsParseResult.data;
+  }
+
+  updateDocumentationInternalSettings(settings: DocumentationHierarchySettings) {
+    const map = this.internalSettingsYMap;
+
+    map.set("routingVersion", settings.routingVersion);
+  }
+
+  private get internalSettingsYMap() {
+    return this.yDoc.getMap<unknown>("documentationInternalSettings");
+  }
+
+  //
+  // Documentation page published snapshot
+  //
+
+  getPagePublishedSnapshots(): DocumentationPageSnapshot[] {
+    return this.getObjects(this.documentationPagePublishedStatesYMap, DocumentationPageSnapshot);
+  }
+
+  updatePagePublishedSnapshots(snapshots: DocumentationPageSnapshot[]) {
+    this.setObjects(this.documentationPagePublishedStatesYMap, snapshots);
+  }
+
+  deletePagePublishedSnapshots(ids: string[]) {
+    this.deleteObjects(this.documentationPagePublishedStatesYMap, ids);
+  }
+
+  private get documentationPagePublishedStatesYMap() {
+    return this.yDoc.getMap<object>("documentationPagePublishedSnapshots");
+  }
+
+  //
+  // Documentation page deleted snapshot
+  //
+
+  getPageDeletedSnapshots(): DocumentationPageSnapshot[] {
+    return this.getObjects(this.documentationPageDeletedStatesYMap, DocumentationPageSnapshot);
+  }
+
+  updatePageDeletedSnapshots(snapshots: DocumentationPageSnapshot[]) {
+    this.setObjects(this.documentationPageDeletedStatesYMap, snapshots);
+  }
+
+  deletePageDeletedSnapshots(ids: string[]) {
+    this.deleteObjects(this.documentationPageDeletedStatesYMap, ids);
+  }
+
+  private get documentationPageDeletedStatesYMap() {
+    return this.yDoc.getMap<object>("documentationPageDeletedSnapshots");
+  }
+
+  //
+  // Documentation group published snapshots
+  //
+
+  getGroupPublishedSnapshots(): ElementGroupSnapshot[] {
+    return this.getObjects(this.documentationGroupPublishedStatesYMap, ElementGroupSnapshot);
+  }
+
+  updateGroupPublishedSnapshots(snapshots: ElementGroupSnapshot[]) {
+    this.setObjects(this.documentationGroupPublishedStatesYMap, snapshots);
+  }
+
+  deleteGroupPublishedSnapshots(ids: string[]) {
+    this.deleteObjects(this.documentationGroupPublishedStatesYMap, ids);
+  }
+
+  private get documentationGroupPublishedStatesYMap() {
+    return this.yDoc.getMap<object>("documentationGroupPublishedSnapshots");
+  }
+
+  //
+  // Documentation group deleted snapshots
+  //
+
+  getGroupDeletedSnapshots(): ElementGroupSnapshot[] {
+    return this.getObjects(this.documentationGroupDeletedStatesYMap, ElementGroupSnapshot);
+  }
+
+  updateGroupDeletedSnapshots(snapshots: ElementGroupSnapshot[]) {
+    this.setObjects(this.documentationGroupDeletedStatesYMap, snapshots);
+  }
+
+  deleteGroupDeletedSnapshots(ids: string[]) {
+    this.deleteObjects(this.documentationGroupDeletedStatesYMap, ids);
+  }
+
+  private get documentationGroupDeletedStatesYMap() {
+    return this.yDoc.getMap<object>("documentationGroupDeletedSnapshots");
+  }
+
+  //
+  // Utils
+  //
+
+  private getObjects<T extends YJSSerializable, I>(map: Y.Map<object>, schema: ZodSchema<T, ZodTypeDef, I>): T[] {
+    const results: T[] = [];
+    map.forEach(object => results.push(schema.parse(object)));
+    return results;
+  }
+
+  private setObjects<T extends YJSSerializable>(map: Y.Map<object>, objects: T[]) {
+    objects.forEach(o => map.set(o.id, JSON.parse(JSON.stringify(o))));
+  }
+
+  private deleteObjects(map: Y.Map<object>, ids: string[]) {
+    ids.forEach(id => map.delete(id));
+  }
+
+  //
+  // Documentation page content hashes
+  //
+
+  getDocumentationPageContentHashes(): Record<string, string> {
+    const map = this.documentationPageContentHashesYMap;
+
+    const result: Record<string, string> = {};
+    map.forEach((hash, key) => {
+      result[key] = hash;
+    });
+
+    return result;
+  }
+
+  updateDocumentationPageContentHashes(hashes: Record<string, string>) {
+    const map = this.documentationPageContentHashesYMap;
+    Object.entries(hashes).forEach(([key, hash]) => map.set(key, hash));
+  }
+
+  private get documentationPageContentHashesYMap() {
+    return this.yDoc.getMap<string>("documentationPageHashes");
+  }
+}

package/src/yjs/version-room/frontend.ts

@@ -0,0 +1,236 @@
+import {
+  DocumentationItemConfigurationV2,
+  DocumentationPageV2,
+  ElementGroup,
+  mapByUnique,
+} from "@supernova-studio/model";
+import deepEqual from "deep-equal";
+import * as Y from "yjs";
+import {
+  DTODocumentationDraftState,
+  DTODocumentationDraftStateUpdated,
+  DTODocumentationHierarchyV2,
+  documentationItemConfigurationToDTOV2,
+  documentationPagesToDTOV2,
+  elementGroupsToDocumentationGroupDTOV2,
+} from "../../api";
+import { generateHash } from "../../utils";
+import { DocumentationPageEditorModel } from "../docs-editor";
+import { VersionRoomBaseYDoc } from "./base";
+
+type ItemState = {
+  title: string;
+  configuration: DocumentationItemConfigurationV2 | undefined;
+  contentHash: string;
+};
+
+export class FrontendVersionRoomYDoc {
+  private readonly yDoc: Y.Doc;
+
+  constructor(yDoc: Y.Doc) {
+    this.yDoc = yDoc;
+  }
+
+  //
+  // Hierarchy
+  //
+
+  getDocumentationHierarchy(): DTODocumentationHierarchyV2 {
+    const doc = new VersionRoomBaseYDoc(this.yDoc);
+
+    // Read current room data
+    const pages = doc.getPages();
+    const groups = doc.getGroups();
+
+    const settings = doc.getDocumentationInternalSettings();
+
+    // Convert pages to DTOs with draft states
+    const pageDTOs = documentationPagesToDTOV2(pages, groups, settings.routingVersion);
+    const pageDraftStates = this.buildPageDraftStates(pages);
+    pageDTOs.forEach(p => {
+      const draftState = pageDraftStates.get(p.id);
+      draftState && (p.draftState = draftState);
+    });
+
+    // Convert groups to DTOs with draft states
+    const groupDTOs = elementGroupsToDocumentationGroupDTOV2(groups, pages);
+    const groupDraftStates = this.buildGroupDraftStates(groups);
+    groupDTOs.forEach(g => {
+      const draftState = groupDraftStates.get(g.id);
+      draftState && (g.draftState = draftState);
+    });
+
+    // Read deleted room data
+    const deletedGroups = doc.getGroupDeletedSnapshots().map(s => s.group);
+    const deletedPages = doc.getPageDeletedSnapshots().map(s => s.page);
+
+    // Convert deleted pages to DTOs with draft states
+    const deletedPageDTOs = documentationPagesToDTOV2(
+      deletedPages,
+      [...groups, ...deletedGroups],
+      settings.routingVersion
+    ).map(p => {
+      return { ...p, draftState: { changeType: "Deleted" } } as const;
+    });
+
+    // Convert deleted groups to DTOs with draft states
+    const deletedGroupDTOs = elementGroupsToDocumentationGroupDTOV2(deletedGroups, deletedPages).map(g => {
+      return { ...g, draftState: { changeType: "Deleted" } } as const;
+    });
+
+    return {
+      pages: pageDTOs,
+      groups: groupDTOs,
+
+      deletedPages: deletedPageDTOs,
+      deletedGroups: deletedGroupDTOs,
+    };
+  }
+
+  //
+  // Drafts - Pages
+  //
+
+  private buildPageDraftStates(pages: DocumentationPageV2[]): Map<string, DTODocumentationDraftState> {
+    const doc = new VersionRoomBaseYDoc(this.yDoc);
+
+    // Read room data
+    const pageHashes = doc.getDocumentationPageContentHashes();
+    const publishedSnapshots = doc.getPagePublishedSnapshots();
+
+    const publishedSnapshotsByPageId = mapByUnique(publishedSnapshots, s => s.page.id);
+    const publishedPagesById = mapByUnique(
+      publishedSnapshots.map(s => s.page),
+      p => p.id
+    );
+
+    const result = new Map<string, DTODocumentationDraftState>();
+
+    pages.forEach(page => {
+      // Current state
+      const currentPageContentHash = pageHashes[page.persistentId] ?? "";
+      const currentState: ItemState = this.itemStateFromPage(page, currentPageContentHash);
+
+      // Published state
+      const snapshot = publishedSnapshotsByPageId.get(page.id);
+      let publishedState: ItemState | undefined;
+      if (snapshot) {
+        const publishedPage = publishedPagesById.get(snapshot.page.id)!;
+        publishedState = this.itemStateFromPage(publishedPage, snapshot.pageContentHash);
+      }
+
+      // Calculate draft
+      const draftState = this.createDraftState(currentState, publishedState);
+      if (draftState) result.set(page.id, draftState);
+    });
+
+    return result;
+  }
+
+  private itemStateFromPage(page: DocumentationPageV2, pageContentHash: string): ItemState {
+    return {
+      title: page.meta.name,
+      configuration: page.data.configuration,
+      contentHash: pageContentHash,
+    };
+  }
+
+  //
+  // Drafts - Groups
+  //
+
+  private buildGroupDraftStates(groups: ElementGroup[]): Map<string, DTODocumentationDraftState> {
+    const doc = new VersionRoomBaseYDoc(this.yDoc);
+
+    // Read room data
+    const publishedSnapshots = doc.getGroupPublishedSnapshots();
+
+    const publishedSnapshotsByGroupId = mapByUnique(publishedSnapshots, s => s.group.id);
+    const publishedGroupsById = mapByUnique(
+      publishedSnapshots.map(s => s.group),
+      g => g.id
+    );
+
+    const result = new Map<string, DTODocumentationDraftState>();
+
+    groups.forEach(group => {
+      // Current state
+      const currentState: ItemState = this.itemStateFromGroup(group);
+
+      // Published state
+      const snapshot = publishedSnapshotsByGroupId.get(group.id);
+      let publishedState: ItemState | undefined;
+      if (snapshot) {
+        const publishedGroup = publishedGroupsById.get(snapshot.group.id)!;
+        publishedState = this.itemStateFromGroup(publishedGroup);
+      }
+
+      // Calculate draft
+      const draftState = this.createDraftState(currentState, publishedState);
+      if (draftState) result.set(group.id, draftState);
+    });
+
+    return result;
+  }
+
+  private itemStateFromGroup(group: ElementGroup): ItemState {
+    return {
+      title: group.meta.name,
+      configuration: group.data?.configuration,
+      contentHash: "-",
+    };
+  }
+
+  //
+  // Drafts - Shared
+  //
+
+  private createDraftState(
+    currentState: ItemState,
+    publishedState: ItemState | undefined
+  ): DTODocumentationDraftState | undefined {
+    if (!publishedState) {
+      // New item (hasn't been published yet)
+      return { changeType: "Created" };
+    }
+
+    // Compare current item state to the published state
+    const updatedDraftState: DTODocumentationDraftStateUpdated = {
+      changeType: "Updated",
+      changes: {},
+    };
+
+    if (currentState.title !== publishedState.title) {
+      updatedDraftState.changes.previousTitle = publishedState.title;
+    }
+
+    if (!deepEqual(currentState.configuration, publishedState.configuration)) {
+      const configurationDto = documentationItemConfigurationToDTOV2(publishedState.configuration);
+      updatedDraftState.changes.previousConfiguration = configurationDto;
+    }
+
+    if (currentState.contentHash !== publishedState.contentHash) {
+      updatedDraftState.changes.previousContentHash = publishedState.contentHash;
+    }
+
+    if (Object.keys(updatedDraftState).length) {
+      // Item has at least one of the draft changes
+      return updatedDraftState;
+    }
+
+    // Item has no draft changes compared to the published item
+    return undefined;
+  }
+
+  //
+  // Update page content hash
+  //
+
+  notifyDocumentationPageContentUpdated(pageId: string, content: DocumentationPageEditorModel) {
+    const pageContentHash = generateHash(content);
+
+    new VersionRoomBaseYDoc(this.yDoc).updateDocumentationPageContentHashes({
+      [pageId]: pageContentHash,
+    });
+  }
+}

package/src/yjs/version-room/index.ts

@@ -0,0 +1,3 @@
+export * from "./backend";
+export * from "./base";
+export * from "./frontend";

package/src/api/conversion/documentation/documentation-elements-to-hierarchy-v2-dto.ts

@@ -1,23 +0,0 @@
-import { DesignElementSnapshot, DocumentationPageV2, ElementGroup } from "@supernova-studio/model";
-import { DTODocumentationHierarchyV2 } from "../../dto";
-import { elementGroupsToDocumentationGroupStructureDTOV2 } from "./documentation-group-v2-to-dto";
-import { documentationPagesToStructureDTOV2 } from "./documentation-page-v2-to-dto";
-
-// The fact that DTO conversion is located here instead of main backend code is due to the fact
-// that we store page and group data in YJS documents in the same way as they are stored in the database.
-// Therefore, we need to expose this conversion to the client so that it can consume data from YJS documents.
-//
-// Please do not put more DTO conversion here unless you know what you're doing.
-
-export function documentationElementsToHierarchyDto(
-  docPages: DocumentationPageV2[],
-  docGroups: ElementGroup[],
-  publishedPagesSnapshots: DesignElementSnapshot[],
-  routingVersion: string
-): DTODocumentationHierarchyV2 {
-  return {
-    pages: documentationPagesToStructureDTOV2(docPages, docGroups, routingVersion),
-    groups: elementGroupsToDocumentationGroupStructureDTOV2(docGroups, docPages),
-    publishedPagesSnapshots,
-  };
-}