Skip to content

feat: add vite-7/ folder #5

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

Merged
kixelated merged 8 commits into from
Feb 24, 2026
Merged

feat: add vite-7/ folder #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7690da9
feat: add vite-7/ folder
pzanella Feb 4, 2026
4832e02
Merge remote-tracking branch 'origin/main' into feat/add-vite-7-folder
kixelated Feb 21, 2026
656299f
Simplify the vite-7 integration.
kixelated Feb 21, 2026
40b75b7
Update to 0.2.0
kixelated Feb 24, 2026
ed74a60
fix(vite-7): update README.md and vite.config.ts
pzanella Feb 24, 2026
b6d23b6
Remove cruft
kixelated Feb 24, 2026
95e0cac
feat: add Vite template to App.tsx and update READMEs
pzanella Feb 24, 2026
12887d9
fix: remove Vite template to App.tsx
pzanella Feb 24, 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
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ npm run dev

## Frameworks

| Framework | Supported |
|-----------------------------------------------|-----------|
| [Vite 5](./vite-5) | ✅ |
| [Vite 6](./vite-6) | ✅ |
| Framework | Supported |
|-------------------------------------------------|------------|
| [Vite 5](./vite-5) | ✅ |
| [Vite 6](./vite-6) | ✅ |
| [Vite 7](./vite-7) | ✅ |
| [Astro 5](https://github.com/kixelated/moq.dev) | ✅ |
80 changes: 40 additions & 40 deletions vite-5/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
# React + TypeScript + Vite
# MoQ Web Components + React

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
React application demonstrating Media over QUIC (MoQ) web components for real-time media streaming. Uses `@moq/watch` and `@moq/publish` packages with React 18 and Vite 5.

Currently, two official plugins are available:
## Features

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
- **Watch**: Subscribe to real-time media streams from a MoQ relay
- **Publish**: Publish camera/screen media to a MoQ relay
- Custom web components with Solid.js-based UI overlays
- Feature detection and browser support banners

## Expanding the ESLint configuration
## Prerequisites

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Node.js 20.19.0 or >=22.12.0
Copy link

@coderabbitai coderabbitai bot Feb 24, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Same copy-paste of the Vite 7 Node.js engine requirement.

Vite 7 and other modern tools require at least Node 20.19.0 or Node 22.12.0 due to upstream ESM loader changes — this doesn't apply to Vite 5. Documenting 20.19.0 or >=22.12.0 here incorrectly excludes Node.js 18/20.x users who are on perfectly valid versions for Vite 5.

📝 Proposed fix 
-  - Node.js 20.19.0 or >=22.12.0
+  - Node.js 18.0.0 or later
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- Node.js 20.19.0 or >=22.12.0
- Node.js 18.0.0 or later
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@vite-5/README.md` at line 14, The README currently copies Vite 7's Node
requirement text ("Node.js 20.19.0 or >=22.12.0") which is wrong for Vite 5;
update the Node.js engine requirement line in README.md to the correct Vite 5
requirement (replace the copied Vite 7 text with the proper Vite 5 baseline such
as "Node.js >=14.18" or the exact Vite 5-supported versions like "Node.js
14.18+, 16+, or 18+") so Node 18/20 users are not incorrectly excluded.

Copy link
Contributor Author

@pzanella pzanella Feb 24, 2026

Choose a reason for hiding this comment

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

That's a valid point, but we need to keep the Node 20.19.0+ requirement. This is because some of our dependencies, such as @svta/cml-iso-bmff and eslint-visitor-keys, require these versions to work.


- Configure the top-level `parserOptions` property like this:
## Quick Start

```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```bash
npm install
npm run dev
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
The app opens at `http://localhost:5173`.

## Build

```bash
npm run build
```

Output is generated in the `dist/` directory.

## Web Components

### Watch (Subscribe)
- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `path`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
- **`<moq-watch-ui>`** - Solid.js UI overlay providing playback controls, stats panel, and buffering indicators.
- **`<moq-watch-support>`** - Feature detection banner that displays browser compatibility warnings.

### Publish
- **`<moq-publish>`** - Core element for publishing media to MoQ streams. Accepts `url`, `path`, `source`, `muted`, `invisible` attributes. Contains a `<video>` element for preview.
- **`<moq-publish-ui>`** - Solid.js UI overlay providing publishing controls and configuration.
- **`<moq-publish-support>`** - Feature detection banner for publishing capabilities.

## Resources

- [@moq/watch](https://www.npmjs.com/package/@moq/watch) - Watch/subscribe to MoQ streams
- [@moq/publish](https://www.npmjs.com/package/@moq/publish) - Publish to MoQ streams
- [Vite](https://vite.dev)
- [React](https://react.dev)
Loading