rewrite in typescript with LitElement

leaflet-extras · Jun 11, 2020 · ef7fb87 · ef7fb87
1 parent 3e38a25
commit ef7fb87
Show file tree

Hide file tree

Showing 53 changed files with 17,079 additions and 4,155 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,5 @@
-/bower_components
-**/*~
+/node_modules
+*.js
+*.js.map
+*.d.ts
+!karma.conf.js
diff --git a/.project b/.project
diff --git a/.settings/.jsdtscope b/.settings/.jsdtscope
diff --git a/.settings/org.eclipse.wst.jsdt.ui.superType.container b/.settings/org.eclipse.wst.jsdt.ui.superType.container
diff --git a/.settings/org.eclipse.wst.jsdt.ui.superType.name b/.settings/org.eclipse.wst.jsdt.ui.superType.name
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "files.exclude": {
+    "**/*.js": {"when": "$(basename).ts"},
+    "**/*.d.ts": {"when": "$(basename).ts"},
+    "**/*.js.map": true
+  },
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # leaflet-map
 
-*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com) 
+*leaflet-map* is a web-component which provides access to the [leaflet map](http://leafletjs.com)
 JavaScript library via html elements.
 
 Please have a look at the [demo](https://leaflet-extras.github.io/leaflet-map/demo.html) or the [api documentation](https://leaflet-extras.github.io/leaflet-map/doc.html#leaflet-map).
 
-Most of the options documented in the Leaflet reference are exported as html attributes. 
+Most of the options documented in the Leaflet reference are exported as html attributes.
 All events are mapped into html events of the same name.</p>
-For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt; 
+For example use &lt;leaflet-map latitude="51.505" longitude="-0.09" zoom="13"&gt; &lt;/leaflet-map&gt;
 to define the view and zoom level.
 
 
@@ -18,22 +18,23 @@ do not yet support web-components natively, yet.
 
 ## Quickstart Guide
 
-Make leaflet maps using declarative [Polymer](http://polymer-project.org) web components.
+Make leaflet maps using declarative web components.
 To get started read the [documentation](http://leaflet-extras.github.io/leaflet-map/doc.html)
 or checkout the [demo](http://leaflet-extras.github.io/leaflet-map/).
 
-Install this web component using [Bower](http://bower.io):
+Install this web component using [npm](https://npm.im/leaflet-element):
 
 ```
-bower install leaflet-map
+npm i -S leaflet-element
 ```
 
 Import the main component and start creating your map:
 
+```js
+import 'leaflet-element'
+```
 ```html
   <head>
-	<script type="text/javascript" src="../webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="leaflet-map.html">
     <style>
       html, body {
         margin: 0;
@@ -61,7 +62,7 @@ Import the main component and start creating your map:
 
 Although leaflet-map is still under heavy development, it is already fully usable.
 
-List of demos: 
+List of demos:
 
 * [leaflet-map](https://leaflet-extras.github.io/leaflet-map/demo.html#view) (L.map)
 * [leaflet-marker](https://leaflet-extras.github.io/leaflet-map/demo.html#marker) (L.marker)
@@ -78,24 +79,17 @@ List of demos:
 
 Please have a look at the [change log](https://github.com/nhnb/leaflet-map/blob/master/CHANGES.md), for recent developments.
 
-## Dependencies
-
-leaflet-map depends on webcomponentsjs in ../webcomponentsjs, Polymer in ../polymer and leaflet in ../leaflet. If you use bower, those will be installed automatically at the right locations.
-
-Please note that the pages have to be accessed via a webserver. file://-urls are not supported.
-
-
 ## Notes for implementing child elements
 
 Child elements like markers or layers will be initialized by the surrounding container (the map or a layer)
 by setting a "container" javascript property.
-Therefore the child element should define a _containerChanged method and use that as initializer. 
-Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.  
+Therefore the child element should define a _containerChanged method and use that as initializer.
+Don't forget to define a detached method to support removal of elements. The leaflet-marker element is a good template.
 
 
 ## License
 
-leaflet-map is based on polymer and leaflet. Small parts of leaflet, 
+leaflet-map is based on polymer and leaflet. Small parts of leaflet,
 especially the api documentation, have been copied into leaflet-map files.
 
 * [Leaflet](https://github.com/Leaflet/Leaflet/blob/master/LICENSE)

diff --git a/base.ts b/base.ts
@@ -0,0 +1,35 @@
+import type { PropertyValues } from 'lit-element';
+import { FireMixin } from '@pwrs/mixins/fire';
+import { LitElement, property } from 'lit-element';
+import { bound } from './bound-decorator';
+
+type LeafletFeature =
+  | null
+  | L.Circle
+  | L.GeoJSON
+  | L.Marker
+  | L.LayerGroup
+  | L.Polyline
+  | L.Polygon
+  | L.Popup
+  | L.Point;
+
+export class LeafletBase extends FireMixin(LitElement) {
+  _mutationObserver?: MutationObserver;
+
+  feature: LeafletFeature;
+
+  _container: L.Map | L.LayerGroup;
+
+  get container() {
+    return this._container;
+  }
+
+  set container(v) {
+    this._container = v;
+  }
+
+  @bound onLeafletEvent(e: L.LeafletEvent) {
+    this.fire(e.type, e);
+  }
+}
diff --git a/boilerplate.md b/boilerplate.md
@@ -0,0 +1,5 @@
+```html
+<script src="https://unpkg.com/@webcomponentsjs/webcomponentsjs/webcomponents-loader.js"></script>
+<script type="module" src="https://unpkg.com/leaflet-element?module"></script>
+<leaflet-map></leaflet-map>
+```
diff --git a/bound-decorator.ts b/bound-decorator.ts
@@ -0,0 +1,27 @@
+export function bound<T extends Function>(
+  target: object,
+  propertyKey: string,
+  descriptor: TypedPropertyDescriptor<T>
+): TypedPropertyDescriptor<T> | void {
+  if (!descriptor || typeof descriptor.value !== 'function') {
+    throw new TypeError(
+      `Only methods can be decorated with @bound. <${propertyKey}> is not a method!`
+    );
+  }
+
+  return {
+    configurable: true,
+    get(this: T): T {
+      const f: T = descriptor.value!.bind(this);
+      // Credits to https://github.com/andreypopp/autobind-decorator for memoizing the result of bind against a symbol on the instance.
+      Object.defineProperty(this, propertyKey, {
+        value: f,
+        configurable: true,
+        writable: true,
+      });
+      return f;
+    },
+  };
+}
+
+export default bound;
diff --git a/bower.json b/bower.json