refactor: make define option perform direct replacement instead

BREAKING CHANGE: `define` option no longer calls `JSON.stringify` on string values. This means string define values will be now treated as raw expressions. To define a string constant, explicit quotes are now required.
vitejs · Feb 13, 2021 · 059070e · 059070e
1 parent 26d409b
commit 059070e
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 19 deletions.
diff --git a/packages/playground/define/__tests__/define.spec.ts b/packages/playground/define/__tests__/define.spec.ts
@@ -1,7 +1,8 @@
 test('string', async () => {
   const defines = require('../vite.config.js').define
 
-  expect(await page.textContent('.string')).toBe(String(defines.__STRING__))
+  expect(await page.textContent('.exp')).toBe(String(eval(defines.__EXP__)))
+  expect(await page.textContent('.string')).toBe(JSON.parse(defines.__STRING__))
   expect(await page.textContent('.number')).toBe(String(defines.__NUMBER__))
   expect(await page.textContent('.boolean')).toBe(String(defines.__BOOLEAN__))
   expect(await page.textContent('.object')).toBe(

diff --git a/packages/playground/define/index.html b/packages/playground/define/index.html
@@ -1,11 +1,13 @@
 <h1>Define</h1>
 
+<p>Raw Expression <code class="exp"></code></p>
 <p>String <code class="string"></code></p>
 <p>Number <code class="number"></code></p>
 <p>Boolean <code class="boolean"></code></p>
 <p>Object <span class="pre object"></span></p>
 
 <script type="module">
+  text('.exp', __EXP__)
   text('.string', __STRING__)
   text('.number', __NUMBER__)
   text('.boolean', __BOOLEAN__)

diff --git a/packages/playground/define/vite.config.js b/packages/playground/define/vite.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   define: {
-    __STRING__: 'hello',
+    __EXP__: '1 + 1',
+    __STRING__: '"hello"',
     __NUMBER__: 123,
     __BOOLEAN__: true,
     __OBJ__: {

diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
@@ -269,15 +269,6 @@ export async function resolveConfig(
 
   // load .env files
   const userEnv = loadEnv(mode, resolvedRoot)
-  // check if user defined any import.meta.env variables
-  if (config.define) {
-    const prefix = `import.meta.env.`
-    for (const key in config.define) {
-      if (key.startsWith(prefix)) {
-        userEnv[key.slice(prefix.length)] = config.define[key]
-      }
-    }
-  }
 
   // Note it is possible for user to have a custom mode, e.g. `staging` where
   // production-like behavior is expected. This is indicated by NODE_ENV=production

diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
@@ -44,7 +44,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .replace(`__MODE__`, JSON.stringify(config.mode))
           .replace(`__BASE__`, JSON.stringify(config.base))
           .replace(`__ROOT__`, JSON.stringify(config.root))
-          .replace(`__DEFINES__`, JSON.stringify(config.define || {}))
+          .replace(`__DEFINES__`, serializeDefine(config.define || {}))
           .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
           .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
           .replace(`__HMR_PORT__`, JSON.stringify(port))
@@ -60,3 +60,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
     }
   }
 }
+
+function serializeDefine(define: Record<string, any>): string {
+  let res = `{`
+  for (const key in define) {
+    const val = define[key]
+    res += `${JSON.stringify(key)}: ${
+      typeof val === 'string' ? `(${val})` : JSON.stringify(val)
+    }, `
+  }
+  return res + `}`
+}
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
@@ -9,7 +9,8 @@ export function definePlugin(config: ResolvedConfig): Plugin {
 
   const userDefine: Record<string, string> = {}
   for (const key in config.define) {
-    userDefine[key] = JSON.stringify(config.define[key])
+    const val = config.define[key]
+    userDefine[key] = typeof val === 'string' ? val : JSON.stringify(val)
   }
 
   // during dev, import.meta properties are handled by importAnalysis plugin

diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -411,12 +411,20 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
       if (hasEnv) {
         // inject import.meta.env
-        str().prepend(
-          `import.meta.env = ${JSON.stringify({
-            ...config.env,
-            SSR: !!ssr
-          })};`
-        )
+        let env = `import.meta.env = ${JSON.stringify({
+          ...config.env,
+          SSR: !!ssr
+        })};`
+        // account for user env defines
+        for (const key in config.define) {
+          if (key.startsWith(`import.meta.env.`)) {
+            const val = config.define[key]
+            env += `${key} = ${
+              typeof val === 'string' ? val : JSON.stringify(val)
+            };`
+          }
+        }
+        str().prepend(env)
       }
 
       if (hasHMR && !ssr) {