Skip to content

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

use normal babel-module-amd plugin and fix live reload

parent cfac8f0b
Showing with 169 additions and 96 deletions
index.js
......@@ -61,7 +61,8 @@ var transformJSX = function(code, fileName, cb) {
"pragmaFrag": "D.f", // default is React.Fragment
"throwIfNamespace": false // defaults to true
} ],
[simpleTransformToAMD]
//[simpleTransformToAMD]
['@babel/plugin-transform-modules-amd']
],
sourceMaps: 'both',
sourceFileName: fileName,
......@@ -156,7 +157,7 @@ var transformServe = function(dir) {
const errorText = `Error at ${err.file}:\n` + err.formatted;
return res.end( errorText )
}
res.header( 'Content-Type', 'text/css' );
res.set( 'Content-type', 'text/css; charset=UTF-8' );
res.end( result.css )
} );
}
......@@ -210,14 +211,16 @@ var transformServe = function(dir) {
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}>')}; });`,
`const SVG = D.declare("${req.url.replace(/\//g,'.').split('.').filter(String).join('.')}", (cfg)=>{ return ${(data+'').replace(/(<svg[^>]+"\s*)>/i,'$1 {...cfg}>')}; });
export default SVG;
`,
{
"plugins": [
[ "@babel/plugin-transform-react-jsx", {
"pragma": "D.s", // default pragma is React.createElement
"throwIfNamespace": false // defaults to true
} ],
[simpleTransformToAMD]
['@babel/plugin-transform-modules-amd']
],
sourceMaps: 'both',
sourceFileName: req.url,
......@@ -285,8 +288,10 @@ var doUpdate = async function(){
for( let filename in debounce ){
try{
var code = await readFile( filename ) + '';
var result = await transformJSXPromised( code, path.relative( './public', filename ) );
files.push( { file: '/'+path.relative( './public', filename ).replace(/\\/g, '/'), content: result.code } );
var url = '/'+path.relative( './src', filename ).replace(/\\/g, '/')
console.log('Live transform jsx ',url)
var result = await transformJSXPromised( code, url );
files.push( { file: url, content: result.code } );
}catch( e ){
console.log( 'Error in ' + e );
......
package.json
......@@ -18,6 +18,7 @@
},
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-transform-modules-amd": "^7.8.3",
"@babel/plugin-transform-react-jsx": "^7.8.3",
"@babel/plugin-transform-typescript": "^7.8.3",
"@babel/template": "^7.8.3",
......
src/core/DOM.js
......@@ -222,6 +222,9 @@ NS.apply = function(a,b) {
};
D.h = domEl;
D.s = fastDomEl;
D.f = function(cfg, children) {
return children;
};
D.removeChildren = function(el){
var subEl;
while((subEl = el.lastChild)){
......
src/core/LivestReloading.js
......@@ -27,12 +27,13 @@ async function subscribe() {
eval( a.content )
console.log('Reloaded: '+a.file);
}catch(e){
console.error(e)
}
});
}catch(e){
console.error(e)
}
//showMessage(message);
// Call subscribe() again to get the next message
......
src/core/Require.js
......@@ -47,7 +47,7 @@
var definition = definitions[name];
if(definition.notResolved === 0){
console.log(name,'execute')
definition.exports = definition.fn.apply(null, definition.deps.map(function(dep) {
definition.fn.apply(null, definition.deps.map(function(dep) {
return dep === 'exports' ? definition.exports : definitions[dep].exports
}));
......@@ -63,36 +63,41 @@
return dep === 'exports' ? 'exports': resolve(fileName, dep);
});
definitions[fileName] = {fileName:fileName, deps: deps, fn:fn, exports: {}};
var notResolved = 0;
for( var i = 0, _i = deps.length; i < _i; i++ ){
const dep = deps[ i ];
if(dep === 'exports')
continue;
var skip = false;
if(!(dep in definitions)){
for( var j = 0, _j = InstantLoaders.length; j < _j; j++ ){
const instantLoader = InstantLoaders[ j ];
if(dep.substr(-instantLoader.name.length).toLowerCase()===instantLoader.name){
if(!(dep in definitions)){
if( instantLoader.loader( dep ) ){
definitions[dep] = {exports: {}}
skip = true;
if(!(fileName in definitions)){
definitions[ fileName ] = { fileName: fileName, deps: deps, fn: fn, exports: {} };
var notResolved = 0;
for( var i = 0, _i = deps.length; i < _i; i++ ){
const dep = deps[ i ];
if( dep === 'exports' )
continue;
var skip = false;
if( !( dep in definitions ) ){
for( var j = 0, _j = InstantLoaders.length; j < _j; j++ ){
const instantLoader = InstantLoaders[ j ];
if( dep.substr( -instantLoader.name.length ).toLowerCase() === instantLoader.name ){
if( !( dep in definitions ) ){
if( instantLoader.loader( dep ) ){
definitions[ dep ] = { exports: {} }
skip = true;
}
}
break;
}
break;
}
}
}else{
skip = definitions[dep].notResolved === 0;
}
if(!skip){
( waiting[ dep ] || ( waiting[ dep ] = [] ) ).push( fileName );
notResolved++;
}else{
skip = definitions[ dep ].notResolved === 0;
}
if( !skip ){
( waiting[ dep ] || ( waiting[ dep ] = [] ) ).push( fileName );
notResolved++;
}
}
definitions[ fileName ].notResolved = notResolved;
}else{
definitions[ fileName ].fn = fn;
}
definitions[fileName].notResolved = notResolved;
_define(fileName)
};
window.define.definitions = definitions;
......
src/index.html
......@@ -23,7 +23,7 @@
<script>
define('start', ['main.jsx'], function(main) {
main();
main.default();
});
</script>
<script src="js/mobileFullHeight.js"></script>
......
src/view/cmp/switch/Switch.jsx
import './Switch.scss';
export default D.declare('Switch', (cfg, contentHash) => {
const Switch = D.declare('Switch', (cfg, contentHash) => {
if(cfg.content){
contentHash = cfg.content;
}
if(Array.isArray(contentHash)){
contentHash = contentHash.reduce(function(store, {id, children}) {
store[id] = children;
return store;
}, {});
if(contentHash.length === 0){
if(cfg.content)
contentHash = cfg.content;
}else{
contentHash = contentHash.reduce( function( store, { id, children } ){
store[ id ] = children;
return store;
}, {} );
}
}
const cmp = div( {
......@@ -33,3 +41,7 @@ Switch.Item = function(cfg, children) {
this.id = cfg.id;
this.children = children;
};
export const Item = Switch.Item;
export default Switch;
\ No newline at end of file
src/view/page/login/Login.jsx
......@@ -5,20 +5,20 @@ import './loginPage.scss';
import Arr from '../../../svg/arr.svg';
import ArrB from '../../../svg/arr-back.svg';
/*import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';*/
import {AsyncAjax} from '/core/Ajax.jsx';
import {API} from '/dict/Consts.jsx';
const {AND, OR, IF} = Store;
export default D.declare('view.page.Login', () => {
const loginStore = new Store({
phone: '7123456789',
phone: '79991112233',
code: '',
codeValid: false,
active: 'enterPhone',
phoneValid: false,
phoneChecking: false,
incorrectPhone: false,
authHelp: false,
displayHelpPage: false,
codeError: false
});
loginStore.sub('phone', function (phone) {
......@@ -53,60 +53,62 @@ export default D.declare('view.page.Login', () => {
<div class="login-page__big-logo">
<Logo width="660" height="300"/>
</div>
<Switch store={loginStore} key='authHelp'>
<Switch.Item id={false}>
<h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active'>
<Switch.Item id='enterPhone'>
<view.cmp.field.LabeledField required label={'Введите номер телефона, чтобы продолжить.'} placeholder={'Ваш телефон'} type={'tel'} bind={loginStore.bind('phone')}/>
<Button
class={"button button--primary authorization-form__button"}
type={"button"}
onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}
><span>Далее</span><Arr width="17" height="11"/></Button>
</Switch.Item>
<Switch.Item id='enterCode'>
<view.cmp.field.LabeledField
required
label={'Введите код из СМС'}
placeholder={'Код'}
type={'number'}
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}
>
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
<Button
class={"button button--primary authorization-form__button"}
type={"button"}
onclick={checkCode}
disabled={OR(
loginStore.valFalse('codeValid'),
loginStore.valTrue('codeChecking')
)}><span>Далее</span><Arr width="17" height="11"/></Button>
</Switch.Item>
</Switch>
<Button onClick={() => loginStore.set('authHelp', true)} type={"button"}>Проблемы с авторизацией?</Button>
</form>
</Switch.Item>
<Switch.Item id={true}>
<div class={"login-page__back-link"}>
<Button onClick={() => loginStore.set('authHelp', false)} type={"button"}><ArrB width="17" height="11"/><span>Вернуться к авторизации</span></Button>
</div>
<h2 class="login-page__headline">Проблемы с авторизацией?</h2>
<div class="login-page__text">
<p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст про&nbsp;то, куда писать и&nbsp;звонить</p>
</div>
<a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
</Switch.Item>
</Switch>
<IF condition={loginStore.valTrue('displayHelpPage')}>
<div className={"login-page__back-link"}>
<Button onClick={() => loginStore.set( 'displayHelpPage', false )} type={"button"}>
<ArrB width="17" height="11"/><span>Вернуться к авторизации</span>
</Button>
</div>
<h2 className="login-page__headline">Проблемы с авторизацией?</h2>
<div className="login-page__text">
<p>Текст про&nbsp;то, куда писать и&nbsp;звонить Текст про&nbsp;то, куда писать и&nbsp;звонить, текст
про&nbsp;то, куда писать и&nbsp;звонить</p>
</div>
<a href="tel:88000000000" className="login-page__support">8 800 000 00 00</a>
</IF>
<IF condition={loginStore.valFalse('displayHelpPage')}>
<h1 className="login-page__title">Добро пожаловать в&nbsp;развивающую платформу Вкусвилл!</h1>
<form action="#" method="post" className="authorization-form">
<Switch store={loginStore} key='active' content={{
enterPhone: <>
<view.cmp.field.LabeledField required type={'tel'} bind={loginStore.bind('phone')}
label={'Введите номер телефона, чтобы продолжить.'}
disabled={loginStore.valTrue('phoneChecking')}
placeholder={'Ваш телефон'} />
<Button class={"button button--primary authorization-form__button"}
type={"button"} onclick={checkPhone}
disabled={OR(
loginStore.valFalse('phoneValid'),
loginStore.valTrue('phoneChecking')
)}>
<span>Далее</span><Arr width="17" height="11"/>
</Button>
</>,
enterCode: <>
<view.cmp.field.LabeledField required label={'Введите код из СМС'}
placeholder={'Код'} type={'number'}
disabled={loginStore.valTrue('codeChecking')}
bind={loginStore.bind('code')}
invalid={loginStore.valTrue('codeError')}>
<IF condition={loginStore.valTrue('codeError')}>
<span className={"labeled-field__error-message"}>Некорректный код. Попробуйте еще раз</span>
</IF>
</view.cmp.field.LabeledField>
<Button class={"button button--primary authorization-form__button"}
type={"button"} onclick={checkCode}
disabled={OR(
loginStore.valFalse('codeValid'),
loginStore.valTrue('codeChecking')
)}>
<span>Далее</span><Arr width="17" height="11"/>
</Button>
</>
}}/>
<Button onClick={() => loginStore.set('displayHelpPage', true)} type={"button"}>Проблемы с авторизацией?</Button>
</form>
</IF>
</div>
})
yarn.lock
......@@ -83,6 +83,25 @@
dependencies:
"@babel/types" "^7.8.3"
"@babel/helper-module-imports@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
dependencies:
"@babel/types" "^7.8.3"
"@babel/helper-module-transforms@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.3.tgz#d305e35d02bee720fbc2c3c3623aa0c316c01590"
integrity sha512-C7NG6B7vfBa/pwCOshpMbOYUmrYQDfCpVL/JCRu0ek8B5p8kue1+BCXpg2vOYs7w5ACB9GTOBYQ5U6NwrMg+3Q==
dependencies:
"@babel/helper-module-imports" "^7.8.3"
"@babel/helper-simple-access" "^7.8.3"
"@babel/helper-split-export-declaration" "^7.8.3"
"@babel/template" "^7.8.3"
"@babel/types" "^7.8.3"
lodash "^4.17.13"
"@babel/helper-optimise-call-expression@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
......@@ -105,6 +124,14 @@
"@babel/traverse" "^7.8.3"
"@babel/types" "^7.8.3"
"@babel/helper-simple-access@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
dependencies:
"@babel/template" "^7.8.3"
"@babel/types" "^7.8.3"
"@babel/helper-split-export-declaration@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
......@@ -149,6 +176,15 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-transform-modules-amd@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.8.3.tgz#65606d44616b50225e76f5578f33c568a0b876a5"
integrity sha512-MadJiU3rLKclzT5kBH4yxdry96odTUwuqrZM+GllFI/VhxfPz+k9MshJM+MwhfkCdxxclSbSBbUGciBngR+kEQ==
dependencies:
"@babel/helper-module-transforms" "^7.8.3"
"@babel/helper-plugin-utils" "^7.8.3"
babel-plugin-dynamic-import-node "^2.3.0"
"@babel/plugin-transform-react-jsx@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz#4220349c0390fdefa505365f68c103562ab2fc4a"
......@@ -358,6 +394,13 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
babel-plugin-dynamic-import-node@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
dependencies:
object.assign "^4.1.0"
babel-plugin-module-resolver@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.0.0.tgz#8f3a3d9d48287dc1d3b0d5595113adabd36a847f"
......
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