npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webhint-hint-jsll

v1.0.0

Published

webhint hint to validate Microsoft's JSLL usage.

Downloads

16

Readme

jsll (jsll)

Validate the inclusion and initialization of the JSLL script via multiple related hints.

What does the hint check?

JSLL is the analytics library used by Microsoft. This package contains the following hints:

  • jsll/script-included
  • jsll/awa-init
  • jsll/validate-config

These hints test the following:

  • Whether or not the JSLL script has been included.
    • If the script is inlcuded in <head>.
    • If the JSLL script is included before any other scripts.
    • If the script version is valid.
  • Whether or not the JSLL init script has been included.
    • If the init script is in <head>.
    • If the init script is placed immediately after the JSLL script.
    • If awa.init is called to initialize JSLL.
    • If awa.init is called as early as possible in the init script.
  • Whether or not the config variable is valid.
    • If config passed to awa.init is defined.
    • Validate the required properties in config.
    • Validate Optional properties in config.

Examples that trigger the hint

The JSLL script was not included

<head>
    ...
</head>

The JSLL init script was not included.

<head>
    <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
</head>

The JSLL init script doesn't follow the JSLL script immediately.

<head>
    <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
    <script>var a = 1;</script>
    <script>
        config = {...};
        awa.init(config);
    </script>
</head>

Required/Optional Properties are missing in config.

<head>
    <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
    <script>
        awa.init({});
    </script>
</head>

Invalid required/optional properties.

<head>
    <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
    <script>
        var config = {
                autoCapture: true // invalid type
            coreData: {
                appId: 'YourAppId',
                env: 'env',
                market: 'oo-oo', // invalid code
                pageName: 'name',
                pageType: 'type'
            },
            useShortNameForContentBlob: true
        };
        awa.init(config);
    </script>
</head>

Examples that pass the hint

<head>
    <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
    <script>
        var config = {
                autoCapture: {
                lineage: true,
                scroll: true
            },
            coreData: {
                appId: 'YourAppId',
                env: 'env',
                market: 'en-us',
                pageName: 'name',
                pageType: 'type'
            },
            useShortNameForContentBlob: true
        };
        awa.init(config);
    </script>
</head>

How the hint works

  • script-included uses two variables totalHeadScriptCount and jsllScriptCount to keep track of the total number of script tags and the number of jsll script tags in head during traversal. jsllScriptCount is used to report the absence/redundancy of the jsll api links. And by comparing the value of the two variables, it validates the location of the JSLL api link relative to other script tags in head.

  • awa-init uses a central state machine currentState to keep track of the current traversal location. It starts from start in the beginning of a scan and switches between six alternative values: head, apiHead, headOtherScript, body, apiBody, bodyOtherScript. State is only updated after the DOM traversal starts and the value is changed upon the events as follows.

    • Entering head element: head
    • Entering the JSLL script in the head element: apiHead
    • Parsing a non-JSLL script in the head element: headOtherScript
    • Entering body element: body
    • Entering the JSLL script in the body element: apiBody
    • Parsing a non-JSLL script in the body element: bodyOtherScript

    Notably, when the init script is included in an external script, the init script is parsed before the DOM traversal starts when using the chrome connector. In this scenario, we save the script in a variable tempInit and validate later after the traversal starts so that the central state machine reflects the correct location information.

  • validate-config stubs the init function to expose the config variable passed into the init function when running the init script. The required and optional properties of the config variable is validated.