SVG inlining

index.js

@@ -50,7 +50,7 @@ const serveBundle = async function(tpl, res){
 var path = require('path');
 
 var bCore = require( "@babel/core" );
-var b = require('@babel/plugin-transform-modules-amd')
+var simpleTransformToAMD = require('./pack/babel-plugin-transform-2015es-to-amd')
 var transformJSX = function(code, fileName, cb) {
   bCore.transform(
     code,
@@ -61,18 +61,7 @@ var transformJSX = function(code, fileName, cb) {
           "pragmaFrag": "D.f", // default is React.Fragment
           "throwIfNamespace": false // defaults to true
         } ],
-        ['@babel/plugin-transform-modules-amd']
-/*        ["@babel/plugin-transform-modules-commonjs", { "synchronousImport": true }],
-        ['func-wrap', {
-          /!* use a named export *!/
-          name: 'library',
-
-          /!* assign arguments to the function *!/
-          args: ['fileName="'+fileName+'"'],
-
-          /!* export as CommonJS *!/
-          format: 'cjs'
-        }]*/
+        [simpleTransformToAMD]
       ],
       sourceMaps: 'both',
       sourceFileName: fileName,
@@ -96,60 +85,48 @@ var transformServe = function(dir) {
       debugger
     }*/
 
-    if (req.url.substr(-5) === '.scss') {
+    if (req.url.substr(-5) === '.scss'){
 // not secure
       //console.log('scss', dir, req.url, __dirname)
-      fs.readFile(path.join(__dirname,dir,req.url), function(err, data){
+      fs.readFile( path.join( __dirname, dir, req.url ), function( err, data ){
         if( err ){
           next();
         }else{
-          sass.render({
-            file: path.join(__dirname,dir,req.url),
+          sass.render( {
+            file: path.join( __dirname, dir, req.url ),
             sourceMap: true,
-            importer: function(url, prev, done) {
-              //console.log(url, prev, done)
-              // url is the path in import as is, which LibSass encountered.
-              // prev is the previously resolved path.
-              // done is an optional callback, either consume it or return value synchronously.
-              // this.options contains this options hash
-              setTimeout(function(result){
-                var name = path.resolve(path.dirname(prev), url);
-                var displayName = path.relative(path.join(__dirname,dir),path.resolve(path.dirname(prev), url))
-
-                done({
+            importer: function( url, prev, done ){
+              setTimeout( function( result ){
+                var name = path.resolve( path.dirname( prev ), url );
+                var displayName = path.relative( path.join( __dirname, dir ), path.resolve( path.dirname( prev ), url ) )
+
+                done( {
                   file: displayName, // only one of them is required, see section Special Behaviours.
-                  contents: fs.readFileSync(name)+''
-
-                });
-                //console.log({name, __dirname, dir, url, prev})
-              },10);
-              // OR
-              //var result = someSyncFunction(url, prev);
-              //return {file: result.path, contents: result.data};
+                  contents: fs.readFileSync( name ) + ''
+
+                } );
+              }, 10 );
             }
-        }, function(err, result) {
-            if(err){
-              const errorText = `Error at ${err.file}:\n`+err.formatted;
-              return res.end(errorText)
+          }, function( err, result ){
+            if( err ){
+              const errorText = `Error at ${err.file}:\n` + err.formatted;
+              return res.end( errorText )
             }
-            res.header('Content-Type', 'text/css');
-            res.end(result.css)
-            //debugger
-            /*...*/ });
+            res.header( 'Content-Type', 'text/css' );
+            res.end( result.css )
+          } );
         }
-      });
+      } );
     }else if (req.url.substr(-4) === '.jsx') {
-      console.log('Serve jsx', dir, req.url)
+
       fs.readFile(path.join(dir, req.url), function(err, data){
         if( err ){
-
           next();
         }else{
           console.log('Transform jsx', req.url);
           transformJSX(data+'', req.url, function(err, result) {
             if(err){
               console.log('Error in transforming jsx', err);
-
               res.end(err.message+'\n'+err.stack)
             }else{
               cache[ req.url + '.map' ] = JSON.stringify( result.map );
@@ -160,6 +137,42 @@ var transformServe = function(dir) {
         }
       });
 
+    }else if (req.url.substr(-4) === '.svg') {
+      console.log('Serve svg', dir, req.url)
+      fs.readFile(path.join(dir, req.url), function(err, data){
+        if( err ){
+          next();
+        }else{
+          console.log('Generate SVG declaration', req.url);
+
+          bCore.transform(
+            `export default D.declare("${req.url.replace(/\//g,'.').split('.').filter(String).join('.')}", (cfg)=>{ return ${(data+'').replace(/(<svg[^>]+"\s*)>/i,'$1 {...cfg}>')}; });`,
+            {
+              "plugins": [
+                [ "@babel/plugin-transform-react-jsx", {
+                  "pragma": "D.s", // default pragma is React.createElement
+                  "throwIfNamespace": false // defaults to true
+                } ],
+                [simpleTransformToAMD]
+              ],
+              sourceMaps: 'both',
+              sourceFileName: req.url,
+              moduleId: req.url
+            }, function( err, result ){
+              if(err){
+                console.log('Error in transforming jsx', err);
+
+                res.end(err.message+'\n'+err.stack)
+              }else{
+                cache[ req.url + '.map' ] = JSON.stringify( result.map );
+                res.set( 'SourceMap', req.url + '.map' );
+                res.header( 'Content-Type', 'text/javascript' );
+                res.end( result.code );
+              }
+            } );
+        }
+      });
+
     } else {
       next();
     }

package.json

@@ -17,11 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.3",
-    "@babel/plugin-transform-modules-amd": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.8.3"
-  },
-  "plugins": [
-    "@babel/plugin-transform-react-jsx"
-  ]
+    "@babel/plugin-transform-react-jsx": "^7.8.3",
+    "@babel/template": "^7.8.3"
+  }
 }

src/core/DOM.js

@@ -46,6 +46,67 @@ NS.apply = function(a,b) {
         prop: true,
         on: true
     };
+    var fastDomEl = function(type, cfg) {
+        cfg = cfg || {};
+        var cls = cfg.cls || cfg['class'] || cfg.className,
+          style = cfg.style,
+
+          attr = cfg.attr || {},
+          prop = cfg.prop,
+          on = cfg.on || {},
+          renderTo = cfg.renderTo,
+          el;
+        el = document.createElementNS( svgNS, type );
+        el.setAttribute( 'xmlns', svgNS );
+
+        var i, _i, name;
+
+        for(i in cfg)
+            if( cfg.hasOwnProperty(i)){
+                name = i.toLowerCase();
+                if(name in used)
+                    continue;
+
+                if(name.substr(0, 2) === 'on'){
+                    on[ name.substr( 2 ) ] = cfg[ i ];
+                }else{
+                    attr[i] = cfg[i];
+                }
+            }
+
+        if( cls ){
+            if(typeof cls === 'function'){
+                cls(setters.cls(el));
+            }else{
+                setters.cls(el)(cls);
+            }
+        }
+        for( i in attr ){
+            if(attr.hasOwnProperty( i )){
+                setters.attr( el, i )( attr[ i ] );
+            }
+        }
+        for( i in prop ){
+            prop.hasOwnProperty( i ) && ( el[ i ] = prop[ i ] );
+        }
+
+        for( i in on ){
+            on.hasOwnProperty( i ) && el.addEventListener( i, on[ i ] );
+        }
+        if( style ){
+            NS.apply( el.style, style );
+        }
+        for( i = 2, _i = arguments.length; i < _i; i++ ){
+            var child = arguments[ i ];
+            D.appendChild( el, child );
+        }
+
+        if( renderTo ){
+            D.appendChild( renderTo, el );
+        }
+        return el;
+
+    };
 // ~jsx h function
     var domEl = function( type, cfg ){
 
@@ -160,6 +221,7 @@ NS.apply = function(a,b) {
       return el;
     };
     D.h = domEl;
+    D.s = fastDomEl;
     D.removeChildren = function(el){
         var subEl;
         while((subEl = el.lastChild)){

src/core/Require.js

@@ -32,6 +32,7 @@
     { name: '.css', loader: cssLoader },
     { name: '.jsx', loader: jsLoader },
     { name: '.js', loader: jsLoader },
+    { name: '.svg', loader: jsLoader },
   ];
 
   var definitions = {};
@@ -44,7 +45,7 @@
     var definition = definitions[name];
     if(definition.notResolved === 0){
       console.log(name,'execute')
-      definition.fn.apply(null, definition.deps.map(function(dep) {
+      definition.exports = definition.fn.apply(null, definition.deps.map(function(dep) {
         return dep === 'exports' ? definition.exports : definitions[dep].exports
       }));
 

src/index.html

@@ -25,7 +25,7 @@
 
 <script>
     define('start', ['main.jsx'], function(main) {
-      main.default();
+      main();
     });
 </script>
 </body>

src/view/page/login/Login.jsx

-import '../../cmp/field/LabeledField.jsx'
+import '../../cmp/field/LabeledField.jsx';
+import Logo from '../../../svg/logo_vkusvill.svg';
 
 export default D.declare('view.page.Login', ()=>
   <div>
       <div class="big-logo">
-          <img src="uploads/images/svg/logo_vkusvill.svg" alt="Логотип ВкусВилл"/>
+        <Logo width="660" height="300"/>
       </div>
     <view.cmp.field.LabeledField label={'Login'}/>
     <view.cmp.field.LabeledField label={'Password'}/>

yarn.lock

@@ -161,7 +161,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
-"@babel/template@^7.8.3":
+"@babel/runtime@^7.6.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
+  integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@babel/template@^7.6.0", "@babel/template@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
   integrity sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==
@@ -329,6 +336,14 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
+"babel-plugin-transform-es2015-modules-simple-amd@git+https://github.com/dcleao/babel-plugin-transform-es2015-modules-simple-amd.git":
+  version "0.3.0"
+  resolved "git+https://github.com/dcleao/babel-plugin-transform-es2015-modules-simple-amd.git#8025a44c37e4163a526ad3d3741830ad26ed2708"
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@babel/template" "^7.6.0"
+    better-log "^1.3.1"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -341,6 +356,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+better-log@^1.3.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/better-log/-/better-log-1.3.3.tgz#219a1c0383a8f9c4416897eda3acf9b4d6990e8f"
+  integrity sha1-IZocA4Oo+cRBaJfto6z5tNaZDo8=
+
 block-stream@*:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -1563,6 +1583,11 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
 repeating@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"