Deferred run - Githubissues

DarthSim commented 1 year ago

Summary

On the imgproxy docs site, we need to fetch imgproxy versions to configure Docsify. Since we need to send an HTTP request, we can't do it synchronously, so we need to postpone Docsify initialization.

This PR allows deferring Docsify initialization by setting the window.DOCSIFY_DEFER variable. It also adds the window.runDocsify function that can be used to initialize Docsify when its config is ready.

What kind of change does this PR introduce?

Feature

For any code change,

[ ] Related documentation has been updated if needed
[ ] Related tests have been updated or tests have been added

Does this PR introduce a breaking change? (check one)

[ ] Yes
[x] No

If yes, please describe the impact and migration path for existing applications:

Related issue, if any:

Tested in the following browsers:

[x] Chrome
[x] Firefox
[x] Safari
[ ] Edge
[ ] IE

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docsify-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 9, 2023 6:23am

codesandbox-ci[bot] commented 1 year ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2674cb10cdc9f9979c032a2244618f13aa2da4b3:

Sandbox	Source
docsify-template	Configuration

trusktr commented 1 year ago

Hello! I appreciate the idea! I think being able to load Docsify on demand is good. However I believe this isn't the direction we should go.

In the meantime you can do this:

<script type="module">
  async function loadScript(URL) {
    const code = await (await fetch(URL)).text()
    const script = document.createElement('script')
    script.textContent = code
    document.head.append(script)
  }

  async function loadDocsify() {
    await loadScript('https://unpkg.com/docsify@4')
  }

  // run this when you want
  await loadDocsify()

  console.log('Docsify is loaded')
</script>

We are recently moving all code to ESM format (PR is ready to go). Once we have that in place, we can make this easy to do in a modern way:

<script type="module">
  import {Docsify} from 'https://unpkg.com/docsify@5/lib/docsify.esm.js'

  new Docsify(container) // run this any time you want.
</script>

We're aiming to be more standards friendly and make it an HTML element a little later:

<!-- the name is up for debate -->
<docsify-element></docsify-element>

<script type="module">
  import {define} from 'https://unpkg.com/docsify@5/lib/docsify-element.js'
  define() // run this line when ready. Before then, the element will not be instantiated.
</script>