index.html

<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>
<p>Env Var <code class="env-var"></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>define variable in html: <code class="exp-define">__EXP__</code></p>

<script type="module">
  const __VAR_NAME__ = true // ensure define doesn't replace var name
  text('.exp', __EXP__)
  text('.string', __STRING__)
  text('.number', __NUMBER__)
  text('.boolean', __BOOLEAN__)
  text('.object', JSON.stringify(__OBJ__, 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__}"`]))

  function text(el, text) {
    document.querySelector(el).textContent = text
  }
</script>

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