Closed
Description
What problem does this feature solve?
What I will talk about is some code of function mountElement
in this file.
Background:
I am trying to use Vue3 as A FrontEnd DSL for Weex, just use @vue/compiler-sfc
, @vue/runtime-core
and weex-vue-loader
(forked from the latest vue-loader) to reach the goal.
Problem
This problem occurs when I resolve the <style> tag with the loader. My solution has two steps:
- Generate an object from <style> tag content with the component scopeId, and inject it to the runtime Weex document instance object in the
weex-vue-loader
(forked from the latest vue-loader), just like this:
{
render: () => {...}
styleSheets: {
'data-v-b323823': {
fontSize: 20,
color: 'red'
}
}
}
- Custom the
patchProp
andnodeOps
tocreateRenderer
function of@vue/runtime-core
, so I can set the style object to an element using thescopeId
as the unique key of its component. Some Code like this:
export const nodeOps: Omit<
RendererOptions<WeexNode, WeexElement>,
'patchProp'
> = {
insert: (child, parent, anchor) => {...},
remove: child => {...},
// this one
setScopeId(el, id) {
el.setAttr('id', id)
}
}
export const patchProp: DOMRendererOptions['patchProp'] = (
el,
key,
prevValue,
nextValue,
isSVG = false,
prevChildren,
parentComponent,
parentSuspense,
unmountChildren
) => {
if (key === 'class') {
patchClass(el, nextValue)
}
...
}
export function patchClass(el: WeexElement, value: string | null) {
const classList = processClassStr(value); // array of class, like ['title']
// get the unique style object from weex document instance by scopeId
const styleObj = Object.assign(
{},
...(classList.map(item => (
weex.document.styleSheets[el.scopeId + '-' + item] // Wow, I can't get the scopeId
))
)
// set the full style object to the element
el.setStyles(styleObj)
}
More description
From the demo code above, patchClass
runs before setScopeId
, so I can't get the scopeId
in patchClass
. And it is just because props
initiates before setScopeId
in mountElement
. file path
What does the proposed API look like?
So I want to ask if it is possible to exchange the order of props initiate
and setScopeId
, like the image below.