feat(options-to-remove-html-tags): remove html tags in transforming

in option you can specific what html tags you wanna have removed from the transformed file. Remember that is also remove any children!
thorecaspersen · Jun 20, 2019 · 659fbbb · 659fbbb
1 parent 020423b
commit 659fbbb
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 41 deletions.
diff --git a/demo.js b/demo.js
@@ -18,7 +18,8 @@ printOption = {
   defualtImport: `antd`,
   cutSrcLinks: true, // <img src="https://octodex.github.com/images/yaktocat.png" /> -> <img src="/images/yaktocat.png" />
   numberedFiles: true,
-  bodyWrapper: "LOL"
+  bodyWrapper: "LOL",
+  removeHtmlTags: ["hr"]
 };
 
 flotFyrTransformer("./input", "./output", option, { print: printOption });
diff --git a/input/1.testmarkdown.md b/input/1.testmarkdown.md
@@ -26,7 +26,7 @@ Here's a numbered list:
  1. first item
  2. second item
  3. third item
-
+--------------------------------------------
 Note again how the actual text starts at 4 columns in (4 characters
 from the left side). Here's a code sample:
 

diff --git a/lib/flotFyrHastCompiler.js b/lib/flotFyrHastCompiler.js
@@ -6,23 +6,10 @@ const parse = require("url-parse");
 module.exports = function flotFyrHastCompiler(options) {
   const placeholders = options.placeholders;
 
-  // 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) {
-    // console.log(wrapperName);
-    const jsxWithPlaceholders = hastToJsx(
-      ast,
-      htmlElementsToTransform,
-      wrapperName
-    );
+    const jsxWithPlaceholders = hastToJsx(ast, options);
 
     // jsxWithPlaceholders.htmlToJsx = a array of all used htmltags to jsxtags
     // [ 'headline', ''. '', '', '',  'quotes', '', '', '', '', 'headline']

diff --git a/lib/hastUtilToJsx.js b/lib/hastUtilToJsx.js
@@ -9,8 +9,7 @@ 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, wrapperBody) {
- ´
+function renderChildren(ctx, parent, index) {
   if (!parent.children || parent.children.length === 0) {
     return {
       allNotes: null,
@@ -20,7 +19,7 @@ function renderChildren(ctx, parent, wrapperBody) {
   let htmlToJsxTag = [];
   let all = parent.children
     .map((node, index) => {
-      let data = renderNode(wrapperBody, ctx, node, index, parent);
+      let data = renderNode(ctx, node, index, parent);
       htmlToJsxTag.push(data.htmlToJsx);
       return data.element;
     })
@@ -35,6 +34,7 @@ function renderChildren(ctx, parent, wrapperBody) {
 function renderElement(ctx, node) {
   const tagName = node.tagName;
   let elementName;
+
   // oldElementName is for remeber tag name. Forexsampel we change pre to codeView,
   // then the pre content still need the to be transformed
   // (see the if for textarea, style and pre)
@@ -43,10 +43,13 @@ function renderElement(ctx, node) {
   // forexsampel h1 to headline, then we need to import the headline component in the end file.
   let UsedHtmlToJsxTag = "";
   // If the element is set to be tranformted in the options to some react component.
-  if (tagName in ctx) {
+  if (tagName in ctx.htmlElementsToTransform) {
     // then use that:
-    elementName = ctx[tagName];
-    UsedHtmlToJsxTag = ctx[tagName];
+    elementName = ctx.htmlElementsToTransform[tagName];
+    UsedHtmlToJsxTag = ctx.htmlElementsToTransform[tagName];
+  } else if (ctx.htmlElementsToRemove.includes(tagName.toString())) {
+    // if the element is set to be removed in the options, then return empty string
+    return "";
   } else {
     elementName = tagName;
   }
@@ -93,13 +96,10 @@ function renderElement(ctx, node) {
     );
   }
 
-
-
   return {
     tag: `<${elementName}${renderedProps}>${renderedChildren}</${elementName}>`,
     usedHtmlToJsxTag: UsedHtmlToJsxTag
   };
-  //return `<${elementName}${renderedProps}>${renderedChildren}</${elementName}>`;
 }
 
 // Transform a HAST property name to its HTML equivalent.
@@ -253,7 +253,7 @@ function getHandler(nodeType) {
   }
 }
 
-function renderNode(wrapperBody, ctx, node, index, parent) {
+function renderNode(ctx, node, index, parent) {
   const type = node && node.type;
 
   if (!type) {
@@ -275,11 +275,13 @@ function renderNode(wrapperBody, 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) {
     let wrapperName = ctx.wrapper === "fragment" ? "React.Fragment" : "div";
-    if (wrapperBody) {
+
+    // if the wrapper for body is set, the its gonna overwrite the wrapperName
+    if (ctx.wrapperBody) {
       wrapperName = wrapperBody;
     }
     // return `<${wrapperName}>${element.allNotes}</${wrapperName}>`;
-   
+
     return {
       element: `<${wrapperName}>${element.allNotes}</${wrapperName}>`,
       htmlToJsx: element.allUsedHtmlToJsxTag
@@ -293,10 +295,19 @@ function renderNode(wrapperBody, ctx, node, index, parent) {
   // return element;
 }
 
-function toJsx(node, options, wrapperBody) {
-
-  options = options || {};
-  return renderNode(wrapperBody, options, node);
+function toJsx(node, options) {
+  options = Object.assign(
+    {
+      htmlElementsToTransform: {}, // list set a the options, so forexsampel all h1 gonna be transformed to headline
+      htmlElementsToRemove: [], // list of html elements to remove
+      bodyWrapper: false, // the element to wrap all the content, defualt= Div tag
+      wrapper: ""
+    },
+    options
+  );
+
+  // options is called ctx in other place...
+  return renderNode(options, node);
 }
 
 module.exports = toJsx;
diff --git a/lib/toJsx.js b/lib/toJsx.js
@@ -20,7 +20,9 @@ module.exports = (input, options) => {
     {
       delimiters: ["{{", "}}"],
       escapeDelimiter: "#",
-      bodyWrapper: false
+      bodyWrapper: false,
+      transformHtmlTags: {},
+      removeHtmlTags: []
     },
     options
   );
@@ -66,6 +68,7 @@ module.exports = (input, options) => {
   unifiedProcessor.use(flotFyrHastCompiler, {
     placeholders: parseable.placeholders,
     htmlElementsToTransform: options.transformHtmlTags,
+    htmlElementsToRemove: options.removeHtmlTags,
     cutSrcLinks: options.cutSrcLinks,
     bodyWrapper: options.bodyWrapper
   });

diff --git a/output/1.testmarkdown.js b/output/1.testmarkdown.js
@@ -4,9 +4,10 @@ Everything is ok
 import React from 'react';
 const Timer = require('./timer');
 import { Watcher } from './watcher';
-import headline from 'semantic-ui-react/headline';
+import Chil from 'tequila-ui/Chil';
 import LetsDoThis from 'tequila-ui/LetsDoThis';
 import FancyReactComponent from 'antd/FancyReactComponent';
+import headline from 'semantic-ui-react/headline';
 import quotes from 'tequila-ui/quotes';
 
 const frontMatter = {
@@ -20,7 +21,7 @@ export default class Testmarkdown extends React.PureComponent {
     return (
       <div>
         <headline>An h1 header</headline>
-        <headline />
+        <Chil />
         <p>Paragraphs are separated by a blank line. </p>
         <p>
           2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and{' '}
@@ -40,6 +41,7 @@ export default class Testmarkdown extends React.PureComponent {
           <li>second item</li>
           <li>third item</li>
         </ol>
+        <hr />
         <p>
           Note again how the actual text starts at 4 columns in (4 characters
           from the left side). Here's a code sample:

diff --git a/output/2.print.js b/output/2.print.js
@@ -15,8 +15,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.
   render() {
     const props = this.props;
     return (
-      <LOL>
-        <hr />
+      <div>
         <PrintNote bg="#ec985a">
           <p>
             This is a Print
@@ -26,7 +25,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.
             lol lol lol
           </p>
         </PrintNote>
-        <hr />
+
         <PrintNote bg="#ec985a">
           <p>Another print</p>
           <ul>
@@ -35,15 +34,14 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.
             <li>and so on...</li>
           </ul>
         </PrintNote>
-        <hr />
+
         <PrintNote bg="#ec985a">
           <p>Print with code</p>
           <pre>
             <code className="language-js">var test = "hello";{'\n'}</code>
           </pre>
         </PrintNote>
-        <hr />
-      </LOL>
+      </div>
     );
   }
 }