Skip to content
This repository was archived by the owner on Aug 16, 2022. It is now read-only.

Commit 22132b7

Browse files
yyx990803yyx990803
committed
style: improve formatting
1 parent 423b955 commit 22132b7

File tree

11 files changed

+272
-167
lines changed

11 files changed

+272
-167
lines changed

‎src/assemble.js

Lines changed: 114 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,13 @@ const EXPORT_REGEX = /(export[\s\r\n]+default|module[\s\r\n]*\.exports[^=]*=)[\s
1313
function inlineStyle (name, style, config) {
1414
let output = `var ${name} = ${style.modules ? _s(style.modules) : '{}'}\n`
1515

16-
output += `${name}.__inject__ = function (context) {\n` +
17-
` ${STYLE_INJECTOR_IDENTIFIER}(${_s(config.shortFilePath)}, [[${_s(config.shortFilePath)}, ${_s(style.code)}, ${_s(style.descriptor.attrs.media)}, ${_s(style.map)}]], ${config.isProduction}, context)\n` +
16+
output +=
17+
`${name}.__inject__ = function (context) {\n` +
18+
` ${STYLE_INJECTOR_IDENTIFIER}(${_s(config.shortFilePath)}, [[${_s(
19+
config.shortFilePath
20+
)}, ${_s(style.code)}, ${_s(style.descriptor.attrs.media)}, ${_s(
21+
style.map
22+
)}]], ${config.isProduction}, context)\n` +
1823
`}\n`
1924

2025
return output
@@ -33,41 +38,52 @@ const Source = struct({
3338
map: 'object?',
3439
descriptor: struct.union(['object', 'null'])
3540
},
36-
styles: struct.list([{
37-
id: struct.union(['string?', 'null']),
38-
code: struct.union(['string?', 'null']),
39-
map: 'object?',
40-
modules: 'object?',
41-
descriptor: struct.union(['object', 'null'])
42-
}]),
43-
customBlocks: struct.list([{
44-
id: 'string?',
45-
code: 'string?',
46-
map: 'object?',
47-
descriptor: struct.union(['object', 'null'])
48-
}])
49-
})
50-
const Config = any => defaultsdeep(struct({
51-
esModule: 'boolean?',
52-
require: 'object?',
53-
scopeId: 'string?',
54-
moduleIdentifier: 'string?',
55-
isServer: 'boolean?',
56-
isProduction: 'boolean?',
57-
hasStyleInjectFn: 'boolean?',
58-
onWarn: 'function?'
59-
})(any), {
60-
esModule: true,
61-
require: {
62-
normalizeComponent: 'vue-component-compiler/src/runtime/normalize-component',
63-
injectStyleClient: 'vue-component-compiler/src/runtime/inject-style-client',
64-
injectStyleServer: 'vue-component-compiler/src/runtime/inject-style-server'
65-
},
66-
isServer: false,
67-
isProduction: true,
68-
hasStyleInjectFn: false,
69-
onWarn: () => message => console.warn(message)
41+
styles: struct.list([
42+
{
43+
id: struct.union(['string?', 'null']),
44+
code: struct.union(['string?', 'null']),
45+
map: 'object?',
46+
modules: 'object?',
47+
descriptor: struct.union(['object', 'null'])
48+
}
49+
]),
50+
customBlocks: struct.list([
51+
{
52+
id: 'string?',
53+
code: 'string?',
54+
map: 'object?',
55+
descriptor: struct.union(['object', 'null'])
56+
}
57+
])
7058
})
59+
const Config = any =>
60+
defaultsdeep(
61+
struct({
62+
esModule: 'boolean?',
63+
require: 'object?',
64+
scopeId: 'string?',
65+
moduleIdentifier: 'string?',
66+
isServer: 'boolean?',
67+
isProduction: 'boolean?',
68+
hasStyleInjectFn: 'boolean?',
69+
onWarn: 'function?'
70+
})(any),
71+
{
72+
esModule: true,
73+
require: {
74+
normalizeComponent:
75+
'vue-component-compiler/src/runtime/normalize-component',
76+
injectStyleClient:
77+
'vue-component-compiler/src/runtime/inject-style-client',
78+
injectStyleServer:
79+
'vue-component-compiler/src/runtime/inject-style-server'
80+
},
81+
isServer: false,
82+
isProduction: true,
83+
hasStyleInjectFn: false,
84+
onWarn: () => message => console.warn(message)
85+
}
86+
)
7187

7288
module.exports = function assemble (source, filename, config) {
7389
assertType({ filename }, 'string')
@@ -86,13 +102,17 @@ module.exports = function assemble (source, filename, config) {
86102

87103
// Import style injector.
88104
output += importStatement(
89-
config.isServer ? config.require.injectStyleServer : config.require.injectStyleClient,
105+
config.isServer
106+
? config.require.injectStyleServer
107+
: config.require.injectStyleClient,
90108
{ name: STYLE_INJECTOR_IDENTIFIER, esModule: config.esModule }
91109
)
92110
styles.forEach((style, i) => {
93111
const IMPORT_NAME = `__vue_style_${i}__`
94-
const moduleName = (style.descriptor.module === true) ? '$style' : style.descriptor.module
95-
const needsNamedImport = config.hasStyleInjectFn || typeof moduleName === 'string'
112+
const moduleName =
113+
style.descriptor.module === true ? '$style' : style.descriptor.module
114+
const needsNamedImport =
115+
config.hasStyleInjectFn || typeof moduleName === 'string'
96116
const runInjection = `${IMPORT_NAME} && ${IMPORT_NAME}.__inject__ && ${IMPORT_NAME}.__inject__(context)\n`
97117

98118
if (typeof style.code === 'string') {
@@ -116,12 +136,20 @@ module.exports = function assemble (source, filename, config) {
116136
})
117137
} else {
118138
cssModules[moduleName] = true
119-
styleInjectionCode += `__vue_css_modules__[${_s(moduleName)}] = ${IMPORT_NAME}\n` +
120-
`Object.defineProperty(this, ${_s(moduleName)}, { get: function () { return __vue_css_modules__[${_s(moduleName)}] }})\n`
139+
styleInjectionCode +=
140+
`__vue_css_modules__[${_s(moduleName)}] = ${IMPORT_NAME}\n` +
141+
`Object.defineProperty(this, ${_s(
142+
moduleName
143+
)}, { get: function () { return __vue_css_modules__[${_s(
144+
moduleName
145+
)}] }})\n`
121146
}
122147
}
123148
})
124-
output += `function ${STYLE_IDENTIFIER} (context) {\n` + pad(styleInjectionCode) + `}\n`
149+
output +=
150+
`function ${STYLE_IDENTIFIER} (context) {\n` +
151+
pad(styleInjectionCode) +
152+
`}\n`
125153
}
126154

