fix: minimal vite config

2025-11-19 19:21:39 +10:00 · 2025-02-07 16:33:30 +11:00
parent 8373af3f41
commit d3392dada7
17 changed files with 683 additions and 1394 deletions
--- a/apps/remix/app/entry.client.tsx
+++ b/apps/remix/app/entry.client.tsx
@ -25,4 +25,5 @@ async function main() {
  });
 }

-void main();
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+main();
--- a/apps/remix/app/providers/plausible.tsx
+++ b/apps/remix/app/providers/plausible.tsx
@ -1,11 +0,0 @@
-import React from 'react';
-
-import NextPlausibleProvider from 'next-plausible';
-
-export type PlausibleProviderProps = {
-  children: React.ReactNode;
-};
-
-export const PlausibleProvider = ({ children }: PlausibleProviderProps) => {
-  return <NextPlausibleProvider domain="documenso.com">{children}</NextPlausibleProvider>;
-};
--- a/apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx
--- a/apps/remix/app/routes/_authenticated+/admin+/users._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/users._index.tsx
--- a/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx
@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro';
 import { DocumentStatus, SigningStatus } from '@prisma/client';
 import { Clock8 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
-import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
+import { getOptionalLoaderContext } from 'server/utils/get-loader-session';

 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
@ -27,7 +27,7 @@ import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 import type { Route } from './+types/_index';

 export async function loader({ params }: Route.LoaderArgs) {
-  const session = getOptionalLoaderSession();
+  const { session, requestMetadata } = getOptionalLoaderContext();

  const { token } = params;

@ -91,7 +91,7 @@ export async function loader({ params }: Route.LoaderArgs) {

  await viewedDocument({
    token,
-    requestMetadata: context.requestMetadata,
+    requestMetadata,
    recipientAccessAuth: derivedRecipientAccessAuth,
  }).catch(() => null);

--- a/apps/remix/app/routes/_unauthenticated+/share.$slug.opengraph.tsx
+++ b/apps/remix/app/routes/_unauthenticated+/share.$slug.opengraph.tsx
@ -1,6 +1,6 @@
-// Todo: This relies on NextJS
-import { ImageResponse } from 'next/og';
-
+// Todo: Test, used AI to migrate this component from NextJS to Remix.
+import satori from 'satori';
+import sharp from 'sharp';
 import { P, match } from 'ts-pattern';

 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
@ -25,7 +25,7 @@ export const loader = async ({ params }: Route.LoaderArgs) => {

  const baseUrl = NEXT_PUBLIC_WEBAPP_URL();

-  const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
+  const [interSemiBold, interRegular, caveatRegular] = await Promise.all([
    fetch(new URL(`${baseUrl}/fonts/inter-semibold.ttf`, import.meta.url)).then(async (res) =>
      res.arrayBuffer(),
    ),
@ -35,9 +35,6 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
    fetch(new URL(`${baseUrl}/fonts/caveat-regular.ttf`, import.meta.url)).then(async (res) =>
      res.arrayBuffer(),
    ),
-    fetch(new URL(`${baseUrl}/static/og-share-frame2.png`, import.meta.url)).then(async (res) =>
-      res.arrayBuffer(),
-    ),
  ]);

  const recipientOrSender: ShareHandlerAPIResponse = await fetch(
@ -66,65 +63,100 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
      return sender.name || sender.email;
    });

-  return new ImageResponse(
-    (
-      <div tw="relative flex h-full w-full bg-white">
-        {/* @ts-expect-error Lack of typing from ImageResponse */}
-        <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
-
-        {signatureImage ? (
-          <div
-            tw="absolute py-6 px-12 flex items-center justify-center text-center"
-            style={{
-              top: `${CARD_OFFSET_TOP}px`,
-              left: `${CARD_OFFSET_LEFT}px`,
-              width: `${CARD_WIDTH}px`,
-              height: `${CARD_HEIGHT}px`,
-            }}
-          >
-            <img src={signatureImage} alt="signature" tw="opacity-60 h-full max-w-[100%]" />
-          </div>
-        ) : (
-          <p
-            tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center text-slate-500"
-            style={{
-              fontFamily: 'Caveat',
-              fontSize: `${Math.max(
-                Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80),
-                36,
-              )}px`,
-              top: `${CARD_OFFSET_TOP}px`,
-              left: `${CARD_OFFSET_LEFT}px`,
-              width: `${CARD_WIDTH}px`,
-              height: `${CARD_HEIGHT}px`,
-            }}
-          >
-            {signatureName}
-          </p>
-        )}
+  // Generate SVG using Satori
+  const svg = await satori(
+    <div
+      style={{
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+        backgroundColor: 'white',
+        position: 'relative',
+      }}
+    >
+      <img
+        src={`${baseUrl}/static/og-share-frame2.png`}
+        alt="og-share-frame"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+        }}
+      />

+      {signatureImage ? (
        <div
-          tw="absolute flex w-full"
          style={{
-            top: `${CARD_OFFSET_TOP - 78}px`,
-            left: `${CARD_OFFSET_LEFT}px`,
+            position: 'absolute',
+            padding: '24px 48px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            top: CARD_OFFSET_TOP,
+            left: CARD_OFFSET_LEFT,
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
          }}
        >
-          <h2
-            tw="text-xl"
+          <img
+            src={signatureImage}
+            alt="signature"
            style={{
-              color: '#828282',
-              fontFamily: 'Inter',
-              fontWeight: 700,
+              opacity: 0.6,
+              height: '100%',
+              maxWidth: '100%',
            }}
-          >
-            {isRecipient ? 'Document Signed!' : 'Document Sent!'}
-          </h2>
+          />
        </div>
+      ) : (
+        <p
+          style={{
+            position: 'absolute',
+            padding: '24px 48px',
+            marginTop: '-8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            color: '#64748b',
+            fontFamily: 'Caveat',
+            fontSize: Math.max(Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80), 36),
+            top: CARD_OFFSET_TOP,
+            left: CARD_OFFSET_LEFT,
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
+          }}
+        >
+          {signatureName}
+        </p>
+      )}
+
+      <div
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          width: '100%',
+          top: CARD_OFFSET_TOP - 78,
+          left: CARD_OFFSET_LEFT,
+        }}
+      >
+        <h2
+          style={{
+            fontSize: '20px',
+            color: '#828282',
+            fontFamily: 'Inter',
+            fontWeight: 700,
+          }}
+        >
+          {isRecipient ? 'Document Signed!' : 'Document Sent!'}
+        </h2>
      </div>
-    ),
+    </div>,
    {
-      ...IMAGE_SIZE,
+      width: IMAGE_SIZE.width,
+      height: IMAGE_SIZE.height,
      fonts: [
        {
          name: 'Caveat',
@ -134,20 +166,27 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
        {
          name: 'Inter',
          data: interRegular,
-          style: 'normal',
          weight: 400,
        },
        {
          name: 'Inter',
          data: interSemiBold,
-          style: 'normal',
          weight: 600,
        },
      ],
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET, OPTIONS',
-      },
    },
  );
