Merge pull request #18 from mutablelogic/dev2

Dev2
mutablelogic · Nov 19, 2024 · e3f8359 · e3f8359
2 parents 08a1f61 + 920ed30
commit e3f8359
Show file tree

Hide file tree

Showing 81 changed files with 5,625 additions and 672 deletions.
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
@@ -1,4 +1,4 @@
-name: Publish Docs on Push to main
+name: Lint on Push to main
 on:
   push:
     branches:

diff --git a/config/esbuild.config.mjs b/config/esbuild.config.mjs
@@ -1,7 +1,6 @@
 import esbuild from 'esbuild';
 
 const commonOptions = {
-  entryPoints: ['example/index.js'],
   outdir: 'dist',
   format: 'esm',
   bundle: true,
@@ -13,34 +12,29 @@ const commonOptions = {
     '.otf': 'file',
     '.html': 'copy',
     '.json': 'copy',
-  }
+  },
+  logLevel: 'info',
+  entryPoints: [],
 };
 
 if (process.env.NODE_ENV === 'production') {
+  commonOptions.entryPoints.push('src/index.js');
   await esbuild.build({
     ...commonOptions,
+    entryPoints: ['src/index.js'],
     minify: true,
     sourcemap: false,
-    define: {
-      'process.env.NODE_ENV': '"production"',
-    },
   }).catch(() => process.exit(1));
 } else {
-  commonOptions.entryPoints.push('example/index.html', 'example/data.json');
+  commonOptions.entryPoints.push('example/index.html', 'example/index.js');
   let ctx = await esbuild.context({
     ...commonOptions,
     minify: false,
     sourcemap: true,
-    define: {
-      'process.env.NODE_ENV': '"development"',
-    },
   })
 
   let { host, port } = await ctx.serve({
     servedir: commonOptions.outdir,
   });
-  console.log(`Serving on http://${host}:${port}`);
-
   await ctx.watch();
-  console.log('watching');
 }
diff --git a/config/esbuild.geojson.mjs b/config/esbuild.geojson.mjs
@@ -0,0 +1,40 @@
+import esbuild from 'esbuild';
+
+const commonOptions = {
+  outdir: 'dist',
+  format: 'esm',
+  bundle: true,
+  loader: {
+    '.svg': 'file',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.ttf': 'file',
+    '.otf': 'file',
+    '.html': 'copy',
+    '.json': 'copy',
+  },
+  logLevel: 'info',
+  entryPoints: [],
+};
+
+if (process.env.NODE_ENV === 'production') {
+  commonOptions.entryPoints.push('src/index.js');
+  await esbuild.build({
+    ...commonOptions,
+    entryPoints: ['src/index.js'],
+    minify: true,
+    sourcemap: false,
+  }).catch(() => process.exit(1));
+} else {
+  commonOptions.entryPoints.push('example/geojson/index.html', 'example/geojson/index.js', 'example/geojson/data.json');
+  let ctx = await esbuild.context({
+    ...commonOptions,
+    minify: false,
+    sourcemap: true,
+  })
+
+  let { host, port } = await ctx.serve({
+    servedir: commonOptions.outdir,
+  });
+  await ctx.watch();
+}
diff --git a/config/eslint.config.mjs b/config/eslint.config.mjs
@@ -1,6 +1,6 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import globals from 'globals';
-import {dirname } from 'path';
+import { dirname } from 'path';
 import { fileURLToPath } from 'url';
 import js from '@eslint/js';
 
@@ -18,6 +18,9 @@ export default [
       globals: globals.browser,
       ecmaVersion: 13,
       sourceType: 'module',
+      parserOptions: {
+        ecmaVersion: 13,
+      },
     },
   },
   ...compat.extends('airbnb-base'),

diff --git a/example/esbuild.js b/example/esbuild.js
@@ -1,5 +1,5 @@
 /* Code to reload in the esbuild serve development environment */
 window.addEventListener('load', () => {
   // eslint-disable-next-line no-restricted-globals
-  new EventSource('/esbuild').addEventListener('change', () => location.reload());
+  //new EventSource('/esbuild').addEventListener('change', () => location.reload());
 });
diff --git a/example/data.json → example/geojson/data.json b/example/data.json → example/geojson/data.json
diff --git a/example/geojson/hala-white-132x132.svg b/example/geojson/hala-white-132x132.svg
diff --git a/example/geojson/index.html b/example/geojson/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GeoJSON viewer</title>
+  <script type="module" src="index.js" defer></script>
+  <link href="index.css" rel="stylesheet">
+</head>
+
+<body>
+  <js-canvas>
+    <js-nav vertical>
+      <js-navitem disabled><js-image id="icon"></js-image></js-navitem>
+      <js-navitem>Home</js-navitem>
+    </js-nav>
+
+    <js-content>
+      <!-- the map -->
+      <js-map id="map"
+        accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
+        <!-- add a source from the array (must currently be an array of GeoJSON features) -->
+        <js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
+
+        <!-- display the source on the map -->
+        <js-maplayer id="points" source="#area" type="fill" paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
+      </js-map>
+    </js-content>
+
+  </js-canvas>
+
+  <!-- contains the GeoJSON data -->
+  <js-array id="array" provider="#provider"></js-array>
+
+  <!-- data source which updates when the event source /esbuild changes -->
+  <js-provider id="provider" path="data.json" eventsource="/esbuild"></js-provider>
+
+  <!-- toast which persists on the screen for 1 second -->
+  <js-toast id="toast" duration="1"></js-toast>
+</body>
+
+</html>
diff --git a/example/geojson/index.js b/example/geojson/index.js
@@ -0,0 +1,31 @@
+// This file defines all the styles and elements used for the web components
+import '../../src/index';
+import '../esbuild';
+import hala from './hala-white-132x132.svg';
+import { EventType } from '../../src/core/EventType';
+
+window.addEventListener('load', () => {
+  // Brand
+  const icon = document.querySelector('#icon');
+  if (icon) {
+    icon.src = hala;
+  }
+
+  // Set toast when error or done
+  const provider = document.querySelector('#provider');
+  const toast = document.querySelector('#toast');
+
+  provider.addEventListener(EventType.ERROR, (e) => {
+    toast.visible = true;
+    toast.duration = 10;
+    toast.color = 'error';
+    toast.innerHTML = `${e.detail}<js-close></js-close>`;
+  });
+
+  provider.addEventListener(EventType.DONE, (e) => {
+    toast.visible = true;
+    toast.duration = 10;
+    toast.color = 'info';
+    toast.innerHTML = 'Data Reloaded&nbsp;&nbsp;<js-close></js-close>';
+  });
+});
diff --git a/example/index.html b/example/index.html
diff --git a/example/index.js b/example/index.js
diff --git a/example/load.js b/example/load.js