Add plugin to compile with swc (currently broken)

Author: styfle

packages/next/src/build/swc/options.ts

@@ -29,7 +29,7 @@ export function getParserOptions({ filename, jsConfig, ...rest }: any) {
   }
 }
 
-function getBaseSWCOptions({
+export function getBaseSWCOptions({
   filename,
   jest,
   development,

packages/next/src/build/webpack-config.ts

@@ -66,6 +66,7 @@ import { loadBindings } from './swc'
 import { AppBuildManifestPlugin } from './webpack/plugins/app-build-manifest-plugin'
 import { SubresourceIntegrityPlugin } from './webpack/plugins/subresource-integrity-plugin'
 import { NextFontManifestPlugin } from './webpack/plugins/next-font-manifest-plugin'
+import { ImageLoaderFilePlugin } from './webpack/plugins/image-loaderfile-plugin'
 import { getSupportedBrowsers } from './utils'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
@@ -1123,9 +1124,11 @@ export default async function getBaseWebpackConfig(
 
       ...(config.images.loaderFile
         ? {
-            'next/dist/shared/lib/image-loader': config.images.loaderFile,
+            'next/dist/shared/lib/image-loader-generated':
+              config.images.loaderFile,
             ...(isEdgeServer && {
-              'next/dist/esm/shared/lib/image-loader': config.images.loaderFile,
+              'next/dist/esm/shared/lib/image-loader-generated':
+                config.images.loaderFile,
             }),
           }
         : undefined),
@@ -2275,6 +2278,7 @@ export default async function getBaseWebpackConfig(
       ].filter(Boolean),
     },
     plugins: [
+      isNodeServer && new ImageLoaderFilePlugin({ dev, config }),
       dev && isClient && new ReactRefreshWebpackPlugin(webpack),
       // Makes sure `Buffer` and `process` are polyfilled in client and flight bundles (same behavior as webpack 4)
       (isClient || isEdgeServer) &&

packages/next/src/build/webpack/plugins/image-loaderfile-plugin.ts

@@ -0,0 +1,54 @@
+import type { webpack } from 'next/dist/compiled/webpack/webpack'
+import { getBaseSWCOptions } from 'next/src/build/swc/options'
+import { readFileSync, writeFileSync, copyFileSync } from 'fs'
+import { dirname, join } from 'path'
+import { transform } from '../../swc'
+import type { NextConfigComplete } from '../../../server/config-shared'
+
+export class ImageLoaderFilePlugin {
+  opts: { dev: boolean; config: NextConfigComplete }
+
+  constructor(opts: { dev: boolean; config: NextConfigComplete }) {
+    console.log('ImageLoaderFilePlugin constructor')
+    this.opts = opts
+  }
+
+  apply(compiler: webpack.Compiler) {
+    console.log('ImageLoaderFilePlugin apply')
+    compiler.hooks.beforeCompile.tapPromise(
+      'ImageLoaderFilePlugin',
+      async () => {
+        console.log('ImageLoaderFilePlugin beforeCompile')
+        const {
+          dev,
+          config: {
+            images: { loaderFile },
+          },
+        } = this.opts
+        const srcPath = require.resolve('next/dist/shared/lib/image-loader')
+        const destPath = join(dirname(srcPath), 'image-loader-generated.js')
+        if (loaderFile) {
+          const source = readFileSync(loaderFile, 'utf8')
+
+          const swcOpts = getBaseSWCOptions({
+            filename: srcPath,
+            development: dev,
+            hasReactRefresh: false,
+            globalWindow: false,
+            swcPlugins: [],
+            compilerOptions: {},
+            jsConfig: {},
+          })
+
+          const result = await transform(source, swcOpts)
+
+          console.log('result from swc is', result)
+
+          writeFileSync(destPath, result.code)
+        } else {
+          copyFileSync(srcPath, destPath)
+        }
+      }
+    )
+  }
+}

packages/next/src/shared/lib/get-img-props.ts

@@ -6,9 +6,10 @@ import type {
   ImageLoaderProps,
   ImageLoaderPropsWithConfig,
 } from './image-config'
+import { interopDefault } from '../../lib/interop-default'
 
 // @ts-ignore - This is replaced by webpack alias
-import defaultLoader from 'next/dist/shared/lib/image-loader'
+//import defaultLoader from 'next/dist/shared/lib/image-loader-generated'
 
 export interface StaticImageData {
   src: string
@@ -282,7 +283,14 @@ export function getImgProps(
     config = { ...c, allSizes, deviceSizes }
   }
 
-  let loader: ImageLoaderWithConfig = rest.loader || defaultLoader
+  let loader: ImageLoaderWithConfig
+  if (rest.loader) {
+    loader = rest.loader
+  } else {
+    loader = interopDefault(
+      require('next/dist/shared/lib/image-loader-generated')
+    )
+  }
 
   // Remove property so it's not spread on <img> element
   delete rest.loader
@@ -500,7 +508,7 @@ export function getImgProps(
       )
     }
 
-    if (!unoptimized && loader !== defaultLoader) {
+    if (!unoptimized && !isDefaultLoader) {
       const urlStr = loader({
         config,
         src,