HTML renderer treating string style attribute like an array/object

[waynebaylor]

I was using the HTML renderer and noticed weird behavior when I use a style string.

For example, the following:

/** @jsx createElement */
import { createElement } from "@bikeshaving/crank";
import { renderer } from "@bikeshaving/crank/html";

const stringStyle = renderer.render(<div style="color:red;"></div>);
const objectStyle = renderer.render(<div style={{ color: "red" }}></div>);

document.getElementById("app").innerText = stringStyle + "\n" + objectStyle;

outputs:

<div style="0:c;1:o;2:l;3:o;4:r;5::;6:r;7:e;8:d;9:;;"></div>
<div style="color:red;"></div>

[Brian Kim]

Ah that‘s an embarrassing oversight on my part. To be honest I don’t personally use much of the SSR stuff of Crank yet, and there aren’t as many eyes to make bugs shallow as I might like. Thanks for trying Crank though, and I will reiterate the claim that I am the most accessible JS framework author in the world, and glad to hear about any ways in which you’re using Crank both here or by email 😄.

I’ll get a fix and a release published within an hour.

[Brian Kim]

Fixed in 0.3.9. Sorry for the inconvenience! Again, thanks for trying Crank and glad to help your efforts in any way!

[waynebaylor]

Awesome!

One thing I've really enjoyed about Crank is how it's so easy to integrate other libraries with it. In this situation I needed to pull in a calendar library and customize how it renders things, I already had Crank components that I was using elsewhere and the html renderer let me reuse them and just feed the calendar the required html strings.