feat: fuck damn

shapeshift · Feb 24, 2025 · 4ae19a3 · 4ae19a3
1 parent a9420ca
commit 4ae19a3
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 71 deletions.
diff --git a/index.html b/index.html
@@ -40,12 +40,9 @@
     <title>ShapeShift</title>
   </head>
   <body>
-    <script>
-      window.global = window;
-      window.process = { env: {} };
-    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/lib/global-polyfills.ts"></script>
     <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,4 @@
+import './lib/global-polyfills'
 import './wdyr'
 import '@/lib/polyfills'
 

diff --git a/src/lib/global-polyfills.ts b/src/lib/global-polyfills.ts
@@ -0,0 +1,7 @@
+import { Buffer } from 'buffer'
+import Process from 'process'
+
+window.Buffer = Buffer
+window.process = Process
+globalThis.Buffer = Buffer
+globalThis.process = Process
diff --git a/src/lib/polyfills.ts b/src/lib/polyfills.ts
@@ -55,9 +55,3 @@ import '@formatjs/intl-pluralrules/locale-data/tr'
 import '@formatjs/intl-pluralrules/locale-data/uk'
 import '@formatjs/intl-pluralrules/locale-data/vi'
 import '@formatjs/intl-pluralrules/locale-data/zh'
-
-import { Buffer } from 'buffer'
-import Process from 'process'
-
-globalThis.Buffer = Buffer
-globalThis.process = Process
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -7,70 +7,80 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-export default defineConfig(({ mode }) => {
-  return {
-    plugins: [react(), tsconfigPaths()],
-    resolve: {
-      alias: {
-        '@': resolve(__dirname, './src'),
-        '@shapeshiftmonorepo': resolve(__dirname, './packages'),
-        crypto: 'crypto-browserify',
-        stream: 'stream-browserify',
-        assert: 'assert',
-        http: 'stream-http',
-        https: 'https-browserify',
-        os: 'os-browserify',
-        url: 'url',
-        buffer: 'buffer',
-        process: 'process/browser',
-        'dayjs/locale': resolve(__dirname, 'node_modules/dayjs/locale'),
-      },
+export default defineConfig(mode => ({
+  plugins: [react(), tsconfigPaths()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@shapeshiftmonorepo': resolve(__dirname, './packages'),
+      crypto: 'crypto-browserify',
+      stream: 'stream-browserify',
+      assert: 'assert',
+      http: 'stream-http',
+      https: 'https-browserify',
+      os: 'os-browserify',
+      url: 'url',
+      buffer: 'buffer',
+      process: 'process/browser',
+      'dayjs/locale': resolve(__dirname, 'node_modules/dayjs/locale'),
     },
-    define: {
-      'process.env': {},
-      global: 'globalThis',
+  },
+  define: {
+    'process.env': {},
+    global: 'globalThis',
+    'global.Buffer': ['buffer', 'Buffer'],
+  },
+  build: {
+    target: 'esnext',
+    commonjsOptions: {
+      transformMixedEsModules: true,
     },
-    build: {
-      rollupOptions: {
-        external: [],
-        output: {
-          format: 'es',
-          exports: 'named',
-          manualChunks(id) {
-            if (
-              id.includes('react') ||
-              id.includes('react-dom') ||
-              id.includes('scheduler') ||
-              id.includes('@emotion/') ||
-              id.includes('@chakra-ui/') ||
-              id.includes('framer-motion')
-            ) {
-              return 'vendor-core'
-            }
-
-            return null
-          },
-          chunkFileNames(chunkInfo) {
-            const prefix =
-              {
-                'vendor-core': '00',
-                'vendor-ui': '10',
-              }[chunkInfo.name] || '99'
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+      output: {
+        manualChunks(id) {
+          // Bundle React and polyfills together to ensure they're available
+          if (
+            id.includes('react') ||
+            id.includes('react-dom') ||
+            id.includes('scheduler') ||
+            id.includes('buffer') ||
+            id.includes('process') ||
+            id.includes('polyfills')
+          ) {
+            return 'vendor-react'
+          }
+          return null
+        },
+        chunkFileNames: chunkInfo => {
+          const prefix =
+            {
+              polyfills: '00',
+              'vendor-react': '01',
+            }[chunkInfo.name] || '99'
 
-            return `assets/${prefix}-${chunkInfo.name}-[hash].js`
-          },
-          entryFileNames: 'assets/[name]-[hash].js',
-          assetFileNames: 'assets/[name]-[hash][extname]',
+          return `assets/${prefix}-${chunkInfo.name}-[hash].js`
         },
-        preserveModules: false,
-        format: 'es',
-        chunkSizeWarningLimit: 25000,
+        entryFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash][extname]',
+      },
+      preserveModules: false,
+      format: 'es',
+      exports: 'named',
+    },
+    minify: mode === 'development' ? false : 'esbuild',
+    sourcemap: mode === 'development' ? 'eval-cheap-module-source-map' : false,
+    outDir: 'build',
+    emptyOutDir: true,
+  },
+  optimizeDeps: {
+    include: ['buffer', 'process'],
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
       },
-      target: ['es2020'],
-      minify: mode === 'development' ? false : 'esbuild',
-      sourcemap: mode === 'development' ? 'eval-cheap-module-source-map' : false,
-      outDir: 'build',
-      emptyOutDir: true,
     },
-  }
-})
+  },
+}))