Skip to content

feat(player): SSR via declarative shadow DOM (stacked on #2758) #2793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tombeckenham wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat(player): SSR via declarative shadow DOM (stacked on #2758) #2793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da1a145
feat(player): add React bindings at @hyperframes/player/react + examp…
tombeckenham Jul 24, 2026
640750f
fix(player): close React binding contract gaps from review
tombeckenham Jul 25, 2026
a48708e
feat(player): server-render the player via declarative shadow DOM
tombeckenham Jul 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ jobs:
filters: |
code:
- "packages/**"
- "examples/**"
- "scripts/**"
- "package.json"
- "bun.lock"
Expand Down
7 changes: 7 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,15 @@ examples/*
!examples/k8s-jobs/**
!examples/gcp-cloud-run
!examples/gcp-cloud-run/**
!examples/react-player
!examples/react-player/**
# …but never the local smoke run's build/render artifacts.
examples/gcp-cloud-run/scripts/gcp-smoke-artifacts/
# …and never the react-player example's vite build output or node_modules
# (the blanket dist/ and node_modules/ rules match unanchored, but the
# `!examples/react-player/**` negation above would otherwise re-include them).
examples/react-player/dist/
examples/react-player/node_modules/
packages/studio/data/

.desloppify/
Expand Down
56 changes: 43 additions & 13 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 22 additions & 0 deletions examples/react-player/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# @hyperframes/react-player-example

Demo app for the React bindings shipped at [`@hyperframes/player/react`](../player#react). Renders the `<HyperframesPlayer>` component against a bundled copy of the `motion-blur` registry example and exercises the full binding surface:

- Props → attributes (`controls`, `muted`, `loop`, `playbackRate`) via the option toggles
- Event callbacks (`onReady`, `onPlay`, `onPause`, `onTimeUpdate`, `onEnded`, `onScenes`, `onError`) via the event log
- The imperative ref handle (`play()`, `pause()`, `seek()`) via the custom transport bar

## Run

```bash
bun install # from the repo root
bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
bun run --filter @hyperframes/core build
bun run --filter @hyperframes/player build # the react subpath resolves to player dist
cd examples/react-player
bun run dev
```

The demo composition lives at `public/composition/index.html` — an unmodified copy of `registry/examples/motion-blur`. Swap in any composition (e.g. one scaffolded with `hyperframes init`) by replacing that file or pointing `COMPOSITION_SRC` in `src/App.tsx` elsewhere.

This package is private and never published.
12 changes: 12 additions & 0 deletions examples/react-player/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HyperFrames Player — React Playground</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions examples/react-player/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "@hyperframes/react-player-example",
"version": "0.7.69",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"typecheck": "tsc --noEmit",
"test": "vitest run"
},
"dependencies": {
"@hyperframes/player": "workspace:*",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.0.0",
"happy-dom": "^20.9.0",
"typescript": "^5.0.0",
"vite": "^6.4.2",
"vitest": "^3.2.4"
}
}
Loading