@tamagui/vite-plugin 1.52.9 → 1.53.0

package/src/nativePlugin.ts

@@ -1,23 +1,22 @@
-import { esbuildFlowPlugin } from '@bunchtogether/vite-plugin-flow'
+import { readFile } from 'fs/promises'
+import { dirname } from 'path'
+
+import { transform } from '@swc/core'
+import { parse } from 'es-module-lexer'
 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 }): Plugin {
+export function nativePlugin(options: { port: number; mode: 'build' | 'serve' }): Plugin {
   return {
     name: 'tamagui-native',
     enforce: 'post',
 
     config: (config) => {
-      // // add hmr client
-      // config.plugins.push({
-      //   name: 'add-hmr-client',
-      //   generateBundle(x) {
-      //     x.
-      //   }
-      // })
-
       config.define ||= {}
       config.define['process.env.REACT_NATIVE_SERVER_PUBLIC_PORT'] = JSON.stringify(
         `${options.port}`
@@ -42,46 +41,33 @@ export function nativePlugin(options: { port: number }): Plugin {
 
       config.resolve.extensions = extensions
 
-      // config.resolve.alias ??= {}
-      // config.resolve.alias = {
-      //   ...config.resolve.alias,
-      //   // 'react-native/Libraries/Renderer/shims/ReactFabric':
-      //   //   'react-native/Libraries/Renderer/shims/ReactFabric',
-      //   // 'react-native/Libraries/Utilities/codegenNativeComponent':
-      //   //   'react-native/Libraries/Utilities/codegenNativeComponent',
-      //   // 'react-native-svg': 'react-native-svg',
-      //   // // 'react-native-web': 'react-native',
-      //   // 'react-native': 'react-native',
-      // }
-
       config.optimizeDeps ??= {}
 
-      // externals
-      // breaks
-      // config.optimizeDeps.exclude ??= []
-      // config.optimizeDeps.exclude.push('react-native')
+      config.optimizeDeps.disabled = true
 
-      config.optimizeDeps.needsInterop ??= []
-      config.optimizeDeps.needsInterop.push('react-native')
+      // config.optimizeDeps.needsInterop ??= []
+      // config.optimizeDeps.needsInterop.push('react-native')
+
+      // config.esbuild = false
 
       config.optimizeDeps.esbuildOptions ??= {}
       config.optimizeDeps.esbuildOptions.resolveExtensions = extensions
 
       config.optimizeDeps.esbuildOptions.plugins ??= []
 
-      config.optimizeDeps.esbuildOptions.plugins.push(
-        esbuildFlowPlugin(
-          /node_modules\/(react-native\/|@react-native\/)/,
-          (_) => 'jsx',
-          {
-            all: true,
-          }
-        )
-      )
-      // config.optimizeDeps.esbuildOptions.plugins.push(esbuildCommonjs(['react-native']))
-
-      config.optimizeDeps.include ??= []
-      config.optimizeDeps.include.push('react-native')
+      config.optimizeDeps.esbuildOptions.alias = {
+        'react-native': '@tamagui/proxy-worm'
+      }
+      
+      // config.optimizeDeps.esbuildOptions.plugins.push(
+      //   esbuildFlowPlugin(
+      //     /node_modules\/(react-native\/|@react-native\/)/,
+      //     (_) => 'jsx',
+      //     {
+      //       all: true,
+      //     }
+      //   )
+      // )
 
       config.optimizeDeps.esbuildOptions.loader ??= {}
       config.optimizeDeps.esbuildOptions.loader['.js'] = 'jsx'
@@ -111,17 +97,152 @@ export function nativePlugin(options: { port: number }): Plugin {
 
       config.build.rollupOptions.plugins ??= []
 
-      config.build.rollupOptions.external = [
-        'react-native',
-        'react',
-        'react/jsx-runtime',
-        'react/jsx-dev-runtime',
-      ]
+      if (options.mode === 'serve') {
+        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`,
+
+          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.build.rollupOptions.plugins.push(
+          viteExternalsPlugin(
+            {
+              react: '____react____',
+              'react/jsx-runtime': '____jsx____',
+              'react/jsx-dev-runtime': '____jsx____',
+            },
+            {
+              useWindow: false,
+            }
+          )
+        )
+
+        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}"));`
+                }
+              }
+            }
+
+            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
+          },
+        })
+
+        config.build.rollupOptions.plugins.push({
+          name: `native-transform`,
+
+          async transform(code, id) {
+            if (
+              id.includes(`node_modules/react/jsx-dev-runtime.js`) ||
+              id.includes(`node_modules/react/index.js`) ||
+              id.includes(`node_modules/react/cjs/react.development.js`) ||
+              id.includes(`node_modules/react-native/index.js`) ||
+              id.includes(
+                `node_modules/react/cjs/react-jsx-dev-runtime.development.js`
+              ) ||
+              id.includes(`packages/vite-native-client/`)
+            ) {
+              return
+            }
+
+            let out = await transform(code, {
+              filename: id,
+              swcrc: false,
+              configFile: false,
+              sourceMaps: true,
+              jsc: {
+                target: 'es5',
+                parser: id.endsWith('.tsx')
+                  ? { syntax: 'typescript', tsx: true, decorators: true }
+                  : id.endsWith('.ts')
+                  ? { syntax: 'typescript', tsx: false, decorators: true }
+                  : id.endsWith('.jsx')
+                  ? { syntax: 'ecmascript', jsx: true }
+                  : { syntax: 'ecmascript' },
+                transform: {
+                  useDefineForClassFields: true,
+                  react: {
+                    development: true,
+                    runtime: 'automatic',
+                  },
+                },
+              },
+            })
+
+            return out
+          },
+        })
+      }
+
       if (process.env.DEBUG) {
         console.log('config..', config)
       }
@@ -131,8 +252,14 @@ export function nativePlugin(options: { port: number }): Plugin {
       }
 
       const updateOutputOptions = (out: OutputOptions) => {
+        out.preserveModules = true
+
+        out.entryFileNames = (chunkInfo) => {
+          // ensures we have clean names for our require paths
+          return '[name].js'
+        }
         // Ensure that as many resources as possible are inlined.
-        out.inlineDynamicImports = true
+        // out.inlineDynamicImports = true
 
         // added by me (nate):
         out.manualChunks = undefined
@@ -152,23 +279,18 @@ const RNExportNames = [
   'AccessibilityInfo',
   'ActivityIndicator',
   'Button',
-  'DatePickerIOS',
   'DrawerLayoutAndroid',
   'FlatList',
   'Image',
   'ImageBackground',
   'InputAccessoryView',
   'KeyboardAvoidingView',
-  'MaskedViewIOS',
   'Modal',
   'Pressable',
-  'ProgressBarAndroid',
-  'ProgressViewIOS',
   'RefreshControl',
   'SafeAreaView',
   'ScrollView',
   'SectionList',
-  'Slider',
   'StatusBar',
   'Switch',
   'Text',
@@ -187,16 +309,13 @@ const RNExportNames = [
   'Appearance',
   'AppRegistry',
   'AppState',
-  'AsyncStorage',
   'BackHandler',
-  'Clipboard',
   'DeviceInfo',
   'DevSettings',
   'Dimensions',
   'Easing',
   'findNodeHandle',
   'I18nManager',
-  'ImagePickerIOS',
   'InteractionManager',
   'Keyboard',
   'LayoutAnimation',
@@ -237,3 +356,67 @@ const RNExportNames = [
   // 'PointPropType',
   // 'ViewPropTypes',
 ]
+
+// failed attempt to get vite to bundle rn, after a bunch of hacks still trouble
+
+//         config.build.rollupOptions.plugins.push({
+//           name: 'flow-remove-types',
+//           transform: async (codeIn, id) => {
+//             if (!id.includes('node_modules')) {
+//               return
+//             }
+//             const flowRemoved = flowRemoveTypes(codeIn).toString()
+//             let jsxRemoved = await nativeBabelRemoveJSX(flowRemoved)
+
+//             if (id.includes('BackHandler')) {
+//               jsxRemoved = jsxRemoved.replace(
+//                 `module.exports = require('../Components/UnimplementedViews/UnimplementedView');`,
+//                 ''
+//               )
+//             }
+
+//             if (jsxRemoved.includes(`module.exports = `)) {
+//               jsxRemoved = jsxRemoved.replace(
+//                 /\nmodule.exports = /gi,
+//                 `\nexport default `
+//               )
+//             }
+
+//             if (id.endsWith('ReactNativeViewConfigRegistry.js')) {
+//               jsxRemoved =
+//                 jsxRemoved +
+//                 `\nconst allExports = {...exports }; export default allExports;`
+//             }
+
+//             if (id.endsWith('ExceptionsManager.js')) {
+//               console.log('huh', id)
+//               jsxRemoved = jsxRemoved
+//                 .replace(/\nfunction /g, 'export function')
+//                 .replace('class SynthenticEvent', 'export class SyntheticEvent')
+//                 .replace(
+//                   `module.exports = {
+//   decoratedExtraDataKey,
+//   handleException,
+//   installConsoleErrorReporter,
+//   SyntheticError,
+//   unstable_setExceptionDecorator,
+// };`,
+//                   ``
+//                 )
+//             }
+
+//             return {
+//               code: jsxRemoved,
+//               map: null,
+//             }
+//           },
+//         })
+
+// config.build.rollupOptions.plugins.push(
+//   commonJs({
+//     include: ['**/node_modules/react-native/**', '**/node_modules/base64-js/**'],
+//     // ignoreGlobal: true,
+//     transformMixedEsModules: true,
+//     defaultIsModuleExports: true,
+//   }) as any
+// )

package/src/nativePrebuild.ts

@@ -6,21 +6,14 @@ import { build } from 'esbuild'
 
 import { extensions } from './extensions'
 
-export async function nativeBabelTransform(input: string) {
+async function nativeBabelFlowTransform(input: string) {
   return await new Promise<string>((res, rej) => {
     babel.transform(
       input,
       {
-        plugins: [
-          '@babel/plugin-transform-modules-commonjs',
-          '@babel/plugin-transform-classes',
-        ],
+        presets: ['module:metro-react-native-babel-preset'],
       },
       (err: any, { code }) => {
-        if (err) {
-          console.error('error', err)
-        }
-
         if (err) rej(err)
         res(code)
       }
@@ -28,78 +21,54 @@ export async function nativeBabelTransform(input: string) {
   })
 }
 
-export 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/nursery/noConsoleLog: <explanation>
 
-  if (process.env.SKIP_PREBUILD_RN) {
-    console.log(`⚠️ skipping pre build of rn`)
+  // 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...)`)
 
-  const outdir = join(process.cwd(), 'testing-area')
-
   await Promise.all([
-    // react
-    build({
-      bundle: true,
-      entryPoints: ['react'],
-      outfile: join(outdir, 'react.js'),
-      format: 'cjs',
-      target: 'node20',
-      jsx: 'transform',
-      jsxFactory: 'react',
-      allowOverwrite: true,
-      platform: 'node',
-      define: {
-        __DEV__: 'true',
-        'process.env.NODE_ENV': `"development"`,
-      },
-      logLevel: 'warning',
-      resolveExtensions: extensions,
-    }),
-    // react-jsx-runtime
     build({
       bundle: true,
-      entryPoints: ['react/jsx-runtime'],
-      outfile: join(outdir, 'react-jsx-runtime.js'),
-      format: 'cjs',
-      target: 'node20',
-      jsx: 'transform',
-      jsxFactory: 'react',
-      external: ['react'],
-      allowOverwrite: true,
-      platform: 'node',
-      define: {
-        // metro serves this in production mode
-        __DEV__: 'false',
-        'process.env.NODE_ENV': `"production"`,
-      },
-      logLevel: 'warning',
-      resolveExtensions: extensions,
-    }),
-    // react native
-    build({
-      bundle: true,
-      entryPoints: ['/Users/n8/tamagui/node_modules/react-native/index.js'],
-      outfile: join(outdir, 'react-native.js'),
+      entryPoints: [require.resolve('react-native')],
+      outfile: prebuiltFiles.reactNative,
       format: 'cjs',
       target: 'node20',
       jsx: 'transform',
@@ -120,7 +89,6 @@ export async function nativePrebuild() {
       },
       logLevel: 'warning',
       resolveExtensions: extensions,
-      external: ['react', 'react/jsx-runtime.js', 'react/jsx-runtime'],
       plugins: [
         {
           name: 'remove-flow',
@@ -163,5 +131,7 @@ export async function nativePrebuild() {
         },
       ],
     }),
+
+    ,
   ])
 }

package/types/getVitePath.d.ts

@@ -0,0 +1,2 @@
+export declare function getVitePath(importer: string, moduleName: string, absolute?: boolean): Promise<string>;
+//# sourceMappingURL=getVitePath.d.ts.map

package/types/getVitePath.d.ts.map

@@ -0,0 +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"}

package/types/index.d.ts

@@ -1,5 +1,6 @@
 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,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;AAC7B,cAAc,kBAAkB,CAAA"}

package/types/nativePlugin.d.ts

@@ -1,5 +1,6 @@
 import type { Plugin } from 'vite';
 export declare function nativePlugin(options: {
     port: number;
+    mode: 'build' | 'serve';
 }): Plugin;
 //# sourceMappingURL=nativePlugin.d.ts.map

package/types/nativePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativePlugin.d.ts","sourceRoot":"","sources":["../src/nativePlugin.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,wBAAgB,YAAY,CAAC,OAAO,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CA8I9D"}
+{"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"}

package/types/nativePrebuild.d.ts

@@ -1,4 +1,7 @@
-export declare function nativeBabelTransform(input: string): Promise<string>;
-export declare function nativeBabelFlowTransform(input: string): Promise<string>;
+export declare const prebuiltFiles: {
+    react: string;
+    reactJSXRuntime: string;
+    reactNative: string;
+};
 export declare function nativePrebuild(): Promise<void>;
 //# sourceMappingURL=nativePrebuild.d.ts.map

package/types/nativePrebuild.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativePrebuild.d.ts","sourceRoot":"","sources":["../src/nativePrebuild.ts"],"names":[],"mappings":"AAQA,wBAAsB,oBAAoB,CAAC,KAAK,EAAE,MAAM,mBAoBvD;AAED,wBAAsB,wBAAwB,CAAC,KAAK,EAAE,MAAM,mBAa3D;AAED,wBAAsB,cAAc,kBAyHnC"}
+{"version":3,"file":"nativePrebuild.d.ts","sourceRoot":"","sources":["../src/nativePrebuild.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,aAAa;;;;CAIzB,CAAA;AAED,wBAAsB,cAAc,kBA0GnC"}