@esportsplus/template 0.40.2 → 0.40.4

package/build/compiler/codegen.js

@@ -126,7 +126,46 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, templa
             for (let j = 0, m = names.length; j < m; j++) {
                 let name = names[j];
                 if (name === TYPES.Attributes) {
-                    code.push(`${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`);
+                    let exprNode = exprNodes[index];
+                    if (exprNode && ts.isObjectLiteralExpression(exprNode)) {
+                        let canExpand = true, props = exprNode.properties;
+                        for (let k = 0, p = props.length; k < p; k++) {
+                            let prop = props[k];
+                            if (ts.isSpreadAssignment(prop) ||
+                                (ts.isPropertyAssignment(prop) && ts.isComputedPropertyName(prop.name)) ||
+                                (ts.isShorthandPropertyAssignment(prop) && prop.objectAssignmentInitializer)) {
+                                canExpand = false;
+                                break;
+                            }
+                        }
+                        if (canExpand) {
+                            for (let k = 0, p = props.length; k < p; k++) {
+                                let prop = props[k];
+                                if (ts.isPropertyAssignment(prop)) {
+                                    let propName = ts.isIdentifier(prop.name)
+                                        ? prop.name.text
+                                        : ts.isStringLiteral(prop.name)
+                                            ? prop.name.text
+                                            : null;
+                                    if (propName) {
+                                        code.push(generateAttributeBinding(element, propName, rewriteExpression(ctx, prop.initializer), ''));
+                                    }
+                                }
+                                else if (ts.isShorthandPropertyAssignment(prop)) {
+                                    code.push(generateAttributeBinding(element, prop.name.text, prop.name.text, ''));
+                                }
+                                else if (ts.isMethodDeclaration(prop) && ts.isIdentifier(prop.name)) {
+                                    code.push(generateAttributeBinding(element, prop.name.text, printer.printNode(ts.EmitHint.Expression, prop, ctx.sourceFile), ''));
+                                }
+                            }
+                        }
+                        else {
+                            code.push(`${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`);
+                        }
+                    }
+                    else {
+                        code.push(`${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`);
+                    }
                     index++;
                 }
                 else {

package/build/event/index.d.ts

@@ -1,10 +1,10 @@
-import { Element } from '../types.js';
+import { Attributes, Element } from '../types.js';
 import onconnect from './onconnect.js';
 import onresize from './onresize.js';
 import ontick from './ontick.js';
-declare const delegate: (element: Element, event: string, listener: Function) => void;
-declare const on: (element: Element, event: string, listener: Function) => void;
-declare const ondisconnect: (element: Element, listener: Function) => void;
-declare const onrender: (element: Element, listener: Function) => void;
-declare const runtime: (element: Element, event: `on${string}`, listener: Function) => void;
+declare const delegate: <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]) => void;
+declare const on: <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]) => void;
+declare const ondisconnect: (element: Element, listener: NonNullable<Attributes[`ondisconnect`]>) => void;
+declare const onrender: (element: Element, listener: NonNullable<Attributes[`onrender`]>) => void;
+declare const runtime: <E extends `on${string}`>(element: Element, event: E, listener: Attributes[E]) => void;
 export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/build/event/onconnect.d.ts

@@ -1,3 +1,3 @@
-import { Element } from '../types.js';
-declare const _default: (element: Element, listener: Function) => void;
+import { Attributes, Element } from '../types.js';
+declare const _default: (element: Element, listener: NonNullable<Attributes["onconnect"]>) => void;
 export default _default;

package/build/event/onresize.d.ts

@@ -1,3 +1,3 @@
-import { Element } from '../types.js';
-declare const _default: (element: Element, listener: Function) => void;
+import { Attributes, Element } from '../types.js';
+declare const _default: (element: Element, listener: NonNullable<Attributes["onresize"]>) => void;
 export default _default;

package/build/event/ontick.d.ts

@@ -1,6 +1,6 @@
-import { Element } from '../types.js';
+import { Attributes, Element } from '../types.js';
 declare const add: (task: VoidFunction) => void;
 declare const remove: (task: VoidFunction) => void;
