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

Open
pzanella wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add vite-7/ folder #5

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
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
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
29 changes: 29 additions & 0 deletions vite-7/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Environment variables
.env
.env.local
.env.*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
59 changes: 59 additions & 0 deletions vite-7/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# React 19 + TypeScript + Vite 7

Minimal integration example demonstrating `@moq/hang` and `@moq/hang-ui` with React and Vite.
Copy link

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Package names in the description don't match package.json.

Line 3 describes demonstrating @moq/hang and @moq/hang-ui, but the actual runtime dependencies are @moq/publish and @moq/watch. The Resources section at lines 56–57 has the same mismatch. This looks like the README was drafted against an earlier API surface.

✏️ Proposed fix 
-Minimal integration example demonstrating `@moq/hang` and `@moq/hang-ui` with React and Vite.
+Minimal integration example demonstrating `@moq/publish` and `@moq/watch` with React and Vite.

And in the Resources section:

-- [`@moq/hang`](https://www.npmjs.com/package/@moq/hang)
-- [`@moq/hang-ui`](https://www.npmjs.com/package/@moq/hang-ui)
++ [`@moq/publish`](https://www.npmjs.com/package/@moq/publish)
++ [`@moq/watch`](https://www.npmjs.com/package/@moq/watch)
📝 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
Minimal integration example demonstrating `@moq/hang` and `@moq/hang-ui` with React and Vite.
Minimal integration example demonstrating `@moq/publish` and `@moq/watch` with React and Vite.
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@vite-7/README.md` at line 3, Update the README text to use the correct
package names: replace references to `@moq/hang` and `@moq/hang-ui` with the
actual runtime dependencies `@moq/publish` and `@moq/watch` (both in the initial
description and in the Resources section), ensuring any example commands or
links reflect `@moq/publish` and `@moq/watch` instead of the old names so
documentation matches package.json.


## Features

- Watch mode: Stream consumption from a relay
- Publish mode: Stream publishing to a relay
- Simple mode toggle to switch between viewer and publisher

## Prerequisites

- Node.js 20.19.0 or >=22.12.0
- A running MoQ relay server (default: `http://localhost:4443/anon`)

## Quick Start

```bash
npm install
npm dev
```
Comment on lines +18 to +21
Copy link

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

npm dev and npm build are not valid npm commands — use npm run.

npm dev and npm build will fail because dev and build are custom scripts, not npm lifecycle commands.

✏️ Proposed fix 
-npm install
-npm dev
+npm install
+npm run dev
-npm build
+npm run build
📝 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
```bash
npm install
npm dev
```
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@vite-7/README.md` around lines 18 - 21, Update the README command examples so
they use npm run for custom scripts: replace occurrences of "npm dev" with "npm
run dev" and "npm build" with "npm run build" (leave "npm install" as-is);
ensure references to the scripts match the package.json script names (e.g., dev,
build) so users run the correct commands.


The app opens at `http://localhost:5173`

## Environment Variables

Create a `.env.local` file to override defaults:

```env
VITE_RELAY_URL=http://localhost:4443/anon
VITE_BROADCAST_PATH=demo
```

## Build

```bash
npm build
```

Output is generated in the `dist/` directory.

## Project Structure

```
src/
├── App.tsx # Main component with mode toggle
├── components/
│ ├── HangWatch.tsx # Stream viewer
│ └── HangPublish.tsx # Stream publisher
├── App.css # Component styles
└── index.css # Global styles
```
Comment on lines +44 to +52
Copy link

@coderabbitai coderabbitai bot Feb 21, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Missing language specifier on fenced code block (MD040).

The project-structure block has no language tag, triggering a markdownlint warning. Use text (or plaintext) to suppress it.

✏️ Proposed fix 
-```
+```text
 src/
 ├── App.tsx              # Main component with mode toggle
📝 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
```
src/
├── App.tsx # Main component with mode toggle
├── components/
│ ├── HangWatch.tsx # Stream viewer
│ └── HangPublish.tsx # Stream publisher
├── App.css # Component styles
└── index.css # Global styles
```
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)

[warning] 44-44: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

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

In `@vite-7/README.md` around lines 44 - 52, The README.md project-structure
fenced code block lacks a language specifier causing MD040; update the
triple-backtick fence that surrounds the tree (the block starting with "src/")
to include a language tag like text or plaintext (e.g., ```text) so markdownlint
stops warning, keeping the block content unchanged.


## Resources

- [@moq/hang](https://www.npmjs.com/package/@moq/hang)
- [@moq/hang-ui](https://www.npmjs.com/package/@moq/hang-ui)
- [Vite](https://vite.dev)
- [React](https://react.dev)
23 changes: 23 additions & 0 deletions vite-7/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])
13 changes: 13 additions & 0 deletions vite-7/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@moq/hang Integration Example</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading