Render BCD tables about yari HOT 12 CLOSED

I'll work on this if that's alright 👍

from yari.

Freudian slip... lol

Made more progress on this over lunch, starting to look pretty close. Going to convert it to a class and then submit a drafted PR for some preliminary review

from yari.

@peterbe For now i took some of the CSS from the current BCD table on the beta site. It looks pretty close to what is on the site minus the icons. When i get the rest of the base functionality in there I'll definitely reach out to @schalkneethling to get the full CSS and it should fall into place. Where is the source for the CSS anyway? I'll also put up a draft PR soon for some feedback.

from yari.

Currently looks like this, i updated a little more since the screenshot but it's getting there.

from yari.

Currently i'm using vanilla JS to handle the whole "notes" portion where you click the cell and see the dropdown. I'm going to convert it to a class to get the lifecycle methods in there and set state to handle the "notes" stuff instead.

That's awesome!

The other thing we might want to do is not only to lazy load the BCD data but the whole React component. Then, when the component mounts, it fetches the data. That means the main bundle of JS won't have to carry the JavaScript code that you're working on.
I.e. intersection observed --> load bcd js bundle --> XHR for bcd data --> render.
Again, I think this is premature for right now. But do keep in mind.

Note-to-self; This is a huuuuge BCD table https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

from yari.

* Get the component feature parody

Funny. :)

from yari.

I'm totally OK with this if @peterbe is.

from yari.

@joedarc Do you have what you need to be able to start on this?
For one thing, if the CSS gets too hairy, I would advice that you ping @schalkneethling on the CSS bits. He worked on the CSS for the refactor inside Kuma.

from yari.

Mind you, stumptown-renderer uses SCSS files at the moment. (We might switch to css-in-js in the future but due to legacy and ergonomics I don't want to do this until the dust has really settled).

So when you say "took some of the CSS" you might succeed to copy the relevant SCSS definitions too.

from yari.

PS. @joedarc One idea I'm floating is to render the BCD tables async after document load from an XHR request. The payload to render and hydrate with the full table might be a perf drag and since it's almost always far down on the page, it serve us better to only load it in dynamically as you scroll down the page. I don't think this comment is relevant to your progress since the core is a good React component, but I just thought I'd share the thought.

from yari.

So when you say "took some of the CSS" you might succeed to copy the relevant SCSS definitions too.

Yeah i took the CSS from the inspecting the beta page BCD table, i mainly wanted to get it to look as similar as possible so that i got it attaching the correct classes to the rendered elements and it should fall into place with the correct CSS. I put the CSS i got into the main SCSS file but that may change as this further progresses.

only load it in dynamically as you scroll down the page

Noted, yeah i agree with this.

Currently i'm using vanilla JS to handle the whole "notes" portion where you click the cell and see the dropdown. I'm going to convert it to a class to get the lifecycle methods in there and set state to handle the "notes" stuff instead.

from yari.

Yeah, agree with everything you said. Right now i think my internal checklist for this is:

• Get the component feature parody parity
• Get the correct styles in there, adjust if necessary
• Convert the component to be a class and redo the "notes" to use state which will clean it up a good bit

When we're happy with the results of that then:

• Have some handler on the main component that tracks when to actually mount the BCD
• On mount, fetch the compatibility data, update state, that'll trigger the render to show the table

Something like that.

from yari.