index.html — vite Source File

Source Code

<h1>Glob import</h1>
<h2>Normal</h2>
<pre class="result"></pre>
<h2>Eager</h2>
<pre class="result-eager"></pre>
<h2>node_modules</h2>
<pre class="result-node_modules"></pre>
<h2>Raw</h2>
<pre class="globraw"></pre>
<h2>Property access</h2>
<pre class="property-access"></pre>
<h2>Relative raw</h2>
<pre class="relative-glob-raw"></pre>
<h2>Side effect</h2>
<pre class="side-effect-result"></pre>
<h2>Tree shake Eager CSS</h2>
<p class="tree-shake-eager-css">Should be orange</p>
<p class="no-tree-shake-eager-css">Should be orange</p>
<pre class="no-tree-shake-eager-css-result"></pre>
<h2>Escape relative glob</h2>
<pre class="escape-relative"></pre>
<h2>Escape alias glob</h2>
<pre class="escape-alias"></pre>
<h2>Subpath imports</h2>
<pre class="subpath-imports"></pre>
<h2>#alias imports</h2>
<pre class="hash-alias-imports"></pre>
<h2>In package</h2>
<pre class="in-package"></pre>
<h2>Base</h2>
<pre class="result-base"></pre>

<script type="module" src="./dir/index.js"></script>
<script type="module">
  function useImports(modules, selector) {
    const keys = Object.keys(modules)
    Promise.all(keys.map((key) => modules[key]())).then((mods) => {
      const res = {}
      mods.forEach((m, i) => {
        res[keys[i]] = m
      })
      document.querySelector(selector).textContent = JSON.stringify(
        res,
        null,
        2,
      )
    })
  }

  const modules = import.meta.glob(
    '/dir/**',
    // for test: annotation contain ")"
    /*
     * for test: annotation contain ")"
     * */
  )
  useImports(modules, '.result')
  const eagerModules = import.meta.glob('/dir/**', { eager: true })
  document.querySelector('.result-eager').textContent = JSON.stringify(
    eagerModules,
// ... (157 more lines)