Bundle to both ESM and CJS

This also adds full CI/CD automation
for easier publish process.

.github/workflows/ci.yml

@@ -2,26 +2,26 @@ name: "CI"
 
 on:
   push:
-    branches: [main]
-  pull_request:
+    branches:
+      - "**"
 
 jobs:
   build:
     name: "Run CI pipeline"
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [18]
+        node: [18, 20]
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v2
         with:
-          version: 7.5.1
+          version: 7
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
           cache: "pnpm"
-      - run: pnpm i
+      - run: pnpm i --frozen-lockfile
       - run: pnpm run ci
 
       - name: Coverage

.github/workflows/publish.yml

@@ -0,0 +1,37 @@
+name: "Publish"
+
+on:
+  workflow_run:
+    workflows: [CI]
+    branches: [main]
+    types: [completed]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  publish:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+          cache: "pnpm"
+
+      - run: pnpm install --frozen-lockfile
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

apps/example/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/example/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/example/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/example/next.config.js

@@ -1,7 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-};
+const nextConfig = {}
 
-module.exports = nextConfig;
+module.exports = nextConfig

apps/example/package.json

@@ -4,13 +4,13 @@
   "scripts": {
     "prebuild": "cd ../.. && pnpm build && cd apps/example",
     "dev": "pnpm prebuild && next dev",
-    "build": "pnpm prebuild && next build",
+    "build": "pnpm prebuild next build",
+    "start": "next start",
     "generate": "pnpm prebuild && next-rest-framework generate --debug=true",
     "validate": "pnpm prebuild && next-rest-framework validate --debug=true",
-    "start": "next start",
-    "type-check": "tsc --noEmit"
+    "lint": " next lint"
   },
-  "dependencies": {
+  "devDependencies": {
     "next-rest-framework": "workspace:*"
   }
 }

apps/example/src/actions.ts

@@ -1,7 +1,7 @@
 'use server';
 
 import { rpcOperation } from 'next-rest-framework';
-import { MOCK_TODOS, todoSchema } from 'utils';
+import { MOCK_TODOS, todoSchema } from '@/utils';
 import { z } from 'zod';
 
 // The RPC operations can be used as server-actions and imported in the RPC route handlers.

apps/example/src/app/api/v2/rpc/[operationId]/route.ts

@@ -1,4 +1,4 @@
-import { createTodo, deleteTodo, getTodoById, getTodos } from 'actions';
+import { createTodo, deleteTodo, getTodoById, getTodos } from '@/actions';
 import { rpcRoute } from 'next-rest-framework';
 
 const { POST, client } = rpcRoute({

apps/example/src/app/api/v2/todos/route.ts

@@ -1,5 +1,5 @@
 import { TypedNextResponse, route, routeOperation } from 'next-rest-framework';
-import { MOCK_TODOS, todoSchema } from 'utils';
+import { MOCK_TODOS, todoSchema } from '@/utils';
 import { z } from 'zod';
 
 // Example App Router route handler with GET/POST handlers.

apps/example/src/app/client/ClientExample.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { type RpcClient } from 'app/api/v2/rpc/[operationId]/route';
+import { type RpcClient } from '@/app/api/v2/rpc/[operationId]/route';
 import { rpcClient } from 'next-rest-framework/dist/client/rpc-client';
 import { useEffect, useState } from 'react';
-import { type Todo } from 'utils';
+import { type Todo } from '@/utils';
 
 const client = rpcClient<RpcClient>({
   url: 'http://localhost:3000/api/v2/rpc'

apps/example/src/app/client/page.tsx

@@ -1,7 +1,7 @@
-import { getTodos } from 'actions';
-import { Footer } from '../components/Footer';
-import { Navbar } from '../components/Navbar';
-import { ClientExample } from './ClientExample';
+import { getTodos } from '@/actions';
+import { Footer } from '@/app/components/Footer';
+import { Navbar } from '@/app/components/Navbar';
+import { ClientExample } from '@/app/client/ClientExample';
 
 export default async function Page() {
   const todos = await getTodos();

apps/example/src/app/page.tsx

@@ -1,5 +1,5 @@
-import { Footer } from './components/Footer';
-import { Navbar } from './components/Navbar';
+import { Footer } from '@/app/components/Footer';
+import { Navbar } from '@/app/components/Navbar';
 
 export default function Page() {
   return (

apps/example/src/pages/api/v1/rpc.ts

@@ -1,4 +1,4 @@
-import { createTodo, deleteTodo, getTodoById, getTodos } from 'actions';
+import { createTodo, deleteTodo, getTodoById, getTodos } from '@/actions';
 import { rpcApiRoute } from 'next-rest-framework';
 
 const handler = rpcApiRoute({

apps/example/tsconfig.json

@@ -5,24 +5,22 @@
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "baseUrl": "./",
-    "paths": {
-      "*": ["./src/*"]
-    },
     "plugins": [
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

package.json

@@ -4,12 +4,12 @@
   "scripts": {
     "dev": "pnpm --filter example run dev",
     "build": "pnpm --filter next-rest-framework run build",
+    "release": "pnpm --filter next-rest-framework run release",
     "test": "pnpm --filter next-rest-framework run test",
     "test:watch": "pnpm --filter next-rest-framework run test:watch",
-    "type-check": "pnpm run -r type-check",
     "format": "prettier --write '**/*.{ts,json}' && eslint --fix --max-warnings=0 --ext=.ts .",
-    "lint": "prettier --check '**/*.{ts,json}' && eslint --max-warnings=0 --ext=.ts . && swagger-cli validate ./apps/example/public/openapi.json",
-    "ci": "pnpm run build && pnpm run type-check && pnpm run lint && pnpm run test"
+    "lint": "pnpm run -r lint && prettier --check '**/*.{ts,json}' && eslint --max-warnings=0 --ext=.ts . && swagger-cli validate ./apps/example/public/openapi.json",
+    "ci": "pnpm run build && pnpm run lint && pnpm run test"
   },
   "dependencies": {
     "react": "18.2.0",

packages/next-rest-framework/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

packages/next-rest-framework/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

packages/next-rest-framework/.changeset/pink-hotels-sell.md

@@ -0,0 +1,5 @@
+---
+'next-rest-framework': minor
+---
+
+Add ESM support

packages/next-rest-framework/package.json

@@ -19,16 +19,19 @@
     "dist"
   ],
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/blomqma/next-rest-framework.git",
     "directory": "packages/next-rest-framework"
   },
   "scripts": {
-    "type-check": "tsc --noEmit",
-    "build": "rm -rf dist && tsc --project tsconfig.build.json",
+    "lint": "tsc",
     "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "build": "tsup src/** --format cjs,esm --dts",
+    "release": "pnpm run build && changeset publish"
   },
   "bin": {
     "next-rest-framework": "./dist/cli.js"
@@ -42,7 +45,7 @@
     "zod-to-json-schema": "3.21.4"
   },
   "devDependencies": {
-    "@next-rest-framework/tsconfig": "workspace:*",
+    "@changesets/cli": "^2.27.1",
     "@types/jest": "29.5.4",
     "@types/lodash": "4.14.197",
     "@types/wait-on": "5.3.1",
@@ -51,6 +54,7 @@
     "openapi-types": "12.1.3",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
+    "tsup": "^8.0.1",
     "typescript": "*"
   }
 }

packages/next-rest-framework/src/app-router/rpc-route.ts

@@ -68,7 +68,7 @@ ${error}`);
         }
       }
 
-      const operation = operations[params.operationId];
+      const operation = operations[params.operationId ?? ''];
 
       if (!operation) {
         return NextResponse.json(