Fix export { _ as default } for SSG

packages/next/build/babel/plugins/next-ssg-transform.ts

@@ -28,7 +28,54 @@ function decorateSsgExport(
   path: NodePath<BabelTypes.Program>,
   state: PluginState
 ) {
+  function getNodes(prev: any): BabelTypes.Node[] {
+    return [
+      t.variableDeclaration('const', [
+        t.variableDeclarator(t.identifier(pageComponentVar), prev),
+      ]),
+      t.assignmentExpression(
+        '=',
+        t.memberExpression(
+          t.identifier(pageComponentVar),
+          t.identifier(state.isPrerender ? prerenderId : serverPropsId)
+        ),
+        t.booleanLiteral(true)
+      ),
+      t.exportDefaultDeclaration(t.identifier(pageComponentVar)),
+    ]
+  }
+
   path.traverse({
+    ExportNamedDeclaration(path) {
+      if (state.done) {
+        return
+      }
+
+      // Look for a `export { _ as default }` specifier
+      const defaultSpecifierIndex = path.node.specifiers.findIndex(
+        ({ exported: { name } }) => name === 'default'
+      )
+      if (defaultSpecifierIndex === -1) {
+        return
+      }
+      state.done = true
+
+      const defaultSpecifier = path.node.specifiers[
+        defaultSpecifierIndex
+      ] as BabelTypes.ExportSpecifier
+      // Remove the specifier so we can insert a new default export
+      path.node.specifiers.splice(defaultSpecifierIndex, 1)
+
+      // Insert a new `export default _;` that was annotated
+      const [pageCompPath] = path.insertAfter(getNodes(defaultSpecifier.local))
+      path.scope.registerDeclaration(pageCompPath)
+
+      // If there are no specifiers left in the original path (`export {}`),
+      // remove it all together
+      if (path.node.specifiers.length < 1) {
+        path.remove()
+      }
+    },
     ExportDefaultDeclaration(path) {
       if (state.done) {
         return
@@ -41,20 +88,7 @@ function decorateSsgExport(
       }
 
       // @ts-ignore invalid return type
-      const [pageCompPath] = path.replaceWithMultiple([
-        t.variableDeclaration('const', [
-          t.variableDeclarator(t.identifier(pageComponentVar), prev as any),
-        ]),
-        t.assignmentExpression(
-          '=',
-          t.memberExpression(
-            t.identifier(pageComponentVar),
-            t.identifier(state.isPrerender ? prerenderId : serverPropsId)
-          ),
-          t.booleanLiteral(true)
-        ),
-        t.exportDefaultDeclaration(t.identifier(pageComponentVar)),
-      ])
+      const [pageCompPath] = path.replaceWithMultiple(getNodes(prev))
       path.scope.registerDeclaration(pageCompPath)
     },
   })

test/unit/babel-plugin-next-ssg-transform.test.js

@@ -331,5 +331,103 @@ describe('babel plugin (next-ssg-transform)', () => {
         `"function Function1(){return{a:function bug(a){return 2;}};}function Function2(){var bug=1;return{bug};}"`
       )
     })
+
+    it('should support class exports', () => {
+      const output = babel(trim`
+        export function unstable_getStaticProps() {
+          return { props: {} }
+        }
+
+        export default class Test extends React.Component {
+          render() {
+            return <div />
+          }
+        }
+      `)
+
+      expect(output).toMatchInlineSnapshot(
+        `"const __NEXT_COMP=class Test extends React.Component{render(){return __jsx(\\"div\\",null);}};__NEXT_COMP.__N_SSG=true export default __NEXT_COMP;"`
+      )
+    })
+
+    it('should support class exports 2', () => {
+      const output = babel(trim`
+        export function unstable_getStaticProps() {
+          return { props: {} }
+        }
+
+        class Test extends React.Component {
+          render() {
+            return <div />
+          }
+        }
+
+        export default Test;
+      `)
+
+      expect(output).toMatchInlineSnapshot(
+        `"class Test extends React.Component{render(){return __jsx(\\"div\\",null);}}const __NEXT_COMP=Test;__NEXT_COMP.__N_SSG=true export default __NEXT_COMP;"`
+      )
+    })
+
+    it('should support export { _ as default }', () => {
+      const output = babel(trim`
+        export function unstable_getStaticProps() {
+          return { props: {} }
+        }
+
+        function El() {
+          return <div />
+        }
+
+        export { El as default }
+      `)
+
+      expect(output).toMatchInlineSnapshot(
+        `"function El(){return __jsx(\\"div\\",null);}const __NEXT_COMP=El;__NEXT_COMP.__N_SSG=true export default __NEXT_COMP;"`
+      )
+    })
+
+    it('should support export { _ as default } with other specifiers', () => {
+      const output = babel(trim`
+        export function unstable_getStaticProps() {
+          return { props: {} }
+        }
+
+        function El() {
+          return <div />
+        }
+
+        const a = 5
+
+        export { El as default, a }
+      `)
+
+      expect(output).toMatchInlineSnapshot(
+        `"function El(){return __jsx(\\"div\\",null);}const a=5;export{a};const __NEXT_COMP=El;__NEXT_COMP.__N_SSG=true export default __NEXT_COMP;"`
+      )
+    })
+
+    it('should support export { _ as default } with a class', () => {
+      const output = babel(trim`
+        export function unstable_getStaticProps() {
+          return { props: {} }
+        }
+
+        class El extends React.Component {
+          render() {
+            return <div />
+          }
+        }
+
+        const a = 5
+
+        export { El as default, a }
+      `)
+
+      expect(output).toMatchInlineSnapshot(
+        `"class El extends React.Component{render(){return __jsx(\\"div\\",null);}}const a=5;export{a};const __NEXT_COMP=El;__NEXT_COMP.__N_SSG=true export default __NEXT_COMP;"`
+      )
+    })
   })
 })