feat(webpack-loader): next app dir support

apps/site/components/HeroResponsive.tsx

@@ -1,4 +1,3 @@
-// debug 123 123
 import { throttle } from '@github/mini-throttle'
 import { demoMedia } from '@tamagui/config'
 import { useOnIntersecting } from '@tamagui/demos'

next.md

@@ -1,3 +1,5 @@
+- add check-dependency-version-consistency to starter / tamagui cli
+
 - <Code /> in site types break because of variant may need to revert defaultVariants inference
 
 - add test that builds site for prod + checks for header text / no errors

packages/core-node/src/index.js

@@ -8,7 +8,9 @@ process.env.IS_STATIC = 'is_static'
 
 try {
   const all = {
+    // @ts-ignore
     ...require('../dist/index'),
+    // @ts-ignore
     aliasPlugin: require('./esbuildAliasPlugin'),
   }
   Object.assign(exports, all)

packages/loader/src/loader.ts

@@ -23,19 +23,21 @@ process.env.TAMAGUI_TARGET = 'web'
 
 export const loader = async function loader(
   this: LoaderContext<TamaguiOptions>,
-  sourceIn: Buffer | string
+  sourceIn: Buffer | string,
+  info
 ) {
   this.cacheable(true)
   const callback = this.async()
-  const source = sourceIn.toString()
+
+  // next app dir is giving us pre-compiled source, sourcesContent gives us the original JSX we need
+  // likely this is not best practice but Tamagui loader should always run first
+  const source = (info?.sourcesContent ?? sourceIn).toString()
 
   try {
     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,

packages/loader/src/plugin.ts

@@ -98,8 +98,8 @@ export class TamaguiPlugin {
       },
     }
 
-    // app dir
     if (nextJsRules === -1) {
+      // app dir or not next.js
       existing.unshift({
         test: this.options.test ?? /\.m?[jt]sx?$/,
         exclude: this.options.exclude,
@@ -126,7 +126,5 @@ export class TamaguiPlugin {
         ],
       })
     }
-
-    console.log(prettifyWebpackConfig(compiler.options.module.rules))
   }
 }

packages/loader/types/loader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
 import { TamaguiOptions } from '@tamagui/static';
 import type { LoaderContext } from 'webpack';
-export declare const loader: (this: LoaderContext<TamaguiOptions>, sourceIn: Buffer | string) => Promise<void>;
+export declare const loader: (this: LoaderContext<TamaguiOptions>, sourceIn: Buffer | string, info: any) => Promise<void>;
 //# sourceMappingURL=loader.d.ts.map

packages/next-plugin/src/withTamagui.ts

@@ -392,8 +392,6 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
               // console.log(`shouldExclude`, res, path)
               return res
             },
-            // disableEsbuildLoader: isAppDir,
-            // disableModuleJSXEntry: isAppDir,
             ...tamaguiOptions,
           })
         )