How to use the metal-jsx.Config.number function in metal-jsx

);
  }
}

App.PROPS = {
  highlightDOM: Config.func(),
  inspectDOM: Config.func(),
  onComponentExpand: Config.func(),
  onSelectedChange: Config.func(),
  port: Config.any(),
  setStateFn: Config.func(),
  theme: Config.oneOf(['dark', 'light']).value('light')
};

App.STATE = {
  firstColumnWidth: Config.number(),
  freezeUpdates: Config.value(false),
  rootComponents: Config.value({}),
  selectedComponent: Config.value({})
};

export default App;

class={`node-wrapper ${highlighted}`}
            onClick={this.focusNode}
            onMouseEnter={this.addHighlight}
            onMouseLeave={this.removeHighlight}
            style={style}
          >
            
          }
      
    );
  }
}

TreeNode.PROPS = {
  componentNode: Config.value({}),
  depth: Config.number().value(0),
  highlightDOM: Config.func(),
  onInspectDOM: Config.func(),
  onNodeExpand: Config.func(),
  onNodeSelect: Config.func(),
  selectedId: Config.string()
};

TreeNode.STATE = {
  highlight: Config.value(false),
  showMenu: Config.value(false)
};

export default TreeNode;

{`Child #${this.props.index}:`}

				<button>{'+'}</button>

				{this.state.subTree &amp;&amp;
					<div>
						
					</div>
				}
			
		);
	}
}

Child.PROPS = {
	index: Config.number()
};

Child.STATE = {
	subTree: Config.bool().value(false)
};

window.jsxApp = App;