vite/playground/json/index.html

<h2>Normal Import</h2>
<pre class="full"></pre>
<pre class="named"></pre>

<h2>Deep Import</h2>
<pre class="deep-full"></pre>
<pre class="deep-named"></pre>

<h2>Dynamic Import</h2>
<pre class="dynamic"></pre>
<pre class="dynamic-named"></pre>

<h2>fetch</h2>
<pre class="fetch"></pre>

<h2>Importing as URL</h2>
<pre class="url"></pre>

<h2>Raw Import</h2>
<pre class="raw"></pre>

<h2>JSON Module</h2>
<pre class="module"></pre>

<h2>Has BOM Tag</h2>
<pre class="bom"></pre>

<h2>HMR</h2>
<pre class="hmr"></pre>

<script type="module">
  import json, { hello } from './test.json'
  import deepJson, { name } from 'vue/package.json'

  text('.full', JSON.stringify(json))
  text('.named', hello)

  text('.deep-full', JSON.stringify(deepJson))
  text('.deep-named', name)

  import('/test.json').then((mod) => {
    text('.dynamic', JSON.stringify(mod.default))
    text('.dynamic-named', mod.hello)
  })

  fetch(import.meta.env.DEV ? '/test.json' : '/public.json')
    .then((r) => r.json())
    .then((data) => {
      text('.fetch', JSON.stringify(data))
    })

  import url from './test.json?url'
  text('.url', url)

  import raw from './test.json?raw'
  text('.raw', raw)

  import moduleJSON from '@vitejs/test-json-module'
  text('.module', JSON.stringify(moduleJSON))

  import hasBomJson from './json-bom/has-bom.json'
  text('.bom', JSON.stringify(hasBomJson))

  import hmrJSON from './hmr.json'
  text('.hmr', JSON.stringify(hmrJSON))

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