Remove renderToJSON and renderToJSON2

[Scott-Fischer]

I noticed there's two module files related to rendering to JSON. What's the difference between the renderToJSON and renderToJSON2 exports? The types seem identical.

[IanEdington]

I honestly have no idea. This is left over from when mjml-react was maintained by wix-incubator. We were planning on removing them in v4.

What are you hoping to use them for?

They are defined here:

mjml-react/src/utils/render-to-json.js

Lines 90 to 94 in ab2829a

	export function renderToJSON(whatToRender) {
	const container = reconciler.createContainer({}, false, false);
	reconciler.updateContainer(whatToRender, container, null, null);
	return container.containerInfo.resultObj;
	}

mjml-react/src/utils/render-to-json2.js

Lines 72 to 76 in ab2829a

	export function renderToJSON2(whatToRender) {
	const container = reconciler.createContainer({}, false, false);
	reconciler.updateContainer(whatToRender, container, null, null);
	return container.containerInfo.result;
	}

[emmclaughlin]

I believe these were created to be used with: https://documentation.mjml.io/#using-mjml-in-json. The exported function is identical, but the difference is in the defined reconciler. This dictates how to convert the mjml-react code into json, so I can only assume renderToJSON2 had some improvements. Unfortunately, looking at the commit history I can't figure out exactly what they are, so I have no idea either.

[Scott-Fischer]

I honestly have no idea. This is left over from when mjml-react was maintained by wix-incubator. We were planning on removing them in v4.

What are you hoping to use them for?

They are defined here:

mjml-react/src/utils/render-to-json.js

Lines 90 to 94 in ab2829a

	export function renderToJSON(whatToRender) {
	const container = reconciler.createContainer({}, false, false);
	reconciler.updateContainer(whatToRender, container, null, null);
	return container.containerInfo.resultObj;
	}

mjml-react/src/utils/render-to-json2.js

Lines 72 to 76 in ab2829a

	export function renderToJSON2(whatToRender) {
	const container = reconciler.createContainer({}, false, false);
	reconciler.updateContainer(whatToRender, container, null, null);
	return container.containerInfo.result;
	}

I believe these were created to be used with: https://documentation.mjml.io/#using-mjml-in-json. The exported function is identical, but the difference is in the defined reconciler. This dictates how to convert the mjml-react code into json, so I can only assume renderToJSON2 had some improvements. Unfortunately, looking at the commit history I can't figure out exactly what they are, so I have no idea either.

Thanks for getting back to me! Honestly I was mostly just curious since I was digging around in the internals + types and thought it was really peculiar to see two identical type signatures like that. (especially with the naming convention being used).

[IanEdington]

🎉 Thanks for digging in and looking around our project! I'll turn this into a issue to remove renderToJSON and renderToJSON2 and leave it for a while to see if anyone else comments with a reason to keep it.

[tobiechvarria]

HI!

Please don't remove this utility function since my current application uses renderToJSON. I'm primarily using renderToJSON to build mjml body component in json form and store them in the back-end. This way I can save & retrieve custom mjml components and load them into my application via mjml renderer & createElement. If you do remove this util function then I won't be able to update to future version of this lib. Thanks for taking over this lib, btw!

[IanEdington]

Thank you @tobiechvarria. I'm trying to understand this better so we can evaluate if we remove it from the core package and offer it as a secondary package or leave it in the main bundle.

to build mjml body component in json form and store them in the back-end.

Is the idea that the json contains all the data required to render the component?
Are there any code snippets you can share to demonstrate the serialization and deserialization of components into json and back?

Also, do you use renderToJSON2 or renderToJSON?

[tobiechvarria]

Hi @IanEdington,

"Is the idea that the json contains all the data required to render the component?' Yes, to this question.

My application is an email builder which a user can add mjml body component types to build out a custom email design. I'm using renderToJSON to help build out the user interface. Using JSON, I able to easily traverse the mjml object and grab the attributes for each tag and present an appropriate UI element for the user to interact with.

I can create my own mjml to json parser to do this, but why would I if one already exist :).

Thanks for the reply!