Make sure globals are properly shimmed for esbuild transforms

davidmyersdev · davidmyersdev · commit abf35b8c0309 · 2023-08-06T19:22:34.000-04:00
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@tanstack/react-query-devtools": "^4.29.12",
     "@types/node": "^18.7.23",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "esbuild": "^0.16.16",
     "npm-run-all": "^4.1.5",
     "ohmyfetch": "^0.4.20",
@@ -56,7 +57,8 @@
     "vite": "^4.0.4",
     "vite-plugin-externalize-deps": "^0.1.5",
     "vite-plugin-inspect": "^0.6.0",
-    "vite-plugin-node-polyfills": "workspace:*"
+    "vite-plugin-node-polyfills": "workspace:*",
+    "vue": "^3.3.4"
   },
   "dependencies": {
     "@rollup/plugin-inject": "^5.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -161,6 +161,14 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
             ],
           },
         },
+        esbuild: {
+          // In dev, the global polyfills need to be injected as a banner in order for isolated scripts (such as Vue SFCs) to have access to them.
+          banner: [
+            isDevEnabled(optionsResolved.globals.Buffer) ? `import { Buffer as BufferPolyfill } from '${globalShimsPath}'\nwindow.Buffer = BufferPolyfill` : '',
+            isDevEnabled(optionsResolved.globals.global) ? `import { global as globalPolyfill } from '${globalShimsPath}'\nwindow.global = globalPolyfill` : '',
+            isDevEnabled(optionsResolved.globals.process) ? `import { process as processPolyfill } from '${globalShimsPath}'\nwindow.process = processPolyfill` : '',
+          ].join('\n'),
+        },
         optimizeDeps: {
           esbuildOptions: {
             // https://github.com/niksy/node-stdlib-browser/blob/3e7cd7f3d115ac5c4593b550e7d8c4a82a0d4ac4/README.md?plain=1#L203-L209
@@ -177,6 +185,7 @@ export const nodePolyfills = (options: PolyfillOptions = {}): Plugin => {
               // Supress the 'injected path "..." cannot be marked as external' error in Vite 4 (emitted by esbuild).
               // https://github.com/evanw/esbuild/blob/edede3c49ad6adddc6ea5b3c78c6ea7507e03020/internal/bundler/bundler.go#L1469
               {
+
                 name: 'vite-plugin-node-polyfills-shims-resolver',
                 setup(build) {
                   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
diff --git a/test/index.html b/test/index.html
@@ -6,7 +6,8 @@
     <title>Example</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="react-app"></div>
+    <div id="vue-app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/test/src/app.vue b/test/src/app.vue
@@ -0,0 +1,18 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const msg = ref(Buffer.from(Buffer.from('Hello, friend!').toString('base64'), 'base64').toString('ascii'))
+    // const msg = ref('')
+
+    return {
+      msg,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>{{ msg }}</div>
+</template>
diff --git a/test/src/main.ts b/test/src/main.ts
@@ -3,9 +3,11 @@ import { resolve } from 'node:path'
 import * as process from 'node:process'
 import fs from 'node:fs'
 import { fetch } from 'ohmyfetch'
-import { react } from './react'
+// import { react } from './react'
+import { vue } from './vue'
 
-react()
+// react()
+vue()
 
 console.log(fetch)
 console.log(resolve('.'))
diff --git a/test/src/react.tsx b/test/src/react.tsx
@@ -33,7 +33,7 @@ function App() {
 }
 
 export const react = () => {
-  ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
+  ReactDOM.createRoot(document.getElementById('react-app') as HTMLElement).render(
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <App />
diff --git a/test/src/vue.ts b/test/src/vue.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './app.vue'
+
+export const vue = () => {
+  const app = createApp(App)
+
+  app.mount('#vue-app')
+}
diff --git a/test/vite.config.ts b/test/vite.config.ts
@@ -1,12 +1,14 @@
 import { resolve } from 'node:path'
 import react from '@vitejs/plugin-react'
+import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
 import { nodePolyfills } from '../src/index'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    react(),
+    // react(),
+    vue(),
     nodePolyfills({
       exclude: ['fs'],
       globals: {

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ function App() {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`export const react = () => {`
`36`		`- ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(`
	`36`	`+ ReactDOM.createRoot(document.getElementById('react-app') as HTMLElement).render(`
`37`	`37`	`<React.StrictMode>`
`38`	`38`	`<QueryClientProvider client={queryClient}>`
`39`	`39`	`<App />`