I am converting an existing web application to Polymer. The web application consists of components (in the Knockout component architecture) and modules. Both are loaded using RequireJS. I see how to convert the Knockout components to Polymer custom elements, but not how to deal with the JavaScript modules. RequireJS modules return a JavaScript object which is passed to the JavaScript that depends on it via a parameter to the “define” function. There does not appear to be a way to get that object if the module code is loaded via HTML import rather than RequireJS.
For example, several of the existing components use the moment.js module for date/time manipulation. They load it via RequireJS, which passed them a reference to the moment object. In one of the Polycast videos, Rob Dobson says that the recommended practice would be to write a moment.html file that contains just a <script> tag to import moment.js. A Polymer custom element can then do an HTML import of moment.html, but that does not give the component access to the object returned by the moment.js module. Moment does not put that object in the global namespace, so how does the Polymer custom element get access to the moment object?
This from Justin Fagnani of the Polymer team:
"Sounds here like you need a module loader/registry that works with Polymer / HTML Imports. I made such a thing called IMD: https://github.com/PolymerLabs/IMD
It's only a AMD-compliant module registry, but not a loader, so all modules have to be loaded via explicit or tags, which ensures that dependency ordering is preserved."
It does exactly what I was looking for.
Related
I followed this tutorial to do a server side render web app but when I attempted to implement React-Router I get the following error
Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed up default and named imports.
I have been searching how to solve it but I cant seem to find a solution, any possible input would be awesome.
Thank you
Turns out the problem was in the imports one must need to import as follow
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
Also just the standard of loading the to the bootstrap file
When using devtools, the classnames are sometimes difficult to differentiate.
Emotion js has here a good solution: https://emotion.sh/docs/labels
Basically they use the "Label" Property in css to append that to the generated class name.
Here some examples:
css-a281on-some-name
css-1i3s76n-another-name
Does something like this exists for styled-components?
I could not find it.
If not, I would make a feature request.
You should try the babel plugin for styled-components. If the component ABC is created with styled-components in the file SomeFile.js, the class name for that component will look like SomeFile__ABC-fBdEtY JrIAq. Add the plugin to your babel config, either in .babelrc or in options.plugins in babel-loader if you use webpack.
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
I got in trouble during developing react. I use
<img src="example.svg">
Or using module 'react-inlinesvg' to embed the svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
i want to manipulate the<g>node of the svg file directly in react, add and remove class(ps: it's quite easy in JQuery). I tried to get the ref of the element but failed. what should i do?
There are 2 options:
Use some kind of query selectors;
User react for writing SVG;
I would recommend you using 2nd approach. If you want to manipulate your own SVG, you can just write them in React as a component and work as you work with other React components.
Here you can see a list of supported elements in React.
I'm using RequireJs for structuring my JavaScript code. Also, I'm using a lot of CSS3 and I use "Modernizr w/ YepNope" + x number of css3 polyfills.
I understand "Modernizr w/ YepNope" and RequireJs are both Resource Loaders. Since they are both resource loaders is it a bad idea to use both of them in the same project?
So, basically I'm asking, is it a bad idea to use:
Require.js
Modernizr.js w/ YepNope.js
In the same page?
As long as you don't load RequireJS modules via YepNope it is ok to use both. Otherwise you could encounter this issue according to the RequireJS doc : http://requirejs.org/docs/errors.html#mismatch
And since you load stuff outside RequireJS, i.e. an API polyfill, the only way your modules could use those polyfills would be to make the initial require() call within the complete() callback of YepNope. But IMHO it gets a bit clunky...
Summary: Respond.js, (which is great with jQuery Mobile), is based on css3 media queries, so if polyfills is all you need, you probably do not 'need' resource loaders.
I cannot speak for YepNopejs, but since respond.js is listed in Modernizer, it seems redundant.
Modernizer, if used, should determine whether or not respond.js is loaded.
Modernizer will conditionally load the scripts, including respond.js, client-side based on feature detects.
Supported scripts (which do not currently include YepNope) at
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills