@amad3v/solid-chart 1.0.1 → 1.0.2

package/README.md

@@ -132,3 +132,7 @@ This library is a modernised and refactored version of [solid-chartjs](https://g
 ## Disclaimer
 
 Please note: This library is by no means a professional or production-ready solution. It was developed out of necessity for personal projects, and it may not meet the quality or stability standards required for a fully-fledged production environment. It is intended for personal use and experimentation, and contributions are highly encouraged to improve its functionality and stability.
+
+## Changelog
+
+Detailed changes for each release are documented in the [CHANGELOG.md](./CHANGELOG.md).

package/dist/solid-chart.js

@@ -1,12 +1,12 @@
-import { template as R, use as x, insert as D, effect as O, setAttribute as v, createComponent as s, mergeProps as i } from "solid-js/web";
+import { template as x, use as D, insert as O, effect as T, setAttribute as w, createComponent as i, mergeProps as s } from "solid-js/web";
 import { mergeRefs as P } from "@solid-primitives/refs";
-import { Chart as w, PointElement as d, LinearScale as f, BubbleController as T, Legend as S, Tooltip as B, SubTitle as _, Colors as $, Title as k, ArcElement as y, DoughnutController as z, LineElement as L, CategoryScale as A, LineController as M, PieController as j, RadialLinearScale as E, PolarAreaController as q, RadarController as F, ScatterController as G, BarElement as H, BarController as I } from "chart.js";
-import { mergeProps as J, onMount as K, createEffect as p, on as u, onCleanup as N } from "solid-js";
+import { Chart as S, PointElement as f, LinearScale as m, BubbleController as _, Legend as A, Tooltip as B, SubTitle as $, Colors as k, Title as q, ArcElement as v, DoughnutController as z, LineElement as L, CategoryScale as E, LineController as F, PieController as M, RadialLinearScale as R, PolarAreaController as j, RadarController as G, ScatterController as H, BarElement as I, BarController as J } from "chart.js";
+import { mergeProps as K, onMount as N, createEffect as p, on as d, onCleanup as Q } from "solid-js";
 import { unwrap as g } from "solid-js/store";
-var Q = /* @__PURE__ */ R("<canvas>");
+var U = /* @__PURE__ */ x("<canvas>");
 const l = (e) => {
-  let h, o;
-  const t = J({
+  let h = 0, c, o;
+  const t = K({
     width: 512,
     height: 512,
     type: "line",
@@ -15,19 +15,24 @@ const l = (e) => {
       responsive: !0
     },
     plugins: []
-  }, e), b = () => {
-    if (!h) return;
-    const n = h.getContext("2d"), r = {
+  }, e), C = () => {
+    if (!c) return;
+    if (!c.isConnected) {
+      h++, h === 60 && console.warn("Solid-Chart: Canvas layout is delayed. Still retrying..."), requestAnimationFrame(C);
+      return;
+    }
+    h = 0;
+    const n = c.getContext("2d"), r = {
       ...g(t.options)
     };
     if (t.type !== "radar" && r.scales?.r) {
       const {
-        r: C,
-        ...c
+        r: b,
+        ...u
       } = r.scales;
-      r.scales = c;
+      r.scales = u;
     }
-    o = new w(n, {
+    o = new S(n, {
       type: t.type,
       data: g(t.data),
       // unwrap stores before passing to external libs
@@ -35,69 +40,69 @@ const l = (e) => {
       plugins: t.plugins
     });
   };
-  return K(() => b()), p(u(() => t.data, (n) => {
+  return N(() => C()), p(d(() => t.data, (n) => {
     o && (o.data = g(n), o.update("none"));
   }, {
     defer: !0
-  })), p(u(() => t.options, (n) => {
+  })), p(d(() => t.options, (n) => {
     o && (o.options = g(n), o.update());
   }, {
     defer: !0
-  })), p(u([() => t.width, () => t.height], () => o?.resize(t.width, t.height), {
+  })), p(d([() => t.width, () => t.height], () => o?.resize(t.width, t.height), {
     defer: !0
-  })), p(u(() => t.type, () => {
-    o && (o.destroy(), b());
+  })), p(d(() => t.type, () => {
+    o && (o.destroy(), C());
   }, {
     defer: !0
-  })), N(() => {
+  })), Q(() => {
     o?.destroy(), P(e.ref, null);
   }), (() => {
-    var n = Q(), m = P(e.ref, (r) => h = r);
-    return typeof m == "function" && x(m, n), D(n, () => t.fallback), O((r) => {
-      var C = t.height, c = t.width;
-      return C !== r.e && v(n, "height", r.e = C), c !== r.t && v(n, "width", r.t = c), r;
+    var n = U(), y = P(e.ref, (r) => c = r);
+    return typeof y == "function" && D(y, n), O(n, () => t.fallback), T((r) => {
+      var b = t.height, u = t.width;
+      return b !== r.e && w(n, "height", r.e = b), u !== r.t && w(n, "width", r.t = u), r;
     }, {
       e: void 0,
       t: void 0
     }), n;
   })();
-}, a = (...e) => w.register(...e), Z = () => a(B, S), ee = () => a(k, B, S, $, _), te = () => a(M, A, f, d, L), re = () => a(I, A, f, H), oe = () => a(F, E, d, L), ne = () => a(z, y), ae = () => a(j, y), se = () => a(q, E, y), ie = () => a(T, f, d), le = () => a(G, f, d), ce = (e) => s(l, i({
+}, a = (...e) => S.register(...e), ee = () => a(B, A), te = () => a(q, B, A, k, $), re = () => a(F, E, m, f, L), oe = () => a(J, E, m, I), ne = () => a(G, R, f, L), ae = () => a(z, v), ie = () => a(M, v), se = () => a(j, R, v), le = () => a(_, m, f), ce = () => a(H, m, f), ue = (e) => i(l, s({
   type: "line"
-}, e)), pe = (e) => s(l, i({
+}, e)), pe = (e) => i(l, s({
   type: "bar"
-}, e)), ue = (e) => s(l, i({
+}, e)), de = (e) => i(l, s({
   type: "radar"
-}, e)), ge = (e) => s(l, i({
+}, e)), ge = (e) => i(l, s({
   type: "doughnut"
-}, e)), de = (e) => s(l, i({
+}, e)), fe = (e) => i(l, s({
   type: "polarArea"
-}, e)), fe = (e) => s(l, i({
+}, e)), me = (e) => i(l, s({
   type: "bubble"
-}, e)), he = (e) => s(l, i({
+}, e)), he = (e) => i(l, s({
   type: "pie"
-}, e)), me = (e) => s(l, i({
+}, e)), Ce = (e) => i(l, s({
   type: "scatter"
 }, e));
 export {
   pe as Bar,
-  fe as Bubble,
+  me as Bubble,
   l as DefaultChart,
   ge as Doughnut,
-  ce as Line,
+  ue as Line,
   he as Pie,
-  de as PolarArea,
-  ue as Radar,
-  me as Scatter,
-  re as registerBar,
-  ie as registerBubble,
+  fe as PolarArea,
+  de as Radar,
+  Ce as Scatter,
+  oe as registerBar,
+  le as registerBubble,
   a as registerComponent,
-  Z as registerCore,
-  ee as registerCoreExtra,
-  ne as registerDoughnut,
-  te as registerLine,
-  ae as registerPie,
+  ee as registerCore,
+  te as registerCoreExtra,
+  ae as registerDoughnut,
+  re as registerLine,
+  ie as registerPie,
   se as registerPolarArea,
-  oe as registerRadar,
-  le as registerScatter
+  ne as registerRadar,
+  ce as registerScatter
 };
 //# sourceMappingURL=solid-chart.js.map

package/dist/solid-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"solid-chart.js","sources":["../src/chart.tsx","../src/registry.ts","../src/typedCharts.tsx"],"sourcesContent":["import { mergeRefs } from '@solid-primitives/refs';\nimport { Chart, ChartData, ChartItem, ChartOptions, Plugin } from 'chart.js';\nimport { Component, createEffect, mergeProps, on, onCleanup, onMount } from 'solid-js';\nimport { unwrap } from 'solid-js/store';\n\nimport { ChartProps } from './types';\n\nexport const DefaultChart: Component<ChartProps> = (props) => {\n  let canvasRef: HTMLCanvasElement | null;\n  let chart: Chart | undefined;\n\n  const merged = mergeProps(\n    {\n      width: 512,\n      height: 512,\n      type: 'line' as const,\n      data: {} as ChartData,\n      options: { responsive: true } as ChartOptions,\n      plugins: [] as Plugin[],\n    },\n    props,\n  );\n\n  const init = () => {\n    if (!canvasRef) return;\n    const ctx = canvasRef.getContext('2d') as ChartItem;\n\n    // Clean unwrap and a safe copy of options\n    const rawOptions = unwrap(merged.options);\n    const configOptions = { ...rawOptions };\n\n    // Handle the radar scale issue without mutating props\n    if (merged.type !== 'radar' && configOptions.scales?.r) {\n      const { r: _, ...otherScales } = configOptions.scales;\n      configOptions.scales = otherScales;\n    }\n\n    chart = new Chart(ctx, {\n      type: merged.type,\n      data: unwrap(merged.data), // unwrap stores before passing to external libs\n      options: configOptions,\n      plugins: merged.plugins,\n    });\n  };\n\n  onMount(() => init());\n\n  createEffect(\n    on(\n      () => merged.data,\n      (newData) => {\n        if (chart) {\n          chart.data = unwrap(newData);\n          chart.update('none'); // Use 'none' for better performance on data updates\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.options,\n      (newOptions) => {\n        if (chart) {\n          chart.options = unwrap(newOptions);\n          chart.update();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      [() => merged.width, () => merged.height],\n      () => chart?.resize(merged.width, merged.height),\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.type,\n      () => {\n        if (chart) {\n          chart.destroy();\n          init();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  onCleanup(() => {\n    chart?.destroy();\n    // Standard cleanup for the ref\n    mergeRefs(props.ref, null);\n  });\n\n  return (\n    <canvas\n      ref={mergeRefs(props.ref, (el) => (canvasRef = el))}\n      height={merged.height}\n      width={merged.width}\n    >\n      {merged.fallback}\n    </canvas>\n  );\n};\n","import {\n  ArcElement,\n  BarController,\n  BarElement,\n  BubbleController,\n  CategoryScale,\n  Chart,\n  ChartComponent,\n  Colors,\n  DoughnutController,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PieController,\n  PointElement,\n  PolarAreaController,\n  RadarController,\n  RadialLinearScale,\n  ScatterController,\n  SubTitle,\n  Title,\n  Tooltip,\n} from 'chart.js';\n\n/**\n * Global registration helper for custom components and plugins.\n * Use this to register 3rd party plugins or custom scales.\n */\nexport const registerComponent = (...args: ChartComponent[]) => Chart.register(...args);\n\n/**\n * Essential plugins most charts need.\n */\nexport const registerCore = () => registerComponent(Tooltip, Legend);\n\n/**\n * Extra standard plugins for titles and automatic color palettes.\n */\nexport const registerCoreExtra = () => registerComponent(Title, Tooltip, Legend, Colors, SubTitle);\n\n/**\n * Essential for Line chart.\n */\nexport const registerLine = () =>\n  registerComponent(LineController, CategoryScale, LinearScale, PointElement, LineElement);\n\n/**\n * Essential for Bar chart.\n */\nexport const registerBar = () =>\n  registerComponent(BarController, CategoryScale, LinearScale, BarElement);\n\n/**\n * Essential for Radar chart.\n */\nexport const registerRadar = () =>\n  registerComponent(RadarController, RadialLinearScale, PointElement, LineElement);\n\n/**\n * Essential for Doughnut chart.\n */\nexport const registerDoughnut = () => registerComponent(DoughnutController, ArcElement);\n\n/**\n * Essential for Pie chart.\n */\nexport const registerPie = () => registerComponent(PieController, ArcElement);\n\n/**\n * Essential for PolarArea chart.\n */\nexport const registerPolarArea = () =>\n  registerComponent(PolarAreaController, RadialLinearScale, ArcElement);\n\n/**\n * Essential for Bubble chart.\n */\nexport const registerBubble = () => registerComponent(BubbleController, LinearScale, PointElement);\n\n/**\n * Essential for Scatter chart.\n */\nexport const registerScatter = () =>\n  registerComponent(ScatterController, LinearScale, PointElement);\n","import { Component } from 'solid-js';\n\nimport { DefaultChart } from './chart';\nimport type { ChartProps } from './types';\n\n// Omit 'type' from props since these components define the type themselves\nexport type TypedChartProps = Omit<ChartProps, 'type'>;\ntype TypedChart = Component<TypedChartProps>;\n\nexport const Line: TypedChart = (props) => <DefaultChart type=\"line\" {...props} />;\nexport const Bar: TypedChart = (props) => <DefaultChart type=\"bar\" {...props} />;\nexport const Radar: TypedChart = (props) => <DefaultChart type=\"radar\" {...props} />;\nexport const Doughnut: TypedChart = (props) => <DefaultChart type=\"doughnut\" {...props} />;\nexport const PolarArea: TypedChart = (props) => <DefaultChart type=\"polarArea\" {...props} />;\nexport const Bubble: TypedChart = (props) => <DefaultChart type=\"bubble\" {...props} />;\nexport const Pie: TypedChart = (props) => <DefaultChart type=\"pie\" {...props} />;\nexport const Scatter: TypedChart = (props) => <DefaultChart type=\"scatter\" {...props} />;\n"],"names":["DefaultChart","props","canvasRef","chart","merged","mergeProps","width","height","type","data","options","responsive","plugins","init","ctx","getContext","configOptions","unwrap","rawOptions","scales","r","_","otherScales","Chart","onMount","createEffect","on","newData","update","defer","newOptions","resize","destroy","onCleanup","mergeRefs","ref","_el$","_tmpl$","_ref$","el","_$use","_$insert","fallback","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","registerComponent","args","registerCore","Tooltip","Legend","registerCoreExtra","Title","Colors","SubTitle","registerLine","LineController","CategoryScale","LinearScale","PointElement","LineElement","registerBar","BarController","BarElement","registerRadar","RadarController","RadialLinearScale","registerDoughnut","DoughnutController","ArcElement","registerPie","PieController","registerPolarArea","PolarAreaController","registerBubble","BubbleController","registerScatter","ScatterController","Line","_$createComponent","_$mergeProps","Bar","Radar","Doughnut","PolarArea","Bubble","Pie","Scatter"],"mappings":"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"}
+{"version":3,"file":"solid-chart.js","sources":["../src/chart.tsx","../src/registry.ts","../src/typedCharts.tsx"],"sourcesContent":["import { mergeRefs } from '@solid-primitives/refs';\nimport { Chart, ChartData, ChartItem, ChartOptions, Plugin } from 'chart.js';\nimport { Component, createEffect, mergeProps, on, onCleanup, onMount } from 'solid-js';\nimport { unwrap } from 'solid-js/store';\n\nimport { ChartProps } from './types';\n\nexport const DefaultChart: Component<ChartProps> = (props) => {\n  let retryCount = 0;\n  let canvasRef: HTMLCanvasElement | null;\n  let chart: Chart | undefined;\n\n  const merged = mergeProps(\n    {\n      width: 512,\n      height: 512,\n      type: 'line' as const,\n      data: {} as ChartData,\n      options: { responsive: true } as ChartOptions,\n      plugins: [] as Plugin[],\n    },\n    props,\n  );\n\n  const init = () => {\n    if (!canvasRef) return;\n\n    // Is the canvas actually in the document?\n    if (!canvasRef.isConnected) {\n      retryCount++;\n\n      // Warn if it takes an abnormally long time (> 1 second)\n      // Assuming ~60fps, 60 retries is roughly 1 second.\n      if (retryCount === 60) {\n        // eslint-disable-next-line no-console\n        console.warn('Solid-Chart: Canvas layout is delayed. Still retrying...');\n      }\n\n      requestAnimationFrame(init);\n      return;\n    }\n\n    // Success! Reset counter and proceed\n    retryCount = 0;\n\n    const ctx = canvasRef.getContext('2d') as ChartItem;\n\n    // Clean unwrap and a safe copy of options\n    const rawOptions = unwrap(merged.options);\n    const configOptions = { ...rawOptions };\n\n    // Handle the radar scale issue without mutating props\n    if (merged.type !== 'radar' && configOptions.scales?.r) {\n      const { r: _, ...otherScales } = configOptions.scales;\n      configOptions.scales = otherScales;\n    }\n\n    chart = new Chart(ctx, {\n      type: merged.type,\n      data: unwrap(merged.data), // unwrap stores before passing to external libs\n      options: configOptions,\n      plugins: merged.plugins,\n    });\n  };\n\n  onMount(() => init());\n\n  createEffect(\n    on(\n      () => merged.data,\n      (newData) => {\n        if (chart) {\n          chart.data = unwrap(newData);\n          chart.update('none'); // Use 'none' for better performance on data updates\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.options,\n      (newOptions) => {\n        if (chart) {\n          chart.options = unwrap(newOptions);\n          chart.update();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      [() => merged.width, () => merged.height],\n      () => chart?.resize(merged.width, merged.height),\n      { defer: true },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => merged.type,\n      () => {\n        if (chart) {\n          chart.destroy();\n          init();\n        }\n      },\n      { defer: true },\n    ),\n  );\n\n  onCleanup(() => {\n    chart?.destroy();\n    // Standard cleanup for the ref\n    mergeRefs(props.ref, null);\n  });\n\n  return (\n    <canvas\n      ref={mergeRefs(props.ref, (el) => (canvasRef = el))}\n      height={merged.height}\n      width={merged.width}\n    >\n      {merged.fallback}\n    </canvas>\n  );\n};\n","import {\n  ArcElement,\n  BarController,\n  BarElement,\n  BubbleController,\n  CategoryScale,\n  Chart,\n  ChartComponent,\n  Colors,\n  DoughnutController,\n  Legend,\n  LinearScale,\n  LineController,\n  LineElement,\n  PieController,\n  PointElement,\n  PolarAreaController,\n  RadarController,\n  RadialLinearScale,\n  ScatterController,\n  SubTitle,\n  Title,\n  Tooltip,\n} from 'chart.js';\n\n/**\n * Global registration helper for custom components and plugins.\n * Use this to register 3rd party plugins or custom scales.\n */\nexport const registerComponent = (...args: ChartComponent[]) => Chart.register(...args);\n\n/**\n * Essential plugins most charts need.\n */\nexport const registerCore = () => registerComponent(Tooltip, Legend);\n\n/**\n * Extra standard plugins for titles and automatic color palettes.\n */\nexport const registerCoreExtra = () => registerComponent(Title, Tooltip, Legend, Colors, SubTitle);\n\n/**\n * Essential for Line chart.\n */\nexport const registerLine = () =>\n  registerComponent(LineController, CategoryScale, LinearScale, PointElement, LineElement);\n\n/**\n * Essential for Bar chart.\n */\nexport const registerBar = () =>\n  registerComponent(BarController, CategoryScale, LinearScale, BarElement);\n\n/**\n * Essential for Radar chart.\n */\nexport const registerRadar = () =>\n  registerComponent(RadarController, RadialLinearScale, PointElement, LineElement);\n\n/**\n * Essential for Doughnut chart.\n */\nexport const registerDoughnut = () => registerComponent(DoughnutController, ArcElement);\n\n/**\n * Essential for Pie chart.\n */\nexport const registerPie = () => registerComponent(PieController, ArcElement);\n\n/**\n * Essential for PolarArea chart.\n */\nexport const registerPolarArea = () =>\n  registerComponent(PolarAreaController, RadialLinearScale, ArcElement);\n\n/**\n * Essential for Bubble chart.\n */\nexport const registerBubble = () => registerComponent(BubbleController, LinearScale, PointElement);\n\n/**\n * Essential for Scatter chart.\n */\nexport const registerScatter = () =>\n  registerComponent(ScatterController, LinearScale, PointElement);\n","import { Component } from 'solid-js';\n\nimport { DefaultChart } from './chart';\nimport type { ChartProps } from './types';\n\n// Omit 'type' from props since these components define the type themselves\nexport type TypedChartProps = Omit<ChartProps, 'type'>;\ntype TypedChart = Component<TypedChartProps>;\n\nexport const Line: TypedChart = (props) => <DefaultChart type=\"line\" {...props} />;\nexport const Bar: TypedChart = (props) => <DefaultChart type=\"bar\" {...props} />;\nexport const Radar: TypedChart = (props) => <DefaultChart type=\"radar\" {...props} />;\nexport const Doughnut: TypedChart = (props) => <DefaultChart type=\"doughnut\" {...props} />;\nexport const PolarArea: TypedChart = (props) => <DefaultChart type=\"polarArea\" {...props} />;\nexport const Bubble: TypedChart = (props) => <DefaultChart type=\"bubble\" {...props} />;\nexport const Pie: TypedChart = (props) => <DefaultChart type=\"pie\" {...props} />;\nexport const Scatter: TypedChart = (props) => <DefaultChart type=\"scatter\" {...props} />;\n"],"names":["DefaultChart","props","retryCount","canvasRef","chart","merged","mergeProps","width","height","type","data","options","responsive","plugins","init","isConnected","console","warn","requestAnimationFrame","ctx","getContext","configOptions","unwrap","rawOptions","scales","r","_","otherScales","Chart","onMount","createEffect","on","newData","update","defer","newOptions","resize","destroy","onCleanup","mergeRefs","ref","_el$","_tmpl$","_ref$","el","_$use","_$insert","fallback","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","registerComponent","args","registerCore","Tooltip","Legend","registerCoreExtra","Title","Colors","SubTitle","registerLine","LineController","CategoryScale","LinearScale","PointElement","LineElement","registerBar","BarController","BarElement","registerRadar","RadarController","RadialLinearScale","registerDoughnut","DoughnutController","ArcElement","registerPie","PieController","registerPolarArea","PolarAreaController","registerBubble","BubbleController","registerScatter","ScatterController","Line","_$createComponent","_$mergeProps","Bar","Radar","Doughnut","PolarArea","Bubble","Pie","Scatter"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amad3v/solid-chart",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": {
     "name": "Mohamed JOUINI",
     "email": "amad3v@gmail.com",

package/src/chart.tsx

@@ -6,6 +6,7 @@ import { unwrap } from 'solid-js/store';
 import { ChartProps } from './types';
 
 export const DefaultChart: Component<ChartProps> = (props) => {
+  let retryCount = 0;
   let canvasRef: HTMLCanvasElement | null;
   let chart: Chart | undefined;
 
@@ -23,6 +24,25 @@ export const DefaultChart: Component<ChartProps> = (props) => {
 
   const init = () => {
     if (!canvasRef) return;
+
+    // Is the canvas actually in the document?
+    if (!canvasRef.isConnected) {
+      retryCount++;
+
+      // Warn if it takes an abnormally long time (> 1 second)
+      // Assuming ~60fps, 60 retries is roughly 1 second.
+      if (retryCount === 60) {
+        // eslint-disable-next-line no-console
+        console.warn('Solid-Chart: Canvas layout is delayed. Still retrying...');
+      }
+
+      requestAnimationFrame(init);
+      return;
+    }
+
+    // Success! Reset counter and proceed
+    retryCount = 0;
+
     const ctx = canvasRef.getContext('2d') as ChartItem;
 
     // Clean unwrap and a safe copy of options

package/src/env.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_SOLID_CHART_NAME: string;
-  readonly VITE_SOLID_CHART_VER: string;
-}
-
-export interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}