issue #4174 : support the tagConstructor option

app/riot/src/client/preview/__snapshots__/render-riot.test.js.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`render a riot element can accept a constructor 1`] = `"<simpletest hacked=\\"true\\" test=\\"with a parameter\\"><div>HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;
+
 exports[`render a riot element can nest several tags 1`] = `"<matriochka><div><tag1><div>Inside tag1:<ul><li><tag2><div>Inside tag2:<ul><li><tag3><div>Inside tag3:<ul><li><tag4><div>Inside tag4:<ul><li><tag5><div>Inside tag5:<ul><li>Content</li></ul></div></tag5></li></ul></div></tag4></li></ul></div></tag3></li></ul></div></tag2></li></ul></div></tag1></div></matriochka>"`;
 
 exports[`render a riot element can template some vars 1`] = `"<simpletest test=\\"with a parameter\\"><div>simple test (with a parameter). Oh, by the way (value is mapped to riotValue)</div></simpletest>"`;

app/riot/src/client/preview/compileNow.js

@@ -1,13 +0,0 @@
-import compiler from 'riot-compiler';
-
-export function asCompiledCode(text) {
-  return compiler
-    .compile(text, {})
-    .replace('var riot = require("riot")', '')
-    .replace('riot.tag2(', 'tag2(');
-}
-
-export function compileNow(tag2, text) {
-  // eslint-disable-next-line no-eval
-  return tag2 && eval(asCompiledCode(text));
-}

app/riot/src/client/preview/compileStageFunctions.js

@@ -0,0 +1,23 @@
+import compiler from 'riot-compiler';
+
+export const alreadyCompiledMarker = "var riot = require('riot')";
+
+export function asCompiledCode(text) {
+  return compiler
+    .compile(text, {})
+    .replace('var riot = require("riot")', '')
+    .replace('riot.tag2(', 'tag2(');
+}
+
+export function compileNow(tag2, text) {
+  // eslint-disable-next-line no-eval
+  return tag2 && eval(asCompiledCode(text));
+}
+
+export function getRidOfRiotNoise(compiled) {
+  return compiled.replace(/riot\.tag2/g, 'tag2').replace(alreadyCompiledMarker, '');
+}
+
+export function setConstructor(compiledSourceCode, constructor) {
+  return compiledSourceCode.replace(/function\(opts\)\s*{\s*}(?=\);$)/, constructor.toString());
+}

app/riot/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import riot, { tag2, mount as vendorMount } from 'riot';
 import render from './render';
-import { compileNow as unboundCompileNow, asCompiledCode } from './compileNow';
+import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';
 
 const { clientApi, configApi, forceReRender } = start(render);
 

app/riot/src/client/preview/render-riot.test.js

@@ -1,7 +1,8 @@
 import { document } from 'global';
 import { unregister, tag2, mount } from 'riot';
 import compiler from 'riot-compiler';
-import { render } from './render-riot';
+import { render } from './rendering';
+import { asCompiledCode } from './compileStageFunctions';
 
 const rootElement = document.createElement('div');
 rootElement.id = 'root';
@@ -46,6 +47,14 @@ describe('render a riot element', () => {
     // does only work in true mode, and not in jest mode
   });
 
+  it('will be possible to compile a template before rendering it', () => {
+    const compiledTemplate = asCompiledCode('<template><div>raw code</div></template>');
+
+    expect(compiledTemplate).toEqual(
+      "tag2('template', '<div>raw code</div>', '', '', function(opts) {\n});"
+    );
+  });
+
   it('works with a json consisting in a tagName and opts', () => {
     tag2('hello', '<p>Hello { opts.suffix }</p>', '', '', () => {});
 
@@ -94,4 +103,28 @@ describe('render a riot element', () => {
 
     expect(rootElement.innerHTML).toMatchSnapshot();
   });
+
+  it('can accept a constructor', () => {
+    expect(
+      render(
+        {
+          tags: [
+            {
+              content:
+                "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+              boundAs: 'mustBeUniquePlease',
+            },
+          ],
+          template:
+            '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+          tagConstructor() {
+            this.hacked = true;
+          },
+        },
+        context
+      )
+    ).toBe(true);
+
+    expect(rootElement.innerHTML).toMatchSnapshot();
+  });
 });

app/riot/src/client/preview/render.js

@@ -1,7 +1,7 @@
 import { document } from 'global';
 import { stripIndents } from 'common-tags';
 import { unregister } from 'riot';
-import { render as renderRiot } from './render-riot';
+import { render as renderRiot } from './rendering';
 
 export default function renderMain({
   story,

app/riot/src/client/preview/rendering/compiledButUnmounted.js

@@ -0,0 +1,5 @@
+import { mount } from 'riot';
+
+export default function renderCompiledButUnmounted(component) {
+  mount('root', component.tagName, component.opts || {});
+}

app/riot/src/client/preview/rendering/index.js

@@ -0,0 +1,24 @@
+import renderCompiledButUnmounted from './compiledButUnmounted';
+import renderStringified from './stringified';
+import renderRaw from './raw';
+
+export function render(component) {
+  if (typeof component === 'string') {
+    renderRaw(component);
+    return true;
+  }
+  const { tags } = component || {};
+  if (Array.isArray(tags)) {
+    renderStringified(component);
+    return true;
+  }
+  if (component && component.tagName) {
+    renderCompiledButUnmounted(component);
+    return true;
+  }
+  if (component && component.length) {
+    // already rendered, nothing to do
+    return true;
+  }
+  return false;
+}

app/riot/src/client/preview/rendering/raw.js

@@ -0,0 +1,14 @@
+import { mount, tag2 as tag } from 'riot';
+import compiler from 'riot-compiler';
+import { alreadyCompiledMarker, getRidOfRiotNoise } from '../compileStageFunctions';
+
+export default function renderRaw(sourceCode) {
+  const tag2 = tag; // eslint-disable-line no-unused-vars
+  // eslint-disable-next-line no-eval
+  eval(
+    getRidOfRiotNoise(
+      `${compiler.compile(sourceCode.replace(alreadyCompiledMarker, '').trim(), {})}`
+    )
+  );
+  mount('root', /tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {});
+}

app/riot/src/client/preview/rendering/stringified.js

@@ -1,8 +1,7 @@
-import { document } from 'global';
 import { mount, unregister, tag2 as tag } from 'riot';
 import compiler from 'riot-compiler';
-
-const alreadyCompiledMarker = "var riot = require('riot')";
+import { document } from 'global';
+import { alreadyCompiledMarker, getRidOfRiotNoise, setConstructor } from '../compileStageFunctions';
 
 function guessRootName(stringified) {
   const whiteSpaceLocation = stringified.indexOf(' ', stringified.indexOf('<') + 1);
@@ -31,12 +30,10 @@ function compileText(code, rootName) {
     .trim();
 }
 
-const getRidOfRiotNoise = compiled =>
-  compiled.replace(/riot\.tag2/g, 'tag2').replace(alreadyCompiledMarker, '');
-
-function renderStringified({
+export default function renderStringified({
   tags,
   template = `<${(tags[0] || []).boundAs || guessRootName(tags[0] || '')}/>`,
+  tagConstructor,
 }) {
   const tag2 = tag; // eslint-disable-line no-unused-vars
   tags.forEach(oneTag => {
@@ -49,43 +46,11 @@ function renderStringified({
     eval(getRidOfRiotNoise(`${compiled}`)); // eslint-disable-line no-eval
   });
   const sourceCode = `<root>${template}</root>`;
-  if (template !== '<root/>') eval(getRidOfRiotNoise(`${compiler.compile(sourceCode, {})}`)); // eslint-disable-line no-eval
+  const compiledRootSource = !tagConstructor
+    ? `${compiler.compile(sourceCode, {})}`
+    : setConstructor(`${compiler.compile(sourceCode, {})}`, tagConstructor);
+
+  if (template !== '<root/>') eval(getRidOfRiotNoise(compiledRootSource)); // eslint-disable-line no-eval
 
   mount('*');
 }
-
-function renderRaw(sourceCode) {
-  const tag2 = tag; // eslint-disable-line no-unused-vars
-  // eslint-disable-next-line no-eval
-  eval(
-    getRidOfRiotNoise(
-      `${compiler.compile(sourceCode.replace(alreadyCompiledMarker, '').trim(), {})}`
-    )
-  );
-  mount('root', /tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {});
-}
-
-function renderCompiledButUnmounted(component) {
-  mount('root', component.tagName, component.opts || {});
-}
-
-export function render(component) {
-  if (typeof component === 'string') {
-    renderRaw(component);
-    return true;
-  }
-  const { tags } = component || {};
-  if (Array.isArray(tags)) {
-    renderStringified(component);
-    return true;
-  }
-  if (component && component.tagName) {
-    renderCompiledButUnmounted(component);
-    return true;
-  }
-  if (component && component.length) {
-    // already rendered, nothing to do
-    return true;
-  }
-  return false;
-}

examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot

@@ -61,6 +61,22 @@ exports[`Storyshots Story|How to create a story built with tag 1`] = `
 </div>
 `;
 
+exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    hacked="true"
+    test="with a parameter"
+  >
+    <div>
+      HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
 exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = `
 <div
   data-is="anothertest"

examples/riot-kitchen-sink/src/stories/story-code.stories.js

@@ -29,6 +29,21 @@ storiesOf('Story|How to create a story', module)
     }
   )
 
+  .add('tags, template and tagConstructor at once', () => ({
+    tags: [
+      {
+        content:
+          "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+        boundAs: 'mustBeUniquePlease',
+      },
+    ],
+    template:
+      '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+    tagConstructor() {
+      this.hacked = true;
+    },
+  }))
+
   .add('built from the precompilation', () => mount('anothertest', {}), {
     notes: 'WARN, only works in lower case, never upper case with precompiled templates',
   })