From 9d45202b8d85e457b61d8c327a0276170c0ea070 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 13 Mar 2023 22:52:43 +0100
Subject: [PATCH] use Vite in @status-im/components

---
 packages/components/package.json          | 11 +++---
 packages/components/src/topbar/topbar.tsx |  4 +-
 packages/components/vite.config.ts        | 48 +++++++++++++++++------
 3 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index c00d8a15..788e18f9 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -5,15 +5,16 @@
     "*.css"
   ],
   "private": true,
-  "types": "src/index.tsx",
-  "main": "src/index.tsx",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "files": [
     "types",
     "dist"
   ],
   "scripts": {
-    "dev": "tamagui-build --watch",
-    "build": "tamagui-build",
+    "dev": "TAMAGUI_TARGET='web' vite build --watch --mode development",
+    "build": "TAMAGUI_TARGET='web' vite build",
     "postbuild": "yarn typegen",
     "typegen": "tsc --noEmit false --emitDeclarationOnly || true",
     "lint": "eslint src",
@@ -50,8 +51,8 @@
     "@storybook/react": "7.0.0-beta.21",
     "@storybook/react-vite": "7.0.0-beta.21",
     "@storybook/testing-library": "^0.0.13",
-    "@tamagui/build": "1.7.7",
     "@tamagui/vite-plugin": "1.7.7",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-svg": "^13.8.0",
diff --git a/packages/components/src/topbar/topbar.tsx b/packages/components/src/topbar/topbar.tsx
index e75cf073..6a0b6349 100644
--- a/packages/components/src/topbar/topbar.tsx
+++ b/packages/components/src/topbar/topbar.tsx
@@ -1,4 +1,3 @@
-import { Divider, IconButton, Paragraph } from '@status-im/components'
 import {
   ArrowLeftIcon,
   CommunitiesIcon,
@@ -14,7 +13,10 @@ import {
 import { Stack, Text } from '@tamagui/core'
 import { BlurView } from 'expo-blur'
 
+import { Divider } from '../divider'
 import { DropdownMenu } from '../dropdown-menu'
+import { IconButton } from '../icon-button'
+import { Paragraph } from '../typography'
 
 import type { Channel } from '../sidebar/mock-data'
 
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
index 111602e0..76a6abc6 100644
--- a/packages/components/vite.config.ts
+++ b/packages/components/vite.config.ts
@@ -2,7 +2,7 @@ import { tamaguiPlugin } from '@tamagui/vite-plugin'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
 
-import type { PluginOption } from 'vite'
+import { dependencies, peerDependencies } from './package.json'
 
 const tamaguiConfig = {
   components: [],
@@ -10,14 +10,40 @@ const tamaguiConfig = {
   // useReactNativeWebLite: true,
 }
 
-// https://vitejs.dev/config
-export default defineConfig({
-  define: {
-    TAMAGUI_TARGET: JSON.stringify('web'),
-  },
-  plugins: [
-    react(),
-    tamaguiPlugin(tamaguiConfig) as PluginOption,
-    // tamaguiExtractPlugin(tamaguiConfig)
-  ],
+const external = [
+  ...Object.keys(dependencies || {}),
+  ...Object.keys(peerDependencies || {}),
+].map(name => new RegExp(`^${name}(/.*)?`))
+
+export default defineConfig(({ mode }) => {
+  return {
+    define: {
+      TAMAGUI_TARGET: JSON.stringify('web'),
+    },
+    build: {
+      target: 'es2020',
+      lib: {
+        entry: './src/index.tsx',
+        fileName: 'index',
+        formats: ['es', 'cjs'],
+      },
+      sourcemap: true,
+      emptyOutDir: mode === 'production',
+      rollupOptions: {
+        external,
+      },
+    },
+
+    plugins: [
+      react({
+        // jsxRuntime: 'classic',
+      }),
+      tamaguiPlugin(tamaguiConfig),
+      // tamaguiExtractPlugin(tamaguiConfig)
+    ],
+
+    test: {
+      environment: 'happy-dom',
+    },
+  }
 })