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

feat: publish both ESM and CommonJS

Author: pvditto

.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'