Merge pull request #63 from getditto/pv/esm-export

feat: publish both ESM and CommonJS

.eslintrc

@@ -31,19 +31,27 @@
     "simple-import-sort/exports": "error",
     "sort-imports": "off",
     "semi": 0,
+    "import/extensions": ["error", "ignorePackages"],
     "prettier/prettier": [
       "error",
       {
         "semi": false
       }
     ]
   },
+  "overrides": [{
+    "files": ["*.spec.*"],
+    "rules": {
+      "import/extensions": "off",
+    }
+  }],
   "plugins": [
     "@typescript-eslint",
     "prettier",
     "simple-import-sort",
     "react-hooks",
-    "deprecation"
+    "deprecation",
+    "eslint-plugin-import"
   ],
   "settings": {
     "react": {

package.json

@@ -2,18 +2,29 @@
   "name": "@dittolive/react-ditto",
   "version": "0.11.1",
   "description": "React wrappers for Ditto",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/esm/index.d.ts"
+    }
+  },
   "scripts": {
-    "build": "rimraf dist && tsc",
+    "build": "rimraf dist && npm run build:esm && npm run build:cjs && npm run build:static-files && scripts/fix-exports-type.js",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.json",
+    "build:static-files": "cp package.json CHANGELOG.md README.md dist/",
     "test": "karma start",
-    "types": "tsc -p tsconfig.json",
+    "types": "tsc -p tsconfig.esm.json",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "docs:generate": "rimraf documentation-website/* && typedoc",
     "docs:serve": "live-server ./documentation-website"
   },
-  "author": "",
+  "author": "DittoLive Inc.",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -45,6 +56,7 @@
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^2.0.0",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",

scripts/fix-exports-type.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+// This script defines the type of exports in the dist directory using minimal
+// package.json files. Setting the type in the main package.json file does not
+// work because we want to support both CommonJS and ES Module exports in the
+// same package.
+
+const FS = require('node:fs')
+
+const DIST_DIR = 'dist'
+
+FS.writeFileSync(
+  `${DIST_DIR}/cjs/package.json`,
+  JSON.stringify({
+    type: 'commonjs',
+  }),
+)
+
+FS.writeFileSync(
+  `${DIST_DIR}/esm/package.json`,
+  JSON.stringify({
+    type: 'module',
+  }),
+)

src/DittoLazyProvider.tsx

