refactor: use .ts extension for relative imports in source

Change all import specifiers from ".js" to ".ts" in TypeScript source
files. Add allowImportingTsExtensions and rewriteRelativeImportExtensions
to tsconfig so tsc strips them to ".js" in the dist output — no build
pipeline changes needed. Update CLAUDE.md to reflect the new extension policy.

CLAUDE.md

@@ -51,4 +51,4 @@ For components that accept children (layers, popups, tooltips), use the `registe
 
 ### Output
 
-`tsc` compiles `src/` → `dist/` as individual ESM modules (`.js` + `.d.ts` + `.d.ts.map`), then `rollup -c` bundles `dist/index.js` (ESM), `dist/index.cjs` (CJS), and `dist/index.umd.js` (UMD) — each with minified variants. Leaflet is always external (never bundled). Imports within source use `.js` extensions (required for ESM `"moduleResolution": "bundler"`).
+`tsc` compiles `src/` → `dist/` as individual ESM modules (`.js` + `.d.ts` + `.d.ts.map`), then `rollup -c` bundles `dist/index.js` (ESM), `dist/index.cjs` (CJS), and `dist/index.umd.js` (UMD) — each with minified variants. Leaflet is always external (never bundled). Imports within source use `.ts` extensions; `rewriteRelativeImportExtensions` in tsconfig strips them to `.js` in the tsc output (`tsconfig.json:16`).

src/components/leaflet-circle-marker.ts

@@ -1,10 +1,10 @@
 import { CircleMarker } from 'leaflet';
-import { buildOptions, numAttr } from '../core/utils.js';
+import { buildOptions, numAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
+import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   lat: { kind: 'num', attr: 'lat', default: 0 },

src/components/leaflet-circle.ts

@@ -1,10 +1,10 @@
 import { Circle } from 'leaflet';
-import { buildOptions, numAttr } from '../core/utils.js';
+import { buildOptions, numAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
+import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   lat: { kind: 'num', attr: 'lat', default: 0 },

src/components/leaflet-control-attribution.ts

@@ -1,8 +1,8 @@
 import { Control, ControlPosition } from 'leaflet';
-import { registerWithParent } from '../core/utils.js';
+import { registerWithParent } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   position: { kind: 'str', attr: 'position', default: 'bottomright' },

src/components/leaflet-control-scale.ts

@@ -1,8 +1,8 @@
 import { Control, ControlPosition } from 'leaflet';
-import { registerWithParent } from '../core/utils.js';
+import { registerWithParent } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   position: { kind: 'str', attr: 'position', default: 'bottomleft' },

src/components/leaflet-control-zoom.ts

@@ -1,8 +1,8 @@
 import { Control, ControlPosition } from 'leaflet';
-import { registerWithParent } from '../core/utils.js';
+import { registerWithParent } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   position: { kind: 'str', attr: 'position', default: 'topleft' },

src/components/leaflet-feature-group.ts

@@ -1,6 +1,6 @@
 import { FeatureGroup, Layer } from 'leaflet';
-import { buildOptions } from '../core/utils.js';
+import { buildOptions } from '../core/utils.ts';
-import { registerChildren, unregisterChildren, getChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren, getChildren } from '../core/register.ts';
 
 export class LeafletFeatureGroup extends HTMLElement {
   #obj?: FeatureGroup;

src/components/leaflet-geojson.ts

@@ -1,9 +1,9 @@
 import { GeoJSON, PathOptions, Layer } from 'leaflet';
-import { buildOptions } from '../core/utils.js';
+import { buildOptions } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren, getChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren, getChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   data: { kind: 'str', attr: 'data', default: '' },

src/components/leaflet-image-overlay.ts

@@ -1,10 +1,10 @@
 import { ImageOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
 import type { ImageOverlayOptions } from 'leaflet';
-import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.js';
+import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   url: { kind: 'str', attr: 'url', default: '' },

src/components/leaflet-layer-group.ts

@@ -1,6 +1,6 @@
 import { LayerGroup, Layer } from 'leaflet';
-import { buildOptions } from '../core/utils.js';
+import { buildOptions } from '../core/utils.ts';
-import { registerChildren, unregisterChildren, getChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren, getChildren } from '../core/register.ts';
 
 export class LeafletLayerGroup extends HTMLElement {
   #obj?: LayerGroup;

src/components/leaflet-map.ts

@@ -1,5 +1,5 @@
 import { Icon, Map as LMap, MapOptions } from 'leaflet';
-import { LeafletRegisterEvent } from '../core/register.js';
+import { LeafletRegisterEvent } from '../core/register.ts';
 
 const DEFAULT_CSS_URL = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
 const DEFAULT_CSS_INTEGRITY = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';

src/components/leaflet-marker.ts

@@ -1,9 +1,9 @@
 import { Marker } from 'leaflet';
-import { buildOptions, numAttr, buildAttrMap, setLayerAttr } from '../core/utils.js';
+import { buildOptions, numAttr, buildAttrMap, setLayerAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   lat: { kind: 'num', attr: 'lat', default: 0 },

src/components/leaflet-polygon.ts

@@ -1,11 +1,11 @@
 import { Polygon } from 'leaflet';
-import { buildOptions } from '../core/utils.js';
+import { buildOptions } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
+import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
-import type { LeafletLine } from './leaflet-line.js';
+import type { LeafletLine } from './leaflet-line.ts';
 
 const PROPS = {
   color: { kind: 'str', attr: 'color', default: '#3388ff' },

src/components/leaflet-polyline.ts

@@ -1,11 +1,11 @@
 import { Polyline } from 'leaflet';
-import { buildOptions } from '../core/utils.js';
+import { buildOptions } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
+import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
-import type { LeafletLine } from './leaflet-line.js';
+import type { LeafletLine } from './leaflet-line.ts';
 
 const PROPS = {
   color: { kind: 'str', attr: 'color', default: '#3388ff' },

src/components/leaflet-popup.ts

@@ -1,8 +1,8 @@
 import { Popup } from 'leaflet';
-import { registerWithParent, buildOptions, numAttr } from '../core/utils.js';
+import { registerWithParent, buildOptions, numAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   lat: { kind: 'num', attr: 'lat', default: 0 },

src/components/leaflet-rectangle.ts

@@ -1,10 +1,10 @@
 import { Rectangle } from 'leaflet';
-import { buildOptions, parseBoundsAttr } from '../core/utils.js';
+import { buildOptions, parseBoundsAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
+import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   bounds: { kind: 'str', attr: 'bounds', default: '' },

src/components/leaflet-svg-overlay.ts

@@ -1,10 +1,10 @@
 import { SVGOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
 import type { ImageOverlayOptions } from 'leaflet';
-import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.js';
+import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   bounds: { kind: 'str', attr: 'bounds', default: '' },

src/components/leaflet-tile-layer-wms.ts

@@ -1,9 +1,9 @@
 import { TileLayer } from 'leaflet';
-import { buildOptions, buildAttrMap, setLayerAttr, parseAttributeValue } from '../core/utils.js';
+import { buildOptions, buildAttrMap, setLayerAttr, parseAttributeValue } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   url: { kind: 'str', attr: 'url', default: '' },

src/components/leaflet-tile-layer.ts

@@ -1,9 +1,9 @@
 import { TileLayer } from 'leaflet';
-import { buildOptions, buildAttrMap, setLayerAttr } from '../core/utils.js';
+import { buildOptions, buildAttrMap, setLayerAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   url: { kind: 'str', attr: 'url', default: '' },

src/components/leaflet-tooltip.ts

@@ -1,9 +1,9 @@
 import { Tooltip } from 'leaflet';
 import type { TooltipOptions } from 'leaflet';
-import { registerWithParent, buildOptions, numAttr } from '../core/utils.js';
+import { registerWithParent, buildOptions, numAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   lat: { kind: 'num', attr: 'lat', default: 0 },

src/components/leaflet-video-overlay.ts

@@ -1,10 +1,10 @@
 import { VideoOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
 import type { VideoOverlayOptions } from 'leaflet';
-import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.js';
+import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.ts';
-import { withProps } from '../core/with-props.js';
+import { withProps } from '../core/with-props.ts';
 
-import { registerChildren, unregisterChildren } from '../core/register.js';
+import { registerChildren, unregisterChildren } from '../core/register.ts';
-import type { PropDef } from '../core/props.js';
+import type { PropDef } from '../core/props.ts';
 
 const PROPS = {
   url: { kind: 'str', attr: 'url', default: '' },

src/core/path-style.ts

@@ -1,5 +1,5 @@
 import { Path } from 'leaflet';
-import { parseAttributeValue } from './utils.js';
+import { parseAttributeValue } from './utils.ts';
 
 // The set of HTML attribute names that map to Leaflet Path style options.
 // These are handled specially because Leaflet exposes them through

src/core/register.ts

@@ -1,5 +1,5 @@
 import { Layer, LayerGroup, Popup, Tooltip } from 'leaflet';
-import { registerWithParent } from './utils.js';
+import { registerWithParent } from './utils.ts';
 
 // Custom event type for the bubbling registration protocol. Carries the
 // Leaflet object and the originating element so the nearest parent can

src/core/utils.ts

@@ -1,4 +1,4 @@
-import type { PropDef, PropTypesFromTable } from './props.js';
+import type { PropDef, PropTypesFromTable } from './props.ts';
 import type { LatLngBoundsExpression } from 'leaflet';
 
 // Parses an HTML attribute string into a typed JS value:

src/core/with-props.ts

@@ -1,5 +1,5 @@
-import type { PropDef, PropTypesFromTable } from './props.js';
+import type { PropDef, PropTypesFromTable } from './props.ts';
-import { definePropAccessors } from './utils.js';
+import { definePropAccessors } from './utils.ts';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Ctor<T = object> = new (...args: any[]) => T;

src/index.ts

@@ -1,26 +1,26 @@
-export * from './core/utils.js';
+export * from './core/utils.ts';
-export * from './core/with-props.js';
+export * from './core/with-props.ts';
-export * from './core/path-style.js';
+export * from './core/path-style.ts';
-export * from './core/register.js';
+export * from './core/register.ts';
-export * from './core/props.js';
+export * from './core/props.ts';
-export * from './components/leaflet-map.js';
+export * from './components/leaflet-map.ts';
-export * from './components/leaflet-marker.js';
+export * from './components/leaflet-marker.ts';
-export * from './components/leaflet-circle.js';
+export * from './components/leaflet-circle.ts';
-export * from './components/leaflet-circle-marker.js';
+export * from './components/leaflet-circle-marker.ts';
-export * from './components/leaflet-line.js';
+export * from './components/leaflet-line.ts';
-export * from './components/leaflet-polygon.js';
+export * from './components/leaflet-polygon.ts';
-export * from './components/leaflet-polyline.js';
+export * from './components/leaflet-polyline.ts';
-export * from './components/leaflet-rectangle.js';
+export * from './components/leaflet-rectangle.ts';
-export * from './components/leaflet-tile-layer.js';
+export * from './components/leaflet-tile-layer.ts';
-export * from './components/leaflet-tile-layer-wms.js';
+export * from './components/leaflet-tile-layer-wms.ts';
-export * from './components/leaflet-image-overlay.js';
+export * from './components/leaflet-image-overlay.ts';
-export * from './components/leaflet-video-overlay.js';
+export * from './components/leaflet-video-overlay.ts';
-export * from './components/leaflet-svg-overlay.js';
+export * from './components/leaflet-svg-overlay.ts';
-export * from './components/leaflet-layer-group.js';
+export * from './components/leaflet-layer-group.ts';
-export * from './components/leaflet-feature-group.js';
+export * from './components/leaflet-feature-group.ts';
-export * from './components/leaflet-geojson.js';
+export * from './components/leaflet-geojson.ts';
-export * from './components/leaflet-control-zoom.js';
+export * from './components/leaflet-control-zoom.ts';
-export * from './components/leaflet-control-attribution.js';
+export * from './components/leaflet-control-attribution.ts';
-export * from './components/leaflet-control-scale.js';
+export * from './components/leaflet-control-scale.ts';
-export * from './components/leaflet-popup.js';
+export * from './components/leaflet-popup.ts';
-export * from './components/leaflet-tooltip.js';
+export * from './components/leaflet-tooltip.ts';

tsconfig.json

@@ -13,6 +13,8 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true,
   },
   "include": ["src/**/*"]
 }