Refactor component start method to call mounted function

src/apprun.ts

@@ -33,7 +33,8 @@ app.start = <T, E = any>(element?: Element | string, model?: T, view?: View<T>,
   const opts = { render: true, global_event: true, ...options };
   const component = new Component<T, E>(model, view, update);
   if (options && options.rendered) component.rendered = options.rendered;
-  component.mount(element, opts);
+  if (options && options.mounted) component.mounted = options.mounted;
+  component.start(element, opts);
   return component;
 };
 

src/component.ts

@@ -68,7 +68,6 @@ export class Component<T = any, E = any> {
     }
     if (!vdom && html) {
       html = directive(html, this);
-
       if (this.options.transition && document && document['startViewTransition']) {
         document['startViewTransition'](() => app.render(el, html, this));
       } else {
@@ -135,7 +134,12 @@ export class Component<T = any, E = any> {
   }
 
   start = (element = null, options?: MountOptions): Component<T, E> => {
-    return this.mount(element, { render: true, ...options });
+    this.mount(element, { render: true, ...options });
+    if (this.mounted && typeof this.mounted === 'function') {
+      const new_state = this.mounted({}, [], this.state);
+      (typeof new_state !== 'undefined') && this.setState(new_state);
+    }
+    return this;
   }
 
   public mount(element = null, options?: MountOptions): Component<T, E> {

src/types.ts

@@ -30,4 +30,5 @@ export type AppStartOptions<T> = {
   transition?: boolean;
   route?: string;
   rendered?: (state: T) => void
+  mounted?: (props:any, children:any, state: T) => T
 };

src/vdom-my.ts

@@ -243,7 +243,7 @@ function render_component(node, parent, idx) {
   let component = parent.__componentCache[key];
   if (!component || !(component instanceof tag) || !component.element) {
     const element = document.createElement(asTag);
-    component = parent.__componentCache[key] = new tag({ ...props, children }).start(element);
+    component = parent.__componentCache[key] = new tag({ ...props, children }).mount(element, { render: true });
   } else {
     component.renderState(component.state);
   }

tests/component.spec.tsx

@@ -430,9 +430,35 @@ describe('Component', () => {
     //   t['state'] = state;
     //   t.run('.')
     // });
-    t.run('.'); 
+    t.run('.');
   })
 
+
+  it('should call mounted function with .start', (done) => {
+    class Test extends Component {
+      state = 'a'
+      view = state => <div>{state}</div>
+      mounted = () => {
+        expect(this.element.innerHTML).toBe('<div>a</div>');
+        done();
+      }
+    }
+    const div = document.createElement('div');
+    const t = new Test().start(div);
+  });
+
+  it('should not call mounted function with .mount', () => {
+    class Test extends Component {
+      state = 'a'
+      view = state => <div>{state}</div>
+      mounted = () => {
+        throw new Error('should not call mounted function');
+      }
+    }
+    const div = document.createElement('div');
+    const t = new Test().mount(div);
+  });
+
 });