next-ws 0.1.3 → 0.1.4

package/README.md

@@ -10,9 +10,11 @@
     <br>
     <a href="https://github.com/apteryxxyz/next-ws"><img alt="next-ws repo stars" src="https://img.shields.io/github/stars/apteryxxyz/next-ws?style=social"></a>
     <a href="https://github.com/apteryxxyz"><img alt="apteryxxyz followers" src="https://img.shields.io/github/followers/apteryxxyz?style=social"></a>
-    <a href="https://discord.gg/vZQbMhwsKY"><img src="https://discordapp.com/api/guilds/829836158007115806/widget.png?style=shield" alt="Discord Banner 2"/></a>
+    <a href="https://discord.gg/vZQbMhwsKY"><img src="https://discordapp.com/api/guilds/829836158007115806/widget.png?style=shield" alt="discord shield"/></a>
 </div>
 
+---
+
 ## 🤔 About
 
 Next WS (`next-ws`) is an advanced Next.js **13** plugin designed to seamlessly integrate WebSocket server functionality into API routes within the **app directory**. With Next WS, you no longer require a separate server for WebSocket functionality.
@@ -21,6 +23,8 @@ It's important to note that this module can only be used when working with a ser
 
 This module is inspired by the now outdated `next-plugin-websocket`, if you are using an older version of Next.js, that module may work for you.
 
