jsx with working sourcemaps

index.html

@@ -34,7 +34,7 @@
         <script src="js/view/cmp/tagfield.js"></script>
 
         <script src="js/view/page/products.js"></script>
-        <script src="js/view/page/export.js"></script>
+        <script src="js/view/page/export.jsx"></script>
         <script src="js/view/page/generate.js"></script>
         <script src="js/view/page/components.js"></script>
 

index.js

@@ -6,7 +6,7 @@ const DB_PATH = env.DB_PATH || "./db/users.json";
 
 const data = require("./db.js");
 const App = require('express');
-const Router  = require('node-async-router');
+const Router = require('node-async-router');
 
 const app = App(),
       router = Router();
@@ -32,9 +32,44 @@ router.all('/', function(req, res) {
   res.end(print(JSON.stringify(data)));
 });
 
-app.use(router);
-app.use(App.static('public'))
 
+var path = require('path');
+
+var cache = {};
+app.use(function (req, res, next) {
+    if (req.url in cache) {
+        return res.end(cache[req.url])
+    }
+    if (req.url.substr(-8) === '.jsx.map') {
+        debugger
+    }
+    if (req.url.substr(-4) === '.jsx') {
+
+        require("@babel/core").transform(
+            fs.readFileSync('./public/js/view/page/export.jsx'),
+            {
+                "plugins": [
+                    ["@babel/plugin-transform-react-jsx", {
+                        "pragma": "D.h", // default pragma is React.createElement
+                        "pragmaFrag": "D.f", // default is React.Fragment
+                        "throwIfNamespace": false // defaults to true
+                    }]
+                ],
+                sourceMaps: 'both',
+                sourceFileName: '/js/view/page/export.jsx'
+            }, function (c, d, e) {
+                cache['/js/view/page/export.jsx.map'] = JSON.stringify(d.map);
+                res.set('SourceMap', '/js/view/page/export.jsx.map');
+                res.end(d.code)
+            });
+    } else {
+        next();
+    }
+});
+app.use(App.static('public'))
+app.use('/', function(req, res) {
+  res.end(print(JSON.stringify(data)));
+});
 
 app.listen(APP_PORT);
 

package.json

@@ -9,7 +9,7 @@
     "yargs": "^15.1.0"
   },
   "scripts": {
-    "start": "node"
+    "start": "node index.js"
   },
   "bin": {
     "kus-quizard": "./bin/index.js"

public/js/view/page/export.jsx

@@ -18,5 +18,8 @@ view.page.Export = function() {
       </div>
       {exportLogic(D.textarea({cls: 'export-data'}))}
       <div cls="export-comment">Connetction type{'<Enum>'}: 0 — продукт, 1 — компонент`</div>
+        <button on={{click:(e)=>{console.log(e)}}}>btn</button>
     </div>
+
+    console.log(this.dom)
 };
\ No newline at end of file

public/js/view/page/products.js

@@ -22,7 +22,7 @@ view.page.Products = function() {
               type: 'checkbox',
               checked: (update)=>store.sub('productFilterByTitle', (val)=>update(val))},
 
-            on: {input: (e)=>{store.set('productFilterByTitle', e.target.checked)}}
+            on: {change: (e)=>{store.set('productFilterByTitle', e.target.checked)}}
           }), 'Название'
         ),
         D.label({cls: 'product-filter__label'},
@@ -31,7 +31,7 @@ view.page.Products = function() {
               type: 'checkbox',
               checked: (update)=>store.sub('productFilterByComponent', (val)=>update(val))},
 
-            on: {input: (e)=>{store.set('productFilterByComponent', e.target.checked)}}
+            on: {change: (e)=>{store.set('productFilterByComponent', e.target.checked)}}
           }), 'Ингредиенты'
         ),
         D.label({cls: 'product-filter__label'},
@@ -40,7 +40,7 @@ view.page.Products = function() {
               type: 'checkbox',
               checked: (update)=>store.sub('productFilterByTag', (val)=>update(val))},
 
-            on: {input: (e)=>{store.set('productFilterByTag', e.target.checked)}}
+            on: {change: (e)=>{store.set('productFilterByTag', e.target.checked)}}
           }), 'Тэги'
         )
       )