@@ -6,8 +6,8 @@ import {
   DittoHash,
   RegisterDitto,
   UnregisterDitto,
-} from './DittoContext'
-import { ProviderState, RenderFunction } from './DittoProvider'
+} from './DittoContext.js'
+import { ProviderState, RenderFunction } from './DittoProvider.js'
 
 export interface DittoLazyProviderProps {
   initOptions?: InitOptions

src/DittoProvider.tsx

@@ -7,8 +7,8 @@ import React, {
   useState,
 } from 'react'
 
-import { DittoHash, RegisterDitto, UnregisterDitto } from '.'
-import { DittoContext } from './DittoContext'
+import { DittoContext } from './DittoContext.js'
+import { DittoHash, RegisterDitto, UnregisterDitto } from './index.js'
 
 export type RenderFunction = (providerState: ProviderState) => ReactNode
 

src/identity/index.ts

@@ -1,3 +1,3 @@
-export * from './useOfflinePlaygroundIdentity'
-export * from './useOnlineIdentity'
-export * from './useOnlinePlaygroundIdentity'
+export * from './useOfflinePlaygroundIdentity.js'
+export * from './useOnlineIdentity.js'
+export * from './useOnlinePlaygroundIdentity.js'

src/index.tsx

@@ -1,8 +1,8 @@
-export * from './DittoContext'
-export * from './DittoLazyProvider'
-export * from './DittoProvider'
-export * from './identity'
-export * from './mutations'
-export * from './presence'
-export * from './queries'
-export * from './useDitto'
+export * from './DittoContext.js'
+export * from './DittoLazyProvider.js'
+export * from './DittoProvider.js'
+export * from './identity/index.js'
+export * from './mutations/index.js'
+export * from './presence/index.js'
+export * from './queries/index.js'
+export * from './useDitto.js'

src/mutations/index.tsx

@@ -1 +1 @@
-export * from './useMutations'
+export * from './useMutations.js'

src/mutations/useMutations.ts

@@ -13,7 +13,7 @@ import {
 } from '@dittolive/ditto'
 import { useCallback } from 'react'
 
-import { useDitto } from '../useDitto'
+import { useDitto } from '../useDitto.js'
 
 export interface UpdateParams {
   /**

src/presence/index.ts

@@ -1 +1 @@
-export * from './useConnectionStatus'
+export * from './useConnectionStatus.js'

src/presence/useConnectionStatus.ts

@@ -1,7 +1,7 @@
 import { ConnectionType, Observer } from '@dittolive/ditto'
 import { useEffect, useRef, useState } from 'react'
 
-import { useDitto } from '../useDitto'
+import { useDitto } from '../useDitto.js'
 
 export interface ConnectionStatusParams {
   /**

src/queries/index.tsx

@@ -1,6 +1,6 @@
-export * from './useCollections'
-export * from './useLazyPendingCursorOperation'
-export * from './useLazyPendingIDSpecificOperation'
-export * from './usePendingCursorOperation'
-export * from './usePendingIDSpecificOperation'
-export * from './useRemotePeers'
+export * from './useCollections.js'
+export * from './useLazyPendingCursorOperation.js'
+export * from './useLazyPendingIDSpecificOperation.js'
+export * from './usePendingCursorOperation.js'
+export * from './usePendingIDSpecificOperation.js'
+export * from './useRemotePeers.js'

src/queries/useCollections.ts

@@ -8,7 +8,7 @@ import {
 } from '@dittolive/ditto'
 import { useEffect, useRef, useState } from 'react'
 
-import { useDitto } from '../useDitto'
+import { useDitto } from '../useDitto.js'
 
 export interface CollectionsQueryParams {
   /**

src/queries/useLazyPendingCursorOperation.ts

@@ -9,8 +9,8 @@ import {
 } from '@dittolive/ditto'
 import { useEffect, useRef, useState } from 'react'
 
-import { useDittoContext } from '../DittoContext'
-import { LiveQueryParams } from './usePendingCursorOperation'
+import { useDittoContext } from '../DittoContext.js'
+import { LiveQueryParams } from './usePendingCursorOperation.js'
 
 export interface LazyPendingCursorOperationReturn {
   /** The initialized Ditto instance if one could be found for the provided path. */

src/queries/useLazyPendingIDSpecificOperation.ts

@@ -8,8 +8,8 @@ import {
 } from '@dittolive/ditto'
 import { useEffect, useRef, useState } from 'react'
 
-import { useDittoContext } from '../DittoContext'
-import { UsePendingIDSpecificOperationParams } from './usePendingIDSpecificOperation'
+import { useDittoContext } from '../DittoContext.js'
+import { UsePendingIDSpecificOperationParams } from './usePendingIDSpecificOperation.js'
 
 export interface LazyPendingIDSpecificOperationReturn {
   /** The initialized Ditto instance if one could be found for the provided path. */

src/queries/usePendingCursorOperation.ts

@@ -11,8 +11,8 @@ import {
 } from '@dittolive/ditto'
 import { useEffect, useRef, useState } from 'react'
 
-import { useDitto } from '../useDitto'
-import { useVersion } from './useVersion'
+import { useDitto } from '../useDitto.js'
+import { useVersion } from './useVersion.js'
 
 export interface LiveQueryParams {
   collection: string

src/queries/usePendingIDSpecificOperation.ts

@@ -9,7 +9,7 @@ import {
 } from '@dittolive/ditto'
 import { useEffect, useRef, useState } from 'react'
 
-import { useDitto } from '../useDitto'
+import { useDitto } from '../useDitto.js'
 
 export interface UsePendingIDSpecificOperationParams {
   /**

src/queries/useRemotePeers.tsx

@@ -1,7 +1,7 @@
 import { Ditto, Observer, Peer } from '@dittolive/ditto'
 import { useEffect, useState } from 'react'
 
-import { useDitto } from '../useDitto'
+import { useDitto } from '../useDitto.js'
 
 export interface UsePeersParams {
   /**

src/useDitto.ts

@@ -1,7 +1,7 @@
 import { Ditto } from '@dittolive/ditto'
 import { useEffect, useState } from 'react'
 
-import { useDittoContext } from '.'
+import { useDittoContext } from './index.js'
 
 export interface DittoHookProps {
   ditto: Ditto | null

tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "declarationDir": "./dist/esm",
+    "outDir": "./dist/esm"
+  }
+}

tsconfig.json

@@ -1,26 +1,22 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["es6", "dom"],
+    "target": "es6",
+    "lib": ["ESNext", "dom"],
     "allowJs": true,
     "module": "commonjs",
     "noImplicitAny": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": true,
+    "inlineSources": true,
     "jsx": "react",
     "esModuleInterop": true,
     "declaration": true,
-    "declarationDir": "./dist",
+    "declarationDir": "./dist/cjs",
     "declarationMap": true,
-    "outDir": "./dist",
-    "sourceRoot": "./src"
+    "outDir": "./dist/cjs"
   },
   "compileOnSave": false,
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "src"
-  ]
-}
+  "exclude": ["node_modules"],
+  "include": ["src"]
+}