never bake onmount in html

Author: dariomannu

src/parser/parser.test.ts

@@ -237,6 +237,70 @@ describe('Parser', () => {
 
         });
 
+        describe('Booleans', () => {
+            describe('Attributes', () => {
+
+                it('handles true as a string', () => {
+                    const bool = true;
+                    const template = rml`<div something="${bool}">Hello</div>`;
+
+                    expect(template).toEqual(`<div something="true">Hello</div>`);
+                });
+
+                it('handles false as a string', () => {
+                    const bool = false;
+                    const template = rml`<div something="${bool}">Hello</div>`;
+
+                    expect(template).toEqual(`<div something="false">Hello</div>`);
+                });
+
+            });
+
+            describe('Content', () => {
+
+                it('handles true as a string', () => {
+                    const bool = true;
+                    const template = rml`<div>${bool}</div>`;
+
+                    expect(template).toEqual(`<div>${bool}</div>`);
+                });
+
+                it('handles false as a string', () => {
+                    const bool = false;
+                    const template = rml`<div>${bool}</div>`;
+
+                    expect(template).toEqual(`<div>${bool}</div>`);
+                });
+
+            });
+
+        });
+
+        describe.skip('Symbols', () => {
+            describe('Attributes', () => {
+
+                it('handles symbols as strings', () => {
+                    const sym = Symbol('test');
+                    const template = rml`<div something="${sym}">Hello</div>`;
+
+                    expect(template).toEqual(`<div something="${sym.toString()}">Hello</div>`);
+                });
+
+            });
+
+            describe('Content', () => {
+
+                it('handles symbols as strings', () => {
+                    const sym = Symbol('test');
+                    const template = rml`<div>${sym}</div>`;
+
+                    expect(template).toEqual(`<div>${sym.toString()}</div>`);
+                });
+
+            });
+
+        });
+
     });
 
     describe('Sources', () => {
@@ -384,6 +448,28 @@ describe('Parser', () => {
                         );
                     });
 
+                    it('always defers onmount', () => {
+                        const fn = () => alert(123);
+                        const a = { 'onmount': fn };
+                        const template = rml`<div ...${a}>Hello</div>`;
+
+                        expect(template).toMatch(/<div.*resolve="RMLREF\+0".*>Hello<\/div>/);
+                        expect(waitingElementHanlders.get('RMLREF+0')![0]).toStrictEqual(
+                            { type: 'sink', t: 'mixin', source: { 'onmount': fn }, sink: AttributeObjectSink },
+                        );
+                    });
+
+                    it('always defers rml:onmount', () => {
+                        const fn = () => alert(123);
+                        const a = { 'rml:onmount': fn };
+                        const template = rml`<div ...${a}>Hello</div>`;
+
+                        expect(template).toMatch(/<div.*resolve="RMLREF\+0".*>Hello<\/div>/);
+                        expect(waitingElementHanlders.get('RMLREF+0')![0]).toStrictEqual(
+                            { type: 'sink', t: 'mixin', source: { 'rml:onmount': fn }, sink: AttributeObjectSink },
+                        );
+                    });
+
                 });
 
 

src/parser/parser.ts

@@ -258,7 +258,7 @@ export function rml(strings: TemplateStringsArray, ...expressions: RMLTemplateEx
 						// Merge static (string, number) properties of the mixin inline in the rendered HTML
 						// and pass the rest as a future sink
 						const [staticAttributes, deferredAttributes] = Object.entries(expression as AttributeObject || {})
-							.reduce((acc, [k, v]) => (acc[+(isFutureSinkAttributeValue(v) || isRMLEventListener(k, v) && isFunction(v))].push([k, v]), acc), [[] as [HTMLAttributeName, PresentSinkAttributeValue][], [] as [HTMLAttributeName, FutureSinkAttributeValue][]])
+							.reduce((acc, [k, v]) => (acc[+(isFutureSinkAttributeValue(v) || isRMLEventListener(k, v) && isFunction(v) || /^(?:rml:)?onmount$/.test(k))].push([k, v]), acc), [[] as [HTMLAttributeName, PresentSinkAttributeValue][], [] as [HTMLAttributeName, FutureSinkAttributeValue][]])
 						;
 
 						acc += staticAttributes.map(([k, v])=>`${k}="${v}"`).join(' ');

src/test-support.ts

@@ -18,12 +18,14 @@ export interface MockElement extends HTMLElement {
     selectedIndex?: number;
     setAttribute(name: string, value: string): void;
     getAttribute(name: string): string | null;
+    hasAttribute: (name: string) => boolean;
     removeAttribute(name: string): void;
     className: string;
     insertAdjacentHTML(pos: InsertPosition, html: string): void;
     addEventListener(eventName: string, handler: EventListenerOrEventListenerObject): void;
     removeEventListener(eventName: string, handler: EventListenerOrEventListenerObject): void;
     dispatchEvent(event: Event): boolean;
+    childNodes: NodeListOf<ChildNode>;
 };
 
 export const MockElement = (props?: Record<string, any>): MockElement => {
@@ -44,6 +46,9 @@ export const MockElement = (props?: Record<string, any>): MockElement => {
         getAttribute(name: string) {
             return this[name];
         },
+        hasAttribute(name: string) {
+            return this[name] !== undefined;
+        },
         removeAttribute(name: string) {
             delete this[name];
         },
@@ -74,6 +79,7 @@ export const MockElement = (props?: Record<string, any>): MockElement => {
         dispatchEvent(event: Event) {
             (<HTMLEventSource>el)[`on${event.type}` as RMLEventAttributeName]?.(event);
         },
+        childNodes: [] as NodeListOf<ChildNode>,
         ...props,
     };