index.html

<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>

<script type="module" src="./dir/index.js"></script>
<script type="module">
  function useImports(modules, selector) {
    for (const path in modules) {
      modules[path]().then((mod) => {
        console.log(path, mod)
      })
    }

    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,
    null,
    2
  )

  const nodeModules = import.meta.glob('/dir/node_modules/**')
  useImports(nodeModules, '.result-node_modules')
</script>

<script type="module">
  const rawModules = import.meta.glob('/dir/*.json', {
    as: 'raw',
    eager: true
  })
  const globraw = {}
  Object.keys(rawModules).forEach((key) => {
    globraw[key] = JSON.parse(rawModules[key])
  })
  document.querySelector('.globraw').textContent = JSON.stringify(
    globraw,
    null,
    2
  )
</script>

<script type="module">
  const bazJson = import.meta.glob('/dir/*.json', {
    as: 'raw',
    eager: true
  })['/dir/baz.json']
  document.querySelector('.property-access').textContent = JSON.stringify(
    JSON.parse(bazJson),
    null,
    2
  )
</script>

<script type="module">
  const relativeRawModules = import.meta.glob('../glob-import/dir/*.json', {
    as: 'raw',
    eager: true
  })
  const relativeGlobRaw = {}
  Object.keys(relativeRawModules).forEach((key) => {
    relativeGlobRaw[key] = JSON.parse(relativeRawModules[key])
  })
  document.querySelector('.relative-glob-raw').textContent = JSON.stringify(
    relativeGlobRaw,
    null,
    2
  )
</script>

<script type="module">
  const neverInvoke = () =>
    (document.querySelector('.side-effect-result').textContent =
      "Syntax generated from 'import.meta.glob' must do ASI.")
  const notInvocation = neverInvoke
  import.meta.glob('/side-effect/**', { eager: true })
</script>

<script type="module">
  import.meta.glob('/tree-shake.css', { eager: true })
  const results = import.meta.glob('/no-tree-shake.css', { eager: true })
  document.querySelector('.no-tree-shake-eager-css-result').textContent =
    results['/no-tree-shake.css'].default
</script>

<script type="module">
  const globs = import.meta.glob('/escape/**/glob.js', {
    eager: true
  })
  console.log(globs)
  globalThis.globs = globs
  const relative = Object.entries(globs)
    .filter(([_, mod]) => Object.keys(mod?.relative ?? {}).length === 1)
    .map(([glob]) => glob)
  document.querySelector('.escape-relative').textContent = relative
    .sort()
    .join('\n')
  const alias = Object.entries(globs)
    .filter(([_, mod]) => Object.keys(mod?.alias ?? {}).length === 1)
    .map(([glob]) => glob)
  document.querySelector('.escape-alias').textContent = alias.sort().join('\n')
</script>