Babel & next-swc: Fix exporting page config with AsExpression

packages/next-swc/crates/core/src/page_config.rs

@@ -82,7 +82,15 @@ impl Fold for PageConfig {
                     }
 
                     if is_config {
-                        if let Some(expr) = &decl.init {
+                        let init = decl.init.as_ref().map(|expr| {
+                            if let Expr::TsAs(ts_as) = &**expr {
+                                &ts_as.expr
+                            } else {
+                                expr
+                            }
+                        });
+
+                        if let Some(expr) = init {
                             if let Expr::Object(obj) = &**expr {
                                 for prop in &obj.props {
                                     if let PropOrSpread::Prop(prop) = prop {

packages/next-swc/crates/core/tests/fixture.rs

@@ -12,7 +12,7 @@ use std::path::PathBuf;
 use swc_common::{chain, comments::SingleThreadedComments, FileName, Mark, Span, DUMMY_SP};
 use swc_ecma_transforms_testing::{test, test_fixture};
 use swc_ecmascript::{
-    parser::{EsConfig, Syntax},
+    parser::{TsConfig, EsConfig, Syntax},
     transforms::{react::jsx, resolver},
 };
 use testing::fixture;
@@ -24,6 +24,13 @@ fn syntax() -> Syntax {
     })
 }
 
+fn syntax_ts() -> Syntax {
+    Syntax::Typescript(TsConfig {
+        tsx: true,
+        ..Default::default()
+    })
+}
+
 #[fixture("tests/fixture/amp/**/input.js")]
 fn amp_attributes_fixture(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");
@@ -143,10 +150,10 @@ impl swc_ecmascript::visit::VisitMut for DropSpan {
     }
 }
 
-#[fixture("tests/fixture/page-config/**/input.js")]
+#[fixture("tests/fixture/page-config/**/input.tsx")]
 fn page_config_fixture(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");
-    test_fixture(syntax(), &|_tr| page_config_test(), &input, &output);
+    test_fixture(syntax_ts(), &|_tr| page_config_test(), &input, &output);
 }
 
 #[fixture("tests/fixture/remove-console/**/input.js")]

packages/next-swc/crates/core/tests/fixture/page-config/amp-hybrid/input.js → packages/next-swc/crates/core/tests/fixture/page-config/amp-hybrid/input.tsx

@@ -4,4 +4,4 @@ function About(props) {
   return <h3>My AMP About Page!</h3>
 }
 
-export default About
+export default About

packages/next-swc/crates/core/tests/fixture/page-config/amp-hybrid/output.js

@@ -4,4 +4,4 @@ export const config = {
 function About(props) {
   return <h3 >My AMP About Page!</h3>;
 }
-export default About;
+export default About;

packages/next-swc/crates/core/tests/fixture/page-config/amp-true-asexpression/input.tsx

@@ -0,0 +1,11 @@
+import type { PageConfig } from "next"
+
+export const config = {
+  amp: true,
+} as PageConfig
+
+function About(props) {
+  return <h3>My AMP About Page!</h3>
+}
+
+export default About

packages/next-swc/crates/core/tests/fixture/page-config/amp-true-asexpression/output.js

@@ -0,0 +1 @@
+const __NEXT_DROP_CLIENT_FILE__ = "__NEXT_DROP_CLIENT_FILE__ mock_timestamp";

packages/next-swc/crates/core/tests/fixture/page-config/amp-true-type-annotation/input.tsx

@@ -0,0 +1,11 @@
+import type { PageConfig } from "next"
+
+export const config: PageConfig = {
+  amp: true,
+}
+
+function About(props) {
+  return <h3>My AMP About Page!</h3>
+}
+
+export default About

packages/next-swc/crates/core/tests/fixture/page-config/amp-true-type-annotation/output.js

@@ -0,0 +1 @@
+const __NEXT_DROP_CLIENT_FILE__ = "__NEXT_DROP_CLIENT_FILE__ mock_timestamp";

packages/next-swc/crates/core/tests/fixture/page-config/amp-true/input.js → packages/next-swc/crates/core/tests/fixture/page-config/amp-true/input.tsx

@@ -1,7 +1,9 @@
-export const config = { amp: true }
+export const config = {
+  amp: true,
+}
 
 function About(props) {
   return <h3>My AMP About Page!</h3>
 }
 
-export default About
+export default About

packages/next-swc/crates/core/tests/fixture/page-config/amp-true/output.js

@@ -1 +1 @@
-const __NEXT_DROP_CLIENT_FILE__ = "__NEXT_DROP_CLIENT_FILE__ mock_timestamp";
+const __NEXT_DROP_CLIENT_FILE__ = "__NEXT_DROP_CLIENT_FILE__ mock_timestamp";

packages/next/build/babel/plugins/next-page-config.ts

@@ -144,10 +144,13 @@ export default function nextPageConfig({
                     continue
                   }
 
-                  if (!BabelTypes.isObjectExpression(declaration.init)) {
-                    const got = declaration.init
-                      ? declaration.init.type
-                      : 'undefined'
+                  let { init } = declaration
+                  if (BabelTypes.isTSAsExpression(init)) {
+                    init = init.expression
+                  }
+
+                  if (!BabelTypes.isObjectExpression(init)) {
+                    const got = init ? init.type : 'undefined'
                     throw new Error(
                       errorMessage(
                         exportState,
@@ -156,7 +159,7 @@ export default function nextPageConfig({
                     )
                   }
 
-                  for (const prop of declaration.init.properties) {
+                  for (const prop of init.properties) {
                     if (BabelTypes.isSpreadElement(prop)) {
                       throw new Error(
                         errorMessage(

test/unit/babel-plugin-next-page-config.test.ts

@@ -0,0 +1,62 @@
+/* eslint-env jest */
+import { transformSync } from '@babel/core'
+
+const babel = (code) =>
+  transformSync(code, {
+    filename: 'page.tsx',
+    presets: ['@babel/preset-typescript'],
+    plugins: [require('next/dist/build/babel/plugins/next-page-config')],
+    babelrc: false,
+    configFile: false,
+    sourceType: 'module',
+    compact: true,
+    caller: {
+      name: 'tests',
+      isDev: false,
+    },
+  } as any).code
+
+describe('babel plugin (next-page-config)', () => {
+  test('export config with type annotation', () => {
+    const output = babel('export const config: PageConfig = {};')
+
+    expect(output).toMatch(`export const config={};`)
+  })
+
+  test('export config with AsExpression', () => {
+    const output = babel('export const config = {} as PageConfig;')
+
+    expect(output).toMatch('export const config={};')
+  })
+
+  test('amp enabled', () => {
+    jest.spyOn(Date, 'now').mockReturnValue(1234)
+    const output = babel(`
+      export const config = { amp: true }
+
+      function About(props) {
+        return <h3>My AMP About Page!</h3>
+      }
+
+      export default About`)
+
+    expect(output).toMatch(
+      'const __NEXT_DROP_CLIENT_FILE__="__NEXT_DROP_CLIENT_FILE__ 1234";'
+    )
+  })
+
+  test('amp hybrid enabled', () => {
+    const output = babel(`
+      export const config = { amp: 'hybrid' }
+
+      function About(props) {
+        return <h3>My AMP About Page!</h3>
+      }
+
+      export default About`)
+
+    expect(output).toMatch(
+      "export const config={amp:'hybrid'};function About(props){return<h3>My AMP About Page!</h3>;}export default About;"
+    )
+  })
+})