fix: add browser shim (#18)

To allow importing the module in browsers, add a shim that will
throw if it's actually used.

Simplifies writing isomorphic code where we may configure libp2p
in different ways based on the environment, but we don't have to
worry about `import`ing this but not `import`ing that.

Author: achingbrain

.gitignore

@@ -25,6 +25,7 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 *.lcov
+.coverage
 
 # nyc test coverage
 .nyc_output
@@ -121,7 +122,7 @@ dist
 .AppleDouble
 .LSOverride
 
-# Icon must end with two 
+# Icon must end with two
 Icon
 
 

package.json

@@ -58,6 +58,12 @@
     "lint": "aegir lint",
     "prepublishOnly": "napi prepublish -t npm",
     "test": "aegir test -t node",
+    "test:chrome": "aegir test -t browser -f ./dist/test/browser.js --cov",
+    "test:chrome-webworker": "aegir test -t webworker -f ./dist/test/browser.js",
+    "test:firefox": "aegir test -t browser -f ./dist/test/browser.js -- --browser firefox",
+    "test:firefox-webworker": "aegir test -t webworker -f ./dist/test/browser.js -- --browser firefox",
+    "test:node": "aegir test -t node --cov",
+    "test:electron-main": "aegir test -t electron-main",
     "universal": "napi universal",
     "version": "napi version"
   },
@@ -76,5 +82,12 @@
     "aegir": "^45.1.3",
     "sinon-ts": "^2.0.0"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "browser": {
+    "./dist/src/transport.js": "./dist/src/transport.browser.js"
+  },
+  "react-native": {
+    "./dist/src/transport.js": "./dist/src/transport.js"
+  },
+  "sideEffects": false
 }

src/index.ts

@@ -27,8 +27,19 @@
  * ```
  */
 
-import { QuicTransport, type QuicComponents, type QuicOptions } from './transport.js'
-import type { Transport } from '@libp2p/interface'
+import { QuicTransport } from './transport.js'
+import type { ComponentLogger, DialTransportOptions, Metrics, PrivateKey, Transport } from '@libp2p/interface'
+import type * as napi from './napi.js'
+
+export type QuicOptions = Omit<napi.Config, 'privateKeyProto'>
+
+export interface QuicComponents {
+  metrics?: Metrics
+  logger: ComponentLogger
+  privateKey: PrivateKey
+}
+
+export type QuicDialOptions = DialTransportOptions
 
 export function quic (options?: Partial<QuicOptions>): (components: QuicComponents) => Transport {
   return (components) => new QuicTransport(components, { ...defaultOptions, ...options })

src/transport.browser.ts

@@ -0,0 +1,25 @@
+import { serviceCapabilities, transportSymbol } from '@libp2p/interface'
+import type { Connection, Listener, MultiaddrFilter, Transport } from '@libp2p/interface'
+
+export class QuicTransport implements Transport {
+  readonly [Symbol.toStringTag]: string = 'quic'
+  readonly [transportSymbol] = true
+  readonly [serviceCapabilities]: string[] = [
+    '@libp2p/transport'
+  ]
+
+  readonly listenFilter: MultiaddrFilter
+  readonly dialFilter: MultiaddrFilter
+
+  constructor () {
+    throw new Error('QUIC connections are not possible in browsers')
+  }
+
+  async dial (): Promise<Connection> {
+    throw new Error('QUIC connections are not possible in browsers')
+  }
+
+  createListener (): Listener {
+    throw new Error('QUIC connections are not possible in browsers')
+  }
+}

src/transport.ts

@@ -1,30 +1,24 @@
 import { privateKeyToProtobuf } from '@libp2p/crypto/keys'
-import { AbortError, transportSymbol } from '@libp2p/interface'
+import { AbortError, serviceCapabilities, transportSymbol } from '@libp2p/interface'
 import { QuicConnection } from './connection.js'
 import { dialFilter, listenFilter } from './filter.js'
 import { QuicListener, type QuicCreateListenerOptions } from './listener.js'
 import * as napi from './napi.js'
 import { QuicStreamMuxerFactory } from './stream-muxer.js'
-import type { ComponentLogger, Connection, CounterGroup, DialTransportOptions, Listener, Logger, Metrics, MultiaddrFilter, PrivateKey, Transport } from '@libp2p/interface'
+import type { Connection, CounterGroup, Listener, Logger, MultiaddrFilter, Transport } from '@libp2p/interface'
 import type { Multiaddr } from '@multiformats/multiaddr'
+import type { QuicComponents, QuicDialOptions, QuicOptions } from './index.js'
 
-export type QuicOptions = Omit<napi.Config, 'privateKeyProto'>
-
-export interface QuicComponents {
-  metrics?: Metrics
-  logger: ComponentLogger
-  privateKey: PrivateKey
-}
-
-export type QuicDialOptions = DialTransportOptions
-
-export interface QuicTransportMetrics {
+interface QuicTransportMetrics {
   events: CounterGroup
 }
 
 export class QuicTransport implements Transport {
   readonly [Symbol.toStringTag]: string = 'quic'
   readonly [transportSymbol] = true
+  readonly [serviceCapabilities]: string[] = [
+    '@libp2p/transport'
+  ]
 
   readonly log: Logger
   readonly components: QuicComponents

test/browser.ts

@@ -0,0 +1,27 @@
+import { generateKeyPair } from '@libp2p/crypto/keys'
+import { defaultLogger } from '@libp2p/logger'
+import { expect } from 'aegir/chai'
+import { isBrowser, isWebWorker } from 'wherearewe'
+import { quic } from '../src/index.js'
+import type { PrivateKey } from '@libp2p/interface'
+
+describe('browser non-support', () => {
+  let privateKey: PrivateKey
+
+  beforeEach(async () => {
+    privateKey = await generateKeyPair('Ed25519')
+  })
+
+  it('should throw in browsers', async function () {
+    if (!isBrowser && !isWebWorker) {
+      return this.skip()
+    }
+
+    expect(() => {
+      quic()({
+        logger: defaultLogger(),
+        privateKey
+      })
+    }).to.be.throw()
+  })
+})

test/transport.spec.ts

@@ -9,7 +9,7 @@ import { pEvent } from 'p-event'
 import { stubInterface } from 'sinon-ts'
 import { quic } from '../src/index.js'
 import { createComponents } from './util.js'
-import type { QuicComponents } from '../src/transport.js'
+import type { QuicComponents } from '../src/index.js'
 import type { Listener, Upgrader } from '@libp2p/interface'
 
 describe('Quic Transport', () => {

test/util.ts

@@ -1,6 +1,6 @@
 import { generateKeyPair } from '@libp2p/crypto/keys'
 import { defaultLogger } from '@libp2p/logger'
-import type { QuicComponents } from '../src/transport.js'
+import type { QuicComponents } from '../src/index.js'
 
 export async function createComponents (): Promise<QuicComponents> {
   return {