[IMP] hooks: implement useRef hook

closes #194

src/component/component.ts

@@ -85,6 +85,7 @@ interface Internal<T extends Env, Props> {
   render: CompiledTemplate | null;
   mountedHandlers: { [key: number]: Function };
   classObj: { [key: string]: boolean } | null;
+  refs: { [key: string]: Component<T, any> | HTMLElement | undefined } | null;
 }
 
 //------------------------------------------------------------------------------
@@ -97,6 +98,9 @@ export class Component<T extends Env, Props extends {}> {
   static template?: string | null = null;
   static _template?: string | null = null;
   static _current?: any | null = null;
+  static components = {};
+  static props?: any;
+  static defaultProps?: any;
 
   /**
    * The `el` is the root element of the component.  Note that it could be null:
@@ -105,19 +109,10 @@ export class Component<T extends Env, Props extends {}> {
   get el(): HTMLElement | null {
     return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
   }
-  static components = {};
 
   env: T;
   props: Props;
 
-  // type of props is not easily representable in typescript...
-  static props?: any;
-  static defaultProps?: any;
-
-  refs: {
-    [key: string]: Component<T, any> | HTMLElement | undefined;
-  } = {};
-
   //--------------------------------------------------------------------------
   // Lifecycle
   //--------------------------------------------------------------------------
@@ -192,7 +187,8 @@ export class Component<T extends Env, Props extends {}> {
       mountedHandlers: {},
       observer: null,
       render: null,
-      classObj: null
+      classObj: null,
+      refs: null
     };
   }
 

src/component/directive.ts

@@ -263,9 +263,10 @@ QWeb.addDirective({
     let refExpr = "";
     let refKey: string = "";
     if (ref) {
+      ctx.rootContext.shouldDefineRefs = true;
       refKey = `ref${ctx.generateID()}`;
       ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
-      refExpr = `context.refs[${refKey}] = w${componentID};`;
+      refExpr = `context.__owl__.refs[${refKey}] = w${componentID};`;
     }
     let transitionsInsertCode = "";
     if (transition) {
@@ -273,7 +274,7 @@ QWeb.addDirective({
     }
     let finalizeComponentCode = `w${componentID}.${keepAlive ? "unmount" : "destroy"}();`;
     if (ref && !keepAlive) {
-      finalizeComponentCode += `delete context.refs[${refKey}];`;
+      finalizeComponentCode += `delete context.__owl__.refs[${refKey}];`;
     }
     if (transition) {
       finalizeComponentCode = `let finalize = () => {