@tamagui/vite-plugin 1.1.12 → 1.1.13

package/src/native.ts

@@ -1,50 +1,21 @@
-// testing single file logic via https://github.com/richardtallent/vite-plugin-singlefile
-
-// helpful:
-// rollup config for react native
-// https://gist.github.com/pritishvaidya/171dcb8e857ec1df186c035c3df6ae16
-
-import micromatch from 'micromatch'
-import { OutputAsset, OutputChunk, OutputOptions } from 'rollup'
-import { Plugin } from 'vite'
-
-export function replaceScript(
-  html: string,
-  scriptFilename: string,
-  scriptCode: string,
-  removeViteModuleLoader = false
-): string {
-  const reScript = new RegExp(
-    `<script([^>]*?) src="[./]*${scriptFilename}"([^>]*)></script>`
-  )
-  // we can't use String.prototype.replaceAll since it isn't supported in Node.JS 14
-  const preloadMarker = /"__VITE_PRELOAD__"/g
-  const newCode = scriptCode.replace(preloadMarker, 'void 0')
-  const inlined = html.replace(
-    reScript,
-    (_, beforeSrc, afterSrc) => `<script${beforeSrc}${afterSrc}>\n${newCode}\n</script>`
-  )
-  return removeViteModuleLoader ? _removeViteModuleLoader(inlined) : inlined
-}
+import { readFile } from 'fs/promises'
+import { join } from 'path'
 
-export function replaceCss(
-  html: string,
-  scriptFilename: string,
-  scriptCode: string
-): string {
-  const reCss = new RegExp(`<link[^>]*? href="[./]*${scriptFilename}"[^>]*?>`)
-  const inlined = html.replace(reCss, `<style>\n${scriptCode}\n</style>`)
-  return inlined
-}
+import { esbuildFlowPlugin } from '@bunchtogether/vite-plugin-flow'
+import { OutputOptions } from 'rollup'
+import type { Plugin } from 'vite'
 
