@hyperframes/studio 0.8.81 → 0.8.82

package/src/utils/authoredSource.ts

@@ -1,4 +1,8 @@
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
+import {
+  STUDIO_PREVIEW_LAZY_ATTR,
+  STUDIO_PREVIEW_UPCOMING_ATTR,
+} from "@hyperframes/core/studio-preview-mark";
 
 // Stamped as the preview stamps the files it serves, so a live element's hf-id finds its source.
 export function parseSavedSource(html: string): Document {
@@ -90,3 +94,14 @@ export function authoredMarkup(authored: Element, live: Element, sourceFile: str
   }
   return copy.outerHTML;
 }
+
+export function liveMarkupWithoutPreviewMarks(live: Element): string {
+  const copy = live.cloneNode(true) as Element;
+  for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
+    el.removeAttribute(STUDIO_PREVIEW_UPCOMING_ATTR);
+    if (!el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) continue;
+    el.removeAttribute("loading");
+    el.removeAttribute(STUDIO_PREVIEW_LAZY_ATTR);
+  }
+  return copy.outerHTML;
+}

package/src/utils/blockInstaller.ts

@@ -9,6 +9,7 @@ import { collectHtmlIds } from "./studioHelpers";
 import { generateId } from "./generateId";
 import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
 import { saveProjectFilesWithHistory } from "./studioFileHistory";
+import { serializeStudioFileMutation } from "./studioFileMutationCoordinator";
 import { extendRootDurationInSource } from "./rootDuration";
 import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
 
