playing with babel

jsx.js

+var fs = require('fs')
+var xx =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
+      }]
+    ]
+  }, function(c,d,e) {
+    console.log(d.code.replace(/\\u([\d\w]{4})/gi, (m, g) => String.fromCharCode(parseInt(g, 16))))
+    debugger
+  });
+
+
+/*
+,
+    "pragma": "Zrx.h",
+    "pragmaFrag": "Zrx.Fragment",
+    "throwIfNamespace": false
+
+ */
\ No newline at end of file

package.json

@@ -15,6 +15,10 @@
     "kus-quizard": "./bin/index.js"
   },
   "devDependencies": {
+    "@babel/core": "^7.8.3",
     "@babel/plugin-transform-react-jsx": "^7.8.3"
-  }
+  },
+  "plugins": [
+    "@babel/plugin-transform-react-jsx"
+  ]
 }

public/js/pcg-dom-util.js

@@ -124,7 +124,7 @@
       el.innerHTML =  [].slice.call(arguments,1).join('\n');
       return el;
     };
-
+    D.h = domEl;
     D.removeChildren = function(el){
         var subEl;
         while((subEl = el.lastChild)){

public/js/view/page/export.js

+/*
 view.page.Export = function() {
   this.dom =
     div({cls: 'export-panel'},
@@ -19,4 +20,45 @@ view.page.Export = function() {
       exportLogic(D.textarea({cls: 'export-data'})),
       div({cls: 'export-comment'}, `Connetction type<Enum>: 0 — продукт, 1 — компонент`)
     );
+};*/
+view.page.Export = function () {
+  this.dom = D.h("div", {
+    cls: "export-panel"
+  }, D.h("div", {
+    cls: "title-gradient"
+  }, D.h("div", {
+    cls: "export-sub-menu"
+  }, D.h("div", {
+    cls: "export-sub-menu"
+  }, view.cmp.Menu({
+    title: 'Тэги',
+    id: 'tags',
+    key: 'exportData'
+  }), view.cmp.Menu({
+    title: 'Связи',
+    id: 'connections',
+    key: 'exportData'
+  })), D.h("div", {
+    cls: "export-sub-menu"
+  }, view.cmp.Menu({
+    title: 'CSV',
+    id: 'csv',
+    key: 'exportFormat'
+  }), view.cmp.Menu({
+    title: 'JSON',
+    id: 'json',
+    key: 'exportFormat'
+  }), view.cmp.Menu({
+    title: 'YAML',
+    id: 'yaml',
+    key: 'exportFormat'
+  }), view.cmp.Menu({
+    title: 'SQL',
+    id: 'sql',
+    key: 'exportFormat'
+  })))), exportLogic(D.textarea({
+    cls: 'export-data'
+  })), D.h("div", {
+    cls: "export-comment"
+  }, "Connetction type", '<Enum>', ": 0 \u2014 \u043F\u0440\u043E\u0434\u0443\u043A\u0442, 1 \u2014 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442`"));
 };
\ No newline at end of file

public/js/view/page/export.jsx

+view.page.Export = function() {
+  this.dom =
+    <div cls="export-panel">
+      <div cls="title-gradient">
+        <div cls="export-sub-menu">
+          <div cls="export-sub-menu">
+            {view.cmp.Menu({title: 'Тэги', id: 'tags', key: 'exportData'})}
+            {view.cmp.Menu({title: 'Связи', id: 'connections', key: 'exportData'})}
+          </div>
+
+          <div cls="export-sub-menu">            
+            {view.cmp.Menu({title: 'CSV', id: 'csv', key: 'exportFormat'})}
+            {view.cmp.Menu({title: 'JSON', id: 'json', key: 'exportFormat'})}
+            {view.cmp.Menu({title: 'YAML', id: 'yaml', key: 'exportFormat'})}
+            {view.cmp.Menu({title: 'SQL', id: 'sql', key: 'exportFormat'})}
+          </div>
+        </div>
+      </div>
+      {exportLogic(D.textarea({cls: 'export-data'}))}
+      <div cls="export-comment">Connetction type{'<Enum>'}: 0 — продукт, 1 — компонент`</div>
+    </div>
+};
\ No newline at end of file

public/js/view/test.jsx

+var x = <div renderTo={document.getElementById('22')}>t1<span>Title</span>t0</div>;
\ No newline at end of file