fetch-inject - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

fetch-inject.js

 /*! Fetch Inject | Copyright (C) VHS <[e-mail]> | @license Zlib */
-const injector = (function(i,n,j,e,c,t,s){t=n.createElement(j),s=n.getElementsByTagName(j)[0];t.appendChild(n.createTextNode(e.text));t.onload=c(e);s?s.parentNode.insertBefore(t,s):n.head.appendChild(t)}); // prettier-ignore
+const injector=function(i,n,j,e,c,t,s){t=n.createElement(j);j==="template"?(t.innerHTML=e.text,n.head.appendChild(t.content.cloneNode(!0)),c(e)):(s=n.getElementsByTagName(j)[0],t.appendChild(n.createTextNode(e.text)),t.onload=c(e),s?s.parentNode.insertBefore(t,s):n.head.appendChild(t))}; // prettier-ignore
 
@@ -8,9 +8,7 @@ export default async (inputs, promise, { fetch } = globalThis) => {
 	const thenables = [];
-
 	inputs.forEach((input) =>
 		deferreds.push(
 			fetch(input)
-				.then((res) => [res.clone().text(), res.blob()])
-				.then(async (promises) => {
-					const [text, blob] = await Promise.all(promises);
+				.then((res) => Promise.all([res.clone().text(), res.blob()]))
+				.then(async ([text, blob]) => {
 					resources.push({ text, blob });
@@ -24,7 +22,9 @@ })
 			then: (resolve) => {
-				const inject = (type) => injector(globalThis, document, type, resource, resolve);
+				const [_, type = 'script'] = [
+					['/html', 'template'],
+					['/css', 'style'],
+					['/javascript', 'script']
+				].filter(([mime]) => resource.blob.type.includes(mime));
 				typeof document !== 'undefined'
-					? resource.blob.type.includes('text/css')
-						? inject('style')
-						: inject('script')
+					? injector(globalThis, document, type, resource, resolve)
 					: resolve(resource);
@@ -34,4 +34,3 @@ }
 	);
-
 	return await Promise.all(thenables);
 };

fetch-inject.min.js

@@ -1,1 +0,1 @@
-/*! Fetch Inject | Copyright (C) VHS <[e-mail]> | @license Zlib */const h=function(d,n,c,o,l,t,e){t=n.createElement(c),e=n.getElementsByTagName(c)[0],t.appendChild(n.createTextNode(o.text)),t.onload=l(o),e?e.parentNode.insertBefore(t,e):n.head.appendChild(t)};export default async(d,n,{fetch:c}=globalThis)=>{const o=[],l=n?[].concat(n):[],t=[];return d.forEach(e=>l.push(c(e).then(a=>[a.clone().text(),a.blob()]).then(async a=>{const[s,i]=await Promise.all(a);o.push({text:s,blob:i})}))),await Promise.all(l),o.forEach(e=>t.push({then:a=>{const s=i=>h(globalThis,document,i,e,a);typeof document<"u"?e.blob.type.includes("text/css")?s("style"):s("script"):a(e)}})),await Promise.all(t)};
+/*! Fetch Inject | Copyright (C) VHS <[e-mail]> | @license Zlib */const h=function(d,a,o,n,c,e,t){e=a.createElement(o),o==="template"?(e.innerHTML=n.text,a.head.appendChild(e.content.cloneNode(!0)),c(n)):(t=a.getElementsByTagName(o)[0],e.appendChild(a.createTextNode(n.text)),e.onload=c(n),t?t.parentNode.insertBefore(e,t):a.head.appendChild(e))};export default async(d,a,{fetch:o}=globalThis)=>{const n=[],c=a?[].concat(a):[],e=[];return d.forEach(t=>c.push(o(t).then(l=>Promise.all([l.clone().text(),l.blob()])).then(async([l,i])=>{n.push({text:l,blob:i})}))),await Promise.all(c),n.forEach(t=>e.push({then:l=>{const[i,s="script"]=[["/html","template"],["/css","style"],["/javascript","script"]].filter(([p])=>t.blob.type.includes(p));typeof document<"u"?h(globalThis,document,s,t,l):l(t)}})),await Promise.all(e)};

package.json

 {
-  "name": "fetch-inject",
-  "version": "3.2.0",
-  "description": "Dynamically inline assets into the DOM using Fetch Injection.",
-  "author": "VHS <[e-mail]> (https://vhs.codeberg.page)",
-  "keywords": [
-    "fetch",
-    "import",
-    "async",
-    "promise",
-    "script"
-  ],
-  "homepage": "https://vhs.codeberg.page/code/fetch-inject/",
-  "repository": {
-    "type": "git",
-    "url": "https://codeberg.org/vhs/fetch-inject.git"
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.21.1",
-    "@playwright/test": "^1.19.2",
-    "esbuild": "^0.14.27",
-    "miniserve": "^0.2.1",
-    "prettier": "^2.5.1"
-  },
-  "files": [
-    "COPYING",
-    "docs",
-    "fetch-inject.min.js",
-    "fetch-inject.js",
-    "module.d.ts",
-    "README.md"
-  ],
-  "type": "module",
-  "browser": "fetch-inject.min.js",
-  "main": "fetch-inject.min.js",
-  "module": "fetch-inject.min.js",
-  "typings": "module.d.ts",
-  "license": "Zlib",
-  "scripts": {
-    "dev": "miniserve --index test-harness.html",
-    "build": "esbuild fetch-inject.js --minify --outfile=fetch-inject.min.js",
-    "package": "pnpm lint && pnpm build && pnpm test",
-    "test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test",
-    "lint": "prettier --ignore-path .gitignore --check **/*.{js,ts,html}",
-    "format": "prettier --ignore-path .gitignore --write **/*.{js,ts,html}",
-    "changeset": "changeset"
-  },
-  "readme": "# Fetch Inject \n\n[![Latest NPM version](https://flat.badgen.net/npm/v/fetch-inject)](https://npmjs.com/fetch-inject)\n[![Weekly downloads](https://flat.badgen.net/npm/dw/fetch-inject)](https://npmjs.com/fetch-inject)\n[![Compressed size](https://flat.badgen.net/bundlephobia/minzip/fetch-inject)](https://bundlephobia.com/package/fetch-inject)\n[![Hits per month](https://flat.badgen.net/jsdelivr/hits/npm/fetch-inject)](https://www.jsdelivr.com/package/npm/fetch-inject)\n[![License](https://flat.badgen.net/npm/license/fetch-inject)](https://codeberg.org/vhs/fetch-inject)\n\nDynamically inline assets into the DOM using [Fetch Injection](https://vhs.codeberg.page/post/managing-async-dependencies-javascript/).\n\nRead the [**Hacker News discussion**](https://news.ycombinator.com/item?id=14380191).\n\n## Overview 🌱\n\nFetch Inject implements a performance optimization technique called [Fetch Injection](https://vhs.codeberg.page/post/managing-async-dependencies-javascript/) for managing asynchronous JavaScript dependencies. It works for stylesheets too, and was designed to be extensible for any resource type that can be loaded using [`fetch`](https://devdocs.io/dom-fetch/).\n\nUse Fetch Inject to dynamically import external resources in parallel (even across the network), and load them into your page in a desired sequence, at a desired time and under desirable runtime conditions.\n\nBecause it uses the [Fetch API](http://devdocs.io/dom/fetch_api) Fetch Inject works alongside [Service Workers](http://devdocs.io/dom-service-workers/) for creating offline-first, installable progressive web applications and saves bandwidth on metered networks.\n\n## Playground 🛝\n\nTry [CodePen Playground](https://codepen.io/vhsdev/pen/QWOoJqG?editors=0012) while referencing the [Use Cases](#use-cases-) provided below.\n\n## Performance ⚡️\n\nThe two following network waterfall diagrams were produced using Fetch Inject to load the WordPress Twenty Seventeen theme for a performance talk given at WordCamp Ubud 2017. Stats captured over a 4G network using a mobile Wi-Fi hotspot. The left-hand side shows page speed with an unprimed browser cache and the other using Service Worker caching.\n\n<p>\n  <img src=\"docs/fetch-inject-unprimed-cache.webp\" title=\"Fetch Inject Unprimed Cache\" width=\"48%\" alt=\"Screenshot of network waterfall showing parallel resource loading using Fetch Inject\">\n  <img src=\"docs/fetch-inject-serviceworker-caching.webp\" width=\"48%\" title=\"Fetch Inject Service Worker Caching\" alt=\"Screenshot of network waterfall showing parallel resource loading using Fetch Inject with Service Workers\">\n</p>\n\nNotice with Service Workers (right) most latency occurs waiting for the initial response.\n\n## Installation 💾\n\n```sh\npnpm add fetch-inject # or yarn, npm i, etc.\n```\n\nFor asset pipelines requiring UMD, AMD or CJS check out version 2 and below.\n\n## Usage 🌀\n\n    Promise<Object[]> fetchInject( inputs[, promise[, options]] )\n\n### Parameters\n\n<dl>\n<dt>inputs<dd>Resources to fetch. Must be an <code>Array</code> of type <a target=\"devdocs\" href=\"http://devdocs.io/dom/usvstring\"><code>USVString</code></a> or <a target=\"devdocs\" href=\"http://devdocs.io/dom/request\"><code>Request</code></a> objects.\n<dt>promise<dd>Optional. <a target=\"devdocs\" href=\"http://devdocs.io/javascript/global_objects/promise\"><code>Promise</code></a> to await before injecting fetched resources.\n<dt>options<dd>Optional. Enables customization of Fetch implementation used.\n</dl>\n\n### Return value\n\nA [`Promise`](http://devdocs.io/javascript/global_objects/promise) that resolves to an `Array` of `Object`s. Each `Object` contains a list of resolved properties of the [`Response`](http://devdocs.io/dom/response) [`Body`](http://devdocs.io/dom/body) used by the module, e.g.\n\n```js\n[{\n  blob: { size: 44735, type: \"application/javascript\" },\n  text: \"/*!↵ * Bootstrap v4.0.0-alpha.5 ... */\"\n}, {\n  blob: { size: 31000, type: \"text/css\" },\n  text: \"/*!↵ * Font Awesome 4.7.0 ... */\"\n}]\n```\n\n## Use Cases 🎯\n\n[Use the Playground](#playground-) to try any of these on your own.\n\n### Preventing Script Blocking\n\n**Problem:**\nExternal scripts can lead to [jank](http://jankfree.org/) or [SPOF](https://www.stevesouders.com/blog/2010/06/01/frontend-spof/) if not handled correctly.\n\n**Solution:**\nLoad external scripts [without blocking](https://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/):\n\n```html\nfetchInject([\n  'https://cdn.jsdelivr.net/npm/flexsearch/dist/flexsearch.bundle.min.js'\n])\n```\n\nThis is a simple case to get you started. Don't worry, it gets better.\n\n### Loading Non-critical CSS\n\n**Problem:**\n[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) and [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) ding you for loading unnecessary styles on initial render.\n\n**Solution:**\nInline your critical CSS and load [non-critical styles](https://gist.github.com/scottjehl/87176715419617ae6994) asynchronously:\n\n```html\n<style>/*! bulma.io v0.4.0 ... */</style>\n<script type=\"module\">\nfetchInject([\n  '/css/non-critical.css',\n  'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css'\n])\n</script>\n```\n\nSee also [Suspense](#suspense) below.\n\n### Lazyloading Scripts\n\n**Problem:**\nYou want to load a script in response to a user interaction without affecting your page load times.\n\n**Solution:**\nCreate an event listener, respond to the event and then destroy the listener.\n\n```js\nconst el = document.querySelector('details summary')\nel.onclick = (evt) => {\n  fetchInject([\n    'https://cdn.jsdelivr.net/smooth-scroll/10.2.1/smooth-scroll.min.js'\n  ])\n  el.onclick = null\n}\n```\n\nHere we are loading the smooth scroll polyfill when a user opens a [details](http://devdocs.io/html/element/details) element, useful for displaying a collapsed and keyboard-friendly table of contents.\n\n### Responding to Asynchronous Scripts\n\n**Problem:**\nYou need to perform a synchronous operation immediately after an asynchronous script is loaded.\n\n**Solution:**\nYou could create a `script` element and use the [`async`](http://devdocs.io/html/attributes#async-attribute) and `onload` attributes. Or you could...\n\n```js\nfetchInject([\n  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'\n]).then(() => {\n  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)\n})\n```\n\n### Ordering Script Dependencies\n\n**Problem:**\nYou have several scripts that depend on one another and you want to load them all asynchronously, in parallel, without causing race conditions.\n\n**Solution:**\nPass `fetchInject` to itself as a second argument, forming a promise recursion:\n\n```js\nfetchInject([\n  'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js'\n], fetchInject([\n  'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',\n  'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js'\n]))\n```\n\n### Managing Asynchronous Dependencies\n\n**Problem:**\nYou want to load some dependencies which require some dependencies, which require some dependencies. You want it all in parallel, and you want it now.\n\n**Solution:**\nYou could scatter some `link`s into your document head, blocking initial page render, bloat your application bundle with scripts the user might not actually need. Or you could...\n\n```js\nconst tether = ['https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js']\nconst drop = ['https://cdn.jsdelivr.net/drop/1.4.2/js/drop.min.js']\nconst tooltip = [\n  'https://cdn.jsdelivr.net/tooltip/1.2.0/tooltip.min.js',\n  'https://cdn.jsdelivr.net/tooltip/1.2.0/tooltip-theme-arrows.css'\n]\nfetchInject(tooltip, fetchInject(drop, fetchInject(tether)))\n  .then(() => {\n    new Tooltip({\n      target: document.querySelector('h1'),\n      content: \"You moused over the first <b>H1</b>!\",\n      classes: 'tooltip-theme-arrows',\n      position: 'bottom center'\n    })\n  })\n```\n\nWhat about jQuery dropdown menus? Sure why not...\n\n```js\nfetchInject([\n  '/assets/js/main.js'\n], fetchInject([\n  '/assets/js/vendor/superfish.min.js'\n], fetchInject([\n  '/assets/js/vendor/jquery.transit.min.js',\n  '/assets/js/vendor/jquery.hoverIntent.js'\n], fetchInject([\n  '/assets/js/vendor/jquery.min.js'\n]))))\n```\n\n### Loading and Handling Composite Libraries\n\n**Problem:**\nYou want to deep link to gallery images using [PhotoSwipe](http://photoswipe.com/) without slowing down your page.\n\n**Solution:**\nDownload everything in parallel and instantiate when finished:\n\n```js\nconst container = document.querySelector('.pswp')\nconst items = JSON.parse({{ .Params.gallery.main | jsonify }})\nfetchInject([\n  '/css/photoswipe.css',\n  '/css/default-skin/default-skin.css',\n  '/js/photoswipe.min.js',\n  '/js/photoswipe-ui-default.min.js'\n]).then(() => {\n  const gallery = new PhotoSwipe(container, PhotoSwipeUI_Default, items)\n  gallery.init()\n})\n```\n\nThis example turns TOML into JSON, parses the object, downloads all of the PhotoSwipe goodies and then activates the PhotoSwipe gallery immediately when the interface is ready to be displayed.\n\n### Suspense\n\n**Problem:** You're experiencing a flash of unstyled content when lazy-loading page resources.\n\n**Solution:** Hide the content until your styles are ready:\n\n```js\nconst pageReady = new Promise((resolve, reject) => {\n  document.onreadystatechange = () => {\n    document.readyState === \"complete\" && resolve(document);\n  };\n});\n\nfetchInject([\n  'https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css'\n], pageReady).then(() => (document.body.style.visibility = 'visible'));\n```\n\n## SvelteKit\n\nAs of version 3.1.0 Fetch Inject supports use with SvelteKit. Use it inside your `load` functions to run Fetch requests client- and server-side. Or drop it inside your [hooks](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) in order to inject resources into the document like so:\n\n```js\nexport const handle: Handle = sequence(\n  async ({ event, resolve }) => {\n    const response = await resolve(event);\n    const [flexsearch] = await fetchInject([\n      'https://cdn.jsdelivr.net/npm/flexsearch/dist/flexsearch.light.min.js'\n    ]);\n\n    const body = await response.text();\n    return new Response(\n      body.replace('</body>', `<script>${flexsearch.text}</script></body>`),\n      response\n    );\n  },\n  /* snip */\n)\n```\n\nThe above will inject FlexSearch into every page on the site.\n\n### Custom Fetch\n\nFetch Inject 3.0.0 quietly introduced a new feature allowing control the Fetch implementation used. SvelteKit provides its own server-side Fetch implementation, which you can now override when fetching resources with Fetch Inject:\n\n```js\nfetchInject([\n  '/assets/scripts/crawlers.js',\n], Promise.resolve(), { fetch: globalThis.fetch })\n```\n\nThe above replaces the SvelteKit `fetch` implementation with native `fetch`.\n\n## Supported Browsers 🔮\n\nAll browsers with support for [Fetch](http://caniuse.com/#feat=fetch) and [Promises](http://caniuse.com/#search=promises).\n\n## Progressive Enhancement 🛟\n\nYou don't need to polyfill fetch for older browsers when they already know how to load external scripts. Give them a satisfactory fallback experience instead.\n\nIn your document `head` get the async loading started right away if the browser supports it:\n\n```js\n(function () {\n  if (!window.fetch) return;\n  fetchInject([\n    '/js/bootstrap.min.js'\n  ], fetchInject([\n    '/js/jquery.slim.min.js',\n    '/js/tether.min.js'\n  ]))\n})()\n```\n\nThen, before the close of the document `body` (if JS) or in the `head` (if CSS), provide the traditional experience:\n\n```js\n(function () {\n  if (window.fetch) return;\n  document.write('<script src=\"/js/bootstrap.min.js\"><\\/script>');\n  document.write('<script src=\"/js/jquery.slim.min.jss\"><\\/script>');\n  document.write('<script src=\"/js/tether.min.js\"><\\/script>');\n})()\n```\n\nThis is entirely optional, but a good practice unless you're going full hipster.\n\n## Related Projects 🙏🏼\n\n- [fetch](https://github.com/github/fetch) - Polyfill for `window.fetch`\n- [promise-polyfill](https://github.com/taylorhakes/promise-polyfill) - Polyfill for Promises\n- [es-module-loader](https://github.com/ModuleLoader/es-module-loader) - Polyfill for the ES Module Loader\n- [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) - A library for using `fetch` in Node\n- [Dynamic Imports](https://github.com/tc39/proposal-dynamic-import) - `import()` proposal for JavaScript\n- [load-stylesheets](https://github.com/brettz9/load-stylesheets) - Promise-based stylesheet-loading via `<link>` tags\n- [PreloadJS](https://github.com/CreateJS/PreloadJS) - Full-featured JS preloader using XHR2\n- [Gluebert](https://gluebert.com) - Helper for lazy-loading DOM elements using `import()`\n- [node-fetch](https://github.com/node-fetch/node-fetch) - A light-weight module that brings the Fetch API to Node.js\n\n## WordPress Plugin 🚀\n\nFetch Inject has been built into a WordPress plugin, enabling Fetch Injection to work within WordPress. [Initial testing](https://hackernoon.com/putting-wordpress-into-hyperdrive-4705450dffc2) shows Fetch Injection enables WordPress to load pages **300% faster** than conventional methods.\n\n![Hyperdrive WordPress Plugin](docs/hyperdrive-logo.webp)\n\nAccess the plugin from the [Hyperdrive repo](https://codeberg.org/vhs/hyperdrive) and see the related [Hacker Noon post](https://hackernoon.com/putting-wordpress-into-hyperdrive-4705450dffc2) for more details.\n\n## Rights ⚖️\n\nFetch Inject - Dynamically inline assets into the DOM using Fetch Injection.<br>\nCopyright (C) 2017-2019, 2022&nbsp;&nbsp;VHS &lt;[e-mail]&gt; (https://vhs.codeberg.page)\n\nThis software is provided 'as-is', without any express or implied\nwarranty.  In no event will the authors be held liable for any damages\narising from the use of this software.\n\nSee the file COPYING in the source for full license text.\n"
-}
+	"name": "fetch-inject",
+	"version": "3.3.0",
+	"description": "Dynamically inline assets into the DOM using Fetch Injection.",
+	"author": "VHS <[e-mail]> (https://vhs.codeberg.page)",
+	"keywords": [
+		"fetch",
+		"import",
+		"async",
+		"promise",
+		"script"
+	],
+	"homepage": "https://vhs.codeberg.page/code/fetch-inject/",
+	"repository": {
+		"type": "git",
+		"url": "https://codeberg.org/vhs/fetch-inject.git"
+	},
+	"scripts": {
+		"dev": "miniserve --index test-harness.html",
+		"build": "esbuild fetch-inject.js --minify --outfile=fetch-inject.min.js",
+		"package": "npm run lint && npm run build && npm run test",
+		"test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test",
+		"lint": "prettier --ignore-path .gitignore --check **/*.{js,ts,html}",
+		"format": "prettier --ignore-path .gitignore --write **/*.{js,ts,html}",
+		"changeset": "changeset"
+	},
+	"devDependencies": {
+		"@changesets/cli": "^2.27.2",
+		"@playwright/test": "^1.44.0",
+		"esbuild": "^0.14.27",
+		"miniserve": "^0.2.1",
+		"prettier": "^2.5.1"
+	},
+	"files": [
+		"COPYING",
+		"docs",
+		"fetch-inject.min.js",
+		"fetch-inject.js",
+		"module.d.ts",
+		"README.md"
+	],
+	"type": "module",
+	"browser": "fetch-inject.min.js",
+	"main": "fetch-inject.min.js",
+	"module": "fetch-inject.min.js",
+	"typings": "module.d.ts",
+	"license": "Zlib"
+}

README.md

@@ -82,3 +82,3 @@ # Fetch Inject
 
-```html
+```js
 fetchInject([
@@ -102,6 +102,8 @@ 'https://cdn.jsdelivr.net/npm/flexsearch/dist/flexsearch.bundle.min.js'
 <script type="module">
-fetchInject([
-  '/css/non-critical.css',
-  'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css'
-])
+  import fetchInject from 'https://www.jsdelivr.com/package/npm/fetch-inject'
+  
+  fetchInject([
+    '/css/non-critical.css',
+    'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css'
+  ])
 </script>
@@ -248,2 +250,37 @@ ```
 
+### A/B Testing
+
+**Problem:** You want to run A/B tests and track the winning experience.
+
+**Solution:** Dynamically import Fetch Inject, and display and report the winning experience.
+
+```html 
+<script type="module">
+  localStorage.setItem('experience', ['test-a.css', 'test-a.js']);
+  
+  const experience = localStorage.getItem('experience');
+  const analytics = 'analytics.min.js';
+
+  import('https://cdn.jsdelivr.net/npm/fetch-inject')
+    .then((module) => {
+      console.time('page-time');
+      module.default(experience.split(',').concat(analytics))
+        .then((injections) => {
+          analytics.track({
+            testGroup: experience, // "test-a.css,test-a.js"
+            waitTime: console.timeLog('page-time') // "0.231953125 ms"
+            extraData: injections // [ Blob {size: 7889, ...} ]
+          });
+          document.onclose = _ => analytics.track({
+            testGroup: experience,
+            pageTime: console.endTime('page-time') // "8.29296875 ms"
+          })
+        })
+        .catch((errors) => analytics.error(errors))
+    });
+</script>
+```
+
+Use alongside [Suspense](#suspense) for a winning combination.
+
 ## SvelteKit
@@ -250,0 +287,0 @@

No alert changes

Improved metrics

Lines of code

42

increased by7.69%

Number of lines in readme file

384

increased by10.66%

Worsened metrics

Total package byte prevSize

166411

decreased by-7.16%

No dependency changes