I have a web component library built using litElement. We are using these components in a React project and are running into an issue using some of the property binding attribute features. React is throwing an error when using the below syntax.
Property binding examples can be seen here using
.attr="" and ?attr=""
https://lit-element.polymer-project.org/guide/templates
Is there a way to use these property bindings inside a React app with a prefixed "." or "?". I am currently aware that we can use JSON.stringify to pass objects as a string to the attribute but would rather pass the objects as a property vs an attribute.
<my-cust-component .model="${this.someObj} ?mybool="false">
Is there a way to use these property bindings inside a React app with a prefixed "." or "?"
Short answer: no.
The first reason is that those syntaxes are lit-specific constructs that you can only use in its rendering context (inside the template of the WebComponent). The other bad news is that React's peculiar view of DOM and rendering make it one of the most WC-incompatible frameworks: you'll have to rely on attributes and refs to communicate with your web components, no property and event binding.
https://custom-elements-everywhere.com/#react
As someone already said you can't use lit-element syntaxes on the react file but you can listen to web components events in react if you use the wc-reactify lib (i'm using it on my project and works just fine), sometimes listening to events dispatched from the web component on your react application can be a solution.
https://lit-element.polymer-project.org/guide/events
https://www.npmjs.com/package/reactify-wc
Related
We have an old legacy MVC app that has a mixture of UI technologies in it, from razor pages, to JQuery to Vue native.
The problem I have is that the new vue components work great in isolation, but we want to instantiate the component and it's properties from an old javascript file.
Can this be done outside of the Vue entry script?
Essentially we have a Js file that loads a customer and at that point we want to bind the vue component with the customer id. I thought we could use the data dictionary to set the data attribute (which I believe vue maps to the prop) but that doesn't seem to work (there is a watch on the property).
The vue component is being used elsewhere, which is why I don't want to change it.
In a pinch, you can access and modify Vue2 internals from external code using the __vue__ property bound to the DOM element Vue was instantiated on.
This is not officially supported, but Vue's creator says "the official devtool relies on it too, so it's unlikely to change or break." https://github.com/vuejs/vue/issues/5621
I'd recommend keeping the amount of manipulation you do this way to a minimum, but reaching in to set a customer ID should be reasonably straightforward.
(In Vue3 this is somewhat more complicated; you need to do the DOM binding yourself from within Vue.)
I’m a newbie in Vuejs, I was studying the unit testing handbook today and saw the call method.
So if I don’t want to mount the component to test some complex computed property I can use call passing a different context to the method.
But I’m using Typescript and class components.
So my question is:
Does Call method works with class components?
If so, how does it work?
i have an SPA designed using features (collection of components).. each component exposes bindable properties and some observable properties for inner state management.. the feature at the top level also exposes bindable properties that are used in implementation views to render out specific funcitonalities.. each feature has data dependencies that pull from APIs and some features depend on each other for values that are bound after data loads...
the problem - how do I best handle app initialization when there's changed events firing from observable/bindable properties all through that initial load. my first thought is to find a way to disable all observable in a single place in code that i then turn on once everythign is loaded and ready to start reacting to cascading changes... does that exist in some low-level aurelia API? the only other alternative is to carefully and tediously map out all dependencies and sprinkle "if(!isInitialized) then exit" statements everywhere but that sounds horrible...
That really depends on when you hydrate your components.
The docs here: http://aurelia.io/docs/fundamentals/components#the-component-lifecycle say that if you do something to properties in bind() lifecycle handler - the change handlers would not be called.
Is there a well-established pattern for allowing a single object to be available to all modules in a React Native application? I know I can pass the object from the RouteMapper to every particular scene and access it that way, but that feels like a lot of boilerplate and repeated code when I am absolutely certain that I need it accessible from the entire application. In fact, I need it listening for events at all times.
Well, there is the React Context.
https://facebook.github.io/react/docs/context.html
But the general wisdom is: don't use it.
What is the difference/advantages/disadvantages between using:
React.findDOMNode(this.refs.elementReferenceName)
and
document.getElementById(elementId)
when using ReactJS?
The main advantage and reason to use React.findDOMNode is that it stays within the React paradigm, since you pass it a component--And in most cases you are dealing with React components (either handling a lifecycle function or calling a function that is implemented in the component descriptor).
Relying on the id in a DOM element breaks encapsulation in React because it doesn't use id.
That being said, it is up to you and your specific app's needs to determine which is best to use. As with other React functions, you do have to be careful because the calling React.findDOMNode at the wrong time (in render or if the component is not mounted) will raise an exception. OTOH, document.getElementById won't throw an exception if the component is unmounted; but it could return the wrong element if multiple elements exist with that id.
If you haven't yet found it, here is documentation for findDOMNode.
Also, here is the implementation of findDOMNode