+
+  // Convert SVG to PNG using sharp
+  const pngBuffer = await sharp(Buffer.from(svg)).toFormat('png').toBuffer();
+
+  return new Response(pngBuffer, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Content-Length': pngBuffer.length.toString(),
+      'Cache-Control': 'public, max-age=31536000, immutable',
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+    },
+  });
 };
--- a/apps/remix/package.json
+++ b/apps/remix/package.json
@ -3,9 +3,8 @@
  "private": true,
  "type": "module",
  "scripts": {
-    "build": "cross-env NODE_ENV=production bunx --bun vite build",
-    "dev": "bunx --bun vite",
-    "dev:node": "react-router dev",
+    "build": "cross-env NODE_ENV=production react-router build",
+    "dev": "react-router dev",
    "start": "cross-env NODE_ENV=production node dist/server/index.js",
    "clean": "rimraf .react-router && rimraf node_modules",
    "typecheck": "react-router typegen && tsc",
@ -26,10 +25,10 @@
    "@hono/trpc-server": "^0.3.4",
    "@hono/zod-validator": "^0.4.2",
    "@hookform/resolvers": "^3.1.0",
-    "@lingui/core": "^4.11.3",
-    "@lingui/detect-locale": "^4.11.1",
-    "@lingui/macro": "^4.11.3",
-    "@lingui/react": "^4.11.3",
+    "@lingui/core": "^5.2.0",
+    "@lingui/detect-locale": "^5.2.0",
+    "@lingui/macro": "^5.2.0",
+    "@lingui/react": "^5.2.0",
    "@oslojs/crypto": "^1.0.1",
    "@oslojs/encoding": "^1.1.0",
    "@react-router/node": "^7.1.5",
@ -62,6 +61,7 @@
    "recharts": "^2.7.2",
    "remeda": "^2.17.3",
    "remix-themes": "^2.0.4",
+    "satori": "^0.12.1",
    "sharp": "0.32.6",
    "tailwindcss": "^3.4.15",
    "ts-pattern": "^5.0.5",
--- a/apps/remix/server/main.ts
+++ b/apps/remix/server/main.ts
@ -5,7 +5,6 @@ import handle from 'hono-react-router-adapter/node';

 import server from '.';
 import * as build from '../build/server';
-import { getLoadContext } from './load-context';

 server.use(
  serveStatic({
@ -13,6 +12,6 @@ server.use(
  }),
 );

-const handler = handle(build, server, { getLoadContext });
+const handler = handle(build, server);

 serve({ fetch: handler.fetch, port: 3000 });
--- a/apps/remix/server/utils/get-loader-session.ts
+++ b/apps/remix/server/utils/get-loader-session.ts
@ -1,9 +1,30 @@
 import { getContext } from 'hono/context-storage';
 import { redirect } from 'react-router';
 import type { HonoEnv } from 'server';
+import type { AppContext } from 'server/context';

 import type { AppSession } from '@documenso/lib/client-only/providers/session';

+/**
+ * Get the full context passed to the loader.
+ *
+ * @returns The full app context.
+ */
+export const getOptionalLoaderContext = (): AppContext => {
+  const { context } = getContext<HonoEnv>().var;
+  return context;
+};
+
+/**
+ * Returns the session extracted from the app context.
+ *
+ * @returns The session, or null if not authenticated.
+ */
+export const getOptionalLoaderSession = (): AppSession | null => {
+  const { context } = getContext<HonoEnv>().var;
+  return context.session;
+};
+
 /**
 * Returns the session context or throws a redirect to signin if it is not present.
 */
@ -17,11 +38,6 @@ export const getLoaderSession = (): AppSession => {
  return session;
 };

-export const getOptionalLoaderSession = (): AppSession | null => {
-  const { context } = getContext<HonoEnv>().var;
-  return context.session;
-};
-
 /**
 * Returns the team session context or throws a redirect to signin if it is not present.
 */
--- a/apps/remix/vite.config.ts
+++ b/apps/remix/vite.config.ts
@ -22,50 +22,59 @@ export default defineConfig({
      plugins: [tailwindcss, autoprefixer],
    },
  },
-  ssr: {
-    noExternal: [
-      'react-dropzone',
-      'recharts',
-      'superjson',
-      // '@node-rs/bcrypt-wasm32-wasi',
-      // '@noble/ciphers/chacha',
-      // '@noble/ciphers/utils',
-      // '@noble/ciphers/webcrypto/utils',
-      // '@noble/hashes/sha256a',
-      // '@node-rs/bcrypt',
-      // 'crypto',
-      // '@documenso/assets',
-      // '@documenso/ee',
-      // '@documenso/lib',
-      // '@documenso/prisma',
-      // '@documenso/tailwind-config',
-      // '@documenso/trpc',
-      // '@documenso/ui',
-    ],
-  },
  server: {
    port: 3000,
    strictPort: true,
  },
  plugins: [
    reactRouter(),
-    lingui(),
    macrosPlugin(),
+    lingui(),
+    tsconfigPaths(),
    serverAdapter({
      entry: 'server/index.ts',
    }),
-    tsconfigPaths(),
  ],
+  ssr: {
+    noExternal: ['react-dropzone', 'plausible-tracker', 'pdfjs-dist'],
+    external: ['@node-rs/bcrypt'],
+  },
  optimizeDeps: {
-    exclude: ['superjson'],
-    // force: true,
-  },
-  build: {
-    commonjsOptions: {
-      include: ['superjson'],
-    },
-    rollupOptions: {
-      external: ['@node-rs/bcrypt'],
-    },
+    exclude: ['@node-rs/bcrypt'],
  },
+  /**
+   * Throwing shit at a wall to see what sticks for building below onwards.
+   */
+  // resolve: {
+  //   alias: {
+  //     // https: 'node:https',
+  //     // '.prisma/client/default': '../../node_modules/.prisma/client/default.js',
+  //   },
+  // },
+  // optimizeDeps: {
+  //   include: [],
+  // },
+  // ssr: {
+  //   // noExternal: true,
+  //   noExternal: [
+  //     '@documenso/assets',
+  //     '@documenso/ee',
+  //     '@documenso/lib',
+  //     '@documenso/prisma',
+  //     '@documenso/tailwind-config',
+  //     '@documenso/trpc',
+  //     '@documenso/ui',
+  //   ],
+  // },
+  // build: {
+  //   rollupOptions: {
+  //     external: [
+  //       '@node-rs/bcrypt',
+  //       '@documenso/pdf-sign',
+  //       'nodemailer',
+  //       'playwright',
+  //       '@aws-sdk/cloudfront-signer',
+  //     ],
+  //   },
+  // },
 });
