Skip to content

Added auto resize to transistor embed card#26798

Merged
9larsons merged 7 commits intomainfrom
add-resize-transistor
Mar 13, 2026
Merged

Added auto resize to transistor embed card#26798
9larsons merged 7 commits intomainfrom
add-resize-transistor

Conversation

@9larsons
Copy link
Copy Markdown
Contributor

@9larsons 9larsons commented Mar 12, 2026

ref https://linear.app/ghost/issue/NY-1149/

  • once transistor implements a postMessage for emitting the size, we can listen to it and adjust accordingly

ref https://linear.app/ghost/issue/NY-1149/
- once transistor implements a postMessage for emitting the size, we can listen to it and adjust accordingly
@9larsons 9larsons changed the title Add resize transistor Added auto resize to transistor embed card Mar 12, 2026
@9larsons 9larsons requested a review from EvanHahn March 12, 2026 14:34
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 12, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

Replaced buildSrcBackgroundScript() with buildEmbedScript() and updated its invocation in the frontend template. The inlined script function was renamed from setSrcBackgroundFromParent() to initTransistorEmbed(). Script still handles color-based iframe src determination and now adds a postMessage resize listener that validates event.data.type === 'resize', checks origin/source, and requires a numeric height before updating the iframe container height. Unit tests were updated to expect initTransistorEmbed, color-to-RGB handling, resize listener presence, partner.transistor.fm origin, and Number.isSafeInteger usage.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding auto resize functionality to the transistor embed card, which aligns with the implementation of postMessage-based resize handling.
Description check ✅ Passed The description is related to the changeset, explaining that the PR implements auto resize by listening to postMessage from Transistor, which matches the code changes adding resize handling.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch add-resize-transistor
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js`:
- Around line 180-187: Replace the weak source-only gating in the message
handler with an origin check and a finite-number height guard: inside the
window.addEventListener('message', ...) handler (and where iframe and
iframe.contentWindow are used), verify event.origin === the expected Transistor
origin (e.g. a TRANSISTOR_ORIGIN constant or the literal
'https://partner.transistor.fm') in addition to the existing
iframe.contentWindow === event.source check, and change the height validation
from typeof event.data.height === 'number' to
Number.isFinite(event.data.height') so NaN/Infinity are rejected before setting
iframe.style.height.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: edf47381-5207-4f04-9ae8-1cb2ab820455

📥 Commits

Reviewing files that changed from the base of the PR and between 12e9875 and a536102.

📒 Files selected for processing (2)
  • ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js
  • ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js

Comment thread ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js Outdated
@ErisDS
Copy link
Copy Markdown
Member

ErisDS commented Mar 12, 2026

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

  • Workflow: CI
  • Failed Step: Run yarn nx affected -t lint --base=12e98754146363b9efc15fafdcbf06c6dafb624f
  • Run: View failed run
    What failed: Lint errors in code
    Why: The failure is caused by a code issue that needs to be fixed in this PR.
    Action:
    Check the error message and fix the issue in your code.

Comment thread ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js Outdated
Comment thread ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js Outdated
Comment thread ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js Outdated
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js (1)

42-47: Avoid pinning this test to exact script internals.

These checks are coupled to the current buildEmbedScript() implementation: helper names, property access spelling, and the specific numeric guard. A harmless refactor in ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js:104-190 will fail this test even if resize support still works. Prefer asserting the stable renderer contract here, or executing the emitted script in a DOM-style test if you want behavioral coverage for the resize path.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js`
around lines 42 - 47, The test is brittle because it asserts internals of
buildEmbedScript() (helper names like colorToRgb, initTransistorEmbed, property
access text, and Number.isSafeInteger) instead of the stable renderer contract;
update transistor-renderer.test.js to stop checking those exact script internals
and instead assert the stable outputs of renderTransistorNode (e.g., that
result.html contains a <script> tag and the expected embed container/attributes
or that the script executes by running it in a DOM-like environment), or replace
the string-inclusion assertions with higher-level checks such as verifying the
embed container markup, partner host (partner.transistor.fm) presence, and that
the script tag exists, or add a DOM-execution test to verify resize behavior
rather than checking helper names; locate buildEmbedScript() and
renderTransistorNode() in the transistor-renderer test to apply these changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js`:
- Around line 42-47: The test is brittle because it asserts internals of
buildEmbedScript() (helper names like colorToRgb, initTransistorEmbed, property
access text, and Number.isSafeInteger) instead of the stable renderer contract;
update transistor-renderer.test.js to stop checking those exact script internals
and instead assert the stable outputs of renderTransistorNode (e.g., that
result.html contains a <script> tag and the expected embed container/attributes
or that the script executes by running it in a DOM-like environment), or replace
the string-inclusion assertions with higher-level checks such as verifying the
embed container markup, partner host (partner.transistor.fm) presence, and that
the script tag exists, or add a DOM-execution test to verify resize behavior
rather than checking helper names; locate buildEmbedScript() and
renderTransistorNode() in the transistor-renderer test to apply these changes.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 68e6dbe7-84c7-447b-90aa-64efbb76e16e

📥 Commits

Reviewing files that changed from the base of the PR and between ec19c93 and 6247640.

📒 Files selected for processing (2)
  • ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js
  • ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js
✅ Files skipped from review due to trivial changes (1)
  • ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js

@9larsons 9larsons requested a review from EvanHahn March 12, 2026 16:56
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js (1)

39-47: Strengthen resize-script assertions to cover safety-critical behavior

These checks are currently token-based and may pass even if the listener stops enforcing origin/source checks or applying height. Consider asserting those exact behaviors in the emitted script too.

Suggested test hardening
 it('renders embed script with background detection and resize listener', function () {
     const result = renderForWeb(getTestData());

     assert.ok(result.html.includes('<script>'));
     assert.ok(result.html.includes('initTransistorEmbed'));
     assert.ok(result.html.includes('colorToRgb'));
     assert.ok(result.html.includes('event.data.type === \'resize\''));
     assert.ok(result.html.includes('iframeOrigin'));
     assert.ok(result.html.includes('Number.isSafeInteger'));
+    assert.match(result.html, /event\.origin\s*===\s*iframeOrigin/);
+    assert.match(result.html, /event\.source\s*===\s*iframe\.contentWindow/);
+    assert.match(result.html, /height\s*=\s*.*px/);
 });
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js`
around lines 39 - 47, Update the unit test in transistor-renderer.test.js to
assert the emitted resize listener enforces origin/source checks and actually
applies the height: when calling renderForWeb(getTestData()) verify the
generated script contains explicit origin/source validation (e.g., references to
iframe.contentWindow or checks like event.source === iframe.contentWindow and/or
event.origin === iframeOrigin) and contains the exact assignment that applies
height to the iframe (e.g., setting iframe.style.height or assigning to
iframe.height after verifying Number.isSafeInteger on the parsed value). Keep
the existing token checks but add these concrete string assertions so the resize
listener behavior in the output script is enforced.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js`:
- Around line 39-47: Update the unit test in transistor-renderer.test.js to
assert the emitted resize listener enforces origin/source checks and actually
applies the height: when calling renderForWeb(getTestData()) verify the
generated script contains explicit origin/source validation (e.g., references to
iframe.contentWindow or checks like event.source === iframe.contentWindow and/or
event.origin === iframeOrigin) and contains the exact assignment that applies
height to the iframe (e.g., setting iframe.style.height or assigning to
iframe.height after verifying Number.isSafeInteger on the parsed value). Keep
the existing token checks but add these concrete string assertions so the resize
listener behavior in the output script is enforced.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2e8d0ce8-1592-4440-b79c-9eb76fab3145

📥 Commits

Reviewing files that changed from the base of the PR and between 6247640 and 49f4986.

📒 Files selected for processing (2)
  • ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js
  • ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js

@github-actions
Copy link
Copy Markdown
Contributor

E2E Tests Failed

To view the Playwright test report locally, run:

REPORT_DIR=$(mktemp -d) && gh run download 23025385614 -n playwright-report -D "$REPORT_DIR" && npx playwright show-report "$REPORT_DIR"

@ErisDS
Copy link
Copy Markdown
Member

ErisDS commented Mar 12, 2026

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

  • Workflow: CI
  • Failed Step: Run unit tests
  • Run: View failed run
    What failed: Test assertion failed
    Why: The failure is caused by a code issue that needs to be fixed in this PR.
    Action:
    Check the error message and fix the issue in your code.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js (1)

145-156: Optional: simplify fallback branching for el.src.

This currently works, but you can reduce duplicate fallback assignments by computing a single final URL and assigning once.

♻️ Small cleanup
-        if (!node || !bg || bg === 'transparent') {
-            el.src = baseSrc;
-        } else {
-            const {r, g, b, a} = colorToRgb(bg);
-            if (a === 0) {
-                el.src = baseSrc;
-            } else {
-                const hex = [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
-                const u = new URL(baseSrc);
-                u.searchParams.set('background', hex);
-                el.src = u.toString();
-            }
-        }
+        let finalSrc = baseSrc;
+        if (node && bg && bg !== 'transparent') {
+            const {r, g, b, a} = colorToRgb(bg);
+            if (a > 0) {
+                const hex = [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
+                const u = new URL(baseSrc);
+                u.searchParams.set('background', hex);
+                finalSrc = u.toString();
+            }
+        }
+        el.src = finalSrc;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js`
around lines 145 - 156, The current branching assigns el.src in multiple places;
simplify by computing a single finalSrc and assigning el.src once: default
finalSrc = baseSrc, then only if node && bg && bg !== 'transparent' call
colorToRgb(bg), check that a !== 0, build the hex from [r,g,b], create a new
URL(baseSrc), set u.searchParams.set('background', hex'), set finalSrc =
u.toString(), and finally assign el.src = finalSrc (use the existing symbols
node, bg, colorToRgb, baseSrc, hex, URL, u, and el.src).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js`:
- Around line 145-156: The current branching assigns el.src in multiple places;
simplify by computing a single finalSrc and assigning el.src once: default
finalSrc = baseSrc, then only if node && bg && bg !== 'transparent' call
colorToRgb(bg), check that a !== 0, build the hex from [r,g,b], create a new
URL(baseSrc), set u.searchParams.set('background', hex'), set finalSrc =
u.toString(), and finally assign el.src = finalSrc (use the existing symbols
node, bg, colorToRgb, baseSrc, hex, URL, u, and el.src).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 49d6b4ec-2ae3-4f37-8b80-d0ca0f07d986

📥 Commits

Reviewing files that changed from the base of the PR and between 49f4986 and 8145dfb.

📒 Files selected for processing (2)
  • ghost/core/core/server/services/koenig/node-renderers/transistor-renderer.js
  • ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • ghost/core/test/unit/server/services/koenig/node-renderers/transistor-renderer.test.js

@ErisDS
Copy link
Copy Markdown
Member

ErisDS commented Mar 13, 2026

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

  • Workflow: CI
  • Failed Step: Run unit tests
  • Run: View failed run
    What failed: CI failure - likely code issue
    Why: The failure appears to be related to code changes. Check the error output for details.
    Action:
    Review the error logs and fix the issue in your code.

@9larsons 9larsons enabled auto-merge (squash) March 13, 2026 18:51
@9larsons 9larsons merged commit beb3e5b into main Mar 13, 2026
30 checks passed
@9larsons 9larsons deleted the add-resize-transistor branch March 13, 2026 19:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants