gridviz 2.0.29 → 2.0.32

package/package.json

@@ -1,8 +1,7 @@
 {
     "name": "gridviz",
-    "version": "2.0.29",
+    "version": "2.0.32",
     "description": "Visualization tool for gridded statistics",
-    "type": "module",
     "keywords": [
         "statistics",
         "grid",
@@ -28,6 +27,7 @@
         "url": "https://github.com/eurostat/gridviz/issues",
         "email": "Joseph.DAVIES@ext.ec.europa.eu"
     },
+    "type": "module",
     "main": "dist/gridviz.min.js",
     "module": "dist/gridviz.min.js",
     "exports": {
@@ -35,11 +35,11 @@
         "default": "./src/index.js"
     },
     "scripts": {
-        "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config webpack.config.dev.js",
-        "start-dev": "webpack --config webpack.config.dev.js",
+        "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config webpack.config.dev.cjs",
+        "start-dev": "webpack --config webpack.config.dev.cjs",
         "server": "webpack serve -c webpack.config.dev.js --static ./",
         "doc": "./node_modules/.bin/jsdoc src/ src/dataset src/legend src/style -d docs/jsdoc",
-        "build": "webpack --config webpack.config.prod.js",
+        "build": "webpack --config webpack.config.prod.cjs",
         "test": "jest"
     },
     "files": [
@@ -71,5 +71,8 @@
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^4.11.1",
         "webpack-livereload-plugin": "^3.0.2"
+    },
+    "engines": {
+        "node": ">=14"
     }
 }

package/src/App.js

@@ -1,21 +1,22 @@
 //@ts-check
 'use strict'
 
-import { GeoCanvas } from './GeoCanvas'
-import { Layer } from './Layer'
-import { Dataset } from './Dataset'
-import { Tooltip } from './Tooltip'
-
-import { CSVGrid } from './dataset/CSVGrid'
+// internal imports
+import { GeoCanvas } from './GeoCanvas.js'
+import { Layer } from './Layer.js'
+import { Dataset } from './Dataset.js'
+import { Tooltip } from './Tooltip.js'
+import { CSVGrid } from './dataset/CSVGrid.js'
 //import { ParquetGrid } from './dataset/ParquetGrid';
-import { TiledGrid } from './dataset/TiledGrid'
-import { BackgroundLayer } from './BackgroundLayer'
-import { BackgroundLayerWMS } from './BackgroundLayerWMS'
-import { LabelLayer } from './LabelLayer'
-import { LineLayer } from './LineLayer'
-
+import { TiledGrid } from './dataset/TiledGrid.js'
+import { BackgroundLayer } from './BackgroundLayer.js'
+import { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
+import { LabelLayer } from './LabelLayer.js'
+import { LineLayer } from './LineLayer.js'
+import { monitor, monitorDuration } from './utils/Utils.js'
+
+// external imports
 import { select } from 'd3-selection'
-import { monitor, monitorDuration } from './utils/Utils'
 
 /**
  * A gridviz application.
@@ -159,6 +160,9 @@ export class App {
 
             if (monitor) monitorDuration('End redraw')
 
+            // listen for resize events on the App's container and handle them
+            this.defineResizeObserver(container, canvas)
+
             return this
         }
 
@@ -250,7 +254,9 @@ export class App {
                 }
 
                 //draw image saved + draw rectangle
-                const rectWPix = this.selectionRectangleWidthPix ? this.selectionRectangleWidthPix(focus.resolution, this.getZoomFactor()) : 4;
+                const rectWPix = this.selectionRectangleWidthPix
+                    ? this.selectionRectangleWidthPix(focus.resolution, this.getZoomFactor())
+                    : 4
                 this.cg.initCanvasTransform()
                 this.cg.ctx.strokeStyle = this.selectionRectangleColor
                 this.cg.ctx.lineWidth = rectWPix
@@ -648,4 +654,28 @@ export class App {
         this.cg.setViewFromURL()
         return this
     }
+
+    /**
+     * @description Add a resize event observer to the Apps container and update the canvas accordingly
+     * @param {HTMLDivElement} container The App's container element
+     * @param {HTMLCanvasElement} canvas The App canvas element
+     * @memberof App
+     */
+    defineResizeObserver(container, canvas) {
+        // listen to resize events
+        const resizeObserver = new ResizeObserver(() => {
+            // update the app and canvas size
+            if (this.h !== container.clientHeight || this.w !== container.clientWidth) {
+                this.h = container.clientHeight
+                this.w = container.clientWidth
+                this.cg.h = container.clientHeight
+                this.cg.w = container.clientWidth
+                canvas.setAttribute('width', '' + this.w)
+                canvas.setAttribute('height', '' + this.h)
+                this.redraw()
+            }
+        })
+
+        resizeObserver.observe(container)
+    }
 }

