add rakkas example

Author: nitedani

.npmrc

@@ -0,0 +1,2 @@
+strict-peer-dependencies = false
+shamefully-hoist=true

README.md

@@ -1,4 +1,9 @@
 React hooks for socket.io 4.x
+
+Examples:
+- [Next.js](examples/next/)
+- [Rakkas](examples/rakkas/)
+
 ---
 Usage: <br>
 1. Wrap your components with the provider

examples/rakkas/.eslintrc.cjs

@@ -0,0 +1,14 @@
+require("@rakkasjs/eslint-config/patch");
+
+module.exports = {
+  root: true,
+  extends: ["@rakkasjs"],
+  parserOptions: { tsconfigRootDir: __dirname },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project: [__dirname + "/tsconfig.json"],
+      },
+    },
+  },
+};

examples/rakkas/.prettierrc

@@ -0,0 +1 @@
+{}

examples/rakkas/global.d.ts

@@ -0,0 +1,19 @@
+import type { IncomingMessage, ServerResponse, Server } from "http";
+import type { Server as SocketIOServer } from "socket.io";
+declare module "rakkasjs" {
+  interface ServerSideLocals {
+    io: SocketIOServer;
+  }
+  interface RequestContext {
+    platform: {
+      request: IncomingMessage & {
+        socket: {
+          server: Server & {
+            io?: SocketIOServer;
+          };
+        };
+      };
+      response: ServerResponse;
+    };
+  }
+}

examples/rakkas/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "example-rakkas",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "rakkas",
+    "build": "rakkas build",
+    "start": "node dist/server",
+    "format": "prettier --write --ignore-unknown src",
+    "test": "pnpm test:typecheck && pnpm test:format && pnpm test:lint",
+    "test:typecheck": "tsc -p tsconfig.json --noEmit",
+    "test:format": "prettier --check --ignore-unknown src",
+    "test:lint": "eslint . --ignore-pattern dist"
+  },
+  "devDependencies": {
+    "@rakkasjs/eslint-config": "0.6.19",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "eslint": "^8.34.0",
+    "prettier": "^2.8.4",
+    "rakkasjs": "0.6.19",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.3",
+    "vite-tsconfig-paths": "^4.0.5"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "socket.io": "^4.6.1",
+    "socket.io-react-hook": "*"
+  }
+}

examples/rakkas/src/common-hooks.tsx

@@ -0,0 +1,10 @@
+import { IoProvider } from "socket.io-react-hook";
+import type { CommonHooks } from "rakkasjs";
+
+const hooks: CommonHooks = {
+  wrapApp(app) {
+    return <IoProvider>{app}</IoProvider>;
+  },
+};
+
+export default hooks;

examples/rakkas/src/entry-hattip.ts

@@ -0,0 +1,16 @@
+import { createRequestHandler, RequestContext } from "rakkasjs";
+import { Server } from "socket.io";
+const socketIoMiddleware = (ctx: RequestContext) => {
+  const server = ctx.platform.request.socket.server;
+  if (!server.io) {
+    server.io = new Server(server);
+  }
+  ctx.locals.io = server.io;
+};
+
+export default createRequestHandler({
+  middleware: {
+    beforePages: [socketIoMiddleware],
+    beforeApiRoutes: [socketIoMiddleware],
+  },
+});

examples/rakkas/src/routes/index.page.tsx

@@ -0,0 +1,27 @@
+import { runSSM } from "rakkasjs";
+import { useRef, useState } from "react";
+import { useSocketEvent } from "socket.io-react-hook";
+
+export default function HomePage() {
+  const ref = useRef<HTMLInputElement>(null);
+  const [messages, setMessages] = useState<string[]>([]);
+
+  useSocketEvent<string>("message", {
+    onMessage: (message) => setMessages((messages) => [...messages, message]),
+  });
+
+  const sendMessage = (message: string) =>
+    runSSM((ctx) => ctx.locals.io.emit("message", message));
+
+  return (
+    <div>
+      <button onClick={() => sendMessage(ref.current?.value ?? "")}>
+        Send
+      </button>
+      <input type="text" ref={ref} />
+      {messages.map((message, i) => (
+        <div key={i}>{message}</div>
+      ))}
+    </div>
+  );
+}

examples/rakkas/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "types": ["vite/client"]
+  }
+}

examples/rakkas/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import rakkas from "rakkasjs/vite-plugin";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), rakkas()],
+});