mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(usecssr): support immutable style

Browse Source
This commit is contained in:
07akioni 2020-06-26 14:55:23 +08:00
parent c0efaab00d
commit 682eb5fdd2
1 changed files with 55 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/_mixins/usecssr.js
View File

@ -19,7 +19,7 @@ function getThemeVariables (naive, themeName) {
return theme.base
}
function createMountId (
function createMutableStyleId (
componentName,
renderedTheme,
dependencyKey,
@ -32,7 +32,13 @@ function createMountId (
)
}
function prepareTheme (
function createImmutableStyleId (
componentName
) {
return componentName
}
function setupMutableStyle (
instance,
theme,
dependencyKey,
@ -52,7 +58,7 @@ function prepareTheme (
) {
console.error(`[naive-ui/mixins/usecssr]: ${options.name}.${dependencyKey} is ${dependencyValue}`)
}
const mountId = createMountId(
const mountId = createMutableStyleId(
options.name,
renderedTheme,
dependencyKey,
@ -80,26 +86,46 @@ function prepareTheme (
markStyleMounted(mountId)
}
function setupImmutableStyle (
instance,
CNode
) {
const mountId = createImmutableStyleId(
instance.$options.name + '-immutable'
)
if (isStyleMounted(mountId)) return
CNode.mount({
target: mountId,
props: {
$instance: instance
}
})
markStyleMounted(mountId)
}
export default function (styles) {
// collect watchers
const watchers = {}
styles.forEach(style => {
if (!style.watch) return
style.watch.forEach(watchKey => {
if (!watchers[watchKey]) watchers[watchKey] = []
watchers[watchKey].push(function (instance, syntheticTheme) {
if (process.env.NODE_ENV !== 'production') {
window.naive.styleRenderingDuration -= performance.now()
watchers[watchKey].push(
function (instance, syntheticTheme) {
if (process.env.NODE_ENV !== 'production') {
window.naive.styleRenderingDuration -= performance.now()
}
setupMutableStyle(
instance,
syntheticTheme || null,
style.key,
style.CNode
)
if (process.env.NODE_ENV !== 'production') {
window.naive.styleRenderingDuration += performance.now()
}
}
prepareTheme(
instance,
syntheticTheme || null,
style.key,
style.CNode
)
if (process.env.NODE_ENV !== 'production') {
window.naive.styleRenderingDuration += performance.now()
}
})
)
})
})
// create component watch options
@ -122,12 +148,19 @@ export default function (styles) {
if (process.env.NODE_ENV !== 'production') {
window.naive.styleRenderingDuration -= performance.now()
}
prepareTheme(
this,
this.syntheticTheme || null,
style.key,
style.CNode
)
if (style.key) {
setupMutableStyle(
this,
this.syntheticTheme || null,
style.key,
style.CNode
)
} else {
setupImmutableStyle(
this,
style.CNode
)
}
if (process.env.NODE_ENV !== 'production') {
window.naive.styleRenderingDuration += performance.now()
}