build: release 1.3.0 🚀

README.md

@@ -89,7 +89,7 @@ You can add your taxonomy chart in your website or blog by using this code in yo
 #### `taxonomy:groups`
 
 -   `taxonomy:title`: This is the title that will be displayed on the top of your taxonomy.
--   `taxonomy:groups`: This a array of object in your style `metadata`. `Required`
+-   `taxonomy:groups`: This an array of objects in your style `metadata`. `Required`
     -   `id`: This is the identifier for your taxonomy group. This will be use for your layer grouping. `Required`.
     -   `type`: This is the type of your style object. This is use for the taxonomy rendering. One of `line`, `polygon`, `symbol` and `annotation`. `Required`.
     -   `title`: This is the title that will be displayed for your taxonomy group.
@@ -108,7 +108,10 @@ You can add your taxonomy chart in your website or blog by using this code in yo
   "metadata": {
     "taxonomy:group": "taxonomy-groups-id",
     "taxonomy:casing": "layer-for-casing",
-    "taxonomy:example": "Example for symbols"
+    "taxonomy:example": "Example for symbols",
+    "taxonomy:matches": [
+      { "name": "meta-layer-name", "get:class": "value-from-tile", "example": "Example for symbols" }
+    ]
   }
 }
 ```
@@ -117,6 +120,11 @@ You can add your taxonomy chart in your website or blog by using this code in yo
     `Required`.
 -   `taxonomy:casing`: This will refer to another layer id. That's mean the current layer is the casing of the layer pointed by `taxonomy:casing`. This layer must be a line type. This will render an outline for `taxonomy:casing` (We can also use `ref` id from your layer).
 -   `taxonomy:example`: This is a text example for symbols groups. Default text is layer id.
+-   `taxonomy:matches`: This is an array of objects that will process a `match` or `case` expression.
+    -   `name`: The name or title to display for this example.
+    -   `example`: The text to display if it's a symbol.
+    -   `[expression]:[key]`: The value to return when this expression is found, this should be a value that can be found in your tile. You can add many expressions.
+        -   Example `{"name": "Green Grass", "get:class": "grass"}` will display Green Grass and replace occurences of `["get", "class"]` by `grass`.
 
 ### Concrete example
 

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@jawg/taxonomy",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "build": "rollup -c",
     "format": "npm run format-html && npm run format-js && npm run format-riot",
     "format-html": "find src demo -name '*.html' -exec prettier --config .prettierrc --parser html -w {} \\;",
     "format-js": "prettier -w --config .prettierrc src/ rollup.*",
     "format-riot": "find src -type f -name '*.riot' -exec prettier --config .prettierrc --parser html -w {} \\;",
-    "start": "rollup -c rollup.serve.js -w",
+    "start": "ROLLUP_SERVE=true rollup -c -w",
     "watch": "rollup -c -w"
   },
   "description": "Building a map taxonomy chart with style.json",
@@ -23,18 +23,19 @@
     "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-html": "^1.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "color-operations-ui": "^1.1.0",
-    "prettier": "^2.8.7",
-    "riot": "^7.1.0",
-    "rollup": "^3.20.2",
+    "prettier": "^3.1.0",
+    "riot": "^9.1.2",
+    "rollup": "^4.6.1",
     "rollup-plugin-app-utils": "^1.0.6",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-riot": "^6.0.0",
-    "rollup-plugin-serve": "^2.0.2",
+    "@rollup/plugin-json": "^6.0.1",
+    "rollup-plugin-riot": "^9.0.2",
+    "rollup-plugin-serve": "^3.0.0",
     "webfontloader": "^1.6.28"
   }
 }

rollup.config.js

@@ -4,21 +4,41 @@ import commonjs from '@rollup/plugin-commonjs';
 import terser from '@rollup/plugin-terser';
 import { emptyDirectories } from 'rollup-plugin-app-utils';
 import { babel } from '@rollup/plugin-babel';
+import serve from 'rollup-plugin-serve';
+import html from '@rollup/plugin-html';
+import json from '@rollup/plugin-json';
+import fs from 'fs';
+
+const useServe = process.env.ROLLUP_SERVE === 'true';
+const output = useServe ? '.serve' : 'dist';
+const plugins = [
+  !useServe && emptyDirectories(output),
+  riot(),
+  json(),
+  nodeResolve(),
+  commonjs(),
+  babel({ babelHelpers: 'bundled', presets: ['@babel/env'] }),
+  !useServe && terser(),
+  useServe && serve({ host: 'localhost', port: 8000, contentBase: ['.serve', './'] }),
+  useServe && html({
+    template: () =>
+      fs
+        .readFileSync('./demo/index.html')
+        .toString()
+        .replace(/..\/dist\//g, './')
+        .replace('https://jawg.github.io/taxonomy/example.json', './example.json'),
+  }),
+].filter(plugin => plugin)
+
 
 export default [
   {
     input: 'src/index.js',
     output: {
-      file: 'dist/taxonomy-bundle+riot.js',
+      file: `${output}/taxonomy-bundle+riot.js`,
       format: 'iife',
+      sourcemap: useServe,
     },
-    plugins: [
-      emptyDirectories('dist'),
-      riot(),
-      nodeResolve(),
-      commonjs(),
-      babel({ babelHelpers: 'bundled', presets: ['@babel/env'] }),
-      terser(),
-    ],
+    plugins,
   },
 ];

src/components/taxonomy.riot

@@ -34,9 +34,9 @@
         zooms="{ taxonomy.getZooms(group.zooms) }"
       ></annotation>
     </div>
-    <div style="font-size: 12px; text-align: center; background-color: rgba(255,255,255, 0.2);">
+    <div style="font-size: 12px; text-align: center; background-color: rgba(255, 255, 255, 0.2)">
       Powered by <a href="https://www.jawg.io/">Jawg<span style="color: #2999fd">Maps</span></a
-      >. Contribute on <a href="https://github.com/jawg/taxonomy/">GitHub</a>.
+      >. Contribute on <a href="https://github.com/jawg/taxonomy/">GitHub</a>. <a href="https://github.com/jawg/taxonomy/releases/tag/{version}">v{version}</a>
     </div>
   </div>
   <script>
@@ -45,6 +45,7 @@
     import PolygonRender from './polygon-render.riot';
     import SymbolRender from './symbol-render.riot';
     import taxonomy from '../scripts/taxonomy.js';
+    import { version } from '../../package.json';
     export default {
       components: {
         Annotation,
@@ -106,6 +107,7 @@
         }
       },
       taxonomy,
+      version,
     };
   </script>
   <style>
@@ -137,7 +139,7 @@
     taxonomy h2 {
       line-height: 1.5;
       text-align: center;
-      background-color: rgba(255,255,255, 0.2);
+      background-color: rgba(255, 255, 255, 0.2);
     }
 
     taxonomy a {
@@ -174,7 +176,7 @@
     taxonomy span.render-header {
       font-weight: bold;
       text-align: center;
-      background-color: rgba(255,255,255, 0.2);
+      background-color: rgba(255, 255, 255, 0.2);
       border-radius: 1rem;
       padding: 0 0.5em;
       margin: 0 0.5em;