Fix/nextjs sdk: inline lru-cache (#3590)

## Description

Add a short description of what changes you made, why you made them, and
any other context that you think might be helpful for someone to better
understand what is contained in this pull request. This sort of
information is useful for people reviewing the code, as well as anyone
from the future trying to understand why changes were made or why a bug
started happening.

_Screenshot_
If relevant, add a screenshot or two of the changes you made.

Author: samijaber

.changeset/cold-pillows-agree.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-react-nextjs": patch
+---
+
+misc: inline `lru-cache` dependency

.changeset/young-ladybugs-lick.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/sdk-react-nextjs': patch
+---
+
+Fix: previewing content while inline editing.
+Chore: refactored build process to `preserveModules` in output.

examples/next-js-sdk-gen-2-experimental-app-directory/package-lock.json

@@ -8,7 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@builder.io/sdk-react-nextjs": "^0.14.30-0",
+    "@builder.io/sdk-react-nextjs": "^0.16.11",
     "next": "^14.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/next-js-sdk-gen-2-experimental-app-directory/package.json

@@ -31,7 +31,7 @@
     "lint:fix": "prettier --write '**/*.{js,jsx,ts,tsx}'",
     "update-npm-dependency": "zx ./scripts/update-npm-dependency.mjs",
     "g:changeset": "changeset",
-    "g:nx": "nx"
+    "g:nx": "cd $INIT_CWD && nx"
   },
   "engines": {
     "yarn": ">= 3.0.0"

package.json

@@ -24,10 +24,6 @@ test.describe('Hydration', () => {
 
   test('No mismatch on A/B test content', async ({ page, packageName }) => {
     test.skip(packageName === 'angular-ssr', 'Angular SSR does not support A/B tests');
-    test.fail(
-      packageName === 'nextjs-sdk-next-app',
-      "NextJS SDK currently does not support SSR'd A/B tests. Losing variants are stripped from SSR'd Content too late."
-    );
     await page.goto('/ab-test-interactive');
     await page.locator('a').locator('visible=true').first().click({ timeout: 10000 });
     await findTextInPage({ page, text: 'Stack at tablet' });

packages/sdks-tests/src/e2e-tests/hydration.spec.ts

@@ -5,16 +5,14 @@ import { checkIsRN, test } from '../helpers/index.js';
 test.describe('Slot', () => {
   test('slot should render', async ({ page, packageName }) => {
     // gen1-remix and gen1-next skipped because React.useContext is not recognized
-    // rsc skipped because it fetches the slot content from the server
-    test.fail(['gen1-remix', 'gen1-next', 'nextjs-sdk-next-app'].includes(packageName));
+    test.fail(['gen1-remix', 'gen1-next'].includes(packageName));
     await page.goto('/slot');
     await expect(page.locator('text=Inside a slot!!')).toBeVisible();
   });
 
   test('slot should render in the correct place', async ({ page, packageName, sdk }) => {
     // gen1-remix and gen1-next skipped because React.useContext is not recognized
-    // rsc skipped because it fetches the slot content from the server
-    test.fail(['gen1-remix', 'gen1-next', 'nextjs-sdk-next-app'].includes(packageName));
+    test.fail(['gen1-remix', 'gen1-next'].includes(packageName));
     await page.goto('/slot');
     const builderTextElements = checkIsRN(sdk)
       ? page.locator('[data-testid="div"]')
@@ -27,8 +25,7 @@ test.describe('Slot', () => {
 
   test('slot should render with symbol (with content)', async ({ page, packageName }) => {
     // gen1-remix and gen1-next skipped because React.useContext is not recognized
-    // rsc skipped because it fetches the slot content from the server
-    test.fail(['gen1-remix', 'gen1-next', 'nextjs-sdk-next-app'].includes(packageName));
+    test.fail(['gen1-remix', 'gen1-next'].includes(packageName));
     await page.goto('/slot-with-symbol');
 
     await expect(page.locator('text=This is called recursion!')).toBeVisible();

packages/sdks-tests/src/e2e-tests/slot.spec.ts

@@ -229,8 +229,7 @@ test.describe('Symbols', () => {
     await page.goto('/nested-symbols');
 
     // gen1-remix and gen1-next are also skipped because React.useContext is not recognized
-    // rsc skipped because it fetches the content from the server
-    test.fail(['gen1-remix', 'gen1-next', 'nextjs-sdk-next-app'].includes(packageName));
+    test.fail(['gen1-remix', 'gen1-next'].includes(packageName));
 
     const symbols = page.locator('[builder-model="symbol"]');
     await expect(symbols).toHaveCount(2);

packages/sdks-tests/src/e2e-tests/symbols.spec.ts

@@ -110,8 +110,7 @@
     "vite": "^4.4.9"
   },
   "dependencies": {
-    "isolated-vm": "^5.0.0",
-    "lru-cache": "^10.0.0"
+    "isolated-vm": "^5.0.0"
   },
   "nx": {
     "targets": {

packages/sdks/output/nextjs/package.json

@@ -1,5 +1,6 @@
 import { viteOutputGenerator } from '@builder.io/sdks/output-generation/index.js';
 import react from '@vitejs/plugin-react';
+import fs from 'node:fs';
 import { defineConfig, Plugin } from 'vite';
 
 const SERVER_ENTRY = 'server-entry';
@@ -42,33 +43,37 @@ export default defineConfig({
         'node:module',
         'isolated-vm',
         'next/navigation',
-        'lru-cache',
       ],
       output: {
         globals: {
           react: 'react',
           'react-dom': 'ReactDOM',
           'react/jsx-runtime': 'react/jsx-runtime',
         },
+        preserveModules: true,
         minifyInternalExports: false,
-        manualChunks(id, { getModuleIds, getModuleInfo }) {
-          const moduleInfo = getModuleInfo(id);
-
-          /**
-           * We make sure any code used by the server entry is bundled into it,
-           * so that it doesn't get marked with `use client`.
-           */
-          if (
-            moduleInfo?.importers.some((x) => x.includes('server-index.ts'))
-          ) {
-            return SERVER_ENTRY;
-          }
-        },
+        /**
+         * preserve directives from the original file
+         */
         banner(chunk) {
-          if (chunk.name === BLOCKS_EXPORTS_ENTRY) {
-            return "'use client';";
+          const filePath = chunk.facadeModuleId;
+          if (chunk.importedBindings?.['react']?.includes('createContext')) {
+            return "'use client';\n";
+          } else if (filePath) {
+            const content = fs.readFileSync(filePath, 'utf-8');
+            const DIRECTIVES = [
+              "'use client'",
+              '"use client"',
+              '"use server"',
+              "'use server'",
+            ];
+            const directive = DIRECTIVES.find((directive) =>
+              content.startsWith(directive)
+            );
+            if (directive) {
+              return directive + '\n';
+            }
           }
-
           return '';
         },
       },

packages/sdks/output/nextjs/vite.config.ts

@@ -10,3 +10,40 @@ export const getIdFromSearchParams = (searchParams: URLSearchParams) => {
 
   return previewedId;
 };
+
+export class LRUCache<K, V> {
+  private capacity: number;
+  private cache: Map<K, V>;
+
+  constructor({ capacity }: { capacity: number }) {
+    this.capacity = capacity;
+    this.cache = new Map<K, V>();
+  }
+
+  get(key: K): V | undefined {
+    if (!this.cache.has(key)) {
+      return undefined;
+    }
+
+    // Remove and re-insert the key-value pair to move it to the end (most recently used)
+    const value = this.cache.get(key)!;
+    this.cache.delete(key);
+    this.cache.set(key, value);
+
+    return value;
+  }
+
+  set(key: K, value: V): void {
+    if (this.cache.has(key)) {
+      // If the key exists, remove it first
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.capacity) {
+      // If the cache is at capacity, remove the least recently used item (first item)
+      const firstKey = this.cache.keys().next().value;
+      this.cache.delete(firstKey);
+    }
+
+    // Add the new key-value pair
+    this.cache.set(key, value);
+  }
+}

packages/sdks/overrides/rsc/src/helpers/preview-lru-cache/helpers.ts

@@ -1,18 +1,10 @@
-/**
- * This is an LRU cache to hold preview content on the server-side.
- *
- * Note: This logic is only used by the NextJS SDK.
- */
-
-import { LRUCache } from 'lru-cache';
+import { LRUCache } from './helpers.js';
 import type { GlobalWCache } from './types.js';
 
 export function init() {
   if (!(globalThis as GlobalWCache)._BUILDER_PREVIEW_LRU_CACHE) {
     (globalThis as GlobalWCache)._BUILDER_PREVIEW_LRU_CACHE = new LRUCache({
-      max: 500,
-      // how long to live in ms
-      ttl: 1000 * 60 * 5,
+      capacity: 500,
     });
   }
 }

packages/sdks/overrides/rsc/src/helpers/preview-lru-cache/init.ts

@@ -4,7 +4,7 @@
  * Note: This logic is only used by the NextJS SDK.
  */
 
-import type { LRUCache } from 'lru-cache';
+import type { LRUCache } from './helpers.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 
 type BuilderLRUCache = LRUCache<string, BuilderContent>;

packages/sdks/overrides/rsc/src/helpers/preview-lru-cache/types.ts

@@ -4009,7 +4009,6 @@ __metadata:
     "@builder.io/sdks": "workspace:*"
     "@vitejs/plugin-react": ^4.0.4
     isolated-vm: ^5.0.0
-    lru-cache: ^10.0.0
     next: ">=13.4.20"
     react: ^18.2.0
     typescript: ^5.1.6
@@ -35291,7 +35290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.0.2, lru-cache@npm:^9.1.1 || ^10.0.0":
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.0.2, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.1.0
   resolution: "lru-cache@npm:10.1.0"
   checksum: 58056d33e2500fbedce92f8c542e7c11b50d7d086578f14b7074d8c241422004af0718e08a6eaae8705cee09c77e39a61c1c79e9370ba689b7010c152e6a76ab