docs(changeset): experimental websocket support (doesn't work yet, wa…

…iting on dependencies)

.changeset/tough-schools-sparkle.md

@@ -0,0 +1,5 @@
+---
+"vinxi": patch
+---
+
+experimental websocket support (doesn't work yet, waiting on dependencies)

examples/vanilla/partyroom/.gitignore

@@ -0,0 +1 @@
+.vercel

examples/vanilla/partyroom/CHANGELOG.md

@@ -0,0 +1,64 @@
+# example-vanilla
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [fd06048]
+- Updated dependencies [0f14555]
+- Updated dependencies [82267c5]
+  - vinxi@0.0.30
+  - @vinxi/plugin-references@0.0.20
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [8058084]
+  - vinxi@0.0.29
+  - @vinxi/plugin-references@0.0.19
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [b934e84]
+- Updated dependencies [17693dc]
+- Updated dependencies [d6305b8]
+- Updated dependencies [cb91c48]
+- Updated dependencies [085116d]
+- Updated dependencies [f1ee5b8]
+  - vinxi@0.0.28
+  - @vinxi/plugin-references@0.0.18
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [7803042]
+  - vinxi@0.0.27
+  - @vinxi/plugin-references@0.0.17
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [2b17e0d]
+  - vinxi@0.0.26
+  - @vinxi/plugin-references@0.0.16
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [552d8ca]
+  - vinxi@0.0.25
+  - @vinxi/plugin-references@0.0.15
+
+## null
+
+### Patch Changes
+
+- Updated dependencies [47abc3c]
+  - @vinxi/plugin-references@0.0.14
+  - vinxi@0.0.24

examples/vanilla/partyroom/app.config.js

@@ -0,0 +1,35 @@
+import { references } from "@vinxi/plugin-references";
+import { createApp } from "vinxi";
+
+export default createApp({
+	server: {
+		plugins: [references.serverPlugin],
+		virtual: {
+			[references.serverPlugin]: references.serverPluginModule(),
+		},
+	},
+	routers: [
+		{
+			name: "public",
+			mode: "static",
+			dir: "./public",
+		},
+		{
+			name: "client",
+			mode: "spa",
+			handler: "./index.html",
+			target: "browser",
+			plugins: () => [references.clientRouterPlugin()],
+		},
+		{
+			name: "party",
+			base: "/party",
+			mode: "handler",
+			handler: "./app/party.ts",
+			target: "server",
+		},
+		references.serverRouter({
+			middleware: "./app/middleware.tsx",
+		}),
+	],
+});

examples/vanilla/partyroom/app/actions.tsx

@@ -0,0 +1,12 @@
+"use server";
+
+let store = { count: 0 };
+export function sayHello() {
+	console.log("Hello World");
+	store.count++;
+	return store.count;
+}
+
+export function getStore() {
+	return store.count;
+}

examples/vanilla/partyroom/app/client.tsx

@@ -0,0 +1,26 @@
+import { sayHello } from "./actions";
+import "./style.css";
+
+console.log(await sayHello());
+console.log("Hello world!");
+
+const ws = new WebSocket(`ws://${window.location.host}/party`);
+
+await new Promise((resolve) => {
+	ws.addEventListener("open", resolve);
+});
+
+ws.addEventListener("message", (event) => {
+	document.getElementById("app").innerHTML += `<p>${event.data}</p>`;
+});
+
+document.getElementById("form").onsubmit = (event) => {
+	event.preventDefault();
+	const input = document.getElementById("input") as HTMLInputElement;
+	ws.send(input.value);
+	input.value = "";
+};
+
+ws.send("Hello world!");
+
+console.log(await fetch("/party").then((res) => res.text()));

examples/vanilla/partyroom/app/middleware.tsx

@@ -0,0 +1,10 @@
+import { defineMiddleware, getContext, setContext } from "vinxi/runtime/server";
+
+export default defineMiddleware({
+	onRequest: (event) => {
+		setContext(event, "help", { foo: "bar" });
+	},
+	onBeforeResponse: (event) => {
+		console.log(getContext(event, "help"));
+	},
+});

examples/vanilla/partyroom/app/party.ts

@@ -0,0 +1,30 @@
+import { partyHandler } from "vinxi/runtime/party";
+
+export default partyHandler({
+	onMessage(party, message, connection) {
+		// Broadcast message to all other members
+		party.broadcast(new TextDecoder().decode(message), [connection.id]);
+	},
+
+	onConnect(party, connection) {
+		party.broadcast(
+			JSON.stringify({
+				type: "members",
+				conns: [...party.getConnections()].map((conn) => conn.id),
+			}),
+		);
+	},
+
+	onClose(party, connection) {
+		party.broadcast(
+			JSON.stringify({
+				type: "members",
+				conns: [...party.getConnections()].map((conn) => conn.id),
+			}),
+			[connection.id],
+		);
+	},
+	onRequest(party, req) {
+		return new Response("Not found", { status: 501 });
+	},
+});

examples/vanilla/partyroom/app/style.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  color: red;
+}

examples/vanilla/partyroom/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+		<link rel="icon" href="/favicon.ico" />
+	</head>
+	<body>
+		<form id="form"><input id="input" /><button>Submit</button></form>
+		<div id="app"></div>
+		<script src="./app/client.tsx" type="module"></script>
+	</body>
+</html>

examples/vanilla/partyroom/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-vanilla-partyroom",
+  "type": "module",
+  "private": true,
+  "version": null,
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start"
+  },
+  "dependencies": {
+    "@picocss/pico": "^1.5.10",
+    "@vinxi/plugin-references": "0.0.20",
+    "autoprefixer": "^10.4.15",
+    "tailwindcss": "^3.3.3",
+    "vinxi": "0.0.30"
+  }
+}

examples/vanilla/partyroom/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/vanilla/partyroom/tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./app/**/*.tsx", "./app/**/*.ts", "./app/**/*.js"],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};

examples/vanilla/spa/app.config.js

@@ -21,13 +21,6 @@ export default createApp({
 			target: "browser",
 			plugins: () => [references.clientRouterPlugin()],
 		},
-		{
-			name: "ws",
-			base: "/party",
-			mode: "handler",
-			handler: "./app/websocket.ts",
-			target: "server",
-		},
 		references.serverRouter({
 			middleware: "./app/middleware.tsx",
 		}),

examples/vanilla/spa/app/client.tsx

@@ -5,11 +5,4 @@ import "./style.css";
 console.log(await sayHello());
 console.log("Hello world!");
 
-const ws = new WebSocket(`ws://${window.location.host}/party`);
-
-await new Promise((resolve) => {
-	ws.addEventListener("open", resolve);
-});
-ws.send("Hello world!");
-
-console.log(await fetch("/party").then((res) => res.text()));
+document.getElementById("app").innerHTML = `Hello World`;