@belle-icon/component - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/belle-icon/belle-icon.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as r}from"./p-f3f414f0.js";(()=>{const r=import.meta.url,c={};return""!==r&&(c.resourcesUrl=new URL(".",r).href),o(c)})().then((o=>r([["p-236b4cc4",[[0,"be-icon",{name:[1],stroke:[2],size:[2],color:[1],cap:[1],join:[1]}]]]],o)));
+import{p as o,b as r}from"./p-d335fd7a.js";import{g as p}from"./p-b365204a.js";(()=>{const r=import.meta.url,p={};return""!==r&&(p.resourcesUrl=new URL(".",r).href),o(p)})().then((o=>(p(),r([["p-0471373c",[[0,"be-icon",{name:[1],stroke:[2],size:[2],color:[1],cap:[1],join:[1]}]]]],o))));

dist/cjs/be-icon.cjs.entry.js

@@ -5,71 +5,4 @@ 'use strict';
 
-const index = require('./index-7455e682.js');
+const store = require('./store-f7f70b50.js');
 
-class HttpBackend {
-  constructor() {
-    this.baseUrl = this.getBaseUrl();
-  }
-  getBaseUrl() {
-    const el = document.querySelector(`[${HttpBackend.URL_ATTR}]`);
-    if (el) {
-      return el.getAttribute(HttpBackend.URL_ATTR);
-    }
-    return 'https://unpkg.com/@belle-icon/icons/svg';
-  }
-  async fetchIcon(name) {
-    // TODO: temp disable cache
-    const cache = window.localStorage.getItem('belle:' + name);
-    if (cache)
-      return cache;
-    const [pack, key] = name.split(':');
-    const url = `${this.baseUrl}/${pack}/${key}.svg`;
-    const res = await fetch(url, {
-      method: 'GET',
-      mode: 'cors',
-      credentials: 'omit',
-    });
-    if (!res.ok)
-      return '';
-    const data = await res.text();
-    // Remove self-closing tag
-    const clean = data.replace(/<(([a-z]+) [^\/>]+)\/>/g, '<$1></$2>');
-    window.localStorage.setItem('belle:' + name, clean);
-    // TODO: cache invalidation
-    // TODO: cached icon cannot be displayed when offline
-    return clean;
-  }
-}
-HttpBackend.URL_ATTR = 'bi-src';
-const httpBackend = new HttpBackend();
-
-class Store {
-  constructor() {
-    var _a;
-    this.backend = (_a = window.biBackend) !== null && _a !== void 0 ? _a : httpBackend;
-    this.symbolKeySet = new Set();
-    this.clearExpiredElements();
-    this.$container = document.createElement('div');
-    this.$el = document.createElement('svg');
-    document.body.appendChild(this.$container);
-    this.$container.style.display = 'none';
-    this.$container.classList.add(Store.CLS_NAME);
-  }
-  clearExpiredElements() {
-    Array.from(document.getElementsByClassName(Store.CLS_NAME)).forEach(el => el.parentElement.removeChild(el));
-  }
-  async requestSymbol(name) {
-    if (this.symbolKeySet.has(name))
-      return;
-    this.symbolKeySet.add(name);
-    const iconText = await this.backend.fetchIcon(name);
-    const symbol = document.createElement('symbol');
-    symbol.id = name;
-    symbol.innerHTML = iconText;
-    this.$el.appendChild(symbol);
-    this.$container.innerHTML = this.$el.outerHTML;
-  }
-}
-Store.CLS_NAME = 'belle-icon-svg';
-const store = new Store();
-
 const belleIconCss = ".svg svg{width:100%;height:100%}";
@@ -79,3 +12,3 @@
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    store.registerInstance(this, hostRef);
     this.stroke = 2;
@@ -88,9 +21,9 @@ this.size = 24;
   async handleNameChange(newValue) {
-    await store.requestSymbol(newValue);
+    await store.store.requestSymbol(newValue);
   }
   componentWillLoad() {
-    store.requestSymbol(this.name);
+    store.store.requestSymbol(this.name);
   }
   render() {
-    return (index.h("div", { class: "svg", style: {
+    return (store.h("div", { class: "svg", style: {
         'width': this.size + 'px',
@@ -102,3 +35,3 @@ 'height': this.size + 'px',
         '--biw-0': this.stroke.toString(),
-      } }, index.h("svg", { viewBox: "0 0 64 64", xmlns: "http://www.w3.org/2000/svg" }, index.h("use", { href: `#${this.name}` }))));
+      } }, store.h("svg", { viewBox: "0 0 64 64", xmlns: "http://www.w3.org/2000/svg" }, store.h("use", { href: `#${this.name}` }))));
   }