+---
+
 ## 🏓 Table of Contents
 
 - [🤔 About](#-about)
@@ -30,7 +34,7 @@ This module is inspired by the now outdated `next-plugin-websocket`, if you are
 - [🌀 Example](#-example)
   - [📁 Server](#-server)
   - [📁 Client](#-client)
-
+  
 ---
 
 ## 📦 Installation
@@ -61,6 +65,7 @@ The `SOCKET` function receives two arguments: the WebSocket client and the HTTP
 export function SOCKET(
     client: import('ws').WebSocket,
     request: import('http').IncomingMessage,
+    server: import('ws').WebSocketServer,
 ) {
     // ...
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ws",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "Add support for WebSockets in Next.js 13 app directory",
     "packageManager": "yarn@3.6.0",
     "license": "MIT",
@@ -13,18 +13,18 @@
     "bugs": {
         "url": "https://github.com/apteryxxyz/next-ws/issues"
     },
-    "files": ["{client,server,patch}.{js,d.ts}"],
+    "files": ["*.js", "*.d.ts"],
     "scripts": {
         "build": "tsc",
-        "clean": "rimraf ./*.{js,d.ts,js.map}",
+        "clean": "rimraf client server common",
         "lint": "eslint --ext .ts,.tsx src",
         "format": "prettier --write src/**/*.{ts,tsx} && eslint --fix --ext .ts,.tsx src/",
-        "postinstall": "node -e \"try{require('./patch.js')}catch{}\""
+        "postinstall": "node -e \"try{require('./common/patch.js')}catch{}\""
     },
     "dependencies": {
-        "@babel/generator": "^7.22.3",
-        "@babel/parser": "^7.22.4",
-        "@babel/template": "^7.21.9"
+        "@babel/generator": "^7.22.5",
+        "@babel/parser": "^7.22.5",
+        "@babel/template": "^7.22.5"
     },
     "peerDependencies": {
         "next": "*",
@@ -44,7 +44,7 @@
         "@typescript-eslint/eslint-plugin": "^5.59.8",
         "@typescript-eslint/parser": "^5.59.8",
         "eslint": "^8.41.0",
-        "eslint-config-apteryx": "^2.1.6",
+        "eslint-config-apteryx": "^2.1.7",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsdoc": "^46.1.0",

package/client.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-declare const WebSocketContext: import("react").Context<WebSocket | null>;
-/**
- * Provides a WebSocket instance to its children via context,
- * allowing for easy access to the websocket from anywhere in the app
- * @param props WebSocket parameters and children
- * @returns JSX Element
- */
-declare function WebSocketProvider({ children, url, protocols, }: {
-    children: React.ReactNode;
-    url: string;
-    protocols?: string[] | string;
-}): import("react/jsx-runtime").JSX.Element;
-declare const WebSocketConsumer: import("react").Consumer<WebSocket | null>;
-/**
- * Access the websocket from anywhere in the app, so long as it's wrapped in a WebSocketProvider
- * @returns WebSocket on the client, null on the server
- */
-declare function useWebSocket(): WebSocket | null;
-export { WebSocketContext, WebSocketProvider, WebSocketConsumer, useWebSocket };

package/client.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWebSocket = exports.WebSocketConsumer = exports.WebSocketProvider = exports.WebSocketContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const WebSocketContext = (0, react_1.createContext)(null);
-exports.WebSocketContext = WebSocketContext;
-WebSocketContext.displayName = 'WebSocketContext';
-/**
- * Provides a WebSocket instance to its children via context,
- * allowing for easy access to the websocket from anywhere in the app
- * @param props WebSocket parameters and children
- * @returns JSX Element
- */
-function WebSocketProvider({ children, url, protocols, }) {
-    const isBrowser = typeof window !== 'undefined';
-    const ws = (0, react_1.useMemo)(() => (isBrowser ? new WebSocket(url, protocols) : null), [isBrowser, url, protocols]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            if (ws && ws.readyState !== WebSocket.CLOSED)
-                ws.close();
-        };
-    }, []);
-    return (0, jsx_runtime_1.jsx)(WebSocketContext.Provider, Object.assign({ value: ws }, { children: children }));
-}
-exports.WebSocketProvider = WebSocketProvider;
-const WebSocketConsumer = WebSocketContext.Consumer;
-exports.WebSocketConsumer = WebSocketConsumer;
-/**
- * Access the websocket from anywhere in the app, so long as it's wrapped in a WebSocketProvider
- * @returns WebSocket on the client, null on the server
- */
-function useWebSocket() {
-    const context = (0, react_1.useContext)(WebSocketContext);
-    if (context === undefined)
-        throw new Error('useWebSocket must be used within a WebSocketProvider');
-    return context;
-}
-exports.useWebSocket = useWebSocket;
-//# sourceMappingURL=client.js.map

package/patch.d.ts

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

package/patch.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable no-template-curly-in-string */
-const fs = tslib_1.__importStar(require("node:fs/promises"));
-const generator_1 = tslib_1.__importDefault(require("@babel/generator"));
-const parser = tslib_1.__importStar(require("@babel/parser"));
-const template_1 = tslib_1.__importDefault(require("@babel/template"));
-void main();
-async function main() {
-    await patchNextNodeServer();
-    await patchNextTypesPlugin();
-}
-const mod = template_1.default.expression.ast `require("next-ws/server")`;
-// Add `require('next-ws/server').hookNextNodeServer.call(this)` to the
-// constructor of `NextNodeServer` in `next/dist/server/next-server.js`
-async function patchNextNodeServer() {
-    const filePath = require.resolve('next/dist/server/next-server');
-    const content = await fs.readFile(filePath, 'utf8');
-    const ast = parser.parse(content);
-    const classDeclaration = ast.program.body.find(node => node.type === 'ClassDeclaration' &&
-        node.id.name === 'NextNodeServer');
-    if (!classDeclaration)
-        return;
-    const constructorMethod = classDeclaration.body.body.find(node => node.type === 'ClassMethod' && node.kind === 'constructor');
-    if (!constructorMethod)
-        return;
-    const statement = template_1.default.statement
-        .ast `${mod}.hookNextNodeServer.call(this)`;
-    const expression = (0, generator_1.default)(statement).code;
-    // Ensure the statement is not already in the constructor
-    const existingStatement = constructorMethod.body.body //
-        .some(state => (0, generator_1.default)(state).code === expression);
-    if (!existingStatement)
-        constructorMethod.body.body.push(statement);
-    await fs.writeFile(filePath, (0, generator_1.default)(ast).code);
-}
-// Add `SOCKET?: Function` to the page module interface check field thing in
-// `next/dist/build/webpack/plugins/next-types-plugin.js`
-async function patchNextTypesPlugin() {
-    const filePath = require.resolve('next/dist/build/webpack/plugins/next-types-plugin.js');
-    const content = await fs.readFile(filePath, 'utf8');
-    if (content.includes('SOCKET?: Function'))
-        return;
-    const toFind = '.map((method)=>`${method}?: Function`).join("\\n  ")';
-    const replaceWith = `${toFind} + "; SOCKET?: Function"`;
-    const newContent = content.replace(toFind, replaceWith);
-    await fs.writeFile(filePath, newContent);
-}
-//# sourceMappingURL=patch.js.map

package/server.d.ts

@@ -1,3 +0,0 @@
-import NextNodeServer from 'next/dist/server/next-server';
-declare function hookNextNodeServer(this: NextNodeServer): void;
-export { hookNextNodeServer };

package/server.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hookNextNodeServer = void 0;
-const tslib_1 = require("tslib");
-const node_http_1 = require("node:http");
-const node_path_1 = tslib_1.__importDefault(require("node:path"));
-const Log = tslib_1.__importStar(require("next/dist/build/output/log"));
-const next_server_1 = tslib_1.__importDefault(require("next/dist/server/next-server"));
-const is_dynamic_1 = require("next/dist/shared/lib/router/utils/is-dynamic");
-const ws_1 = require("ws");
-const openSockets = new Set();
-let existingWebSocketServer;
-function hookNextNodeServer() {
-    var _a;
-    if (!this || !(this instanceof next_server_1.default))
-        throw new Error("[next-ws] 'this' of hookNextNodeServer is not a NextNodeServer");
-    const server = (_a = this.serverOptions) === null || _a === void 0 ? void 0 : _a.httpServer;
-    if (!server || !(server instanceof node_http_1.Server))
-        throw new Error("[next-ws] Failed to find NextNodeServer's HTTP server");
-    if (existingWebSocketServer)
-        return;
-    const wss = new ws_1.WebSocketServer({ noServer: true });
-    Log.ready('[next-ws] loaded successfully');
-    existingWebSocketServer = wss;
-    server.on('upgrade', async (request, socket, head) => {
-        var _a;
-        const url = new URL((_a = request.url) !== null && _a !== void 0 ? _a : '', 'http://next-ws');
-        // Ignore requests to Next.js' own internal files
-        if (url.pathname.startsWith('/_next'))
-            return;
-        // Attempt to find a matching page
-        const pathname = await isPageFound.call(this, url.pathname);
-        if (!pathname)
-            return;
-        const internalPathname = node_path_1.default
-            .join(pathname, 'route')
-            .replaceAll(node_path_1.default.sep, '/');
-        // Ensure the page is built
-        // @ts-expect-error HotReloader is private
-        await this.hotReloader.ensurePage({
-            page: internalPathname,
-            clientOnly: false,
-        });
-        let builtPagePath;
-        try {
-            builtPagePath = this.getPagePath(internalPathname);
-        }
-        catch (_b) {
-            return Log.error(`[next-ws] failed to get page ${pathname}`);
-        }
-        const pageModule = await require(builtPagePath);
-        // Equates to the exported "SOCKET" function in the route file
-        const socketHandler = pageModule.routeModule.userland.SOCKET;
-        if (!socketHandler || typeof socketHandler !== 'function')
-            return Log.error(`[next-ws] failed to find SOCKET handler for page ${pathname}`);
-        wss.handleUpgrade(request, socket, head, socketHandler);
-        if (this.serverOptions.dev) {
-            openSockets.add(socket);
-            socket.on('close', () => openSockets.delete(socket));
-        }
-    });
-}
-exports.hookNextNodeServer = hookNextNodeServer;
-async function isPageFound(pathname) {
-    var _a;
-    if (!(0, is_dynamic_1.isDynamicRoute)(pathname) && (await this.hasPage(pathname)))
-        return pathname;
-    for (const route of (_a = this.dynamicRoutes) !== null && _a !== void 0 ? _a : []) {
-        const params = route.match(pathname) || undefined;
-        if (params)
-            return route.page;
-    }
-    return false;
-}
-//# sourceMappingURL=server.js.map