Does Polymer and/or native Web Components use ES6's SystemJS modules technology?
https://github.com/systemjs/systemjs
Or do they rely on their own asset management?
Existing Web Components don't really use SystemJS but it's now possible to use it with systemjs-plugin-html to load HTML imports and circumvent the issues they have. SystemJS can redirect paths so that for example the same library expected in different locations can be redirected to the same file, and components can be more freely placed in different directories. Of course, this doesn't fix paths in the <link rel="import"> tags of existing components but new components can be created without them, while still more flexibly re-using existing components.
I've written an article with downloadable code and a working demo for how to use Polymer with SystemJS and TypeScript.
The Web Components specification is a set of four other specifications where one is about the HTML Imports technology. Web Components do not solve any module issues at a first glance. However, HTML Imports are the key to import components from anywhere into your app.
If you have componentA that imports a componentB and you import componentA into your web app, componentB is first imported and then componentA. So you kind of setup an implicit dependency tree that is resolved by HTML Imports automatically (which is why HTML Imports work asynchronously).
In short: no. They use HTML Imports to manage components.
No. In fact SystemJS modules are not support in browser yet. Currently polymer and x-tag use HTML import to load web component, but Mozilla rollback the HTML import support in nightly build and want to seek for SystemJS instead. (Eventually HTML import might duplicate once SystemJS is supported in browser).
In Firefox OS they just import web component as normal js library and not use HTML import.
ex: gaia-switch element
https://github.com/gaia-components/gaia-switch
Related
I am working on modifying an existing project which is built in polymer 1.0.
As the current version of polymer is polymer 3.0 how can we include the same without making much changes with the existing application.
The main difference than i found out is that in polymer 1.0 .html files are imported whereas in polymer 3.0 .js files are imported.
Added below the comparison between two imports
polymer 1
<head>
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
</head>
polymer 3
import {PolymerElement, html} from '#polymer/polymer';
When we try to install components js files are being created. Is there any method to create old type polymer components via CLI?
I don't think you should try to create Polymer 3 elements in HTML files, as HTML imports are either not supported (in FF, for example), or about to become obsolete (in Chrome, for example), as you can see here.
A mix between components crated with Polymer 1.x/2.x (with HTML imports) and Polymer 3.x and/or LitElement would be to have an webpack build step, that would bundle all the JS files. (for example have a single JS file where you import your new elements, pass it throgh webpack and include it in your Polymer 1.x app).
But in the long run migrating away from HTML imports seems like the safer bet. You might want to take a look at the modulizer, as #HakanC suggested.
I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
I developed an application with angular 4 for security reason and changing the template without compiling I am trying to find a way can change HTML and application use that. somehow I need to read HTML template files from an external folder and use that.
I tried to find a way, but unfortunately I could not get a direct answer I hope here I can found out is it any solution for that or not?
what I did are:
https://github.com/lacolaco/ng-dynamic
Load Angular2 template from external URL
Equivalent of $compile in Angular 2
Angular 4 Template Binding with ES6 Template String
Dynamically load HTML template in angular2
How to bind raw html in Angular2
Previously Angular were shipping angular-compiler in build (bundle js) for security reason they removed angular-compiler from bundle and reason is obvious that angular compiles code on build and there is no need to ship compiler. It creates extra overhead on your production site and also creates heavier bundle. So the answer is no. You cannot inject template from external source. Why not create a component and use condition to show your external html in this way?
I have setup the cross browser extension boilerplate
https://github.com/EmailThis/extension-boilerplate
I want to be able to load html content inside my javascript code example
import contentTemplate from "../content.html";
I have found some plugins but they all work with webpack,
how can I do the above without webpack ?
I have done that with the following plugin
https://www.npmjs.com/package/babel-plugin-transform-html-import-to-string
I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.
Is it bad style to overload elements.html with CSS and JS imports?
No, there is nothing wrong about including JS and CSS files in the elements.html.
Think of elements.html as a non-ui web-component.
There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.
So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.
More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html
Hope my writing is clear.