experimenting with callable nodes

Author: joshbrew

dist/index.core.esm.js

@@ -6,8 +6,9 @@ export { methodstrings } from './src/loaders/methodstrings';
 export * from './src/services/Service';
 export * from './src/services/remote/remote.routes';
 export * from './src/services/ecs/ECS.service';
+export { html, xml } from './src/loaders/html/html';
 export * from './src/loaders/html/html.loader';
-export { DOMElement, addCustomElement, html } from './src/loaders/html/DOMElement';
+export { DOMElement, addCustomElement } from './src/loaders/html/DOMElement';
 export * from './src/loaders/html/wc.loader';
 export * from './src/services/e2ee/E2EE.service';
 export * from './src/services/http/HTTP.browser';

dist/index.core.js

@@ -64,7 +64,13 @@ export type Listener = {
  subInput?: boolean;
  onchange: Function;
 };
-export declare class GraphNode {
+export declare class Callable extends Function {
+ __bound: Callable;
+ __call: ((...args: any[]) => any);
+ [key: string]: any;
+ constructor();
+}
+export declare class GraphNode extends Callable {
  __node: {
  tag: string;
  unique: string;

dist/index.d.ts

@@ -4,22 +4,19 @@ export function parseFunctionFromText(method: any): any;
 export class DOMElement extends HTMLElement {
  static get tag(): string;
  static addElement(tag?: string, cls?: typeof DOMElement, extend?: any): void;
- template: (self: any, props: any) => string;
- props: {};
  useShadow: boolean;
- styles: any;
- oncreate: any;
- onresize: any;
- ondelete: any;
- onchanged: any;
- renderonchanged: boolean;
  FRAGMENT: any;
  STYLE: any;
  attachedShadow: boolean;
  obsAttributes: string[];
- get observedAttributes(): string[];
+ props: {};
  attributeChangedCallback: (name: any, old: any, val: any) => void;
+ onchanged: any;
  ONRESIZE: ((ev: any) => void) | ((ev: any) => void);
+ ondelete: (() => void) | ((props?: {}) => void);
+ oncreate: any;
+ renderonchanged: number;
+ template: any;
  connectedCallback(): void;
  delete: () => void;
  render: (props?: {}) => void;

dist/index.esm.js

@@ -0,0 +1,56 @@
+export declare function html(strings: TemplateStringsArray, ...args: any[]): (elm?: HTMLElement) => HTMLElement | DocumentFragment;
+/**
+ *
+ * let htmlfunction = html`<span></span>` //e.g. some html
+ * htmlfunction(document.body); //append the template string to the desired element, or just return the prepared template element
+ *
+ * Syntax highlighting with lit-html plugin: https://open-vsx.org/extension/meganrogge/template-string-converter
+ 
+ // Example usage of the html function
+ document.addEventListener("DOMContentLoaded", () => {
+ const app = document.getElementById('app');
+
+ const title = document.createElement('h1');
+ title.textContent = "Welcome to HTML Function Test";
+
+ const paragraph = document.createElement('p');
+ paragraph.textContent = "This is a paragraph element created using native DOM API.";
+
+ // Creating HTML structure using the html function
+ const content = html`
+ <div>
+ <h2>This is a test</h2>
+ ${title}
+ <p>This is a paragraph element created using the html function.</p>
+ ${paragraph}
+ </div>
+ `();
+
+ app.appendChild(content);
+ });
+
+*/
+export declare function xml(strings: TemplateStringsArray, ...args: any[]): (elm?: Node, namespace?: string) => string;
+/** Test:
+ *
+ *
+ const testXmlFunction = () => {
+ const namespace = "http://www.example.com/test";
+ const resultContainer = document.createElement('div');
+ 
+ const testElement = document.createElementNS(namespace, 'testElement');
+ testElement.textContent = "Test Content";
+ 
+ const xmlAppender = xml`Hello, ${'World'}! This is a ${testElement}.`;
+ const xmlString = xmlAppender(resultContainer, namespace);
+ 
+ resultContainer.innerHTML += `<pre>${xmlString}</pre>`;
+ 
+ console.log(xmlString);
+ document.body.appendChild(resultContainer);
+ };
+
+ testXmlFunction();
+ *
+ *
+ */ 

dist/index.js

@@ -36,7 +36,10 @@ export declare const animate: (node: GraphNode, parent: GraphNode | Graph, graph
  *
  * nodeA.__listeners['nodeB.x'] = {
  * callback:(result)=>void,
- * branch:{if:Function|any, then:Function|any|GraphNode}
+ * branch:{
+ * if:Function|any, //if a function using the result evaluates to true or if the value equals the if value
+ * then:Function|any|GraphNode //call a function, return a different result, or call a node
+ * }
  * }
  *
  */