diff --git a/demo.js b/demo.js index e77c1c9..8aafd5b 100644 --- a/demo.js +++ b/demo.js @@ -17,7 +17,8 @@ option = { printOption = { defualtImport: `antd`, cutSrcLinks: true, // -> - numberedFiles: true + numberedFiles: true, + bodyWrapper: "LOL" }; flotFyrTransformer("./input", "./output", option, { print: printOption }); diff --git a/input/1.testmarkdown.md b/input/1.testmarkdown.md index 8e882f8..d6c91cf 100644 --- a/input/1.testmarkdown.md +++ b/input/1.testmarkdown.md @@ -7,7 +7,7 @@ prependJs: --- # An h1 header -{{ }} +{{ }} Paragraphs are separated by a blank line. 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists diff --git a/lib/flotFyrHastCompiler.js b/lib/flotFyrHastCompiler.js index ae66ef0..6c91577 100644 --- a/lib/flotFyrHastCompiler.js +++ b/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'] diff --git a/lib/hastUtilToJsx.js b/lib/hastUtilToJsx.js index 3968a68..7711468 100644 --- a/lib/hastUtilToJsx.js +++ b/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}`; - // } - // console.log(UsedHtmlToJsxTag); - // console.log(ctx[tagName]); - // if there was a element, then add to the list + return { tag: `<${elementName}${renderedProps}>${renderedChildren}`, @@ -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}`; + return { element: `<${wrapperName}>${element.allNotes}`, 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; diff --git a/lib/toJsx.js b/lib/toJsx.js index d06c248..61a745b 100644 --- a/lib/toJsx.js +++ b/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; diff --git a/output/1.testmarkdown.js b/output/1.testmarkdown.js index 22f6fc7..2299999 100644 --- a/output/1.testmarkdown.js +++ b/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 ( diff --git a/output/2.print.js b/output/2.print.js index bf1eb79..e9d5edb 100644 --- a/output/2.print.js +++ b/output/2.print.js @@ -15,7 +15,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React. render() { const props = this.props; return ( -
+

@@ -43,7 +43,7 @@ export default class DefualtNameSetByFlotFyrToComponentModuleFunc extends React.


-
+ ); } }