127155
// we require the component normalizer function, and call it like so:
@@ -138,7 +166,10 @@ module.exports = function assemble (source, filename, config) {
138166
})
139167
// <script>
140168
if (typeof script.code === 'string') {
141-
output += '\n/* script */\n' + script.code.replace(EXPORT_REGEX, '\nvar __vue_script__ = ') + '\n'
169+
output +=
170+
'\n/* script */\n' +
171+
script.code.replace(EXPORT_REGEX, '\nvar __vue_script__ = ') +
172+
'\n'
142173
} else {
143174
output += importStatement(script.id, {
144175
esModule: config.esModule,
@@ -151,10 +182,11 @@ module.exports = function assemble (source, filename, config) {
151182

152183
// <template>
153184
if (typeof render.code === 'string') {
154-
output += `\n/* template */\n` +
155-
`var __vue_template__ = (function () {\n${
156-
pad(render.code.replace(EXPORT_REGEX, 'return ').trim())
157-
}})()\n`
185+
output +=
186+
`\n/* template */\n` +
187+
`var __vue_template__ = (function () {\n${pad(
188+
render.code.replace(EXPORT_REGEX, 'return ').trim()
189+
)}})()\n`
158190
} else {
159191
output += importStatement(render.id, {
160192
esModule: config.esModule,
@@ -164,34 +196,49 @@ module.exports = function assemble (source, filename, config) {
164196

165197
// template functional
166198
output += '\n/* template functional */\n'
167-
output += 'var __vue_template_functional__ = ' + (render.descriptor && render.descriptor.attrs && render.descriptor.attrs.functional ? 'true' : 'false') + '\n'
199+
output +=
200+
'var __vue_template_functional__ = ' +
201+
(render.descriptor &&
202+
render.descriptor.attrs &&
203+
render.descriptor.attrs.functional
204+
? 'true'
205+
: 'false') +
206+
'\n'
168207

169208
// style
170209
output += '\n/* styles */\n'
171-
output += 'var __vue_styles__ = ' + (styles.length ? STYLE_IDENTIFIER : 'null') + '\n'
210+
output +=
211+
'var __vue_styles__ = ' + (styles.length ? STYLE_IDENTIFIER : 'null') + '\n'
172212

173213
// scopeId
174214
output += '\n/* scopeId */\n'
175-
output += 'var __vue_scopeId__ = ' + (hasScoped ? _s(config.scopeId) : 'null') + '\n'
215+
output +=
216+
'var __vue_scopeId__ = ' + (hasScoped ? _s(config.scopeId) : 'null') + '\n'
176217

177218
// moduleIdentifier (server only)
178219
output += '\n/* moduleIdentifier (server only) */\n'
179-
output += 'var __vue_module_identifier__ = ' + (config.isServer ? _s(config.moduleIdentifier) : 'null') + '\n'
220+
output +=
221+
'var __vue_module_identifier__ = ' +
222+
(config.isServer ? _s(config.moduleIdentifier) : 'null') +
223+
'\n'
180224

181225
// close normalizeComponent call
182-
output += `\nvar ${COMPONENT_IDENTIFIER} = ${NORMALIZE_COMPONENT_IDENTIFIER}(\n` +
183-
' __vue_script__,\n' +
184-
' __vue_template__,\n' +
185-
' __vue_template_functional__,\n' +
186-
' __vue_styles__,\n' +
187-
' __vue_scopeId__,\n' +
188-
' __vue_module_identifier__\n' +
189-
')\n'
226+
output +=
227+
`\nvar ${COMPONENT_IDENTIFIER} = ${NORMALIZE_COMPONENT_IDENTIFIER}(\n` +
228+
' __vue_script__,\n' +
229+
' __vue_template__,\n' +
230+
' __vue_template_functional__,\n' +
231+
' __vue_styles__,\n' +
232+
' __vue_scopeId__,\n' +
233+
' __vue_module_identifier__\n' +
234+
')\n'
190235

191236
// development-only code
192237
if (!config.isProduction) {
193238
// add filename in dev
194-
output += `${COMPONENT_IDENTIFIER}.options.__file = ${_s(config.shortFilePath)}\n`
239+
output += `${COMPONENT_IDENTIFIER}.options.__file = ${_s(
240+
config.shortFilePath
241+
)}\n`
195242
}
196243

197244
if (customBlocks.length) {
@@ -218,5 +265,11 @@ module.exports = function assemble (source, filename, config) {
218265
}
219266

220267
function pad (content) {
221-
return content.trim().split('\n').map(line => ' ' + line).join('\n') + '\n'
268+
return (
269+
content
270+
.trim()
271+
.split('\n')
272+
.map(line => ' ' + line)
273+
.join('\n') + '\n'
274+
)
222275
}

‎src/gen-id.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,10 @@ const path = require('path')
44
const hash = require('hash-sum')
55

66
module.exports = function genId (filename, content, isProduction = true) {
7-
return 'data-v' + (isProduction ? hash(path.basename(filename) + '\n' + content) : hash(filename))
7+
return (
8+
'data-v' +
9+
(isProduction
10+
? hash(path.basename(filename) + '\n' + content)
11+
: hash(filename))
12+
)
813
}

‎src/parser.js

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,25 @@ const cache = LRU(100)
1010
const splitRE = /\r?\n/g
1111
const emptyRE = /^(?:\/\/)?\s*$/
1212

13-
const Config = struct({
14-
needMap: 'boolean?',
15-
bustCache: 'boolean?'
16-
}, {
17-
needMap: true,
18-
bustCache: false
19-
})
13+
const Config = struct(
14+
{
15+
needMap: 'boolean?',
16+
bustCache: 'boolean?'
17+
},
18+
{
19+
needMap: true,
20+
bustCache: false
21+
}
22+
)
2023

2124
module.exports = function (content, filename, config) {
2225
assertType({ content, filename }, 'string')
2326
config = Config(config)
2427

2528
const cacheKey = hash(filename + content)
26-
const filenameWithHash = config.bustCache ? filename + '?' + cacheKey : filename // source-map cache busting for hot-reloadded modules
29+
const filenameWithHash = config.bustCache
30+
? filename + '?' + cacheKey
31+
: filename // source-map cache busting for hot-reloadded modules
2732

2833
if (cache.has(cacheKey)) return cache.get(cacheKey)
2934

‎src/runtime/inject-style-client.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type StyleObjectPart = {
1919
*/
2020

2121
const stylesInDom = {
22-
/*
22+
/*
2323
[id: number]: {
2424
id: number,
2525
refs: number,
@@ -28,15 +28,17 @@ const stylesInDom = {
2828
*/
2929
}
3030

31-
const head = (document.head || document.getElementsByTagName('head')[0])
31+
const head = document.head || document.getElementsByTagName('head')[0]
3232
const noop = function () {}
3333
let singletonElement = null
3434
let singletonCounter = 0
3535
let isProduction = false
3636

3737
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
3838
// tags it will allow on a page
39-
const isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
39+
const isOldIE =
40+
typeof navigator !== 'undefined' &&
41+
/msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
4042

4143
export default (parentId, list, _isProduction) => {
4244
isProduction = _isProduction
@@ -110,7 +112,9 @@ function createStyleElement () {
110112

111113
function addStyle (obj /* StyleObjectPart */) {
112114
let update, remove
113-
let styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
115+
let styleElement = document.querySelector(
116+
'style[data-vue-ssr-id~="' + obj.id + '"]'
117+
)
114118

115119
if (styleElement) {
116120
if (isProduction) {
@@ -146,12 +150,14 @@ function addStyle (obj /* StyleObjectPart */) {
146150

147151
return function updateStyle (newObj /* StyleObjectPart */) {
148152
if (newObj) {
149-
if (newObj.css === obj.css &&
150-
newObj.media === obj.media &&
151-
newObj.sourceMap === obj.sourceMap) {
153+
if (
154+
newObj.css === obj.css &&
155+
newObj.media === obj.media &&
156+
newObj.sourceMap === obj.sourceMap
157+
) {
152158
return
153159
}
154-
update(obj = newObj)
160+
update((obj = newObj))
155161
} else {
156162
remove()
157163
}
@@ -198,7 +204,10 @@ function applyToTag (styleElement, obj) {
198204
// this makes source maps inside style tags work properly in Chrome
199205
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
200206
// http://stackoverflow.com/a/26603875
201-
css += '\n/*# sourceMappingURL=data:application/json;base64,' + window.btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
207+
css +=
208+
'\n/*# sourceMappingURL=data:application/json;base64,' +
209+
window.btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) +
210+
' */'
202211
}
203212

204213
if (styleElement.styleSheet) {

‎src/runtime/inject-style-server.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,14 @@ function renderStyles (styles) {
7171
var css = ''
7272
for (const key in styles) {
7373
const style = styles[key]
74-
css += '<style data-vue-ssr-id="' + style.ids.join(' ') + '"' +
75-
(style.media ? (' media="' + style.media + '"') : '') + '>' +
76-
style.css + '</style>'
74+
css +=
75+
'<style data-vue-ssr-id="' +
76+
style.ids.join(' ') +
77+
'"' +
78+
(style.media ? ' media="' + style.media + '"' : '') +
79+
'>' +
80+
style.css +
81+
'</style>'
7782
}
7883
return css
7984
}

‎src/runtime/list-to-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function listToStyles (parentId, list) {
1818
sourceMap: sourceMap
1919
}
2020
if (!newStyles[id]) {
21-
styles.push(newStyles[id] = { id: id, parts: [part] })
21+
styles.push((newStyles[id] = { id: id, parts: [part] }))
2222
} else {
2323
newStyles[id].parts.push(part)
2424
}

0 commit comments

Comments
 (0)