@tamagui/vite-plugin 1.0.1-beta.141 → 1.0.1-beta.142

package/src/plugin.ts

@@ -3,25 +3,25 @@ import type { TamaguiOptions } from '@tamagui/static'
 import type { Plugin } from 'vite'
 import envPlugin from 'vite-plugin-environment'
 
-import { tamaguiExtractPlugin } from './extractPlugin'
-
 /**
  * For some reason envPlugin doesnt work for vitest, but process: { env: {} } breaks vitest
  */
 
-export function tamaguiPlugin(options: TamaguiOptions): Plugin {
+export function tamaguiPlugin(
+  options: TamaguiOptions & {
+    useReactNativeWebLite?: boolean
+  }
+): Plugin {
   const plugin: Plugin = {
-    name: 'tamagui',
+    name: 'tamagui-base',
     enforce: 'pre',
 
     config(userConfig, env) {
       return {
         plugins: [
+          //
+          // envPlugin(['NODE_ENV', 'TAMAGUI_TARGET', 'ENABLE_RSC']),
           // viteCommonjs(),
-          envPlugin(['NODE_ENV', 'TAMAGUI_TARGET']),
-          // ...(options.disable || (options.disableDebugAttr && options.disableExtraction)
-          //   ? []
-          //   : [tamaguiExtractPlugin(options)]),
         ],
         esbuild: {
           loader: 'tsx',
@@ -32,12 +32,11 @@ export function tamaguiPlugin(options: TamaguiOptions): Plugin {
           _frameTimestamp: undefined,
           _WORKLET: false,
           ...(process.env.NODE_ENV !== 'test' && {
-            process: {
-              env: {
-                TAMAGUI_TARGET: process.env.TAMAGUI_TARGET || 'web',
-                NODE_ENV: process.env.NODE_ENV || env.mode,
-              },
-            },
+            'process.env.TAMAGUI_TARGET': JSON.stringify(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.IS_STATIC': JSON.stringify(false),
           }),
         },
         // build: {
@@ -46,15 +45,22 @@ export function tamaguiPlugin(options: TamaguiOptions): Plugin {
         //   },
         // },
         ssr: {
-          noExternal: /tamagui|react-native/,
-          optimizeDeps: {
-            // disabled: true,
-          },
+          // noExternal: /^(tamagui|react-native|expo-linear-gradient)$/,
+          noExternal: /tamagui|react-native|expo-linear-gradient/,
         },
         optimizeDeps: {
-          // include: [/node_modules/],
+          // disabled: false,
+          include: ['styleq', 'copy-to-clipboard', 'react-native-reanimated'],
           esbuildOptions: {
-            // plugins: [esbuildCommonjs(['fbjs'])],
+            jsx: 'transform',
+            // plugins: [
+            //   esbuildCommonjs([
+            //     'styleq',
+            //     'inline-style-prefixer',
+            //     'create-react-class',
+            //     'copy-to-clipboard',
+            //   ]),
+            // ],
             resolveExtensions: [
               '.web.js',
               '.web.ts',
@@ -73,7 +79,7 @@ export function tamaguiPlugin(options: TamaguiOptions): Plugin {
         },
         resolve: {
           // for once it extracts
-          // mainFields: ['module:jsx', 'module', 'jsnext:main', 'jsnext'],
+          // mainFields: ['module:jsx', 'module', 'jsnext:main', 'jsnext', 'main'],
           extensions: [
             '.web.js',
             '.web.ts',
@@ -88,8 +94,13 @@ export function tamaguiPlugin(options: TamaguiOptions): Plugin {
           alias: {
             'react-native/Libraries/Renderer/shims/ReactFabric': '@tamagui/proxy-worm',
             'react-native/Libraries/Utilities/codegenNativeComponent': '@tamagui/proxy-worm',
-            // 'react-native': 'react-native-web-lite',
+            'react-native-svg': 'react-native-svg-web',
             'react-native': 'react-native-web',
+            ...(options.useReactNativeWebLite && {
+              '@tamagui/rnw': '@tamagui/rnw-lite',
+              'react-native': 'react-native-web-lite',
+              'react-native-web': 'react-native-web-lite',
+            }),
           },
         },
       }

package/types/extract.d.ts

@@ -0,0 +1,4 @@
+import { TamaguiOptions } from '@tamagui/static';
+import type { Plugin } from 'vite';
+export declare function tamaguiExtractPlugin(options: TamaguiOptions): Plugin;
+//# sourceMappingURL=extract.d.ts.map

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './plugin';
+export * from './extract';
 //# sourceMappingURL=index.d.ts.map

package/types/plugin.d.ts

@@ -1,4 +1,6 @@
 import type { TamaguiOptions } from '@tamagui/static';
 import type { Plugin } from 'vite';
-export declare function tamaguiPlugin(options: TamaguiOptions): Plugin;
+export declare function tamaguiPlugin(options: TamaguiOptions & {
+    useReactNativeWebLite?: boolean;
+}): Plugin;
 //# sourceMappingURL=plugin.d.ts.map

package/src/extractPlugin.ts

@@ -1,161 +0,0 @@
-// fork from https://github.com/seek-oss/vanilla-extract/blob/master/packages/vite-plugin/src/index.ts
-
-import path from 'path'
-
-import type { TamaguiOptions } from '@tamagui/static'
-import outdent from 'outdent'
-import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
-import { normalizePath } from 'vite'
-
-const styleUpdateEvent = (fileId: string) => `tamagui-style-update:${fileId}`
-
-export function tamaguiExtractPlugin(options: TamaguiOptions): Plugin {
-  let config: ResolvedConfig
-  let server: ViteDevServer
-  const cssMap = new Map<string, string>()
-  let virtualExt: string
-  let packageName: string
-
-  const getAbsoluteVirtualFileId = (source: string) => normalizePath(path.join(config.root, source))
-
-  return {
-    name: 'tamagui-extract',
-    enforce: 'pre',
-
-    configureServer(_server) {
-      server = _server
-    },
-
-    config(_userConfig, env) {
-      // const include = env.command === 'serve' ? ['@tamagui/css/injectStyles'] : []
-      // return {
-      //   optimizeDeps: { include },
-      //   ssr: {
-      //     external: ['@tamagui/css', '@tamagui/css/fileScope', '@tamagui/css/adapter'],
-      //   },
-      // }
-    },
-
-    async configResolved(resolvedConfig) {
-      // config = resolvedConfig
-      // packageName = getPackageInfo(config.root).name
-      // if (config.command === 'serve') {
-      //   postCssConfig = await resolvePostcssConfig(config)
-      // }
-      // virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`
-    },
-
-    resolveId(source) {
-      // if (!source.endsWith(virtualExt)) {
-      //   return
-      // }
-      // // Absolute paths seem to occur often in monorepos, where files are
-      // // imported from outside the config root.
-      // const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source)
-      // // There should always be an entry in the `cssMap` here.
-      // // The only valid scenario for a missing one is if someone had written
-      // // a file in their app using the .vanilla.js/.vanilla.css extension
-      // if (cssMap.has(absoluteId)) {
-      //   return absoluteId
-      // }
-    },
-
-    load(id) {
-      // if (!cssMap.has(id)) {
-      //   return
-      // }
-      // const css = cssMap.get(id)
-      // if (typeof css !== 'string') {
-      //   return
-      // }
-      // if (!server || server.config.isProduction) {
-      //   return css
-      // }
-      // return outdent`
-      //   import { injectStyles } from '@tamagui/css/injectStyles';
-      //   const inject = (css) => injectStyles({
-      //     fileScope: ${JSON.stringify({ filePath: id })},
-      //     css
-      //   });
-      //   inject(${JSON.stringify(css)});
-      //   import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
-      //     inject(css);
-      //   });
-      // `
-    },
-
-    async transform(code, id, ssrParam) {
-      // if (!cssFileFilter.test(id)) {
-      //   return null
-      // }
-      // let ssr: boolean | undefined
-      // if (typeof ssrParam === 'boolean') {
-      //   ssr = ssrParam
-      // } else {
-      //   ssr = ssrParam?.ssr
-      // }
-      // const index = id.indexOf('?')
-      // const validId = index === -1 ? id : id.substring(0, index)
-      // if (ssr) {
-      //   return addFileScope({
-      //     source: code,
-      //     filePath: normalizePath(validId),
-      //     rootPath: config.root,
-      //     packageName,
-      //   })
-      // }
-      // const { source, watchFiles } = await compile({
-      //   filePath: validId,
-      //   cwd: config.root,
-      //   esbuildOptions,
-      // })
-      // for (const file of watchFiles) {
-      //   // In start mode, we need to prevent the file from rewatching itself.
-      //   // If it's a `build --watch`, it needs to watch everything.
-      //   if (config.command === 'build' || file !== id) {
-      //     this.addWatchFile(file)
-      //   }
-      // }
-      // const output = await processVanillaFile({
-      //   source,
-      //   filePath: validId,
-      //   identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
-      //   serializeVirtualCssPath: async ({ fileScope, source }) => {
-      //     const rootRelativeId = `${fileScope.filePath}${virtualExt}`
-      //     const absoluteId = getAbsoluteVirtualFileId(rootRelativeId)
-      //     let cssSource = source
-      //     if (postCssConfig) {
-      //       const postCssResult = await (await import('postcss'))
-      //         .default(postCssConfig.plugins)
-      //         .process(source, {
-      //           ...postCssConfig.options,
-      //           from: undefined,
-      //           map: false,
-      //         })
-      //       cssSource = postCssResult.css
-      //     }
-      //     if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
-      //       const { moduleGraph } = server
-      //       const module = moduleGraph.getModuleById(absoluteId)
-      //       if (module) {
-      //         moduleGraph.invalidateModule(module)
-      //       }
-      //       server.ws.send({
-      //         type: 'custom',
-      //         event: styleUpdateEvent(absoluteId),
-      //         data: cssSource,
-      //       })
-      //     }
-      //     cssMap.set(absoluteId, cssSource)
-      //     // We use the root relative id here to ensure file contents (content-hashes)
-      //     // are consistent across build machines
-      //     return `import "${rootRelativeId}";`
-      //   },
-      // })
-      // return {
-      //   code: output,
-      //   map: { mappings: '' },
-      // }
-    },
-  }
-}