Skip to content

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

SVG inlining

parent cc5e0711
Showing with 158 additions and 60 deletions
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"
......
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