API Usage: Call with Browserfy in effect returns [object Object]

Question

API Usage: Call with Browserfy in effect returns [object Object]

kewilson opened this issue 6 years ago · comments

So I've implemented all the changes for v1.6 and when I call html2react(html_text_blob) the output is simply [object Object]. I've attached the output that I'm capturing along with trying to generate react components along with the code of the plugin that generates the zip contents.

Any guidance you could provide would be great and much appreciated.

grapesjs_reactjs_components_1518209170035.zip

`import grapesjs from "grapesjs";
import JSZip from "jszip";
import FileSaver from "file-saver";
import html2reactjs from "html-to-react-components";

export default grapesjs.plugins.add(
"reactjs-component-builder",
(editor, opts = {}) => {
const options = {
...{
// default options
},
...opts
};

  let c = opts || {};
let config = editor.getConfig();
let stylePrefix = config.stylePrefix;
let button = document.createElement("BUTTON");
let cmd = "gjs-export-reactjs";
let defaults = {
  addReactJsButton: 1,
  ReactJsButtonLabel: "Export ReactJS",
  preHtml: '<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="./css/style.css"></head><body>',
  postHtml: "</body><html>",
  preCss: "",
  postCss: ""
};

for (let name in defaults) {
  if (!(name in c)) {
    c[name] = defaults[name];
  }
}

button.innerHTML = c.ReactJsButtonLabel;
button.className = stylePrefix + "btn-prim";
button.style.paddingLeft = "30px";

// Add command
editor.Commands.add(cmd, {
  run() {

    alert("Starting Generation of ReactJS Components");

    let fileNamePrefix = "grapesjs_reactjs_components_";
    let fileExtension = ".zip";
    let htmlFileName = "reactjs_index.html";
    let cssFileName = "reactjs_style.css";
    let jsxFileName = "reactjs_components.jsx";

    alert("Set Variables");

    let zip = new JSZip();
    let htmlDir = zip.folder("html");
    let cssDir = zip.folder("css");
    let componentsDir = zip.folder("components");

    alert("Setup Zip Structure");

    let fn = fileNamePrefix + Date.now() + fileExtension;
    let htmlPage = c.preHtml + editor.getHtml() + c.postHtml;
    let htmlStyle = c.preCss + editor.getCss() + c.postCss;

    alert("HTML: " + htmlPage);
    alert("CSS: " + htmlStyle);

    htmlDir.file(htmlFileName, htmlPage);
    cssDir.file(cssFileName, htmlStyle);

    alert("Stored HTML & CSS to Zip");

    let out = html2reactjs(htmlPage) + "";
    componentsDir.file(jsxFileName, out);
    
    alert("Generated ReactJS Components: " + out);

    zip.generateAsync({ type: "blob" }).then(content => {
      FileSaver.saveAs(content, fn);
    });

    alert("ReactJS saved to: " + fn);        
  }
});

//Add button inside export dialog
if (c.addReactJsButton) {
  editor.on("run:export-template", () => {
    editor.Modal.getContentEl().appendChild(button);
    button.onclick = () => {
      editor.runCommand(cmd);
    };
  });
}

}
);`

Roman Liutikov · Answer 1 · Sat Feb 10 2018 05:13:31 GMT+0800 (China Standard Time)

html2react returns an object of components. You are adding an empty string to the object which forces the object to coerce to string representation.

kewilson · Answer 2 · Sat Feb 10 2018 05:30:37 GMT+0800 (China Standard Time)

It was doing this behavior prior to my doing that. Thought maybe it would help but alas no.

kewilson · Answer 3 · Sat Feb 10 2018 05:32:24 GMT+0800 (China Standard Time)

here is the webpack.config.js of the plugin.

`const HtmlWebpackPlugin = require('html-webpack-plugin');
const pkg = require('./package.json');
const webpack = require('webpack');
const fs = require('fs');
const name = pkg.name;
const path = require("path");

let plugins = [];

module.exports = (env = {}) => {
if (env.production) {
plugins = [
//new webpack.optimize.UglifyJsPlugin({ minimize: true, compressor: { warnings: false }}),
new webpack.BannerPlugin(${name} - ${pkg.version}),
new webpack.DefinePlugin({IN_BROWSER: JSON.stringify(true)}),
]
} else {
const index = 'index.html';
const indexDev = '_' + index;
plugins.push(new HtmlWebpackPlugin({
template: fs.existsSync(indexDev) ? indexDev : index
}));
plugins.push(new webpack.DefinePlugin({IN_BROWSER: JSON.stringify(true)}));
}

return {
entry: './src',
output: {
path: path.resolve(__dirname, "."),
filename: ./dist/${name}.min.js,
library: name,
libraryTarget: 'umd',
},
module: {
loaders: [{
test: /.js$/,
loader: 'babel-loader',
include: /src/,
exclude: [path.resolve(__dirname, "node_modules")],
}],
},
externals: {'grapesjs': 'grapesjs'},
plugins: plugins,
};
}
`

kewilson · Answer 4 · Sat Feb 10 2018 05:37:15 GMT+0800 (China Standard Time)

Ok so you said it is an object so perhaps we need to provide jszip an option to tell hit how to behave OR we need a way to convert that object to its string representation.
https://stuk.github.io/jszip/documentation/api_jszip/file_data.html

kewilson · Answer 5 · Sat Feb 10 2018 05:40:03 GMT+0800 (China Standard Time)

What did you do after it returned the object to generate this content?
http://roman01la.github.io/html-to-react-components/repl/

kewilson · Answer 6 · Sat Feb 10 2018 05:51:46 GMT+0800 (China Standard Time)

How can I check to see what's in out after this call "let out = html2reactjs(htmlPage);" prior to sending it to the zip method to verify h2rc generated the components?

Roman Liutikov · Answer 7 · Sat Feb 10 2018 06:24:08 GMT+0800 (China Standard Time)

Just output it into the console

kewilson · Answer 8 · Sat Feb 10 2018 06:33:40 GMT+0800 (China Standard Time)

Going to have to switch over and send the html to a nodejs listener service that can do the conversion, it's just not working in the browser.