@tamagui/vite-plugin 1.0.1-beta.99 → 1.0.1-rc.0

package/src/plugin.ts

@@ -1,31 +1,66 @@
 import type { TamaguiOptions } from '@tamagui/static'
 import type { Plugin } from 'vite'
-import envPlugin from 'vite-plugin-environment'
 
-export function tamaguiPlugin(options?: TamaguiOptions): Plugin {
-  return {
-    name: 'tamagui',
+/**
+ * For some reason envPlugin doesnt work for vitest, but process: { env: {} } breaks vitest
+ */
+
+export function tamaguiPlugin(
+  options: TamaguiOptions & {
+    useReactNativeWebLite?: boolean
+  }
+): Plugin {
+  const components = [...new Set([...options.components, 'tamagui', '@tamagui/core'])]
+  const noExternalSSR = new RegExp(
+    `${components.join('|')}|react-native|expo-linear-gradient`,
+    'ig'
+  )
+
+  const plugin: Plugin = {
+    name: 'tamagui-base',
     enforce: 'pre',
 
     config(userConfig, env) {
       return {
-        plugins: [envPlugin(['NODE_ENV', 'TAMAGUI_TARGET'])],
-        esbuild: {
-          loader: 'tsx',
-        },
+        plugins: [
+          //
+          // envPlugin(['NODE_ENV', 'TAMAGUI_TARGET', 'ENABLE_RSC']),
+          // viteCommonjs(),
+        ],
         define: {
+          // reanimated support
           'global.__x': {},
           _frameTimestamp: undefined,
           _WORKLET: false,
-          process: {
-            env: {
-              TAMAGUI_TARGET: process.env.TAMAGUI_TARGET || 'web',
-              NODE_ENV: process.env.NODE_ENV || env.mode,
-            },
-          },
+          ...(process.env.NODE_ENV !== 'test' && {
+            '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: {
+        //   commonjsOptions: {
+        //     transformMixedEsModules: true,
+        //   },
+        // },
+        ssr: {
+          noExternal: noExternalSSR,
         },
         optimizeDeps: {
+          // disabled: false,
+          include: ['styleq', 'copy-to-clipboard', 'react-native-reanimated'],
           esbuildOptions: {
+            jsx: 'transform',
+            // plugins: [
+            //   esbuildCommonjs([
+            //     'styleq',
+            //     'inline-style-prefixer',
+            //     'create-react-class',
+            //     'copy-to-clipboard',
+            //   ]),
+            // ],
             resolveExtensions: [
               '.web.js',
               '.web.ts',
@@ -44,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',
@@ -59,199 +94,17 @@ 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-svg': '@tamagui/react-native-svg',
             'react-native': 'react-native-web',
+            ...(options.useReactNativeWebLite && {
+              'react-native': 'react-native-web-lite',
+              'react-native-web': 'react-native-web-lite',
+            }),
           },
         },
       }
     },
   }
-}
-
-// fork from https://github.com/seek-oss/vanilla-extract/blob/master/packages/vite-plugin/src/index.ts
-
-// import path from 'path'
-
-// import outdent from 'outdent'
-// import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'
-// import { normalizePath } from 'vite'
-
-// const styleUpdateEvent = (fileId: string) => `tamagui-style-update:${fileId}`
-
-// interface Options {
-//   identifiers?: IdentifierOption
-//   esbuildOptions?: CompileOptions['esbuildOptions']
-// }
-// export function vanillaExtractPlugin({ identifiers, esbuildOptions }: Options = {}): Plugin {
-//   let config: ResolvedConfig
-//   let server: ViteDevServer
-//   let postCssConfig: PostCSSConfigResult | null
-//   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',
-//     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: '' },
-//       }
-//     },
-//   }
-// }
+  return plugin
+}

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 './plugin.js';
+export * from './extract.js';
 //# sourceMappingURL=index.d.ts.map

package/types/plugin.d.ts

@@ -1,4 +1,9 @@
 import type { TamaguiOptions } from '@tamagui/static';
 import type { Plugin } from 'vite';
-export declare function tamaguiPlugin(options?: TamaguiOptions): Plugin;
+/**
+ * For some reason envPlugin doesnt work for vitest, but process: { env: {} } breaks vitest
+ */
+export declare function tamaguiPlugin(options: TamaguiOptions & {
+    useReactNativeWebLite?: boolean;
+}): Plugin;
 //# sourceMappingURL=plugin.d.ts.map

package/types/index.d.ts.map

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

package/types/plugin.d.ts.map

@@ -1 +0,0 @@
-{"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;AAGlC,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,MAAM,CA+D9D"}