@kubex/zinc 1.1.32 → 1.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/chunks/zn.4YKYUIHS.js +3 -0
  2. package/dist/chunks/zn.6RARZYEJ.js +22 -0
  3. package/dist/chunks/zn.7VCR5ZZL.js +1 -0
  4. package/dist/chunks/zn.AI3T35DX.js +1 -0
  5. package/dist/chunks/zn.CU5HCKLN.js +1 -0
  6. package/dist/chunks/zn.EHO4QQOL.js +1 -0
  7. package/dist/chunks/zn.GBBMMHHG.js +8 -0
  8. package/dist/chunks/zn.GRJSS6IO.js +1 -0
  9. package/dist/chunks/zn.HPUEBV7K.js +1 -0
  10. package/dist/chunks/zn.J2JOUV3V.js +8 -0
  11. package/dist/chunks/zn.NKUIXDNI.js +1 -0
  12. package/dist/chunks/zn.S4ZVBYAS.js +3 -0
  13. package/dist/chunks/zn.UBLZO6CI.js +1 -0
  14. package/dist/chunks/zn.XO7QERPZ.js +716 -0
  15. package/dist/chunks/zn.ZGI3WHSG.js +4 -0
  16. package/dist/custom-elements.json +134 -75
  17. package/dist/vscode.html-custom-data.json +11 -11
  18. package/dist/web-types.json +23 -23
  19. package/dist/zn.d.ts +21 -0
  20. package/dist/zn.min.js +1309 -2041
  21. package/index.html +1 -1
  22. package/package.json +3 -3
  23. package/scripts/build.js +10 -5
  24. package/src/components/chart/chart.component.ts +20 -27
  25. package/src/components/chart/echarts-loader.ts +30 -0
  26. package/src/components/editor/modules/emoji/emoji-mart-loader.ts +28 -0
  27. package/src/components/editor/modules/emoji/emoji.ts +3 -9
  28. package/src/components/editor/modules/emoji/headless/headless-emoji.ts +2 -9
  29. package/src/components/icon/icon.component.ts +34 -2
  30. package/src/components/icon-picker/icon-picker.component.ts +35 -35
  31. package/src/components/settings-container/settings-container.scss +2 -2
  32. package/src/components/simple-chart/simple-chart.component.ts +15 -6
  33. package/src/zinc-autoloader.ts +0 -2
  34. package/tsconfig.json +2 -1
package/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
6
  <title>Document</title>
7
7
 
8
- <script src="./dist/zn.min.js"></script>
8
+ <script type="module" src="./dist/zn.min.js"></script>
9
9
  <link rel="stylesheet" href="./dist/zn.min.css">
10
10
  </head>
11
11
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kubex/zinc",
3
- "version": "1.1.32",
3
+ "version": "1.1.34",
4
4
  "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
5
5
  "keywords": [
6
6
  "web components",
@@ -24,8 +24,8 @@
24
24
  ],
25
25
  "type": "module",
26
26
  "main": "src/zinc.ts",
27
- "module": "dist/zinc.js",
28
- "unpkg": "dist/zinc.min.js",
27
+ "module": "dist/zn.min.js",
28
+ "unpkg": "dist/zn.min.js",
29
29
  "scripts": {
30
30
  "build": "node scripts/build.js",
31
31
  "build:docs": "node scripts/build.js --with-docs",
package/scripts/build.js CHANGED
@@ -130,19 +130,24 @@ async function buildTheSource()
130
130
  // Theme stylesheets
131
131
  // ...(await globby('./src/themes/**/!(*.test).ts'))
132
132
  ];
