From 659fbbb8a03946a63ab13196e68f0dee3421a245 Mon Sep 17 00:00:00 2001 From: Thore Caspersen Date: Thu, 20 Jun 2019 21:29:17 +0200 Subject: [PATCH] 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! --- demo.js | 3 ++- input/1.testmarkdown.md | 2 +- lib/flotFyrHastCompiler.js | 15 +------------ lib/hastUtilToJsx.js | 43 ++++++++++++++++++++++++-------------- lib/toJsx.js | 5 ++++- output/1.testmarkdown.js | 6 ++++-- output/2.print.js | 10 ++++----- 7 files changed, 43 insertions(+), 41 deletions(-) diff --git a/demo.js b/demo.js index 8aafd5b..62a3b4b 100644 --- a/demo.js +++ b/demo.js @@ -18,7 +18,8 @@ printOption = { defualtImport: `antd`, cutSrcLinks: true, // -> 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 index d6c91cf..1fb210e 100644 --- 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 index 6c91577..90a138f 100644 --- 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 index 7711468..849c6d0 100644 --- 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}`, usedHtmlToJsxTag: UsedHtmlToJsxTag }; - //return `<${elementName}${renderedProps}>${renderedChildren}`; } // 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}`; - + return { element: `<${wrapperName}>${element.allNotes}`, 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 index 61a745b..dad7968 100644 --- 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 index 2299999..f5060ee 100644 --- 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 (
An h1 header - +

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and{' '} @@ -40,6 +41,7 @@ export default class Testmarkdown extends React.PureComponent {

  • second item
  • 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/output/2.print.js b/output/2.print.js index e9d5edb..d857e22 100644 --- 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 ( - -

    +

    This is a Print @@ -26,7 +25,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React. lol lol lol

    -
    +

    Another print

      @@ -35,15 +34,14 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.
    • and so on...
     -
    +

    Print with code

                 var test = "hello";{'\n'}
    -
    - +
    ); } }