docs

Author: dariomannu

README.md

@@ -731,18 +731,39 @@ There are several collections on Stackblitz with over 200 examples that can get
 
 [The Collection](https://stackblitz.com/@dariomannu/collections/rimmel-js-experiments) 🧞 Stream-Oriented programming examples using Rimmel.
 
+### Recipes
+How to do stream-oriented this and that
+
+[Drag'n'Drop](https://stackblitz.com/orgs/github/ReactiveHTML/collections/drad-and-drop) Several different ways to implement drag'n'drop 
+
+[Fetching Data](https://stackblitz.com/orgs/github/ReactiveHTML/collections/fetching-data) Connecting to REST APIs
+
+[UI Components](https://stackblitz.com/orgs/github/ReactiveHTML/collections/ui-components) How streams make it simpler to manage any sort of UI component
+
+[Dialog Boxes](https://stackblitz.com/orgs/github/ReactiveHTML/collections/dialog-boxes) From popups to login boxes and forms
+
+[Observable Types](https://stackblitz.com/orgs/github/ReactiveHTML/collections/observable-types) When lists are involved, consider this
+
 ### Experiments
 This is the cutting-edge of what you can do with Rimmel, still being refined here and there, but will show you where things are going and maybe give you some inspiration.
 
 [Web Components](https://stackblitz.com/@dariomannu/collections/web-components) 🧩 Experimental support for custom elements and web components in stream-oriented style.
 
 [Web Workers](https://stackblitz.com/@dariomannu/collections/web-workers) 🛠️ Experiments running your Rimmel components inside web workers
 
-[Novel Design Patterns](https://stackblitz.com/@dariomannu/collections/novel-design-patterns) 📖 What makes stream-oriented programming different
+[Novel Design Patterns](https://stackblitz.com/@dariomannu/collections/novel-design-patterns) 📖 What makes stream-oriented programming unique
+
+[Native Observables](https://stackblitz.com/orgs/github/ReactiveHTML/collections/native-observables-in-rimmel-js) 👶 A few ways to integrate with the current web standards proposal for native Observables.
+
+[Observable Polyfill](https://stackblitz.com/@dariomannu/collections/observable-polyfill) 🧴 Stream-oriented examples for when you need a native polyfill
+
+[Callforwards](https://stackblitz.com/orgs/github/ReactiveHTML/collections/callforwards) 🤙 Want to explore alternative stream types beside Observables?
+
+[LeapingBunny](https://stackblitz.com/@dariomannu/collections/leapingbunny) 💉 Unit testing your streams and components with ASCII-ART sequences
 
-[Observable Polyfill](https://stackblitz.com/@dariomannu/collections/observable-polyfill) 🧴 stream-oriented examples for the [observable-polyfill](https://github.com/keithamus/observable-polyfill/).
+[WebGL/WebGPU](https://stackblitz.com/orgs/github/ReactiveHTML/collections/webgl-webgpu) 🎲 Integrations with THREE.js
 
-[Native Observables](https://stackblitz.com/orgs/github/ReactiveHTML/collections/native-observables-in-rimmel-js) 👶 Experiments using native Observables.
+[Security](https://stackblitz.com/@paperboy/collections/rimmel-js-security) 🔒 Hardening your stream-oriented applications
 
 ### The classics
 

src/lib/addListener.ts

@@ -9,10 +9,10 @@ const isEventListenerObject = (l: any): l is EventListenerObject => !!l?.handleE
 
 export const addListener = (node: EventTarget, eventName: RMLEventName, listener: RMLEventListener, options?: AddEventListenerOptions | boolean) => {
 	// We also force-add an event listener if we're inside a ShadowRoot (do we really need to?), as events inside web components don't seem to fire otherwise
-	if (USE_DOM_OBSERVABLES && node.when) {
+	if (USE_DOM_OBSERVABLES && (node as any).when) {
 		// Explicitly excluding the isEventListenerObject as Domenic doesn't want .when() to support it
 		if (!isEventListenerObject(listener)) {
-			const source = node.when(eventName, <ObservableEventListenerOptions | undefined>options);
+			const source = (node as any).when(eventName, <ObservableEventListenerOptions | undefined>options);
 			if (isObservature(listener)) {
 				(<IObservature<Event>>listener).addSource(source as MonkeyPatchedObservable<Event>);
 			} else {

src/parser/parser.test.ts

@@ -344,6 +344,64 @@ describe('Parser', () => {
 	describe('Sinks', () => {
 
 		describe('Attributes', () => {
+
+			describe('Classes', () => {
+
+				describe('When a string is passed', () => {
+
+					it('sets the value inline', () => {
+						const className = 'my-class';
+						const template = rml`<div class="${className}">Hello</div>`;
+
+						expect(template).toEqual('<div class="my-class">Hello</div>');
+					});
+
+					it('sets deferred values later, initial value is empty', () => {
+						const className = defer('my-class');
+						const template = rml`<div class="${className}">Hello</div>`;
+
+						expect(template).toMatch(/<div.+class="">Hello<\/div>/);
+						expect(waitingElementHandlers.get('RMLREF+0')).toMatchObject([
+							// TODO: match the sink, too
+							{ source: className, type: 'sink', t: 'class' },
+						]);
+					});
+
+				});
+
+				describe('When a plain object is passed', () => {
+
+					it('sets the value inline', () => {
+						const classes = { 'class-a': true, 'class-b': false, 'class-c': true };
+						const template = rml`<div class="${classes}">Hello</div>`;
+
+						expect(template).toEqual('<div class="class-a class-c">Hello</div>');
+					});
+
+				});
+
+				describe('When an object of deferred values is passed', () => {
+
+					it('sets values later, initial value is empty', () => {
+						const classes = { 'class-a': defer(true), 'class-b': defer(false) };
+						const template = rml`<div class="${classes}">Hello</div>`;
+
+						expect(template).toMatch(/<div.+class="">Hello<\/div>/);
+						expect(waitingElementHandlers.get('RMLREF+0')).toMatchObject([
+							// TODO: match the sink, too
+							{ source: classes['class-a'], type: 'sink', t: 'class' },
+						]);
+					});
+
+				});
+
+			});
+
+			describe('Styles', () => {
+
+			});
+
+
 		});
 
 		describe('Dataset', () => {

src/sinks/event-handler-sink.ts

@@ -1,7 +1,12 @@
 import { addListener } from "../lib/addListener";
-import type { RMLEventListener, HTMLEventName } from "../types/dom";
+import type { EventListener, HTMLEventName } from "../types/dom";
 import type { Sink } from "../types/sink";
 
+// FIXME: wrap handler and options in an object, x streams can't emit both values!
+// Alternatively, set it in the constructor
 export const EventHandlerSink: Sink<HTMLElement> = (node: HTMLElement, e: HTMLEventName) =>
-    (handler: RMLEventListener, options?: AddEventListenerOptions) =>
-        addListener(node, e, handler, options);
+	(handler: EventListener<Event>, options?: AddEventListenerOptions) =>
+		// FIXME: to be able to remove an event listener, will need to store a reference to it first!
+		addListener(node, e, handler, options)
+;
+

src/sinks/inner-html-sink.ts

@@ -25,4 +25,3 @@ export const InnerHTML: ExplicitSink<'content'> = (source: RMLTemplateExpression
 		sink: InnerHTMLSink,
 	})
 ;
-

src/sources/event-listener.ts

@@ -1,11 +1,7 @@
 import { addListener } from "../lib/addListener";
-import type { RMLEventListener, HTMLEventName } from "../types/dom";
+import type { EventListener, HTMLEventName } from "../types/dom";
+
+export const eventListnerSource = (node: HTMLElement, eventName: HTMLEventName, handler: EventListener<Event>, options?: AddEventListenerOptions) =>
+	addListener(node, eventName, handler, options)
+;
 
-export const eventListnerSource = (
-  node: HTMLElement,
-  eventName: HTMLEventName,
-  handler: RMLEventListener,
-  options?: AddEventListenerOptions
-) => {
-  return addListener(node, eventName, handler, options);
-};

src/sources/swap-source.test.ts

@@ -3,6 +3,7 @@ import type { Observable } from 'rxjs';
 import { Subject } from 'rxjs';
 import { Swap, swap } from './swap-source';
 import { MockElement, MockEvent } from '../test-support';
+import { Observer } from '../types';
 
 describe('Swap Event Adapter', () => {
 	it('Swaps a value from an element with a static string', () => {
@@ -17,7 +18,7 @@ describe('Swap Event Adapter', () => {
 			target: el as HTMLInputElement
 		});
 		const handlerSpy = jest.fn();
-		const source = Swap(newValue, handlerSpy);
+		const source = Swap(newValue, handlerSpy) as Observer<any>;
 
 		source.next(eventData);
 
@@ -36,8 +37,8 @@ it('Swaps a value from an element with empty string by default', () => {
 	const eventData = MockEvent('input', {
 		target: el as HTMLInputElement
 	});
-    const handlerSpy = jest.fn();
-    const source = Swap(undefined, handlerSpy);
+	const handlerSpy = jest.fn();
+	const source = Swap(undefined, handlerSpy) as Observer<any>;
 
 	source.next(eventData);
 
@@ -57,7 +58,7 @@ it('Swaps a value using a function that transforms based on the old value', () =
 		target: el as HTMLInputElement
 	});
 	const handlerSpy = jest.fn();
-	const source = Swap(replacementFn, handlerSpy);
+	const source = Swap(replacementFn, handlerSpy) as Observer<any>;
 
 	source.next(eventData);
 

src/types/dom.ts

@@ -106,19 +106,17 @@ export interface EventListenerObject<E extends Event | any> {
     handleEvent(e: E): void;
 };
 
-export type EventListener<E extends Event> = EventListenerFunction<E> | EventListenerObject<E>;
-export type EventListenerOrEventListenerObject<E extends Event> = EventListener<E>;
+export type EventListener<E extends Event = Event> = EventListenerFunction<E> | EventListenerObject<E>;
 
 // /**
 //  * A generic equivalent of the DOM's EventListenerOrEventListenerObject
 //  */
-// export type EventListenerOrEventListenerObject<T = Event> = ((evt: T) => void) | { handleEvent: (evt: T) => void };
+export type EventListenerOrEventListenerObject<E extends Event = Event> = EventListener<E>;
 
 export type BooleanAttributeValue<T extends BooleanAttribute> = MaybeFuture<boolean | T | 'true'>;
 
 type DisabledType = 'disabled';
 
-
 // export type DocumentObject<E extends HTMLElement> = EventObject & ClassAttribute & DatasetObject & StyleObject & ValueAttribute<E> & ContentAttribute & GenericAttribute;
 
 /**