133
+ if(entryPoints.length !== 1)
134
+ {
135
+ throw new Error('entryNames is fixed to "zn.min" for the single-entry build; update the naming strategy before adding entry points');
136
+ }
133
137
  const config = {
134
- format: 'iife', // IIFE when not splitting
135
- target: 'es2017',
138
+ format: 'esm',
139
+ target: 'es2020',
136
140
  legalComments: 'none',
137
- outfile: `${outDir}/zn.min.js`, // While single entry point
138
- // outdir: outDir, // While multiple entry points
141
+ outdir: outDir,
142
+ entryNames: 'zn.min', // Keep the historical zn.min.js entry name
143
+ chunkNames: 'chunks/zn.[hash]',
139
144
  entryPoints,
140
145
  define: {
141
146
  // Floating UI requires this to be set
142
147
  'process.env.NODE_ENV': '"production"'
143
148
  },
144
149
  bundle: true,
145
- splitting: false,
150
+ splitting: true,
146
151
  minify: true,
147
152
  plugins: [
148
153
  sassPlugin({
package/src/components/chart/chart.component.ts CHANGED
@@ -1,5 +1,3 @@
1
- import * as echarts from 'echarts/core';
2
- import { BarChart, LineChart, SankeyChart } from 'echarts/charts';
3
1
  import {
4
2
  buildAreaOption,
5
3
  buildBarOption,
@@ -9,33 +7,14 @@ import {
9
7
  type ChartType,
10
8
  type SeriesItem,
11
9
  } from './builders';
12
- import { CanvasRenderer } from 'echarts/renderers';
13
10
  import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
14
- import { ResizeController } from '@lit-labs/observers/resize-controller.js';
15
- import {
16
- DataZoomComponent,
17
- GridComponent,
18
- LegendComponent,
19
- TitleComponent,
20
- TooltipComponent,
21
- } from 'echarts/components';
11
+ import { type EChartsModule, loadECharts } from './echarts-loader';
22
12
  import { property } from 'lit/decorators.js';
13
+ import { ResizeController } from '@lit-labs/observers/resize-controller.js';
23
14
  import styles from './chart.scss';
24
15
  import ZincElement from '../../internal/zinc-element';
25
16
  import type { ECharts } from 'echarts/core';
26
17
 
27
- echarts.use([
28
- BarChart,
29
- LineChart,
30
- SankeyChart,
31
- GridComponent,
32
- TooltipComponent,
33
- LegendComponent,
34
- TitleComponent,
35
- DataZoomComponent,
36
- CanvasRenderer,
37
- ]);
38
-
39
18
  /**
40
19
  * @summary Chart component powered by Apache ECharts.
41
20
  * @documentation https://zinc.style/components/data-chart
@@ -88,6 +67,8 @@ export default class ZnChart extends ZincElement {
88
67
  }) scale: boolean | number = false;
89
68
 
90
69
  private chart?: ECharts;
70
+ private echarts?: EChartsModule;
71
+ private initPromise?: Promise<void>;
91
72
  private liveTimer?: number;
92
73
 
93
74
  private readonly resizeObserver = new ResizeController(this, {
@@ -97,10 +78,17 @@ export default class ZnChart extends ZincElement {
97
78
  });
98
79
 
99
80
  protected firstUpdated(_changedProperties: PropertyValues) {
100
- this.initChart();
81
+ this.initPromise = this.initChart().catch(() => undefined);
101
82
  super.firstUpdated(_changedProperties);
102
83
  }
103
84
 
85
+ // Make `await el.updateComplete` cover the lazy echarts load and chart init
86
+ protected override async getUpdateComplete(): Promise<boolean> {
87
+ const result = await super.getUpdateComplete();
88
+ await this.initPromise;
89
+ return result;
90
+ }
91
+
104
92
  private getTheme(): 'light' | 'dark' {
105
93
  return this.getAttribute('t') === 'dark' ? 'dark' : 'light';
106
94
  }
@@ -144,10 +132,15 @@ export default class ZnChart extends ZincElement {
144
132
  }
145
133
  }
146
134
 
147
- private initChart() {
135
+ private async initChart() {
148
136
  const host = this.shadowRoot?.getElementById('chart') as HTMLElement | null;
149
137
  if (!host) return;
150
138
  host.style.height = `${this.height}px`;
139
+
140
+ const echarts = await loadECharts();
141
+ if (!this.isConnected || this.chart) return;
142
+ this.echarts = echarts;
143
+
151
144
  this.chart = echarts.init(host);
152
145
  this.chart.setOption(this.buildOption());
153
146
 
@@ -177,7 +170,7 @@ export default class ZnChart extends ZincElement {
177
170
  private reinit() {
178
171
  this.chart?.dispose();
179
172
  this.chart = undefined;
180
- this.initChart();
173
+ this.initPromise = this.initChart().catch(() => undefined);
181
174
  }
182
175
 
183
176
  attributeChangedCallback(name: string, _old: string | null, value: string | null) {
@@ -195,7 +188,7 @@ export default class ZnChart extends ZincElement {
195
188
  if (name === 'sync-group') {
196
189
  if (value) {
197
190
  this.chart.group = value;
198
- echarts.connect(value);
191
+ this.echarts?.connect(value);
199
192
  } else {
200
193
  this.chart.group = '';
201
194
  }
package/src/components/chart/echarts-loader.ts ADDED
@@ -0,0 +1,30 @@
1
+ import type * as echartsCore from 'echarts/core';
2
+
3
+ export type EChartsModule = typeof echartsCore;
4
+
5
+ let promise: Promise<EChartsModule> | undefined;
6
+
7
+ // Lazy-load echarts so it lands in its own chunk instead of the main bundle.
8
+ export function loadECharts(): Promise<EChartsModule> {
9
+ promise ??= (async () => {
10
+ const [core, charts, components, renderers] = await Promise.all([
11
+ import('echarts/core'),
12
+ import('echarts/charts'),
13
+ import('echarts/components'),
14
+ import('echarts/renderers'),
15
+ ]);
16
+ core.use([
17
+ charts.BarChart,
18
+ charts.LineChart,
19
+ charts.SankeyChart,
20
+ components.GridComponent,
21
+ components.TooltipComponent,
22
+ components.LegendComponent,
23
+ components.TitleComponent,
24
+ components.DataZoomComponent,
25
+ renderers.CanvasRenderer,
26
+ ]);
27
+ return core;
28
+ })();
29
+ return promise;
30
+ }
package/src/components/editor/modules/emoji/emoji-mart-loader.ts ADDED
@@ -0,0 +1,28 @@
1
+ import type {Picker, SearchIndex} from 'emoji-mart';
2
+
3
+ export interface EmojiMart {
4
+ Picker: typeof Picker;
5
+ SearchIndex: typeof SearchIndex;
6
+ data: Record<string, unknown>;
7
+ }
8
+
9
+ let promise: Promise<EmojiMart> | undefined;
10
+
11
+ // emoji-mart and its data set are large, so they load lazily into their own
12
+ // chunks and are initialised once, on first use.
13
+ export function loadEmojiMart(): Promise<EmojiMart> {
14
+ promise ??= (async () => {
15
+ const [mart, dataModule] = await Promise.all([
16
+ import('emoji-mart'),
17
+ import('@emoji-mart/data'),
18
+ ]);
19
+ const data = dataModule.default as Record<string, unknown>;
20
+ try {
21
+ void mart.init({data});
22
+ } catch {
23
+ // no-op if already initialised
24
+ }
25
+ return {Picker: mart.Picker, SearchIndex: mart.SearchIndex, data};
26
+ })();
27
+ return promise;
28
+ }
package/src/components/editor/modules/emoji/emoji.ts CHANGED
@@ -1,5 +1,4 @@
1
- import {init, Picker} from 'emoji-mart';
2
- import data from '@emoji-mart/data';
1
+ import {loadEmojiMart} from './emoji-mart-loader';
3
2
  import Quill from 'quill';
4
3
  import type ToolbarComponent from "../toolbar/toolbar.component";
5
4
 
@@ -16,11 +15,6 @@ class Emoji {
16
15
 
17
16
  constructor(quill: Quill) {
18
17
  this._quill = quill;
19
- try {
20
- void init({data});
21
- } catch {
22
- // no-op if already initialised
23
- }
24
18
  this.initPicker();
25
19
 
26
20
  const host = this.getHostEditor();
@@ -59,7 +53,7 @@ class Emoji {
59
53
  }
60
54
 
61
55
  public initPicker() {
62
- this.getToolbarEmojiContainer().then((container) => {
56
+ Promise.all([this.getToolbarEmojiContainer(), loadEmojiMart()]).then(([container, {Picker, data}]) => {
63
57
  if (!container) return;
64
58
 
65
59
  container.innerHTML = '';
@@ -67,7 +61,7 @@ class Emoji {
67
61
  // eslint-disable-next-line no-new
68
62
  new Picker({
69
63
  parent: container,
70
- data: data as Record<string, unknown>,
64
+ data,
71
65
  previewPosition: 'none',
72
66
  skinTonePosition: 'none',
73
67
  theme: this.getTheme(),
package/src/components/editor/modules/emoji/headless/headless-emoji.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import './headless-emoji.component';
2
2
  import {html} from 'lit';
3
- import {init, SearchIndex} from 'emoji-mart';
4
3
  import {litToHTML} from '../../../../../utilities/lit-to-html';
5
- import data from '@emoji-mart/data';
4
+ import {loadEmojiMart} from '../emoji-mart-loader';
6
5
  import Quill from 'quill';
7
6
  import type {EmojiResult} from "../emoji";
8
7
  import type {ResultItem} from './headless-emoji.component';
@@ -17,13 +16,6 @@ class HeadlessEmoji {
17
16
 
18
17
  constructor(quill: Quill) {
19
18
  this._quill = quill;
20
- // Initialize emoji-mart index once
21
- try {
22
- void init({data});
23
- } catch {
24
- // no-op
25
- }
26
-
27
19
  this.initComponent();
28
20
  this.attachEvents();
29
21
  }
@@ -68,6 +60,7 @@ class HeadlessEmoji {
68
60
  this._startIndex = start;
69
61
 
70
62
  try {
63
+ const {SearchIndex} = await loadEmojiMart();
71
64
  const results = await SearchIndex.search(emojiQuery) as EmojiResult[];
72
65
  const mapped: ResultItem[] = (Array.isArray(results) ? results : []).slice(0, 20).map((e) => ({
73
66
  emojiChar: (e?.skins?.[0]?.native) || e?.native || '',
package/src/components/icon/icon.component.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import {choose} from 'lit/directives/choose.js';
2
2
  import {classMap} from "lit/directives/class-map.js";
3
3
  import {type CSSResultGroup, html, type PropertyValues, render, unsafeCSS} from 'lit';
4
- import {icons} from 'lucide';
5
4
  import {property} from 'lit/decorators.js';
6
5
  import {sha256} from '../../utilities/sha256';
7
6
  import {styleMap} from "lit/directives/style-map.js";
@@ -11,6 +10,22 @@ import type {IconNode, SVGProps} from 'lucide';
11
10
 
12
11
  import styles from './icon.scss';
13
12
 
13
+ // The full lucide icon set is large, so it loads lazily into its own chunk the
14
+ // first time a lucide icon is rendered.
15
+ let lucideIcons: Record<string, IconNode> | undefined;
16
+ let lucidePromise: Promise<void> | undefined;
17
+
18
+ function loadLucideIcons(): Promise<void> {
19
+ lucidePromise ??= import('lucide').then(m => {
20
+ lucideIcons = m.icons as Record<string, IconNode>;
21
+ }).catch(() => {
22
+ // Failed chunk load: fall back to an empty set so icons render their
23
+ // "not found" state instead of rejecting updateComplete on every render
24
+ lucideIcons = {};
25
+ });
26
+ return lucidePromise;
27
+ }
28
+
14
29
  export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" |
15
30
  "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" |
16
31
  "lucide";
@@ -163,6 +178,18 @@ export default class ZnIcon extends ZincElement {
163
178
  }
164
179
  }
165
180
 
181
+ // Make `await el.updateComplete` cover the lazy lucide load and the
182
+ // re-render it triggers.
183
+ protected override async getUpdateComplete(): Promise<boolean> {
184
+ const result = await super.getUpdateComplete();
185
+ if (this.library === 'lucide' && !lucideIcons) {
186
+ await loadLucideIcons();
187
+ this.requestUpdate();
188
+ await super.getUpdateComplete();
189
+ }
190
+ return result;
191
+ }
192
+
166
193
  private parseSrc() {
167
194
  if (this.libraryAutoSet) {
168
195
  this.library = undefined as unknown as IconLibrary;
@@ -325,6 +352,11 @@ export default class ZnIcon extends ZincElement {
325
352
  }
326
353
 
327
354
  private renderLucideIcon() {
355
+ if (!lucideIcons) {
356
+ void loadLucideIcons().then(() => this.requestUpdate());
357
+ return html``;
358
+ }
359
+
328
360
  const icon = this.getLucideIcon(this.src);
329
361
 
330
362
  if (!icon) {
@@ -340,7 +372,7 @@ export default class ZnIcon extends ZincElement {
340
372
  }
341
373
 
342
374
  const candidates = [src, this.toPascalCase(src)];
343
- const iconSet = icons as Record<string, IconNode>;
375
+ const iconSet = lucideIcons ?? {};
344
376
 
345
377
  for (const candidate of candidates) {
346
378
  if (Object.prototype.hasOwnProperty.call(iconSet, candidate)) {
package/src/components/icon-picker/icon-picker.component.ts CHANGED
@@ -1,8 +1,8 @@
1
- import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
2
1
  import {classMap} from 'lit/directives/class-map.js';
2
+ import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
3
3
  import {defaultValue} from '../../internal/default-value';
4
- import {property, query, state} from 'lit/decorators.js';
5
4
  import {FormControlController} from '../../internal/form';
5
+ import {property, query, state} from 'lit/decorators.js';
6
6
  import ZincElement from '../../internal/zinc-element';
7
7
  import ZnButton from '../button';
8
8
  import ZnDialog from '../dialog';
@@ -12,16 +12,6 @@ import ZnOption from '../option';
12
12
  import ZnSelect from '../select';
13
13
  import type {ZincFormControl} from '../../internal/zinc-element';
14
14
 
15
- import {brandIcons} from './brand-icons';
16
- import {lineIcons} from './line-icons';
17
- import {
18
- materialIcons,
19
- material_outlinedIcons,
20
- material_roundIcons,
21
- material_sharpIcons,
22
- material_two_toneIcons,
23
- material_symbols_outlinedIcons,
24
- } from './material-icons';
25
15
  import styles from './icon-picker.scss';
26
16
 
27
17
  export default class ZnIconPicker extends ZincElement implements ZincFormControl {
@@ -105,26 +95,36 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
105
95
  return ZnIconPicker.freeInputLibraries.has(library);
106
96
  }
107
97
 
108
- private getIconsForLibrary(library: string): string[] {
109
- switch (library) {
110
- case 'material':
111
- return materialIcons;
112
- case 'material-outlined':
113
- return material_outlinedIcons;
114
- case 'material-round':
115
- return material_roundIcons;
116
- case 'material-sharp':
117
- return material_sharpIcons;
118
- case 'material-two-tone':
119
- return material_two_toneIcons;
120
- case 'material-symbols-outlined':
121
- return material_symbols_outlinedIcons;
122
- case 'brands':
123
- return brandIcons;
124
- case 'line':
125
- return lineIcons;
126
- default:
127
- return materialIcons;
98
+ // The icon name lists are only needed once the picker dialog opens, so they
99
+ // load lazily into their own chunks. Falls back to an empty list on a failed
100
+ // chunk load so callers never reject.
101
+ private async getIconsForLibrary(library: string): Promise<string[]> {
102
+ try {
103
+ switch (library) {
104
+ case 'brands':
105
+ return (await import('./brand-icons')).brandIcons;
106
+ case 'line':
107
+ return (await import('./line-icons')).lineIcons;
108
+ default: {
109
+ const lists = await import('./material-icons');
110
+ switch (library) {
111
+ case 'material-outlined':
112
+ return lists.material_outlinedIcons;
113
+ case 'material-round':
114
+ return lists.material_roundIcons;
115
+ case 'material-sharp':
116
+ return lists.material_sharpIcons;
117
+ case 'material-two-tone':
118
+ return lists.material_two_toneIcons;
119
+ case 'material-symbols-outlined':
120
+ return lists.material_symbols_outlinedIcons;
121
+ default:
122
+ return lists.materialIcons;
123
+ }
124
+ }
125
+ }
126
+ } catch {
127
+ return [];
128
128
  }
129
129
  }
130
130
 
@@ -133,7 +133,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
133
133
  this._pendingLibrary = this.library;
134
134
  this._pendingColor = this.color;
135
135
  this._searchQuery = '';
136
- this._iconList = this.getIconsForLibrary(this.library);
136
+ this._iconList = await this.getIconsForLibrary(this.library);
137
137
  this._filteredIcons = this._iconList.slice(0, 200);
138
138
  this._dialogOpen = true;
139
139
 
@@ -178,7 +178,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
178
178
  this._pendingIcon = iconName;
179
179
  }
180
180
 
181
- private handleLibraryChange(e: Event) {
181
+ private async handleLibraryChange(e: Event) {
182
182
  const select = e.target as HTMLSelectElement;
183
183
  const wasFreeInput = this.isFreeInputLibrary(this._pendingLibrary);
184
184
  this._pendingLibrary = select.value;
@@ -190,7 +190,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
190
190
  }
191
191
 
192
192
  if (!isFreeInput) {
193
- this._iconList = this.getIconsForLibrary(this._pendingLibrary);
193
+ this._iconList = await this.getIconsForLibrary(this._pendingLibrary);
194
194
  this.filterIcons();
195
195
  }
196
196
  }
package/src/components/settings-container/settings-container.scss CHANGED
@@ -162,9 +162,9 @@ zn-button {
162
162
  .settings-container__dropdown-content {
163
163
  display: flex;
164
164
  flex-direction: column;
165
- gap: var(--zn-spacing-large);
165
+ gap: var(--zn-spacing-small);
166
166
  background-color: rgb(var(--zn-panel));
167
- padding: var(--zn-spacing-large);
167
+ padding: var(--zn-spacing-small);
168
168
  box-shadow: var(--zn-shadow-small);
169
169
  border-radius: var(--zn-border-radius);
170
170
  max-width: var(--zn-size-mpanel);
package/src/components/simple-chart/simple-chart.component.ts CHANGED
@@ -1,16 +1,11 @@
1
- import * as echarts from 'echarts/core';
2
- import { BarChart } from 'echarts/charts';
3
- import { CanvasRenderer } from 'echarts/renderers';
4
1
  import { type CSSResultGroup, html, unsafeCSS } from 'lit';
5
- import { GridComponent, TooltipComponent } from 'echarts/components';
2
+ import { loadECharts } from '../chart/echarts-loader';
6
3
  import { property } from 'lit/decorators.js';
7
4
  import { ResizeController } from '@lit-labs/observers/resize-controller.js';
8
5
  import styles from './simple-chart.scss';
9
6
  import ZincElement from '../../internal/zinc-element';
10
7
  import type { ECharts } from 'echarts/core';
11
8
 
12
- echarts.use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
13
-
14
9
  const DEFAULT_LABELS = [
15
10
  'Jun 2016', 'Jul 2016', 'Aug 2016', 'Sep 2016', 'Oct 2016', 'Nov 2016',
16
11
  'Dec 2016', 'Jan 2017', 'Feb 2017', 'Mar 2017', 'Apr 2017', 'May 2017',
@@ -41,6 +36,7 @@ export default class ZnSimpleChart extends ZincElement {
41
36
  }) enableAnimations: boolean | number = false;
42
37
 
43
38
  private chart?: ECharts;
39
+ private initPromise?: Promise<void>;
44
40
  private readonly resizeObserver = new ResizeController(this, {
45
41
  target: null,
46
42
  skipInitial: true,
@@ -48,8 +44,21 @@ export default class ZnSimpleChart extends ZincElement {
48
44
  });
49
45
 
50
46
  firstUpdated() {
47
+ this.initPromise = this.initChart().catch(() => undefined);
48
+ }
49
+
50
+ // Make `await el.updateComplete` cover the lazy echarts load and chart init
51
+ protected override async getUpdateComplete(): Promise<boolean> {
52
+ const result = await super.getUpdateComplete();
53
+ await this.initPromise;
54
+ return result;
55
+ }
56
+
57
+ private async initChart() {
51
58
  const host = this.shadowRoot?.getElementById('chart') as HTMLElement | null;
52
59
  if (!host) return;
60
+ const echarts = await loadECharts();
61
+ if (!this.isConnected || this.chart) return;
53
62
  this.chart = echarts.init(host);
54
63
  const data = this.datasets?.[0]?.data ?? DEFAULT_DATA;
55
64
  const labels = this.labels ?? DEFAULT_LABELS;
package/src/zinc-autoloader.ts CHANGED
@@ -45,8 +45,6 @@ function register(tagName: string): Promise<void> {
45
45
 
46
46
  // Register it
47
47
  return new Promise((resolve, reject) => {
48
- // @ts-expect-error Dynamic imports are only supported when the --module flag is set to es2020, es2022, esnext,
49
- // commonjs, amd, system, umd, node16, or nodenext
50
48
  import(path).then(() => resolve()).catch(() => reject(new Error(`Unable to autoload <${tagName}> from ${path}`)));
51
49
  });
52
50
  }
package/tsconfig.json CHANGED
@@ -2,7 +2,8 @@
2
2
  {
3
3
  "compilerOptions": {
4
4
  /* Visit https://aka.ms/tsconfig.json to read more about this file */
5
- "target": "es2017",
5
+ "target": "es2020",
6
+ "module": "esnext",
6
7
  "moduleResolution": "node",
7
8
  "lib": [
8
9
  "dom",