-const warnNotInlined = (filename: string) =>
-  console.warn(`WARNING: asset not inlined: ${filename}`)
+import { extensions } from './extensions.js'
 
 export function nativePlugin(): Plugin {
   return {
-    name: 'vite:singlefile',
+    name: 'tamagui-native',
+    enforce: 'post',
+
     config: (config) => {
       if (!config.build) config.build = {}
+
+      config.build.modulePreload = { polyfill: false }
       // Ensures that even very large assets are inlined in your JavaScript.
       config.build.assetsInlineLimit = 100000000
       // Avoid warnings about large chunks.
@@ -56,15 +27,118 @@ export function nativePlugin(): Plugin {
       // Subfolder bases are not supported, and shouldn't be needed because we're embedding everything.
       config.base = undefined
 
-      if (!config.build.rollupOptions) config.build.rollupOptions = {}
-      if (!config.build.rollupOptions.output) config.build.rollupOptions.output = {}
+      config.resolve ??= {}
+
+      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 ??= {}
+      config.optimizeDeps.esbuildOptions ??= {}
+      config.optimizeDeps.esbuildOptions.resolveExtensions = extensions
+
+      config.optimizeDeps.esbuildOptions.plugins ??= []
+      config.optimizeDeps.esbuildOptions.plugins.push(
+        esbuildFlowPlugin(
+          /node_modules\/(react-native\/|@react-native\/assets)/,
+          (_) => 'jsx'
+        )
+      )
+      // config.optimizeDeps.esbuildOptions.plugins.push(esbuildCommonjs(['react-native']))
+
+      config.optimizeDeps.include ??= []
+      config.optimizeDeps.include.push('react-native')
+
+      config.optimizeDeps.esbuildOptions.loader ??= {}
+      config.optimizeDeps.esbuildOptions.loader['.js'] = 'jsx'
+
+      config.optimizeDeps.esbuildOptions.plugins.push({
+        name: 'react-native-assets',
+        setup(build) {
+          build.onResolve(
+            {
+              filter: /\.(png|jpg|gif|webp)$/,
+            },
+            async ({ path, namespace }) => {
+              return {
+                path: '',
+                external: true,
+              }
+            }
+          )
+        },
+      })
+
+      config.build.rollupOptions ??= {}
+
+      config.build.rollupOptions.input =
+        '/Users/n8/tamagui/apps/kitchen-sink/src/index.tsx'
+
+      config.build.rollupOptions.output ??= {}
+
+      config.build.rollupOptions.plugins ??= []
+
+      config.build.rollupOptions.external = ['react-native', 'react', 'react/jsx-runtime']
+
+      if (!Array.isArray(config.build.rollupOptions.plugins)) {
+        throw `x`
+      }
+
+      if (process.env.DEBUG) {
+        console.log('config..', config)
+      }
+
+      config.build.commonjsOptions = {
+        include: /node_modules\/react\//,
+      }
+
+      config.build.rollupOptions.plugins.push({
+        name: `swap-react-native`,
+        async load(id) {
+          if (id.endsWith('react-native/index.js')) {
+            const bundled = await readFile(
+              join(process.cwd(), 'react-native.js'),
+              'utf-8'
+            )
+            const code = bundled
+            return {
+              code: `
+const run = () => {  
+  ${bundled.replace(
+    `module.exports = require_react_native();`,
+    `return require_react_native();`
+  )}
+}
+
+const RN = run()
+
+${RNExportNames.map(
+  (name) =>
+    // adding exports
+    `export const ${name} = RN.${name}`
+).join('\n')}
+
+`,
+            }
+          }
+        },
+      })
 
       const updateOutputOptions = (out: OutputOptions) => {
         // Ensure that as many resources as possible are inlined.
         out.inlineDynamicImports = true
 
         // added by me (nate):
-        console.log('adding manualChunks = undefined')
         out.manualChunks = undefined
       }
 
@@ -75,78 +149,95 @@ export function nativePlugin(): Plugin {
         updateOutputOptions(config.build.rollupOptions.output as OutputOptions)
       }
     },
-
-    enforce: 'post',
-
-    generateBundle: (_, bundle) => {
-      const inlinePattern = []
-      const jsExtensionTest = /\.[mc]?js$/
-      const htmlFiles = Object.keys(bundle).filter((i) => i.endsWith('.html'))
-      const cssAssets = Object.keys(bundle).filter((i) => i.endsWith('.css'))
-      const jsAssets = Object.keys(bundle).filter((i) => jsExtensionTest.test(i))
-      const bundlesToDelete = [] as string[]
-
-      console.log('bundle', bundle)
-
-      // for (const name of htmlFiles) {
-      //   const htmlChunk = bundle[name] as OutputAsset
-      //   let replacedHtml = htmlChunk.source as string
-      //   for (const jsName of jsAssets) {
-      //     if (!inlinePattern.length || micromatch.isMatch(jsName, inlinePattern)) {
-      //       const jsChunk = bundle[jsName] as OutputChunk
-      //       if (jsChunk.code != null) {
-      //         bundlesToDelete.push(jsName)
-      //         replacedHtml = replaceScript(
-      //           replacedHtml,
-      //           jsChunk.fileName,
-      //           jsChunk.code,
-      //           false
-      //           // removeViteModuleLoader
-      //         )
-      //       }
-      //     } else {
-      //       warnNotInlined(jsName)
-      //     }
-      //   }
-      //   for (const cssName of cssAssets) {
-      //     if (!inlinePattern.length || micromatch.isMatch(cssName, inlinePattern)) {
-      //       const cssChunk = bundle[cssName] as OutputAsset
-      //       bundlesToDelete.push(cssName)
-      //       replacedHtml = replaceCss(
-      //         replacedHtml,
-      //         cssChunk.fileName,
-      //         cssChunk.source as string
-      //       )
-      //     } else {
-      //       warnNotInlined(cssName)
-      //     }
-      //   }
-      //   htmlChunk.source = replacedHtml
-      // }
-
-      // if (deleteInlinedFiles) {
-      //   for (const name of bundlesToDelete) {
-      //     delete bundle[name]
-      //   }
-      // }
-
-      // for (const name of Object.keys(bundle).filter(
-      //   (i) => !jsExtensionTest.test(i) && !i.endsWith('.css') && !i.endsWith('.html')
-      // )) {
-      //   warnNotInlined(name)
-      // }
-    },
   }
 }
 
-// Optionally remove the Vite module loader since it's no longer needed because this plugin has inlined all code.
-// This assumes that the Module Loader is (1) the FIRST function declared in the module, (2) an IIFE, (3) is minified,
-// (4) is within a script with no unexpected attribute values, and (5) that the containing script is the first script
-// tag that matches the above criteria. Changes to the SCRIPT tag especially could break this again in the future.
-// Update example:
-// https://github.com/richardtallent/vite-plugin-singlefile/issues/57#issuecomment-1263950209
-const _removeViteModuleLoader = (html: string) =>
-  html.replace(
-    /(<script type="module" crossorigin>\s*)\(function\(\)\{[\s\S]*?\}\)\(\);/,
-    '<script type="module">\n'
-  )
+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',
+  'TextInput',
+  'Touchable',
+  'TouchableHighlight',
+  'TouchableNativeFeedback',
+  'TouchableOpacity',
+  'TouchableWithoutFeedback',
+  'View',
+  'VirtualizedList',
+  'VirtualizedSectionList',
+  'ActionSheetIOS',
+  'Alert',
+  'Animated',
+  'Appearance',
+  'AppRegistry',
+  'AppState',
+  'AsyncStorage',
+  'BackHandler',
+  'Clipboard',
+  'DeviceInfo',
+  'DevSettings',
+  'Dimensions',
+  'Easing',
+  'findNodeHandle',
+  'I18nManager',
+  'ImagePickerIOS',
+  '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',
+]

package/src/nativePrebuild.ts

