@tamagui/vite-plugin 1.59.2 → 1.59.4

package/src/nativePlugin.ts

@@ -1,22 +1,21 @@
-import { readFile } from 'fs/promises'
 import { dirname } from 'path'
 
+// import { esbuildCommonjs, viteCommonjs } from '@originjs/vite-plugin-commonjs'
 import { transform } from '@swc/core'
 import { parse } from 'es-module-lexer'
+import { readFile } from 'fs-extra'
 import { OutputOptions } from 'rollup'
 import type { Plugin } from 'vite'
-import { viteExternalsPlugin } from 'vite-plugin-externals'
 
 import { extensions } from './extensions'
 import { getVitePath } from './getVitePath'
-import { prebuiltFiles } from './nativePrebuild'
 
 export function nativePlugin(options: { port: number; mode: 'build' | 'serve' }): Plugin {
   return {
     name: 'tamagui-native',
-    enforce: 'post',
+    enforce: 'pre',
 
-    config: (config) => {
+    config: async (config) => {
       config.define ||= {}
       config.define['process.env.REACT_NATIVE_SERVER_PUBLIC_PORT'] = JSON.stringify(
         `${options.port}`
@@ -44,6 +43,10 @@ export function nativePlugin(options: { port: number; mode: 'build' | 'serve' })
       config.optimizeDeps ??= {}
 
       config.optimizeDeps.disabled = true
+      // config.optimizeDeps.include = ['escape-string-regexp']
+
+      // config.plugins ||= []
+      // config.plugins.push(viteCommonjs())
 
       // config.optimizeDeps.needsInterop ??= []
       // config.optimizeDeps.needsInterop.push('react-native')
@@ -55,10 +58,15 @@ export function nativePlugin(options: { port: number; mode: 'build' | 'serve' })
 
       config.optimizeDeps.esbuildOptions.plugins ??= []
 
-      config.optimizeDeps.esbuildOptions.alias = {
-        'react-native': '@tamagui/proxy-worm'
-      }
-      
+      // CANT DO THIS BECAUSE TAMAGUI PLUGIN DOES THIS! they clobber each other!
+      // config.optimizeDeps.esbuildOptions.plugins.push(
+      //   esbuildCommonjs(['escape-string-regexp'])
+      // )
+
+      // config.optimizeDeps.esbuildOptions.alias = {
+      //   'react-native': '@tamagui/proxy-worm',
+      // }
+
       // config.optimizeDeps.esbuildOptions.plugins.push(
       //   esbuildFlowPlugin(
       //     /node_modules\/(react-native\/|@react-native\/)/,
@@ -97,103 +105,133 @@ export function nativePlugin(options: { port: number; mode: 'build' | 'serve' })
 
       config.build.rollupOptions.plugins ??= []
 
-      if (options.mode === 'serve') {
-        config.build.rollupOptions.external = [
-          'react-native',
-          'react',
-          'react/jsx-runtime',
-          'react/jsx-dev-runtime',
-        ]
-      }
+      // config.build.rollupOptions.external = [
+      //   'react-native',
+      //   'react',
+      //   'react/jsx-runtime',
+      //   'react/jsx-dev-runtime',
+      // ]
 
       if (!Array.isArray(config.build.rollupOptions.plugins)) {
         throw `x`
       }
 
       if (options.mode === 'build') {
-        config.build.rollupOptions.plugins.push({
-          name: `swap-react-native`,
+        config.plugins ||= []
+
+        // https://vitejs.dev/config/dep-optimization-options.html
+        // config.build.commonjsOptions ||= {}
+        // config.build.commonjsOptions.include = []
+
+        // CANT DO THIS BECAUSE TAMAGUI PLUGIN DOES THIS! they clobber each other!
+        // config.plugins.push(
+        //   viteCommonjs({
+        //     include: ['escape-string-regexp'],
+        //   })
+        // )
+
+        // config.resolve.alias = {
+        //   ...config.resolve.alias,
+        //   'react-native': virtualModuleId,
+        // }
+
+        const jsxRuntime = {
+          alias: 'virtual:react-jsx',
+          contents: await readFile(
+            require.resolve('@tamagui/react-native-prebuilt/jsx-runtime'),
+            'utf-8'
+          ),
+        } as const
+
+        const virtualModules = {
+          'react-native': {
+            alias: 'virtual:react-native',
+            contents: await readFile(
+              require.resolve('@tamagui/react-native-prebuilt'),
+              'utf-8'
+            ),
+          },
+          react: {
+            alias: 'virtual:react',
+            contents: await readFile(
+              require.resolve('@tamagui/react-native-prebuilt/react'),
+              'utf-8'
+            ),
+          },
+          'react/jsx-runtime': jsxRuntime,
+          'react/jsx-dev-runtime': jsxRuntime,
+        } as const
 
-          async load(id) {
-            if (id.endsWith('/react-native/index.js')) {
-              const bundled = await readFile(prebuiltFiles.reactNative, 'utf-8')
-              const code = `
-              const run = () => {  
-                ${bundled
-                  .replace(
-                    `module.exports = require_react_native();`,
-                    `return require_react_native();`
-                  )
-                  .replace(
-                    `var require_jsx_runtime = `,
-                    `var require_jsx_runtime = global['__JSX__'] = `
-                  )
-                  .replace(
-                    `var require_react = `,
-                    `var require_react = global['__React__'] = `
-                  )}
-              }
-              const RN = run()
-              ${RNExportNames.map((n) => `export const ${n} = RN.${n}`).join('\n')}
-              `
-              return {
-                code,
+        config.plugins.unshift({
+          name: `swap-react-native`,
+          enforce: 'pre',
+
+          resolveId(id) {
+            for (const targetId in virtualModules) {
+              if (id === targetId || id.includes(`node_modules/${targetId}/`)) {
+                const info = virtualModules[targetId]
+                console.log('resolving...', id, 'to', info.alias)
+                return info.alias
               }
             }
           },
-        })
 
-        config.build.rollupOptions.plugins.push(
-          viteExternalsPlugin(
-            {
-              react: '____react____',
-              'react/jsx-runtime': '____jsx____',
-              'react/jsx-dev-runtime': '____jsx____',
-            },
-            {
-              useWindow: false,
+          load(id) {
+            for (const targetId in virtualModules) {
+              const info = virtualModules[targetId as keyof typeof virtualModules]
+              if (id === info.alias) {
+                return info.contents
+              }
             }
-          )
-        )
+          },
+        })
 
         config.build.rollupOptions.plugins.push({
           name: `force-export-all`,
 
           async transform(code, id) {
-            const [imports, exports] = parse(code)
-
-            let forceExports = ''
-
-            // note that es-module-lexer parses export * from as an import (twice) for some reason
-            let counts = {}
-            for (const imp of imports) {
-              if (imp.n && imp.n[0] !== '.') {
-                counts[imp.n] ||= 0
-                counts[imp.n]++
-                if (counts[imp.n] == 2) {
-                  // star export
-                  const path = await getVitePath(dirname(id), imp.n)
-                  forceExports += `Object.assign(exports, require("${path}"));`
+            // if (!id.includes('/node_modules/')) {
+            //   return
+            // }
+
+            try {
+              const [imports, exports] = parse(code)
+
+              let forceExports = ''
+
+              // note that es-module-lexer parses export * from as an import (twice) for some reason
+              let counts = {}
+              for (const imp of imports) {
+                if (imp.n && imp.n[0] !== '.') {
+                  counts[imp.n] ||= 0
+                  counts[imp.n]++
+                  if (counts[imp.n] == 2) {
+                    // star export
+                    const path = await getVitePath(dirname(id), imp.n)
+                    forceExports += `Object.assign(exports, require("${path}"));`
+                  }
                 }
               }
-            }
-
-            forceExports += exports
-              .map((e) => {
-                if (e.n === 'default') {
-                  return ''
-                }
-                let out = ''
-                if (e.ln !== e.n) {
-                  // forces the "as x" to be referenced so it gets exported
-                  out += `__ignore = typeof ${e.n} === 'undefined' ? 0 : 0;`
-                }
-                out += `globalThis.____forceExport = ${e.ln}`
-                return out
-              })
-              .join(';')
 
-            return code + '\n' + forceExports
+              forceExports += exports
+                .map((e) => {
+                  if (e.n === 'default') {
+                    return ''
+                  }
+                  let out = ''
+                  if (e.ln !== e.n) {
+                    // forces the "as x" to be referenced so it gets exported
+                    out += `__ignore = typeof ${e.n} === 'undefined' ? 0 : 0;`
+                  }
+                  out += `globalThis.____forceExport = ${e.ln}`
+                  return out
+                })
+                .join(';')
+
+              return code + '\n' + forceExports
+            } catch (err) {
+              console.warn(`Error forcing exports, probably ok`, id)
+            }
           },
         })
 
@@ -244,12 +282,13 @@ export function nativePlugin(options: { port: number; mode: 'build' | 'serve' })
       }
 
       if (process.env.DEBUG) {
+        // rome-ignore lint/suspicious/noConsoleLog: <explanation>
         console.log('config..', config)
       }
 
-      config.build.commonjsOptions = {
-        include: /node_modules\/react\//,
-      }
+      // config.build.commonjsOptions = {
+      //   include: /node_modules\/react\//,
+      // }
 
       const updateOutputOptions = (out: OutputOptions) => {
         out.preserveModules = true
@@ -275,88 +314,6 @@ export function nativePlugin(options: { port: number; mode: 'build' | 'serve' })
   }
 }
 
-const RNExportNames = [
-  'AccessibilityInfo',
-  'ActivityIndicator',
-  'Button',
-  'DrawerLayoutAndroid',
-  'FlatList',
-  'Image',
-  'ImageBackground',
-  'InputAccessoryView',
-  'KeyboardAvoidingView',
-  'Modal',
-  'Pressable',
-  'RefreshControl',
-  'SafeAreaView',
-  'ScrollView',
-  'SectionList',
-  'StatusBar',
-  'Switch',
-  'Text',
-  'TextInput',
-  'Touchable',
-  'TouchableHighlight',
-  'TouchableNativeFeedback',
-  'TouchableOpacity',
-  'TouchableWithoutFeedback',
-  'View',
-  'VirtualizedList',
-  'VirtualizedSectionList',
-  'ActionSheetIOS',
-  'Alert',
-  'Animated',
-  'Appearance',
-  'AppRegistry',
-  'AppState',
-  'BackHandler',
-  'DeviceInfo',
-  'DevSettings',
-  'Dimensions',
-  'Easing',
-  'findNodeHandle',
-  'I18nManager',
-  'InteractionManager',
-  'Keyboard',
-  'LayoutAnimation',
-  'Linking',
-  'LogBox',
-  'NativeDialogManagerAndroid',
-  'NativeEventEmitter',
-  'Networking',
-  'PanResponder',
-  'PermissionsAndroid',
-  'PixelRatio',
-  // 'PushNotificationIOS',
-  'Settings',
-  'Share',
-  'StyleSheet',
-  'Systrace',
-  'ToastAndroid',
-  'TurboModuleRegistry',
-  'UIManager',
-  'unstable_batchedUpdates',
-  'useColorScheme',
-  'useWindowDimensions',
-  'UTFSequence',
-  'Vibration',
-  'YellowBox',
-  'DeviceEventEmitter',
-  'DynamicColorIOS',
-  'NativeAppEventEmitter',
-  'NativeModules',
-  'Platform',
-  'PlatformColor',
-  'processColor',
-  'requireNativeComponent',
-  'RootTagContext',
-  // 'unstable_enableLogBox',
-  // 'ColorPropType',
-  // 'EdgeInsetsPropType',
-  // 'PointPropType',
-  // 'ViewPropTypes',
-]
-
 // failed attempt to get vite to bundle rn, after a bunch of hacks still trouble
 
 //         config.build.rollupOptions.plugins.push({

package/src/plugin.ts

@@ -1,3 +1,4 @@
+import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'
 import type { TamaguiOptions } from '@tamagui/static'
 import { watchTamaguiConfig } from '@tamagui/static'
 import type { Plugin } from 'vite'
@@ -40,7 +41,6 @@ export function tamaguiPlugin(
         ],
         define: {
           // reanimated support
-          'global.__x': {},
           _frameTimestamp: undefined,
           _WORKLET: false,
           __DEV__: `${env.mode === 'development' ? true : false}`,
@@ -62,20 +62,21 @@ export function tamaguiPlugin(
         },
         optimizeDeps: {
           // disabled: false,
-          include:
-            options.target !== 'native' ? ['styleq', 'react-native-reanimated'] : [],
+          include: options.target !== 'native' ? ['styleq'] : [],
           esbuildOptions: {
             jsx: 'transform',
-            // plugins: [
-            //   esbuildCommonjs([
-            //     'styleq',
-            //     'inline-style-prefixer',
-            //     'create-react-class',
-            //     'copy-to-clipboard',
-            //   ]),
-            // ],
+            plugins: [
+              esbuildCommonjs([
+                'styleq',
+                'inline-style-prefixer',
+                'create-react-class',
+                'copy-to-clipboard',
+                'escape-string-regexp',
+              ]),
+            ],
             resolveExtensions: [
               '.web.js',
+              '.web.jsx',
               '.web.ts',
               '.web.tsx',
               '.js',
@@ -95,6 +96,7 @@ export function tamaguiPlugin(
           // mainFields: ['module:jsx', 'module', 'jsnext:main', 'jsnext', 'main'],
           extensions: [
             '.web.js',
+            '.web.jsx',
             '.web.ts',
             '.web.tsx',
             '.js',

package/types/getVitePath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getVitePath.d.ts","sourceRoot":"","sources":["../src/getVitePath.ts"],"names":[],"mappings":"AAKA,wBAAsB,WAAW,CAC/B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,QAAQ,UAAQ,mBAsBjB"}
+{"version":3,"file":"getVitePath.d.ts","sourceRoot":"","sources":["../src/getVitePath.ts"],"names":[],"mappings":"AAKA,wBAAsB,WAAW,CAC/B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,QAAQ,UAAQ,mBAoCjB"}

package/types/index.d.ts

@@ -2,5 +2,4 @@ export * from './plugin';
 export * from './extract';
 export * from './nativePlugin';
 export * from './getVitePath';
-export * from './nativePrebuild';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA"}

package/types/nativePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativePlugin.d.ts","sourceRoot":"","sources":["../src/nativePlugin.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAOlC,wBAAgB,YAAY,CAAC,OAAO,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,GAAG,MAAM,CAsQvF"}
+{"version":3,"file":"nativePlugin.d.ts","sourceRoot":"","sources":["../src/nativePlugin.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAKlC,wBAAgB,YAAY,CAAC,OAAO,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,GAAG,MAAM,CA8SvF"}

package/types/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC;;GAEG;AAEH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,cAAc,GAAG;IACxB,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,GACA,MAAM,CA+GR"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC;;GAEG;AAEH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,cAAc,GAAG;IACxB,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,GACA,MAAM,CAgHR"}

package/src/nativePrebuild.ts

@@ -1,137 +0,0 @@
-import { readFile } from 'fs/promises'
-import { join } from 'path'
-
-import * as babel from '@babel/core'
-import { build } from 'esbuild'
-
-import { extensions } from './extensions'
-
-async function nativeBabelFlowTransform(input: string) {
-  return await new Promise<string>((res, rej) => {
-    babel.transform(
-      input,
-      {
-        presets: ['module:metro-react-native-babel-preset'],
-      },
-      (err: any, { code }) => {
-        if (err) rej(err)
-        res(code)
-      }
-    )
-  })
-}
-
-const prebuiltDir = join(process.cwd(), 'testing-area')
-export const prebuiltFiles = {
-  react: join(prebuiltDir, 'react.js'),
-  reactJSXRuntime: join(prebuiltDir, 'react-jsx-runtime.js'),
-  reactNative: join(prebuiltDir, 'react-native.js'),
-}
-
-export async function nativePrebuild() {
-  // rome-ignore lint/suspicious/noConsoleLog: <explanation>
-
-  // await build({
-  //   bundle: true,
-  //   entryPoints: [require.resolve('@tamagui/core')],
-  //   outfile: prebuiltFiles.reactNative,
-  //   format: 'cjs',
-  //   target: 'node20',
-  //   jsx: 'transform',
-  //   jsxFactory: 'react',
-  //   allowOverwrite: true,
-  //   platform: 'node',
-  //   external: ['react-native', 'react', 'react/jsx-runtime'],
-  //   loader: {
-  //     '.png': 'dataurl',
-  //     '.jpg': 'dataurl',
-  //     '.jpeg': 'dataurl',
-  //     '.gif': 'dataurl',
-  //   },
-  //   define: {
-  //     __DEV__: 'true',
-  //     'process.env.NODE_ENV': `"development"`,
-  //     // TODO
-  //     'process.env.REACT_NATIVE_SERVER_PUBLIC_PORT': JSON.stringify('8081'),
-  //   },
-  //   logLevel: 'warning',
-  //   resolveExtensions: extensions,
-  // })
-
-  if (process.env.SKIP_PREBUILD_RN) {
-    return
-  }
-
-  console.log(`Prebuilding React Native (one time cost...)`)
-
-  await Promise.all([
-    build({
-      bundle: true,
-      entryPoints: [require.resolve('react-native')],
-      outfile: prebuiltFiles.reactNative,
-      format: 'cjs',
-      target: 'node20',
-      jsx: 'transform',
-      jsxFactory: 'react',
-      allowOverwrite: true,
-      platform: 'node',
-      loader: {
-        '.png': 'dataurl',
-        '.jpg': 'dataurl',
-        '.jpeg': 'dataurl',
-        '.gif': 'dataurl',
-      },
-      define: {
-        __DEV__: 'true',
-        'process.env.NODE_ENV': `"development"`,
-        // TODO
-        'process.env.REACT_NATIVE_SERVER_PUBLIC_PORT': JSON.stringify('8081'),
-      },
-      logLevel: 'warning',
-      resolveExtensions: extensions,
-      plugins: [
-        {
-          name: 'remove-flow',
-          setup(build) {
-            build.onResolve(
-              {
-                filter: /HMRClient/,
-              },
-              async (input) => {
-                return {
-                  path: require.resolve('@tamagui/vite-native-hmr'),
-                }
-              }
-            )
-
-            build.onLoad(
-              {
-                filter: /.*.js/,
-              },
-              async (input) => {
-                if (
-                  !input.path.includes('react-native') &&
-                  !input.path.includes(`vite-native-hmr`)
-                ) {
-                  return
-                }
-
-                const code = await readFile(input.path, 'utf-8')
-
-                // omg so ugly but no class support?
-                const outagain = await nativeBabelFlowTransform(code)
-
-                return {
-                  contents: outagain,
-                  loader: 'jsx',
-                }
-              }
-            )
-          },
-        },
-      ],
-    }),
-
-    ,
-  ])
-}