Skip to content

K
kus-admin
Commit 425328e8 by Иван Кубота
Options

jsx support. cls reverse cb combinator feature. unknown props as attributes feature

parent 157731ed
Showing with 161 additions and 94 deletions
index.html
......@@ -35,7 +35,7 @@
<script src="js/view/page/products.js"></script>
<script src="js/view/page/export.jsx"></script>
<script src="js/view/page/generate.js"></script>
<script src="js/view/page/generate.jsx"></script>
<script src="js/view/page/components.js"></script>
<script src="js/controller/exportLogic.js"></script>
......
index.js
......@@ -36,36 +36,53 @@ router.all('/', function(req, res) {
var path = require('path');
var cache = {};
app.use(function (req, res, next) {
var bCore = require( "@babel/core" );
var jsxServe = function(dir) {
return function (req, res, next) {
if (req.url in cache) {
return res.end(cache[req.url])
}
if (req.url.substr(-8) === '.jsx.map') {
/*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'),
fs.readFile(path.join(dir, req.url), function(err, data){
debugger
if( err ){
next();
}else{
bCore.transform(
data+'',
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
[ "@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)
sourceFileName: req.url
}, function( c, d, e ){
if(c){
res.end(c.message+'\n'+c.stack)
}else{
debugger
cache[ req.url + '.map' ] = JSON.stringify( d.map );
res.set( 'SourceMap', req.url + '.map' );
res.end( d.code )
}
} );
}
});
} else {
next();
}
});
}
};
app.use(jsxServe('public'));
app.use(App.static('public'))
app.use('/', function(req, res) {
res.end(print(JSON.stringify(data)));
......
public/js/pcg-dom-util.js
......@@ -9,7 +9,7 @@
if( el.tagName.toLowerCase() === 'svg' ){
el.setAttribute( 'class', cls );
}else{
el.className = cls;
el.className = D.cls.apply(D, arguments);
}
}
},
......@@ -24,29 +24,47 @@
}
};
var used = {
cls: true, className: true, 'class': true,
attr: true,
prop: true,
on: true
};
// ~jsx h function
var domEl = function( type, cfg ){
cfg = cfg || {};
var cls = cfg.cls,
var cls = cfg.cls || cfg['class'] || cfg.className,
style = cfg.style,
attr = cfg.attr,
attr = cfg.attr || {},
prop = cfg.prop,
on = cfg.on,
on = cfg.on || {},
renderTo = cfg.renderTo,
el = cfg.el || document.createElement( type ),
classList = el.classList;
var i, _i;
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{
if( el.tagName.toLowerCase() === 'svg' ){
el.setAttribute( 'class', cls );
}else{
el.className = cls;
}
setters.cls(el)(cls);
}
//if(el.className !== cls)debugger
//cls.split( ' ' ).forEach( function( clsItem ){ classList.add( clsItem ); });
......
public/js/view/cmp/menu.js
view.cmp.Menu = ({title, id, key, cls}) =>
div({
cls: update => store.equal(
key,
id,
active => update(
D.cls(
'main-menu-item',
cls: _ => store.equal(key, id,
active => _( 'main-menu-item', cls,
'main-menu-item__'+D.escapeCls(id),
cls,
{'main-menu-item__active':active}
)
)
),
on: {
click: ()=> store.set(key, id)}
)),
onclick: ()=> store.set(key, id)
}, title);
\ No newline at end of file
public/js/view/page/export.jsx
view.page.Export = function() {
this.dom =
<div cls="export-panel">
view.page.Export = function(){
return <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'})}
{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'})}
{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'}))}
{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>
<button onclick={e => console.log( e )}>btn</button>
</div>
console.log(this.dom)
};
\ No newline at end of file
}
\ No newline at end of file
public/js/view/page/export.js → public/js/view/page/export.old.js
/*
view.page.Export = function() {
this.dom =
div({cls: 'export-panel'},
......@@ -20,45 +19,4 @@ 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/generate.jsx 0 → 100644
view.cmp.Answer = function(answer, type) {
return (
<label cls={D.cls('quiz-answer-label', 'quiz-answer-label__'+type)}>
<input type={type} checked={answer.correct}/>{answer.text}
</label>
)
};
view.page.Generate = function() {
const update = function() {
const photo = store.get('generatePhoto') === 'photo',
type = store.get('generateType'),
category = store.get('generateCategory');
try{
seedInput.value = Math.random.seeded.getStringSeed();
const result = category === 'product' ? quizGenerator( type, photo ) : standardGenerator(({length})=>rand(0,length-1));
title.innerHTML = textFormat( result.question, true );
image.innerHTML = result.image ? `<img src="${result.image}" alt="img"/>` : '';
image.style.display = result.image ? 'block': 'none';
debug.value = result.log.join( '\n' )
D.removeChildren( answers );
D.appendChild( answers, result.answers.map( ( a ) => view.cmp.Answer( a, type ) ) );
}catch( e ){
debug.value = quizGenerator.log.join( '\n' )
console.error(e)
}
};
let title, answers, debug, seedInput, image;
this.dom =
<div cls='generate-panel'>
<div cls='title-gradient'>
<div cls='generate-sub-menu'>
<div cls='generate-sub-menu'>
{view.cmp.Menu({title: 'Продукты', id: 'product', key: 'generateCategory'})}
{view.cmp.Menu({title: 'Стандарты', id: 'standard', key: 'generateCategory'})}
</div>
{view.cmp.Switch({key: 'generateCategory'}, {
product: <div cls='generate-sub-menu'>
<div cls='generate-sub-menu'>
{view.cmp.Menu({title: 'Единственный', id: 'radio', key: 'generateType'})}
{view.cmp.Menu({title: 'Множественный', id: 'checkbox', key: 'generateType'})}
</div>
<div cls='generate-sub-menu'>
{view.cmp.Menu({title: 'С фото', id: 'photo', key: 'generatePhoto'})}
{view.cmp.Menu({title: 'Без фото', id: 'noPhoto', key: 'generatePhoto'})}
</div>
</div>
})}
</div>
</div>
<div cls='generate-controls'>
<input type='button' value='F5' onclick={update}/>
<span cls='generate-seed-label'>Seed:</span>
{seedInput = <input
cls='seed'
type='input' value='' placeholder='seed'
oninput={function() {
var val = seedInput.value;
Math.random.seeded.setStringSeed(val);
update()
}}/>
}
</div>
<div cls='generate-example'>
{title = <div cls='generate-title'/>}
{image = <div cls='generate-image'/>}
{answers = <div cls='generate-answers'/>}
{debug = <textarea cls='generate-debug'/>}
</div>
</div>;
store.sub(['generateType', 'generatePhoto', 'generateCategory'], update);
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment