POC Validation

deps.ts

@@ -1,2 +1,9 @@
 export * as path from "https://deno.land/[email protected]/path/mod.ts";
 export { v4 } from "https://deno.land/[email protected]/uuid/mod.ts";
+export * as fs from "https://deno.land/[email protected]/fs/mod.ts";
+export * as colors from "https://deno.land/[email protected]/fmt/colors.ts";
+export {
+  assertEquals,
+} from "https://deno.land/[email protected]/testing/asserts.ts";
+export { serve } from "https://deno.land/[email protected]/http/server.ts";
+export { parse, print } from "https://x.nest.land/[email protected]/mod.ts";

doc/PATTERN_COMPONENT.md

@@ -0,0 +1,97 @@
+# Eon Component Declaration's pattern
+Eon's reactivity would be quiet inspired by Svelte's Reactivity
+
+the idea is to use vars (from the template provided by the end user), and to assign  value in two time.
+for this we would use two functions `component_ctx` and `init`.
+the first one contains the second one.
+
+```js
+function component_ctx() {
+  // element's vars declarations here like: let tmp, n;
+  // ...
+  function init() {
+    // element assignment here
+  }
+  return {
+    init,
+  };
+}
+customElement.define('[component-uuid]', class extends HTMLElement {
+  connectedCallback() {
+    super();
+    const ctx = component_ctx();
+    const template = ctx.init();
+  }
+})
+```
+# TODO: more documentations here
+
+```js
+import { VMC } from '../[path_to_component].ts';
+
+function component_ctx() {
+  // tmp is a template element
+  // n3 is a div element
+  // t4 is a boundtext textnode
+  let tmp1,
+  n2,
+  n3,
+  t4,
+  /* boundtextnode with end user's input */
+  t4_data_update;
+  t4_data_prev,
+  t4_data_next
+  /* c5 is a component */
+  c5,
+  c5_props_update,
+  /* and then the component */
+  component = new VMC();
+
+  /* will assign all the nodes inside vars*/
+  function init() {
+    tmp1 = document.createElement('template');
+    n3 = document.createElement('div');
+    c5 = document.createElement('data-[uuid_sub_component]');
+    t4 = new Text(' ');
+    t4_data_update = () => this.message;
+    /* using the component's props attribute value */
+    c5_props_update = () => ({
+      message: this.message
+    });
+    // append childs
+    tmp1.append(n3);
+    n3.append(t4);
+    n3.append(c5);
+    // TODO attributes and bound attributes
+    // return the template
+    return tmp1;
+  }
+  /* general updates */
+  function update() {
+    t4_data_next = t4_data_update(component);
+    if (t4_data2_prev !== t4_data_next) {
+      t4.data = t4_data_next;
+      t4_data2_prev = t4_data_next;
+    }
+    /* using the component's props attribute value */
+    c5.props(c5_props_update(component));
+  }
+  return {
+    component,
+    init: init.bind(component),
+    update: update.bind(component)
+  }
+}
+customElement.define('data-[uuid_component]', class extends HTMLElement {
+  constructor() {
+    super();
+    const { init, update, component } = component_ctx();
+    let template = init();
+    let templateContent = template.content;
+    this.component = component;
+
+    const shadowRoot = this.attachShadow({mode: 'open'})
+      .appendChild(templateContent.cloneNode(true));
+  }
+});
+```

doc/PATTERN_FOR_STATEMENT.md

@@ -0,0 +1,45 @@
+```ts
+function component_ctx() {
+  let wrapper1; // wrapper of all the elements rendered
+  function init() {
+    // template creation
+    wrapper1 = document.createElement('eon-list');
+    // a section has no style applied
+    render_iteration1();
+    tmp1.append(wrapper1);
+    return tmp1;
+  }
+  function render_iteration1() {
+    // start iterations rendering
+    // usign pattern 'for_directive.ts'
+    // @ts-nocheck
+    let arr_uuid_element = this.array, i = 0;
+    for (const number of arr_uuid_element) {
+      i = arr_uuid_element.indexOf(number);
+      // add missing elements
+      if (i > wrapper1.childNodes.length) {
+        let n1;
+        wrapper1.append(n1);
+        n1.setAttribute('test', 'true');
+        "{{ childs_add_event_listener }}"
+        // update elements
+        "{{ childs_update }}"
+      } else {
+        // need to get the corresponding element
+        "{{ childs_reassignment }}"
+        // update elements
+        "{{ childs_update }}"
+      }
+    }
+    // remove extra elements
+    if (i < wrapper1.childNodes.length) {
+      for (let i_remove = wrapper1.childNodes.length; i < i_remove; i_remove--) {
+        wrapper1.childNodes[i_remove].remove();
+      }
+    }
+  }
+  function update() {
+    render_iteration1();
+  }
+}
+```

