feat: Add exclude property to MyFeedElement (#64)

nfreear · nfreear · commit 90de93c80351 · 2025-09-14T20:17:52.000+01:00
diff --git a/demo/index.html b/demo/index.html
@@ -1,17 +1,18 @@
-<!doctype html><html lang="en" style="opacity:0"><title> My Elements </title>
+<!doctype html><html lang="en"><title> My Elements </title>
 
 <!-- <meta name="robots" content="noindex"> -->
 <meta name="viewport" content="width=device-width,initial-scale=1">
 
-<link rel="stylesheet" href="style/app.css" />
+<link rel="stylesheet" href="style/app.v2.css" />
 
 <my-page>
 
   <h2> Demo Index </h2>
 
   <p> A collection of reusable custom elements (Web Components). </p>
 
-  <my-feed href="../src/feed.json" details="true" class="element-list" >
+  <my-feed href="../src/feed.json" details="true" class="element-list"
+    exclude="legacy, experiment" XX_include="my blog">
 
   <ol>
     <li><a href="my-analytics.html"   >my-analytics</a>
@@ -30,6 +31,16 @@ <h2> Demo Index </h2>
 
 </my-page>
 
+<script type="importmap">
+{
+  "myElements": { "use": [ "my-feed" ] }
+}
+</script>
+
+<script type="module" src="../i.js"></script>
+
+<!--
 <script type="module" src="../my.js?use=my-feed,my-page"></script>
+-->
 
 </html>
diff --git a/package.json b/package.json
@@ -41,7 +41,8 @@
     "start": "npm run build:feed && npx servor --reload",
     "inner:grep": "grep -rn '\\.innerHTML' src",
     "inner:count": "grep -r '\\.innerHTML =' src | wc -l",
-    "myelem:count": "grep -r 'extends MyElement' src | wc -l",
+    "count:myelem": "grep -r 'extends MyElement' src | wc -l",
+    "grep:animate": "grep -rn -E '(transition|animation)' src/components",
     "fix": "npx eslint --fix",
     "lint": "npx eslint --fix",
     "test": "npm run lint && npm run inner:count"
diff --git a/src/components/MyFeedElement.js b/src/components/MyFeedElement.js
@@ -1,6 +1,5 @@
 import { appendTemplate, safeUrl, strip } from '../util/attachTemplate.js';
 import MyTrustedTypes from '../util/MyTrustedTypes.js';
-// Was: import MyElement from '../MyElement.js';
 
 const { fetch, HTMLElement, Request, location } = window;
 
@@ -27,6 +26,7 @@ export class MyFeedElement extends HTMLElement {
   }
 
   get include () { return this.getAttribute('include'); }
+  get exclude () { return this.getAttribute('exclude'); }
 
   get isOpen () { return this.getAttribute('details') === 'open'; }
 
@@ -74,22 +74,33 @@ export class MyFeedElement extends HTMLElement {
     return INCLUDE ? new RegExp(`(${INCLUDE.join('|')})`, 'i') : null;
   }
 
+  get #excludeRegex () {
+    const EXCLUDE = this.exclude ? this.exclude.split(/,[ ]*/) : null;
+    return EXCLUDE ? new RegExp(`(${EXCLUDE.join('|')})`, 'i') : null;
+  }
+
   #filterItems (items) {
     const filtered = this.include
       ? items.filter(it => {
         return it && it.tags && it.tags.some(tag => this.#includeRegex.test(tag));
       })
       : items;
 
-    console.debug('my-feed ~ Filtered:', this.include, filtered);
+    const filterExclude = this.exclude
+      ? filtered.filter(it => {
+        return it && it.tags && !it.tags.some(tag => this.#excludeRegex.test(tag));
+      })
+      : filtered;
+
+    console.debug('my-feed ~ Filtered:', this.include, this.#excludeRegex, filterExclude);
 
-    return filtered;
+    return filterExclude;
   }
 
   get #policyId () { return 'allowAnchorListPlus'; }
 
   #makeListItem (item, open) {
-    const createHTML = (s) => this.#trustedTypes.createHTML(this.#policyId , s);
+    const createHTML = (s) => this.#trustedTypes.createHTML(this.#policyId, s);
     const { skip, guid, link, pubDate, title, url, time, tags, content, content_html } = item; /* eslint-disable-line camelcase */
 
     if (skip) return '<template><!-- skip --></template>';
