refactor: flight refactors (#83)

* feat(ui): migrates from tsup to vite for bundling

This commit brings the following changes:
- Removes `tsup` from the monorepo.
- Introduces a new `build` config preset in the `vite` package.
- Uses that `build` config preset in the `ui` package to build/bundle it
  instead of `tsup`.

* feat(env): dedicated server/client env files

* feat: more elaborative .env.example files

* fix: lint

* chore: adds a changeset

* chore: updates deps

.changeset/silly-turtles-explain.md

@@ -0,0 +1,20 @@
+---
+'@orbitkit/eslint': patch
+'@orbitkit/vite': patch
+'@orbitkit/utils': patch
+'@orbitkit/auth': patch
+'@orbitkit/env': patch
+'@orbitkit/ui': patch
+'@orbitkit/docs': patch
+'@orbitkit/web': patch
+'@orbitkit/marketing': patch
+'@orbitkit/api': patch
+'@orbitkit/assets': patch
+'@orbitkit/storybook': patch
+'@orbitkit/tailwind': patch
+'@orbitkit/tsconfig': patch
+'@orbitkit/core': patch
+'@orbitkit/db': patch
+---
+
+refactor: switches from `tsup` to `vite` for bundling.

.github/workflows/main-ci.yml

@@ -19,7 +19,7 @@ env:
   AUTH_GITHUB_SECRET: ${{ secrets.AUTH_GITHUB_SECRET }}
   AUTH_GOOGLE_ID: ${{ secrets.AUTH_GOOGLE_ID }}
   AUTH_GOOGLE_SECRET: ${{ secrets.AUTH_GOOGLE_SECRET }}
-  AUTH_GOOGLE_CODE_VERIFIER: ${{ secrets.AUTH_GOOGLE_CODE_VERIFIER }}
+  AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
 
   # Uploadthing
   UPLOADTHING_SECRET: ${{ secrets.UPLOADTHING_SECRET }}

.github/workflows/pr-ci.yml

@@ -16,7 +16,7 @@ env:
   AUTH_GITHUB_SECRET: ${{ secrets.AUTH_GITHUB_SECRET }}
   AUTH_GOOGLE_ID: ${{ secrets.AUTH_GOOGLE_ID }}
   AUTH_GOOGLE_SECRET: ${{ secrets.AUTH_GOOGLE_SECRET }}
-  AUTH_GOOGLE_CODE_VERIFIER: ${{ secrets.AUTH_GOOGLE_CODE_VERIFIER }}
+  AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
 
   # Uploadthing
   UPLOADTHING_SECRET: ${{ secrets.UPLOADTHING_SECRET }}

.gitignore

@@ -136,9 +136,6 @@ storybook-static
 # Astro
 .astro
 
-# Tsup
-.tsup
-
 # DS_Store files
 .DS_Store
 

README.md

@@ -28,7 +28,7 @@
 - [**Github Actions**](https://github.com/features/actions): for CI/CD, with automatic DB branching & code checks.
 - [**next-themes**](https://github.com/pacocoursey/next-themes): for easy light/dark mode handling in the web app.
 - [**Changesets**](https://github.com/changesets/changesets): for managing versioning and changelogs.
-- [**tsup**](https://github.com/egoist/tsup): for fast, easy to configure bundling of packages.
+- [**vite**](https://vitejs.dev): for bundling & storybook.
 - [**ts-reset**](https://github.com/total-typescript/ts-reset): for the apps, improving the types for common JavaScript APIs.
 - [**ESLint**](https://eslint.org/), [**Prettier**](https://prettier.io), [**Markdownlint**](https://github.com/DavidAnson/markdownlint), [**Cspell**](https://cspell.org), [**Husky**](https://github.com/typicode/husky), [**Lint-staged**](https://github.com/lint-staged/lint-staged) and [**Commitlint**](https://github.com/conventional-changelog/commitlint) for code quality.
 - **ESM Only**: because CJS should be left in the past.

apps/docs/decision-reasoning/why-all-built.mdx

@@ -1,7 +1,7 @@
 ---
 title: Built packages
 icon: 'toolbox'
-description: 'If you noticed, all the packages in the monorepo (except the env one) are built using tsc or tsup. Here is why.'
+description: 'If you noticed, all the packages in the monorepo (except the env one) are built using tsc or vite. Here is why.'
 ---
 
 ## Types of Monorepo Packages
@@ -10,7 +10,7 @@ In a typical TS monorepo, there are three ways of consuming the packages that yo
 
 1. Shipping out the TS source code directly in the `exports` field of the `package.json` file or using `tsconfig` paths.
 2. Transpiling the TS code to JS using `tsc` and shipping the JS code in the `exports` field of the package alongside the `.d.ts` files.
-3. Bundling the TS code using something like `tsup` or `rollup` and shipping the bundled JS code in the `exports` field of the package alongside the `.d.ts` files.
+3. Bundling the TS code using something like `vite`, `tsup` or `rollup` and shipping the bundled JS code in the `exports` field of the package alongside the `.d.ts` files.
 
 ## Comparing the approaches
 
@@ -69,7 +69,7 @@ Typically, a package using this approach would be called a "Publishable Package"
 
 ## The OrbitKit Approach
 
-- `ui package` is bundled with `tsup`.
+- `ui package` is bundled with `vite`.
 - `env package` is shipped out as source code.
 - All other packages are compiled with `tsc`.
 

apps/docs/installation.mdx

@@ -173,8 +173,8 @@ OrbitKit currently ships with two authentication providers, Google and Github. Y
         variable.
       </li>
       <li>
-        For the `AUTH_GOOGLE_CODE_VERIFIER` environment variable, you can put
-        any random string.
+        For the `AUTH_SECRET` environment variable, you can put any random
+        string.
       </li>
     </ol>
   </Accordion>

apps/docs/introduction.mdx

@@ -38,7 +38,7 @@ description: '🚀 OrbitKit is an enterprise ready monorepo StarterKit ready to
 - [**Github Actions**](https://github.com/features/actions): for CI/CD, with automatic DB branching & code checks.
 - [**next-themes**](https://github.com/pacocoursey/next-themes): for easy light/dark mode handling in the web app.
 - [**Changesets**](https://github.com/changesets/changesets): for managing versioning and changelogs.
-- [**tsup**](https://github.com/egoist/tsup): for fast, easy to configure bundling of packages.
+- [**vite**](https://vitejs.dev): for bundling & storybook.
 - [**ts-reset**](https://github.com/total-typescript/ts-reset): for the apps, improving the types for common JavaScript APIs.
 - [**ESLint**](https://eslint.org/), [**Prettier**](https://prettier.io), [**Markdownlint**](https://github.com/DavidAnson/markdownlint), [**Cspell**](https://cspell.org), [**Husky**](https://github.com/typicode/husky), [**Lint-staged**](https://github.com/lint-staged/lint-staged) and [**Commitlint**](https://github.com/conventional-changelog/commitlint) for code quality.
 - **ESM Only**: because CJS should be left in the past.

apps/docs/package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "ajv": "^8.16.0",
-    "mintlify": "^4.0.167"
+    "mintlify": "^4.0.168"
   },
   "volta": {
     "extends": "../../package.json"

apps/marketing/.env.example

@@ -1,2 +1,3 @@
+# Posthog (optional) (https://posthog.com)
 PUBLIC_POSTHOG_KEY=<ph_project_api_key>
 PUBLIC_POSTHOG_HOST=<ph_client_api_host>

apps/marketing/package.json

@@ -23,7 +23,7 @@
     "@t3-oss/env-core": "^0.10.1",
     "@total-typescript/ts-reset": "^0.5.1",
     "astro": "^4.10.2",
-    "posthog-js": "^1.139.1",
+    "posthog-js": "^1.139.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zod": "^3.23.8"

apps/web/.env.example

@@ -1,19 +1,18 @@
-# Neon Database URL (required)
+################################################################################
+#                       👇 REQUIRED ENVIRONMENT VARIABLES 👇                   #
+################################################################################
+
+# Neon Database URL (https://neon.tech)
 DATABASE_URL=<postgres-db-url-from-neon-dashboard>
 
-# Uploadthing (required)
+# Uploadthing (https://uploadthing.com)
 UPLOADTHING_SECRET=<uploadthing-secret>
 UPLOADTHING_APP_ID=<uploadthing-app-id>
 
-# Posthog (optional)
-NEXT_PUBLIC_POSTHOG_HOST=<ph_client_api_host>
-NEXT_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
+# Auth secret.
+AUTH_SECRET=<auth-secret>
 
-# Unkey (optional)
-UNKEY_NAMESPACE=<unkey.dev-namespace>
-UNKEY_ROOT_KEY=<unkey.dev-root-key>
-
-# Auth, you will need at least one of these set
+# !IMPORTANT: you don't need both Github & Google OAuth environment variables, you just need a minimum of one provider's environment variables (ie. you can set `AUTH_GITHUB_ID` and `AUTH_GITHUB_SECRET`, leave out the google ones and that would be fine.)
 
 # Github OAuth
 AUTH_GITHUB_ID=<github-id>
@@ -22,4 +21,17 @@ AUTH_GITHUB_SECRET=<github-secret>
 # Google OAuth
 AUTH_GOOGLE_ID=<google-id>
 AUTH_GOOGLE_SECRET=<google-secret>
-AUTH_GOOGLE_CODE_VERIFIER=<google-code-verifier>
+
+
+
+################################################################################
+#                       👇 OPTIONAL ENVIRONMENT VARIABLES 👇                   #
+################################################################################
+
+# Posthog (https://posthog.com)
+NEXT_PUBLIC_POSTHOG_HOST=<ph_client_api_host>
+NEXT_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
+
+# Unkey (https://unkey.dev)
+UNKEY_NAMESPACE=<unkey.dev-namespace>
+UNKEY_ROOT_KEY=<unkey.dev-root-key>

apps/web/next.config.js

@@ -5,7 +5,8 @@ import createJiti from 'jiti';
 
 const jiti = createJiti(fileURLToPath(import.meta.url));
 
-jiti('@orbitkit/env/web');
+jiti('@orbitkit/env/web/server');
+jiti('@orbitkit/env/web/client');
 
 const withBundleAnalyzer = bundleAnalyzerPlugin({
   enabled: process.env['ANALYZE'] === 'true',

apps/web/package.json

@@ -33,7 +33,7 @@
     "geist": "^1.3.0",
     "next": "14.2.4",
     "next-themes": "^0.3.0",
-    "posthog-js": "^1.139.1",
+    "posthog-js": "^1.139.2",
     "posthog-node": "^4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/web/src/app/(auth)/login/page.tsx

@@ -2,12 +2,10 @@ import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { auth } from '@orbitkit/auth';
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/server';
 
 const googleAuthIsEnabled =
-  env.AUTH_GOOGLE_ID !== undefined &&
-  env.AUTH_GOOGLE_SECRET !== undefined &&
-  env.AUTH_GOOGLE_CODE_VERIFIER !== undefined;
+  env.AUTH_GOOGLE_ID !== undefined && env.AUTH_GOOGLE_SECRET !== undefined;
 
 const githubAuthIsEnabled =
   env.AUTH_GITHUB_SECRET !== undefined && env.AUTH_GITHUB_ID !== undefined;

apps/web/src/app/api/trpc/[trpc]/route.ts

@@ -3,7 +3,7 @@ import { type NextRequest } from 'next/server';
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
 
 import { appRouter, createTRPCContext } from '@orbitkit/api';
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/server';
 
 const createContext = async (req: NextRequest) => {
   return createTRPCContext({

apps/web/src/lib/posthog/client.ts

@@ -1,4 +1,4 @@
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/client';
 import { PostHog } from 'posthog-node';
 
 /**

apps/web/src/lib/posthog/react.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/client';
 import posthog from 'posthog-js';
 import { PostHogProvider } from 'posthog-js/react';
 

apps/web/src/middleware.ts

@@ -4,7 +4,7 @@ import type { NextRequest } from 'next/server';
 
 import { Ratelimit } from '@unkey/ratelimit';
 
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/server';
 
 const unkey =
   env.UNKEY_ROOT_KEY && env.UNKEY_NAMESPACE

apps/web/turbo.json

@@ -16,7 +16,7 @@
         "AUTH_GITHUB_SECRET",
         "AUTH_GOOGLE_ID",
         "AUTH_GOOGLE_SECRET",
-        "AUTH_GOOGLE_CODE_VERIFIER",
+        "AUTH_SECRET",
         "NEXT_PUBLIC_POSTHOG_HOST",
         "NEXT_PUBLIC_POSTHOG_KEY"
       ]
@@ -32,7 +32,7 @@
         "AUTH_GITHUB_SECRET",
         "AUTH_GOOGLE_ID",
         "AUTH_GOOGLE_SECRET",
-        "AUTH_GOOGLE_CODE_VERIFIER",
+        "AUTH_SECRET",
         "NEXT_PUBLIC_POSTHOG_HOST",
         "NEXT_PUBLIC_POSTHOG_KEY"
       ]

cspell.config.yaml

@@ -31,6 +31,7 @@ words:
   - callees
   - classname
   - clsx
+  - tsup
   - cmdk
   - codespace
   - codespaces
@@ -53,11 +54,15 @@ words:
   - lockb
   - lucide
   - Malyavko
+  - minimise
   - Mintlify
+  - monorepoing
   - neonctl
   - neondatabase
   - nextjs
   - nzst
+  - onwarn
+  - optimisations
   - orbitkit
   - Ornella
   - packagejson
@@ -79,11 +84,12 @@ words:
   - thollander
   - todos
   - topbar
+  - transpiles
+  - treeshake
   - trpc
   - tsbuildinfo
   - tsconfigs
   - tseslint
-  - tsup
   - Tuite
   - turborepo
   - typecheck
@@ -94,7 +100,3 @@ words:
   - vaul
   - viewports
   - WITA
-  - transpiles
-  - optimisations
-  - minimise
-  - monorepoing

package.json

@@ -56,7 +56,7 @@
     "@types/yargs": "^17.0.32",
     "commitizen": "^4.3.0",
     "cspell": "^8.8.4",
-    "eslint": "^9.4.0",
+    "eslint": "^9.5.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "markdownlint": "^0.34.0",
@@ -66,7 +66,7 @@
     "prettier-plugin-astro": "^0.14.0",
     "prettier-plugin-curly": "^0.2.1",
     "prettier-plugin-packagejson": "^2.5.0",
-    "turbo": "^2.0.3",
+    "turbo": "^2.0.4",
     "typescript": "^5.4.5",
     "yargs": "^17.7.2"
   },

packages/auth/src/lucia.ts

@@ -3,7 +3,7 @@ import { Lucia } from 'lucia';
 
 import { db } from '@orbitkit/db';
 import { sessionTable, userTable } from '@orbitkit/db/schema';
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/server';
 
 const adapter = new DrizzlePostgreSQLAdapter(db, sessionTable, userTable);
 

packages/auth/src/providers/github.ts

@@ -5,7 +5,7 @@ import { generateId } from 'lucia';
 
 import { db } from '@orbitkit/db';
 import { oauthAccountTable, userTable } from '@orbitkit/db/schema';
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/server';
 
 import { lucia } from '../lucia';
 

packages/auth/src/providers/google.ts

@@ -6,7 +6,7 @@ import { z } from 'zod';
 
 import { db } from '@orbitkit/db';
 import { oauthAccountTable, userTable } from '@orbitkit/db/schema';
-import { env } from '@orbitkit/env/web';
+import { env } from '@orbitkit/env/web/server';
 import { getBaseUrl } from '@orbitkit/utils/url';
 
 import { lucia } from '../lucia';
@@ -35,18 +35,9 @@ export async function createGoogleAuthorizationURL(): Promise<Response> {
   }
 
   const state = generateState();
-  const url =
-    env.AUTH_GOOGLE_CODE_VERIFIER !== undefined &&
-    (await google.createAuthorizationURL(state, env.AUTH_GOOGLE_CODE_VERIFIER, {
-      scopes: ['profile', 'email'],
-    }));
-
-  if (!url) {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Not Found',
-    });
-  }
+  const url = await google.createAuthorizationURL(state, env.AUTH_SECRET, {
+    scopes: ['profile', 'email'],
+  });
 
   cookies().set('google_oauth_state', state, {
     path: '/',
@@ -91,19 +82,10 @@ export async function validateGoogleCallback(
   }
 
   try {
-    const tokens =
-      env.AUTH_GOOGLE_CODE_VERIFIER !== undefined &&
-      (await google.validateAuthorizationCode(
-        code,
-        env.AUTH_GOOGLE_CODE_VERIFIER,
-      ));
-
-    if (!tokens) {
-      return new Response(null, {
-        status: 404,
-        statusText: 'Not Found',
-      });
-    }
+    const tokens = await google.validateAuthorizationCode(
+      code,
+      env.AUTH_SECRET,
+    );
 
     const googleUserResponse = await fetch(
       'https://openidconnect.googleapis.com/v1/userinfo',