add disable cache hook #288

buuing · 2022-05-11T06:16:27Z

First of all, this is a good project. It solves the compatibility problem of different browsers, but I think we can add a method to disable caching

I have a problem here. In the following example, when I modify the content on the left for the second time, I click the render button and find that the iframe on the right is not re rendered because the fetch request is cached

At this point, unless I call the reload method to clear the cache

But I can't do that

This will cause the CDN link to send the request again and the waiting time is too long

So I'd like to add a method to let users freely decide whether to use fetch cache

code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 48vw;
      height: 300px;
      resize: none;
    }
  </style>
</head>
<body>
<textarea class="box" spellcheck="false">
export default function() {
  return 'Current Time: ' + Date.now()
}
</textarea>
<iframe class="box"></iframe>
<div style="text-align: center;">
  <button id="render">Render</button>
</div>
<script>
  const btn = document.querySelector('#render')
  const textarea = document.querySelector('textarea')
  const iframe = document.querySelector('iframe')
  btn.addEventListener('click', () => {
    const template = genTemplate(textarea.value)
    iframe.contentDocument.open()
    iframe.contentDocument.write(template)
    iframe.contentDocument.close()
  })
  function genTemplate(text) {
    return `
      <div id="app"></div>
      <script>
        var originPath = window.location.origin + window.location.pathname
        var publicPath = originPath.slice(0, originPath.lastIndexOf('/') + 1)
        var VirtualFiles = ${JSON.stringify({ 'app.js': text })}
        var files = {}
        for (const filename in VirtualFiles) {
          files[publicPath + filename] = VirtualFiles[filename]
        }
        window.esmsInitOptions = {
          shimMode: true,
          fetch: async (url, options) => {
            const content = files[url]
            if (content) return new Response(new Blob([content], { type: 'application/javascript' }))
            return fetch(url, options)
          },
          // // This method can be used to selectively disable caching
          // disableCache: (url, options, source) => {
          //   if (files[url]) return true
          // }
        }
      <\/script>
      <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"><\/script>
      <script type="module-shim">
        import RenderFn from './app.js'
        const dom = document.querySelector('#app')
        setInterval(() => dom.innerHTML = RenderFn(), 1000 / 60)
      <\/script>
    `
  }
</script>
</body>
</html>

guybedford · 2022-05-11T17:04:53Z

In general, one of the goals for ES Module Shims is to follow native browser specifications as closely as possible.

Not caching modules is unfortunately quite a big shift away from the way that browsers work.

Rather a better way to achieve this kind of thing is to add a query parameter to the URL with a resolve hook. The hot reloader uses a similar technique in the PR at #269 coming in the next release.

buuing mentioned this issue May 11, 2022

feat: add disable cache hook #289

Closed

guybedford closed this as completed Jun 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add disable cache hook #288

add disable cache hook #288

buuing commented May 11, 2022

guybedford commented May 11, 2022

add disable cache hook #288

add disable cache hook #288

Comments

buuing commented May 11, 2022

code

guybedford commented May 11, 2022