merge

index.js

@@ -283,10 +283,11 @@ var transformServe = function(dir, anything) {
 
 
   return function(req, res, next) {
+    //return next();
     if(req.url.substr(-3)[0] === '.' || req.url.substr(-4)[0] === '.')
       return next();
 
-    let types = 'scss,jsx,svg'.split(',')
+    let types = 'jsx,scss,svg'.split(',')
     let test = 0;
     let iterate = function() {
       let outerFixedUrl = req.url+'.'+types[test];

src/core/Require.js

+var ansispan = function (str) {
+  Object.keys(ansispan.foregroundColors).forEach(function (ansi) {
+    var span = '<span style="color: ' + ansispan.foregroundColors[ansi] + '">';
+    str = str.replace(
+      new RegExp('\033\\[' + ansi + 'm', 'g'),
+      span
+    ).replace(
+      new RegExp('\033\\[0;' + ansi + 'm', 'g'),
+      span
+    );
+  });
+  str = str.replace(/\033\[1m/g, '<b>').replace(/\033\[22m/g, '</b>');
+  str = str.replace(/\033\[3m/g, '<i>').replace(/\033\[23m/g, '</i>');
+
+  str = str.replace(/\033\[m/g, '</span>');
+  str = str.replace(/\033\[0m/g, '</span>');
+  return str.replace(/\033\[39m/g, '</span>')
+    .replace(/\[90m/g, '  ');
+};
+
+ansispan.foregroundColors = {
+  '30': 'black',
+  '31': 'red',
+  '32': 'green',
+  '33': 'yellow',
+  '34': 'blue',
+  '35': 'purple',
+  '36': 'cyan',
+  '37': 'white'
+};
+
 ;(function(Path){
   'use strict';
 
@@ -7,6 +38,28 @@
     console.log.apply(console, ['Define'].concat([].slice.call(arguments)));
   };*/
 
+
+
+  window.onerror = function(message, source, lineno, colno, error) {
+    fetch(source)
+      .then(function(resp) {
+        return resp.text();
+      })
+      .then(function(data) {
+        if(data.match(/^(unknown|Error|error)/)!==null){
+          var erDiv = D.div({cls: 'error-block', renderTo: document.body},
+            D.input({attr: {type: 'button', value: 'Hide'}, on: {click: function() {
+                  erDiv.parentNode.removeChild(erDiv);
+            }}}))
+          var dataEl = D.div();
+          erDiv.appendChild(dataEl)
+          dataEl.innerHTML = ansispan(data)
+        }
+      })
+      .catch()
+    console.error(source, message, error);
+  };
+
   var head = document.getElementsByTagName( 'head' )[ 0 ];
   var cssLoader = function( fileName ){
     var link = document.createElement( 'link' );
@@ -20,8 +73,16 @@
 
     var script = document.createElement( 'script' );
     script.setAttribute( 'type', script.type = 'text/javascript' );
-    script.onload = function(){
+    script.onload = function(a,b,c){
+      if(fileName.indexOf('Fields')>-1){
+        //debugger
+        console.log('akkk',a,b,c)
+      }
+    };
 
+    script.onerror = function(a,b,c){
+      if(fileName.indexOf('Fields')>-1)debugger
+      console.log('kkk',a,b,c)
     };
     script.setAttribute( 'src', script.src = fileName );
     head.appendChild( script );
@@ -82,6 +143,7 @@
                 definitions[ dep ] = { exports: {} };
                 if( instantLoader.loader( dep ) ){
                   skip = true;
+                  definitions[ dep ].notResolved = 0;
                 }else{
                   definitions[ dep ].loading = true;
                 }

src/global-styles/base.scss

@@ -46,3 +46,14 @@ img {
 	//display: contents;
 	width: 100%;
 }
+
+.error-block {
+	background: #194965;
+	div {
+		white-space: pre;
+		font-family: monospace;
+		padding: 0 32px 16px;
+		color: #ccdde8;
+	}
+}
+

src/main.jsx

 import './view/page/login/Login.jsx';
 import './view/page/account/Account.jsx';
+import './view/page/tmp/Fields.jsx';
+
 import './view/cmp/switch/Switch.jsx';
 import Header from './view/block/header/Header.jsx';
 import "/global-styles/base.scss";
@@ -12,6 +14,7 @@ export default function() {
     {Switch({cls: 'page-content__inner', key: 'navigation.current'}, {
       login: new view.page.Login(),
       main: new view.page.Account(),
+      fields: new view.page.tmp.Fields()
     })}
   </div>;
 };

src/view/block/header/Header.jsx

@@ -13,7 +13,7 @@ export default D.declare('view.block.Header', () => {
         {
             [
                 'login',
-                'main'
+                'main','fields'
             ].map(name=>
                 <button class="button-temp" type={'button'} onClick={() => store.set('navigation.current', name)}>{name}</button>
             )

src/view/cmp/field/PhoneInput.jsx

+import Input from './Input.jsx';
+
+export default D.declare('view.cmp.field.PhoneInput', (cfg, children)=> {
+  return <div class={D.cls( "labeled-field", cfg.cls, { "labeled-field--invalid": cfg.invalid } )}>
+    <label class="labeled-field__label">2
+      <span class="labeled-field__label-text">{cfg.label}</span>
+      <Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
+    </label>
+    {children}
+  </div>
+})

src/view/page/tmp/Fields.jsx

+import Button from "/view/cmp/button/Button.jsx";
+import LabeledField from "../../cmp/field/LabeledField.jsx";
+import PhoneInput from "../../cmp/field/PhoneInput.jsx";
+export default D.declare('view.page.tmp.Fields', () => {
+  return <div>
+    <div>
+      <h5>Labeled field</h5>
+      <LabeledField label={'Label'}/>
+    </div>
+
+    <div>
+      <h5>Phone input</h5>
+
+      <PhoneInput label={'Label'}/>
+    </div>
+  </div>
+});
\ No newline at end of file