{"_id":"@cookieshq/with-js","_rev":"8-c3e6fdd08bb549c566edc4ec6f76f004","name":"@cookieshq/with-js","dist-tags":{"next":"1.0.0-6","latest":"1.0.0"},"versions":{"1.0.0-0":{"name":"@cookieshq/with-js","version":"1.0.0-0","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"gitHead":"da7ed9d0856bb90579ea64ae6b656d44ec7f94f0","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-0","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-RqncC01F6F8cyC9AX35PG19bjDsDezrbObc982ZLq31kUsDNatDmG8Pk1utRSFvQR3FamJL1kVhzQbwY4h5YRw==","shasum":"fabe7e032c18a916ee1c53ee7268281039779011","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-0.tgz","fileCount":9,"unpackedSize":61288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTWkOCRA9TVsSAnZWagAAbz8P/1MWcdyinesHtceSpVey\nTyKpRLpdMhhuCbOtgscF99IUDehIIj84DoThAx4Ncw/Dvat295xP8FEifp8t\ngwZ9u7R/dk7ycrLB/uJ9brJv1VvESGj9Ywkw0VxSFn5C/ACqJanFmre0Ty7b\nFOy5zaf747oxSkcJu0Ak5jZ8Wc6W5ycWdbASsD9TxW2fZ1urga05NFbCb/qA\nnG+yeL1zkytz8JW7K3wxH6aOlYkyHUxxnacW9+hyylRB9mcYS3xq7rbu0wLq\nJMKlppLSWzmmc2SFc9leC5sJYebi1za25OEe6d2FDsz10wgkuNldlz205D2I\nW7afqTVqKqdVES5mE8t6u5OO7H1ChoQ6PGDemhrVImSXBWNChIEEU3AhXA3b\n0arVuJGAZrxDJBboQTK3KFfTeVR5z0a6Ytb+xCi1FoeQdIFMuT43MbTrGOUo\n3XoJE0IxlPeWvGvh4zAzfgVPbJqml/XUx5Z6QiAKsC/7ZBsL6hmkwCDcTG7h\nNr4ORnl2zjLyp1X+76/boPC78VcOCHPBCKozCeoDa9G8o9jzmwRGWB6M2ilw\nGEJUqf+kMzRu5/D8qzSS/aCu6ceuBCjSs19ay7s6bSVestTQMRFcHXXZ1LbF\n64iVlrvF+iFO/o3NDRZFPxjnSWOormfswmg4k6CspzHjMowuGjwXI8pvZq5L\n29mg\r\n=6HRX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBPntfUt8jygUUcP+ajkWoEFNX571N7lSi6j+V6slEYgIgaqVnACcCGyHCYGTfgHqeBgnH2ldpEgxIikhHeiV/yn0="}]},"maintainers":[{"name":"rhumaric","email":"hello@romaricpascal.is"},{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-0_1582131470349_0.741315886475971"},"_hasShrinkwrap":false},"1.0.0-1":{"name":"@cookieshq/with-js","version":"1.0.0-1","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"readme":"With JS\n=======\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js'\n      withJS();\n      ```\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/withjs.iife.min.js\" defer>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n","readmeFilename":"README.md","gitHead":"0168b574c60af4fcc2d0cf811ffd208f169e6aa0","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-1","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-65f0Ax/FnSpWu9Hqeo+UWljVZXz7tzuymonAlSQdoepOgmQy2lwklzHPYvTYs1b15/yE1atWgqiMG4xjtxaXRw==","shasum":"bfc393face2c4b3321fdb70b72e10d6478248bc9","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-1.tgz","fileCount":9,"unpackedSize":61288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTWuYCRA9TVsSAnZWagAA0xIP/jlMd+XXZfNAGcLrFHxt\n/gQ1mc8B+O9yU7ulfxqzzsFVsXjGQpW7gXprVcxU2THO/yZkQAIVAepqqHGt\ny8c+Qad9K9H2PGMDwgfp3yRUl5278ZP8dI1xOEizBSTJoO3bUfGOgqinuQUK\nex0ECDGmazZ5c32Pa0UGparS1MghX25s9Rq4XMh2pBfNpxfzYpgOvX5aBwTq\n8CVFQ3B27yZws3cs9YXa6fAy6KMhVaEzwYrL9+8yU5lz7sW3qe8ETNtzQT49\nrLMjsDU102B6PR9bI55LloVKpryfBLN8SuKcJ2n0CzF6upzoc27YbrPHqHRY\nGcDd5nFZRO6U9hhWA0aWzwOUxp2eNt7CrfslEjnQhZ2auWCKU21nUpLPsmXY\nYZn6RIY+k0LACVxTXI+DKi3YbNubpe/bYjmxPfUP8OVWJXbRX4i7Dv6aIlBX\n73cvKlNkW6K3hcJnL1MyjQdTFoX2XjCp64IPykdcYQs8AKGeMxG6urPCPyGs\n5njixuJPbt4+BU65b6c23sMOmWwo9aqG7NtoFr9YLbUz5ZPzo3ZwEv37Xn9f\nXfnLjPzNgyWWWzRU4lavGm7RCNIdy//RK+EqHofu2lXG9ike1FPyQMRkLXi+\ncv/Vp2x/RvDYA7WZkSXjqwzKH41imcZCaXdaEHc2C6GnUtiSuHh04qxpaOnB\nm09l\r\n=1ZE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICC0uLZ0+qorkQUrb0KLBbjHeDCbNgdqhYs4sR1XUpX/AiEA1C2hkXMMmdj7PkmkVCLwIcIiXvN0ez0/RXfrOFUkO4A="}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-1_1582132120494_0.696080226088059"},"_hasShrinkwrap":false},"1.0.0-2":{"name":"@cookieshq/with-js","version":"1.0.0-2","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"readme":"With JS\n=======\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js'\n      withJS();\n      ```\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/withjs.iife.min.js\" defer>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n","readmeFilename":"README.md","gitHead":"bf38ab3bce43e5f8d3a0d1b1a988b3616931fa5a","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-2","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-YnCbIQwuZA3/dO4OrmcZ+hcFEBjwiFlhMKxzAC3/RKMWX6YyvyvVWrU/M8iCwq/L76ytZE5Iz3M8XEjeHa6bZg==","shasum":"16ad7981f07ac202e73499cf1e19012deaf0810c","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-2.tgz","fileCount":9,"unpackedSize":61288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTXEpCRA9TVsSAnZWagAAon0P/jiJcvVa/TUOES/uFn69\nlgYe8z6iFZBI9XSu5LwDuIueuVg5MdkltBeV3bmCx8T4Jz8bBzoOVPqcgPUM\nuv2Lth+kcA5VQ3YDmeu4fKl1naoDZYyyScK7jeMONUNjifbnnBPZ2JO+hsDS\nEJN1P9bnMoxmHTIW+bJ19muMamppkQSEPqjJeoFtzaOeQv2KWbIr3tXJIF84\nSgs87dRFBVprzdece9yUGCjkNek/o1pHmtR0LEchguzS8ZKyXO/75fZ2xvLq\njgPHI+MkdEwUf0UPO2ELIJqn4EJAkCdNS1MHt9ydYr3JVTNrJJrItytLjlvn\nJpG+YUftjws49F4qrajKwmyb6jXFUldmSqiiOapbqhZtLGbuv3OqpiXZpw+C\nKAOO4tGDkknJftfoAThnbHkqy8GuOllvjqRQ6r0P79Fc8It0yL4yS9FN/TuE\nSni06OJ7FJhQ728K4dhG83OgIV6P+Hp2r6j+rhOo5BBmkL4Oqk7nUwG9m7cL\nepBZZLV7tp44XogKltu7y8RceuhCF8CC5Rk8+4i6+CvAMDYQfVFRhxp3hU/s\n1+H0sAC/kXHx1xfDX321pdLPYWi0u20KcT/ea9d5X5QOVabh5oCN+D1Xp0Wh\ndkN0wO9mKMsEhmvlmarpKfAFzBWoviVYSmGCCHH9/RpZUWRhJfecpVjeV4lf\n4NN/\r\n=RERY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXBgz3cjjo+kNkgh0kVOBn447hwJAUe5IdNDjD/GwvTAiEA76noNIxG+jg/ncQ3Y14FtoLEc351TIDFvWqaq6hUKcY="}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-2_1582133545321_0.5580452509229621"},"_hasShrinkwrap":false},"1.0.0-3":{"name":"@cookieshq/with-js","version":"1.0.0-3","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"readme":"With JS\n=======\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js/src/index'\n      withJS();\n      ```\n\n      > Note: The `package.json` file does have a `module` field pointing to `src/index.js` which should allow to just import `@cookieshq/with-js`. However, specifying the whole path in the import was the most reliable way to get it working across the major bundlers (Webpack, Rollup and Parcel).\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js\" defer></script>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n","readmeFilename":"README.md","gitHead":"73e81c4d600a256899d3f3c5234ec46b40d75c02","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-3","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-7MjXVOire+TNQ1aNCH4o0mc+P+26SbMEX0PvPTiZClwQ1XsOe0HRW17+UDU/kyRkrZHzcyqq7k2Xzr8iqFNXVQ==","shasum":"a9d7e9cc30f6e61eab4855fec3527892ca2d9112","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-3.tgz","fileCount":9,"unpackedSize":61606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTYGMCRA9TVsSAnZWagAAtSUQAKBTL4BLygi4npxoulm8\n7oX7kdq4JY3BjSqCMP9Ws8ehGOw5nrGWDFfq46KEnQFLVm+xb1iwRAp+Mpcs\ngk1D5j68aY6BKpywRpUF1iYR+794S6lt0WREb46YspVogLM5cl5pSNfeOJJZ\njwiJlK5YIBsWnxv8NDYUG2PW0tWJInXBIq8CSLorkA/1iuyE513wL14jfULP\nNvDQBmRthT+4Yuwlo5RLdc+ppD0itq7N8C11W4tRTcU+wFLE3UvN2HdFx3U9\nVipG3bLf++1FCGFzkQOe2Izn7QA9WGACn2OPPL2XwJBeOl6ioDBiBlBZYImx\n2tqzjA/oDmSIRaj8Z+wMDM9q1dzz0xZhdj+imiADuf//PW5axTSJHeJ0MUAZ\nATmHNYpbg0UWs77sviY4oCzI9VevA/GwNd3ZgQetxu2rFV4RJ1hYxjJrylxQ\nZgtImJD4gQc6+EC3QWomnhSFrB5KSD3XGKqnP5ac7kpKoPukDZNRrOax6olT\nXMFoqOsXux4uZ4+d/QrFNEgAypQRt9NIkIEO29MjU8cYEMZ1vCpcji9hQMGj\nkGEQHjg/QCpsdIHMSm3Icx3xr2ESpN2hBf1/s/IIX4wa7prASClNDdqW7Uwv\nWqiwLbLjZQSwQBESrVnGHMih8TqoqYeTvCQRNuUEw6kwAqyK+MJ6Z9bWUEi+\nln6H\r\n=1rZB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJ5Ww3KgLsZufBKSpr0jg9CigEeqJv9QWdoRtxKHS6yAiA6Tq6dqcAdp1eN+FiE5O2gOKztKqR47/rd3BXW5w+z7A=="}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-3_1582137739556_0.21181430623576025"},"_hasShrinkwrap":false},"1.0.0-4":{"name":"@cookieshq/with-js","version":"1.0.0-4","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"readme":"With JS\n=======\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js/src/index'\n      withJS();\n      ```\n\n      > Note: The `package.json` file does have a `module` field pointing to `src/index.js` which should allow to just import `@cookieshq/with-js`. However, specifying the whole path in the import was the most reliable way to get it working across the major bundlers (Webpack, Rollup and Parcel).\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js\" defer></script>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n","readmeFilename":"README.md","gitHead":"a542aea08bae0a02d0855ba7ea104f992fe13170","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-4","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-qOWGDBPsUoP6ZIGjbwoOEJko/VlC1SHEsbFe41CZUjgsRWuHGUIIKMnmHq+FkIHsUNvtuCzCCafB9Pv6NG/asw==","shasum":"b3d1e447d39d69ef39d2706685ad6dacd38aaa97","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-4.tgz","fileCount":9,"unpackedSize":61606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTYOCCRA9TVsSAnZWagAAfQAP+gPH0idqu/bIY/+42IE2\nC8Q/tDHAnNbrXwp4MrKIVccjvPyvHjr4F2bI3OFAbsLIN1HQt3Q/u7dtEwrX\nEICKD1cEEW1iHXXUUDGrjhpnUs6rEccH2qwmLjn51NKxUE18eGJLSntJwNZG\n2qrApAd5LkCzTBEHw8K1ToKhGb5MESt/Rh7sQIdUIjcXQ5OPO5SX6QzgKB20\n4HHJTFRwP7JurahcUxLWnxZKGGYkIgzYAKW8mdEyhBf7Ysx6JfuVN8x6g4Tk\n96Lz4hTmUSACf0atHhPOcZOkwe/MDPzbojF6Y2cKf6HzhYJI5RDkYmsbmCSn\nhPnrXBqC6h4O+FLdUfnkCPq1Y9g/HHoZCKIl/s6Xm9LDCCpnG7HOVU5jdiFq\nMcjHlpO7BWd0ezhRVUn3XBkCacOVUZ94+W6KfIndMIjZSB965DXyaRTRZOf3\nmFmJmVNi8cxNVgjBkHR5DNlsUFFk+dwx//Z8FLkAD4VTqElF7Pv8cKTVCC3F\nxb5eFDK+sbPUATz37L2BHyH0MYvJbnmMfkDMCQjQXk5eizzYgZyXbw6ooYWs\nG4o/4kPzAxuiLIsN0wV5o5oIqtETDGoDBc6gxYYPKqq8ZKJrjBCTDFq7y40i\nAPIRxvBJHcTaEPXm35CL5RbRpIlYVqcDLBaHsaZovPtlFj6UPmNz8xVxGOoH\n1fVQ\r\n=ZwpV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6DI2tsQIwkJFuD6TQmSUYx0hPyAwzddbd2IjtQf7B5gIhAOc2NnExCv7IxiEbkLOVfPwEsACoA6OYPXWE0O3ZYgOi"}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-4_1582138242348_0.4382492967279217"},"_hasShrinkwrap":false},"1.0.0-5":{"name":"@cookieshq/with-js","version":"1.0.0-5","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"readme":"With JS\n=======\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js/src/index'\n      withJS();\n      ```\n\n      > Note: The `package.json` file does have a `module` field pointing to `src/index.js` which should allow to just import `@cookieshq/with-js`. However, specifying the whole path in the import was the most reliable way to get it working across the major bundlers (Webpack, Rollup and Parcel).\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js\" defer></script>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n\nTooling\n---\n\n- The project is build with [Rollup](https://rollupjs.org), with [Babel](https://babeljs.io/) for compiling to ES5.\n- Tests are run with [Ava](https://github.com/avajs/ava)\n- Linting with [ESLint](https://eslint.org/) is set up on the project and should be triggered on commit thanks to [Husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged)\n- The project uses [np](https://github.com/sindresorhus/np) to manage NPM releases\n\n### NPM Scripts\n\nThe build commands are managed through npm scripts, mostly pass through to one of the modules above:\n\n- `clean` to clean the `dist` directory\n- `lint` for linting the JS files\n- `test` for running the tests\n- `build` for building the browser and CommonJS files. It'll trigger the `postbuild` script to minify the browser build\n- `release` triggers a release to NPM. It'll automatically run `prepack` when creating the package to build the latest version of the library","readmeFilename":"README.md","gitHead":"be3e7e8a4d2719f13e9935f1952f99786e944fbc","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-5","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-mAfsnwTWeY19cfb7KbZJoooY5XQDdFjHtpE3CLtF0BYxCpMb21KFugNSLWmLJQIaLSCQeUHFpVsD18/cUTiQNA==","shasum":"a7cf587d5f1a79cda3a1a20968087aa1724f308f","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-5.tgz","fileCount":9,"unpackedSize":63537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTYd6CRA9TVsSAnZWagAAD9AP/3RbnggMtE7tYWgRTOP8\nCPJg+USruqb6vv/gl0LFq29DEVkfhcK7I+RGEg/oXg00BQkpOgLCNMAzILoO\nFXNn6glUtGmGF99FglBVaTLYYIYktLXPEBo/A94F9A6qlCfzGDjWi8cQe/v8\n3Kuky0SQ3JUWEH3OR7gbK8/HoJHXtTMr0aeCDqUpE/Pu6TJtUikA4/gVnvIX\nbRYHrEeuaKnPXyWIpWiIuLCni687FuypVHbAYfAz4iBxWlcu5XbMLcoLhbNc\neTdBVAT9SgFePYRr/Ax6k2R5oy64tuRltkW0Q2ZBT1kfz3FkaddoXsLVpY7R\nHj/7CeWFkE97+6KoTfWjLsWVybfahChx2RRCogQLDdKsaFD+2Dp1qc0KtD2g\n1XD0TzmfQxD5rR5h41N5lnWcwkDejT1mhg4vL9NmI/rN6ICU0zEs+tqNZBDM\noH0xYh4TmbdTN6WREPV11LgUdE4P/swJD8eYUMDBR0ys+2hPL0K/MU2dC1ls\nt/hh0HtK1svjmp/zcHPN11uIkk2bLE0EUnhTi1Q8orYSI7sMeU48+9LP+2W7\ng+vi/DSlXCjfCdLis95obtwPYOOnLxoEN5uZLTast/SW8OpwVxYhYNAdkc/O\nnV2AHxg5El5faOtHiQTmMxJ2ohPb7LIAY+gq+whjSnsCqoLgwoK0E4/TWyWC\nZCFA\r\n=RbGj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZw99NKY3xHJGeoZbakQhIuQAiHAYWC2fncL5YpJ24xAiEAzZ5VY7chucyY+w2SUYKKH3S85I8llRYjQIeKQldnTO0="}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-5_1582139257918_0.014700923952158718"},"_hasShrinkwrap":false},"1.0.0-6":{"name":"@cookieshq/with-js","version":"1.0.0-6","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","unpkg":"dist/with-js.iife.min.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"readme":"With JS\n=======\n\n![File size badge](https://badgen.net/badgesize/normal/https/unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js)\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js/src/index'\n      withJS();\n      ```\n\n      > Note: The `package.json` file does have a `module` field pointing to `src/index.js` which should allow to just import `@cookieshq/with-js`. However, specifying the whole path in the import was the most reliable way to get it working across the major bundlers (Webpack, Rollup and Parcel).\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js\" defer></script>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n\nTooling\n---\n\n- The project is build with [Rollup](https://rollupjs.org), with [Babel](https://babeljs.io/) for compiling to ES5.\n- Tests are run with [Ava](https://github.com/avajs/ava)\n- Linting with [ESLint](https://eslint.org/) is set up on the project and should be triggered on commit thanks to [Husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged)\n- The project uses [np](https://github.com/sindresorhus/np) to manage NPM releases\n\n### NPM Scripts\n\nThe build commands are managed through npm scripts, mostly pass through to one of the modules above:\n\n- `clean` to clean the `dist` directory\n- `lint` for linting the JS files\n- `test` for running the tests\n- `build` for building the browser and CommonJS files. It'll trigger the `postbuild` script to minify the browser build\n- `release` triggers a release to NPM. It'll automatically run `prepack` when creating the package to build the latest version of the library","readmeFilename":"README.md","gitHead":"12aa73bb29f242e07747756a65ab949dd8a80a0e","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0-6","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-JARo9i9U4WBeSqJtSJyb7FECu0xCSBU5/eALLpTUhKSaVnA/coBmS5T1tfrZpQibUVNk3mqR3MimYxoATVCPsQ==","shasum":"63f848af7c2d83aa94cec17aa70c0af1e055f21c","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0-6.tgz","fileCount":9,"unpackedSize":63693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTY8rCRA9TVsSAnZWagAAtI8QAJsSX5TN47V/m53rw5a9\n2OFt8PEJ6nqev7R6jwwUV/HVnFY4oly8CDbBnMQDnpNRKPcRoBwAMsZwPlA9\n2sL8BCDbDaGC0CCtqFnJGkEgTh38Zjf9zox9pNf7AWdugzqGowIJnSd6lqmo\n9NdOxcjbYzczj2TT5skVqSUZtsO2aQzgpyc4uA75eBJaxnOD2kLg7h7rc6w7\nS2YDMVnqDhTA0ACcGeaaR7ZlcJD0NGXGnztTMhw0Yx5KJixHy3X2XdfK7XuX\nC+MZUH3zppGPu8nXZWDTlL7i1lQpQ+Gs+KeB4CZUfpnljUlv7A0TatEUsBE/\nwFO+DYU4ohUHCRAmWUP9stIhOtDhnABai9eoPQ/OWOexl1tuGfxey7lT36ZL\nrD8ZEuD3GKypxUnDL1MH0E9P7CS11oBtvaasz3ePFa53imewv9r0I8jrqCJ/\n2GqqBI+LL/hmVzoqThjzLBBO3yzznD9jS/cXU7LaOarLe+kepDox1p6wFxZc\nwyBQxorZRfArgXehMr69eE6pxuQZZFTVR90HSR4GaTGSLgYf+yW8cJz30Faq\n4IWxvpF6cTZZVW8KBXUa5+MR1nknszPcFYjPqqG6DA1wGJeqw9YjOGI7R2Ig\nZejvYyKFTksyS5GN0q8K4MR0I+lkmzqaOtMVmsE9CLc21mmgFtAKv/MzRnDT\n1VtR\r\n=PlsD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7q71t3VeIxSDhESuaUxlU3E30MNug3auCU7EjgnbW7AiEAze3fRo6dRTG52fuSaRqNpNAkrMIBq4mY9RWNX2BgKzU="}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0-6_1582141226713_0.15735013059339553"},"_hasShrinkwrap":false},"1.0.0":{"name":"@cookieshq/with-js","version":"1.0.0","description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","main":"dist/with-js.cjs.js","module":"src/index.js","browser":"dist/with-js.iife.js","unpkg":"dist/with-js.iife.min.js","engines":{"node":">=10.19.0"},"scripts":{"clean":"rimraf dist","lint":"eslint '**/*.js'","test":"ava","build":"rollup -c","postbuild":"terser dist/with-js.iife.js -o dist/with-js.iife.min.js --source-map 'content=inline'","prepack":"npm run clean && npm run lint -- --fix && npm run test && npm run build","release":"np"},"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"license":"MIT","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","ava":"^3.3.0","babel-eslint":"^10.0.3","browser-env":"^3.3.0","eslint":"^6.2.1","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^6.1.0","eslint-plugin-node":"^9.1.0","eslint-plugin-prettier":"^3.1.0","esm":"^3.2.25","express":"^4.17.1","husky":"^3.0.4","lint-staged":"^9.2.3","np":"^6.1.0","prettier":"^1.18.2","rimraf":"^3.0.2","rollup":"^1.31.1","rollup-plugin-babel":"^4.3.3","terser":"^4.6.3"},"repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"publishConfig":{"access":"public"},"gitHead":"ba23e43de79f556f4a958c41662433d2d7bfda1d","bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"homepage":"https://github.com/cookieshq/with-js#readme","_id":"@cookieshq/with-js@1.0.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-iLo0g4de7Dp5arXKvs0Zw51hL32KkrWKXANmUYA2py1BLao9w8RpbEZatntRfKIGma4oiom3y8vMCTTT17rDVw==","shasum":"6f25b5612f9e7d19a26cfe233f25356ab7f45f15","tarball":"https://registry.npmjs.org/@cookieshq/with-js/-/with-js-1.0.0.tgz","fileCount":9,"unpackedSize":63691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZBqCRA9TVsSAnZWagAADfEQAIHzOd0mFqQMhK1wO53H\nL5jPY/jI9FUMdtNzfmpGEhcHsdkuLTct3RBI+tL4TFiloz8VHDPTl9LgqCqH\nqermH5WMZY/mmf6+VSw1mXUY+z88bM9TcBxo8K6xMmPSwrD8e1Iow0BSCdcr\nMG6JbbHWLln0WJmOTf4DBfUaNikqi4dOxj7vHpOAnjhPAt7Uh029jj/h7kbD\nLiBWME/INr+E13GA/GgYRFAbCOJ8zXkTIPXhZDctXSoPHMQR7xfbwnZbMGOG\n51GduO0siB+tO/bKQBuAUn8+LOStCsoAP12zmFoePMU7BoR8ZjDklXZXrFO/\nbWAaYaUnewbWecnd54iQN9BLVosCsu96sV1WadO3A/eiEbO2B60FQVgEqEMV\nQNw9mT7ZNKC/++1W0mCNohSNfGPJYf+KY/8SPr/rHxx3bTXC22sRFOAp3U59\n28iIp+UTxMnpya7LwTsx6a3TTuCjqksBsixQAZ6wGL4jBiSPWps4ESOqaGcq\n8v3fGg2LXHP7df5G7wiFA1/guw0Jt5IPjTx1aZWscdbtfW79gln8KDQWF0y+\naEmmI3lqiUDhayM0UHpFYmklFkVCdEbkK8YYeEq83n0cPzqgfq6A9cIKQqYF\nuPR4QTr7RRKigvROWSMTX/Tz8AFQ0ICiD1pkPX+W9QOCj6GYYq80sKyGeqMN\nDuyb\r\n=FPru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAnyLWD9anA7WJ9nZYcGVAvEVZ1AqUDP4GyrW9157qQAiEA6dpr8nlfME6Q4ukhCJChZcHAnUNNAcVxA2aEqgZ2QT0="}]},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"_npmUser":{"name":"rhumaric","email":"hello@romaricpascal.is"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/with-js_1.0.0_1582141545985_0.77716290089949"},"_hasShrinkwrap":false}},"time":{"created":"2020-02-19T16:57:50.092Z","1.0.0-0":"2020-02-19T16:57:50.445Z","modified":"2022-04-05T01:15:27.872Z","1.0.0-1":"2020-02-19T17:08:40.632Z","1.0.0-2":"2020-02-19T17:32:25.470Z","1.0.0-3":"2020-02-19T18:42:19.758Z","1.0.0-4":"2020-02-19T18:50:42.470Z","1.0.0-5":"2020-02-19T19:07:38.077Z","1.0.0-6":"2020-02-19T19:40:26.900Z","1.0.0":"2020-02-19T19:45:46.090Z"},"maintainers":[{"name":"cookieshq-developers","email":"developers@cookieshq.co.uk"},{"name":"rhumaric","email":"hello@romaricpascal.is"}],"description":"A declarative way to add/remove attributes, classes and styles on HTML elements when JS is loaded.","homepage":"https://github.com/cookieshq/with-js#readme","repository":{"type":"git","url":"git+https://github.com/cookieshq/with-js.git"},"contributors":[{"name":"Romaric Pascal","email":"hello@romaricpascal.is","url":"https://romaricpascal.is"}],"author":{"name":"CookiesHQ","email":"hello@cookieshq.co.uk"},"bugs":{"url":"https://github.com/cookieshq/with-js/issues"},"license":"MIT","readme":"With JS\n=======\n\n![File size badge](https://badgen.net/badgesize/normal/https/unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js)\n\nA declarative way to add or remove attributes and classes on HTML elements when JavaScript is loaded. Extensible to allow running other kind of updates.\n\nWhy\n---\n\nSome attributes, classes and styles are only relevant once JavaScript has loaded:\n - ARIA properties or roles setting expectations for assistive technologies that are only fullfiled by JavaScript\n - Some fallback HTML that needs hiding once JavaScript is there, because an enhanced widget takes over the feature\n - Or inversely some HTML that needs revealing to provide a better experience, but only when JavaScript is present.\n\nBecause there's no guarantee JavaScript will load, they should not be present in the HTML that's downloaded by browsers. This library provides a declarative way (through either data attributes or classes) to quickly amend the initial markup once JavaScript has loaded, ensuring a clean experience when it doesn't.\n\nUsage\n---\n\nThe library will look for elements marked by specific classes in your HTML. Out of the box, withJS allows you to run the following operations by adding classes to your HTML elements:\n\n- Removing the element from the DOM: `js-with-js--remove`\n- Adding an attribute: `js-with-js--add-attribute__role--tab` will add the `role=\"tab\"` to the element. More generally, you can use `js-with-js--add-attribute__<attribute-name>--<attribute-value>`.\n- Removing an attribute: `js-with-js--remove-attribute__hidden` will remove the `hidden` attribute from the element. More generally, you can use `js-with-js--remove-attribute__<attribute-name>`\n- Adding a class: `js-with-js--add-class__sr-only` will add the `sr-only` class to the element. More generally, you can use `js-with-js--add-class__<class-name>`\n- Removing a class `js-with-js--remove-class__margin-top-0` will remove the `margin-top-0` class. More generally, you can use `js-with-js--remove-class__<class-name>`\n\nYou might have noticed the `js-with-js--<operation-name>__<argument1>--<argument2>` in all these classes. You can extend the library to provide your own operations to suit your needs (see bellow).\n\n### Installation\n\n1. Install the package with your favourite package manager\n\n    ```sh\n    npm install @cookieshq/with-js\n    ```\n\n   or\n\n    ```sh\n    yarn add @cookieshq/with-js\n    ```\n\n2. Import the library and call `withJS()` in your project:\n\n   - using ES6 imports\n\n      ```js\n      import { withJS } from '@cookieshq/with-js/src/index'\n      withJS();\n      ```\n\n      > Note: The `package.json` file does have a `module` field pointing to `src/index.js` which should allow to just import `@cookieshq/with-js`. However, specifying the whole path in the import was the most reliable way to get it working across the major bundlers (Webpack, Rollup and Parcel).\n\n   - using Common JS imports\n\n      ```js\n      const withJS = require('@cookieshq/with-js')\n      withJS();\n      ```\n\n   - with a `<script>` tag in your HTML\n\n      ```html\n      <script src=\"https://unpkg.com/@cookieshq/with-js/dist/with-js.iife.min.js\" defer></script>\n      <script async>\n        document.addEventListener('DOMContentLoaded', function() {\n          withJS();\n        });\n      </script>\n      ```\n\n> You have to explicitly call `withJS()` for the updates to get applied.\n> This lets you be in control of when and with which options it runs.\n\n### JS API\n\nWithout any arguments, `withJS()` will hunt for all elements with a class that contains `js-with-js--` in the `document`. You can also:\n\n- pick a specific element to update with `withJS(element)`\n- select other elements in the DOM with a CSS selector `withJS(selector)`\n- restrict where `withJS` looks for the elements to update with `withJS({parent: element})`\n- which can also be combined with using your own selector `withJS(selector, {parent:element})`, or less verbosely `withJS(selector, parentElement)`\n\nExtending the library\n---\n\nInternally the library `run()`s the `updates()` it extracts from each target element(s). You can override both behaviors by providing your own functions in a final hash parameter:\n\n```js\nwithJs({run: customRunFunction, updates: customUpdatesFunction});\nwithJs({parent: element, run: customRunFunction, updates: customUpdatesFunction});\nwithJs(element,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector,{run: customRunFunction, updates: customUpdatesFunction});\nwithJs(selector, parent,{run: customRunFunction, updates: customUpdatesFunction});\n```\n\n### Adding extra operations\n\nYou can add extra options by providing your own `run` function\nthat passes custom list of operation to the default implementation.\n\n```js\nimport { withJS, applyUpdates,AVAILABLE_OPERATIONS } from '@cookieshq/with-js';\n\nwithJS({\n  run: function(operations, el) {\n    return applyUpdates(operations, el, {\n      availableOperations: {\n        ...AVAILABLE_OPERATIONS,\n        // This would now allow things like `js-with-js--set-style__display--none`\n        'set-style': function(element,property, value) {\n          element.style[property] = value;\n        }\n      }\n    })\n  }\n})\n```\n\n### Customizing the class pattern\n\nMaybe you find the `js-with-js--` prefix a bit verbose,\nor prefer different separators.  You can provide a custom `updates`\nfunction that provides different options to the default implementation.\n\n```js\nimport { withJS, getUpdatesFromClasses } from '@cookieshq/with-js';\n\nwithJS({\n  updates: function(el) {\n    // This would let you have class names like: `js--add-attribute:role,tabpanel`\n    // As we're not looking to use the class for styling, the \"special\" characters\n    // in the class won't be much of a bother.\n    return getUpdatesFromClasses({\n      marker: 'js--',\n      operationToArgumentsSeparator: ':',\n      argumentToArgumentSeparator: ','\n    })\n  },\n  target: '[class*=\"js--\"]'\n})\n```\n\nTooling\n---\n\n- The project is build with [Rollup](https://rollupjs.org), with [Babel](https://babeljs.io/) for compiling to ES5.\n- Tests are run with [Ava](https://github.com/avajs/ava)\n- Linting with [ESLint](https://eslint.org/) is set up on the project and should be triggered on commit thanks to [Husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged)\n- The project uses [np](https://github.com/sindresorhus/np) to manage NPM releases\n\n### NPM Scripts\n\nThe build commands are managed through npm scripts, mostly pass through to one of the modules above:\n\n- `clean` to clean the `dist` directory\n- `lint` for linting the JS files\n- `test` for running the tests\n- `build` for building the browser and CommonJS files. It'll trigger the `postbuild` script to minify the browser build\n- `release` triggers a release to NPM. It'll automatically run `prepack` when creating the package to build the latest version of the library","readmeFilename":"README.md"}