jsx to string

jsx-to-string.js

function insert(propValue, key, value) {
  return propValue != null ? `${key}="${value.toString()}"` : "";
}

function conditionalAttr(prop, value) {
  return `{{#${prop}}}${prop}="${value}"{{/${prop}}}`;
}

export default function (babel) {
  const { types: t } = babel;

  let result = [];

  let sourceCode = "";

  return {
    name: "ast-transform", // not required
    visitor: {
      Program: {
        exit(path) {
          sourceCode = path.hub.file.code;

          const declaration = path.node.body.find((node) => node.type === "ExportDefaultDeclaration").declaration;
          console.log(t);
          const funcName = declaration.id.name;
          const funcBody = declaration.body;
          const returnStatement = funcBody.body.find((node) => node.type === "ReturnStatement");

          let jsxElement = returnStatement.argument;
          const openingElement = jsxElement.openingElement;
          const name = openingElement.name.name;
          result.push(t.stringLiteral(`<${name} `))
          const attrs = openingElement.attributes.map((attr) => {
            const attrName = attr.name.name;
            const value = attr.value;
            const isExpression = value.type === "JSXExpressionContainer";
            if (isExpression) {
              const expressionContent = sourceCode.slice(value.expression.start, value.expression.end);
              // return conditionalAttr(attr.name.name, expressionContent);
              console.log(t.callExpression)
              const func = t.callExpression(t.identifier('insert'), [t.stringLiteral(expressionContent), t.stringLiteral(name)])
              return func
              // return `_.insert(${expressionContent}, "${name}", ${expressionContent})`;
            } else if (value.type === "StringLiteral") {
              return t.stringLiteral(`${attr.name.name}="${value.value}"`);
            }
          });
          result.push(...attrs, t.stringLiteral('>'))
          // result = `${result}<${name} ${attrs.join(" ")} >`;
          //result = [result, '<' + name, ' ', attrs.map(x => `'${x}'`).join(' '), ' >'].filter(Boolean).join('')

          const stuff = result.reduce((acc, curr) => {
            if (!acc) {
              return curr
            }
            console.log(acc, curr)
            return t.binaryExpression('+', acc, curr);
          }, null);
          
          console.log(stuff)

          const newPath = [t.variableDeclaration("const", [t.variableDeclarator(t.identifier("foo"), stuff)])];
          path.node.body = newPath;
        }
      }
      
      //      ExportDefaultDeclaration(path) {
      //        const returnStatementPath = path.get('declaration').get('body').get('body')[0]
      //        const declaration = path.node.declaration;
      //        const funcName = declaration.id.name;
      //        const funcBody = declaration.body
      //        const returnStatement = funcBody.body.find((node) => node.type === 'ReturnStatement');
      //
      //        let jsxElement = returnStatement.argument;
      //        const openingElement = jsxElement.openingElement
      //		const name = openingElement.name.name;
      //        const attrs = openingElement.attributes.map((attr) => {
      //          const attrName = attr.name.name;
      //          const value = attr.value;
      //          const isExpression = value.type === 'JSXExpressionContainer';
      //          if (isExpression) {
      //            const expressionContent = sourceCode.slice(value.expression.start, value.expression.end)
      //            return `_.insert(${expressionContent}, "${name}", ${expressionContent})`
      //            } else if (value.type === 'StringLiteral') {
      //              return `'${attr.name.name}="${value.value}"'`
      //            }
      //
      //        });
      //        result = result + `'<${name} ' ` + `+ ${attrs.join(" + ' ' + ")}` + ` + ' >'`
      //        console.log(t)
      //        console.log(t.identifier(result))
      //        returnStatementPath.replaceWith(t.returnStatement(t.identifier(result)))
      //      }
    }
  };
}