npm - @hyperframes/studio-server - Versions diffs - 0.7.46 → 0.7.47 - Mend

@hyperframes/studio-server 0.7.46 → 0.7.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -149,6 +149,12 @@ interface StudioApiAdapter {
         outputResolution?: CanvasResolution;
         /** Entry file relative to projectDir (e.g. "compositions/intro.html"). Defaults to index.html. */
         composition?: string;
+        /**
+         * Composition-variable overrides ({variableId: value}), forwarded to the
+         * producer's RenderConfig.variables and injected as window.__hfVariables —
+         * the same channel `hyperframes render --variables` uses.
+         */
+        variables?: Record<string, unknown>;
         /**
          * Telemetry id of the browser user who triggered the render. Lets the
          * adapter attribute the server-emitted render_complete/render_error to

package/dist/index.js CHANGED Viewed

@@ -2200,6 +2200,19 @@ ${bootstrap}`;
       }
       block = extractGsapScriptBlock(html);
     }
+    if (!block && (body.type === "shift-positions" || body.type === "scale-positions")) {
+      return c.json({
+        ok: true,
+        changed: false,
+        mutated: false,
+        parsed: { animations: [], timelineVar: "tl", preamble: "", postamble: "" },
+        before: html,
+        after: html,
+        scriptText: "",
+        path: res.filePath,
+        backupPath: null
+      });
+    }
     if (!block) {
       return c.json({ error: "no GSAP script found in file" }, 400);
     }
@@ -2228,6 +2241,7 @@ ${bootstrap}`;
     const responsePayload = {
       ok: true,
       changed,
+      mutated: changed,
       parsed: freshParsed,
       before: html,
       after: newHtml,
@@ -2245,6 +2259,7 @@ ${bootstrap}`;
 // src/routes/preview.ts
 import { existsSync as existsSync5, readFileSync as readFileSync7, statSync as statSync2 } from "fs";
 import { join as join8 } from "path";
+import { createHash as createHash2 } from "crypto";
 import { injectScriptsIntoHtml, stripEmbeddedRuntimeScripts as stripEmbeddedRuntimeScripts2 } from "@hyperframes/core/compiler";
 // src/helpers/subComposition.ts
@@ -2316,6 +2331,9 @@ function extractTemplateInnerHtml(rawComp) {
   const template = doc.querySelector("template");
   return template ? template.innerHTML : null;
 }
+function escapeAttrValue(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
 function extractElementAttrs(el) {
   const parts = [];
   for (let i = 0; i < el.attributes.length; i++) {
@@ -2323,7 +2341,7 @@ function extractElementAttrs(el) {
     if (attr.value === "") {
       parts.push(attr.name);
     } else {
-      parts.push(`${attr.name}="${attr.value}"`);
+      parts.push(`${attr.name}="${escapeAttrValue(attr.value)}"`);
     }
   }
   return parts.join(" ");
@@ -2812,6 +2830,12 @@ function stampFileHfIds(filePath) {
   }
 }
+// src/helpers/variablesPayload.ts
+var VARIABLES_PAYLOAD_ERROR = "variables must be a JSON object of {variableId: value}";
+function isVariablesPayload(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 // src/routes/preview.ts
 var PROJECT_SIGNATURE_META = "hyperframes-project-signature";
 var GSAP_CDN_VERSION = "3.15.0";
@@ -2934,6 +2958,40 @@ function injectGsapCdnFallback(html) {
   if (html.includes("<head>")) return html.replace("<head>", "<head>" + GSAP_CDN_FALLBACK_SCRIPT);
   return GSAP_CDN_FALLBACK_SCRIPT + html;
 }
+function injectPreviewVariables(html, values) {
+  const json = JSON.stringify(values).replace(/</g, "\\u003c");
+  const tag = `<script data-hf-preview-variables>window.__hfVariables=${json};</script>`;
+  for (const pattern of [/<head[^>]*>/i, /<html[^>]*>/i, /^\s*<!doctype[^>]*>/i]) {
+    const match = pattern.exec(html);
+    if (match) {
+      const at = match.index + match[0].length;
+      return html.slice(0, at) + tag + html.slice(at);
+    }
+  }
+  return tag + html;
+}
+function parsePreviewVariablesParam(raw) {
+  if (raw === void 0 || raw === "") return { ok: true, values: null };
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return { ok: false, error: "variables must be valid JSON" };
+  }
+  if (!isVariablesPayload(parsed)) {
+    return { ok: false, error: VARIABLES_PAYLOAD_ERROR };
+  }
+  return { ok: true, values: parsed };
+}
+function variablesEtagSalt(raw) {
+  if (!raw) return "";
+  return `:vars:${createHash2("sha1").update(raw).digest("hex").slice(0, 12)}`;
+}
+function previewVariablesFromRequest(rawVariables) {
+  const parse = parsePreviewVariablesParam(rawVariables);
+  if (!parse.ok) return { error: parse.error };
+  return { raw: rawVariables, values: parse.values };
+}
 function injectStudioPreviewAugmentations(html, adapter, projectDir, activeCompositionPath) {
   return injectStudioMotionScript(
     injectMotionPathPluginIfNeeded(
@@ -2977,8 +3035,11 @@ function registerPreviewRoutes(api, adapter) {
   api.get("/projects/:id/preview", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "not found" }, 404);
+    const vars = previewVariablesFromRequest(c.req.query("variables"));
+    if (vars.error !== void 0) return c.json({ error: vars.error }, 400);
+    const previewVariables = vars.values;
     const signature = resolveProjectSignature(adapter, project.dir);
-    const etag = `"preview:${signature}"`;
+    const etag = `"preview:${signature}${variablesEtagSalt(vars.raw)}"`;
     const ifNoneMatch = c.req.header("If-None-Match");
     if (ifNoneMatch === etag) {
       return new Response(null, { status: 304, headers: previewCacheHeaders(etag) });
@@ -3009,6 +3070,7 @@ ${runtimeTag}`;
         project.dir,
         mainCompositionPath
       );
+      if (previewVariables) bundled = injectPreviewVariables(bundled, previewVariables);
       return c.html(bundled, 200, previewCacheHeaders(etag));
     } catch {
       const fallback = resolveProjectMainHtml(project.dir, project.id);
@@ -3017,16 +3079,16 @@ ${runtimeTag}`;
           join8(project.dir, fallback.compositionPath),
           fallback.html
         );
-        return c.html(
-          injectStudioPreviewAugmentations(
-            await transformPreviewHtml(fallbackHtml, adapter, project, fallback.compositionPath),
-            adapter,
-            project.dir,
-            fallback.compositionPath
-          ),
-          200,
-          previewCacheHeaders(etag)
+        let fallbackAugmented = injectStudioPreviewAugmentations(
+          await transformPreviewHtml(fallbackHtml, adapter, project, fallback.compositionPath),
+          adapter,
+          project.dir,
+          fallback.compositionPath
         );
+        if (previewVariables) {
+          fallbackAugmented = injectPreviewVariables(fallbackAugmented, previewVariables);
+        }
+        return c.html(fallbackAugmented, 200, previewCacheHeaders(etag));
       }
       return c.text("not found", 404);
     }
@@ -3038,6 +3100,9 @@ ${runtimeTag}`;
   api.get("/projects/:id/preview/comp/*", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "not found" }, 404);
+    const vars = previewVariablesFromRequest(c.req.query("variables"));
+    if (vars.error !== void 0) return c.json({ error: vars.error }, 400);
+    const previewVariables = vars.values;
     const signature = resolveProjectSignature(adapter, project.dir);
     const compPath = decodeURIComponent(
       c.req.path.replace(`/projects/${project.id}/preview/comp/`, "").split("?")[0] ?? ""
@@ -3046,7 +3111,7 @@ ${runtimeTag}`;
     if (!compFile || !existsSync5(compFile) || !statSync2(compFile).isFile()) {
       return c.text("not found", 404);
     }
-    const etag = `"comp:v2:${compPath}:${signature}"`;
+    const etag = `"comp:v2:${compPath}:${signature}${variablesEtagSalt(vars.raw)}"`;
     const ifNoneMatch = c.req.header("If-None-Match");
     if (ifNoneMatch === etag) {
       return new Response(null, { status: 304, headers: previewCacheHeaders(etag) });
@@ -3063,11 +3128,9 @@ ${runtimeTag}`;
     );
     if (!html) return c.text("not found", 404);
     html = ensureHfIds2(await transformPreviewHtml(html, adapter, project, compPath));
-    return c.html(
-      injectStudioPreviewAugmentations(html, adapter, project.dir, compPath),
-      200,
-      previewCacheHeaders(etag)
-    );
+    html = injectStudioPreviewAugmentations(html, adapter, project.dir, compPath);
+    if (previewVariables) html = injectPreviewVariables(html, previewVariables);
+    return c.html(html, 200, previewCacheHeaders(etag));
   });
   api.get("/projects/:id/preview/*", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
@@ -3206,6 +3269,13 @@ function registerRenderRoutes(api, adapter) {
       }
       composition = body.composition;
     }
+    let variables;
+    if (body.variables !== void 0) {
+      if (!isVariablesPayload(body.variables)) {
+        return c.json({ error: VARIABLES_PAYLOAD_ERROR }, 400);
+      }
+      variables = body.variables;
+    }
     const now = /* @__PURE__ */ new Date();
     const datePart = now.toISOString().slice(0, 10);
     const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
@@ -3223,6 +3293,7 @@ function registerRenderRoutes(api, adapter) {
       jobId,
       outputResolution,
       composition,
+      variables,
       distinctId: typeof body.telemetryDistinctId === "string" ? body.telemetryDistinctId : void 0
     });
     jobState.createdAt = Date.now();