package/src/dataset/COGeo.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { DatasetComponent } from '../DatasetComponent'
+import { DatasetComponent } from '../DatasetComponent.js'
 
 /**
  * @todo

package/src/dataset/CSVGrid.js

@@ -4,7 +4,7 @@
 /** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope }} GridInfo */
 
 import { csv } from 'd3-fetch'
-import { DatasetComponent } from '../DatasetComponent'
+import { DatasetComponent } from '../DatasetComponent.js'
 
 /**
  * A dataset composed of a single CSV file (not tiled).
@@ -43,7 +43,6 @@ export class CSVGrid extends DatasetComponent {
 
         //load data
         this.infoLoadingStatus = 'loading'
-
         ;(async () => {
             try {
                 const data = await csv(this.url)

package/src/dataset/GeoTIFF.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { DatasetComponent } from '../DatasetComponent'
+import { DatasetComponent } from '../DatasetComponent.js'
 //import { fromUrl } from "geotiff"
 
 /**

package/src/dataset/ParquetGrid.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { DatasetComponent } from '../DatasetComponent'
+import { DatasetComponent } from '../DatasetComponent.js'
 import { tableFromIPC } from 'apache-arrow'
 //import { readParquet } from "parquet-wasm"
 
@@ -49,7 +49,6 @@ export class ParquetGrid extends DatasetComponent {
 
         //load data
         this.infoLoadingStatus = 'loading'
-
         ;(async () => {
             try {
                 const resp = await fetch(this.url)

package/src/dataset/TiledGrid.js

@@ -3,11 +3,14 @@
 
 /** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope, format:import("../DatasetComponent").Format }} GridInfo */
 
+// internal
+import { GridTile } from './GridTile.js'
+import { App } from '../App.js'
+import { DatasetComponent } from '../DatasetComponent.js'
+import { monitor, monitorDuration } from '../utils/Utils.js'
+
+// external
 import { json, csv } from 'd3-fetch'
-import { GridTile } from './GridTile'
-import { App } from '../App'
-import { DatasetComponent } from '../DatasetComponent'
-import { monitor, monitorDuration } from '../utils/Utils'
 import { tableFromIPC } from 'apache-arrow'
 
 /**
@@ -142,7 +145,6 @@ export class TiledGrid extends DatasetComponent {
 
                 //mark tile as loading
                 this.cache[xT][yT] = 'loading'
-
                 ;(async () => {
                     //request tile
                     /** @type {Array.<import("../Dataset").Cell>}  */

package/src/index.js

@@ -1,62 +1,63 @@
 //@ts-check
 'use strict'
 
-//the application
-export { App } from './App'
-export { GeoCanvas } from './GeoCanvas'
-export { Style } from './Style'
-export { Layer } from './Layer'
-export { Dataset } from './Dataset'
-export { DatasetComponent } from './DatasetComponent'
-
-//export dataset types
-export { TiledGrid } from './dataset/TiledGrid'
-export { CSVGrid } from './dataset/CSVGrid'
+// the application
+export { App } from './App.js'
+export { GeoCanvas } from './GeoCanvas.js'
+export { Style } from './Style.js'
+export { Layer } from './Layer.js'
+export { Dataset } from './Dataset.js'
+export { DatasetComponent } from './DatasetComponent.js'
+
+// export dataset types
+export { TiledGrid } from './dataset/TiledGrid.js'
+export { CSVGrid } from './dataset/CSVGrid.js'
 //export { ParquetGrid } from "./dataset/ParquetGrid"
 //export { GeoTIFF } from "./dataset/GeoTIFF"
 