@@ -93,12 +94,14 @@ async function makeComponentBackgroundTransparent(
   writeProjectFile: AddBlockOptions["writeProjectFile"],
 ): Promise<void> {
   if (block.type !== "hyperframes:component") return;
-  const content = await readProjectFile(compositionFile);
-  const transparentContent = content.replace(
-    /background:\s*(?:#(?:0a0a0a|000000|000|0a0805)|rgba?\([^)]*\))\s*;/g,
-    "background: transparent;",
-  );
-  if (transparentContent !== content) await writeProjectFile(compositionFile, transparentContent);
+  await serializeStudioFileMutation(writeProjectFile, compositionFile, async () => {
+    const content = await readProjectFile(compositionFile);
+    const transparentContent = content.replace(
+      /background:\s*(?:#(?:0a0a0a|000000|000|0a0805)|rgba?\([^)]*\))\s*;/g,
+      "background: transparent;",
+    );
+    if (transparentContent !== content) await writeProjectFile(compositionFile, transparentContent);
+  });
 }
 
 function resolveBlockPlacement({
@@ -201,7 +204,6 @@ export async function addBlockToProject(
     );
 
     const targetPath = activeCompPath || "index.html";
-    const originalContent = await readProjectFile(targetPath);
     const relevantElements = timelineElements.filter(
       (element) => (element.sourceFile || targetPath) === targetPath,
     );
@@ -211,29 +213,32 @@ export async function addBlockToProject(
       timelineElements: relevantElements,
       currentTime: opts.currentTime ?? 0,
     });
-    const { width, height } = resolveTimelineAssetCompositionSize(originalContent);
-    const hostId = buildUniqueCompositionId(block.name, collectHtmlIds(originalContent));
-    const subComposition = buildSubCompositionHtml({
-      id: hostId,
-      compositionFile,
-      start,
-      duration,
-      track,
-      width,
-      height,
-      left: visualPosition ? Math.round(visualPosition.left) : 0,
-      top: visualPosition ? Math.round(visualPosition.top) : 0,
-      zIndex: getMaxZIndexFromIframe(opts.previewIframe ?? null) + 1,
-    });
-    const patchedContent = extendRootDurationInSource(
-      insertTimelineAssetIntoSource(originalContent, subComposition),
-      start + duration,
-    );
+    let hostId = "";
+    const insertHost = (originalContent: string) => {
+      const { width, height } = resolveTimelineAssetCompositionSize(originalContent);
+      hostId = buildUniqueCompositionId(block.name, collectHtmlIds(originalContent));
+      const subComposition = buildSubCompositionHtml({
+        id: hostId,
+        compositionFile,
+        start,
+        duration,
+        track,
+        width,
+        height,
+        left: visualPosition ? Math.round(visualPosition.left) : 0,
+        top: visualPosition ? Math.round(visualPosition.top) : 0,
+        zIndex: getMaxZIndexFromIframe(opts.previewIframe ?? null) + 1,
+      });
+      return extendRootDurationInSource(
+        insertTimelineAssetIntoSource(originalContent, subComposition),
+        start + duration,
+      );
+    };
     await saveProjectFilesWithHistory({
       projectId,
       label: `Add ${isBlock ? "block" : "component"}: ${block.title}`,
-      files: { [targetPath]: patchedContent },
-      readFile: async () => originalContent,
+      files: { [targetPath]: insertHost },
+      readFile: readProjectFile,
       writeFile: writeProjectFile,
       recordEdit,
     });

package/src/utils/studioFileHistory.test.ts

@@ -11,7 +11,7 @@ describe("saveProjectFilesWithHistory", () => {
     await saveProjectFilesWithHistory({
       projectId: "project-1",
       label: "Move layer",
-      files: { "index.html": "after" },
+      files: { "index.html": () => "after" },
       readFile: async (path) => reads[path],
       writeFile: async (path, content) => {
         writes[path] = content;
@@ -40,7 +40,7 @@ describe("saveProjectFilesWithHistory", () => {
     await saveProjectFilesWithHistory({
       projectId: "project-1",
       label: "Delete timeline clip",
-      files: { "index.html": "removed+shrunk" },
+      files: { "index.html": () => "removed+shrunk" },
       readFile: async () => "original",
       diskContent: { "index.html": "removed" },
       writeFile: async (path, _content, expectedContent) => {
@@ -64,7 +64,7 @@ describe("saveProjectFilesWithHistory", () => {
     await saveProjectFilesWithHistory({
       projectId: "project-1",
       label: "Move layer",
-      files: { "index.html": "after" },
+      files: { "index.html": () => "after" },
       readFile: async () => "before",
       writeFile: async (path, _content, expectedContent) => {
         expectations[path] = expectedContent;
@@ -81,7 +81,7 @@ describe("saveProjectFilesWithHistory", () => {
     const changedPaths = await saveProjectFilesWithHistory({
       projectId: "project-1",
       label: "Edit layer",
-      files: { "index.html": "same" },
+      files: { "index.html": () => "same" },
       readFile: async () => "same",
       writeFile,
       recordEdit,
@@ -105,8 +105,8 @@ describe("saveProjectFilesWithHistory", () => {
         projectId: "project-1",
         label: "Move layer",
         files: {
-          "index.html": "index-after",
-          "scene.html": "scene-after",
+          "index.html": () => "index-after",
+          "scene.html": () => "scene-after",
         },
         readFile: async (path) => reads[path],
         writeFile: async (path, content) => {
@@ -139,8 +139,8 @@ describe("saveProjectFilesWithHistory", () => {
         projectId: "project-1",
         label: "Move layer",
         files: {
-          "index.html": "index-after",
-          "scene.html": "scene-after",
+          "index.html": () => "index-after",
+          "scene.html": () => "scene-after",
         },
         readFile: async (path) => reads[path],
         writeFile: async (path, content) => {
@@ -172,8 +172,8 @@ describe("saveProjectFilesWithHistory", () => {
         projectId: "project-1",
         label: "Move layer",
         files: {
-          "index.html": "index-after",
-          "scene.html": "scene-after",
+          "index.html": () => "index-after",
+          "scene.html": () => "scene-after",
         },
         readFile: async (path) => reads[path],
         writeFile: async (path, content) => {
@@ -196,7 +196,7 @@ describe("saveProjectFilesWithHistory", () => {
     ]);
   });
 
-  it("reads and writes after an earlier same-file mutation completes", async () => {
+  it("builds from what the file holds after an earlier same-file mutation completes", async () => {
     let disk = "before";
     let release!: () => void;
     const blocked = new Promise<void>((resolve) => {
@@ -215,7 +215,7 @@ describe("saveProjectFilesWithHistory", () => {
     const save = saveProjectFilesWithHistory({
       projectId: "project-1",
       label: "Edit source",
-      files: { "index.html": "editor-after" },
+      files: { "index.html": (current) => `${current}+editor` },
       readFile,
       writeFile,
       recordEdit,
@@ -227,10 +227,10 @@ describe("saveProjectFilesWithHistory", () => {
     await priorMutation;
     await save;
 
-    expect(disk).toBe("editor-after");
+    expect(disk).toBe("sdk-after+editor");
     expect(recordEdit).toHaveBeenCalledWith(
       expect.objectContaining({
-        files: { "index.html": { before: "sdk-after", after: "editor-after" } },
+        files: { "index.html": { before: "sdk-after", after: "sdk-after+editor" } },
       }),
     );
   });

package/src/utils/studioFileHistory.ts

@@ -27,7 +27,7 @@ interface SaveProjectFilesWithHistoryInput {
   label: string;
   coalesceKey?: string;
   coalesceMs?: number;
-  files: Record<string, string>;
+  files: Record<string, (contentInsideFileQueue: string) => string>;
   readFile: (path: string) => Promise<string>;
   writeFile: ProjectFileWriter;
   recordEdit: (entry: RecordEditInput) => Promise<void>;
@@ -68,6 +68,34 @@ export async function saveProjectFilesWithHistory(
   );
 }
 
+/**
+ * A server-side rewrite and its undo entry, holding the file's queue from the read to the history write.
+ * `rewrite` returns what the server left on disk (and the edit's final content if it goes further), or null.
+ */
+export async function saveServerRewriteWithHistory(input: {
+  projectId: string;
+  path: string;
+  label: string;
+  coalesceKey?: string;
+  writeFile: ProjectFileWriter;
+  recordEdit: (entry: RecordEditInput) => Promise<void>;
+  rewrite: (original: string) => Promise<{ disk: string; after?: string } | null>;
+}): Promise<boolean> {
+  const { projectId, path, writeFile } = input;
+  return serializeStudioFileMutations(writeFile, [path], async () => {
+    const original = await readProjectFileContent(projectId, path);
+    const result = await input.rewrite(original);
+    if (!result) return false;
+    await writeProjectFilesWithHistoryInQueue({
+      ...input,
+      files: { [path]: () => result.after ?? result.disk },
+      readFile: async () => original,
+      diskContent: { [path]: result.disk },
+    });
+    return true;
+  });
+}
+
 export async function writeProjectFilesWithHistoryInQueue({
   label,
   coalesceKey,
@@ -79,8 +107,9 @@ export async function writeProjectFilesWithHistoryInQueue({
   diskContent,
 }: SaveProjectFilesWithHistoryInput): Promise<string[]> {
   const snapshots: Record<string, { before: string; after: string }> = {};
-  for (const [path, after] of Object.entries(files)) {
+  for (const [path, build] of Object.entries(files)) {
     const before = await readFile(path);
+    const after = build(before);
     if (before !== after) {
       snapshots[path] = { before, after };
     }