From 10027c9fe7b3bbf1e8f018aa5fad7e4e7cedad66 Mon Sep 17 00:00:00 2001 From: Buddy Date: Tue, 9 Jun 2026 14:38:59 -0700 Subject: [PATCH] refactor: rename withProps to WithProps Capitalize the mixin factory name since it's used in the extends position (class Foo extends WithProps(...)). Update CLAUDE.md to match. --- CLAUDE.md | 10 +++++----- src/components/leaflet-circle-marker.ts | 4 ++-- src/components/leaflet-circle.ts | 4 ++-- src/components/leaflet-control-attribution.ts | 4 ++-- src/components/leaflet-control-scale.ts | 4 ++-- src/components/leaflet-control-zoom.ts | 4 ++-- src/components/leaflet-geojson.ts | 4 ++-- src/components/leaflet-image-overlay.ts | 4 ++-- src/components/leaflet-marker.ts | 4 ++-- src/components/leaflet-polygon.ts | 4 ++-- src/components/leaflet-polyline.ts | 4 ++-- src/components/leaflet-popup.ts | 4 ++-- src/components/leaflet-rectangle.ts | 4 ++-- src/components/leaflet-svg-overlay.ts | 4 ++-- src/components/leaflet-tile-layer-wms.ts | 4 ++-- src/components/leaflet-tile-layer.ts | 4 ++-- src/components/leaflet-tooltip.ts | 4 ++-- src/components/leaflet-video-overlay.ts | 4 ++-- src/core/utils.ts | 2 +- src/core/with-props.ts | 4 ++-- 20 files changed, 42 insertions(+), 42 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 4dca9c6..056f032 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -17,9 +17,9 @@ There are no tests in this project. To preview components locally, open `index.h This library wraps [Leaflet.js](https://leafletjs.com/) as native Web Components (Custom Elements). Each HTML element maps 1:1 to a Leaflet object. -### `withProps` mixin: `src/core/with-props.ts` +### `WithProps` mixin: `src/core/with-props.ts` -The `withProps(Base, PROPS)` mixin factory replaces the old `LeafletElement` base class. Each component defines a `PROPS` table (a const record mapping kebab-case attribute names to `PropDef` descriptors), then extends `withProps(HTMLElement, PROPS)`. The mixin handles: +The `WithProps(Base, PROPS)` mixin factory replaces the old `LeafletElement` base class. Each component defines a `PROPS` table (a const record mapping kebab-case attribute names to `PropDef` descriptors), then extends `WithProps(HTMLElement, PROPS)`. The mixin handles: - `observedAttributes` getter derived from the PROPS table keys. - `definePropAccessors` — property getters/setters on the prototype that sync attributes. @@ -33,10 +33,10 @@ The `withProps(Base, PROPS)` mixin factory replaces the old `LeafletElement` bas ### Child component pattern -All non-map components extend `withProps(HTMLElement, PROPS)`. To add a new component: +All non-map components extend `WithProps(HTMLElement, PROPS)`. To add a new component: 1. Define a `PROPS = {...}` const table mapping kebab-case attributes to `PropDef` entries. -2. Declare `class LeafletFoo extends withProps(HTMLElement, PROPS)` implementing `createLeafletObject(): L.Layer`. +2. Declare `class LeafletFoo extends WithProps(HTMLElement, PROPS)` implementing `createLeafletObject(): L.Layer`. 3. Override `updateLeafletObject(name, val)` only if the default setter-based update won't work (common for coordinate pairs). 4. Call `customElements.define('leaflet-foo', LeafletFoo)` at the bottom. 5. Export from `src/index.ts`. @@ -47,7 +47,7 @@ For components that accept children (layers, popups, tooltips), use the `registe - **`leaflet-polygon`** uses `` children for vertices. The polygon collects lat/lng from child `leaflet-line` elements rather than having them as direct attributes. - **`leaflet-popup`** / **`leaflet-tooltip`**: content comes from `innerHTML`, not attributes. `leaflet-popup` watches for DOM mutations to keep Leaflet in sync. -- **`leaflet-layer-group`** / **`leaflet-feature-group`**: passthrough containers extending `HTMLElement` directly (not via `withProps`). Children register themselves into them via the standard bubble mechanism. +- **`leaflet-layer-group`** / **`leaflet-feature-group`**: passthrough containers extending `HTMLElement` directly (not via `WithProps`). Children register themselves into them via the standard bubble mechanism. ### Output diff --git a/src/components/leaflet-circle-marker.ts b/src/components/leaflet-circle-marker.ts index d2c0e6a..1b3e3f2 100644 --- a/src/components/leaflet-circle-marker.ts +++ b/src/components/leaflet-circle-marker.ts @@ -1,6 +1,6 @@ import { CircleMarker } from 'leaflet'; import { buildOptions, numAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts'; @@ -18,7 +18,7 @@ const PROPS = defineProps({ fillOpacity: num(0.2), }); -export default class LeafletCircleMarker extends withProps(HTMLElement, PROPS) { +export default class LeafletCircleMarker extends WithProps(HTMLElement, PROPS) { #obj?: CircleMarker; connectedCallback() { diff --git a/src/components/leaflet-circle.ts b/src/components/leaflet-circle.ts index effed4d..e56eda7 100644 --- a/src/components/leaflet-circle.ts +++ b/src/components/leaflet-circle.ts @@ -1,6 +1,6 @@ import { Circle } from 'leaflet'; import { buildOptions, numAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts'; @@ -18,7 +18,7 @@ const PROPS = defineProps({ fillOpacity: num(0.2), }); -export default class LeafletCircle extends withProps(HTMLElement, PROPS) { +export default class LeafletCircle extends WithProps(HTMLElement, PROPS) { #obj?: Circle; connectedCallback() { diff --git a/src/components/leaflet-control-attribution.ts b/src/components/leaflet-control-attribution.ts index ad9e632..0b1b153 100644 --- a/src/components/leaflet-control-attribution.ts +++ b/src/components/leaflet-control-attribution.ts @@ -1,6 +1,6 @@ import { Control, ControlPosition } from 'leaflet'; import { registerWithParent } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { defineProps, str } from '../core/props.ts'; @@ -9,7 +9,7 @@ const PROPS = defineProps({ prefix: str(), }); -export default class LeafletControlAttribution extends withProps(HTMLElement, PROPS) { +export default class LeafletControlAttribution extends WithProps(HTMLElement, PROPS) { #obj?: Control.Attribution; connectedCallback() { diff --git a/src/components/leaflet-control-scale.ts b/src/components/leaflet-control-scale.ts index f373028..893d97b 100644 --- a/src/components/leaflet-control-scale.ts +++ b/src/components/leaflet-control-scale.ts @@ -1,6 +1,6 @@ import { Control, ControlPosition } from 'leaflet'; import { registerWithParent } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -12,7 +12,7 @@ const PROPS = defineProps({ updateWhenIdle: on(), }); -export default class LeafletControlScale extends withProps(HTMLElement, PROPS) { +export default class LeafletControlScale extends WithProps(HTMLElement, PROPS) { #obj?: Control.Scale; connectedCallback() { diff --git a/src/components/leaflet-control-zoom.ts b/src/components/leaflet-control-zoom.ts index 1f9b317..0d8f3d7 100644 --- a/src/components/leaflet-control-zoom.ts +++ b/src/components/leaflet-control-zoom.ts @@ -1,6 +1,6 @@ import { Control, ControlPosition } from 'leaflet'; import { registerWithParent } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { defineProps, str } from '../core/props.ts'; @@ -12,7 +12,7 @@ const PROPS = defineProps({ zoomOutTitle: str('Zoom out'), }); -export default class LeafletControlZoom extends withProps(HTMLElement, PROPS) { +export default class LeafletControlZoom extends WithProps(HTMLElement, PROPS) { #obj?: Control.Zoom; connectedCallback() { diff --git a/src/components/leaflet-geojson.ts b/src/components/leaflet-geojson.ts index b87279b..2d3ea55 100644 --- a/src/components/leaflet-geojson.ts +++ b/src/components/leaflet-geojson.ts @@ -1,6 +1,6 @@ import { GeoJSON, PathOptions, Layer } from 'leaflet'; import { buildOptions } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren, getChildren } from '../core/register.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -25,7 +25,7 @@ const PROP_BY_ATTR = new Map( Object.entries(PROPS).map(([name, spec]) => [spec.attr, name]), ); -export default class LeafletGeoJSON extends withProps(HTMLElement, PROPS) { +export default class LeafletGeoJSON extends WithProps(HTMLElement, PROPS) { #obj?: GeoJSON; connectedCallback() { diff --git a/src/components/leaflet-image-overlay.ts b/src/components/leaflet-image-overlay.ts index d3a24de..c3857ca 100644 --- a/src/components/leaflet-image-overlay.ts +++ b/src/components/leaflet-image-overlay.ts @@ -1,7 +1,7 @@ import { ImageOverlay, LatLngBounds, LatLngExpression } from 'leaflet'; import type { ImageOverlayOptions } from 'leaflet'; import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -20,7 +20,7 @@ const PROPS = defineProps({ const PROP_BY_ATTR = buildAttrMap(PROPS); -export default class LeafletImageOverlay extends withProps(HTMLElement, PROPS) { +export default class LeafletImageOverlay extends WithProps(HTMLElement, PROPS) { #obj?: ImageOverlay; connectedCallback() { diff --git a/src/components/leaflet-marker.ts b/src/components/leaflet-marker.ts index a90736c..f7b7247 100644 --- a/src/components/leaflet-marker.ts +++ b/src/components/leaflet-marker.ts @@ -1,6 +1,6 @@ import { Marker } from 'leaflet'; import { buildOptions, numAttr, buildAttrMap, setLayerAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -17,7 +17,7 @@ const PROPS = defineProps({ const PROP_BY_ATTR = buildAttrMap(PROPS); -export default class LeafletMarker extends withProps(HTMLElement, PROPS) { +export default class LeafletMarker extends WithProps(HTMLElement, PROPS) { #obj?: Marker; #syncing = false; diff --git a/src/components/leaflet-polygon.ts b/src/components/leaflet-polygon.ts index 98d6ddd..c34bdc1 100644 --- a/src/components/leaflet-polygon.ts +++ b/src/components/leaflet-polygon.ts @@ -1,6 +1,6 @@ import { Polygon } from 'leaflet'; import { buildOptions } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts'; @@ -16,7 +16,7 @@ const PROPS = defineProps({ fillOpacity: num(0.2), }); -export default class LeafletPolygon extends withProps(HTMLElement, PROPS) { +export default class LeafletPolygon extends WithProps(HTMLElement, PROPS) { #obj?: Polygon; #observer?: MutationObserver; diff --git a/src/components/leaflet-polyline.ts b/src/components/leaflet-polyline.ts index 60a5a56..a45122b 100644 --- a/src/components/leaflet-polyline.ts +++ b/src/components/leaflet-polyline.ts @@ -1,6 +1,6 @@ import { Polyline } from 'leaflet'; import { buildOptions } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts'; @@ -16,7 +16,7 @@ const PROPS = defineProps({ fillOpacity: num(0.2), }); -export default class LeafletPolyline extends withProps(HTMLElement, PROPS) { +export default class LeafletPolyline extends WithProps(HTMLElement, PROPS) { #obj?: Polyline; #observer?: MutationObserver; diff --git a/src/components/leaflet-popup.ts b/src/components/leaflet-popup.ts index 4d11e74..873085c 100644 --- a/src/components/leaflet-popup.ts +++ b/src/components/leaflet-popup.ts @@ -1,6 +1,6 @@ import { Popup } from 'leaflet'; import { registerWithParent, buildOptions, numAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { defineProps, num, on } from '../core/props.ts'; @@ -15,7 +15,7 @@ const PROPS = defineProps({ autoClose: on(), }); -export default class LeafletPopup extends withProps(HTMLElement, PROPS) { +export default class LeafletPopup extends WithProps(HTMLElement, PROPS) { #obj?: Popup; #observer?: MutationObserver; diff --git a/src/components/leaflet-rectangle.ts b/src/components/leaflet-rectangle.ts index f6e788c..bd3d898 100644 --- a/src/components/leaflet-rectangle.ts +++ b/src/components/leaflet-rectangle.ts @@ -1,6 +1,6 @@ import { Rectangle } from 'leaflet'; import { buildOptions, parseBoundsAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { isPathStyleAttr, updatePathStyle } from '../core/path-style.ts'; @@ -16,7 +16,7 @@ const PROPS = defineProps({ fillOpacity: num(0.2), }); -export default class LeafletRectangle extends withProps(HTMLElement, PROPS) { +export default class LeafletRectangle extends WithProps(HTMLElement, PROPS) { #obj?: Rectangle; connectedCallback() { diff --git a/src/components/leaflet-svg-overlay.ts b/src/components/leaflet-svg-overlay.ts index a057c88..fd01140 100644 --- a/src/components/leaflet-svg-overlay.ts +++ b/src/components/leaflet-svg-overlay.ts @@ -1,7 +1,7 @@ import { SVGOverlay, LatLngBounds, LatLngExpression } from 'leaflet'; import type { ImageOverlayOptions } from 'leaflet'; import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -17,7 +17,7 @@ const PROPS = defineProps({ const PROP_BY_ATTR = buildAttrMap(PROPS); -export default class LeafletSVGOverlay extends withProps(HTMLElement, PROPS) { +export default class LeafletSVGOverlay extends WithProps(HTMLElement, PROPS) { #obj?: SVGOverlay; connectedCallback() { diff --git a/src/components/leaflet-tile-layer-wms.ts b/src/components/leaflet-tile-layer-wms.ts index c1fc13a..b3822e5 100644 --- a/src/components/leaflet-tile-layer-wms.ts +++ b/src/components/leaflet-tile-layer-wms.ts @@ -1,6 +1,6 @@ import { TileLayer } from 'leaflet'; import { buildOptions, buildAttrMap, setLayerAttr, parseAttributeValue } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -17,7 +17,7 @@ const PROPS = defineProps({ const PROP_BY_ATTR = buildAttrMap(PROPS); -export default class LeafletTileLayerWMS extends withProps(HTMLElement, PROPS) { +export default class LeafletTileLayerWMS extends WithProps(HTMLElement, PROPS) { #obj?: TileLayer.WMS; connectedCallback() { diff --git a/src/components/leaflet-tile-layer.ts b/src/components/leaflet-tile-layer.ts index 089ac45..483e4cf 100644 --- a/src/components/leaflet-tile-layer.ts +++ b/src/components/leaflet-tile-layer.ts @@ -1,6 +1,6 @@ import { TileLayer } from 'leaflet'; import { buildOptions, buildAttrMap, setLayerAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { defineProps, num, str } from '../core/props.ts'; @@ -16,7 +16,7 @@ const PROPS = defineProps({ const PROP_BY_ATTR = buildAttrMap(PROPS); -export default class LeafletTileLayer extends withProps(HTMLElement, PROPS) { +export default class LeafletTileLayer extends WithProps(HTMLElement, PROPS) { #obj?: TileLayer; connectedCallback() { diff --git a/src/components/leaflet-tooltip.ts b/src/components/leaflet-tooltip.ts index 3a463d5..c3655d2 100644 --- a/src/components/leaflet-tooltip.ts +++ b/src/components/leaflet-tooltip.ts @@ -1,7 +1,7 @@ import { Tooltip } from 'leaflet'; import type { TooltipOptions } from 'leaflet'; import { registerWithParent, buildOptions, numAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -16,7 +16,7 @@ const PROPS = defineProps({ opacity: num(1.0), }); -export default class LeafletTooltip extends withProps(HTMLElement, PROPS) { +export default class LeafletTooltip extends WithProps(HTMLElement, PROPS) { #obj?: Tooltip; #observer?: MutationObserver; diff --git a/src/components/leaflet-video-overlay.ts b/src/components/leaflet-video-overlay.ts index 91b67fb..0473eba 100644 --- a/src/components/leaflet-video-overlay.ts +++ b/src/components/leaflet-video-overlay.ts @@ -1,7 +1,7 @@ import { VideoOverlay, LatLngBounds, LatLngExpression } from 'leaflet'; import type { VideoOverlayOptions } from 'leaflet'; import { buildOptions, buildAttrMap, setLayerAttr, parseBoundsAttr } from '../core/utils.ts'; -import { withProps } from '../core/with-props.ts'; +import { WithProps } from '../core/with-props.ts'; import { registerChildren, unregisterChildren } from '../core/register.ts'; import { defineProps, num, str, on } from '../core/props.ts'; @@ -21,7 +21,7 @@ const PROPS = defineProps({ const PROP_BY_ATTR = buildAttrMap(PROPS); -export default class LeafletVideoOverlay extends withProps(HTMLElement, PROPS) { +export default class LeafletVideoOverlay extends WithProps(HTMLElement, PROPS) { #obj?: VideoOverlay; connectedCallback() { diff --git a/src/core/utils.ts b/src/core/utils.ts index a2cd70c..2b9314c 100644 --- a/src/core/utils.ts +++ b/src/core/utils.ts @@ -21,7 +21,7 @@ export function parseAttributeValue(value: string | null): unknown { // Installs reactive getter/setter pairs on a prototype for every entry in // a PROPS table. Each getter reads from the attribute (coerced to the // correct type), each setter writes via setAttribute/toggleAttribute. -// Used by the withProps() mixin so components have `el.lat = 51.5` sugar. +// Used by the WithProps() mixin so components have `el.lat = 51.5` sugar. export function definePropAccessors(proto: object, props: Record) { for (const [name, spec] of Object.entries(props)) { Object.defineProperty(proto, name, { diff --git a/src/core/with-props.ts b/src/core/with-props.ts index 0ab482d..ae84434 100644 --- a/src/core/with-props.ts +++ b/src/core/with-props.ts @@ -10,10 +10,10 @@ type Ctor = new (...args: any[]) => T; // defining a static initialization block, getters/setters, and an // observedAttributes getter. // -// Usage: `class LeafletFoo extends withProps(HTMLElement, PROPS)` +// Usage: `class LeafletFoo extends WithProps(HTMLElement, PROPS)` // Returns an intersection type so consumers see the generated // properties from PropTypesFromTable. -export function withProps, TProps extends Record>( +export function WithProps, TProps extends Record>( Base: TBase, props: TProps, ): TBase & Ctor> {