--- a/lingui.config.ts
+++ b/lingui.config.ts
@ -9,7 +9,7 @@ const config: LinguiConfig = {
  catalogs: [
    {
      path: '<rootDir>/packages/lib/translations/{locale}/web',
-      include: ['apps/web/src', 'packages/ui', 'packages/lib', 'packages/email'],
+      include: ['apps/remix/src', 'packages/ui', 'packages/lib', 'packages/email'],
      exclude: ['**/node_modules/**'],
    },
  ],
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -43,7 +43,7 @@
  "devDependencies": {
    "@commitlint/cli": "^17.7.1",
    "@commitlint/config-conventional": "^17.7.0",
-    "@lingui/cli": "^4.11.3",
+    "@lingui/cli": "^5.2.0",
    "@trigger.dev/cli": "^2.3.18",
    "dotenv": "^16.3.1",
    "dotenv-cli": "^7.3.0",
@ -65,7 +65,8 @@
  "dependencies": {
    "@documenso/pdf-sign": "^0.1.0",
    "@documenso/prisma": "^0.0.0",
-    "@lingui/core": "^4.11.3",
+    "@lingui/conf": "^5.2.0",
+    "@lingui/core": "^5.2.0",
    "inngest-cli": "^0.29.1",
    "luxon": "^3.5.0",
    "mupdf": "^1.0.0",
--- a/packages/email/package.json
+++ b/packages/email/package.json
@ -35,6 +35,8 @@
    "@react-email/section": "0.0.10",
    "@react-email/tailwind": "0.0.9",
    "@react-email/text": "0.0.6",
+    "@lingui/macro": "^5.2.0",
+    "@lingui/react": "^5.2.0",
    "nodemailer": "^6.9.9",
    "react-email": "^1.9.5",
    "resend": "^2.0.0"
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@ -25,9 +25,9 @@
    "@documenso/prisma": "*",
    "@documenso/signing": "*",
    "@honeybadger-io/js": "^6.10.1",
-    "@lingui/core": "^4.11.3",
-    "@lingui/macro": "^4.11.3",
-    "@lingui/react": "^4.11.3",
+    "@lingui/core": "^5.2.0",
+    "@lingui/macro": "^5.2.0",
+    "@lingui/react": "^5.2.0",
    "@noble/ciphers": "0.4.0",
    "@noble/hashes": "1.3.2",
    "@node-rs/bcrypt": "^1.10.0",
--- a/packages/lib/server-only/pdf/insert-field-in-pdf.ts
+++ b/packages/lib/server-only/pdf/insert-field-in-pdf.ts
@ -5,6 +5,9 @@ import type { PDFDocument } from 'pdf-lib';
 import { RotationTypes, degrees, radiansToDegrees } from 'pdf-lib';
 import { P, match } from 'ts-pattern';

+// Todo: Check if this is okay to do compared to the old approach.
+import fontCaveat from '@documenso/assets/fonts/caveat.ttf?inline';
+import fontNoto from '@documenso/assets/fonts/noto-sans.ttf?inline';
 import {
  DEFAULT_HANDWRITING_FONT_SIZE,
  DEFAULT_STANDARD_FONT_SIZE,
@ -25,20 +28,8 @@ import {
  ZRadioFieldMeta,
  ZTextFieldMeta,
 } from '../../types/field-meta';
-import { env } from '../../utils/env';

 export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignature) => {
-  const fontCaveatUri = env('FONT_CAVEAT_URI');
-  const fontNotoSansUri = env('FONT_NOTO_SANS_URI');
-
-  if (!fontCaveatUri || !fontNotoSansUri) {
-    throw new Error('Missing font URI');
-  }
-
-  const fontCaveat = await fetch(fontCaveatUri).then(async (res) => res.arrayBuffer());
-
-  const fontNoto = await fetch(fontNotoSansUri).then(async (res) => res.arrayBuffer());
-
  const isSignatureField = isSignatureFieldType(field.type);

  pdf.registerFontkit(fontkit);
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -29,8 +29,8 @@
    "@documenso/lib": "*",
    "@hello-pangea/dnd": "^16.6.0",
    "@hookform/resolvers": "^3.3.0",
-    "@lingui/macro": "^4.11.3",
-    "@lingui/react": "^4.11.3",
+    "@lingui/macro": "^5.2.0",
+    "@lingui/react": "^5.2.0",
    "@radix-ui/react-accordion": "^1.1.1",
    "@radix-ui/react-alert-dialog": "^1.0.3",
    "@radix-ui/react-aspect-ratio": "^1.0.2",