-
Notifications
You must be signed in to change notification settings - Fork 65
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.
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
fix: use globalThis i/o window (declarative shadow DOM) #671
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov Report
@@ Coverage Diff @@
## main #671 +/- ##
=======================================
Coverage 78.44% 78.45%
=======================================
Files 43 43
Lines 8206 8205 -1
=======================================
Hits 6437 6437
+ Misses 1769 1768 -1
|
Got a Next.js example running! https://wesc-nextjs.vercel.app/ In the new Next.js app router it's really minimal what you need to add because it supports async components |
Have you actually run into this problem? We're not setting window globally, just locally to the project, so any
|
@heff I haven't run into any issues but I think it would break that I know the window export variable is local to Media Chrome but the DOM API's have to be shimmed on a global object right, either window or globalThis. In the window scenario this will happen. // This will be true if JSDOM or Linkedom shimmed window with equivalent API's.
const isShimmed = Object.keys(windowShim)
.every(key => key in window);
// If we keep using window the `window` in the ternary else has to be shimmed with equivalent API's for SSG / SSR to work
export const Window = isServer && !isShimmed ? windowShim : window;
// => typeof window === 'undefined' won't be true anymore That's the thing, we're making the Node environment or Cloudflare Worker environment support all the browser API's we need for it to create the (shadow) DOM and then output it as HTML (DSD) => SSG / SSR web components Look at view source of this page https://wesc-nextjs.vercel.app/ |
No? We've shimmed all the DOM APIs we've needed on windowShim. As long as we continue to import our internal version of I'm not clear on if what you're doing here requires a bunch of additional window APIs though. I think I need you to walk me through this feature in general to get caught up. |
ed everywhere
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The future is now.
I'm making some progress with a generic solution for SSR.
Got it working in a plain Node app and Cloudflare worker, working on Next.js now... (added https://wesc-nextjs.vercel.app/)
https://github.com/luwes/wesc
The worker is pretty cool, it can take any URL with Media Chrome components and add DSD to it
https://wesc.luwes.workers.dev/?url=https%3A%2F%2Fmedia-chrome.mux.dev%2Fexamples%2Fvanilla%2Fadvanced.html
https://wesc.luwes.workers.dev/?url=https://www.media-chrome.org/
There is a limit on CPU time for cloudflare workers so it might time out but I haven't seen it yet.
SSR'ing 3 Media Chrome players took like 35ms locally.
one of the things that came up is that some frameworks like Next.js recommend server checks with
typeof window === 'undefined'
https://stackoverflow.com/questions/49411796/how-do-i-detect-whether-i-am-on-server-on-client-in-next-jsso we don't want to be shimming
window
butglobalThis
with a DOM shim otherwise we are making the server / build look like a client environment.