Closed gela-d closed 9 years ago
let's make a generic solution to have possibility to render any bundle from any library?
@tadatuta main problem in bundles such this - we haven't on bem.info level "common". Yesterday, we talking about ways to make generic solution, but in this case, this is generic solution for showcase pages, not for all bundles.
@tormozz48 update
general idea for PR: we already spent a lot of time fixing bugs in current link replacer on bem.info. why writing something new on regexps again?
we can:
we can:
- use parsers to get links in source code instead of regexps
- use uri to parse and change links instead of regexps
- write helpers to solve common tasks like rewrite links in any lib bundle
Maybe, it's a task to @tormozz48 in case refactoring bse-admin, not in this issue?
"general idea for PR: we already spent a lot of time fixing bugs in current link replacer on bem.info. why writing something new on regexps again?
we can:
You are dreamer
@gela-d :ok:
You are dreamer
what exactly sounds so hard?
For me it looks like this:
modules.require('uri', function(Uri) {
var fs = require('fs'),
htmlparser2 = require('htmlparser2'),
htmlParser = new htmlparser2.Parser({
onopentag: function(name, attrs) {
if (name !== 'a' || !attrs.href) return;
replaceLink(attrs.href);
}
});
var testFile = fs.readFileSync('./desktop.bundles/index/index.html', 'utf8');
htmlParser.write(testFile);
htmlParser.end();
function replaceLink(link) {
console.log(Uri.parse(link));
// call helpers for each type of replacement here
}
});
So for such file
<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>Title of the page</title>
<script>
(function(e,c){e[c]=e[c].replace(/(ua_js_)no/g,"$1yes");})(document.documentElement,"className");(function(d,n){d.documentElement.className+=" ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no");})(document,"createElementNS");
</script>
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="_index.css" rel="stylesheet">
<link href="/favicon.ico" rel="shortcut icon">
</head>
<body class="page page_theme_islands">
test<a href="http://ya.ru/bla/?q=1#ancor">link</a><a href=
"//ya.ru/bla/?q=2#ancor">link</a><a href="/bla/?q=3#ancor">link</a><a href=
"bla/?q=4#ancor">link</a>test<script src="_index.js"></script>
</body>
</html>
You'll get such parsed objects:
{ uriParts:
{ source: 'http://ya.ru/bla/?q=1#ancor',
protocol: 'http',
authority: 'ya.ru',
userInfo: '',
user: '',
password: '',
host: 'ya.ru',
port: '',
relative: '/bla/?q=1#ancor',
path: '/bla/',
directory: '/bla/',
file: '',
query: 'q=1',
anchor: 'ancor' },
queryParams: { q: [ '1' ] } }
{ uriParts:
{ source: '//ya.ru/bla/?q=2#ancor',
protocol: '',
authority: 'ya.ru',
userInfo: '',
user: '',
password: '',
host: 'ya.ru',
port: '',
relative: '/bla/?q=2#ancor',
path: '/bla/',
directory: '/bla/',
file: '',
query: 'q=2',
anchor: 'ancor' },
queryParams: { q: [ '2' ] } }
{ uriParts:
{ source: '/bla/?q=3#ancor',
protocol: '',
authority: '',
userInfo: '',
user: '',
password: '',
host: '',
port: '',
relative: '/bla/?q=3#ancor',
path: '/bla/',
directory: '/bla/',
file: '',
query: 'q=3',
anchor: 'ancor' },
queryParams: { q: [ '3' ] } }
{ uriParts:
{ source: 'bla/?q=4#ancor',
protocol: '',
authority: '',
userInfo: '',
user: '',
password: '',
host: '',
port: '',
relative: 'bla/?q=4#ancor',
path: 'bla/',
directory: 'bla/',
file: '',
query: 'q=4',
anchor: 'ancor' },
queryParams: { q: [ '4' ] } }
and possibility to change any part of a link with handy methods of uri
module.
Sure that'll take some time but then you may easily write tests for each helper and get rid of a lot of regexps.
@tavriaforever @tormozz48