stencil-apexcharts - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

CHANGELOG.md

@@ -1,5 +0,19 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.0](https://github.com/apexcharts/stencil-apexcharts/compare/v1.1.1...v2.0.0) (2019-06-30)
+
+
+### Features
+
+* upgrade deps ([2429eeb](https://github.com/apexcharts/stencil-apexcharts/commit/2429eeb))
+
+
+### BREAKING CHANGES
+
+* Upgrading to stencil@one is a breaking change.
+
+
+
 ## [1.1.1](https://github.com/apexcharts/stencil-apexcharts/compare/v1.1.0...v1.1.1) (2019-04-05)
@@ -6,0 +20,0 @@

dist/apex.js

@@ -1,1 +0,27 @@
-!function(e,t,r,n,s,i,o,c,a,u,p,l,d,h){for(p=e.apex=e.apex||{},(l=t.createElement("style")).innerHTML="apex-chart{visibility:hidden}.hydrated{visibility:inherit}",l.setAttribute("data-styles",""),d=t.head.querySelector("meta[charset]"),t.head.insertBefore(l,d?d.nextSibling:t.head.firstChild),function(e,t,r){(e["s-apps"]=e["s-apps"]||[]).push("apex"),r.componentOnReady||(r.componentOnReady=function(){var t=this;function r(r){if(t.nodeName.indexOf("-")>0){for(var n=e["s-apps"],s=0,i=0;i<n.length;i++)if(e[n[i]].componentOnReady){if(e[n[i]].componentOnReady(t,r))return;s++}if(s<n.length)return void(e["s-cr"]=e["s-cr"]||[]).push([t,r])}r(null)}return e.Promise?new e.Promise(r):{then:r}})}(e,0,u),s=s||p.resourcesUrl,l=(d=t.querySelectorAll("script")).length-1;l>=0&&!(h=d[l]).src&&!h.hasAttribute("data-resources-url");l--);d=h.getAttribute("data-resources-url"),!s&&d&&(s=d),!s&&h.src&&(s=(d=h.src.split("/").slice(0,-1)).join("/")+(d.length?"/":"")+"apex/"),l=t.createElement("script"),function(e,t,r,n){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in r)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,l)?l.src=s+"apex.5t6yc0hb.js":(l.src=s+"apex.ltjeeqpm.js",l.setAttribute("type","module"),l.setAttribute("crossorigin",!0)),l.setAttribute("data-resources-url",s),l.setAttribute("data-namespace","apex"),t.head.appendChild(l)}(window,document,0,0,0,0,0,0,0,HTMLElement.prototype);
+
+(function(doc){
+  var scriptElm = doc.scripts[doc.scripts.length - 1];
+  var warn = ['[apex] Deprecated script, please remove: ' + scriptElm.outerHTML];
+
+  warn.push('To improve performance it is recommended to set the differential scripts in the head as follows:')
+
+  var parts = scriptElm.src.split('/');
+  parts.pop();
+  parts.push('apex');
+  var url = parts.join('/');
+
+  var scriptElm = doc.createElement('script');
+  scriptElm.setAttribute('type', 'module');
+  scriptElm.src = url + '/apex.esm.js';
+  doc.head.appendChild(scriptElm);
+  warn.push(scriptElm.outerHTML);
+
+  scriptElm = doc.createElement('script');
+  scriptElm.setAttribute('nomodule', '');
+  scriptElm.src = url + '/apex.js';
+  doc.head.appendChild(scriptElm);
+  warn.push(scriptElm.outerHTML);
+
+  console.warn(warn.join('\n'));
+
+})(document);

dist/collection/collection-manifest.json

 {
-  "components": [
-    {
-      "tag": "apex-chart",
-      "dependencies": [],
-      "componentClass": "chart",
-      "componentPath": "components/apex-chart/apex-chart.js",
-      "styles": {
-        "$": {
-          "stylePaths": [
-            "components/apex-chart/apex-chart.css"
-          ]
-        }
-      },
-      "props": [
-        {
-          "name": "height",
-          "type": "Any",
-          "attr": "height"
-        },
-        {
-          "name": "options",
-          "mutable": true,
-          "attr": "options",
-          "watch": [
-            "optionsChanged"
-          ]
-        },
-        {
-          "name": "series",
-          "mutable": true,
-          "attr": "series",
-          "watch": [
-            "seriesChanged"
-          ]
-        },
-        {
-          "name": "type",
-          "type": "String",
-          "attr": "type"
-        },
-        {
-          "name": "width",
-          "type": "Any",
-          "attr": "width"
-        }
-      ],
-      "states": [
-        {
-          "name": "chartObj"
-        }
-      ],
-      "methods": [
-        {
-          "name": "updateOptions"
-        }
-      ]
-    }
+  "entries": [
+    "components\\apex-chart\\apex-chart.js"
   ],
-  "collections": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "0.18.1",
-    "typescriptVersion": "3.3.3"
+    "version": "1.1.3",
+    "typescriptVersion": "3.5.2"
   },
+  "collections": [],
   "bundles": []
 }

dist/collection/components/apex-chart/apex-chart.js

@@ -0,1 +1,2 @@
+import { h } from '@stencil/core';
 import ApexCharts from 'apexcharts';
@@ -21,2 +22,5 @@ const config = (options, type, width, height, series) => {
     constructor() {
+        /**
+         * Internal ApexCharts instance
+         */
         this.chartObj = null;
@@ -34,2 +38,8 @@ }
     }
+    /**
+     * Updates the configuration object. The new config object is merged with the existing config object preserving the existing configuration.
+     * @param newOptions The configuration object to merge on the existing one
+     * @param redrawPaths When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths
+     * @param animate Should the chart animate on re-rendering
+     */
     async updateOptions(newOptions, redrawPaths, animate) {
@@ -53,35 +63,190 @@ return this.chartObj.updateOptions(newOptions, redrawPaths, animate);
     static get is() { return "apex-chart"; }
+    static get originalStyleUrls() { return {
+        "$": ["apex-chart.css"]
+    }; }
+    static get styleUrls() { return {
+        "$": ["apex-chart.css"]
+    }; }
     static get properties() { return {
-        "chartObj": {
-            "state": true
+        "type": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "ApexChartType",
+                "resolved": "\"area\" | \"bar\" | \"bubble\" | \"candlestick\" | \"donut\" | \"heatmap\" | \"histogram\" | \"line\" | \"pie\" | \"radar\" | \"radialBar\" | \"rangeBar\" | \"scatter\"",
+                "references": {
+                    "ApexChartType": {
+                        "location": "import",
+                        "path": "./apex-charts"
+                    }
+                }
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [{
+                        "text": "https://apexcharts.com/docs/options/chart/type/",
+                        "name": "see"
+                    }],
+                "text": "(optional) Type"
+            },
+            "attribute": "type",
+            "reflect": false
         },
+        "width": {
+            "type": "any",
+            "mutable": false,
+            "complexType": {
+                "original": "ApexChartWidth",
+                "resolved": "number | string",
+                "references": {
+                    "ApexChartWidth": {
+                        "location": "import",
+                        "path": "./apex-charts"
+                    }
+                }
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [{
+                        "text": "https://apexcharts.com/docs/options/chart/width/",
+                        "name": "see"
+                    }],
+                "text": "(optional) Width"
+            },
+            "attribute": "width",
+            "reflect": false
+        },
         "height": {
-            "type": "Any",
-            "attr": "height"
+            "type": "any",
+            "mutable": false,
+            "complexType": {
+                "original": "ApexChartHeight",
+                "resolved": "number | string",
+                "references": {
+                    "ApexChartHeight": {
+                        "location": "import",
+                        "path": "./apex-charts"
+                    }
+                }
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [{
+                        "text": "https://apexcharts.com/docs/options/chart/height/",
+                        "name": "see"
+                    }],
+                "text": "(optional) Height"
+            },
+            "attribute": "height",
+            "reflect": false
         },
         "options": {
-            "type": "Any",
-            "attr": "options",
+            "type": "unknown",
             "mutable": true,
-            "watchCallbacks": ["optionsChanged"]
+            "complexType": {
+                "original": "ApexOptions",
+                "resolved": "ApexOptions",
+                "references": {
+                    "ApexOptions": {
+                        "location": "import",
+                        "path": "apexcharts"
+                    }
+                }
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [{
+                        "text": "https://apexcharts.com/docs/options/",
+                        "name": "see"
+                    }],
+                "text": "(optional) Options"
+            }
         },
         "series": {
-            "type": "Any",
-            "attr": "series",
+            "type": "unknown",
             "mutable": true,
-            "watchCallbacks": ["seriesChanged"]
-        },
-        "type": {
-            "type": String,
-            "attr": "type"
-        },
+            "complexType": {
+                "original": "ApexOptionsSeries",
+                "resolved": "number[] | { name: string; data: number[] | { x: any; y: any; }[] | [number, number][] | [number, number[]][]; }[]",
+                "references": {
+                    "ApexOptionsSeries": {
+                        "location": "import",
+                        "path": "./apex-charts"
+                    }
+                }
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [{
+                        "text": "https://apexcharts.com/docs/options/series/",
+                        "name": "see"
+                    }],
+                "text": "(optional) Series"
+            }
+        }
+    }; }
+    static get states() { return {
+        "chartObj": {}
+    }; }
+    static get methods() { return {
         "updateOptions": {
-            "method": true
-        },
-        "width": {
-            "type": "Any",
-            "attr": "width"
+            "complexType": {
+                "signature": "(newOptions: ApexCharts.ApexOptions, redrawPaths?: boolean, animate?: boolean) => Promise<void>",
+                "parameters": [{
+                        "tags": [{
+                                "text": "newOptions The configuration object to merge on the existing one",
+                                "name": "param"
+                            }],
+                        "text": "The configuration object to merge on the existing one"
+                    }, {
+                        "tags": [{
+                                "text": "redrawPaths When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths",
+                                "name": "param"
+                            }],
+                        "text": "When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths"
+                    }, {
+                        "tags": [{
+                                "text": "animate Should the chart animate on re-rendering",
+                                "name": "param"
+                            }],
+                        "text": "Should the chart animate on re-rendering"
+                    }],
+                "references": {
+                    "Promise": {
+                        "location": "global"
+                    },
+                    "ApexOptions": {
+                        "location": "import",
+                        "path": "apexcharts"
+                    }
+                },
+                "return": "Promise<void>"
+            },
+            "docs": {
+                "text": "Updates the configuration object. The new config object is merged with the existing config object preserving the existing configuration.",
+                "tags": [{
+                        "name": "param",
+                        "text": "newOptions The configuration object to merge on the existing one"
+                    }, {
+                        "name": "param",
+                        "text": "redrawPaths When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths"
+                    }, {
+                        "name": "param",
+                        "text": "animate Should the chart animate on re-rendering"
+                    }]
+            }
         }
     }; }
-    static get style() { return "/**style-placeholder:apex-chart:**/"; }
+    static get watchers() { return [{
+            "propName": "options",
+            "methodName": "optionsChanged"
+        }, {
+            "propName": "series",
+            "methodName": "seriesChanged"
+        }]; }
 }

