feature: load renderers with options

README.md

@@ -15,14 +15,36 @@ required in many of the lea.online applications.
 #### Renderers (Templates)
 
 All lea.online applications resolve around certain interactions, mostly them being part of several units.
-In order to dynamically display (and edit) these interactions, we use a set of dynamic renderers: 
-
-- Factory - A factory to initialize a renderer by given name with given data
-- Text - renders plain text
-- Image - renders a lazy-loaded image
-- Item - render specific item types
-- Markdown - renders markdown
-- Page - renders a page with mixed and variable content
+In order to dynamically display (and edit) these interactions, we use a set of dynamic renderers:
+
+| Name     | key        | Description                                                                                       |
+|----------|------------|---------------------------------------------------------------------------------------------------|
+| Factory  | `factory`  | A Blaze factory template to dynamically load and execute a renderer by given name with given data |
+| Page     | `page`     | renders a page with mixed and variable content                                                    
+| Text     | `text`     | renders plain text                                                                                |
+| Image    | `image`    | renders a lazy-loaded image                                                                       |
+| Item     | `item`     | render-factory for specific item types                                                            |
+| Markdown | `markdown` | renders markdown, requires a custom renderer function that uses the host app's markdown parser| 
+
+**Init task renderers**
+
+Initializing renderer allows to pass options by using their key
+and pass options as Object:
+
+```js
+import { TaskRenderers } from '../../renderers/TaskRenderers'
+
+TaskRenderers.init({
+  markdown: {
+    renderer: async txt => {
+      const mdOptions = { input: txt, renderer: defaultMarkdownRendererName }
+      return LeaMarkdown.parse(mdOptions)
+    }
+  }
+})
+  .catch(console.error)
+  .then(() => { /* core renderers loaded */ })
+```
 
 ## Run tests
 

components/text/text.css

@@ -2,10 +2,6 @@
     text-decoration: underline;
 }
 
-.lea-text-token-active {
-    font-weight: bold;
-}
-
 .text-wrapper:hover {
     cursor: pointer;
 }

components/text/text.js

@@ -47,7 +47,7 @@ Template.text.helpers({
     const fill = (data.fill && 'flex-fill') || ''
     const customTokenClass = data.tokenClass || ''
     const playingClass = instance.isPlaying(currentIndex)
-      ? 'lea-text-token-active text-primary'
+      ? 'lea-text-bold text-primary'
       : ''
     return { class: `lea-text-token ${fill} ${playingClass} ${customTokenClass}` }
   }

package.js

@@ -1,7 +1,7 @@
 /* eslint-env meteor */
 Package.describe({
   name: 'leaonline:ui',
-  version: '1.0.0',
+  version: '1.1.0',
   // Brief, one-line summary of the package.
   summary: 'Common Blaze ui-components for .lea apps',
   // URL to the Git repository containing the source code for this package.
@@ -25,13 +25,8 @@ Package.onUse(function (api) {
 
 Package.onTest(function (api) {
   api.use('ecmascript')
-  api.use('mongo')
   api.use('random')
-  api.use('templating')
-  api.use('reactive-dict')
-  api.use('reactive-var')
-  api.use('dynamic-import')
   api.use(['lmieulet:meteor-legacy-coverage', 'lmieulet:meteor-coverage', 'meteortesting:mocha'])
   api.use('leaonline:corelib')
-  api.mainModule('ui-tests.js', 'client')
+  api.mainModule('ui-tests.js', ['server','client'])
 })

renderers/Renderers.js

@@ -149,8 +149,9 @@ const defaults = {
     label: 'taskRenderers.layout.markdown.title',
     icon: 'hashtag',
     template: 'markdownRenderer',
-    async load () {
-      return import('./markdown/markdownRenderer')
+    async load (options) {
+      const { Markdown } = await import('./markdown/markdownRenderer')
+      Markdown.init(options)
     }
   },
   image: {
@@ -219,20 +220,28 @@ export const TaskRenderers = {
     // should we do caching here or on a component level?
     return Array.from(rendererMap.values()).filter(el => el.group === group)
   },
-  init: async function () {
+  init: async function (options) {
     if (_initialized) return true
 
     // load the factory
     const factory = TaskRenderers.get(defaults.factory.name)
-    await factory.load()
+    await factory.load(factory.__initOptions)
 
     const pageRender = TaskRenderers.get(defaults.page.name)
-    await pageRender.load()
+    await pageRender.load(pageRender.__initOptions)
 
     // register the default item renderers
     const { CoreRenderers } = await import('./CoreRenderers')
-    CoreRenderers.forEach(rendererContext => {
-      rendererMap.set(rendererContext.name, rendererContext)
+    CoreRenderers.forEach(rendererCtx => {
+      rendererMap.set(rendererCtx.name, rendererCtx)
+    })
+
+    // once we have all renderer added to the map
+    // we can assign them init options
+    rendererMap.forEach(rendererCtx => {
+      if (rendererCtx.name in options) {
+        rendererCtx.__initOptions = options[rendererCtx.name]
+      }
     })
 
     _initialized = true

renderers/factory/TaskRendererFactory.js

@@ -33,7 +33,7 @@ Template.TaskRendererFactory.onCreated(function () {
       return
     }
 
-    rendererContext.load()
+    rendererContext.load(rendererContext.__initOptions)
       .then(() => {
         loaded.set(content.subtype, rendererContext.template)
         if (content.onLoadComplete) content.onLoadComplete(content.subtype)

renderers/markdown/markdownRenderer.html

@@ -3,6 +3,6 @@
 	<div class="w-100 lea-text {{#if lineHeight}}line-height-{{lineHeight}}{{/if}} {{#if
 			padding}}p-{{padding}}{{/if}} {{#if background}}bg-{{background}}{{/if}} {{#if
 			textColor}}text-{{textColor}}{{/if}}">
-		{{#markdown}}{{value}}{{/markdown}}
+        {{{render}}}
 	</div>
 </template>

renderers/markdown/markdownRenderer.js

@@ -1,2 +1,32 @@
+import { Template } from 'meteor/templating'
+import { ReactiveVar } from 'meteor/reactive-var'
 import './markdownRenderer.css'
 import './markdownRenderer.html'
+
+Template.markdownRenderer.onCreated(function () {
+  const instance = this
+  instance.markdown = new ReactiveVar()
+
+  instance.autorun(async () => {
+    const { value } = Template.currentData()
+
+    if (typeof value === 'string') {
+      const rendered = await Markdown.renderer(value)
+      instance.markdown.set(rendered)
+    }
+  })
+})
+
+Template.markdownRenderer.helpers({
+  render () {
+    return Template.instance().markdown.get()
+  }
+})
+
+export const Markdown = {}
+
+Markdown.renderer = async md => md
+
+Markdown.init = (options) => {
+  Markdown.renderer = options.renderer
+}