fix(webpack-loader, next-plugin): fix app dir support

Sabin-Subedi · Apr 18, 2023 · d175726 · d175726
1 parent 7577979
commit d175726
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 39 deletions.
diff --git a/apps/site/components/HeroResponsive.tsx b/apps/site/components/HeroResponsive.tsx
@@ -1,3 +1,4 @@
+// debug 123 123
 import { throttle } from '@github/mini-throttle'
 import { demoMedia } from '@tamagui/config'
 import { useOnIntersecting } from '@tamagui/demos'

diff --git a/packages/loader/package.json b/packages/loader/package.json
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@tamagui/build": "1.15.16",
+    "prettyjson": "^1.2.5",
     "webpack": "^5.74.0"
   },
   "publishConfig": {

diff --git a/packages/loader/src/loader.ts b/packages/loader/src/loader.ts
@@ -33,6 +33,9 @@ export const loader = async function loader(
     const threaded = this.emitFile === undefined
     const options: TamaguiOptions = { ...this.getOptions() }
     const sourcePath = `${this.resourcePath}`
+
+    if (sourcePath.includes(`HeroResponsive`)) console.log('load?', sourcePath, sourceIn)
+
     const { shouldDisable, shouldPrintDebug } = getPragmaOptions({
       source,
       path: sourcePath,

diff --git a/packages/loader/src/plugin.ts b/packages/loader/src/plugin.ts
@@ -2,7 +2,7 @@ import { TamaguiOptions, watchTamaguiConfig } from '@tamagui/static'
 import type { Compiler, RuleSetRule } from 'webpack'
 
 type PluginOptions = TamaguiOptions & {
-  commonjs?: boolean
+  isServer?: boolean
   exclude?: RuleSetRule['exclude']
   test?: RuleSetRule['test']
   jsLoader?: any
@@ -11,6 +11,10 @@ type PluginOptions = TamaguiOptions & {
   disableWatchConfig?: boolean
 }
 
+function prettifyWebpackConfig(config) {
+  return require('prettyjson').render(config)
+}
+
 export class TamaguiPlugin {
   pluginName = 'TamaguiPlugin'
 
@@ -73,10 +77,41 @@ export class TamaguiPlugin {
       (x) => x?.use && x.use.loader === 'next-swc-loader' && x.issuerLayer !== 'api'
     )
 
-    const startIndex = nextJsRules ? nextJsRules + 1 : 0
-    const existingLoader = nextJsRules ? rules[startIndex] : undefined
+    const esbuildLoader = {
+      loader: require.resolve('esbuild-loader'),
+      options: {
+        target: 'es2021',
+        keepNames: true,
+        loader: 'tsx',
+        tsconfigRaw: {
+          module: this.options.isServer ? 'commonjs' : 'esnext',
+          isolatedModules: true,
+          resolveJsonModule: true,
+        },
+      },
+    }
+
+    const tamaguiLoader = {
+      loader: require.resolve('tamagui-loader'),
+      options: {
+        ...this.options,
+      },
+    }
+
+    // app dir
+    if (nextJsRules === -1) {
+      existing.unshift({
+        test: this.options.test ?? /\.m?[jt]sx?$/,
+        exclude: this.options.exclude,
+        resolve: {
+          fullySpecified: false,
+        },
+        use: [esbuildLoader, tamaguiLoader],
+      })
+    } else if (!this.options.disableEsbuildLoader) {
+      const startIndex = nextJsRules ? nextJsRules + 1 : 0
+      const existingLoader = nextJsRules ? rules[startIndex] : undefined
 
-    if (!this.options.disableEsbuildLoader)
       rules.splice(startIndex, 0, {
         test: this.options.test ?? /\.m?[jt]sx?$/,
         exclude: this.options.exclude,
@@ -86,37 +121,12 @@ export class TamaguiPlugin {
         use: [
           ...(jsLoader ? [jsLoader] : []),
           ...(existingLoader && nextJsRules ? [].concat(existingLoader.use) : []),
-          ...(!(jsLoader || existingLoader)
-            ? [
-                {
-                  loader: require.resolve('esbuild-loader'),
-                  options: {
-                    target: 'es2021',
-                    keepNames: true,
-                    loader: {
-                      '.tsx': 'tsx',
-                      '.png': 'copy',
-                      '.jpg': 'copy',
-                      '.gif': 'copy',
-                    },
-
-                    tsconfigRaw: {
-                      module: this.options.commonjs ? 'commonjs' : 'esnext',
-                      isolatedModules: true,
-                      jsx: 'preserve',
-                      resolveJsonModule: true,
-                    },
-                  },
-                },
-              ]
-            : []),
-          {
-            loader: require.resolve('tamagui-loader'),
-            options: {
-              ...this.options,
-            },
-          },
+          ...(!(jsLoader || existingLoader) ? [esbuildLoader] : []),
+          tamaguiLoader,
         ],
       })
+    }
+
+    console.log(prettifyWebpackConfig(compiler.options.module.rules))
   }
 }
diff --git a/packages/loader/types/plugin.d.ts b/packages/loader/types/plugin.d.ts
@@ -1,7 +1,7 @@
 import { TamaguiOptions } from '@tamagui/static';
 import type { Compiler, RuleSetRule } from 'webpack';
 type PluginOptions = TamaguiOptions & {
-    commonjs?: boolean;
+    isServer?: boolean;
     exclude?: RuleSetRule['exclude'];
     test?: RuleSetRule['test'];
     jsLoader?: any;

diff --git a/packages/next-plugin/src/withTamagui.ts b/packages/next-plugin/src/withTamagui.ts
@@ -386,14 +386,14 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
 
         webpackConfig.plugins.push(
           new TamaguiPlugin({
-            commonjs: isServer,
+            isServer,
             exclude: (path: string) => {
               const res = shouldExclude(path, options.dir)
               // console.log(`shouldExclude`, res, path)
               return res
             },
-            disableEsbuildLoader: isAppDir,
-            disableModuleJSXEntry: isAppDir,
+            // disableEsbuildLoader: isAppDir,
+            // disableModuleJSXEntry: isAppDir,
             ...tamaguiOptions,
           })
         )
@@ -419,4 +419,4 @@ function getSupportedBrowsers(dir, isDevelopment) {
     //
   }
   return browsers
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9476,6 +9476,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colors@npm:1.4.0":
+  version: 1.4.0
+  resolution: "colors@npm:1.4.0"
+  checksum: 98aa2c2418ad87dedf25d781be69dc5fc5908e279d9d30c34d8b702e586a0474605b3a189511482b9d5ed0d20c867515d22749537f7bc546256c6014f3ebdcec
+  languageName: node
+  linkType: hard
+
 "combined-stream@npm:^1.0.8":
   version: 1.0.8
   resolution: "combined-stream@npm:1.0.8"
@@ -18742,6 +18749,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettyjson@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "prettyjson@npm:1.2.5"
+  dependencies:
+    colors: 1.4.0
+    minimist: ^1.2.0
+  bin:
+    prettyjson: bin/prettyjson
+  checksum: e36e8ae4f77065160028fea33c6ae8e91936f86a4fd1751ceb19f88f336bc54e6f7d232ece38d4da3f7734e5c5e1fc3114a0d92da1987e7cf1515dcb29d447d1
+  languageName: node
+  linkType: hard
+
 "process-nextick-args@npm:~2.0.0":
   version: 2.0.1
   resolution: "process-nextick-args@npm:2.0.1"
@@ -21513,6 +21532,7 @@ __metadata:
     fs-extra: ^11.1.0
     loader-utils: ^3.2.1
     lodash: ^4.17.21
+    prettyjson: ^1.2.5
     webpack: ^5.74.0
   languageName: unknown
   linkType: soft