examples/hello-app/AnotherComponent.tsx

@@ -0,0 +1,20 @@
+// @ts-ignore
+export type AnProps = EonProps<{ test: string; }>;
+export default function (this: VMC, props: AnProps) {
+  return (<template>
+    <style>{/*css*/`div { color: blue }`}</style>
+    <div>
+      test of props {() => this.test}
+    </div>
+  </template>)
+}
+export class VMC {
+  public message = 'Hello World overwritten';
+  public test: string = 'test';
+  static props(this: VMC, props: AnProps) {
+    this.test = props.test as string;
+  }
+  static updated(this: VMC) {
+    this.message = 'Im updated';
+  }
+}

examples/hello-app/HelloApp.tsx

@@ -1,23 +1,45 @@
-import * as HelloApp2 from './HelloApp2.jsx';
-import * as HelloApp3 from './HelloApp2.jsx';
-import * as HelloApp4 from './HelloApp2.jsx';
-
-export const name = "AppHello";
-export default function(this: ViewModel): JSX.Element {
-  // what to do about all the things referenced here
-  // maybe it's a helper zone for SSR
-  // but what about SPA
-  // keep in mind, this function is just to do the dom tree
-  return (<>
-    <template>
-      <div class="container">{() => this.message}</div>
-    </template>
-    <style>
-      {`.container { color: red; }`}
-    </style>
-  </>
-  )
-}
-export class ViewModel {
-  public message = "Hello World";
+import AnotherComponent, { VMC as AnVMC } from "./AnotherComponent.tsx";
+export default function (this: VMC) {
+  return (<template>
+    <style>{
+      /*css*/`.container {
+          color: red;
+        }
+      `}</style>
+    {() => this.array.length}
+    <div class="container">
+      {() => this.message}
+      {() => this.newData.test.message}
+      <span class="span">
+        {() => '> ' + Date.now()}
+      </span>
+      <span class={() => this.newData.test.message}>
+        test on reactive attributes
+      </span>
+    </div>
+    <AnotherComponent test={() => this.newData.test.message} />
+  </template>)
 }
+
+
+export class VMC extends AnVMC {
+  public message: string = "Hello World";
+  public array: number[] = [0];
+  public newData = {
+    test: {
+      message: 'string'
+    }
+  };
+
+  static connected(this: VMC) {
+    let i = 0;
+    setInterval(() => {
+      this.newData.test.message = `${i} test deep reactivity`;
+      i++;
+    }, 50);
+  }
+
+  public switchText() {
+    this.message = 'test';
+  }
+}

examples/hello-app/mod.ts

@@ -0,0 +1,3 @@
+import { EonApplication } from '../../mod.ts';
+
+await EonApplication.dev('./examples/hello-app/HelloApp.tsx');

examples/ideas/design-prototype.md

@@ -0,0 +1,32 @@
+```tsx
+import TodoListRow, { Todo } from '../todo-list/TodoListRow.tsx';
+
+export interface DesignPrototypeProps { message: string }
+export interface DesignPrototype {
+  list: Todo[];
+  props: DesignPrototypeProps
+}
+
+export function connected(this: DesignPrototype) {
+  this.list.push({
+    active: false,
+    value: 'test from design-prototype',
+    issues: [],
+  });
+}
+
+export default function(this: DesignPrototype, props: DesignPrototypeProps) {
+  this.list = [];
+  this.props = props;
+  return (<template>
+    {() => this.props.message}
+    {(todo: Todo, i: number, arr: Todo[] = this.list) =>
+      <TodoListRow todo={() => todo}>
+        <span>
+          {() => `${i}  -  `}
+        </span>
+      </TodoListRow>
+    }
+  </template>)
+}
+```

examples/todo-list/ThemeTodoList.ts

@@ -0,0 +1,7 @@
+export default {
+  grey: '#333',
+  lightGrey: '#f8f8ff',
+  border: '#d0d0d0',
+  green: '#d0fdd0',
+  inactive: '#fdd0d0',
+};