-//export styles
-export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle'
-export { StrokeStyle } from './style/StrokeStyle'
-export { JoyPlotStyle } from './style/JoyPlotStyle'
-export { CompositionStyle } from './style/CompositionStyle'
-export { SegmentStyle } from './style/SegmentStyle'
-export { TextStyle } from './style/TextStyle'
-export { KernelSmoothingStyle } from './style/KernelSmoothingStyle'
+// export styles
+export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle.js'
+export { StrokeStyle } from './style/StrokeStyle.js'
+export { JoyPlotStyle } from './style/JoyPlotStyle.js'
+export { CompositionStyle } from './style/CompositionStyle.js'
+export { SegmentStyle } from './style/SegmentStyle.js'
+export { TextStyle } from './style/TextStyle.js'
+export { KernelSmoothingStyle } from './style/KernelSmoothingStyle.js'
 //export { KernelSmoothingOldStyle } from "./style/KernelSmoothingStyle"
 //export { KernelSmoothingWGLStyle } from "./style/KernelSmoothingStyle"
-export { PillarStyle } from './style/PillarStyle'
-export { SideStyle } from './style/SideStyle'
-export { ContourStyle } from './style/ContourStyle'
-export { SideCatStyle } from './style/SideCatStyle'
-export { DotDensityStyle } from './style/DotDensityStyle'
-export { TanakaStyle } from './style/TanakaStyle'
-export { LegoStyle } from './style/LegoStyle'
-export { SquareColorWGLStyle } from './style/SquareColorWGLStyle'
-export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle'
-export { MosaicStyle } from './style/MosaicStyle'
-export { NinjaStarStyle } from './style/NinjaStarStyle'
-
-//export additional layers
-export { BackgroundLayer } from './BackgroundLayer'
-export { BackgroundLayerWMS } from './BackgroundLayerWMS'
-export { LabelLayer } from './LabelLayer'
-export { LineLayer as BoundaryLayer } from './LineLayer'
-
-export { ColorLegend } from './legend/ColorLegend'
-export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend'
-export { ColorCategoryLegend } from './legend/ColorCategoryLegend'
-export { SizeLegend } from './legend/SizeLegend'
-export { SegmentWidthLegend } from './legend/SegmentWidthLegend'
-export { SegmentOrientationLegend } from './legend/SegmentOrientationLegend'
-
-//export { goToStraight, zoomTo } from "./utils/zoomUtils"
+export { PillarStyle } from './style/PillarStyle.js'
+export { SideStyle } from './style/SideStyle.js'
+export { ContourStyle } from './style/ContourStyle.js'
+export { SideCatStyle } from './style/SideCatStyle.js'
+export { DotDensityStyle } from './style/DotDensityStyle.js'
+export { TanakaStyle } from './style/TanakaStyle.js'
+export { LegoStyle } from './style/LegoStyle.js'
+export { SquareColorWGLStyle } from './style/SquareColorWGLStyle.js'
+export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle.js'
+export { MosaicStyle } from './style/MosaicStyle.js'
+export { NinjaStarStyle } from './style/NinjaStarStyle.js'
+
+// export additional layers
+export { BackgroundLayer } from './BackgroundLayer.js'
+export { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
+export { LabelLayer } from './LabelLayer.js'
+export { LineLayer as BoundaryLayer } from './LineLayer.js'
+
+// export legends
+export { ColorLegend } from './legend/ColorLegend.js'
+export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
+export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
+export { SizeLegend } from './legend/SizeLegend.js'
+export { SegmentWidthLegend } from './legend/SegmentWidthLegend.js'
+export { SegmentOrientationLegend } from './legend/SegmentOrientationLegend.js'
+
+// export { goToStraight, zoomTo } from "./utils/zoomUtils"
 export * from './utils/stretching.js'
 
-export { getClass } from './utils/Utils'
+export { getClass } from './utils/Utils.js'
 
+import { GeoCanvas } from './GeoCanvas.js'
 import { geoAzimuthalEqualArea } from 'd3-geo'
-import { GeoCanvas } from './GeoCanvas'
 
 /**
  * Returns label layer from Eurostat, for ETRS89-LAEA grids.
@@ -149,10 +150,10 @@ export const getEurostatBoundariesLayer = function (opts) {
                 return p.lvl == 3
                     ? [2 * zf, 2 * zf]
                     : p.lvl == 2
-                        ? [5 * zf, 2 * zf]
-                        : p.lvl == 1
-                            ? [5 * zf, 2 * zf]
-                            : [10 * zf, 3 * zf]
+                    ? [5 * zf, 2 * zf]
+                    : p.lvl == 1
+                    ? [5 * zf, 2 * zf]
+                    : [10 * zf, 3 * zf]
             else if (zf < 1000)
                 return p.lvl == 2 ? [5 * zf, 2 * zf] : p.lvl == 1 ? [5 * zf, 2 * zf] : [10 * zf, 3 * zf]
             else if (zf < 2000) return p.lvl == 1 ? [5 * zf, 2 * zf] : [10 * zf, 3 * zf]

package/src/legend/ColorCategoryLegend.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend'
+import { Legend } from '../Legend.js'
 
 /**
  * A legend element for color categrories.

package/src/legend/ColorDiscreteLegend.js

@@ -2,7 +2,7 @@
 'use strict'
 
 //import { select } from "d3-selection";
-import { Legend } from '../Legend'
+import { Legend } from '../Legend.js'
 //import { format } from "d3-format";
 
 /**

package/src/legend/ColorLegend.js

@@ -2,7 +2,7 @@
 'use strict'
 
 //import { select } from "d3-selection";
-import { Legend } from '../Legend'
+import { Legend } from '../Legend.js'
 import { format } from 'd3-format'
 
 /**

package/src/legend/SegmentOrientationLegend.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend'
+import { Legend } from '../Legend.js'
 
 /**
  * A legend element for segment orientation.

package/src/legend/SegmentWidthLegend.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend'
+import { Legend } from '../Legend.js'
 import { format } from 'd3-format'
 
 /**

package/src/legend/SizeLegend.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend'
+import { Legend } from '../Legend.js'
 import { format } from 'd3-format'
 
 /**

package/src/style/CompositionStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /** @typedef {"flag"|"piechart"|"ring"|"segment"|"radar"|"agepyramid"|"halftone"} CompositionType */
 
@@ -104,7 +104,7 @@ export class CompositionStyle extends Style {
             const yc = cell.y + offset.dy + (type_ === 'agepyramid' ? 0 : r * 0.5)
 
             //compute offset angle, when relevant
-            const offAng =  this.offsetAngle ? (this.offsetAngle(cell, r, zf) * Math.PI) / 180 : 0
+            const offAng = this.offsetAngle ? (this.offsetAngle(cell, r, zf) * Math.PI) / 180 : 0
 
             if (type_ === 'agepyramid' || type_ === 'radar' || type_ === 'halftone') {
                 //get cell category max value
@@ -118,8 +118,7 @@ export class CompositionStyle extends Style {
                 let cumul = 0
                 if (type_ === 'agepyramid' && this.agePyramidHeight)
                     cumul = (r - this.agePyramidHeight(cell, r, zf)) / 2
-                if (type_ === 'radar' || type_ === 'halftone')
-                    cumul = Math.PI / 2 + offAng
+                if (type_ === 'radar' || type_ === 'halftone') cumul = Math.PI / 2 + offAng
 
                 //compute the increment, which is the value to increment the cumul for each category
                 const incr =
@@ -249,9 +248,16 @@ export class CompositionStyle extends Style {
                         //draw
                         cg.ctx.beginPath()
                         cg.ctx.moveTo(xc, yc)
-                        cg.ctx.arc(xc, yc, sG * 0.5, a1+offAng, a2+offAng)
+                        cg.ctx.arc(xc, yc, sG * 0.5, a1 + offAng, a2 + offAng)
                         if (this.pieChartInternalRadiusFactor)
-                            cg.ctx.arc(xc, yc, sG * 0.5 * this.pieChartInternalRadiusFactor, a1+offAng, a2+offAng, true)
+                            cg.ctx.arc(
+                                xc,
+                                yc,
+                                sG * 0.5 * this.pieChartInternalRadiusFactor,
+                                a1 + offAng,
+                                a2 + offAng,
+                                true
+                            )
                         cg.ctx.closePath()
                         cg.ctx.fill()
                     } else if (type_ === 'ring') {

package/src/style/ContourStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { SideStyle } from './SideStyle'
+import { SideStyle } from './SideStyle.js'
 
 /** @typedef {{x:number,y:number,or:"v"|"h",value:number}} Side */
 

package/src/style/DotDensityStyle.js

@@ -1,12 +1,12 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 import { randomNormal } from 'd3-random'
-import { checkWebGLSupport, makeWebGLCanvas } from '../utils/webGLUtils'
-import { WebGLSquareColoring } from '../utils/WebGLSquareColoring'
+import { checkWebGLSupport, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoring } from '../utils/WebGLSquareColoring.js'
 import { color } from 'd3-color'
-import { monitor, monitorDuration } from '../utils/Utils'
+import { monitor, monitorDuration } from '../utils/Utils.js'
 
 /**
  *

package/src/style/JoyPlotStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  *

package/src/style/KernelSmoothingOldStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  * A style representing the cell as a smoothed layer, to smoothing local variations and show main trends across space.

package/src/style/KernelSmoothingStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 import { density2d } from 'fast-kde'
 
 /**

package/src/style/KernelSmoothingWGLStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 import { makeWebGLCanvas } from '../utils/webGLUtils'
 import { WebGLSquareColoringKS } from '../utils/WebGLSquareColoringKS'
 

package/src/style/LegoStyle.js

@@ -1,10 +1,10 @@
 //@ts-check
 'use strict'
 
-import { TanakaStyle } from './TanakaStyle'
-import { StrokeStyle } from './StrokeStyle'
-import { SquareColorCatWGLStyle } from './SquareColorCatWGLStyle'
-import { Style } from '../Style'
+import { TanakaStyle } from './TanakaStyle.js'
+import { StrokeStyle } from './StrokeStyle.js'
+import { SquareColorCatWGLStyle } from './SquareColorCatWGLStyle.js'
+import { Style } from '../Style.js'
 
 /**
  * @author Julien Gaffuri

package/src/style/MosaicStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  * @author Julien Gaffuri

package/src/style/NinjaStarStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  *
@@ -33,7 +33,7 @@ export class NinjaStarStyle extends Style {
 
         /** A function returning the shape.
          * @type {function(import("../Dataset").Cell):string} */
-        this.shape = opts.shape || (() => "o")
+        this.shape = opts.shape || (() => 'o')
     }
 
     /**

package/src/style/PillarStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  * @author Julien Gaffuri

package/src/style/SegmentStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  * A style where each cell is represented by a segment whose length, width, color and orientation can vary according to statistical values.

package/src/style/ShapeColorSizeStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  * A very generic style that shows grid cells with specific color, size and shape.

package/src/style/SideCatStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /** @typedef {{x:number,y:number,or:"v"|"h",v1:string|undefined,v2:string|undefined}} Side */
 

package/src/style/SideStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /** @typedef {{x:number,y:number,or:"v"|"h",value:number}} Side */
 

package/src/style/SquareColorCatWGLStyle.js

@@ -1,10 +1,10 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
-import { makeWebGLCanvas } from '../utils/webGLUtils'
-import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced'
-import { monitor, monitorDuration } from '../utils/Utils'
+import { Style } from '../Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced.js'
+import { monitor, monitorDuration } from '../utils/Utils.js'
 
 /**
  * Style based on webGL

package/src/style/SquareColorWGLStyle.js

@@ -1,10 +1,10 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
-import { makeWebGLCanvas } from '../utils/webGLUtils'
-import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced'
-import { monitor, monitorDuration } from '../utils/Utils'
+import { Style } from '../Style.js'
+import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
+import { monitor, monitorDuration } from '../utils/Utils.js'
 
 /**
  * Style based on webGL

package/src/style/StrokeStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style'
+import { Style } from '../Style.js'
 
 /**
  *