Bundle to both ESM and CJS (#118)

This adds `tsup` as a dev dependency to bundle for both ESM and CJS targets.
blomqma · Jan 9, 2024 · 5241585 · 5241585 · vercel · Jan 9, 2024
1 parent a7d65be
commit 5241585
Show file tree

Hide file tree

Showing 30 changed files with 3,283 additions and 2,411 deletions.
diff --git a/.github/workflows/ci.yml b/.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

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
diff --git a/apps/example/.eslintrc.js b/apps/example/.eslintrc.js
diff --git a/apps/example/.eslintrc.json b/apps/example/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@typescript-eslint/triple-slash-reference": "off"
+  }
+}
diff --git a/apps/example/.gitignore b/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
diff --git a/apps/example/next.config.js b/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
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -5,12 +5,18 @@
     "prebuild": "cd ../.. && pnpm build && cd apps/example",
     "dev": "pnpm prebuild && next dev",
     "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": {
     "next-rest-framework": "workspace:*"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.0.1",
+    "postcss": "8.4.33",
+    "tailwindcss": "3.3.0",
+    "eslint-config-next": "14.0.4"
   }
 }
diff --git a/apps/example/postcss.config.js b/apps/example/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/example/src/actions.ts b/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.

diff --git a/apps/example/src/app/api/v2/rpc/[operationId]/route.ts b/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({

diff --git a/apps/example/src/app/api/v2/todos/route.ts b/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.

diff --git a/apps/example/src/app/client/ClientExample.tsx b/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'

diff --git a/apps/example/src/app/client/page.tsx b/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();

diff --git a/apps/example/src/app/components/Footer.tsx b/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>

diff --git a/apps/example/src/app/components/Navbar.tsx b/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>

diff --git a/apps/example/src/app/globals.css b/apps/example/src/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/example/src/app/layout.tsx b/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"

diff --git a/apps/example/src/app/page.tsx b/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 (

diff --git a/apps/example/src/pages/api/v1/rpc.ts b/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({

diff --git a/apps/example/tailwind.config.ts b/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;
diff --git a/apps/example/tsconfig.json b/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"]

diff --git a/package.json b/package.json
@@ -6,10 +6,9 @@
     "build": "pnpm --filter next-rest-framework run build",
     "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",

diff --git a/packages/next-rest-framework/package.json b/packages/next-rest-framework/package.json
@@ -19,16 +19,18 @@
     "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"
   },
   "bin": {
     "next-rest-framework": "./dist/cli.js"
@@ -42,7 +44,6 @@
     "zod-to-json-schema": "3.21.4"
   },
   "devDependencies": {
-    "@next-rest-framework/tsconfig": "workspace:*",
     "@types/jest": "29.5.4",
     "@types/lodash": "4.14.197",
     "@types/wait-on": "5.3.1",
@@ -51,6 +52,7 @@
     "openapi-types": "12.1.3",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
+    "tsup": "8.0.1",
     "typescript": "*"
   }
 }
diff --git a/packages/next-rest-framework/src/app-router/rpc-route.ts b/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(

diff --git a/packages/next-rest-framework/src/shared/open-api.ts b/packages/next-rest-framework/src/shared/open-api.ts
@@ -239,8 +239,8 @@ export const fetchOasDataFromDev = async ({
               headers: {
                 'User-Agent': NEXT_REST_FRAMEWORK_USER_AGENT,
                 'Content-Type': 'application/json',
-                'x-forwarded-proto': baseUrl.split('://')[0],
-                host: baseUrl.split('://')[1]
+                'x-forwarded-proto': baseUrl.split('://')[0] ?? '',
+                host: baseUrl.split('://')[1] ?? ''
               },
               signal: controller.signal,
               method
@@ -392,7 +392,7 @@ export const getOasDataFromOperations = ({
     Array<{ key: string; ref: string; schema: OpenAPIV3_1.SchemaObject }>
   > = {};
 
-  const capitalize = (str: string) => str[0].toUpperCase() + str.slice(1);
+  const capitalize = (str: string) => str[0]?.toUpperCase() + str.slice(1);
 
   Object.entries(operations).forEach(
     ([operationId, { openApiOperation, method: _method, input, outputs }]: [
@@ -505,8 +505,9 @@ export const getOasDataFromOperations = ({
             // Filter out query parameters that have already been added to the path parameters automatically.
             .filter((key) => !pathParameters?.includes(key))
             .map((key) => {
-              const schema: ZodSchema = (input.query as ZodObject<ZodRawShape>)
-                .shape[key];
+              const schema = (input.query as ZodObject<ZodRawShape>).shape[
+                key
+              ] as ZodSchema;
 
               // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
               return {
@@ -591,7 +592,7 @@ export const getOasDataFromRpcOperations = ({
     }>
   > = {};
 
-  const capitalize = (str: string) => str[0].toUpperCase() + str.slice(1);
+  const capitalize = (str: string) => str[0]?.toUpperCase() + str.slice(1);
 
   Object.entries(operations).forEach(
     ([

diff --git a/packages/next-rest-framework/tsconfig.build.json b/packages/next-rest-framework/tsconfig.build.json