feat(body-wrapper-option): set wrapper element for body content

demo.js

@@ -17,7 +17,8 @@ option = {
 printOption = {
   defualtImport: `antd`,
   cutSrcLinks: true, // <img src="https://octodex.github.com/images/yaktocat.png" /> -> <img src="/images/yaktocat.png" />
-  numberedFiles: true
+  numberedFiles: true,
+  bodyWrapper: "LOL"
 };
 
 flotFyrTransformer("./input", "./output", option, { print: printOption });

input/1.testmarkdown.md

@@ -7,7 +7,7 @@ prependJs:
 ---
 # An h1 header
 
-{{ <headline /> }}
+{{ <Chil /> }}
 Paragraphs are separated by a blank line. 
 
 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists

lib/flotFyrHastCompiler.js

@@ -9,10 +9,20 @@ module.exports = function flotFyrHastCompiler(options) {
   // list set a the options, so forexsampel all h1 gonna be transformed to headline
   const htmlElementsToTransform = options.htmlElementsToTransform;
 
+  let wrapperName = false;
+  if (options.bodyWrapper) {
+    wrapperName = options.bodyWrapper;
+  }
+
   this.Compiler = compiler;
 
   function compiler(ast) {
-    const jsxWithPlaceholders = hastToJsx(ast, htmlElementsToTransform) || "";
+    // console.log(wrapperName);
+    const jsxWithPlaceholders = hastToJsx(
+      ast,
+      htmlElementsToTransform,
+      wrapperName
+    );
 
     // jsxWithPlaceholders.htmlToJsx = a array of all used htmltags to jsxtags
     // [ 'headline', ''. '', '', '',  'quotes', '', '', '', '', 'headline']

lib/hastUtilToJsx.js

@@ -9,7 +9,8 @@ const stringifyEntities = require("stringify-entities");
 const stringifyObject = require("stringify-object");
 
 // Render all of a node's children to a single string.
-function renderChildren(ctx, parent) {
+function renderChildren(ctx, parent, wrapperBody) {
+ ´
   if (!parent.children || parent.children.length === 0) {
     return {
       allNotes: null,
@@ -19,13 +20,11 @@ function renderChildren(ctx, parent) {
   let htmlToJsxTag = [];
   let all = parent.children
     .map((node, index) => {
-      let data = renderNode(ctx, node, index, parent);
+      let data = renderNode(wrapperBody, ctx, node, index, parent);
       htmlToJsxTag.push(data.htmlToJsx);
       return data.element;
     })
     .join("");
-  // console.log("htmlToJsxTag");
-  // console.log(htmlToJsxTag);
 
   return {
     allNotes: all,
@@ -46,11 +45,8 @@ function renderElement(ctx, node) {
   // If the element is set to be tranformted in the options to some react component.
   if (tagName in ctx) {
     // then use that:
-    // console.log("asdasdasdadsasdadsadsaddaads");
-    // console.log(ctx[tagName]);
     elementName = ctx[tagName];
     UsedHtmlToJsxTag = ctx[tagName];
-    // console.log(UsedHtmlToJsxTag);
   } else {
     elementName = tagName;
   }
@@ -97,12 +93,7 @@ function renderElement(ctx, node) {
     );
   }
 
-  // if (elementName === "h1") {
-  //   return `<${ctx.h1}>${renderedChildren}</${ctx.h1}>`;
-  // }
-  // console.log(UsedHtmlToJsxTag);
-  // console.log(ctx[tagName]);
-  // if there was a element, then add to the list
+
 
   return {
     tag: `<${elementName}${renderedProps}>${renderedChildren}</${elementName}>`,
@@ -262,7 +253,7 @@ function getHandler(nodeType) {
   }
 }
 
-function renderNode(ctx, node, index, parent) {
+function renderNode(wrapperBody, ctx, node, index, parent) {
   const type = node && node.type;
 
   if (!type) {
@@ -283,9 +274,12 @@ function renderNode(ctx, node, index, parent) {
 
   // if it goes in to this if, its because its the last run. And element.allNotes is every elements in one string
   if (type === "root" && node.children.length > 1) {
-    const wrapperName = ctx.wrapper === "fragment" ? "React.Fragment" : "div";
-
+    let wrapperName = ctx.wrapper === "fragment" ? "React.Fragment" : "div";
+    if (wrapperBody) {
+      wrapperName = wrapperBody;
+    }
     // return `<${wrapperName}>${element.allNotes}</${wrapperName}>`;
+
     return {
       element: `<${wrapperName}>${element.allNotes}</${wrapperName}>`,
       htmlToJsx: element.allUsedHtmlToJsxTag
@@ -299,9 +293,10 @@ function renderNode(ctx, node, index, parent) {
   // return element;
 }
 
-function toJsx(node, options) {
+function toJsx(node, options, wrapperBody) {
+
   options = options || {};
-  return renderNode(options, node);
+  return renderNode(wrapperBody, options, node);
 }
 
 module.exports = toJsx;

lib/toJsx.js

@@ -19,7 +19,8 @@ module.exports = (input, options) => {
   options = Object.assign(
     {
       delimiters: ["{{", "}}"],
-      escapeDelimiter: "#"
+      escapeDelimiter: "#",
+      bodyWrapper: false
     },
     options
   );
@@ -65,7 +66,8 @@ module.exports = (input, options) => {
   unifiedProcessor.use(flotFyrHastCompiler, {
     placeholders: parseable.placeholders,
     htmlElementsToTransform: options.transformHtmlTags,
-    cutSrcLinks: options.cutSrcLinks
+    cutSrcLinks: options.cutSrcLinks,
+    bodyWrapper: options.bodyWrapper
   });
 
   const jsx = unifiedProcessor.processSync(tidyMarkdown).contents;

output/1.testmarkdown.js

@@ -14,7 +14,7 @@ const frontMatter = {
   quantity: 834
 };
 
-export default class Print extends React.PureComponent {
+export default class Testmarkdown extends React.PureComponent {
   render() {
     const props = this.props;
     return (

output/2.print.js

@@ -15,7 +15,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.
   render() {
     const props = this.props;
     return (
-      <div>
+      <LOL>
         <hr />
         <PrintNote bg="#ec985a">
           <p>
@@ -43,7 +43,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.
           </pre>
         </PrintNote>
         <hr />
-      </div>
+      </LOL>
     );
   }
 }