fix(ui): renderer loading deferred into own fn

imports/ui/pages/story/story.js

@@ -1,16 +1,15 @@
 import { Template } from 'meteor/templating'
-import { ReactiveVar } from 'meteor/reactive-var'
-import { TaskRenderers } from '../../renderers/TaskRenderers'
 import { UnitSet } from '../../../contexts/unitSet/UnitSet'
 import { Dimension } from '../../../contexts/Dimension'
 import { Session } from '../../../contexts/session/Session'
 import { Level } from '../../../contexts/Level'
 import { createSessionLoader } from '../../loading/createSessionLoader'
+import { initTaskRenderers } from '../../renderers/initTaskRenderers'
 import '../../components/container/container'
 import '../../layout/navbar/navbar'
 import './story.html'
 
-const renderersLoaded = new ReactiveVar()
+const renderersLoaded = initTaskRenderers()
 
 Template.story.onCreated(function () {
   const instance = this
@@ -34,10 +33,6 @@ Template.story.onCreated(function () {
       debug('renderers loaded')
       return computation.stop()
     }
-
-    TaskRenderers.init()
-      .then(() => renderersLoaded.set(true))
-      .catch(e => console.error(e))
   })
 
   instance.autorun(() => {

imports/ui/pages/unit/unit.js

@@ -6,11 +6,9 @@ import { UnitSet } from '../../../contexts/unitSet/UnitSet'
 import { Dimension } from '../../../contexts/Dimension'
 import { Level } from '../../../contexts/Level'
 import { Unit } from '../../../contexts/Unit'
-import { TaskRenderers } from '../../renderers/TaskRenderers'
 import { ResponseCache } from './cache/ResponseCache'
 import { UnitPageCache } from './cache/UnitPageCache'
-import { LeaMarkdown } from '../../../api/markdown/LeaMarkdown'
-import { defaultMarkdownRenderer } from '../../renderers/defaultMarkdownRenderer'
+import { initTaskRenderers } from '../../renderers/initTaskRenderers'
 import { isCurrentUnit } from '../../../contexts/session/utils/isCurrentUnit'
 import { createItemLoad } from './item/createItemLoad'
 import { createItemInput } from './item/createItemInput'
@@ -22,7 +20,7 @@ import '../../layout/navbar/navbar'
 import '../../templates/initMarkdownRenderer'
 import './unit.html'
 
-const renderersLoaded = new ReactiveVar()
+const renderersLoaded = initTaskRenderers()
 const responseCache = ResponseCache.create(window.localStorage)
 const pageCache = UnitPageCache.create(window.localStorage)
 const submitItems = createItemSubmit({
@@ -35,10 +33,6 @@ const submitItems = createItemSubmit({
   onError: (error, responseDoc) => console.error(error, responseDoc)
 })
 
-// register markdown renderer
-const defaultMarkdownRendererName = 'default'
-LeaMarkdown.addRenderer(defaultMarkdownRendererName, defaultMarkdownRenderer())
-
 Template.unit.onCreated(function () {
   const instance = this
   instance.state.setDefault('currentPageCount', -1)
@@ -74,25 +68,6 @@ Template.unit.onCreated(function () {
   })
 
   const { info } = api
-
-  instance.autorun(computation => {
-    if (renderersLoaded.get()) {
-      info('renderers loaded')
-      return computation.stop()
-    }
-
-    TaskRenderers.init({
-      markdown: {
-        renderer: async txt => {
-          const mdOptions = { input: txt, renderer: defaultMarkdownRendererName }
-          return LeaMarkdown.parse(mdOptions)
-        }
-      }
-    })
-      .then(() => renderersLoaded.set(true))
-      .catch(e => console.error(e)) // TODO sendError
-  })
-
   const sessionLoader = createSessionLoader({ info })
 
   instance.autorun(() => {

imports/ui/renderers/initTaskRenderers.js

@@ -0,0 +1,29 @@
+import { ReactiveVar } from 'meteor/reactive-var'
+import { TaskRenderers } from './TaskRenderers'
+import { LeaMarkdown } from '../../api/markdown/LeaMarkdown'
+import { defaultMarkdownRenderer } from './defaultMarkdownRenderer'
+
+// register markdown renderer
+const defaultMarkdownRendererName = 'default'
+const renderersLoaded = new ReactiveVar()
+
+export const initTaskRenderers = () => {
+  if (renderersLoaded.get()) {
+    return renderersLoaded
+  }
+
+  LeaMarkdown.addRenderer(defaultMarkdownRendererName, defaultMarkdownRenderer())
+
+  TaskRenderers.init({
+    markdown: {
+      renderer: async txt => {
+        const mdOptions = { input: txt, renderer: defaultMarkdownRendererName }
+        return LeaMarkdown.parse(mdOptions)
+      }
+    }
+  })
+    .then(() => renderersLoaded.set(true))
+    .catch(e => console.error(e))
+
+  return renderersLoaded
+}