Commit bc6a525e authored by Pavel Mashliakovskiy's avatar Pavel Mashliakovskiy 🤹🏻
Browse files

Merge branch 'UBDF-14405-Implement-import-css-file-on-vue-component' into 'master'

UBDF-14405-Implement-import-css-file-on-vue-component

See merge request !1175
parents 5675dc0e 785cf5fa
Pipeline #32482 skipped with stage
......@@ -6,7 +6,30 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
## [Unreleased]
### Added
Implemented opportunity import css-file on vue component
Styles will be added to head html document
```vue
<template>
<div>1111</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
div {
color: red;
}
</style>
<style src="./path/to/file"></style>
```
### Changed
### Deprecated
......
/* global SystemJS */
const vueCompiler = require('vue-template-compiler/browser.js')
const EXPORTS_RE = /module\.exports\.default = {/
/**
* Parse *.vue files
* - extract `style` part and inject into DOM
......@@ -22,37 +21,50 @@ function compile (load, opts, vueOpts) {
const sfc = vueCompiler.parseComponent(load.source, { pad: 'space' })
// extract styles and inject it into DCM
const hasScoped = sfc.styles.some(s => s.scoped)
if (hasScoped) console.error('Scoped style not supported. Use BEM and CSS variables')
if (hasScoped) {
console.error('Scoped style not supported. Use BEM and CSS variables')
}
if (sfc.styles.length) {
const allStyles = sfc.styles.map(s => s.content.trim()).join('\n')
const styleTag = document.createElement('style')
styleTag.textContent = allStyles
document.head.appendChild(styleTag)
sfc.styles.forEach(async item => {
if (item.src) {
const url = await SystemJS.resolve(item.src, load.address)
UB.inject(url)
}
})
}
// script block: transform `export default` & `module.exports` into `module.exports.default`
let script = sfc.script ? sfc.script.content : ''
script = script
.replace(/export default/, 'module.exports.default =')
.replace(/(module\.exports =)/, `module.exports.default =`)
.replace(/(module\.exports =)/, 'module.exports.default =')
if (sfc.template) {
// in case template block exists - compile it to functions and put intoSystemS registry as module
let templateModuleName = getTemplateModuleName(load.name)
SystemJS.set(templateModuleName, SystemJS.newModule(
vueCompiler.compileToFunctions(sfc.template.content)
))
const templateModuleName = getTemplateModuleName(load.name)
SystemJS.set(
templateModuleName,
SystemJS.newModule(vueCompiler.compileToFunctions(sfc.template.content))
)
// MPV TODO use something like falafel to to parse AST and replace exports gracefully
script = script || 'module.exports.default = {}'
if (!EXPORTS_RE.test(script)) {
let msg = `Invalid "script" section for ${load.address}
const msg = `Invalid "script" section for ${load.address}
In UB script section of vue component should contains "module.exports.default = {" or "export default {" phrase`
console.error(msg)
}
script = script.replace(EXPORTS_RE,
`module.exports.default = {render:__renderFns__.render,` +
`staticRenderFns:__renderFns__.staticRenderFns,`
script = script.replace(
EXPORTS_RE,
'module.exports.default = {render:__renderFns__.render,' +
'staticRenderFns:__renderFns__.staticRenderFns,'
)
script = `var __renderFns__ = SystemJS.get(${JSON.stringify(templateModuleName)});` + script
script =
`var __renderFns__ = SystemJS.get(${JSON.stringify(
templateModuleName
)});` + script
}
return script
}
......
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