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,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@typescript-eslint/triple-slash-reference": "off"
+  }
+}

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,17 @@
   "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": "tsc && next lint"
   },
-  "dependencies": {
+  "devDependencies": {
+    "autoprefixer": "10.0.1",
+    "postcss": "8.4.33",
+    "tailwindcss": "3.3.0",
+    "eslint-config-next": "14.0.4",
     "next-rest-framework": "workspace:*"
   }
 }

apps/example/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/example/public/openapi.json

@@ -3,7 +3,7 @@
   "info": {
     "title": "Next REST Framework",
     "description": "This is an autogenerated documentation by Next REST Framework.",
-    "version": "v4.2.0"
+    "version": "v4.3.0"
   },
   "paths": {
     "/api/v1/todos": {

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/components/Footer.tsx

@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 export const Footer: React.FC = () => (
   <footer className="footer bg-base-200 flex justify-center">
     <div className="container max-w-5xl flex flex-col items-center text-md gap-5 px-5 py-2">
@@ -9,10 +11,11 @@ export const Footer: React.FC = () => (
         >
           Next REST Framework
         </a>
-        <img
+        <Image
           src="https://next-rest-framework.vercel.app/img/logo.svg"
           alt="Next REST Framework logo"
-          className="w-10"
+          width={30}
+          height={30}
         />
       </p>
     </div>

apps/example/src/app/components/Navbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { VERSION } from 'next-rest-framework/dist/constants';
+import Image from 'next/image';
 
 export const Navbar: React.FC = () => {
   const onDarkModeChanged = (theme: 'dark' | 'light') => {
@@ -13,10 +14,11 @@ export const Navbar: React.FC = () => {
       <div className="max-w-7xl flex justify-between grow gap-5 h-24">
         <div className="flex items-center gap-4">
           <a>
-            <img
+            <Image
               src="https://next-rest-framework.vercel.app/img/logo.svg"
               alt="Logo"
-              className="w-32"
+              width={75}
+              height={75}
             />
           </a>
           <p>v{VERSION}</p>

apps/example/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/example/src/app/layout.tsx

@@ -1,6 +1,8 @@
+import type { Metadata } from 'next';
 import { cookies } from 'next/headers';
+import './globals.css';
 
-export const metadata = {
+export const metadata: Metadata = {
   title: 'Next REST Framework Example',
   description: 'Example application for Next REST Framework'
 };
@@ -18,7 +20,6 @@ export default async function Layout({
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script src="https://cdn.tailwindcss.com"></script>
         <link
           href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css"
           rel="stylesheet"

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/tailwind.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {},
+  plugins: []
+};
+export default config;

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)