Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove bower dependencies #18

Open
Nevraeka opened this issue Jul 23, 2018 · 2 comments
Open

Remove bower dependencies #18

Nevraeka opened this issue Jul 23, 2018 · 2 comments

Comments

@Nevraeka
Copy link

@RevillWeb is it a good idea to remove bower and replace it with cdn links via unpkg or rawgit or even an embedded polyfill? I've already done it for some of my components.

Basic Example:

  if(!window.customElements || !HTMLElement.prototype.attachShadow) {
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-sd-ce.js', loadSomeElement );
  } else {
    if(!window.customElements.get('some-element')) {
      loadSomeElement();
    } else {
      load();
    }
  }

  function loadScript(url, callback){
      const script = document.createElement("script")
      script.type = "text/javascript";
      if (script.readyState){
          script.onreadystatechange = function(){
              if (script.readyState === "loaded" || script.readyState === "complete"){
                  script.onreadystatechange = null;
                  callback();
              }
          };
      } else {
          script.onload = function (){ callback() };
      }
      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
  }

  function loadSomeElement() {
    loadScript('https://cdn.rawgit.com/Nevraeka/some-element/master/some-element.js', load);
  }

  function load() {
    if (!!!window.customElements.get('my-element')) {
      window.customElements.define('my-element',
        class MyElement extends HTMLElement {
        }
      );
    }    
  }
@RevillWeb
Copy link
Owner

The downside to this is if a developer doesn't want to load these scripts via a CDN. For example, when you wrap an app in a cordova shell you don't want to be loading files from the web as the app needs to work offline and its also much faster to load the files from the file system. You could, of course, make this behaviour toggleable but then you're adding more code to the components that might not be needed. Additionally, if the user wants to load a different version or different polyfill entirely they can more easily do this if they are in control of how it gets included in their app.

I like the idea of removing these decisions away from the developer and just having the component do everything which is needed but I think more flexibility is better here. Plus there will be some lucky developers that won't need any polyfills at all!

Would like to hear your thoughts on the above @Nevraeka.

Thanks!

@Nevraeka
Copy link
Author

Great point on the embedded Cordova app. Thank you for responding. Those apps would have full support and would likely not need polyfills unless they are locked down to an old cordova or old version of webkit (please correct me if I am wrong since I haven't used cordova in a looong time) Maybe its worth have a build that embeds the polyfills needed for img-2.

My thinking is that components should always 'self manage' , meaning load their own dependencies and assets. This is in line with the Gold Standard approach.Maybe you have a target build for mobile apps embedding this in a web view in addition to the other builds.

thoughts @RevillWeb ?

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

No branches or pull requests

2 participants