Turbolinks, Stimulus, динамический импорт (file.js) выдает мигание, перезагружает div

ВОСПРОИЗВЕДЕНИЕ: https://glitch.com/edit/

Я использую Stimulus с Turbolinks, и мне нужно динамически импортировать много js в контроллеры.

Код, который я использую в main.js является:

window.Turbolinks.start()

window.application = window.Stimulus.Application.start()

const IsPreviewPage = () => document.documentElement.hasAttribute('data-turbolinks-preview')

const divID = 'about_graphic'

window.application.register("about", class extends window.Stimulus.Controller {
  async initialize () {
    console.log("About, initialize()")

    if (IsPreviewPage()) {
      return
    }  

    const about = await import("./about.js")
    about.WriteInDiv()
  }
})

ЭТА ПРОБЛЕМА

Если я перейду к /about в первый раз Date.now() появляется.

Затем я перехожу к /index.

Когда я вернусь на /about страницу Date.now() перезагружается (вы можете увидеть мигание после страницы предварительного просмотра, выпущенной Turbolinks).

Как я могу избежать перезагрузки div?

В этом я не использую динамический импорт, и он не перезагружается: https://glitch.com/edit/

>>> ОБНОВЛЕНИЕ

Он мигает (перезагружает div), если я использую:

async initialize () {
  console.log("About, initialize()")

  if (IsPreviewPage()) {
    return
  }  

  await import("./about.js")
  WriteInDiv()
}

const WriteInDiv() = () => {...}

Почему?

0 ответов

Другие вопросы по тегам