@@ -3388,7 +3459,7 @@ function registerRenderRoutes(api, adapter) {
 // src/routes/thumbnail.ts
 import { existsSync as existsSync7, readFileSync as readFileSync10, writeFileSync as writeFileSync6, mkdirSync as mkdirSync5, statSync as statSync4 } from "fs";
 import { join as join11 } from "path";
-import { createHash as createHash2 } from "crypto";
+import { createHash as createHash3 } from "crypto";
 // src/helpers/manualEditsRenderScript.ts
 var STUDIO_MANUAL_EDITS_PATH = ".hyperframes/studio-manual-edits.json";
@@ -4000,7 +4071,7 @@ function registerThumbnailRoutes(api, adapter) {
     const htmlFile = join11(project.dir, compPath);
     if (existsSync7(htmlFile)) {
       const html = readFileSync10(htmlFile, "utf-8");
-      sourceKey = `_${createHash2("sha1").update(html).digest("hex").slice(0, 16)}`;
+      sourceKey = `_${createHash3("sha1").update(html).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.round(statSync4(htmlFile).mtimeMs);
       if (!vpWidth) {
         const wMatch = html.match(/data-width=["'](\d+)["']/);
@@ -4013,14 +4084,14 @@ function registerThumbnailRoutes(api, adapter) {
     let manualEditsKey = "";
     if (existsSync7(manualEditsFile)) {
       const manualEditsContent = readFileSync10(manualEditsFile, "utf-8");
-      manualEditsKey = `_${createHash2("sha1").update(manualEditsContent).digest("hex").slice(0, 16)}`;
+      manualEditsKey = `_${createHash3("sha1").update(manualEditsContent).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.max(sourceMtime, Math.round(statSync4(manualEditsFile).mtimeMs));
     }
     const motionFile = join11(project.dir, STUDIO_MOTION_PATH);
     let motionKey = "";
     if (existsSync7(motionFile)) {
       const motionContent = readFileSync10(motionFile, "utf-8");
-      motionKey = `_${createHash2("sha1").update(motionContent).digest("hex").slice(0, 16)}`;
+      motionKey = `_${createHash3("sha1").update(motionContent).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.max(sourceMtime, Math.round(statSync4(motionFile).mtimeMs));
     }
     const previewUrl = compPath === "index.html" ? `http://${c.req.header("host")}/api/projects/${project.id}/preview` : `http://${c.req.header("host")}/api/projects/${project.id}/preview/comp/${compPath}`;