@@ -105,0 +38,0 @@ static get watchers() { return {

dist/cjs/belle-icon.cjs.js

 'use strict';
 
-const index = require('./index-7455e682.js');
+const store = require('./store-f7f70b50.js');
+const appGlobals = require('./app-globals-5a9be6cc.js');
 
@@ -14,7 +15,8 @@ /*
     }
-    return index.promiseResolve(opts);
+    return store.promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["be-icon.cjs",[[0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]]]], options);
+  appGlobals.globalScripts();
+  return store.bootstrapLazy([["be-icon.cjs",[[0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,3 +5,4 @@ 'use strict';
 
-const index = require('./index-7455e682.js');
+const store = require('./store-f7f70b50.js');
+const appGlobals = require('./app-globals-5a9be6cc.js');
 
@@ -12,3 +13,3 @@ /*
 const patchEsm = () => {
-    return index.promiseResolve();
+    return store.promiseResolve();
 };
@@ -19,3 +20,4 @@
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["be-icon.cjs",[[0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]]]], options);
+  appGlobals.globalScripts();
+  return store.bootstrapLazy([["be-icon.cjs",[[0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]]]], options);
   });
@@ -22,0 +24,0 @@ };

dist/collection/collection-manifest.json

@@ -11,3 +11,4 @@ {
   "collections": [],
-  "bundles": []
+  "bundles": [],
+  "global": "global.js"
 }

dist/collection/utils/backend.js

@@ -1,2 +0,2 @@
-class HttpBackend {
+export class Backend {
   constructor() {
@@ -6,7 +6,6 @@ this.baseUrl = this.getBaseUrl();
   getBaseUrl() {
-    const el = document.querySelector(`[${HttpBackend.URL_ATTR}]`);
-    if (el) {
-      return el.getAttribute(HttpBackend.URL_ATTR);
-    }
-    return 'https://unpkg.com/@belle-icon/icons/svg';
+    const el = document.querySelector(`[${Backend.URL_ATTR}]`);
+    return el
+      ? el.getAttribute(Backend.URL_ATTR)
+      : 'https://unpkg.com/@belle-icon/icons/svg';
   }
@@ -36,3 +35,3 @@ async fetchIcon(name) {
 }
-HttpBackend.URL_ATTR = 'bi-src';
-export const httpBackend = new HttpBackend();
+Backend.URL_ATTR = 'bi-src';
+export const backend = new Backend();

dist/collection/utils/store.js

@@ -1,6 +0,5 @@
-import { httpBackend } from "./backend";
+import { backend as defaultBackend } from "./backend";
 class Store {
   constructor() {
-    var _a;
-    this.backend = (_a = window.biBackend) !== null && _a !== void 0 ? _a : httpBackend;
+    this.backend = defaultBackend;
     this.symbolKeySet = new Set();
@@ -7,0 +6,0 @@ this.clearExpiredElements();

dist/custom-elements/index.js

 import { h, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
-class HttpBackend {
+class Backend {
   constructor() {
@@ -9,7 +9,6 @@ this.baseUrl = this.getBaseUrl();
   getBaseUrl() {
-    const el = document.querySelector(`[${HttpBackend.URL_ATTR}]`);
-    if (el) {
-      return el.getAttribute(HttpBackend.URL_ATTR);
-    }
-    return 'https://unpkg.com/@belle-icon/icons/svg';
+    const el = document.querySelector(`[${Backend.URL_ATTR}]`);
+    return el
+      ? el.getAttribute(Backend.URL_ATTR)
+      : 'https://unpkg.com/@belle-icon/icons/svg';
   }
@@ -39,9 +38,8 @@ async fetchIcon(name) {
 }
-HttpBackend.URL_ATTR = 'bi-src';
-const httpBackend = new HttpBackend();
+Backend.URL_ATTR = 'bi-src';
+const backend = new Backend();
 
 class Store {
   constructor() {
-    var _a;
-    this.backend = (_a = window.biBackend) !== null && _a !== void 0 ? _a : httpBackend;
+    this.backend = backend;
     this.symbolKeySet = new Set();
@@ -73,2 +71,9 @@ this.clearExpiredElements();
 
+function appGlobalScript () {
+  globalThis.BelleBackend = Backend;
+  globalThis.belleStore = store;
+}
+
+const globalScripts = appGlobalScript;
+
 const belleIconCss = ".svg svg{width:100%;height:100%}";
@@ -108,2 +113,3 @@
 
+globalScripts();
 const BeIcon = /*@__PURE__*/proxyCustomElement(BelleIcon, [0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]);
@@ -110,0 +116,0 @@ const defineCustomElements = (opts) => {

dist/esm/be-icon.entry.js

@@ -1,70 +0,3 @@
-import { r as registerInstance, h } from './index-e69c5d53.js';
+import { r as registerInstance, s as store, h } from './store-f966636d.js';
 
-class HttpBackend {
-  constructor() {
-    this.baseUrl = this.getBaseUrl();
-  }
-  getBaseUrl() {
-    const el = document.querySelector(`[${HttpBackend.URL_ATTR}]`);
-    if (el) {
-      return el.getAttribute(HttpBackend.URL_ATTR);
-    }
-    return 'https://unpkg.com/@belle-icon/icons/svg';
-  }
-  async fetchIcon(name) {
-    // TODO: temp disable cache
-    const cache = window.localStorage.getItem('belle:' + name);
-    if (cache)
-      return cache;
-    const [pack, key] = name.split(':');
-    const url = `${this.baseUrl}/${pack}/${key}.svg`;
-    const res = await fetch(url, {
-      method: 'GET',
-      mode: 'cors',
-      credentials: 'omit',
-    });
-    if (!res.ok)
-      return '';
-    const data = await res.text();
-    // Remove self-closing tag
-    const clean = data.replace(/<(([a-z]+) [^\/>]+)\/>/g, '<$1></$2>');
-    window.localStorage.setItem('belle:' + name, clean);
-    // TODO: cache invalidation
-    // TODO: cached icon cannot be displayed when offline
-    return clean;
-  }
-}
-HttpBackend.URL_ATTR = 'bi-src';
-const httpBackend = new HttpBackend();
-
-class Store {
-  constructor() {
-    var _a;
-    this.backend = (_a = window.biBackend) !== null && _a !== void 0 ? _a : httpBackend;
-    this.symbolKeySet = new Set();
-    this.clearExpiredElements();
-    this.$container = document.createElement('div');
-    this.$el = document.createElement('svg');
-    document.body.appendChild(this.$container);
-    this.$container.style.display = 'none';
-    this.$container.classList.add(Store.CLS_NAME);
-  }
-  clearExpiredElements() {
-    Array.from(document.getElementsByClassName(Store.CLS_NAME)).forEach(el => el.parentElement.removeChild(el));
-  }
-  async requestSymbol(name) {
-    if (this.symbolKeySet.has(name))
-      return;
-    this.symbolKeySet.add(name);
-    const iconText = await this.backend.fetchIcon(name);
-    const symbol = document.createElement('symbol');
-    symbol.id = name;
-    symbol.innerHTML = iconText;
-    this.$el.appendChild(symbol);
-    this.$container.innerHTML = this.$el.outerHTML;
-  }
-}
-Store.CLS_NAME = 'belle-icon-svg';
-const store = new Store();
-
 const belleIconCss = ".svg svg{width:100%;height:100%}";
@@ -71,0 +4,0 @@

dist/esm/belle-icon.js

@@ -1,2 +0,3 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e69c5d53.js';
+import { p as promiseResolve, b as bootstrapLazy } from './store-f966636d.js';
+import { g as globalScripts } from './app-globals-917b6e24.js';
 
@@ -16,3 +17,4 @@ /*
 patchBrowser().then(options => {
+  globalScripts();
   return bootstrapLazy([["be-icon",[[0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]]]], options);
 });

dist/esm/loader.js

@@ -1,2 +0,3 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e69c5d53.js';
+import { p as promiseResolve, b as bootstrapLazy } from './store-f966636d.js';
+import { g as globalScripts } from './app-globals-917b6e24.js';
 
@@ -13,2 +14,3 @@ /*
   return patchEsm().then(() => {
+  globalScripts();
   return bootstrapLazy([["be-icon",[[0,"be-icon",{"name":[1],"stroke":[2],"size":[2],"color":[1],"cap":[1],"join":[1]}]]]], options);
@@ -15,0 +17,0 @@ });

dist/types/utils/backend.d.ts

@@ -1,5 +0,2 @@
-export declare type Backend = {
-  fetchIcon: (name: string) => Promise<string> | string;
-};
-declare class HttpBackend implements Backend {
+export declare class Backend {
   private static URL_ATTR;
@@ -11,3 +8,2 @@ private baseUrl;
 }
-export declare const httpBackend: HttpBackend;
-export {};
+export declare const backend: Backend;

package.json

 {
   "name": "@belle-icon/component",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

314878

increased by0.29%

Number of package files

50

increased by8.7%

Lines of code

5049

increased by0.52%

Number of medium supply chain risk alerts

7

decreased by-12.5%

No dependency changes