fix: all eslint problems solved, new implementation for computed attr…

…ibutes

.eslintrc.cjs

@@ -12,6 +12,11 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   root: true,
 
+  rules: {
+    '@typescript-eslint/no-inferrable-types': 'off',
+    'prefer-const': ['error', {destructuring: 'all'}]
+  },
+
   overrides: [
     {
       files: ['**/*.js', '**/*.mjs', '**/*.cjs'],

README.md

@@ -165,6 +165,16 @@ contains information about the map (all camera parameters and current map
 bounds), the marker (interaction state, map visibility, ...), other attributes
 and user-specified data.
 
+### Adding new Attributes
+
+To add a new attribute
+
+1. add the attribute name to `attributeKeys`
+2. add the name and type to the StaticAttributes type definition
+3. add declarations for the attribute to the Marker class and the
+   ComputedMarkerAttributes class
+4. implement the attribute logic within the `update()` function
+
 ## API
 
 ### constructor

src/editor/init-editor.ts

@@ -1,9 +1,10 @@
-import {editor, languages, KeyCode, KeyMod, Uri} from 'monaco-editor';
+import {editor, KeyCode, KeyMod, languages, Uri} from 'monaco-editor';
 import {decode, encode} from './snippet-encoder';
 import './worker-config';
 
 import googleMapsDTSSource from '../../node_modules/@types/google.maps/index.d.ts?raw';
 import markerExampleSource from '../../examples/00.default.ts?raw';
+import {assertNotNull} from '../lib/util';
 
 const libModules = import.meta.glob('../../examples/lib/*.d.ts', {as: 'raw'});
 const modules: Record<string, string> = {
@@ -33,7 +34,7 @@ export async function initEditor(
     })
   );
 
-  for (let [path, source] of Object.entries(modules)) {
+  for (const [path, source] of Object.entries(modules)) {
     typescriptDefaults.addExtraLib(source, `file:///${path}`);
   }
 
@@ -73,7 +74,7 @@ export async function initEditor(
     id: 'compile-and-run',
     label: 'Compile and run',
     keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
-    async run(editor) {
+    async run() {
       const worker = await typescript.getTypeScriptWorker();
       const proxy = await worker(model.uri);
 
@@ -84,13 +85,18 @@ export async function initEditor(
     }
   });
 
-  const runButton = document.querySelector('#btn-compile-and-run')!;
+  const runButton = document.querySelector('#btn-compile-and-run');
+  assertNotNull(runButton, 'run button not fond');
+
   runButton.addEventListener('click', () => {
     editorInstance
       .getAction('compile-and-run')
       .run()
       .then(() => {
-        console.log('compie and run completed.');
+        console.log('compile-and-run completed.');
+      })
+      .catch(err => {
+        console.error('compile-and-run failed', err);
       });
   });
 
@@ -103,8 +109,7 @@ export async function initEditor(
 
       if (!tsCode) return;
 
-      const encoded = encode({code: tsCode, version: API_VERSION});
-      location.hash = encoded;
+      location.hash = encode({code: tsCode, version: API_VERSION});
     }
   });
 

src/editor/run-playground-js.ts

@@ -3,34 +3,35 @@ import * as marker from '../lib/marker';
 import * as icons from '../lib/icons';
 import * as color from '../lib/color';
 
-let markers: Set<Marker> = new Set();
-let cleanupFn: (() => void) | null = null;
+const markers: Set<Marker> = new Set();
+let cleanupFn: (() => void) | void = void 0;
 
 export function runPlaygroundJs(js: string, map: google.maps.Map) {
   // remove all markers
-  for (let m of markers) m.map = null;
+  for (const m of markers) m.map = null;
   markers.clear();
 
   // if the last setup left a cleanup-function behind,
   // now is the time to call it
   if (cleanupFn) cleanupFn();
 
   // wrap code in a function with exports and require
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
   const tmpFn = new Function('exports', 'require', js);
 
-  const exports: any = {};
+  const exports: {default?: (map: google.maps.Map) => (() => void) | void} = {};
 
   // we need a proxy for the Marker class to keep track of markers
   // added to the map, so they don't have to be removed manually
   class MarkerProxy extends Marker {
-    constructor(...args: any[]) {
+    constructor(...args: never[]) {
       super(...args);
 
       markers.add(this);
     }
   }
 
-  const modules: Record<string, any> = {
+  const modules: Record<string, unknown> = {
     './lib/marker': marker,
     './lib/color': color,
     './lib/icons': icons

src/editor/snippet-encoder.ts

@@ -5,7 +5,7 @@ export function encode(data: SavedCodeSnippetData): string {
 
   const p = new URLSearchParams();
   p.set('v', version);
-  p.set('c', btoa(code));
+  p.set('c', window.btoa(code));
 
   return p.toString();
 }
@@ -14,11 +14,11 @@ export function decode(encoded: string): SavedCodeSnippetData {
   const p = new URLSearchParams(encoded);
 
   const base64 = p.get('c');
-  let version = p.get('v') || '0.0.0';
+  const version = p.get('v') || '0.0.0';
 
   if (!base64) {
     return {version, code: ''};
   }
 
-  return {code: atob(base64), version};
+  return {code: window.atob(base64), version};
 }

src/editor/worker-config.ts

@@ -4,9 +4,8 @@ import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
-// @ts-ignore
 self.MonacoEnvironment = {
-  getWorker(_: any, label: string) {
+  getWorker(_: unknown, label: string) {
     if (label === 'json') {
       return new jsonWorker();
     }

src/lib/color.ts

@@ -73,15 +73,14 @@ function rgbToHsl([r, g, b]: RGBColor): HSLColor {
   const min = Math.min(r, g, b);
 
   let h;
-  let s;
-  let l = (max + min) / 2;
+  const l = (max + min) / 2;
 
   if (max == min) {
     return [0, 0, l]; // achromatic
   }
 
   const d = max - min;
-  s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 
   if (max === r) {
     h = (g - b) / d + (g < b ? 6 : 0);

src/lib/icons.ts

@@ -82,13 +82,13 @@ function createSpan(className: string, content: string): HTMLElement {
  * @param family
  */
 function isFontLoaded(family: string): boolean {
-  const fontStylesheets = Array.from(
+  const fontStylesheets = Array.from<HTMLLinkElement>(
     document.querySelectorAll(
       'link[rel="stylesheet"][href*="fonts.googleapis.com"]'
     )
-  ) as HTMLLinkElement[];
+  );
 
-  for (let stylesheet of fontStylesheets) {
+  for (const stylesheet of fontStylesheets) {
     const url = new URL(stylesheet.href);
 
     let families = url.pathname.endsWith('css2')

src/lib/marker-collection.ts

@@ -1,30 +1,32 @@
-import type {Attributes} from './marker';
-
-export class MarkerCollection<TUserData extends object = Record<any, any>> {
-  constructor(data: TUserData[], attributes: Attributes<TUserData>) {}
-
-  static fromArray<TUserData extends object = Record<any, any>>(
-    data: TUserData[],
-    attributes: Attributes<TUserData>
-  ): MarkerCollection {
-    return new MarkerCollection(data, attributes);
-  }
-
-  // a collection provides bindings between an array of records and
-  // the corresponding markers.
-
-  // - attributes: attributes are shared with all markers, which is where
-  //   dynamic attributes can really shine
-  //
-  // - data-updates: data in the collection can be updated after creation.
-  //   This will assume that complete sets of records are passed on every
-  //   update. If incremental updates are needed, those have to be applied
-  //   to the data before updating the marker collection.
-  //   When transitions are implemented (also for performance reasons), it
-  //   will become important to recognize identical records, so those can be
-  //   updated instead of re-created with every update.
-  // -
-
-  // .map property: forwards to all markers
-  // marker.visible attribute
-}
+export {};
+// import type {Attributes} from './marker';
+//
+//
+// export class MarkerCollection<TUserData extends object = Record<any, any>> {
+//   constructor(data: TUserData[], attributes: Attributes<TUserData>) {}
+//
+//   static fromArray<TUserData extends object = Record<any, any>>(
+//     data: TUserData[],
+//     attributes: Attributes<TUserData>
+//   ): MarkerCollection {
+//     return new MarkerCollection(data, attributes);
+//   }
+//
+//   // a collection provides bindings between an array of records and
+//   // the corresponding markers.
+//
+//   // - attributes: attributes are shared with all markers, which is where
+//   //   dynamic attributes can really shine
+//   //
+//   // - data-updates: data in the collection can be updated after creation.
+//   //   This will assume that complete sets of records are passed on every
+//   //   update. If incremental updates are needed, those have to be applied
+//   //   to the data before updating the marker collection.
+//   //   When transitions are implemented (also for performance reasons), it
+//   //   will become important to recognize identical records, so those can be
+//   //   updated instead of re-created with every update.
+//   // -
+//
+//   // .map property: forwards to all markers
+//   // marker.visible attribute
+// }