Merge pull request #4 from clarkmcc/support-commonjs

Support ES and CommonJS builds

.github/workflows/npm-build.yml

@@ -0,0 +1,20 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Build Package
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run build

.github/workflows/npm-publish.yml

@@ -1,7 +1,7 @@
 # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 
-name: Publish Node.js Package
+name: Publish NPM Package
 
 on:
   release:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clarkmcc/ngraph",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A blender-style node editor built on xyflow",
   "repository": "[email protected]:clarkmcc/ngraph.git",
   "author": "Clark McCauley <[email protected]>",
@@ -9,13 +9,16 @@
   "files": [
     "dist"
   ],
-  "main": "dist/main.jsx",
+  "main": "dist/cjs/main.jsx",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/es/index.js"
     }
   },
-  "types": "dist/index.d.ts",
+  "types": "dist/es/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
@@ -34,7 +37,7 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": ">= 17 < 2"
+    "react": ">= 17"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

vite.config.ts

@@ -8,13 +8,17 @@ import { glob } from 'glob'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), libInjectCss(), dts({ include: ['lib'] })],
+  plugins: [
+    react(),
+    libInjectCss(),
+    dts({ include: ['lib'], outDir: ['dist/types'] }),
+  ],
   build: {
     ssr: false,
     copyPublicDir: false,
     lib: {
       entry: resolve(__dirname, 'lib/index.ts'),
-      formats: ['es'],
+      formats: ['es', 'cjs'],
     },
     rollupOptions: {
       external: ['react', 'react/jsx-runtime'],
@@ -28,10 +32,20 @@ export default defineConfig({
           fileURLToPath(new URL(file, import.meta.url)),
         ]),
       ),
-      output: {
-        assetFileNames: 'assets/[name][extname]',
-        entryFileNames: '[name].js',
-      },
+      output: [
+        {
+          format: 'es',
+          entryFileNames: '[name].js',
+          assetFileNames: 'assets/[name][extname]',
+          dir: 'dist/es',
+        },
+        {
+          format: 'cjs',
+          entryFileNames: '[name].js',
+          assetFileNames: 'assets/[name][extname]',
+          dir: 'dist/cjs',
+        },
+      ],
     },
   },
 })