-declare const _default: (element: Element, listener: Function) => void;
+declare const _default: (element: Element, listener: NonNullable<Attributes["ontick"]>) => void;
 export default _default;
 export { add, remove };

package/package.json

@@ -2,8 +2,8 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.29.11",
-    "@esportsplus/typescript": "^0.27.2",
+    "@esportsplus/reactivity": "^0.29.12",
+    "@esportsplus/typescript": "^0.27.3",
     "@esportsplus/utilities": "^0.27.2",
     "serve": "^14.2.5"
   },
@@ -39,7 +39,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.40.2",
+  "version": "0.40.4",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/compiler/codegen.ts

@@ -233,9 +233,83 @@ function generateTemplateCode(
                 let name = names[j];
 
                 if (name === TYPES.Attributes) {
-                    code.push(
-                        `${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
-                    );
+                    let exprNode = exprNodes[index];
+
+                    // Object literals can be expanded at compile time
+                    if (exprNode && ts.isObjectLiteralExpression(exprNode)) {
+                        let canExpand = true,
+                            props = exprNode.properties;
+
+                        // Check if all properties can be statically analyzed
+                        for (let k = 0, p = props.length; k < p; k++) {
+                            let prop = props[k];
+
+                            if (
+                                ts.isSpreadAssignment(prop) ||
+                                (ts.isPropertyAssignment(prop) && ts.isComputedPropertyName(prop.name)) ||
+                                (ts.isShorthandPropertyAssignment(prop) && prop.objectAssignmentInitializer)
+                            ) {
+                                canExpand = false;
+                                break;
+                            }
+                        }
+
+                        if (canExpand) {
+                            for (let k = 0, p = props.length; k < p; k++) {
+                                let prop = props[k];
+
+                                if (ts.isPropertyAssignment(prop)) {
+                                    let propName = ts.isIdentifier(prop.name)
+                                            ? prop.name.text
+                                            : ts.isStringLiteral(prop.name)
+                                                ? prop.name.text
+                                                : null;
+
+                                    if (propName) {
+                                        code.push(
+                                            generateAttributeBinding(
+                                                element,
+                                                propName,
+                                                rewriteExpression(ctx, prop.initializer),
+                                                ''
+                                            )
+                                        );
+                                    }
+                                }
+                                else if (ts.isShorthandPropertyAssignment(prop)) {
+                                    code.push(
+                                        generateAttributeBinding(
+                                            element,
+                                            prop.name.text,
+                                            prop.name.text,
+                                            ''
+                                        )
+                                    );
+                                }
+                                else if (ts.isMethodDeclaration(prop) && ts.isIdentifier(prop.name)) {
+                                    code.push(
+                                        generateAttributeBinding(
+                                            element,
+                                            prop.name.text,
+                                            printer.printNode(ts.EmitHint.Expression, prop, ctx.sourceFile),
+                                            ''
+                                        )
+                                    );
+                                }
+                            }
+                        }
+                        else {
+                            code.push(
+                                `${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
+                            );
+                        }
+                    }
+                    else {
+                        code.push(
+                            `${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
+                        );
+                    }
+
                     index++;
                 }
                 else {

package/src/event/index.ts

@@ -1,6 +1,6 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { Element } from '~/types';
+import { Attributes, Element } from '~/types';
 import { ondisconnect as disconnect } from '~/slot/cleanup';
 import onconnect from './onconnect';
 import onresize from './onresize';
@@ -88,13 +88,13 @@ function register(element: Element, event: string) {
 }
 
 
-const delegate = (element: Element, event: string, listener: Function): void => {
+const delegate = <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]): void => {
     element[ keys[event] || register(element, event) ] = listener;
 };
 
 // DIRECT_ATTACH_EVENTS in ./constants.ts tells compiler to use this function
-const on = (element: Element, event: string, listener: Function): void => {
-    let handler = (e: Event) => listener.call(element, e);
+const on = <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]): void => {
+    let handler = (e: Event) => (listener as Function).call(element, e);
 
     element.addEventListener(event, handler, {
         passive: passive.has(event)
@@ -105,31 +105,31 @@ const on = (element: Element, event: string, listener: Function): void => {
     });
 };
 
-const ondisconnect = (element: Element, listener: Function) => {
+const ondisconnect = (element: Element, listener: NonNullable<Attributes[`ondisconnect`]>) => {
     disconnect(element, () => listener(element));
 };
 
-const onrender = (element: Element, listener: Function) => {
+const onrender = (element: Element, listener: NonNullable<Attributes[`onrender`]>) => {
     root(() => listener(element));
 };
 
 const lifecycle = { onconnect, ondisconnect, onrender, onresize, ontick };
 
-const runtime = (element: Element, event: `on${string}`, listener: Function): void => {
+const runtime = <E extends `on${string}`>(element: Element, event: E, listener: Attributes[E]): void => {
     let key = event.toLowerCase();
 
     if (LIFECYCLE_EVENTS.has(key)) {
-        lifecycle[key as keyof typeof lifecycle](element, listener);
+        lifecycle[key as keyof typeof lifecycle](element, listener as any);
         return;
     }
 
     let e = event.slice(2).toLowerCase();
 
     if (DIRECT_ATTACH_EVENTS.has(key)) {
-        on(element, e, listener);
+        on(element, e, listener as Attributes[`on${typeof e}`]);
     }
     else {
-        delegate(element, e, listener);
+        delegate(element, e, listener as Attributes[`on${typeof e}`]);
     }
 };
 

package/src/event/onconnect.ts

@@ -1,9 +1,9 @@
 import { root } from '@esportsplus/reactivity';
 import { add, remove } from './ontick';
-import { Element } from '~/types';
+import { Attributes, Element } from '~/types';
 
 
-export default (element: Element, listener: Function) => {
+export default (element: Element, listener: NonNullable<Attributes['onconnect']>) => {
     let fn = () => {
             retry--;
 

package/src/event/onresize.ts

@@ -1,5 +1,5 @@
 import { onCleanup } from '@esportsplus/reactivity';
-import { Element } from '~/types';
+import { Attributes, Element } from '~/types';
 
 
 let listeners = new Map<Element, Function>(),
@@ -23,7 +23,7 @@ function onresize() {
 }
 
 
-export default (element: Element, listener: Function) => {
+export default (element: Element, listener: NonNullable<Attributes['onresize']>) => {
     listeners.set(element, listener);
 
     onCleanup(() => {

package/src/event/ontick.ts

@@ -1,4 +1,4 @@
-import { Element } from '~/types';
+import { Attributes, Element } from '~/types';
 import { raf } from '~/utilities';
 
 
@@ -33,7 +33,7 @@ const remove = (task: VoidFunction) => {
 };
 
 
-export default (element: Element, listener: Function) => {
+export default (element: Element, listener: NonNullable<Attributes['ontick']>) => {
     let connected = false,
         fn = () => {
             if (connected === false) {

package/test/range.ts

@@ -0,0 +1,44 @@
+import { reactive, root } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+// import form from '~/components/form';
+
+
+export default function(
+    this: { attributes?: Attributes } | any,
+    attributes: Attributes & { max: number, min: number, state?: { active: boolean, error: string, value: number } }
+) {
+    let { max, min } = attributes,
+        state = attributes.state || reactive({
+            active: false,
+            error: '',
+            value: 0
+        });
+
+    if (attributes?.value) {
+        state.value = Number( attributes.value );
+    }
+
+    // @ts-ignore
+    return html`
+        <input
+            class='range --border-state --border-black'
+            style='${() => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`}'
+            type='range'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                onfocusin: () => {
+                    state.active = true;
+                },
+                onfocusout: () => {
+                    state.active = false;
+                },
+                oninput: (e: any) => {
+                    state.value = Number((e.target as HTMLInputElement).value);
+                },
+                value: root(() => (attributes?.value as number) || state.value || 0)
+            }}
+        />
+    `;
+};

package/test/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
                 'events': resolve(__dirname, 'events.ts'),
                 'imported-values': resolve(__dirname, 'imported-values.ts'),
                 'nested': resolve(__dirname, 'nested.ts'),
+                'range': resolve(__dirname, 'range.ts'),
                 'slots': resolve(__dirname, 'slots.ts'),
                 'spread': resolve(__dirname, 'spread.ts'),
                 'static': resolve(__dirname, 'static.ts'),