@@ -0,0 +1,99 @@
+import { readFile } from 'fs/promises'
+
+import { build } from 'esbuild'
+import flowRemoveTypes from 'flow-remove-types'
+
+import { extensions } from './extensions.js'
+
+export async function nativePrebuild() {
+  console.log(`Prebuilding React Native (one time cost...)`)
+  await Promise.all([
+    // react
+    build({
+      bundle: true,
+      entryPoints: ['react'],
+      outfile: 'react.js',
+      format: 'cjs',
+      target: 'node14',
+      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: 'react-jsx-runtime.js',
+      format: 'cjs',
+      target: 'node14',
+      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: 'react-native.js',
+      format: 'cjs',
+      target: 'node14',
+      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"`,
+      },
+      logLevel: 'warning',
+      resolveExtensions: extensions,
+      external: ['react', 'react/jsx-runtime.js', 'react/jsx-runtime'],
+      plugins: [
+        {
+          name: 'remove-flow',
+          setup(build) {
+            build.onLoad(
+              {
+                filter: /.*.js/,
+              },
+              async (input) => {
+                if (!input.path.includes('react-native')) {
+                  return
+                }
+                const code = await readFile(input.path, 'utf-8')
+                const output = flowRemoveTypes(code, { pretty: true })
+                const contents = output.toString().replace(/static\s+\+/g, 'static ')
+                return {
+                  contents,
+                  loader: 'jsx',
+                }
+              }
+            )
+          },
+        },
+      ],
+    }),
+  ])
+}

package/src/plugin.ts

@@ -8,14 +8,12 @@ import type { Plugin } from 'vite'
 export function tamaguiPlugin(
   options: TamaguiOptions & {
     useReactNativeWebLite?: boolean
-  },
+  }
 ): Plugin {
-  const components = [
-    ...new Set([...options.components, 'tamagui', '@tamagui/core']),
-  ]
+  const components = [...new Set([...options.components, 'tamagui', '@tamagui/core'])]
   const noExternalSSR = new RegExp(
     `${components.join('|')}|react-native|expo-linear-gradient`,
-    'ig',
+    'ig'
   )
 
   const plugin: Plugin = {
@@ -36,13 +34,11 @@ export function tamaguiPlugin(
           _WORKLET: false,
           ...(process.env.NODE_ENV !== 'test' && {
             'process.env.TAMAGUI_TARGET': JSON.stringify(
-              process.env.TAMAGUI_TARGET || 'web',
+              process.env.TAMAGUI_TARGET || 'web'
             ),
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode),
             'process.env.ENABLE_RSC': JSON.stringify(process.env.ENABLE_RSC || ''),
-            'process.env.ENABLE_STEPS': JSON.stringify(
-              process.env.ENABLE_STEPS || '',
-            ),
+            'process.env.ENABLE_STEPS': JSON.stringify(process.env.ENABLE_STEPS || ''),
             'process.env.IS_STATIC': JSON.stringify(false),
           }),
         },
@@ -98,8 +94,7 @@ export function tamaguiPlugin(
             '.mjs',
           ],
           alias: {
-            'react-native/Libraries/Renderer/shims/ReactFabric':
-              '@tamagui/proxy-worm',
+            'react-native/Libraries/Renderer/shims/ReactFabric': '@tamagui/proxy-worm',
             'react-native/Libraries/Utilities/codegenNativeComponent':
               '@tamagui/proxy-worm',
             'react-native-svg': '@tamagui/react-native-svg',

package/types/extensions.d.ts

@@ -0,0 +1,2 @@
+export declare const extensions: string[];
+//# sourceMappingURL=extensions.d.ts.map

package/types/extensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions.d.ts","sourceRoot":"","sources":["../src/extensions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,UAWtB,CAAA"}

package/types/extract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract.d.ts","sourceRoot":"","sources":["../src/extract.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,OAAO,KAAK,EAAE,MAAM,EAAiC,MAAM,MAAM,CAAA;AAQjE,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,cAAc,GAAG,MAAM,CA8OpE"}

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './plugin.js';
 export * from './extract.js';
 export * from './native.js';
+export * from './nativePrebuild.js';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA"}

package/types/native.d.ts

@@ -1,5 +1,3 @@
-import { Plugin } from 'vite';
-export declare function replaceScript(html: string, scriptFilename: string, scriptCode: string, removeViteModuleLoader?: boolean): string;
-export declare function replaceCss(html: string, scriptFilename: string, scriptCode: string): string;
+import type { Plugin } from 'vite';
 export declare function nativePlugin(): Plugin;
 //# sourceMappingURL=native.d.ts.map

package/types/native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../src/native.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,wBAAgB,YAAY,IAAI,MAAM,CA+IrC"}

package/types/nativePrebuild.d.ts

@@ -0,0 +1,2 @@
+export declare function nativePrebuild(): Promise<void>;
+//# sourceMappingURL=nativePrebuild.d.ts.map

package/types/nativePrebuild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativePrebuild.d.ts","sourceRoot":"","sources":["../src/nativePrebuild.ts"],"names":[],"mappings":"AAOA,wBAAsB,cAAc,kBA2FnC"}

package/types/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC;;GAEG;AAEH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,cAAc,GAAG;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,GACA,MAAM,CAqGR"}