vite/playground/define/index.html

<meta charset="utf-8" />

<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>Undefined <code class="undefined"></code></p>
<p>Object <span class="pre object"></span></p>
<p>Env Var <code class="env-var"></code></p>
<p>process node env: <code class="process-node-env"></code></p>
<p>process env: <code class="process-env"></code></p>
<p>process as property: <code class="process-as-property"></code></p>
<p>spread object: <code class="spread-object"></code></p>
<p>spread array: <code class="spread-array"></code></p>
<p>dollar identifier: <code class="dollar-identifier"></code></p>
<p>unicode identifier: <code class="unicode-identifier"></code></p>
<p>no property: <code class="no-property"></code></p>
<p>no identifier substring: <span class="no-identifier-substring"></span></p>
<p>define variable in html: <code class="exp-define">__EXP__</code></p>
<p>import json: <code class="import-json"></code></p>
<p>define in dep: <code class="define-in-dep"></code></p>

<h2>Define ignores string literals</h2>
<section class="ignores-string-literals">
  <p>process.env. <code class="process-env-dot"></code></p>
  <p>global.process.env. <code class="global-process-env-dot"></code></p>
  <p>
    globalThis.process.env. <code class="globalThis-process-env-dot"></code>
  </p>
  <p>process.env.NODE_ENV <code class="process-env-NODE_ENV"></code></p>
  <p>
    global.process.env.NODE_ENV
    <code class="global-process-env-NODE_ENV"></code>
  </p>
  <p>
    globalThis.process.env.NODE_ENV
    <code class="globalThis-process-env-NODE_ENV"></code>
  </p>
  <p>import.meta.hot <code class="import-meta-hot"></code></p>
</section>

<h2>Define replaces constants in template literal expressions</h2>
<section class="replaces-constants-in-template-literal-expressions">
  <p>process.env. <code class="process-env-dot"></code></p>
  <p>global.process.env. <code class="global-process-env-dot"></code></p>
  <p>
    globalThis.process.env. <code class="globalThis-process-env-dot"></code>
  </p>
  <p>process.env.NODE_ENV <code class="process-env-NODE_ENV"></code></p>
  <p>
    global.process.env.NODE_ENV
    <code class="global-process-env-NODE_ENV"></code>
  </p>
  <p>
    globalThis.process.env.NODE_ENV
    <code class="globalThis-process-env-NODE_ENV"></code>
  </p>
  <p>import.meta.hot <code class="import-meta-hot"></code></p>
</section>

<h2>Define undefined constants on import.meta.env when it's a invalid json</h2>
<section class="replace-undefined-constants-on-import-meta-env">
  <p>
    import.meta.env.UNDEFINED <code class="import-meta-env-UNDEFINED"></code>
  </p>
  <p>
    import.meta.env.SOME_IDENTIFIER
    <code class="import-meta-env-SOME_IDENTIFIER"></code>
  </p>
</section>

<script>
  // inject __VITE_SOME_IDENTIFIER__ to test if it's replaced
  window.__VITE_SOME_IDENTIFIER__ = true
</script>
<script type="module">
  const __VAR_NAME__ = true // ensure define doesn't replace var name
  text('.exp', typeof __EXP__) // typeof __EXP__ would be `boolean` instead of `string`
  text('.string', __STRING__)
  text('.number', __NUMBER__)
  text('.boolean', __BOOLEAN__)
  text('.undefined', __UNDEFINED__)
  text('.object', JSON.stringify(__OBJ__, null, 2))
  text('.process-node-env', process.env.NODE_ENV)
  text('.process-env', JSON.stringify(process.env, null, 2))
  text('.env-var', process.env.SOMEVAR)
  text('.process-as-property', __OBJ__.process.env.SOMEVAR)
  text(
    '.spread-object',
    JSON.stringify({
      ...(process.env.SOMEVAR ? { SOMEVAR: `"${process.env.SOMEVAR}"` } : {}),
    }),
  )
  text('.spread-array', JSON.stringify([...`"${__STRING__}"`]))
  text('.dollar-identifier', $DOLLAR)
  text('.unicode-identifier', ÖUNICODE_LETTERɵ)

  // make sure these kinds of use are NOT replaced:
  const obj = { [`${'_'}_EXP__`]: true }
  text('.no-property', obj.__EXP__)

  window[`${'_'}_EXP__SUBSTR__`] = true
  text('.no-identifier-substring', __EXP__SUBSTR__)

  import dataJson from './data.json'
  text('.import-json', dataJson.foo)

  function text(el, text) {
    document.querySelector(el).textContent = text
  }

  import { defined } from '@vitejs/test-commonjs-dep'
  text('.define-in-dep', JSON.stringify(defined))

  text('.ignores-string-literals .process-env-dot', 'process.env.')
  text(
    '.ignores-string-literals .global-process-env-dot',
    'global.process.env.',
  )
  text(
    '.ignores-string-literals .globalThis-process-env-dot',
    'globalThis.process.env.',
  )
  text('.ignores-string-literals .process-env-NODE_ENV', 'process.env.NODE_ENV')
  text(
    '.ignores-string-literals .global-process-env-NODE_ENV',
    'global.process.env.NODE_ENV',
  )
  text(
    '.ignores-string-literals .globalThis-process-env-NODE_ENV',
    'globalThis.process.env.NODE_ENV',
  )
  text('.ignores-string-literals .import-meta-hot', 'import.meta.hot')

  text(
    '.replaces-constants-in-template-literal-expressions .process-env-dot',
    `${process.env.SOMEVAR}`,
  )
  text(
    '.replaces-constants-in-template-literal-expressions .process-env-NODE_ENV',
    `${process.env.NODE_ENV}`,
  )

  text(
    '.replace-undefined-constants-on-import-meta-env .import-meta-env-UNDEFINED',
    `${import.meta.env.UNDEFINED}`,
  )
  text(
    '.replace-undefined-constants-on-import-meta-env .import-meta-env-SOME_IDENTIFIER',
    `${import.meta.env.SOME_IDENTIFIER}`,
  )
</script>

<style>
  .pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
  }
</style>