Compare commits
2 Commits
proposal-4
...
proposal-8
| Author | SHA1 | Date | |
|---|---|---|---|
|
2a39d594c7 | ||
|
|
42594951f3 |
42
.gitignore
vendored
42
.gitignore
vendored
@@ -1,41 +1,3 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
node_modules
|
||||||
|
dist
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.*
|
|
||||||
.yarn/*
|
|
||||||
!.yarn/patches
|
|
||||||
!.yarn/plugins
|
|
||||||
!.yarn/releases
|
|
||||||
!.yarn/versions
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# next.js
|
|
||||||
/.next/
|
|
||||||
/out/
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
*.pem
|
|
||||||
|
|
||||||
# debug
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
.pnpm-debug.log*
|
|
||||||
|
|
||||||
# env files (can opt-in for committing if needed)
|
|
||||||
.env*
|
|
||||||
|
|
||||||
# vercel
|
|
||||||
.vercel
|
|
||||||
|
|
||||||
# typescript
|
|
||||||
*.tsbuildinfo
|
|
||||||
next-env.d.ts
|
|
||||||
|
|||||||
310
MVP_PLAN.md
Normal file
310
MVP_PLAN.md
Normal file
@@ -0,0 +1,310 @@
|
|||||||
|
# Minimal MVP Plan: P2P Poll App
|
||||||
|
|
||||||
|
## Recommendation
|
||||||
|
|
||||||
|
Build the MVP with:
|
||||||
|
|
||||||
|
- Vanilla JS or TypeScript
|
||||||
|
- Vite for local dev/build
|
||||||
|
- Yjs for shared state
|
||||||
|
- `y-webrtc` for browser-to-browser sync
|
||||||
|
- `y-indexeddb` for local persistence/offline recovery
|
||||||
|
|
||||||
|
This is the best fit for a small poll app because the data model is tiny, concurrent edits are possible, and Yjs already solves merge/conflict handling while `y-webrtc` gives a direct P2P transport with only signaling infrastructure.
|
||||||
|
|
||||||
|
## Why This Stack
|
||||||
|
|
||||||
|
### Recommended: Yjs + y-webrtc
|
||||||
|
|
||||||
|
- Best balance of simplicity and correctness
|
||||||
|
- Clients connect directly over WebRTC
|
||||||
|
- No custom conflict-resolution logic needed
|
||||||
|
- Easy to add offline persistence
|
||||||
|
- Good fit for a single shared document/room
|
||||||
|
|
||||||
|
### Not recommended for the first MVP
|
||||||
|
|
||||||
|
#### PeerJS
|
||||||
|
|
||||||
|
- Very simple transport layer
|
||||||
|
- But you must design and maintain your own replication and merge rules
|
||||||
|
- Fine for demos with a host-authoritative peer, weaker for true collaborative editing
|
||||||
|
|
||||||
|
#### GUN
|
||||||
|
|
||||||
|
- Fast to prototype realtime shared state
|
||||||
|
- But official tutorials commonly use a GUN peer/relay server for shared data
|
||||||
|
- For this app, its data model is less explicit than a CRDT and gives less control over vote semantics
|
||||||
|
|
||||||
|
#### Automerge
|
||||||
|
|
||||||
|
- Very capable CRDT and local-first model
|
||||||
|
- But heavier than needed for a single small poll
|
||||||
|
- Better choice if the project is expected to evolve into a richer collaborative app
|
||||||
|
|
||||||
|
## MVP Scope
|
||||||
|
|
||||||
|
Ship exactly one shared poll per room.
|
||||||
|
|
||||||
|
Included:
|
||||||
|
|
||||||
|
- Join a poll by opening a shared URL
|
||||||
|
- Add a new option
|
||||||
|
- Vote for one option
|
||||||
|
- Change your vote
|
||||||
|
- Realtime updates across peers
|
||||||
|
- Local persistence in the browser
|
||||||
|
- Basic connection status UI
|
||||||
|
|
||||||
|
Excluded:
|
||||||
|
|
||||||
|
- User accounts
|
||||||
|
- Multiple polls per room
|
||||||
|
- Option deletion/editing
|
||||||
|
- Authentication/authorization
|
||||||
|
- Rich presence
|
||||||
|
- Advanced discovery
|
||||||
|
- Production-grade TURN/signaling deployment
|
||||||
|
|
||||||
|
## MVP UX
|
||||||
|
|
||||||
|
Keep the interface intentionally small:
|
||||||
|
|
||||||
|
- Poll title at the top
|
||||||
|
- Option list with vote counts
|
||||||
|
- One button per option to cast vote
|
||||||
|
- Small form to add an option
|
||||||
|
- Status line showing `connecting`, `connected`, or `offline`
|
||||||
|
- Small label showing which option you voted for
|
||||||
|
|
||||||
|
Join model:
|
||||||
|
|
||||||
|
- Room ID in the URL, e.g. `/?room=poll-demo`
|
||||||
|
- Users share the URL manually
|
||||||
|
|
||||||
|
Identity model:
|
||||||
|
|
||||||
|
- Generate a local `userId` once and store it in `localStorage`
|
||||||
|
- Optional local display name, also stored locally
|
||||||
|
|
||||||
|
## Shared Data Model
|
||||||
|
|
||||||
|
Use a single Yjs document per room.
|
||||||
|
|
||||||
|
Suggested structure:
|
||||||
|
|
||||||
|
- `poll` as a `Y.Map`
|
||||||
|
- `poll.title` as a string
|
||||||
|
- `poll.options` as a `Y.Map<optionId, Y.Map>`
|
||||||
|
- `poll.votes` as a `Y.Map<userId, optionId>`
|
||||||
|
|
||||||
|
Each option record:
|
||||||
|
|
||||||
|
- `id`
|
||||||
|
- `label`
|
||||||
|
- `createdBy`
|
||||||
|
- `createdAt`
|
||||||
|
|
||||||
|
Important design choice:
|
||||||
|
|
||||||
|
Do not store vote counters as mutable shared numbers for the MVP.
|
||||||
|
Instead, derive counts from `votes`.
|
||||||
|
|
||||||
|
Why:
|
||||||
|
|
||||||
|
- A user changing vote becomes a single write: `votes[userId] = optionId`
|
||||||
|
- No double-counting logic
|
||||||
|
- Concurrent writes are easier to reason about
|
||||||
|
- Rendering counts from `votes` is trivial at this scale
|
||||||
|
|
||||||
|
## Sync Model
|
||||||
|
|
||||||
|
### Networking
|
||||||
|
|
||||||
|
- Use `WebrtcProvider(roomId, ydoc)`
|
||||||
|
- Start with the default public signaling servers for local development
|
||||||
|
- If needed, swap to a self-hosted signaling server later without changing the app model
|
||||||
|
|
||||||
|
### Persistence
|
||||||
|
|
||||||
|
- Use `IndexeddbPersistence(roomId, ydoc)`
|
||||||
|
- This preserves state across reloads and helps when reconnecting after temporary disconnects
|
||||||
|
|
||||||
|
### Conflict behavior
|
||||||
|
|
||||||
|
- Concurrent option additions merge naturally
|
||||||
|
- Concurrent vote changes resolve at the per-user key level
|
||||||
|
- Tally is recalculated from the merged vote map
|
||||||
|
|
||||||
|
## Suggested Project Structure
|
||||||
|
|
||||||
|
```text
|
||||||
|
src/
|
||||||
|
main.ts
|
||||||
|
app.ts
|
||||||
|
state.ts
|
||||||
|
sync.ts
|
||||||
|
render.ts
|
||||||
|
identity.ts
|
||||||
|
styles.css
|
||||||
|
index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
Responsibilities:
|
||||||
|
|
||||||
|
- `sync.ts`: create Yjs doc, WebRTC provider, IndexedDB provider
|
||||||
|
- `state.ts`: shared structures, add option, cast vote, selectors
|
||||||
|
- `identity.ts`: local `userId` and optional name
|
||||||
|
- `render.ts`: DOM updates
|
||||||
|
- `app.ts`: wire events to state and rendering
|
||||||
|
|
||||||
|
## Implementation Plan
|
||||||
|
|
||||||
|
### Phase 1: App shell
|
||||||
|
|
||||||
|
- Create Vite app with vanilla TS or JS
|
||||||
|
- Add a minimal single-page UI
|
||||||
|
- Parse `room` from the URL
|
||||||
|
- Generate and persist `userId`
|
||||||
|
|
||||||
|
Success check:
|
||||||
|
|
||||||
|
- App loads
|
||||||
|
- Room ID appears in UI
|
||||||
|
- User can type in the form
|
||||||
|
|
||||||
|
### Phase 2: Shared state
|
||||||
|
|
||||||
|
- Add Yjs document
|
||||||
|
- Create root shared maps
|
||||||
|
- Seed default poll title if missing
|
||||||
|
- Observe document updates and re-render UI
|
||||||
|
|
||||||
|
Success check:
|
||||||
|
|
||||||
|
- State exists in one browser tab
|
||||||
|
- Refresh keeps local state when IndexedDB is enabled
|
||||||
|
|
||||||
|
### Phase 3: P2P sync
|
||||||
|
|
||||||
|
- Add `y-webrtc`
|
||||||
|
- Join room based on URL room ID
|
||||||
|
- Show connection status from provider events
|
||||||
|
|
||||||
|
Success check:
|
||||||
|
|
||||||
|
- Two browsers on different tabs/devices see the same options
|
||||||
|
- New options appear in near real time
|
||||||
|
|
||||||
|
### Phase 4: Voting logic
|
||||||
|
|
||||||
|
- Implement `castVote(optionId)` as `votes.set(userId, optionId)`
|
||||||
|
- Derive tallies from `votes`
|
||||||
|
- Highlight the local user’s current vote
|
||||||
|
|
||||||
|
Success check:
|
||||||
|
|
||||||
|
- Votes update live across peers
|
||||||
|
- Changing vote updates counts correctly
|
||||||
|
|
||||||
|
### Phase 5: Basic hardening
|
||||||
|
|
||||||
|
- Trim/validate option labels
|
||||||
|
- Prevent empty options
|
||||||
|
- Ignore duplicate labels case-insensitively for MVP
|
||||||
|
- Show simple offline/connecting text
|
||||||
|
|
||||||
|
Success check:
|
||||||
|
|
||||||
|
- Basic misuse does not break the UI
|
||||||
|
- Reconnect restores updates
|
||||||
|
|
||||||
|
## Minimal API Surface
|
||||||
|
|
||||||
|
These functions are enough for the first build:
|
||||||
|
|
||||||
|
- `getRoomId(): string`
|
||||||
|
- `getUserId(): string`
|
||||||
|
- `initSync(roomId): AppSync`
|
||||||
|
- `ensurePollInitialized()`
|
||||||
|
- `addOption(label: string)`
|
||||||
|
- `castVote(optionId: string)`
|
||||||
|
- `getViewModel(): PollViewModel`
|
||||||
|
- `render(viewModel)`
|
||||||
|
|
||||||
|
## Risks And MVP Mitigations
|
||||||
|
|
||||||
|
### NAT / WebRTC connectivity
|
||||||
|
|
||||||
|
Risk:
|
||||||
|
|
||||||
|
- Some peer pairs may fail to connect in restrictive networks
|
||||||
|
|
||||||
|
Mitigation:
|
||||||
|
|
||||||
|
- Accept this for MVP
|
||||||
|
- Keep signaling configurable
|
||||||
|
- Add TURN only if testing shows frequent failures
|
||||||
|
|
||||||
|
### Small public signaling dependency
|
||||||
|
|
||||||
|
Risk:
|
||||||
|
|
||||||
|
- Public signaling is fine for demos, not ideal for production
|
||||||
|
|
||||||
|
Mitigation:
|
||||||
|
|
||||||
|
- Treat it as replaceable infrastructure
|
||||||
|
- Self-host later if the prototype is kept
|
||||||
|
|
||||||
|
### Duplicate or messy options
|
||||||
|
|
||||||
|
Risk:
|
||||||
|
|
||||||
|
- Users may add near-duplicate entries
|
||||||
|
|
||||||
|
Mitigation:
|
||||||
|
|
||||||
|
- Normalize labels
|
||||||
|
- Prevent exact duplicates for MVP
|
||||||
|
|
||||||
|
### No trust/auth model
|
||||||
|
|
||||||
|
Risk:
|
||||||
|
|
||||||
|
- Any participant in the room can add options and vote
|
||||||
|
|
||||||
|
Mitigation:
|
||||||
|
|
||||||
|
- Accept for MVP
|
||||||
|
- Frame rooms as small trusted groups
|
||||||
|
|
||||||
|
## Estimated MVP Size
|
||||||
|
|
||||||
|
For one developer:
|
||||||
|
|
||||||
|
- Initial prototype: 0.5 to 1 day
|
||||||
|
- Polished MVP with basic resilience: 1 to 2 days
|
||||||
|
|
||||||
|
Rough code size:
|
||||||
|
|
||||||
|
- 250 to 500 lines plus styles
|
||||||
|
|
||||||
|
## Nice Next Steps After MVP
|
||||||
|
|
||||||
|
- Copy-link button
|
||||||
|
- Participant list / presence
|
||||||
|
- Vote limit modes: single-choice or multi-choice
|
||||||
|
- Option editing/deletion
|
||||||
|
- QR code for room join
|
||||||
|
- Self-hosted signaling server
|
||||||
|
- PWA packaging for better offline behavior
|
||||||
|
|
||||||
|
## Sources
|
||||||
|
|
||||||
|
- PeerJS getting started: https://peerjs.com/client/getting-started
|
||||||
|
- Yjs collaborative editor guide: https://docs.yjs.dev/getting-started/a-collaborative-editor
|
||||||
|
- Yjs offline support: https://docs.yjs.dev/getting-started/allowing-offline-editing
|
||||||
|
- y-webrtc README: https://github.com/yjs/y-webrtc
|
||||||
|
- GUN tutorial showing shared data via a GUN peer: https://gun.eco/converse
|
||||||
|
- Automerge network sync: https://automerge.org/docs/tutorial/network-sync/
|
||||||
39
README.md
39
README.md
@@ -1,2 +1,39 @@
|
|||||||
# P2P Poll App
|
# P2P Poll App
|
||||||
Remove-Item -Recurse -Force node_modules, .next
|
|
||||||
|
Small peer-to-peer polling app built with `Vite`, `TypeScript`, `Yjs`, `y-webrtc`, and `y-indexeddb`.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- single shared poll per room
|
||||||
|
- add options collaboratively
|
||||||
|
- one vote per user, changeable at any time
|
||||||
|
- peer-to-peer sync over WebRTC
|
||||||
|
- local browser persistence for refresh/reconnect recovery
|
||||||
|
- shareable room URL
|
||||||
|
|
||||||
|
## Run locally
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open the local URL in two tabs or browsers and use the same `?room=` query string to join the same poll.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```text
|
||||||
|
http://localhost:5173/?room=poll-demo
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- The app uses public signaling through `y-webrtc` for MVP simplicity.
|
||||||
|
- Poll state is not stored on an application server.
|
||||||
|
- WebRTC connectivity can still depend on the network environment of the participating peers.
|
||||||
|
|||||||
BIN
app/favicon.ico
BIN
app/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@@ -1,26 +0,0 @@
|
|||||||
@import "tailwindcss";
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #171717;
|
|
||||||
}
|
|
||||||
|
|
||||||
@theme inline {
|
|
||||||
--color-background: var(--background);
|
|
||||||
--color-foreground: var(--foreground);
|
|
||||||
--font-sans: var(--font-geist-sans);
|
|
||||||
--font-mono: var(--font-geist-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--background: #0a0a0a;
|
|
||||||
--foreground: #ededed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import type { Metadata } from "next";
|
|
||||||
|
|
||||||
import "./globals.css";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "p2p polling",
|
|
||||||
description: "creating a p2p-polling app",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
|
||||||
children,
|
|
||||||
}: Readonly<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
}>) {
|
|
||||||
return (
|
|
||||||
<html
|
|
||||||
lang="en"
|
|
||||||
className={` h-full antialiased`}
|
|
||||||
>
|
|
||||||
<body className="min-h-full flex flex-col">{children}</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
47
app/page.tsx
47
app/page.tsx
@@ -1,47 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import usePeerManager from "../hooks/usePeerManager";
|
|
||||||
import usePollManager from "../hooks/usePollManager";
|
|
||||||
import PollCreation from "../components/PollCreation";
|
|
||||||
import PollActive from "../components/PollActive";
|
|
||||||
import PeersList from "../components/PeersList";
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const peerManager = usePeerManager();
|
|
||||||
const pollManager = usePollManager(peerManager);
|
|
||||||
|
|
||||||
const [connectId, setConnectId] = useState("");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-6 space-y-4">
|
|
||||||
<h1 className="text-2xl font-bold">P2P Poll App</h1>
|
|
||||||
|
|
||||||
{/* Connect */}
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<input
|
|
||||||
className="border p-2"
|
|
||||||
placeholder="Peer ID"
|
|
||||||
value={connectId}
|
|
||||||
onChange={(e) => setConnectId(e.target.value)}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
className="bg-blue-500 text-white px-4"
|
|
||||||
onClick={() => peerManager.connectToPeer(connectId)}
|
|
||||||
>
|
|
||||||
Connect
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>Your ID: {peerManager.peerId}</p>
|
|
||||||
|
|
||||||
{pollManager.poll ? (
|
|
||||||
<PollActive pollManager={pollManager} peerId={peerManager.peerId} />
|
|
||||||
) : (
|
|
||||||
<PollCreation pollManager={pollManager} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<PeersList peers={peerManager.peers} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
type NotificationType = "info" | "success" | "error";
|
|
||||||
|
|
||||||
interface NotificationProps {
|
|
||||||
message: string;
|
|
||||||
type?: NotificationType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Notification({ message, type = "info" }: NotificationProps) {
|
|
||||||
const colors: Record<NotificationType, string> = {
|
|
||||||
info: "bg-blue-100 text-blue-700",
|
|
||||||
success: "bg-green-100 text-green-700",
|
|
||||||
error: "bg-red-100 text-red-700",
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`px-4 py-2 rounded shadow ${colors[type]}`}>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
export default function PeersList({ peers }: { peers: string[] }) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h3>Peers</h3>
|
|
||||||
{peers.length === 0 ? (
|
|
||||||
<p>No peers</p>
|
|
||||||
) : (
|
|
||||||
peers.map((p) => <div key={p}>{p}</div>)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import PollOption from "./PollOption";
|
|
||||||
|
|
||||||
export default function PollActive({ pollManager, peerId }: any) {
|
|
||||||
const poll = pollManager.poll;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold">{poll.question}</h2>
|
|
||||||
|
|
||||||
{poll.options.map((opt: any) => (
|
|
||||||
<PollOption
|
|
||||||
key={opt.id}
|
|
||||||
option={opt}
|
|
||||||
pollManager={pollManager}
|
|
||||||
peerId={peerId}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function PollCreation({ pollManager }: any) {
|
|
||||||
const [question, setQuestion] = useState("");
|
|
||||||
const [options, setOptions] = useState<string[]>(["", ""]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
className="border p-2 w-full"
|
|
||||||
placeholder="Question"
|
|
||||||
value={question}
|
|
||||||
onChange={(e) => setQuestion(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{options.map((opt, i) => (
|
|
||||||
<input
|
|
||||||
key={i}
|
|
||||||
className="border p-2 w-full mt-2"
|
|
||||||
placeholder={`Option ${i + 1}`}
|
|
||||||
value={opt}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newOpts = [...options];
|
|
||||||
newOpts[i] = e.target.value;
|
|
||||||
setOptions(newOpts);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="bg-green-500 text-white px-4 mt-2"
|
|
||||||
onClick={() => pollManager.createPoll(question, options)}
|
|
||||||
>
|
|
||||||
Create Poll
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
export default function PollOption({ option, pollManager, peerId }: any) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="border p-2 mt-2 cursor-pointer"
|
|
||||||
onClick={() => pollManager.vote(option.id, peerId)}
|
|
||||||
>
|
|
||||||
{option.text} - {option.votes} votes
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { defineConfig, globalIgnores } from "eslint/config";
|
|
||||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
|
||||||
import nextTs from "eslint-config-next/typescript";
|
|
||||||
|
|
||||||
const eslintConfig = defineConfig([
|
|
||||||
...nextVitals,
|
|
||||||
...nextTs,
|
|
||||||
// Override default ignores of eslint-config-next.
|
|
||||||
globalIgnores([
|
|
||||||
// Default ignores of eslint-config-next:
|
|
||||||
".next/**",
|
|
||||||
"out/**",
|
|
||||||
"build/**",
|
|
||||||
"next-env.d.ts",
|
|
||||||
]),
|
|
||||||
]);
|
|
||||||
|
|
||||||
export default eslintConfig;
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from "react";
|
|
||||||
import Peer from "peerjs";
|
|
||||||
|
|
||||||
export default function usePeerManager() {
|
|
||||||
const [peerId, setPeerId] = useState<string | null>(null);
|
|
||||||
const [peers, setPeers] = useState<string[]>([]);
|
|
||||||
const peerRef = useRef<Peer | null>(null);
|
|
||||||
const connectionsRef = useRef<Map<string, any>>(new Map());
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const peer = new Peer();
|
|
||||||
peerRef.current = peer;
|
|
||||||
|
|
||||||
peer.on("open", (id) => {
|
|
||||||
setPeerId(id);
|
|
||||||
});
|
|
||||||
|
|
||||||
peer.on("connection", (conn) => {
|
|
||||||
conn.on("open", () => {
|
|
||||||
connectionsRef.current.set(conn.peer, conn);
|
|
||||||
setPeers(Array.from(connectionsRef.current.keys()));
|
|
||||||
});
|
|
||||||
|
|
||||||
conn.on("data", (data) => {
|
|
||||||
console.log("Received:", data);
|
|
||||||
});
|
|
||||||
|
|
||||||
conn.on("close", () => {
|
|
||||||
connectionsRef.current.delete(conn.peer);
|
|
||||||
setPeers(Array.from(connectionsRef.current.keys()));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
peer.destroy();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const connectToPeer = (id: string) => {
|
|
||||||
if (!peerRef.current) return;
|
|
||||||
const conn = peerRef.current.connect(id);
|
|
||||||
|
|
||||||
conn.on("open", () => {
|
|
||||||
connectionsRef.current.set(conn.peer, conn);
|
|
||||||
setPeers(Array.from(connectionsRef.current.keys()));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const broadcast = (data: any) => {
|
|
||||||
connectionsRef.current.forEach((conn) => {
|
|
||||||
if (conn.open) conn.send(data);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return { peerId, peers, connectToPeer, broadcast };
|
|
||||||
}
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
type Option = {
|
|
||||||
id: string;
|
|
||||||
text: string;
|
|
||||||
votes: number;
|
|
||||||
voters: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
type Poll = {
|
|
||||||
id: string;
|
|
||||||
question: string;
|
|
||||||
options: Option[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function usePollManager(peerManager: any) {
|
|
||||||
const [poll, setPoll] = useState<Poll | null>(null);
|
|
||||||
const [myVote, setMyVote] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const createPoll = (question: string, options: string[]) => {
|
|
||||||
const newPoll: Poll = {
|
|
||||||
id: Date.now().toString(),
|
|
||||||
question,
|
|
||||||
options: options.map((opt, i) => ({
|
|
||||||
id: `opt-${i}`,
|
|
||||||
text: opt,
|
|
||||||
votes: 0,
|
|
||||||
voters: [],
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
|
|
||||||
setPoll(newPoll);
|
|
||||||
peerManager.broadcast({ type: "poll", poll: newPoll });
|
|
||||||
};
|
|
||||||
|
|
||||||
const vote = (optionId: string, peerId: string) => {
|
|
||||||
if (!poll) return;
|
|
||||||
|
|
||||||
const updated = { ...poll };
|
|
||||||
|
|
||||||
updated.options.forEach((opt) => {
|
|
||||||
const index = opt.voters.indexOf(peerId);
|
|
||||||
if (index !== -1) {
|
|
||||||
opt.voters.splice(index, 1);
|
|
||||||
opt.votes--;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const option = updated.options.find((o) => o.id === optionId);
|
|
||||||
if (!option) return;
|
|
||||||
|
|
||||||
option.votes++;
|
|
||||||
option.voters.push(peerId);
|
|
||||||
|
|
||||||
setPoll(updated);
|
|
||||||
setMyVote(optionId);
|
|
||||||
|
|
||||||
peerManager.broadcast({
|
|
||||||
type: "vote",
|
|
||||||
optionId,
|
|
||||||
voterId: peerId,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return { poll, createPoll, vote, myVote };
|
|
||||||
}
|
|
||||||
12
index.html
Normal file
12
index.html
Normal file
@@ -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>P2P Poll</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import type { NextConfig } from "next";
|
|
||||||
|
|
||||||
const nextConfig: NextConfig = {
|
|
||||||
experimental: {
|
|
||||||
turbopackFileSystemCacheForDev: true,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default nextConfig;
|
|
||||||
7285
package-lock.json
generated
7285
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
@@ -1,27 +1,20 @@
|
|||||||
{
|
{
|
||||||
"name": "p2p-polling",
|
"name": "p2p-poll-app",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "vite",
|
||||||
"build": "next build",
|
"build": "tsc --noEmit && vite build",
|
||||||
"start": "next start",
|
"preview": "vite preview"
|
||||||
"lint": "eslint"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "16.2.0",
|
"y-indexeddb": "^9.0.12",
|
||||||
"peerjs": "^1.5.5",
|
"y-webrtc": "^10.3.0",
|
||||||
"react": "19.2.4",
|
"yjs": "^13.6.27"
|
||||||
"react-dom": "19.2.4"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"typescript": "^5.9.2",
|
||||||
"@types/node": "^20",
|
"vite": "^7.1.5"
|
||||||
"@types/react": "^19",
|
|
||||||
"@types/react-dom": "^19",
|
|
||||||
"eslint": "^9",
|
|
||||||
"eslint-config-next": "16.2.0",
|
|
||||||
"tailwindcss": "^4",
|
|
||||||
"typescript": "^5"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
const config = {
|
|
||||||
plugins: {
|
|
||||||
"@tailwindcss/postcss": {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 391 B |
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 128 B |
@@ -1 +0,0 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 385 B |
107
src/app.ts
Normal file
107
src/app.ts
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import { getUserId } from "./identity";
|
||||||
|
import { renderApp } from "./render";
|
||||||
|
import { addOption, castVote, createViewModel } from "./state";
|
||||||
|
import { initSync } from "./sync";
|
||||||
|
|
||||||
|
const ROOM_PARAM = "room";
|
||||||
|
|
||||||
|
function createRoomId() {
|
||||||
|
const seed = typeof crypto.randomUUID === "function"
|
||||||
|
? crypto.randomUUID().slice(0, 8)
|
||||||
|
: Math.random().toString(36).slice(2, 10);
|
||||||
|
|
||||||
|
return `poll-${seed}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ensureRoomId() {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
let roomId = url.searchParams.get(ROOM_PARAM)?.trim();
|
||||||
|
|
||||||
|
if (!roomId) {
|
||||||
|
roomId = createRoomId();
|
||||||
|
url.searchParams.set(ROOM_PARAM, roomId);
|
||||||
|
window.history.replaceState({}, "", url);
|
||||||
|
}
|
||||||
|
|
||||||
|
return roomId;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initApp(container: HTMLElement) {
|
||||||
|
const roomId = ensureRoomId();
|
||||||
|
const userId = getUserId();
|
||||||
|
const sync = initSync(roomId);
|
||||||
|
let feedbackMessage = "Ready to collaborate.";
|
||||||
|
let feedbackTimer: number | undefined;
|
||||||
|
|
||||||
|
const setFeedbackMessage = (message: string) => {
|
||||||
|
feedbackMessage = message;
|
||||||
|
render();
|
||||||
|
|
||||||
|
if (feedbackTimer) {
|
||||||
|
window.clearTimeout(feedbackTimer);
|
||||||
|
}
|
||||||
|
|
||||||
|
feedbackTimer = window.setTimeout(() => {
|
||||||
|
feedbackMessage = "Ready to collaborate.";
|
||||||
|
render();
|
||||||
|
}, 2400);
|
||||||
|
};
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const viewModel = createViewModel({
|
||||||
|
meta: sync.meta,
|
||||||
|
options: sync.options,
|
||||||
|
votes: sync.votes,
|
||||||
|
roomId,
|
||||||
|
shareUrl: window.location.href,
|
||||||
|
connectionStatus: sync.getConnectionStatus(),
|
||||||
|
userId,
|
||||||
|
});
|
||||||
|
|
||||||
|
renderApp(container, viewModel, feedbackMessage, {
|
||||||
|
onSubmitOption: (label) => {
|
||||||
|
const result = addOption(sync.options, label, userId);
|
||||||
|
if (!result.ok) {
|
||||||
|
setFeedbackMessage(result.error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setFeedbackMessage("Option added and syncing.");
|
||||||
|
},
|
||||||
|
onVote: (optionId) => {
|
||||||
|
castVote(sync.votes, userId, optionId);
|
||||||
|
setFeedbackMessage("Vote updated.");
|
||||||
|
},
|
||||||
|
onCopyLink: async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(window.location.href);
|
||||||
|
setFeedbackMessage("Room link copied.");
|
||||||
|
} catch {
|
||||||
|
setFeedbackMessage("Could not copy the link in this browser.");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const rerender = () => render();
|
||||||
|
const observe = () => rerender();
|
||||||
|
|
||||||
|
sync.doc.on("update", observe);
|
||||||
|
sync.persistence.once("synced", rerender);
|
||||||
|
sync.provider.on("status", rerender);
|
||||||
|
window.addEventListener("online", rerender);
|
||||||
|
window.addEventListener("offline", rerender);
|
||||||
|
|
||||||
|
render();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (feedbackTimer) {
|
||||||
|
window.clearTimeout(feedbackTimer);
|
||||||
|
}
|
||||||
|
sync.doc.off("update", observe);
|
||||||
|
sync.provider.off("status", rerender);
|
||||||
|
window.removeEventListener("online", rerender);
|
||||||
|
window.removeEventListener("offline", rerender);
|
||||||
|
sync.destroy();
|
||||||
|
};
|
||||||
|
}
|
||||||
20
src/identity.ts
Normal file
20
src/identity.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
const USER_ID_KEY = "p2p-poll:user-id";
|
||||||
|
|
||||||
|
function createUserId() {
|
||||||
|
if (typeof crypto.randomUUID === "function") {
|
||||||
|
return crypto.randomUUID();
|
||||||
|
}
|
||||||
|
|
||||||
|
return `user-${Math.random().toString(36).slice(2, 10)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUserId() {
|
||||||
|
const existing = localStorage.getItem(USER_ID_KEY);
|
||||||
|
if (existing) {
|
||||||
|
return existing;
|
||||||
|
}
|
||||||
|
|
||||||
|
const next = createUserId();
|
||||||
|
localStorage.setItem(USER_ID_KEY, next);
|
||||||
|
return next;
|
||||||
|
}
|
||||||
11
src/main.ts
Normal file
11
src/main.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
import { initApp } from "./app";
|
||||||
|
|
||||||
|
const container = document.querySelector<HTMLElement>("#app");
|
||||||
|
|
||||||
|
if (!container) {
|
||||||
|
throw new Error("App container not found.");
|
||||||
|
}
|
||||||
|
|
||||||
|
initApp(container);
|
||||||
131
src/render.ts
Normal file
131
src/render.ts
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
import type { PollViewModel } from "./state";
|
||||||
|
|
||||||
|
interface RenderActions {
|
||||||
|
onSubmitOption: (label: string) => void;
|
||||||
|
onVote: (optionId: string) => void;
|
||||||
|
onCopyLink: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(value: string) {
|
||||||
|
return value
|
||||||
|
.replaceAll("&", "&")
|
||||||
|
.replaceAll("<", "<")
|
||||||
|
.replaceAll(">", ">")
|
||||||
|
.replaceAll('"', """)
|
||||||
|
.replaceAll("'", "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function renderApp(
|
||||||
|
container: HTMLElement,
|
||||||
|
viewModel: PollViewModel,
|
||||||
|
feedbackMessage: string,
|
||||||
|
actions: RenderActions,
|
||||||
|
) {
|
||||||
|
const optionMarkup = viewModel.options.length
|
||||||
|
? viewModel.options
|
||||||
|
.map((option) => {
|
||||||
|
const buttonLabel = option.isSelectedByMe ? "Selected" : "Vote";
|
||||||
|
const selectedClass = option.isSelectedByMe ? "option-card selected" : "option-card";
|
||||||
|
|
||||||
|
return `
|
||||||
|
<li class="${selectedClass}">
|
||||||
|
<div class="option-main">
|
||||||
|
<div>
|
||||||
|
<p class="option-label">${escapeHtml(option.label)}</p>
|
||||||
|
<p class="option-meta">${option.voteCount} vote${option.voteCount === 1 ? "" : "s"}</p>
|
||||||
|
</div>
|
||||||
|
<button class="vote-button" data-option-id="${option.id}">
|
||||||
|
${buttonLabel}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
})
|
||||||
|
.join("")
|
||||||
|
: `
|
||||||
|
<li class="empty-state">
|
||||||
|
No options yet. Add the first one and it will sync to everyone in this room.
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const statusClass = `status-pill ${viewModel.connectionStatus}`;
|
||||||
|
const myVoteLabel = viewModel.myVoteOptionId
|
||||||
|
? "Your vote is currently synced."
|
||||||
|
: "You have not voted yet.";
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<main class="shell">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-copy">
|
||||||
|
<p class="eyebrow">Peer-to-peer room</p>
|
||||||
|
<h1>${escapeHtml(viewModel.title)}</h1>
|
||||||
|
<p class="hero-text">
|
||||||
|
Share the room link, add options, and vote live without a central app server storing poll state.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-meta">
|
||||||
|
<span class="${statusClass}">${viewModel.connectionStatus}</span>
|
||||||
|
<p class="room-label">Room: <code>${escapeHtml(viewModel.roomId)}</code></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel share-panel">
|
||||||
|
<label class="field-label" for="share-url">Share this room</label>
|
||||||
|
<div class="share-row">
|
||||||
|
<input id="share-url" class="share-input" type="text" readonly value="${escapeHtml(viewModel.shareUrl)}" />
|
||||||
|
<button id="copy-link-button" class="secondary-button" type="button">Copy link</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<div class="section-header">
|
||||||
|
<div>
|
||||||
|
<h2>Options</h2>
|
||||||
|
<p>${myVoteLabel}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="options-list">${optionMarkup}</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<h2>Add an option</h2>
|
||||||
|
<form id="add-option-form" class="option-form">
|
||||||
|
<input
|
||||||
|
id="option-input"
|
||||||
|
name="option"
|
||||||
|
type="text"
|
||||||
|
maxlength="80"
|
||||||
|
placeholder="Add an option"
|
||||||
|
autocomplete="off"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button class="primary-button" type="submit">Add option</button>
|
||||||
|
</form>
|
||||||
|
<p class="feedback" aria-live="polite">${escapeHtml(feedbackMessage)}</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const addOptionForm = container.querySelector<HTMLFormElement>("#add-option-form");
|
||||||
|
const optionInput = container.querySelector<HTMLInputElement>("#option-input");
|
||||||
|
const copyLinkButton = container.querySelector<HTMLButtonElement>("#copy-link-button");
|
||||||
|
|
||||||
|
addOptionForm?.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const label = optionInput?.value ?? "";
|
||||||
|
actions.onSubmitOption(label);
|
||||||
|
});
|
||||||
|
|
||||||
|
copyLinkButton?.addEventListener("click", () => {
|
||||||
|
actions.onCopyLink();
|
||||||
|
});
|
||||||
|
|
||||||
|
container.querySelectorAll<HTMLButtonElement>("[data-option-id]").forEach((button) => {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const optionId = button.dataset.optionId;
|
||||||
|
if (optionId) {
|
||||||
|
actions.onVote(optionId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
124
src/state.ts
Normal file
124
src/state.ts
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
import * as Y from "yjs";
|
||||||
|
|
||||||
|
export const DEFAULT_POLL_TITLE = "Shared Poll";
|
||||||
|
|
||||||
|
export type ConnectionStatus = "connecting" | "connected" | "offline";
|
||||||
|
|
||||||
|
export interface OptionRecord {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
createdAt: number;
|
||||||
|
createdBy: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PollOptionViewModel extends OptionRecord {
|
||||||
|
voteCount: number;
|
||||||
|
isSelectedByMe: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PollViewModel {
|
||||||
|
title: string;
|
||||||
|
roomId: string;
|
||||||
|
shareUrl: string;
|
||||||
|
connectionStatus: ConnectionStatus;
|
||||||
|
options: PollOptionViewModel[];
|
||||||
|
myVoteOptionId: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const META_KEY_TITLE = "title";
|
||||||
|
|
||||||
|
function createOptionId() {
|
||||||
|
if (typeof crypto.randomUUID === "function") {
|
||||||
|
return crypto.randomUUID();
|
||||||
|
}
|
||||||
|
|
||||||
|
return `option-${Math.random().toString(36).slice(2, 10)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeLabel(label: string) {
|
||||||
|
return label.trim().replace(/\s+/g, " ");
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPollTitle(meta: Y.Map<string>) {
|
||||||
|
return meta.get(META_KEY_TITLE) ?? DEFAULT_POLL_TITLE;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ensurePollInitialized(meta: Y.Map<string>) {
|
||||||
|
if (!meta.has(META_KEY_TITLE)) {
|
||||||
|
meta.set(META_KEY_TITLE, DEFAULT_POLL_TITLE);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function addOption(
|
||||||
|
options: Y.Map<OptionRecord>,
|
||||||
|
rawLabel: string,
|
||||||
|
userId: string,
|
||||||
|
) {
|
||||||
|
const label = normalizeLabel(rawLabel);
|
||||||
|
if (!label) {
|
||||||
|
return { ok: false as const, error: "Option label cannot be empty." };
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizedTarget = label.toLocaleLowerCase();
|
||||||
|
const duplicate = Array.from(options.values()).some(
|
||||||
|
(option) => option.label.trim().toLocaleLowerCase() === normalizedTarget,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (duplicate) {
|
||||||
|
return { ok: false as const, error: "That option already exists." };
|
||||||
|
}
|
||||||
|
|
||||||
|
const option: OptionRecord = {
|
||||||
|
id: createOptionId(),
|
||||||
|
label,
|
||||||
|
createdAt: Date.now(),
|
||||||
|
createdBy: userId,
|
||||||
|
};
|
||||||
|
|
||||||
|
options.set(option.id, option);
|
||||||
|
return { ok: true as const, optionId: option.id };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function castVote(votes: Y.Map<string>, userId: string, optionId: string) {
|
||||||
|
votes.set(userId, optionId);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createViewModel(params: {
|
||||||
|
meta: Y.Map<string>;
|
||||||
|
options: Y.Map<OptionRecord>;
|
||||||
|
votes: Y.Map<string>;
|
||||||
|
roomId: string;
|
||||||
|
shareUrl: string;
|
||||||
|
connectionStatus: ConnectionStatus;
|
||||||
|
userId: string;
|
||||||
|
}): PollViewModel {
|
||||||
|
const { meta, options, votes, roomId, shareUrl, connectionStatus, userId } =
|
||||||
|
params;
|
||||||
|
|
||||||
|
const tally = new Map<string, number>();
|
||||||
|
for (const optionId of votes.values()) {
|
||||||
|
tally.set(optionId, (tally.get(optionId) ?? 0) + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const myVoteOptionId = votes.get(userId) ?? null;
|
||||||
|
const sortedOptions = Array.from(options.values()).sort((left, right) => {
|
||||||
|
if (left.createdAt !== right.createdAt) {
|
||||||
|
return left.createdAt - right.createdAt;
|
||||||
|
}
|
||||||
|
|
||||||
|
return left.label.localeCompare(right.label);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: getPollTitle(meta),
|
||||||
|
roomId,
|
||||||
|
shareUrl,
|
||||||
|
connectionStatus,
|
||||||
|
myVoteOptionId,
|
||||||
|
options: sortedOptions.map((option) => ({
|
||||||
|
...option,
|
||||||
|
voteCount: tally.get(option.id) ?? 0,
|
||||||
|
isSelectedByMe: myVoteOptionId === option.id,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
}
|
||||||
256
src/styles.css
Normal file
256
src/styles.css
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
:root {
|
||||||
|
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||||
|
color: #132238;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(255, 190, 120, 0.55), transparent 28%),
|
||||||
|
radial-gradient(circle at top right, rgba(86, 201, 166, 0.3), transparent 24%),
|
||||||
|
linear-gradient(180deg, #f9f4e8 0%, #f4efe6 48%, #ece5d8 100%);
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
width: min(920px, calc(100% - 2rem));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy h1 {
|
||||||
|
margin: 0.15rem 0 0.5rem;
|
||||||
|
font-size: clamp(2.4rem, 6vw, 4rem);
|
||||||
|
line-height: 0.95;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text,
|
||||||
|
.section-header p,
|
||||||
|
.feedback,
|
||||||
|
.option-meta,
|
||||||
|
.room-label {
|
||||||
|
color: #4a5a6a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #915f00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
min-width: 15rem;
|
||||||
|
padding: 1rem 1.1rem;
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
background: rgba(255, 255, 255, 0.68);
|
||||||
|
border: 1px solid rgba(19, 34, 56, 0.08);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill.connected {
|
||||||
|
background: rgba(86, 201, 166, 0.18);
|
||||||
|
color: #135d43;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill.connecting {
|
||||||
|
background: rgba(255, 190, 120, 0.22);
|
||||||
|
color: #8c5300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pill.offline {
|
||||||
|
background: rgba(219, 82, 82, 0.16);
|
||||||
|
color: #8f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: 1.3rem;
|
||||||
|
background: rgba(255, 255, 255, 0.78);
|
||||||
|
border: 1px solid rgba(19, 34, 56, 0.08);
|
||||||
|
box-shadow: 0 14px 40px rgba(19, 34, 56, 0.08);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel h2 {
|
||||||
|
margin: 0 0 0.45rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-row,
|
||||||
|
.option-form,
|
||||||
|
.option-main {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-input,
|
||||||
|
.option-form input {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
border-radius: 0.95rem;
|
||||||
|
border: 1px solid rgba(19, 34, 56, 0.14);
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
color: #132238;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-input:focus,
|
||||||
|
.option-form input:focus {
|
||||||
|
outline: 2px solid rgba(255, 190, 120, 0.65);
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button,
|
||||||
|
.secondary-button,
|
||||||
|
.vote-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.95rem;
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button,
|
||||||
|
.vote-button {
|
||||||
|
background: #132238;
|
||||||
|
color: #f9f4e8;
|
||||||
|
box-shadow: 0 10px 20px rgba(19, 34, 56, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button {
|
||||||
|
background: rgba(19, 34, 56, 0.08);
|
||||||
|
color: #132238;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover,
|
||||||
|
.secondary-button:hover,
|
||||||
|
.vote-button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 1rem 0 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-card,
|
||||||
|
.empty-state {
|
||||||
|
border-radius: 1.1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(247, 244, 236, 0.95);
|
||||||
|
border: 1px solid rgba(19, 34, 56, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-card.selected {
|
||||||
|
border-color: rgba(86, 201, 166, 0.85);
|
||||||
|
background: rgba(232, 249, 242, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-main {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-meta,
|
||||||
|
.feedback,
|
||||||
|
.room-label {
|
||||||
|
margin: 0.35rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feedback {
|
||||||
|
min-height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.shell {
|
||||||
|
width: min(100% - 1rem, 920px);
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero,
|
||||||
|
.share-row,
|
||||||
|
.option-form,
|
||||||
|
.option-main,
|
||||||
|
.section-header {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button,
|
||||||
|
.secondary-button,
|
||||||
|
.vote-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
64
src/sync.ts
Normal file
64
src/sync.ts
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import { IndexeddbPersistence } from "y-indexeddb";
|
||||||
|
import { WebrtcProvider } from "y-webrtc";
|
||||||
|
import * as Y from "yjs";
|
||||||
|
|
||||||
|
import { type ConnectionStatus, ensurePollInitialized, type OptionRecord } from "./state";
|
||||||
|
|
||||||
|
export interface AppSync {
|
||||||
|
doc: Y.Doc;
|
||||||
|
meta: Y.Map<string>;
|
||||||
|
options: Y.Map<OptionRecord>;
|
||||||
|
votes: Y.Map<string>;
|
||||||
|
provider: WebrtcProvider;
|
||||||
|
persistence: IndexeddbPersistence;
|
||||||
|
getConnectionStatus: () => ConnectionStatus;
|
||||||
|
destroy: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initSync(roomId: string): AppSync {
|
||||||
|
const doc = new Y.Doc();
|
||||||
|
const meta = doc.getMap<string>("poll-meta");
|
||||||
|
const options = doc.getMap<OptionRecord>("poll-options");
|
||||||
|
const votes = doc.getMap<string>("poll-votes");
|
||||||
|
|
||||||
|
ensurePollInitialized(meta);
|
||||||
|
|
||||||
|
let connectionStatus: ConnectionStatus = navigator.onLine ? "connecting" : "offline";
|
||||||
|
const provider = new WebrtcProvider(roomId, doc);
|
||||||
|
const persistence = new IndexeddbPersistence(roomId, doc);
|
||||||
|
|
||||||
|
const syncConnectionStatus = (status: ConnectionStatus) => {
|
||||||
|
connectionStatus = navigator.onLine ? status : "offline";
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOnline = () => {
|
||||||
|
syncConnectionStatus(provider.connected ? "connected" : "connecting");
|
||||||
|
};
|
||||||
|
const handleOffline = () => {
|
||||||
|
connectionStatus = "offline";
|
||||||
|
};
|
||||||
|
|
||||||
|
provider.on("status", (event: { connected: boolean }) => {
|
||||||
|
syncConnectionStatus(event.connected ? "connected" : "connecting");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("online", handleOnline);
|
||||||
|
window.addEventListener("offline", handleOffline);
|
||||||
|
|
||||||
|
return {
|
||||||
|
doc,
|
||||||
|
meta,
|
||||||
|
options,
|
||||||
|
votes,
|
||||||
|
provider,
|
||||||
|
persistence,
|
||||||
|
getConnectionStatus: () => connectionStatus,
|
||||||
|
destroy: () => {
|
||||||
|
window.removeEventListener("online", handleOnline);
|
||||||
|
window.removeEventListener("offline", handleOffline);
|
||||||
|
persistence.destroy();
|
||||||
|
provider.destroy();
|
||||||
|
doc.destroy();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,34 +1,15 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2017",
|
"target": "ES2022",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"module": "ESNext",
|
||||||
"allowJs": true,
|
"moduleResolution": "Bundler",
|
||||||
"skipLibCheck": true,
|
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"module": "esnext",
|
"skipLibCheck": true,
|
||||||
"moduleResolution": "bundler",
|
"allowSyntheticDefaultImports": true,
|
||||||
"resolveJsonModule": true,
|
"useDefineForClassFields": true
|
||||||
"isolatedModules": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"incremental": true,
|
|
||||||
"plugins": [
|
|
||||||
{
|
|
||||||
"name": "next"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./*"]
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["src"]
|
||||||
"next-env.d.ts",
|
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx",
|
|
||||||
".next/types/**/*.ts",
|
|
||||||
".next/dev/types/**/*.ts",
|
|
||||||
"**/*.mts"
|
|
||||||
],
|
|
||||||
"exclude": ["node_modules"]
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user