Code Monkey home page Code Monkey logo

script-loader's Introduction

Contactlab Loader

Build Status GitHub release

Similar to a Tag manager, this script allows Contactlab clients to insert a single JavaScript tag in their web pages with a single client ID. The script will asynchrounsly load other tags and configurations based on the client ID.

How to use

Insert this snippet in your website (preferably in the <HEAD> section):

  <script>
  window.cl=function(){(cl.q=cl.q||[]).push(arguments)};
  cl('EXAMPLE_ID');
  </script>
  <script async src='https://assets.contactlab.it/script-loader/latest/loader.min.js'></script>

We recommend that you load libraries from the CDN via HTTPS, even if your own website only uses HTTP.

ID

To use the Loader, you need an ID identifying your website. This ID is all you need to get started: simply replace EXAMPLE_ID with your ID in the example above.

Compatibility

The Loader has been tested with the latest versions of Chrome, Firefox, Safari and Edge, including mobile versions.

On older browsers, the script is designed to silently disable itself without generating warnings or errors.

If you notice an issue with a specific browser, please open a GitHub issue specifying the exact browser version and operating system you are using.

Contributing to this library

yarn will install all dependencies.

yarn lint will check the code with ESLint.

yarn test will run all tests once using Chrome Headless and Puppeteer.

yarn test-watch will automatically re-run tests on every change.

script-loader's People

Contributors

arual90 avatar dhinus avatar psantori avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

script-loader's Issues

Add callback

requirements

We want the ability to provide a callback to the Loader, that gets called after all scripts have been inserted in the page.

specs

The Loader should check for an optional variable window.ContactlabLoaderCallback, and if defined (and its type === 'function') it should call it after all the scripts have been inserted in the page.

misc

If async scripts are inserted, the callback will only tell you that the script has been inserted into the page, not that it has been executed.

To improve on this, @StefanoMagrassi suggested we could find all SCRIPT tags in the content we are adding to the page, then wait for the "load" event of each of them.

Support IE11

requirements

The Loader should work on IE11

specs

We need to polyfill / ponyfill the missing features (fetch, Promises, etc.)

misc

We should be able to get IE10 support "for free", if instead we find out IE10 requires specific polyfills/workarounds we should consider dropping IE10 from the list of supported browsers.

Add .travis.yml

Project card

requirements

Tests should run automatically using Travis CI.

specs

Add a .travis.yml that runs the tests using yarn test.

misc

Initially, we'll just use Chrome Headless. Using Travis to run tests in multiple browsers can be considered in a separate issue.

Build minified version

requirements

We want to provide both a minified and a non-minified version.

specs

We can use UglifyJS2 or webpack with the UglifyJs plugin.

misc

Make sure the minified version does not throw errors on old browsers like IE8.

Add documentation

requirements

Write end-user documentation on how to include the Loader on a website.

specs

It can be added to the README.md file.

misc

Add unit tests

requirements

We want to have decent test coverage with unit tests.

specs

We can either use Jest or Karma+Mocha. The latter has the advantage of integrating with BrowserStack to make sure the tests are green on all our supported browsers.

misc

Make sure no error is thrown on unsupported browsers

requirements

The loader only supports modern browsers. But it will run on many old browsers, too. We don't want those browsers to throw a JS error.

specs

Using feature detection should work. If the JS features we use are not supported by the browser, exit early with a debug message.

misc

{optional: other useful info}

6 tests are failing when run on IE11

Project card

description

6 tests are failing on IE11, with the following error:

ERROR: 'Unhandled promise rejection', TypeError: Unable to get property 'prototype' of undefined or null reference
TypeError: Unable to get property 'prototype' of undefined or null reference

how to reproduce

  • yarn test-watch
  • Open IE11 and navigate to ${IP_ADDRESS}:9876

specs

This is likely due to incorrect transpilation or polyfilling of the test file.

misc

{optional: other useful info}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.