fix(JS): Initalize JS even if script is loaded after DOMContentLoaded

src/common/js/index.ts

@@ -2,14 +2,13 @@
  * This file is imported by all themes, allowing for shared configurations among themes.
  */
 
-import './syntaxHighlight'
+import { codeHighlight } from './syntaxHighlight'
 
-export const init = (): void => {
+export const formatReferences = (): void => {
   const referenceListItemSel = '.references > li'
   const titleSel = 'span[itemprop="headline"]'
   const datePublishedSel = '[itemprop="datePublished"]'
-  const publicationIssueSel =
-    '[itemtype="https://schema.org/PublicationIssue"]'
+  const publicationIssueSel = '[itemtype="https://schema.org/PublicationIssue"]'
 
   document.querySelectorAll(referenceListItemSel).forEach(node => {
     const datePublished = node.querySelector(datePublishedSel) as HTMLElement
@@ -50,4 +49,15 @@ export const init = (): void => {
   })
 }
 
-document.addEventListener('DOMContentLoaded', init)
+const onReadyHandler = (): void => {
+  codeHighlight()
+  formatReferences()
+}
+
+export const load = (): void => {
+  if (document.readyState !== 'loading') {
+    onReadyHandler()
+  }
+
+  document.addEventListener('DOMContentLoaded', onReadyHandler)
+}

src/common/js/syntaxHighlight.ts

@@ -1,15 +1,17 @@
 import Prism from 'prismjs'
+import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-json'
 import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-r'
 import 'prismjs/plugins/line-highlight/prism-line-highlight'
 import 'prismjs/plugins/line-numbers/prism-line-numbers'
 
-const ready = (): void => {
+export const codeHighlight = (): void => {
   document
     .querySelectorAll('pre[class*="language-"]')
     .forEach(node => node.classList.add('line-numbers'))
 
   Prism.highlightAll()
 }
-
-document.addEventListener('DOMContentLoaded', ready)

src/examples/simple.html

@@ -30,7 +30,7 @@ <h5>Title 5</h5>
     <h6>Title 6</h6>
 
     <stencila-codechunk data-collapsed="false" data-execution_count="4">
-      <pre slot="code"><code>import time
+      <pre slot="code"><code class="lang-python">import time
 time.sleep(10)</code></pre>
       <figure slot="outputs">
         <img src="https://via.placeholder.com/350x500" />
@@ -56,6 +56,14 @@ <h6>Title 6</h6>
       <li>Item number 8</li>
     </ul>
 
+    <stencila-codechunk data-collapsed="false" data-execution_count="4">
+      <pre slot="code"><code class="lang-python">import time
+time.sleep(10)</code></pre>
+      <figure slot="outputs">
+        <img src="https://via.placeholder.com/350x500" />
+      </figure>
+    </stencila-codechunk>
+
     <pre slot="code"><code>import time
         time.sleep(10)</code></pre>
   </body>

src/themes/eLife/index.ts

@@ -1 +1 @@
-export { init } from '../../common/js/index'
+export { load } from '../../common/js/index'

src/themes/nature/index.ts

@@ -1 +1 @@
-export { init } from '../../common/js/index'
+export { load } from '../../common/js/index'

src/themes/stencila/index.ts

@@ -1,2 +1,3 @@
-export const init = (): void => {
-}
+import { load } from '../../common/js/index'
+
+load()