dist/index.js

@@ -1,2 +0,1 @@
-// apex: CommonJS Main
-module.exports = require('../esm/index.js');
+module.exports = require('./cjs/index.cjs.js');

dist/loader/index.cjs.js

@@ -1,1 +0,3 @@
-module.exports = require('../cjs/es5/apex.define.js');
+
+module.exports = require('../cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

dist/loader/index.d.ts

@@ -1,1 +0,12 @@
-export declare function defineCustomElements(win: any, opts?: any): Promise<void>;
+
+export * from '../types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;

dist/loader/package.json

 {
-  "name": "loader",
+  "name": "apex-loader",
   "typings": "./index.d.ts",
-  "module": "./index.js",
+  "module": "./index.mjs",
   "main": "./index.cjs.js",
-  "jsnext:main": "./index.es2017.js",
-  "es2015": "./index.es2017.js",
-  "es2017": "./index.es2017.js"
+  "node:main": "./node-main.js",
+  "jsnext:main": "./index.es2017.mjs",
+  "es2015": "./index.es2017.mjs",
+  "es2017": "./index.es2017.mjs"
 }

dist/types/components.d.ts

@@ -8,9 +8,4 @@ /* tslint:disable */
 
-import './stencil.core';
-
-
+import { HTMLStencilElement, JSXBase } from './stencil.core';
 import {
-  ApexOptions,
-} from 'apexcharts';
-import {
   ApexChartHeight,
@@ -21,6 +16,7 @@ ApexChartType,
 } from './components/apex-chart/apex-charts';
+import {
+  ApexOptions,
+} from 'apexcharts';
 
-
 export namespace Components {
-
   interface ApexChart {
@@ -52,3 +48,19 @@ /**
   }
-  interface ApexChartAttributes extends StencilHTMLAttributes {
+}
+
+declare global {
+
+
+  interface HTMLApexChartElement extends Components.ApexChart, HTMLStencilElement {}
+  var HTMLApexChartElement: {
+    prototype: HTMLApexChartElement;
+    new (): HTMLApexChartElement;
+  };
+  interface HTMLElementTagNameMap {
+    'apex-chart': HTMLApexChartElement;
+  }
+}
+
+declare namespace LocalJSX {
+  interface ApexChart extends JSXBase.HTMLAttributes<HTMLApexChartElement> {
     /**
@@ -75,29 +87,17 @@ * (optional) Height
   }
-}
 
-declare global {
-  interface StencilElementInterfaces {
-    'ApexChart': Components.ApexChart;
+  interface IntrinsicElements {
+    'apex-chart': ApexChart;
   }
+}
 
-  interface StencilIntrinsicElements {
-    'apex-chart': Components.ApexChartAttributes;
-  }
+export { LocalJSX as JSX };
 
 
-  interface HTMLApexChartElement extends Components.ApexChart, HTMLStencilElement {}
-  var HTMLApexChartElement: {
-    prototype: HTMLApexChartElement;
-    new (): HTMLApexChartElement;
-  };
-
-  interface HTMLElementTagNameMap {
-    'apex-chart': HTMLApexChartElement
+declare module "@stencil/core" {
+  export namespace JSX {
+    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
   }
+}
 
-  interface ElementTagNameMap {
-    'apex-chart': HTMLApexChartElement;
-  }
 
-
-}

dist/types/components/apex-chart/apex-chart.d.ts

@@ -1,2 +0,1 @@
-import '../../stencil.core';
 import ApexCharts from 'apexcharts';
@@ -47,3 +46,3 @@ import { ApexOptions } from 'apexcharts';
     componentDidUnload(): void;
-    render(): JSX.Element;
+    render(): any;
 }

dist/types/stencil.core.d.ts

@@ -64,3 +64,9 @@ /**
 
-export interface ComponentInstance {
+export interface ComponentInterface {
+  connectedCallback?: () => void;
+  disconnectedCallback?: () => void;
+
+  componentWillRender?: () => Promise<void> | void;
+  componentDidRender?: () => void;
+
   /**
@@ -108,20 +114,4 @@ * The component is about to load and it has not
 
-  /**
-   * The component did unload and the element
-   * will be destroyed.
-   */
-  componentDidUnload?: () => void;
-
   render?: () => any;
 
-  /**
-   * Used to dynamically set host element attributes.
-   * Should be placed directly above render()
-   */
-  hostData?: () => {
-    class?: {[className: string]: boolean};
-    style?: any;
-    [attrName: string]: any;
-  };
-
   [memberName: string]: any;
@@ -138,6 +128,2 @@ }
 
-export interface EventListenerEnable {
-  (instance: any, eventName: string, enabled: boolean, attachTo?: string|Element, passive?: boolean): void;
-}
-
 export interface QueueApi {
@@ -155,137 +141,191 @@ tick: (cb: RafCallback) => void;
 
-/**
- * This file gets copied to all distributions of stencil component collections.
- * - no imports
- */
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  forceUpdate(): void;
+}
 
-declare global {
-  interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
-    forceUpdate(): void;
-  }
-  interface StencilHTMLAttributes extends JSXElements.HTMLAttributes {}
-  interface StencilIntrinsicElements extends JSXElements.DefaultIntrinsicElements {}
-  interface StencilElementInterfaces {}
-  interface StencilGlobalHTMLAttributes {}
+
+declare namespace LocalJSX {
+  export interface Element {}
+  export interface IntrinsicElements {}
 }
+export { LocalJSX as JSX };
 
-export namespace JSXElements {
-  export interface DefaultIntrinsicElements {
+export namespace JSXBase {
+  export interface IntrinsicElements {
     // Stencil elements
-    slot: JSXElements.SlotAttributes;
+    slot: JSXBase.SlotAttributes;
 
     // HTML
-    a: JSXElements.AnchorHTMLAttributes<HTMLAnchorElement>;
-    abbr: JSXElements.HTMLAttributes;
-    address: JSXElements.HTMLAttributes;
-    area: JSXElements.AreaHTMLAttributes<HTMLAreaElement>;
-    article: JSXElements.HTMLAttributes;
-    aside: JSXElements.HTMLAttributes;
-    audio: JSXElements.AudioHTMLAttributes<HTMLAudioElement>;
-    b: JSXElements.HTMLAttributes;
-    base: JSXElements.BaseHTMLAttributes<HTMLBaseElement>;
-    bdi: JSXElements.HTMLAttributes;
-    bdo: JSXElements.HTMLAttributes;
-    big: JSXElements.HTMLAttributes;
-    blockquote: JSXElements.BlockquoteHTMLAttributes<HTMLQuoteElement>;
-    body: JSXElements.HTMLAttributes<HTMLBodyElement>;
-    br: JSXElements.HTMLAttributes<HTMLBRElement>;
-    button: JSXElements.ButtonHTMLAttributes<HTMLButtonElement>;
-    canvas: JSXElements.CanvasHTMLAttributes<HTMLCanvasElement>;
-    caption: JSXElements.HTMLAttributes<HTMLTableCaptionElement>;
-    cite: JSXElements.HTMLAttributes;
-    code: JSXElements.HTMLAttributes;
-    col: JSXElements.ColHTMLAttributes<HTMLTableColElement>;
-    colgroup: JSXElements.ColgroupHTMLAttributes<HTMLTableColElement>;
-    data: JSXElements.HTMLAttributes<HTMLDataElement>;
-    datalist: JSXElements.HTMLAttributes<HTMLDataListElement>;
-    dd: JSXElements.HTMLAttributes;
-    del: JSXElements.DelHTMLAttributes<HTMLModElement>;
-    details: JSXElements.DetailsHTMLAttributes<HTMLElement>;
-    dfn: JSXElements.HTMLAttributes;
-    dialog: JSXElements.DialogHTMLAttributes<HTMLDialogElement>;
-    div: JSXElements.HTMLAttributes<HTMLDivElement>;
-    dl: JSXElements.HTMLAttributes<HTMLDListElement>;
-    dt: JSXElements.HTMLAttributes;
-    em: JSXElements.HTMLAttributes;
-    embed: JSXElements.EmbedHTMLAttributes<HTMLEmbedElement>;
-    fieldset: JSXElements.FieldsetHTMLAttributes<HTMLFieldSetElement>;
-    figcaption: JSXElements.HTMLAttributes;
-    figure: JSXElements.HTMLAttributes;
-    footer: JSXElements.HTMLAttributes;
-    form: JSXElements.FormHTMLAttributes<HTMLFormElement>;
-    h1: JSXElements.HTMLAttributes<HTMLHeadingElement>;
-    h2: JSXElements.HTMLAttributes<HTMLHeadingElement>;
-    h3: JSXElements.HTMLAttributes<HTMLHeadingElement>;
-    h4: JSXElements.HTMLAttributes<HTMLHeadingElement>;
-    h5: JSXElements.HTMLAttributes<HTMLHeadingElement>;
-    h6: JSXElements.HTMLAttributes<HTMLHeadingElement>;
-    head: JSXElements.HTMLAttributes<HTMLHeadElement>;
-    header: JSXElements.HTMLAttributes;
-    hgroup: JSXElements.HTMLAttributes;
-    hr: JSXElements.HTMLAttributes<HTMLHRElement>;
-    html: JSXElements.HTMLAttributes<HTMLHtmlElement>;
-    i: JSXElements.HTMLAttributes;
-    iframe: JSXElements.IframeHTMLAttributes<HTMLIFrameElement>;
-    img: JSXElements.ImgHTMLAttributes<HTMLImageElement>;
-    input: JSXElements.InputHTMLAttributes<HTMLInputElement>;
-    ins: JSXElements.InsHTMLAttributes<HTMLModElement>;
-    kbd: JSXElements.HTMLAttributes;
-    keygen: JSXElements.KeygenHTMLAttributes<HTMLElement>;
-    label: JSXElements.LabelHTMLAttributes<HTMLLabelElement>;
-    legend: JSXElements.HTMLAttributes<HTMLLegendElement>;
-    li: JSXElements.LiHTMLAttributes<HTMLLIElement>;
-    link: JSXElements.LinkHTMLAttributes<HTMLLinkElement>;
-    main: JSXElements.HTMLAttributes;
-    map: JSXElements.MapHTMLAttributes<HTMLMapElement>;
-    mark: JSXElements.HTMLAttributes;
-    menu: JSXElements.MenuHTMLAttributes<HTMLMenuElement>;
-    menuitem: JSXElements.HTMLAttributes;
-    meta: JSXElements.MetaHTMLAttributes<HTMLMetaElement>;
-    meter: JSXElements.MeterHTMLAttributes<HTMLMeterElement>;
-    nav: JSXElements.HTMLAttributes;
-    noscript: JSXElements.HTMLAttributes;
-    object: JSXElements.ObjectHTMLAttributes<HTMLObjectElement>;
-    ol: JSXElements.OlHTMLAttributes<HTMLOListElement>;
-    optgroup: JSXElements.OptgroupHTMLAttributes<HTMLOptGroupElement>;
-    option: JSXElements.OptionHTMLAttributes<HTMLOptionElement>;
-    output: JSXElements.OutputHTMLAttributes<HTMLOutputElement>;
-    p: JSXElements.HTMLAttributes<HTMLParagraphElement>;
-    param: JSXElements.ParamHTMLAttributes<HTMLParamElement>;
-    picture: JSXElements.HTMLAttributes<HTMLPictureElement>;
-    pre: JSXElements.HTMLAttributes<HTMLPreElement>;
-    progress: JSXElements.ProgressHTMLAttributes<HTMLProgressElement>;
-    q: JSXElements.QuoteHTMLAttributes<HTMLQuoteElement>;
-    rp: JSXElements.HTMLAttributes;
-    rt: JSXElements.HTMLAttributes;
-    ruby: JSXElements.HTMLAttributes;
-    s: JSXElements.HTMLAttributes;
-    samp: JSXElements.HTMLAttributes;
-    script: JSXElements.ScriptHTMLAttributes<HTMLScriptElement>;
-    section: JSXElements.HTMLAttributes;
-    select: JSXElements.SelectHTMLAttributes<HTMLSelectElement>;
-    small: JSXElements.HTMLAttributes;
-    source: JSXElements.SourceHTMLAttributes<HTMLSourceElement>;
-    span: JSXElements.HTMLAttributes<HTMLSpanElement>;
-    strong: JSXElements.HTMLAttributes;
-    style: JSXElements.StyleHTMLAttributes<HTMLStyleElement>;
-    sub: JSXElements.HTMLAttributes;
-    summary: JSXElements.HTMLAttributes;
-    sup: JSXElements.HTMLAttributes;
-    table: JSXElements.TableHTMLAttributes<HTMLTableElement>;
-    tbody: JSXElements.HTMLAttributes<HTMLTableSectionElement>;
-    td: JSXElements.TdHTMLAttributes<HTMLTableDataCellElement>;
-    textarea: JSXElements.TextareaHTMLAttributes<HTMLTextAreaElement>;
-    tfoot: JSXElements.HTMLAttributes<HTMLTableSectionElement>;
-    th: JSXElements.ThHTMLAttributes<HTMLTableHeaderCellElement>;
-    thead: JSXElements.HTMLAttributes<HTMLTableSectionElement>;
-    time: JSXElements.TimeHTMLAttributes<HTMLTimeElement>;
-    title: JSXElements.HTMLAttributes<HTMLTitleElement>;
-    tr: JSXElements.HTMLAttributes<HTMLTableRowElement>;
-    track: JSXElements.TrackHTMLAttributes<HTMLTrackElement>;
-    u: JSXElements.HTMLAttributes;
-    ul: JSXElements.HTMLAttributes<HTMLUListElement>;
-    'var': JSXElements.HTMLAttributes;
-    video: JSXElements.VideoHTMLAttributes<HTMLVideoElement>;
-    wbr: JSXElements.HTMLAttributes;
+    a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
+    abbr: JSXBase.HTMLAttributes;
+    address: JSXBase.HTMLAttributes;
+    area: JSXBase.AreaHTMLAttributes<HTMLAreaElement>;
+    article: JSXBase.HTMLAttributes;
+    aside: JSXBase.HTMLAttributes;
+    audio: JSXBase.AudioHTMLAttributes<HTMLAudioElement>;
+    b: JSXBase.HTMLAttributes;
+    base: JSXBase.BaseHTMLAttributes<HTMLBaseElement>;
+    bdi: JSXBase.HTMLAttributes;
+    bdo: JSXBase.HTMLAttributes;
+    big: JSXBase.HTMLAttributes;
+    blockquote: JSXBase.BlockquoteHTMLAttributes<HTMLQuoteElement>;
+    body: JSXBase.HTMLAttributes<HTMLBodyElement>;
+    br: JSXBase.HTMLAttributes<HTMLBRElement>;
+    button: JSXBase.ButtonHTMLAttributes<HTMLButtonElement>;
+    canvas: JSXBase.CanvasHTMLAttributes<HTMLCanvasElement>;
+    caption: JSXBase.HTMLAttributes<HTMLTableCaptionElement>;
+    cite: JSXBase.HTMLAttributes;
+    code: JSXBase.HTMLAttributes;
+    col: JSXBase.ColHTMLAttributes<HTMLTableColElement>;
+    colgroup: JSXBase.ColgroupHTMLAttributes<HTMLTableColElement>;
+    data: JSXBase.HTMLAttributes<HTMLDataElement>;
+    datalist: JSXBase.HTMLAttributes<HTMLDataListElement>;
+    dd: JSXBase.HTMLAttributes;
+    del: JSXBase.DelHTMLAttributes<HTMLModElement>;
+    details: JSXBase.DetailsHTMLAttributes<HTMLElement>;
+    dfn: JSXBase.HTMLAttributes;
+    dialog: JSXBase.DialogHTMLAttributes<HTMLDialogElement>;
+    div: JSXBase.HTMLAttributes<HTMLDivElement>;
+    dl: JSXBase.HTMLAttributes<HTMLDListElement>;
+    dt: JSXBase.HTMLAttributes;
+    em: JSXBase.HTMLAttributes;
+    embed: JSXBase.EmbedHTMLAttributes<HTMLEmbedElement>;
+    fieldset: JSXBase.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+    figcaption: JSXBase.HTMLAttributes;
+    figure: JSXBase.HTMLAttributes;
+    footer: JSXBase.HTMLAttributes;
+    form: JSXBase.FormHTMLAttributes<HTMLFormElement>;
+    h1: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h2: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h3: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h4: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h5: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    h6: JSXBase.HTMLAttributes<HTMLHeadingElement>;
+    head: JSXBase.HTMLAttributes<HTMLHeadElement>;
+    header: JSXBase.HTMLAttributes;
+    hgroup: JSXBase.HTMLAttributes;
+    hr: JSXBase.HTMLAttributes<HTMLHRElement>;
+    html: JSXBase.HTMLAttributes<HTMLHtmlElement>;
+    i: JSXBase.HTMLAttributes;
+    iframe: JSXBase.IframeHTMLAttributes<HTMLIFrameElement>;
+    img: JSXBase.ImgHTMLAttributes<HTMLImageElement>;
+    input: JSXBase.InputHTMLAttributes<HTMLInputElement>;
+    ins: JSXBase.InsHTMLAttributes<HTMLModElement>;
+    kbd: JSXBase.HTMLAttributes;
+    keygen: JSXBase.KeygenHTMLAttributes<HTMLElement>;
+    label: JSXBase.LabelHTMLAttributes<HTMLLabelElement>;
+    legend: JSXBase.HTMLAttributes<HTMLLegendElement>;
+    li: JSXBase.LiHTMLAttributes<HTMLLIElement>;
+    link: JSXBase.LinkHTMLAttributes<HTMLLinkElement>;
+    main: JSXBase.HTMLAttributes;
+    map: JSXBase.MapHTMLAttributes<HTMLMapElement>;
+    mark: JSXBase.HTMLAttributes;
+    menu: JSXBase.MenuHTMLAttributes<HTMLMenuElement>;
+    menuitem: JSXBase.HTMLAttributes;
+    meta: JSXBase.MetaHTMLAttributes<HTMLMetaElement>;
+    meter: JSXBase.MeterHTMLAttributes<HTMLMeterElement>;
+    nav: JSXBase.HTMLAttributes;
+    noscript: JSXBase.HTMLAttributes;
+    object: JSXBase.ObjectHTMLAttributes<HTMLObjectElement>;
+    ol: JSXBase.OlHTMLAttributes<HTMLOListElement>;
+    optgroup: JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>;
+    option: JSXBase.OptionHTMLAttributes<HTMLOptionElement>;
+    output: JSXBase.OutputHTMLAttributes<HTMLOutputElement>;
+    p: JSXBase.HTMLAttributes<HTMLParagraphElement>;
+    param: JSXBase.ParamHTMLAttributes<HTMLParamElement>;
+    picture: JSXBase.HTMLAttributes<HTMLPictureElement>;
+    pre: JSXBase.HTMLAttributes<HTMLPreElement>;
+    progress: JSXBase.ProgressHTMLAttributes<HTMLProgressElement>;
+    q: JSXBase.QuoteHTMLAttributes<HTMLQuoteElement>;
+    rp: JSXBase.HTMLAttributes;
+    rt: JSXBase.HTMLAttributes;
+    ruby: JSXBase.HTMLAttributes;
+    s: JSXBase.HTMLAttributes;
+    samp: JSXBase.HTMLAttributes;
+    script: JSXBase.ScriptHTMLAttributes<HTMLScriptElement>;
+    section: JSXBase.HTMLAttributes;
+    select: JSXBase.SelectHTMLAttributes<HTMLSelectElement>;
+    small: JSXBase.HTMLAttributes;
+    source: JSXBase.SourceHTMLAttributes<HTMLSourceElement>;
+    span: JSXBase.HTMLAttributes<HTMLSpanElement>;
+    strong: JSXBase.HTMLAttributes;
+    style: JSXBase.StyleHTMLAttributes<HTMLStyleElement>;
+    sub: JSXBase.HTMLAttributes;
+    summary: JSXBase.HTMLAttributes;
+    sup: JSXBase.HTMLAttributes;
+    table: JSXBase.TableHTMLAttributes<HTMLTableElement>;
+    tbody: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+    td: JSXBase.TdHTMLAttributes<HTMLTableDataCellElement>;
+    textarea: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    tfoot: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+    th: JSXBase.ThHTMLAttributes<HTMLTableHeaderCellElement>;
+    thead: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
+    time: JSXBase.TimeHTMLAttributes<HTMLTimeElement>;
+    title: JSXBase.HTMLAttributes<HTMLTitleElement>;
+    tr: JSXBase.HTMLAttributes<HTMLTableRowElement>;
+    track: JSXBase.TrackHTMLAttributes<HTMLTrackElement>;
+    u: JSXBase.HTMLAttributes;
+    ul: JSXBase.HTMLAttributes<HTMLUListElement>;
+    'var': JSXBase.HTMLAttributes;
+    video: JSXBase.VideoHTMLAttributes<HTMLVideoElement>;
+    wbr: JSXBase.HTMLAttributes;
+
+
+    // SVG
+    animate: JSXBase.SVGAttributes;
+    circle: JSXBase.SVGAttributes;
+    clipPath: JSXBase.SVGAttributes;
+    defs: JSXBase.SVGAttributes;
+    desc: JSXBase.SVGAttributes;
+    ellipse: JSXBase.SVGAttributes;
+    feBlend: JSXBase.SVGAttributes;
+    feColorMatrix: JSXBase.SVGAttributes;
+    feComponentTransfer: JSXBase.SVGAttributes;
+    feComposite: JSXBase.SVGAttributes;
+    feConvolveMatrix: JSXBase.SVGAttributes;
+    feDiffuseLighting: JSXBase.SVGAttributes;
+    feDisplacementMap: JSXBase.SVGAttributes;
+    feDistantLight: JSXBase.SVGAttributes;
+    feDropShadow: JSXBase.SVGAttributes;
+    feFlood: JSXBase.SVGAttributes;
+    feFuncA: JSXBase.SVGAttributes;
+    feFuncB: JSXBase.SVGAttributes;
+    feFuncG: JSXBase.SVGAttributes;
+    feFuncR: JSXBase.SVGAttributes;
+    feGaussianBlur: JSXBase.SVGAttributes;
+    feImage: JSXBase.SVGAttributes;
+    feMerge: JSXBase.SVGAttributes;
+    feMergeNode: JSXBase.SVGAttributes;
+    feMorphology: JSXBase.SVGAttributes;
+    feOffset: JSXBase.SVGAttributes;
+    fePointLight: JSXBase.SVGAttributes;
+    feSpecularLighting: JSXBase.SVGAttributes;
+    feSpotLight: JSXBase.SVGAttributes;
+    feTile: JSXBase.SVGAttributes;
+    feTurbulence: JSXBase.SVGAttributes;
+    filter: JSXBase.SVGAttributes;
+    foreignObject: JSXBase.SVGAttributes;
+    g: JSXBase.SVGAttributes;
+    image: JSXBase.SVGAttributes;
+    line: JSXBase.SVGAttributes;
+    linearGradient: JSXBase.SVGAttributes;
+    marker: JSXBase.SVGAttributes;
+    mask: JSXBase.SVGAttributes;
+    metadata: JSXBase.SVGAttributes;
+    path: JSXBase.SVGAttributes;
+    pattern: JSXBase.SVGAttributes;
+    polygon: JSXBase.SVGAttributes;
+    polyline: JSXBase.SVGAttributes;
+    radialGradient: JSXBase.SVGAttributes;
+    rect: JSXBase.SVGAttributes;
+    stop: JSXBase.SVGAttributes;
+    svg: JSXBase.SVGAttributes;
+    switch: JSXBase.SVGAttributes;
+    symbol: JSXBase.SVGAttributes;
+    text: JSXBase.SVGAttributes;
+    textPath: JSXBase.SVGAttributes;
+    tspan: JSXBase.SVGAttributes;
+    use: JSXBase.SVGAttributes;
+    view: JSXBase.SVGAttributes;
   }
@@ -375,2 +415,3 @@
   export interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+    onClose?: (event: Event) => void;
     open?: boolean;
@@ -419,3 +460,5 @@ returnValue?: string;
     frameborder?: number | string;
+    importance?: 'low' | 'auto' | 'high';
     height?: number | string;
+    loading?: 'lazy' | 'auto' | 'eager';
     marginHeight?: number;
@@ -438,3 +481,5 @@ marginheight?: string | number;
     decoding?: 'async' | 'auto' | 'sync';
+    importance?: 'low' | 'auto' | 'high';
     height?: number | string;
+    loading?: 'lazy' | 'auto' | 'eager';
     sizes?: string;
@@ -528,2 +573,3 @@ src?: string;
     hreflang?: string;
+    importance?: 'low' | 'auto' | 'high';
     integrity?: string;
@@ -556,2 +602,29 @@ media?: string;
     src?: string;
+
+    // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
+    onAbort?: (event: Event) => void;
+    onCanPlay?: (event: Event) => void;
+    onCanPlayThrough?: (event: Event) => void;
+    onDurationChange?: (event: Event) => void;
+    onEmptied?: (event: Event) => void;
+    onEnded?: (event: Event) => void;
+    onError?: (event: Event) => void;
+    onInterruptBegin?: (event: Event) => void;
+    onInterruptEnd?: (event: Event) => void;
+    onLoadedData?: (event: Event) => void;
+    onLoadedMetaData?: (event: Event) => void;
+    onLoadStart?: (event: Event) => void;
+    onMozAudioAvailable?: (event: Event) => void;
+    onPause?: (event: Event) => void;
+    onPlay?: (event: Event) => void;
+    onPlaying?: (event: Event) => void;
+    onProgress?: (event: Event) => void;
+    onRateChange?: (event: Event) => void;
+    onSeeked?: (event: Event) => void;
+    onSeeking?: (event: Event) => void;
+    onStalled?: (event: Event) => void;
+    onSuspend?: (event: Event) => void;
+    onTimeUpdate?: (event: Event) => void;
+    onVolumeChange?: (event: Event) => void;
+    onWaiting?: (event: Event) => void;
   }
@@ -637,2 +710,3 @@
     defer?: boolean;
+    importance?: 'low' | 'auto' | 'high';
     integrity?: string;
@@ -732,6 +806,5 @@ nonce?: string;
 
-  export interface HTMLAttributes<T = HTMLElement> extends StencilGlobalHTMLAttributes, DOMAttributes {
+  export interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
     // vdom specific
     innerHTML?: string;
-    ref?: (elm?: T) => void;
     key?: string | number;
@@ -741,3 +814,3 @@
     accessKey?: string;
-    class?: string |  { [className: string]: boolean };
+    class?: string | { [className: string]: boolean };
     contentEditable?: boolean | string;
@@ -755,3 +828,3 @@ contenteditable?: boolean | string;
     spellcheck?: boolean | string;
-    style?: { [key: string]: string };
+    style?: { [key: string]: string | undefined };
     tabIndex?: number;
@@ -767,2 +840,3 @@ tabindex?: number | string;
     radiogroup?: string;
+    part?: string;
 
@@ -805,3 +879,3 @@ // WAI-ARIA
 
-  export interface SVGAttributes extends StencilGlobalHTMLAttributes, DOMAttributes {
+  export interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
     // Attributes which also defined in HTMLAttributes
@@ -819,3 +893,3 @@ // See comment in SVGDOMPropertyConfig.js
     name?: string;
-    style?: { [key: string]: any; };
+    style?: { [key: string]: string | undefined };
     target?: string;
@@ -1072,3 +1146,5 @@ type?: string;
 
-  export interface DOMAttributes {
+  export interface DOMAttributes<T = Element> {
+    ref?: (elm?: T) => void;
+
     // Clipboard Events
@@ -1169,2 +1245,24 @@ onCopy?: (event: ClipboardEvent) => void;
 
+    // Pointer Events
+    onPointerDown?: (event: PointerEvent) => void;
+    onPointerDownCapture?: (event: PointerEvent) => void;
+    onPointerMove?: (event: PointerEvent) => void;
+    onPointerMoveCapture?: (event: PointerEvent) => void;
+    onPointerUp?: (event: PointerEvent) => void;
+    onPointerUpCapture?: (event: PointerEvent) => void;
+    onPointerCancel?: (event: PointerEvent) => void;
+    onPointerCancelCapture?: (event: PointerEvent) => void;
+    onPointerEnter?: (event: PointerEvent) => void;
+    onPointerEnterCapture?: (event: PointerEvent) => void;
+    onPointerLeave?: (event: PointerEvent) => void;
+    onPointerLeaveCapture?: (event: PointerEvent) => void;
+    onPointerOver?: (event: PointerEvent) => void;
+    onPointerOverCapture?: (event: PointerEvent) => void;
+    onPointerOut?: (event: PointerEvent) => void;
+    onPointerOutCapture?: (event: PointerEvent) => void;
+    onGotPointerCapture?: (event: PointerEvent) => void;
+    onGotPointerCaptureCapture?: (event: PointerEvent) => void;
+    onLostPointerCapture?: (event: PointerEvent) => void;
+    onLostPointerCaptureCapture?: (event: PointerEvent) => void;
+
     // UI Events
@@ -1192,22 +1290,51 @@ onScroll?: (event: UIEvent) => void;
 
+
+export interface Hyperscript {
+  (sel: any): VNode;
+  (sel: Node, data: VNodeData): VNode;
+  (sel: any, data: VNodeData): VNode;
+  (sel: any, text: string): VNode;
+  (sel: any, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, text: string): VNode;
+  (sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, children: VNode): VNode;
+}
+
+
+export interface VNodeData {
+  class?: {[className: string]: boolean};
+  style?: any;
+  [attrName: string]: any;
+}
+
+
+export type ChildType = VNode | number | string;
+export type PropsType = VNodeProdData | number | string | null;
+
+export interface VNodeProdData {
+  key?: string | number;
+  class?: {[className: string]: boolean} | string;
+  className?: {[className: string]: boolean} | string;
+  style?: any;
+  [key: string]: any;
+}
+
 export interface FunctionalUtilities {
-  forEach: (children: FVNode[], cb: (vnode: ChildNode, index: number, array: FVNode[]) => void) => void;
-  map: (children: FVNode[], cb: (vnode: ChildNode, index: number, array: FVNode[]) => ChildNode) => FVNode[];
+  forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+  map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 
 export interface FunctionalComponent<T = {}> {
-  (props: T, children: FVNode[], utils: FunctionalUtilities): FVNode | FVNode[];
+  (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
 
-export interface FVNode {
-  // using v prefixes largely so closure has no issue property renaming
-  vtag?: string | number | Function;
-  vkey?: string | number;
-  vtext?: string;
-  vchildren?: FVNode[];
-  vattrs?: any;
-  vname?: string;
-  ishost?: boolean;
-  isSlotFallback?: boolean;
-  isSlotReference?: boolean;
+export interface VNode {
+  $tag$?: string | number | Function;
+  $key$?: string | number;
+  $text$?: string;
+  $children$?: VNode[];
+  $attrs$?: any;
+  $name$?: string;
+  $flags$: number;
+  $elm$?: any;
 }
@@ -1219,5 +1346,5 @@
   vtext?: string;
-  vchildren?: ChildNode[];
+  vchildren?: VNode[];
   vattrs?: any;
   vname?: string;
 }

package.json

 {
   "name": "stencil-apexcharts",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Stencil Component for ApexCharts",
@@ -21,6 +21,9 @@ "author": {
   ],
-  "module": "dist/esm/index.js",
   "main": "dist/index.js",
-  "unpkg": "dist/ionic.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
   "types": "dist/types/components.d.ts",
+  "unpkg": "dist/stencil-apexcharts/apex.js",
+  "collection:main": "dist/collection/index.js",
   "collection": "dist/collection/collection-manifest.json",
@@ -38,7 +41,7 @@ "files": [
   "peerDependencies": {
-    "apexcharts": "apexcharts^3.6.5"
+    "apexcharts": "apexcharts^3.8.1"
   },
   "devDependencies": {
-    "@stencil/core": "^0.18.1",
-    "standard-version": "^5.0.2"
+    "@stencil/core": "^1.1.3",
+    "standard-version": "^6.0.1"
   },
@@ -45,0 +48,0 @@ "license": "MIT",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Lines of code

87877

increased by43.06%

Number of low quality alerts

1

decreased by-75%

Number of low supply chain risk alerts

7

decreased by-46.15%

Worsened metrics

Total package byte prevSize

4718391

decreased by-18.95%

Number of package files

60

decreased by-15.49%

Number of medium supply chain risk alerts

9

increased by28.57%

No dependency changes