Conversation
| import '@moq/hang-ui/watch'; | ||
| import '@moq/hang/watch/element'; | ||
|
|
||
| interface HangWatchElement extends HTMLElement { |
There was a problem hiding this comment.
Is there a way to get this automatically? I don't want users manually creating types.
There was a problem hiding this comment.
I agree with you. I just opened a new PR with a specific declaration and some other fixes (I tested locally using npm pack). I tried a few different methods, but for React, separate declaration files seem to be the only solution so far. Feel free to suggest another way if you have any other ideas.
There was a problem hiding this comment.
Sorry it took me some time to get back to you. I’ve introduced CEM (Custom Elements Manifest) to manage the different components. I believe this is a good solution to avoid type issues, generate documentation automatically, and easily create wrappers for different frameworks.
We will create wrappers for all the frameworks we want to use. As an example, in this PR, I added the React wrappers for @moq/hang and @moq/hang-ui. What do you think?
Here is an example of how the components look in React:
import { type FC } from 'react';
import '@moq/hang-ui/watch';
import '@moq/hang/watch/element';
import { HangWatchUI } from '@moq/hang-ui/react';
import { HangWatch } from '@moq/hang/react';
const HangWatchComponent: FC<{ url: string; path: string }> = ({ url, path }) => {
return (
<HangWatchUI>
<HangWatch url={url} path={path} jitter={100} muted reload volume={0}>
<canvas style={{ width: '100%', height: 'auto' }} width="1280" height="720"></canvas>
</HangWatch>
</HangWatchUI>
);
};
export default HangWatchComponent;| element.setAttribute('url', url); | ||
| element.setAttribute('path', path); |
There was a problem hiding this comment.
We should encourage using the type-safe properties, not attributes.
There was a problem hiding this comment.
I totally agree. I added the setters in @moq/hang specifically for this reason. This way, React and other frameworks can use type-safe properties directly via props instead of attributes.
| element.setAttribute('url', url); | ||
| element.setAttribute('path', path); | ||
| element.setAttribute('muted', ''); | ||
| element.setAttribute('latency', '100'); | ||
| element.setAttribute('reload', ''); |
There was a problem hiding this comment.
Ditto, element.url should work.
There was a problem hiding this comment.
I added the setter for the url property here as well, so we don't need to use the attribute.
| import react from '@vitejs/plugin-react' | ||
|
|
||
| // Rewrite Vite-only worklet imports inside @moq packages during transform | ||
| function moqWorkletTransform() { |
There was a problem hiding this comment.
:/ Why is this needed?
We need to fix this if users actually have to do this.
There was a problem hiding this comment.
I totally agree! Unfortunately, if I remove this plugin, an error appears and the Vite dev server stops working. It seems like a compilation problem with .ts?worker&url. I'm not sure why it happens yet.
| export default defineConfig({ | ||
| plugins: [react(), moqWorkletTransform()], | ||
| optimizeDeps: { | ||
| exclude: ["@moq/hang", "@moq/hang-ui"], |
There was a problem hiding this comment.
We should figure out why this is needed
There was a problem hiding this comment.
I totally agree, I will investigate this.
There was a problem hiding this comment.
After introducing CEM, several issues were automatically resolved.
Currently, in the vite-7 folder (which I'm using for testing with npm pack), I still have this exclusion:
optimizeDeps: {
exclude: ["@moq/hang"]
}If I remove the optimizeDeps exclusion, I receive the following error:
I will look into this later.
2 participants
I added a new example folder:
vite-7.This folder shows how to use
@moq/hangand@moq/hang-uiwith React 19 and Vite 7.It includes a simple project setup and sample code for publishing and watching streams.