Merge branch 'canary' into 11-15-tweak_cache_revalidate_fetch_warning

vercel · Nov 16, 2023 · cf83dfd · cf83dfd
2 parents 382181c + d6d6d56
commit cf83dfd
Show file tree

Hide file tree

Showing 17 changed files with 272 additions and 22 deletions.
diff --git a/packages/next-swc/crates/core/src/lib.rs b/packages/next-swc/crates/core/src/lib.rs
@@ -230,7 +230,7 @@ where
                 Some(config) if config.truthy() => match config {
                     // Always enable the Server Components mode for both
                     // server and client layers.
-                    react_server_components::Config::WithOptions(_) => true,
+                    react_server_components::Config::WithOptions(config) => config.is_react_server_layer,
                     _ => false,
                 },
                 _ => false,

diff --git a/packages/next-swc/crates/core/tests/fixture.rs b/packages/next-swc/crates/core/tests/fixture.rs
@@ -112,7 +112,11 @@ fn next_dynamic_fixture(input: PathBuf) {
 fn app_dir_next_dynamic_fixture(input: PathBuf) {
     let output_dev = input.parent().unwrap().join("output-dev.js");
     let output_prod = input.parent().unwrap().join("output-prod.js");
-    let output_server = input.parent().unwrap().join("output-server.js");
+    let output_server: PathBuf = input.parent().unwrap().join("output-server.js");
+    let output_server_client_layer = input
+        .parent()
+        .unwrap()
+        .join("output-server-client-layer.js");
     test_fixture(
         syntax(),
         &|_tr| {
@@ -161,6 +165,22 @@ fn app_dir_next_dynamic_fixture(input: PathBuf) {
         &output_server,
         Default::default(),
     );
+    test_fixture(
+        syntax(),
+        &|_tr| {
+            next_dynamic(
+                false,
+                true,
+                false,
+                NextDynamicMode::Webpack,
+                FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+                Some("/some-project/src".into()),
+            )
+        },
+        &input,
+        &output_server_client_layer,
+        Default::default(),
+    );
 }
 
 #[fixture("tests/fixture/ssg/**/input.js")]

diff --git a/...t-swc/crates/core/tests/fixture/next-dynamic-app-dir/no-ssr/output-server-client-layer.js b/...t-swc/crates/core/tests/fixture/next-dynamic-app-dir/no-ssr/output-server-client-layer.js
@@ -0,0 +1,11 @@
+import dynamic from 'next/dynamic';
+export const NextDynamicNoSSRServerComponent = dynamic(async ()=>{
+    typeof require.resolveWeak !== "undefined" && require.resolveWeak("../text-dynamic-no-ssr-server");
+}, {
+    loadableGenerated: {
+        modules: [
+            "some-file.js -> " + "../text-dynamic-no-ssr-server"
+        ]
+    },
+    ssr: false
+});
diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/issue-48098/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/issue-48098/output-server.js
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic';
-export const NextDynamicNoSSRServerComponent = dynamic(null, {
+export const NextDynamicNoSSRServerComponent = dynamic(async ()=>{
+    typeof require.resolveWeak !== "undefined" && require.resolveWeak("../text-dynamic-no-ssr-server");
+}, {
     loadableGenerated: {
         modules: [
             "some-file.js -> " + "../text-dynamic-no-ssr-server"

diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-server.js
@@ -7,15 +7,19 @@ const DynamicComponentWithCustomLoading = dynamic(()=>import('../components/hell
     },
     loading: ()=><p>...</p>
 });
-const DynamicClientOnlyComponent = dynamic(null, {
+const DynamicClientOnlyComponent = dynamic(async ()=>{
+    typeof require.resolveWeak !== "undefined" && require.resolveWeak("../components/hello");
+}, {
     loadableGenerated: {
         modules: [
             "some-file.js -> " + "../components/hello"
         ]
     },
     ssr: false
 });
-const DynamicClientOnlyComponentWithSuspense = dynamic(()=>import('../components/hello'), {
+const DynamicClientOnlyComponentWithSuspense = dynamic(async ()=>{
+    typeof require.resolveWeak !== "undefined" && require.resolveWeak("../components/hello");
+}, {
     loadableGenerated: {
         modules: [
             "some-file.js -> " + "../components/hello"

diff --git a/packages/next-swc/crates/core/tests/fixture/next-dynamic/wrapped-import/output-server.js b/packages/next-swc/crates/core/tests/fixture/next-dynamic/wrapped-import/output-server.js
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic';
-const DynamicComponent = dynamic(null, {
+const DynamicComponent = dynamic(async ()=>{
+    typeof require.resolveWeak !== "undefined" && require.resolveWeak("./components/hello");
+}, {
     loadableGenerated: {
         modules: [
             "some-file.js -> " + "./components/hello"

diff --git a/packages/next-swc/crates/next-transform-dynamic/src/lib.rs b/packages/next-swc/crates/next-transform-dynamic/src/lib.rs
@@ -8,12 +8,12 @@ use swc_core::{
     common::{errors::HANDLER, FileName, Span, DUMMY_SP},
     ecma::{
         ast::{
-            ArrayLit, ArrowExpr, BlockStmtOrExpr, Bool, CallExpr, Callee, Expr, ExprOrSpread,
-            ExprStmt, Id, Ident, ImportDecl, ImportDefaultSpecifier, ImportNamedSpecifier,
-            ImportSpecifier, KeyValueProp, Lit, ModuleDecl, ModuleItem, Null, ObjectLit, Prop,
-            PropName, PropOrSpread, Stmt, Str, Tpl,
+            op, ArrayLit, ArrowExpr, BinExpr, BlockStmt, BlockStmtOrExpr, Bool, CallExpr, Callee,
+            Expr, ExprOrSpread, ExprStmt, Id, Ident, ImportDecl, ImportDefaultSpecifier,
+            ImportNamedSpecifier, ImportSpecifier, KeyValueProp, Lit, ModuleDecl, ModuleItem,
+            ObjectLit, Prop, PropName, PropOrSpread, Stmt, Str, Tpl, UnaryExpr, UnaryOp,
         },
-        utils::{private_ident, ExprFactory},
+        utils::{private_ident, quote_ident, ExprFactory},
         visit::{Fold, FoldWith},
     },
     quote,
@@ -236,12 +236,12 @@ impl Fold for NextDynamicPatcher {
                                             rel_filename(self.pages_dir.as_deref(), &self.filename)
                                         )
                                         .into(),
-                                        right: Expr = dynamically_imported_specifier.into(),
+                                        right: Expr = dynamically_imported_specifier.clone().into(),
                                     ))
                                 } else {
                                     webpack_options(quote!(
                                         "require.resolveWeak($id)" as Expr,
-                                        id: Expr = dynamically_imported_specifier.into()
+                                        id: Expr = dynamically_imported_specifier.clone().into()
                                     ))
                                 }
                             }
@@ -259,7 +259,7 @@ impl Fold for NextDynamicPatcher {
                                         imports.push(TurbopackImport::DevelopmentTransition {
                                             id_ident: id_ident.clone(),
                                             chunks_ident: chunks_ident.clone(),
-                                            specifier: dynamically_imported_specifier,
+                                            specifier: dynamically_imported_specifier.clone(),
                                         });
 
                                         // On the server, the key needs to be serialized because it
@@ -280,7 +280,7 @@ impl Fold for NextDynamicPatcher {
                                     (true, false) => {
                                         imports.push(TurbopackImport::DevelopmentId {
                                             id_ident: id_ident.clone(),
-                                            specifier: dynamically_imported_specifier,
+                                            specifier: dynamically_imported_specifier.clone(),
                                         });
 
                                         // On the client, we only need the target module ID, which
@@ -365,11 +365,54 @@ impl Fold for NextDynamicPatcher {
                         }
                     }
 
-                    // Also don't strip the `loader` argument for server components (both
-                    // server/client layers), since they're aliased to a
-                    // React.lazy implementation.
-                    if has_ssr_false && self.is_server_compiler && !self.is_react_server_layer {
-                        expr.args[0] = Lit::Null(Null { span: DUMMY_SP }).as_arg();
+                    if has_ssr_false
+                        && self.is_server_compiler
+                        && !self.is_react_server_layer
+                        // Only use `require.resolveWebpack` to decouple modules for webpack,
+                        // turbopack doesn't need this
+                        && self.state == NextDynamicPatcherState::Webpack
+                    {
+                        // if it's server components SSR layer
+                        // Transform 1st argument `expr.args[0]` aka the module loader from:
+                        // dynamic(() => import('./client-mod'), { ssr: false }))`
+                        // into:
+                        // dynamic(async () => {
+                        //   require.resolveWeak('./client-mod')
+                        // }, { ssr: false }))`
+
+                        let require_resolve_weak_expr = Expr::Call(CallExpr {
+                            span: DUMMY_SP,
+                            callee: quote_ident!("require.resolveWeak").as_callee(),
+                            args: vec![ExprOrSpread {
+                                spread: None,
+                                expr: Box::new(Expr::Lit(Lit::Str(Str {
+                                    span: DUMMY_SP,
+                                    value: dynamically_imported_specifier.clone().into(),
+                                    raw: None,
+                                }))),
+                            }],
+                            type_args: Default::default(),
+                        });
+
+                        let side_effect_free_loader_arg = Expr::Arrow(ArrowExpr {
+                            span: DUMMY_SP,
+                            params: vec![],
+                            body: Box::new(BlockStmtOrExpr::BlockStmt(BlockStmt {
+                                span: DUMMY_SP,
+                                stmts: vec![Stmt::Expr(ExprStmt {
+                                    span: DUMMY_SP,
+                                    expr: Box::new(exec_expr_when_resolve_weak_available(
+                                        &require_resolve_weak_expr,
+                                    )),
+                                })],
+                            })),
+                            is_async: true,
+                            is_generator: false,
+                            type_params: None,
+                            return_type: None,
+                        });
+
+                        expr.args[0] = side_effect_free_loader_arg.as_arg();
                     }
 
                     let second_arg = ExprOrSpread {
@@ -562,6 +605,37 @@ impl NextDynamicPatcher {
     }
 }
 
+fn exec_expr_when_resolve_weak_available(expr: &Expr) -> Expr {
+    let undefined_str_literal = Expr::Lit(Lit::Str(Str {
+        span: DUMMY_SP,
+        value: "undefined".into(),
+        raw: None,
+    }));
+
+    let typeof_expr = Expr::Unary(UnaryExpr {
+        span: DUMMY_SP,
+        op: UnaryOp::TypeOf, // 'typeof' operator
+        arg: Box::new(Expr::Ident(Ident {
+            span: DUMMY_SP,
+            sym: quote_ident!("require.resolveWeak").sym,
+            optional: false,
+        })),
+    });
+
+    // typeof require.resolveWeak !== 'undefined' && <expression>
+    Expr::Bin(BinExpr {
+        span: DUMMY_SP,
+        left: Box::new(Expr::Bin(BinExpr {
+            span: DUMMY_SP,
+            op: op!("!=="),
+            left: Box::new(typeof_expr),
+            right: Box::new(undefined_str_literal),
+        })),
+        op: op!("&&"),
+        right: Box::new(expr.clone()),
+    })
+}
+
 fn rel_filename(base: Option<&Path>, file: &FileName) -> String {
     let base = match base {
         Some(v) => v,

diff --git a/test/e2e/app-dir/actions/app-action.test.ts b/test/e2e/app-dir/actions/app-action.test.ts
@@ -323,6 +323,20 @@ createNextDescribe(
       }, '1')
     })
 
+    it('should support next/dynamic with ssr: false (edge)', async () => {
+      const browser = await next.browser('/dynamic-csr/edge')
+
+      await check(() => {
+        return browser.elementByCss('button').text()
+      }, '0')
+
+      await browser.elementByCss('button').click()
+
+      await check(() => {
+        return browser.elementByCss('button').text()
+      }, '1')
+    })
+
     it('should only submit action once when resubmitting an action after navigation', async () => {
       let requestCount = 0
 

diff --git a/test/e2e/app-dir/actions/app/dynamic-csr/edge/page.js b/test/e2e/app-dir/actions/app/dynamic-csr/edge/page.js
@@ -0,0 +1,20 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const DynamicComponent = dynamic(
+  () => import('../csr').then((mod) => mod.CSR),
+  {
+    ssr: false,
+  }
+)
+
+export default function Client() {
+  return (
+    <div>
+      <DynamicComponent />
+    </div>
+  )
+}
+
+export const runtime = 'edge'
diff --git a/test/e2e/app-dir/dynamic/app/chunk-loading/page.js b/test/e2e/app-dir/dynamic/app/chunk-loading/page.js
@@ -3,9 +3,11 @@
 
 'use client'
 
+function noop() {}
+
 export default function Page() {
   import('./comp').then((m) => {
-    console.log(m)
+    noop(m)
   })
   return null
 }
diff --git a/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/client-edge/page.js b/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/client-edge/page.js
@@ -0,0 +1,5 @@
+'use client'
+
+export { default } from '../dynamic-import'
+
+export const runtime = 'edge'
diff --git a/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/client/page.js b/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/client/page.js
@@ -0,0 +1,3 @@
+'use client'
+
+export { default } from '../dynamic-import'
diff --git a/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/dynamic-import.js b/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/dynamic-import.js
@@ -0,0 +1,14 @@
+import dynamic from 'next/dynamic'
+
+const DynamicSSRFalse = dynamic(() => import('./ssr-false-module'), {
+  ssr: false,
+})
+
+export default function page() {
+  return (
+    <div>
+      <DynamicSSRFalse />
+      <p id="content">dynamic-mixed-ssr-false</p>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/ssr-false-module/index.js b/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/ssr-false-module/index.js
@@ -0,0 +1,11 @@
+import Client from './ssr-false-client'
+import Server from './ssr-false-server'
+
+export default function Comp() {
+  return (
+    <>
+      <Client />
+      <Server />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/ssr-false-module/ssr-false-client.js b/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/ssr-false-module/ssr-false-client.js
@@ -0,0 +1,5 @@
+'use client'
+
+export default function Comp() {
+  return <p id="ssr-false-client-module">ssr-false-client-module-text</p>
+}
diff --git a/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/ssr-false-module/ssr-false-server.js b/test/e2e/app-dir/dynamic/app/dynamic-mixed-ssr-false/ssr-false-module/ssr-false-server.js
@@ -0,0 +1,3 @@
+export default function Comp() {
+  return <p id="ssr-false-server-module">ssr-false-server-module-text</p>
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		'use client'

		export { default } from '../dynamic-import'