@tamagui/next-plugin 1.0.1-beta.99 → 1.0.1-rc.0.1

package/src/withTamagui.ts

@@ -1,16 +1,22 @@
-import path from 'path'
+import { existsSync, fstat } from 'fs'
+import path, { dirname, join } from 'path'
 
 import type { TamaguiOptions } from '@tamagui/static'
 import browserslist from 'browserslist'
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
+import buildResolver from 'esm-resolve'
 import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
 import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css'
 import { getGlobalCssLoader } from 'next/dist/build/webpack/config/blocks/css/loaders'
-import { shouldExclude as shouldExcludeDefault } from 'tamagui-loader'
+import { TamaguiPlugin, shouldExclude as shouldExcludeDefault } from 'tamagui-loader'
 import webpack from 'webpack'
 
 export type WithTamaguiProps = TamaguiOptions & {
+  useReactNativeWebLite: boolean
+  disableFontSupport?: boolean
+  enableCSSOptimizations?: boolean
   aliasReactPackages?: boolean
+  includeCSSTest?: RegExp | ((path: string) => boolean)
   shouldExtract?: (path: string, projectRoot: string) => boolean | undefined
   shouldExcludeFromServer?: (props: {
     context: string
@@ -20,21 +26,16 @@ export type WithTamaguiProps = TamaguiOptions & {
 }
 
 export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
-  // allows configuration
-  const shouldExclude = (path: string, projectRoot: string) => {
-    const res = tamaguiOptions.shouldExtract?.(path, projectRoot)
-    if (typeof res === 'boolean') {
-      return !res
-    }
-    return shouldExcludeDefault(path, projectRoot)
-  }
-
   return (nextConfig: any = {}) => {
     return {
       ...nextConfig,
       webpack: (webpackConfig: any, options: any) => {
         const { dir, config, dev, isServer } = options
 
+        const resolver = buildResolver(join(dir, 'index.js'), {
+          constraints: 'node',
+        })
+
         // @ts-ignore
         if (typeof globalThis['__DEV__'] === 'undefined') {
           // @ts-ignore
@@ -42,41 +43,104 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
         }
 
         const isNext12 = typeof options.config?.swcMinify === 'boolean'
+        if (!isNext12) {
+          throw new Error(`Next.js 12 only supported`)
+        }
+
         const prefix = `${isServer ? ' ssr ' : ' web '} |`
 
-        const safeResolves = (
-          ...resolves: ([string, string] | [string, string, [string, string]])[]
-        ) => {
-          let res: string[][] = []
-          for (const [out, mod, replace] of resolves) {
+        const safeResolves = (resolves: [string, string][], multiple = false) => {
+          const res: string[][] = []
+          for (const [out, mod] of resolves) {
+            if (out.endsWith('$')) {
+              res.push([out, mod])
+              continue
+            }
             try {
-              const next = [out, require.resolve(mod)]
-              if (replace) {
-                next[1] = next[1].replace(...replace)
+              res.push([out, resolveEsm(mod)])
+              if (multiple) {
+                res.push([out, resolveEsm(mod, true)])
               }
-              res.push(next)
             } catch (err) {
-              // console.log(prefix, `withTamagui skipping resolving ${out}`)
+              if (out.includes(`@gorhom/bottom-sheet`)) {
+                continue
+              }
+              if (process.env.DEBUG?.startsWith('tamagui')) {
+                // eslint-disable-next-line no-console
+                console.log(prefix, `withTamagui skipping resolving ${out}`, err)
+              }
             }
           }
-          return Object.fromEntries(res)
+          return res
         }
 
-        const alias = {
-          ...(webpackConfig.resolve.alias || {}),
-          ...safeResolves(
-            ['react-native-svg', 'react-native-svg-web'],
+        const resolveEsm = (relativePath: string, onlyRequire = false) => {
+          if (isServer || onlyRequire) {
+            return require.resolve(relativePath)
+          }
+          const esm = resolver(relativePath)
+          return esm ? path.join(dir, esm) : require.resolve(relativePath)
+        }
+
+        const SEP = path.sep
+
+        // automatically compile our given components
+        const componentsFullPaths = safeResolves(
+          tamaguiOptions.components.map(
+            (moduleName) => [moduleName, moduleName] as [string, string]
+          ),
+          true
+        )
+
+        const componentsBaseDirs = componentsFullPaths.map(([_, fullPath]) => {
+          let rootPath = dirname(fullPath as string)
+          while (rootPath.length > 1) {
+            const pkg = join(rootPath, 'package.json')
+            const hasPkg = existsSync(pkg)
+            if (hasPkg) {
+              return rootPath
+            } else {
+              rootPath = join(rootPath, '..')
+            }
+          }
+          throw new Error(`Couldn't find package.json in any path above: ${fullPath}`)
+        })
+
+        function isInComponentModule(fullPath: string) {
+          return componentsBaseDirs.some((componentDir) => fullPath.startsWith(componentDir))
+        }
+
+        // allows configuration
+        const shouldExclude = (path: string, projectRoot: string) => {
+          const res = tamaguiOptions.shouldExtract?.(path, projectRoot)
+          if (typeof res === 'boolean') {
+            return !res
+          }
+          if (isInComponentModule(path)) {
+            return false
+          }
+          return shouldExcludeDefault(path, projectRoot)
+        }
+
+        const rnw = tamaguiOptions.useReactNativeWebLite
+          ? 'react-native-web-lite'
+          : 'react-native-web'
+
+        const tamaguiAliases = Object.fromEntries(
+          safeResolves([
+            ['@tamagui/core/reset.css', '@tamagui/core/reset.css'],
+            ['@tamagui/core', '@tamagui/core'],
+            ['react-native-svg', '@tamagui/react-native-svg'],
             // fixes https://github.com/kentcdodds/mdx-bundler/issues/143
             ['react/jsx-runtime.js', 'react/jsx-runtime'],
             ['react/jsx-runtime', 'react/jsx-runtime'],
             ['react/jsx-dev-runtime.js', 'react/jsx-dev-runtime'],
             ['react/jsx-dev-runtime', 'react/jsx-dev-runtime'],
-            ['react-native$', 'react-native-web'],
             ['react-native-reanimated', 'react-native-reanimated'],
-            ['expo-linear-gradient', '@tamagui/expo-linear-gradient'],
-            ['react-native-web$', 'react-native-web'],
+            ['react-native$', rnw],
+            ['react-native-web$', rnw],
             ['@testing-library/react-native', '@tamagui/proxy-worm'],
-            ['@gorhom/bottom-sheet$', '@gorhom/bottom-sheet', ['commonjs', 'module']],
+            ['@gorhom/bottom-sheet$', '@gorhom/bottom-sheet'],
             // fix reanimated 3
             ['react-native/Libraries/Renderer/shims/ReactFabric', '@tamagui/proxy-worm'],
             ...(tamaguiOptions.aliasReactPackages
@@ -84,12 +148,24 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
                   ['react', 'react'],
                   ['react-dom', 'react-dom'],
                 ] as any)
-              : [])
-          ),
-          // expo fix https://github.com/expo/expo/issues/9999
-          'react-native-web/src': require.resolve('react-native-web/dist'),
-          // react: require.resolve('react'),
-          // 'react-dom': require.resolve('react-dom'),
+              : []),
+          ])
+        )
+
+        const alias = {
+          ...(webpackConfig.resolve.alias || {}),
+          ...tamaguiAliases,
+        }
+
+        if (process.env.DEBUG) {
+          // eslint-disable-next-line no-console
+          console.log('Tamagui alias:', alias)
+        }
+
+        if (process.env.ANALYZE === 'true') {
+          Object.assign(webpackConfig.optimization, {
+            concatenateModules: false,
+          })
         }
 
         webpackConfig.resolve.alias = alias
@@ -105,16 +181,14 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
         const excludeExports = tamaguiOptions.excludeReactNativeWebExports
         if (Array.isArray(excludeExports)) {
           try {
-            const regexStr = `\/react-native-web\/.*(${excludeExports.join('|')}).*\/`
+            const regexStr = `react-native-web(-lite)?/.*(${excludeExports.join('|')}).*js`
             const regex = new RegExp(regexStr)
             // console.log(prefix, 'exclude', regexStr)
             webpackConfig.plugins.push(
-              new webpack.NormalModuleReplacementPlugin(
-                regex,
-                require.resolve('@tamagui/proxy-worm/empty-react-native-view')
-              )
+              new webpack.NormalModuleReplacementPlugin(regex, resolveEsm('@tamagui/proxy-worm'))
             )
           } catch (err) {
+            // eslint-disable-next-line no-console
             console.warn(
               `Invalid names provided to excludeReactNativeWebExports: ${excludeExports.join(', ')}`
             )
@@ -123,6 +197,7 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
 
         if (process.env.IGNORE_TS_CONFIG_PATHS) {
           if (process.env.DEBUG) {
+            // eslint-disable-next-line no-console
             console.log(prefix, 'ignoring tsconfig paths')
           }
           if (webpackConfig.resolve.plugins[0]) {
@@ -131,9 +206,7 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
           }
         }
 
-        // TODO document and make configurable
-        // replaces minifier with css-minimizer-webpack-plugin which handles deduping atomic styles
-        if (!dev) {
+        if (!dev && tamaguiOptions.enableCSSOptimizations) {
           const cssMin = webpackConfig.optimization.minimizer.find((x) =>
             x.toString().includes('css-minimizer-plugin')
           )
@@ -146,13 +219,9 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
           webpackConfig.optimization.minimizer.push(new CssMinimizerPlugin())
         }
 
-        webpackConfig.resolve.extensions = [
-          ...new Set(['.web.tsx', '.web.ts', '.web.js', ...webpackConfig.resolve.extensions]),
-        ]
-
-        // look for compiled js with jsx intact as specified by module:jsx
-        webpackConfig.resolve.mainFields.unshift('module:jsx')
-
+        /**
+         * Server react-native compat
+         */
         if (isServer) {
           const externalize = (context: string, request: string) => {
             const fullPath = request[0] === '.' ? path.join(context, request) : request
@@ -168,32 +237,42 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
               }
             }
 
+            if (isInComponentModule(fullPath)) {
+              return false
+            }
+
+            if (fullPath.includes('react-native-web-lite')) {
+              // always inline react-native-web-lite due to errors where next.js resolved the path to esm
+              return false
+            }
+
             // must inline react-native so we can alias to react-native-web
-            if (fullPath === 'react-native' || fullPath.startsWith('react-native/')) {
+            if (fullPath === 'react-native' || fullPath.startsWith(`react-native${SEP}`)) {
               return false
             }
 
             if (
               // feather icons uses react-native-svg which needs to be aliased
-              // fullPath.includes('/feather-icons/') ||
+              // fullPath.includes('/lucide-icons/') ||
               fullPath.startsWith('react-native-web') ||
-              fullPath.includes('node_modules/react-native-web') ||
-              /^(react-dom|react)\/$/.test(fullPath)
+              fullPath.includes(`node_modules${SEP}react-native-web`) ||
+              new RegExp(`^(react-dom|react)${SEP}$`).test(fullPath)
             ) {
               return `commonjs ${fullPath}`
             }
             if (
-              fullPath.includes('/moti/') ||
-              fullPath.includes('/solito/') ||
+              fullPath.startsWith('moti') ||
+              fullPath.startsWith('solito') ||
               fullPath === 'tamagui' ||
-              fullPath.startsWith('@tamagui/') ||
+              fullPath.startsWith('@tamagui') ||
               fullPath === 'react-native-safe-area-context' ||
+              fullPath === 'expo-linear-gradient' ||
               fullPath.startsWith('@react-navigation') ||
-              fullPath === '@gorhom/bottom-sheet'
+              fullPath.startsWith('@gorhom')
             ) {
               return
             }
-            if (/^\@?react-native-/.test(request)) {
+            if (/^@?react-native-/.test(request)) {
               return false
             }
             return true
@@ -228,115 +307,102 @@ export const withTamagui = (tamaguiOptions: WithTamaguiProps) => {
           ]
         }
 
-        const oneOfRule = webpackConfig.module.rules.find((x) => !!x.oneOf)
+        const cssRules = webpackConfig.module.rules.find(
+          (rule) =>
+            Array.isArray(rule.oneOf) &&
+            rule.oneOf.some(
+              ({ test }) =>
+                typeof test === 'object' &&
+                typeof test.test === 'function' &&
+                test.test('filename.css')
+            )
+        ).oneOf
 
-        const cssLoader = getGlobalCssLoader(
-          // @ts-ignore
-          {
-            assetPrefix: options.config.assetPrefix || config.assetPrefix,
-            future: nextConfig.future,
-            experimental: nextConfig.experimental || {},
-            isClient: !isServer,
-            isServer,
-            isDevelopment: dev,
-          },
-          // @ts-ignore
-          () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev)),
-          []
-        )
+        /**
+         * Font Support
+         */
+        if (cssRules) {
+          if (!tamaguiOptions.disableFontSupport) {
+            // fonts support
+            cssRules.unshift({
+              test: /\.(woff(2)?|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
+              use: [
+                {
+                  loader: require.resolve('url-loader'),
+                  options: {
+                    limit: nextConfig.inlineFontLimit || 1024,
+                    fallback: require.resolve('file-loader'),
+                    publicPath: `${nextConfig.assetPrefix || ''}/_next/static/chunks/fonts/`,
+                    outputPath: `${isServer ? '../' : ''}static/chunks/fonts/`,
+                    name: '[name].[ext]',
+                  },
+                },
+              ],
+            })
+          }
+
+          /**
+           * CSS Support
+           */
+          const cssLoader = getGlobalCssLoader(
+            // @ts-ignore
+            {
+              assetPrefix: options.config.assetPrefix || config.assetPrefix,
+              future: nextConfig.future,
+              experimental: nextConfig.experimental || {},
+              isEdgeRuntime: true,
+              isProduction: !dev,
+              targetWeb: true,
+              isClient: !isServer,
+              isServer,
+              isDevelopment: dev,
+            },
+            // @ts-ignore
+            () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev)),
+            []
+          )
+
+          const cssTest = tamaguiOptions.includeCSSTest ?? /\.css$/
 
-        if (oneOfRule) {
-          if (!dev) {
+          if (!dev && tamaguiOptions.enableCSSOptimizations) {
             const postCSSLoader = cssLoader[cssLoader.length - 1]
             // replace nextjs picky style rules with simple minicssextract
-            oneOfRule.oneOf.unshift({
-              test: /\.css$/i,
+            cssRules.unshift({
+              test: cssTest,
               use: [MiniCSSExtractPlugin.loader, 'css-loader', postCSSLoader],
               sideEffects: true,
             })
             webpackConfig.plugins.push(
               new MiniCSSExtractPlugin({
-                filename: 'static/css/[name].[contenthash].css',
+                filename: 'static/css/[contenthash].css',
                 ignoreOrder: true,
-                runtime: false,
               })
             )
           } else {
-            oneOfRule.oneOf.unshift({
-              test: /\.css$/i,
+            cssRules.unshift({
+              test: cssTest,
               sideEffects: true,
               use: cssLoader,
             })
           }
+          cssRules.unshift({
+            test: cssTest,
+            sideEffects: true,
+            use: cssLoader,
+          })
         }
 
-        if (isNext12) {
-          const firstOneOfRule = webpackConfig.module.rules.findIndex((x) => x && !!x.oneOf)
-          const oneOfJSRules: any[] = webpackConfig.module.rules[firstOneOfRule].oneOf
-          const afterSWCLoaderIndex =
-            oneOfJSRules.findIndex(
-              (x) => x && x.use && x.use.loader === 'next-swc-loader' && x.issuerLayer !== 'api'
-            ) + 1
-          const swcLoader = oneOfJSRules[afterSWCLoaderIndex]
-
-          // put an earlier loader where we just do tamagui stuff before regular swc
-          oneOfJSRules.splice(
-            afterSWCLoaderIndex,
-            0,
-            {
-              test: /(bottom-sheet).*\.[tj]sx?$/,
-              use: [
-                {
-                  loader: 'babel-loader',
-                  options: {
-                    presets: ['@babel/preset-react'],
-                    plugins: ['react-native-reanimated/plugin'],
-                  },
-                },
-              ],
-            },
-            {
-              test: /\.(jsx?|tsx?)$/,
-              exclude: (path: string) => shouldExclude(path, options.dir),
-              use: [
-                ...[].concat(swcLoader.use),
-                {
-                  loader: 'tamagui-loader',
-                  options: tamaguiOptions,
-                },
-              ],
-            }
-          )
-        } else {
-          // next 11 modify loader
-          const [first, second, ...rest] = webpackConfig.module.rules
-          webpackConfig.module.rules = [
-            first,
-            second,
-            {
-              test: /\.(tsx|jsx)$/,
-              exclude: (path: string) => shouldExclude(path, options.dir),
-              use: [
-                'thread-loader',
-                {
-                  loader: 'esbuild-loader',
-                  options: {
-                    loader: 'tsx',
-                    minify: false,
-                  },
-                },
-                {
-                  loader: 'tamagui-loader',
-                  options: {
-                    prefixLogs: prefix,
-                    ...tamaguiOptions,
-                  },
-                },
-              ],
+        webpackConfig.plugins.push(
+          new TamaguiPlugin({
+            commonjs: isServer,
+            exclude: (path: string) => {
+              const res = shouldExclude(path, options.dir)
+              // console.log(`shouldExclude`, res, path)
+              return res
             },
-            ...rest,
-          ]
-        }
+            ...tamaguiOptions,
+          })
+        )
 
         if (typeof nextConfig.webpack === 'function') {
           return nextConfig.webpack(webpackConfig, options)
@@ -355,7 +421,8 @@ function getSupportedBrowsers(dir, isDevelopment) {
       path: dir,
       env: isDevelopment ? 'development' : 'production',
     })
-  } catch {}
-
+  } catch {
+    //
+  }
   return browsers
 }

package/types/index.d.ts

@@ -1,3 +1,2 @@
 export * from './withTamagui';
-export { patchReactNativeWeb } from '@tamagui/static';
 //# sourceMappingURL=index.d.ts.map

package/types/withTamagui.d.ts

@@ -1,6 +1,10 @@
 import type { TamaguiOptions } from '@tamagui/static';
 export declare type WithTamaguiProps = TamaguiOptions & {
+    useReactNativeWebLite: boolean;
+    disableFontSupport?: boolean;
+    enableCSSOptimizations?: boolean;
     aliasReactPackages?: boolean;
+    includeCSSTest?: RegExp | ((path: string) => boolean);
     shouldExtract?: (path: string, projectRoot: string) => boolean | undefined;
     shouldExcludeFromServer?: (props: {
         context: string;

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAK7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA"}

package/types/withTamagui.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withTamagui.d.ts","sourceRoot":"","sources":["../src/withTamagui.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AASrD,oBAAY,gBAAgB,GAAG,cAAc,GAAG;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,CAAA;IAC1E,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE;QAChC,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,QAAQ,EAAE,MAAM,CAAA;KACjB,KAAK,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,WAAW,mBAAoB,gBAAgB,mBAUtC,GAAG,QA6TxB,CAAA"}