fix: replace unknown import.meta.env lookups with full env object

Fixes #1
OpenSourceRaidGuild · Apr 9, 2021 · 4b5fb76 · 4b5fb76
1 parent 3f23671
commit 4b5fb76
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 11 deletions.
diff --git a/packages/babel-plugin-transform-vite-meta-env/src/__tests__/__snapshots__/index.ts.snap b/packages/babel-plugin-transform-vite-meta-env/src/__tests__/__snapshots__/index.ts.snap
@@ -17,7 +17,14 @@ const x = import.meta.env.OTHER
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const x = undefined
+const x = {
+  ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))),
+  NODE_ENV: process.env.NODE_ENV || 'test',
+  MODE: process.env.NODE_ENV || 'test',
+  BASE_URL: '/',
+  DEV: process.env.NODE_ENV !== 'production',
+  PROD: process.env.NODE_ENV === 'production'
+}.OTHER
 
 
 `;
@@ -86,4 +93,59 @@ const x = import.meta.env.VITE_VAR
 const x = process.env.VITE_VAR
 
 
+`;
+
+exports[`vite-meta-env replace env object: replace env object 1`] = `
+
+const env = import.meta.env
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const env = {
+  ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))),
+  NODE_ENV: process.env.NODE_ENV || 'test',
+  MODE: process.env.NODE_ENV || 'test',
+  BASE_URL: '/',
+  DEV: process.env.NODE_ENV !== 'production',
+  PROD: process.env.NODE_ENV === 'production'
+}
+
+
+`;
+
+exports[`vite-meta-env replace key access: replace key access 1`] = `
+
+const key = "VITE_VAR"; const x = import.meta.env[key]
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const key = 'VITE_VAR'
+const x = {
+  ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))),
+  NODE_ENV: process.env.NODE_ENV || 'test',
+  MODE: process.env.NODE_ENV || 'test',
+  BASE_URL: '/',
+  DEV: process.env.NODE_ENV !== 'production',
+  PROD: process.env.NODE_ENV === 'production'
+}[key]
+
+
+`;
+
+exports[`vite-meta-env replace string access: replace string access 1`] = `
+
+const x = import.meta.env["VITE_VAR"]
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = {
+  ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))),
+  NODE_ENV: process.env.NODE_ENV || 'test',
+  MODE: process.env.NODE_ENV || 'test',
+  BASE_URL: '/',
+  DEV: process.env.NODE_ENV !== 'production',
+  PROD: process.env.NODE_ENV === 'production'
+}['VITE_VAR']
+
+
 `;
diff --git a/packages/babel-plugin-transform-vite-meta-env/src/__tests__/index.ts b/packages/babel-plugin-transform-vite-meta-env/src/__tests__/index.ts
@@ -12,6 +12,9 @@ pluginTester({
     'replace DEV': 'const x = import.meta.env.DEV',
     'replace PROD': 'const x = import.meta.env.PROD',
     'replace VITE_* variables': 'const x = import.meta.env.VITE_VAR',
+    'replace string access': 'const x = import.meta.env["VITE_VAR"]',
+    'replace key access': 'const key = "VITE_VAR"; const x = import.meta.env[key]',
+    'replace env object': 'const env = import.meta.env',
     'not replaceable': 'const x = import.meta.env.OTHER',
     'not import.meta.env': 'const x = process.env.MODE'
   }

diff --git a/packages/babel-plugin-transform-vite-meta-env/src/index.ts b/packages/babel-plugin-transform-vite-meta-env/src/index.ts
@@ -1,6 +1,6 @@
 import type babelCore from '@babel/core'
 
-const REPLACE_VARS = [
+const replaceVars = [
   {
     regex: /^VITE_/,
     replacement: (template: typeof babelCore.template, variableName: string) =>
@@ -24,20 +24,26 @@ const REPLACE_VARS = [
     regex: /^PROD$/,
     replacement: (template: typeof babelCore.template) =>
       template.expression.ast("process.env.NODE_ENV === 'production'")
-  },
-  {
-    regex: /.*/,
-    replacement: (template: typeof babelCore.template) => template.expression.ast('undefined')
   }
 ]
 
+const replaceEnv = (template: typeof babelCore.template) =>
+  template.expression.ast(`{
+    ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))),
+    NODE_ENV: process.env.NODE_ENV || 'test',
+    MODE: process.env.NODE_ENV || 'test',
+    BASE_URL: '/',
+    DEV: process.env.NODE_ENV !== 'production',
+    PROD: process.env.NODE_ENV === 'production'
+  }`)
+
 function getReplacement(
   variableName: string,
   template: typeof babelCore.template
-): babelCore.types.Expression {
-  return REPLACE_VARS.filter(({ regex }) => regex.test(variableName)).map(({ replacement }) =>
-    replacement(template, variableName)
-  )[0]
+): babelCore.types.Expression | undefined {
+  return replaceVars
+    .filter(({ regex }) => regex.test(variableName))
+    .map(({ replacement }) => replacement(template, variableName))[0]
 }
 
 export default function viteMetaEnvBabelPlugin({
@@ -64,7 +70,12 @@ export default function viteMetaEnvBabelPlugin({
 
         const replacement = getReplacement(variableName, template)
 
-        path.replaceWith(replacement)
+        if (replacement) {
+          path.replaceWith(replacement)
+        }
+      },
+      MetaProperty(path) {
+        path.parentPath.replaceWith(replaceEnv(template))
       }
     }
   }