Skip to content
This repository has been archived by the owner on Oct 26, 2021. It is now read-only.

Reimplement custom element example #49

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

xtianjohns
Copy link

@xtianjohns xtianjohns commented Oct 11, 2017

Refactor custom element example to conform to the newest versions of rxmarbles components. Add ES5 custom web component shim to example HTML file. Update webpack config to compile new custom element source file into distribution folder.

Related to #48.

There's outstanding work here relating to how we document this and how or if we want to bundle the shim. I'm open to feedback about this, I've not thought about it much yet.

Refactor custom element example to conform to the newest versions of
rxmarbles components.

Add ES5 custom web component shim, since source code for rxmarbles
clasess is compiled to ES5.

Update webpack config to compile new custom element source file into
distribution folder.

Related to staltz#48.
src/element.js Outdated
const sandbox = Sandbox( sources );
const sinks = {
DOM: sandbox.DOM,
store: Observable.merge( sandbox.data ).scan(merge, { route: key, inputs: undefined }),
Copy link
Author

@xtianjohns xtianjohns Oct 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need this static .merge() anymore. I'll fix this.

@staltz
Copy link
Owner

staltz commented Oct 12, 2017

@xtianjohns Good to see this. :)
I would recommend not bundling the shim. Regarding documentation, it's optional for this PR. We can also put it in another PR.

Single source streams don't need to be merged.
@xtianjohns
Copy link
Author

xtianjohns commented Oct 13, 2017

Cool, we'll leave the shim in the example for other folks to include as they need.

I fixed up the problems I spotted, and we can push docs off until later then! Should be ready to review/merge whatever.

@xtianjohns xtianjohns changed the title [WIP] Reimplement custom element example Reimplement custom element example Oct 13, 2017
@nadavwr
Copy link

nadavwr commented Oct 16, 2017

When trying to view test-custom-element.html, I get a blank browser page.
Am I missing something?

@xtianjohns
Copy link
Author

Hrm, @nadavwr you're not doing anything wrong, I can see the same behavior with npm run dev. Let me take a quick look and I'll update shortly.

Fix issue where sandbox skips first emission from sources. Initialize
store with stream that emits values in both sources/sinks to get a
double emission.
@xtianjohns
Copy link
Author

xtianjohns commented Oct 17, 2017

Okay, this should be working again. I don't know why this problem was happening, it could have been a missing polyfill (which I've now included) that caused a white screen on Firefox, or it could have been due to a skip(1) inside the Sandbox component.

At least, I think that's why the Sandbox component never rendered - because it never sees an emission from the store and so it stays silent.

@staltz if you get time to review tomorrow, my fix was to add two startWith operators in the example, which isn't super great. But I don't know enough about the original "dupe" emission problem that Sandbox was trying to solve. Maybe you do.

@staltz
Copy link
Owner

staltz commented Oct 17, 2017

Hi @xtianjohns :)
Looks good. I tried it out and it's working in both Chrome and Firefox.
I noticed a small issue though, when hovering over a marble (to drag it):

screen shot 2017-10-17 at 10 59 59

We're just missing the dropshadow SVG filter. It's rendered in the app-view, but maybe we should move it into sandbox-view, so it shows in both full app and web component.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants