Hacker News Reader

Comment by swyx | Hacker News Reader

i started working on a react clone of wired from a few months ago - kinda dont have time to continue on it but if anyone wants to take over please do: https://github.com/sw-yx/react-wired

also preet's designer tool is very very very usable: https://wiredjs.github.io/designer/ basically a free balsamiq!

View on HN

These are web components and work fine within React already.

We shouldn't need to port every interesting UI component to every single framework anymore.

i know and it was more just an exercise for myself. polymer and react interop still isnt very nice as far as i can tell. calm down :)

You can just import these into JS modules and use them in JSX. Interop is fine for attributes.

I'm perfectly calm dude.

What could we do better?

i don't know. wanna try putting up a codesandbox to use wired-elements in a react app? would love to learn. sorry i dont know your affiliation with the polymer project or react-polymer. it just didnt seem usable when i looked at it

Those elements don't use polymer, they use lit-element - it is from polymer team and uses one polymer mixin, but its not polymer base element.

>These are web components and work fine within React already I tried with a simple CodeSandbox and they are not working for me. ( Unless I'm doing something wrong? ) https://codesandbox.io/s/pp4q7kw9q7

There's something weird going on in Chrome. This link works in Firefox though with the webcomponents polyfill https://codesandbox.io/s/jn85y61kx9

I believe it's a shadow dom issue. Firefox doesnt support Shadow DOM yet so a 'shady dom' is used by the polyfill

This seems to be because you are accessing the DOM of the element from the constructor which is a no no. Here's a simple repro:

https://stackblitz.com/edit/lit-element-react-attributes-loc...

stuff like this is why i have trust issues with people who try to push webcomponents on me. I'm either not smart enough to understand why i dont get it, or its just not ready yet.

All working with react now. There was an issue wired-elements code: Here's a react demo: https://stackblitz.com/edit/wired-elements-react?file=index....

For a different free version of balsamiq, also check out https://pencil.evolus.vn/ and use the Sketchy GUI stencil.

Thanks! I've been looking for something similar that supports Linux. Most tools I found unfortunately did not.

Strange, that designer link doesn't load in Firefox Nightly, with this error:

    Loading failed for the <script> with source “https://wiredjs.github.io/designer/bower_components/webcomponentsjs/webcomponents-hi-sd.js”.

But it works fine in Chrome. Regardless, it looks really useful but still very much beta. It could be a decent Mockingbird replacement if you could save the documents and export them as PDF/png. Plus it needs way more components.

damn! that designer looks good. I would pay for something good here.

To give full credit, the designer was adapted from https://github.com/PolymerLabs/wizzywid

I must add that designer may not quite work anymore. Haha. Will get back to it at some point :)

Reply on news.ycombinator.com