Skip to content

Commit

Permalink
Merge remote-tracking branch 'tidyzq/fix-self-replace-with' into feat…
Browse files Browse the repository at this point in the history 
…-mocked-composed-backend
  • Loading branch information
@Tidyzq
Tidyzq committed Sep 11, 2023
2 parents 9b3f9fa + 2d1f256 commit 37202f6
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 13 deletions.
2 changes: 1 addition & 1 deletion glass-easel-miniprogram-template/src/pages/index/index.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<image class="logo" src="resources/logo_256.png" />
</view>
<view class="hello" bind:tap="helloTap">
Hello world! 4
Hello world!
</view>
<view class="hello" hidden="{{ !showAgain }}">
Hello world again!
Expand Down
28 changes: 20 additions & 8 deletions glass-easel-miniprogram-webpack-plugin/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,19 @@ class GlassEaselMiniprogramWebpackPlugin {
}

// search for component files
let codeRootWatching = false
let codeRootPromises = null
const searchCodeRoot = async (enableWatch) => {
if (codeRootWatching) return
codeRootWatching = true
if (codeRootPromises) {
// wait a short while for changes
await new Promise((resolve) => {
setTimeout(resolve, 250)
})
const promises = codeRootPromises
codeRootPromises = []
await Promise.all(promises)
return
}
codeRootPromises = []
const handleFile = async (relPath) => {
// for app.json, spread the global field
if (relPath === 'app.json') {
Expand Down Expand Up @@ -211,14 +220,13 @@ class GlassEaselMiniprogramWebpackPlugin {

// await readdirp(codeRoot, handleFile)
await new Promise((resolve, reject) => {
const promises = []
const watcher = chokidar.watch(codeRoot, { ignoreInitial: false })
watcher
.on('add', (p) => {
promises.push(handleFile(normalizePath(p)))
codeRootPromises.push(handleFile(normalizePath(p)))
})
.on('change', (p) => {
promises.push(handleFile(normalizePath(p)))
codeRootPromises.push(handleFile(normalizePath(p)))
})
.on('unlink', (p) => {
removeEntry(normalizePath(p))
Expand All @@ -227,6 +235,8 @@ class GlassEaselMiniprogramWebpackPlugin {
throw new Error(err)
})
.on('ready', () => {
const promises = codeRootPromises
codeRootPromises = []
Promise.all(promises)
.then(() => {
if (!enableWatch) return watcher.close()
Expand Down Expand Up @@ -319,12 +329,14 @@ class GlassEaselMiniprogramWebpackPlugin {
index.codeSpace.addComponentStaticConfig('${escapeJsString(compPath)}', ${json})
index.codeSpace.addCompiledTemplate('${escapeJsString(compPath)}', {
groupList: index.genObjectGroups,
content: index.genObjectGroups[require('${escapeJsString(codeRoot)}/${escapeJsString(compPath)}.wxml')]
content: index.genObjectGroups[require(
'${escapeJsString(codeRoot)}/${escapeJsString(compPath)}.wxml'
)]
})
index.codeSpace.addStyleSheet(
'${escapeJsString(compPath)}',
'${escapeJsString(compPath)}',
${scopeNameStr},
${scopeNameStr}
)
index.codeSpace.globalComponentEnv(index.globalObject, '${escapeJsString(
compPath,
Expand Down
8 changes: 4 additions & 4 deletions glass-easel/src/element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1847,6 +1847,10 @@ export class Element implements NodeCast {
containingSlotUpdater?.updateContainingSlot()
containingSlotUpdater?.removeSlotNodes()

// handling child nodes list for parent
parent.childNodes[posIndex] = replacer
replacer.parentIndex = posIndex

// spread in composed tree
if (BM.SHADOW || (BM.DYNAMIC && parent.getBackendMode() === BackendMode.Shadow)) {
if (parent._$backendElement) {
Expand Down Expand Up @@ -1879,10 +1883,6 @@ export class Element implements NodeCast {
parent._$mutationObserverTarget?.detachChild(placeholder)
parent._$mutationObserverTarget?.attachChild(replacer)

// handling child nodes list for parent
parent.childNodes[posIndex] = replacer
replacer.parentIndex = posIndex

// handling child nodes list for replacer
replacer.childNodes.push(...placeholder.childNodes)
for (
Expand Down
149 changes: 149 additions & 0 deletions glass-easel/tests/legacy/virtual.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,155 @@ const testCases = function (testBackend) {
})
})

describe('#selfReplaceWith', function () {
it('should replace native node with children', function () {
var e1 = glassEasel.NativeNode.create('e1', root.shadowRoot)
var e2 = glassEasel.NativeNode.create('e2', root.shadowRoot)
var e3 = glassEasel.NativeNode.create('e3', root.shadowRoot)
var e4 = glassEasel.NativeNode.create('e4', root.shadowRoot)
var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
var t2 = glassEasel.TextNode.create('t2', root.shadowRoot)
e1.appendChild(e2)
e2.appendChild(e3)
e2.appendChild(v1)
v1.appendChild(t1)
e2.appendChild(t2)

e2.selfReplaceWith(e4)
matchElementWithDom(e1)
matchElementWithDom(e2)
expect(e2.parentNode).toBe(null)
expect(e2.childNodes.length).toBe(0)
})

it('should replace virtual node with children', function () {
var e1 = glassEasel.NativeNode.create('e1', root.shadowRoot)
var e2 = glassEasel.NativeNode.create('e2', root.shadowRoot)
var e3 = glassEasel.NativeNode.create('e3', root.shadowRoot)
var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
var v2 = glassEasel.VirtualNode.create('v2', root.shadowRoot)
var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
var t2 = glassEasel.TextNode.create('t2', root.shadowRoot)
e1.appendChild(e2)
e2.appendChild(e3)
e2.appendChild(v1)
v1.appendChild(t1)
e2.appendChild(t2)

e2.selfReplaceWith(v2)
matchElementWithDom(e1)
matchElementWithDom(e2)
expect(e2.parentNode).toBe(null)
expect(e2.childNodes.length).toBe(0)

v2.selfReplaceWith(e2)
matchElementWithDom(e1)
matchElementWithDom(v2)
expect(v2.parentNode).toBe(null)
expect(v2.childNodes.length).toBe(0)
})

it('should replace component with children', function () {
regElem({
is: 'comp1',
template: '<div><slot /></div>',
})
regElem({
is: 'comp2',
options: { multipleSlots: true },
template: '<div><slot name="b"/></div><slot name="a" />',
})
var e1 = glassEasel.NativeNode.create('e1', root.shadowRoot)
var e2 = glassEasel.NativeNode.create('e2', root.shadowRoot)
var e3 = glassEasel.NativeNode.create('e3', root.shadowRoot)
var e4 = glassEasel.NativeNode.create('e4', root.shadowRoot)
var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
var c1 = root.shadowRoot.createComponent('comp1')
var c2 = root.shadowRoot.createComponent('comp2')
e1.appendChild(e2)
e2.appendChild(e3)
e2.appendChild(v1)
v1.appendChild(t1)
e2.appendChild(e4)
e4.slot = 'b'

e2.selfReplaceWith(c1)
matchElementWithDom(e1)
expect(e2.parentNode).toBe(null)
expect(e2.childNodes.length).toBe(0)

c1.selfReplaceWith(c2)
matchElementWithDom(e1)
expect(c1.parentNode).toBe(null)
expect(c1.childNodes.length).toBe(0)

c2.selfReplaceWith(c1)
matchElementWithDom(e1)
expect(c2.parentNode).toBe(null)
expect(c2.childNodes.length).toBe(0)
})

it('should replace virtualHost component with children', function () {
regElem({
is: 'virtual-comp1',
options: { virtualHost: true },
template: '<slot />',
})
regElem({
is: 'comp1',
template: '<div><slot /></div>',
})
regElem({
is: 'virtual-comp2',
options: { multipleSlots: true, virtualHost: true },
template: '<slot name="a" /><slot name="b"/>',
})
regElem({
is: 'comp2',
options: { multipleSlots: true },
template: '<div><slot name="b"/></div><slot name="a" />',
})
var e1 = glassEasel.NativeNode.create('e1', root.shadowRoot)
var e2 = glassEasel.NativeNode.create('e2', root.shadowRoot)
var e3 = glassEasel.NativeNode.create('e3', root.shadowRoot)
var e4 = glassEasel.NativeNode.create('e4', root.shadowRoot)
var v1 = glassEasel.VirtualNode.create('v1', root.shadowRoot)
var t1 = glassEasel.TextNode.create('t1', root.shadowRoot)
var c1 = root.shadowRoot.createComponent('comp1')
var vc1 = root.shadowRoot.createComponent('virtual-comp1')
var c2 = root.shadowRoot.createComponent('comp2')
var vc2 = root.shadowRoot.createComponent('virtual-comp2')
e1.appendChild(e2)
e2.appendChild(e3)
e2.appendChild(v1)
v1.appendChild(t1)
e2.appendChild(e4)
e4.slot = 'b'

e2.selfReplaceWith(vc1)
matchElementWithDom(e1)
expect(e2.parentNode).toBe(null)
expect(e2.childNodes.length).toBe(0)

vc1.selfReplaceWith(c1)
matchElementWithDom(e1)
expect(vc1.parentNode).toBe(null)
expect(vc1.childNodes.length).toBe(0)

c1.selfReplaceWith(vc2)
matchElementWithDom(e1)
expect(c1.parentNode).toBe(null)
expect(c1.childNodes.length).toBe(0)

vc2.selfReplaceWith(c2)
matchElementWithDom(e1)
expect(vc2.parentNode).toBe(null)
expect(vc2.childNodes.length).toBe(0)
})
})

describe('component virtualHost', function () {
it('should create virtualized host node', function () {
regElem({
Expand Down

0 comments on commit 37202f6

Please sign in to comment.