[2.0] Major package upgrades, better TypeScript support, smaller build (#413)

* Add full types for pusher and socketio

* Update index.ts

* enforce importsNotUsedAsValues

* remove .idea files

* major upgrades

* add external Compatible packages not included in the bundle to rollup

* Update package.json

* Styleci

* fix test & styleci

Author: SanderMuller

.eslintrc.js

@@ -3,3 +3,4 @@ dist/
 build/
 npm-debug.log
 package-lock.json
+.idea

.gitignore

@@ -0,0 +1 @@
+20

.nvmrc

@@ -0,0 +1,41 @@
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+
+const config = [
+    {
+        files: [
+            "typings/**/*.ts",
+            "src/**/*.ts"
+        ],
+        languageOptions: {
+            parser: tsParser, // Use the imported parser object
+            parserOptions: {
+                ecmaVersion: "latest",
+                sourceType: "module",
+                project: "./tsconfig.json", // Path to your TypeScript configuration file
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tsPlugin,
+        },
+        rules: {
+            ...tsPlugin.configs.recommended.rules,
+            ...tsPlugin.configs["recommended-requiring-type-checking"].rules,
+            "@typescript-eslint/ban-types": "off",
+            "@typescript-eslint/no-empty-object-type": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-floating-promises": "error",
+            "@typescript-eslint/no-unsafe-argument": "warn",
+            "@typescript-eslint/no-unsafe-assignment": "warn",
+            "@typescript-eslint/no-unsafe-call": "warn",
+            "@typescript-eslint/no-unsafe-function-type": "off",
+            "@typescript-eslint/no-unsafe-member-access": "warn",
+            "@typescript-eslint/no-unsafe-return": "warn",
+            "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+            "no-console": "warn",
+            "prefer-const": "off",
+        },
+    },
+];
+
+export default config;

eslint.config.mjs

@@ -0,0 +1,12 @@
+module.exports = {
+    transform: {
+        "^.+\\.tsx?$": [
+            "ts-jest",
+            {
+                isolatedModules: true
+            }
+        ],
+    },
+    extensionsToTreatAsEsm: [".ts"],
+    testEnvironment: "node",
+};

jest.config.cjs

@@ -1,6 +1,6 @@
 {
     "name": "laravel-echo",
-    "version": "1.19.0",
+    "version": "2.0.0",
     "description": "Laravel Echo library for beautiful Pusher and Socket.IO integration",
     "keywords": [
         "laravel",
@@ -16,41 +16,59 @@
     "author": {
         "name": "Taylor Otwell"
     },
+    "type": "module",
     "main": "dist/echo.common.js",
     "module": "dist/echo.js",
     "types": "dist/echo.d.ts",
     "scripts": {
         "build": "npm run compile && npm run declarations",
-        "compile": "./node_modules/.bin/rollup -c",
-        "declarations": "./node_modules/.bin/tsc --emitDeclarationOnly",
-        "lint": "eslint --ext .js,.ts ./src ./tests",
+        "compile": "rollup -c",
+        "declarations": "tsc --emitDeclarationOnly",
+        "lint": "eslint --config eslint.config.mjs",
         "prepublish": "npm run build",
         "release": "npm run test && standard-version && git push --follow-tags && npm publish",
         "test": "jest"
     },
     "devDependencies": {
-        "@babel/plugin-proposal-decorators": "^7.17.2",
-        "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
-        "@babel/plugin-proposal-function-sent": "^7.16.7",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.7",
-        "@babel/plugin-proposal-throw-expressions": "^7.16.7",
-        "@babel/plugin-transform-object-assign": "^7.16.7",
-        "@babel/preset-env": "^7.16.11",
-        "@rollup/plugin-babel": "^5.3.1",
-        "@types/jest": "^27.4.1",
-        "@types/node": "^18.11.9",
-        "@typescript-eslint/eslint-plugin": "^5.14.0",
-        "@typescript-eslint/parser": "^5.14.0",
-        "eslint": "^8.11.0",
-        "jest": "^27.5.1",
-        "rollup": "^2.70.1",
-        "rollup-plugin-typescript2": "^0.31.2",
+        "@babel/core": "^7.26.7",
+        "@babel/plugin-proposal-decorators": "^7.25.9",
+        "@babel/plugin-proposal-function-sent": "^7.25.9",
+        "@babel/plugin-proposal-throw-expressions": "^7.25.9",
+        "@babel/plugin-transform-export-namespace-from": "^7.25.9",
+        "@babel/plugin-transform-numeric-separator": "^7.25.9",
+        "@babel/plugin-transform-object-assign": "^7.25.9",
+        "@babel/preset-env": "^7.26.7",
+        "@rollup/plugin-babel": "^6.0.0",
+        "@rollup/plugin-node-resolve": "^16.0.0",
+        "@rollup/plugin-typescript": "^12.1.2",
+        "@types/jest": "^29.5",
+        "@types/node": "^20.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.21.0",
+        "@typescript-eslint/parser": "^8.21.0",
+        "eslint": "^9.0.0",
+        "jest": "^29.7.0",
+        "pusher-js": "^8.0",
+        "rollup": "^3.0.0",
+        "socket.io-client": "^4.0",
         "standard-version": "^9.3.2",
-        "ts-jest": "^27.1.3",
-        "tslib": "^2.3.1",
-        "typescript": "^4.6.2"
+        "ts-jest": "^29.2.5",
+        "typescript": "^5.7.0"
     },
     "engines": {
-        "node": ">=10"
+        "node": ">=20"
+    },
+    "exports": {
+        ".": {
+            "import": "./dist/echo.js",
+            "require": "./dist/echo.common.js",
+            "types": "./dist/echo.d.ts"
+        },
+        "./iife": "./dist/echo.iife.js"
+    },
+    "overrides": {
+        "glob": "^9.0.0"
+    },
+    "dependencies": {
+        "tslib": "^2.8.1"
     }
 }

jest.config.js

@@ -1,23 +1,6 @@
 import babel from '@rollup/plugin-babel';
-import typescript from 'rollup-plugin-typescript2';
-
-const plugins = [
-    typescript(),
-    babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**',
-        extensions: ['.ts'],
-        presets: ['@babel/preset-env'],
-        plugins: [
-            ['@babel/plugin-proposal-decorators', { legacy: true }],
-            '@babel/plugin-proposal-function-sent',
-            '@babel/plugin-proposal-export-namespace-from',
-            '@babel/plugin-proposal-numeric-separator',
-            '@babel/plugin-proposal-throw-expressions',
-            '@babel/plugin-transform-object-assign',
-        ],
-    }),
-];
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
 
 export default [
     {
@@ -26,11 +9,42 @@ export default [
             { file: './dist/echo.js', format: 'esm' },
             { file: './dist/echo.common.js', format: 'cjs' },
         ],
-        plugins,
+        plugins: [
+            resolve(),
+            typescript({
+                tsconfig: './tsconfig.json', // Ensures Rollup aligns with your TS settings
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.ts'],
+                exclude: 'node_modules/**',
+                presets: ['@babel/preset-env'],
+                plugins: [
+                    '@babel/plugin-transform-numeric-separator',
+                    '@babel/plugin-transform-export-namespace-from',
+                    ['@babel/plugin-proposal-decorators', { legacy: true }],
+                    '@babel/plugin-proposal-function-sent',
+                    '@babel/plugin-proposal-throw-expressions',
+                    '@babel/plugin-transform-object-assign',
+                ],
+            }),
+        ],
+        external: ['jquery', 'axios', 'vue', '@hotwired/turbo', 'tslib'], // Compatible packages not included in the bundle
     },
     {
         input: './src/index.iife.ts',
         output: [{ file: './dist/echo.iife.js', format: 'iife', name: 'Echo' }],
-        plugins,
+        plugins: [
+            resolve(),
+            typescript({
+                tsconfig: './tsconfig.json',
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.ts'],
+                exclude: 'node_modules/**',
+            }),
+        ],
+        external: ['jquery', 'axios', 'vue', '@hotwired/turbo', 'tslib'], // Compatible packages not included in the bundle
     },
 ];

package.json

@@ -1,50 +1,53 @@
+import type { EchoOptionsWithDefaults } from '../connector';
+import type { BroadcastDriver } from '../echo';
+
 /**
  * This class represents a basic channel.
  */
 export abstract class Channel {
     /**
      * The Echo options.
      */
-    options: any;
+    options: EchoOptionsWithDefaults<BroadcastDriver>;
 
     /**
      * Listen for an event on the channel instance.
      */
-    abstract listen(event: string, callback: Function): this;
+    abstract listen(event: string, callback: CallableFunction): this;
 
     /**
      * Listen for a whisper event on the channel instance.
      */
-    listenForWhisper(event: string, callback: Function): this {
+    listenForWhisper(event: string, callback: CallableFunction): this {
         return this.listen('.client-' + event, callback);
     }
 
     /**
      * Listen for an event on the channel instance.
      */
-    notification(callback: Function): this {
+    notification(callback: CallableFunction): this {
         return this.listen('.Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', callback);
     }
 
     /**
      * Stop listening to an event on the channel instance.
      */
-    abstract stopListening(event: string, callback?: Function): this;
+    abstract stopListening(event: string, callback?: CallableFunction): this;
 
     /**
      * Stop listening for a whisper event on the channel instance.
      */
-    stopListeningForWhisper(event: string, callback?: Function): this {
+    stopListeningForWhisper(event: string, callback?: CallableFunction): this {
         return this.stopListening('.client-' + event, callback);
     }
 
     /**
      * Register a callback to be called anytime a subscription succeeds.
      */
-    abstract subscribed(callback: Function): this;
+    abstract subscribed(callback: CallableFunction): this;
 
     /**
      * Register a callback to be called anytime an error occurs.
      */
-    abstract error(callback: Function): this;
+    abstract error(callback: CallableFunction): this;
 }

rollup.config.js

@@ -7,7 +7,7 @@ export class NullChannel extends Channel {
     /**
      * Subscribe to a channel.
      */
-    subscribe(): any {
+    subscribe(): void {
         //
     }
 
@@ -21,42 +21,42 @@ export class NullChannel extends Channel {
     /**
      * Listen for an event on the channel instance.
      */
-    listen(event: string, callback: Function): this {
+    listen(_event: string, _callback: CallableFunction): this {
         return this;
     }
 
     /**
      * Listen for all events on the channel instance.
      */
-    listenToAll(callback: Function): this {
+    listenToAll(_callback: CallableFunction): this {
         return this;
     }
 
     /**
      * Stop listening for an event on the channel instance.
      */
-    stopListening(event: string, callback?: Function): this {
+    stopListening(_event: string, _callback?: CallableFunction): this {
         return this;
     }
 
     /**
      * Register a callback to be called anytime a subscription succeeds.
      */
-    subscribed(callback: Function): this {
+    subscribed(_callback: CallableFunction): this {
         return this;
     }
 
     /**
      * Register a callback to be called anytime an error occurs.
      */
-    error(callback: Function): this {
+    error(_callback: CallableFunction): this {
         return this;
     }
 
     /**
      * Bind a channel to an event.
      */
-    on(event: string, callback: Function): this {
+    on(_event: string, _callback: CallableFunction): this {
         return this;
     }
 }

src/channel/channel.ts

@@ -7,7 +7,7 @@ export class NullEncryptedPrivateChannel extends NullChannel {
     /**
      * Send a whisper event to other clients in the channel.
      */
-    whisper(eventName: string, data: any): this {
+    whisper(_eventName: string, _data: Record<any, any>): this {
         return this;
     }
 }