fix(client): transform html scripts
This commit is contained in:
@ -95,10 +95,7 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
|
|||||||
|
|
||||||
const body = Promise.all(files).then(files =>
|
const body = Promise.all(files).then(files =>
|
||||||
files
|
files
|
||||||
.reduce(
|
.reduce((body, file) => [...body, file.contents + htmlCatch], [])
|
||||||
(body, file) => [...body, file.contents + file.tail + htmlCatch],
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
.map(source => createBody({ source }))
|
.map(source => createBody({ source }))
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -92,29 +92,58 @@ export const babelTransformer = cond([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
const sassWorker = new WorkerExecutor('sass-compile');
|
const sassWorker = new WorkerExecutor('sass-compile');
|
||||||
|
async function transformSASS(element) {
|
||||||
const htmlSassTransformCode = file => {
|
const styleTags = element.querySelectorAll('style[type="text/sass"]');
|
||||||
const div = document.createElement('div');
|
await Promise.all(
|
||||||
div.innerHTML = file.contents;
|
|
||||||
const styleTags = div.querySelectorAll('style[type="text/sass"]');
|
|
||||||
if (styleTags.length > 0) {
|
|
||||||
return Promise.all(
|
|
||||||
[].map.call(styleTags, async style => {
|
[].map.call(styleTags, async style => {
|
||||||
style.type = 'text/css';
|
style.type = 'text/css';
|
||||||
style.innerHTML = await sassWorker.execute(style.innerHTML, 2000);
|
style.innerHTML = await sassWorker.execute(style.innerHTML, 2000);
|
||||||
})
|
})
|
||||||
).then(() => vinyl.transformContents(() => div.innerHTML, file));
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function transformScript(element) {
|
||||||
|
const scriptTags = element.querySelectorAll('script');
|
||||||
|
scriptTags.forEach(script => {
|
||||||
|
script.innerHTML = tryTransform(babelTransformCode(babelOptionsJSX))(
|
||||||
|
script.innerHTML
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const transformHtml = async function(file) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.innerHTML = file.contents;
|
||||||
|
await Promise.all([transformSASS(div), transformScript(div)]);
|
||||||
return vinyl.transformContents(() => div.innerHTML, file);
|
return vinyl.transformContents(() => div.innerHTML, file);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const htmlSassTransformer = cond([
|
export const composeHTML = cond([
|
||||||
[testHTML, htmlSassTransformCode],
|
[
|
||||||
|
testHTML,
|
||||||
|
flow(
|
||||||
|
partial(
|
||||||
|
vinyl.transformHeadTailAndContents,
|
||||||
|
source => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.innerHTML = source;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
),
|
||||||
|
partial(vinyl.compileHeadTail, '')
|
||||||
|
)
|
||||||
|
],
|
||||||
|
[stubTrue, identity]
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const htmlTransformer = cond([
|
||||||
|
[testHTML, transformHtml],
|
||||||
[stubTrue, identity]
|
[stubTrue, identity]
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const transformers = [
|
export const transformers = [
|
||||||
replaceNBSP,
|
replaceNBSP,
|
||||||
babelTransformer,
|
babelTransformer,
|
||||||
htmlSassTransformer
|
composeHTML,
|
||||||
|
htmlTransformer
|
||||||
];
|
];
|
||||||
|
Reference in New Issue
Block a user