From 4b64562c297b9bb82eeb07d80344b82d271cba40 Mon Sep 17 00:00:00 2001 From: LastLeaf Date: Wed, 31 Jul 2024 11:31:06 +0800 Subject: [PATCH 1/2] feat: new host style support based on style scope --- glass-easel-miniprogram-adapter/src/space.ts | 1 + .../index.ts | 1 - .../wxss_loader.js | 4 +- .../src/js_bindings.rs | 4 +- glass-easel-stylesheet-compiler/src/lib.rs | 61 +++--- glass-easel-stylesheet-compiler/src/main.rs | 5 + glass-easel/src/component.ts | 14 +- glass-easel/src/component_space.ts | 13 +- glass-easel/tests/base/composed_backend.ts | 8 +- glass-easel/tests/base/env.ts | 1 + glass-easel/tests/base/shadow_backend.ts | 10 +- glass-easel/tests/core/behavior.test.ts | 6 +- .../tests/core/component_space.test.ts | 26 +++ glass-easel/tests/core/data_update.test.ts | 4 +- glass-easel/tests/core/placeholder.test.ts | 48 ++--- glass-easel/tests/core/slot.test.ts | 186 ++++++++---------- .../tests/core/trait_behaviors.test.ts | 4 +- glass-easel/tests/tmpl/binding_map.test.ts | 12 +- glass-easel/tests/tmpl/lvalue.test.ts | 36 ++-- .../tests/tmpl/native_rendering.test.ts | 12 +- glass-easel/tests/tmpl/structure.test.ts | 136 ++++++------- 21 files changed, 311 insertions(+), 281 deletions(-) diff --git a/glass-easel-miniprogram-adapter/src/space.ts b/glass-easel-miniprogram-adapter/src/space.ts index 66dae4a..67ed4e5 100644 --- a/glass-easel-miniprogram-adapter/src/space.ts +++ b/glass-easel-miniprogram-adapter/src/space.ts @@ -117,6 +117,7 @@ export class CodeSpace { else this.waitingAliasMap[is] = [alias] }) this._$sharedStyleScope = this.styleScopeManager.register('') + this.space.setSharedStyleScope(this._$sharedStyleScope) this._$styleIsolationMap = Object.create(null) as { [path: string]: StyleIsolation } } diff --git a/glass-easel-miniprogram-webpack-plugin/index.ts b/glass-easel-miniprogram-webpack-plugin/index.ts index e4d614d..a798f88 100644 --- a/glass-easel-miniprogram-webpack-plugin/index.ts +++ b/glass-easel-miniprogram-webpack-plugin/index.ts @@ -429,7 +429,6 @@ export class GlassEaselMiniprogramWebpackPlugin implements WebpackPluginInstance } else { x.options = { classPrefix: styleSheetManager.getScopeName(compPath), - compPath, setLowPriorityStyles: (s: string, map: string) => { styleSheetManager.setLowPriorityStyles(compPath, s, map) }, diff --git a/glass-easel-miniprogram-webpack-plugin/wxss_loader.js b/glass-easel-miniprogram-webpack-plugin/wxss_loader.js index 7294482..771a12c 100644 --- a/glass-easel-miniprogram-webpack-plugin/wxss_loader.js +++ b/glass-easel-miniprogram-webpack-plugin/wxss_loader.js @@ -6,8 +6,8 @@ const { StyleSheetTransformer } = require('glass-easel-stylesheet-compiler') module.exports = function (src, prevMap, meta) { const callback = this.async() - const { classPrefix, compPath, setLowPriorityStyles } = this.query - const sst = new StyleSheetTransformer(this.resourcePath, src, classPrefix, 750, compPath) + const { classPrefix, setLowPriorityStyles } = this.query + const sst = new StyleSheetTransformer(this.resourcePath, src, classPrefix, 750, true) setLowPriorityStyles(sst.getLowPriorityContent(), sst.getLowPrioritySourceMap()) const warnings = sst.extractWarnings() if (warnings && warnings.length > 0) { diff --git a/glass-easel-stylesheet-compiler/src/js_bindings.rs b/glass-easel-stylesheet-compiler/src/js_bindings.rs index 2b2e084..fab28ac 100644 --- a/glass-easel-stylesheet-compiler/src/js_bindings.rs +++ b/glass-easel-stylesheet-compiler/src/js_bindings.rs @@ -55,7 +55,7 @@ impl StyleSheetTransformer { s: &str, class_prefix: Option, rpx_ratio: f32, - host_is: Option, + convert_host: bool, ) -> Self { let mut sst = crate::StyleSheetTransformer::from_css( name, @@ -63,7 +63,7 @@ impl StyleSheetTransformer { StyleSheetOptions { class_prefix, rpx_ratio, - host_is, + convert_host, ..Default::default() }, ); diff --git a/glass-easel-stylesheet-compiler/src/lib.rs b/glass-easel-stylesheet-compiler/src/lib.rs index 03af567..1b3cc16 100644 --- a/glass-easel-stylesheet-compiler/src/lib.rs +++ b/glass-easel-stylesheet-compiler/src/lib.rs @@ -16,6 +16,7 @@ pub struct StyleSheetOptions { pub class_prefix_sign: Option, pub rpx_ratio: f32, pub import_sign: Option, + pub convert_host: bool, pub host_is: Option, } @@ -26,6 +27,7 @@ impl Default for StyleSheetOptions { class_prefix_sign: None, rpx_ratio: 750., import_sign: None, + convert_host: false, host_is: None, } } @@ -444,8 +446,7 @@ fn parse_qualified_rule(input: &mut StepParser, ss: &mut StyleSheetTransformer) let mut in_class = false; let mut has_whitespace = false; input.skip_whitespace(); - if let Some(host_is) = ss.options.host_is.as_ref() { - let quoted_host_is = Token::QuotedString(host_is.clone().into()); + if ss.options.convert_host { let r = input.try_parse::<_, _, ParseError<()>>(|input| { input.expect_colon()?; let Ok(next) = input.next() else { @@ -472,23 +473,32 @@ fn parse_qualified_rule(input: &mut StepParser, ss: &mut StyleSheetTransformer) ss.add_warning(error::ParseErrorKind::HostSelectorCombination, pos..pos); } else { ss.write_in_low_priority(input, |ss, input| { - ss.append_token( - StepToken::wrap_at(Token::SquareBracketBlock, &next), - input, - None, - ); - ss.append_token( - StepToken::wrap_at(Token::Ident("is".into()), &next), - input, - None, - ); - ss.append_token(StepToken::wrap_at(Token::Delim('='), &next), input, None); - ss.append_token(StepToken::wrap_at(quoted_host_is, &next), input, None); - ss.append_token( - StepToken::wrap_at(Token::CloseSquareBracket, &next), - input, - None, - ); + let write_attr_selector = |ss: &mut StyleSheetTransformer, input: &mut StepParser, name: &str, value: &str| { + ss.append_token( + StepToken::wrap_at(Token::SquareBracketBlock, &next), + input, + None, + ); + ss.append_token( + StepToken::wrap_at(Token::Ident(name.into()), &next), + input, + None, + ); + ss.append_token(StepToken::wrap_at(Token::Delim('='), &next), input, None); + let quoted_value = Token::QuotedString(value.into()); + ss.append_token(StepToken::wrap_at(quoted_value, &next), input, None); + ss.append_token( + StepToken::wrap_at(Token::CloseSquareBracket, &next), + input, + None, + ); + }; + let p = ss.options.class_prefix.clone().unwrap_or_default(); + write_attr_selector(ss, input, "wx-host", &p); + if let Some(host_is) = ss.options.host_is.clone() { + ss.append_token(StepToken::wrap_at(Token::Comma, &next), input, None); + write_attr_selector(ss, input, "is", &host_is); + } let close = ss.append_nested_block(next, input); convert_rpx_in_block(input, ss, None); ss.append_nested_block_close(close, input); @@ -902,7 +912,8 @@ mod test { } "#, StyleSheetOptions { - host_is: Some("TEST".to_string()), + class_prefix: Some("ABC".into()), + convert_host: true, ..Default::default() }, ); @@ -914,7 +925,7 @@ mod test { lp.write(&mut s).unwrap(); assert_eq!( std::str::from_utf8(&s).unwrap(), - r#"[is="TEST"]{color:red;}"# + r#"[wx-host="ABC"]{color:red;}"# ); } @@ -932,7 +943,7 @@ mod test { .a { color: green } "#, StyleSheetOptions { - host_is: Some("TEST".to_string()), + convert_host: true, ..Default::default() }, ); @@ -972,7 +983,9 @@ mod test { } "#, StyleSheetOptions { - host_is: Some("/\"\\".to_string()), + class_prefix: None, + convert_host: true, + host_is: Some("IS".into()), ..Default::default() }, ); @@ -987,7 +1000,7 @@ mod test { lp.write(&mut s).unwrap(); assert_eq!( std::str::from_utf8(&s).unwrap(), - r#"@media(width: 1px){@supports(color: red){[is="/\"\\"]{color:pink;}}}"# + r#"@media(width: 1px){@supports(color: red){[wx-host=""],[is="IS"]{color:pink;}}}"# ); } diff --git a/glass-easel-stylesheet-compiler/src/main.rs b/glass-easel-stylesheet-compiler/src/main.rs index 9ca01dc..d208072 100644 --- a/glass-easel-stylesheet-compiler/src/main.rs +++ b/glass-easel-stylesheet-compiler/src/main.rs @@ -48,6 +48,10 @@ struct CmdArgs { /// Convert `:host` into an attribute selector #[arg(long)] + convert_host: bool, + + /// Convert `:host` into an `is` attribute selector with the specified value ( `--convert-host` must be specified) + #[arg(long)] host_is: Option, } @@ -59,6 +63,7 @@ fn main() { class_prefix_sign: args.class_prefix_sign.clone(), rpx_ratio: args.rpx_ratio, import_sign: args.import_sign.clone(), + convert_host: args.convert_host, host_is: args.host_is.clone(), }; diff --git a/glass-easel/src/component.ts b/glass-easel/src/component.ts index be6dfd3..1722bad 100644 --- a/glass-easel/src/component.ts +++ b/glass-easel/src/component.ts @@ -548,6 +548,11 @@ export class Component< comp._$methodCaller = comp comp._$virtual = virtualHost + // check shared style scope + const ownerSpace = behavior.ownerSpace + const sharedStyleScope = ownerSpace._$sharedStyleScope + const isDedicatedStyleScope = options.styleScope && options.styleScope !== sharedStyleScope + // create backend element let backendElement: GeneralBackendElement | null = null if (nodeTreeContext) { @@ -557,7 +562,12 @@ export class Component< backendElement = (nodeTreeContext as domlikeBackend.Context).document.createElement( tagName, ) - backendElement.setAttribute('is', def.is) + if (isDedicatedStyleScope) { + backendElement.setAttribute( + 'wx-host', + ownerSpace.styleScopeManager.queryName(options.styleScope!), + ) + } if (ENV.DEV) performanceMeasureEnd() } } else if (BM.COMPOSED || (BM.DYNAMIC && nodeTreeContext.mode === BackendMode.Composed)) { @@ -613,7 +623,7 @@ export class Component< ;(backendElement as composedBackend.Element).setStyleScope( styleScope, extraStyleScope, - options.styleScope ?? StyleScopeManager.globalScope(), + isDedicatedStyleScope ? options.styleScope ?? StyleScopeManager.globalScope() : undefined, ) } if (styleScopeManager && writeExtraInfoToAttr) { diff --git a/glass-easel/src/component_space.ts b/glass-easel/src/component_space.ts index 19fe1fb..3edeaf5 100644 --- a/glass-easel/src/component_space.ts +++ b/glass-easel/src/component_space.ts @@ -5,7 +5,7 @@ import { type GeneralBehavior, type NativeNodeDefinition, } from './behavior' -import { StyleScopeManager } from './class_list' +import { type StyleScopeId, StyleScopeManager } from './class_list' import { Component, type ComponentDefinition, @@ -161,6 +161,8 @@ export class ComponentSpace { | null = null /** @internal */ _$allowUnusedNativeNode = true + /** @internal */ + _$sharedStyleScope = 0 /** * Create a new component space @@ -201,6 +203,15 @@ export class ComponentSpace { return this._$componentOptions } + /** + * Mark a style scope as shared + * + * This style scope will not be written to backend as a dedicated style scope for a component. + */ + setSharedStyleScope(styleScopeId: StyleScopeId) { + this._$sharedStyleScope = styleScopeId + } + /** * Set (or update) a global using component item * diff --git a/glass-easel/tests/base/composed_backend.ts b/glass-easel/tests/base/composed_backend.ts index 6b418e8..6b5537d 100644 --- a/glass-easel/tests/base/composed_backend.ts +++ b/glass-easel/tests/base/composed_backend.ts @@ -286,8 +286,12 @@ abstract class Node implements glassEasel.composedBackend.Element { }) const tagName = this.tagName.toLowerCase() ret.push(`<${tagName}`) - const is = this.__wxElement?.asGeneralComponent()?.is - if (typeof is === 'string') props.is = is + if (this._$hostStyleScope !== undefined) { + const def = this.__wxElement?.asGeneralComponent()!.getComponentDefinition() + props['wx-host'] = def!.behavior.ownerSpace.styleScopeManager.queryName( + this._$hostStyleScope, + )! + } if (this.id) props.id = this.getAttribute('id')! if (this._$style) props.style = this.getAttribute('style')! if (this._$classes) props.class = this.getAttribute('class')! diff --git a/glass-easel/tests/base/env.ts b/glass-easel/tests/base/env.ts index efdf4a4..3fc1040 100644 --- a/glass-easel/tests/base/env.ts +++ b/glass-easel/tests/base/env.ts @@ -1,6 +1,7 @@ /* eslint-disable no-new-func */ /* eslint-disable @typescript-eslint/no-implied-eval */ +// eslint-disable-next-line import/no-extraneous-dependencies import { TmplGroup } from 'glass-easel-template-compiler' import * as glassEasel from '../../src' import * as ComposedBackend from './composed_backend' diff --git a/glass-easel/tests/base/shadow_backend.ts b/glass-easel/tests/base/shadow_backend.ts index c9bee8e..f749902 100644 --- a/glass-easel/tests/base/shadow_backend.ts +++ b/glass-easel/tests/base/shadow_backend.ts @@ -398,8 +398,14 @@ abstract class Node implements glassEasel.backend.Element { }) const tagName = this.tagName.toLowerCase() ret.push(`<${tagName}`) - const is = this.__wxElement?.asGeneralComponent()?.is - if (typeof is === 'string') props.is = is + const comp = this.__wxElement?.asGeneralComponent() + if (comp) { + const def = comp.getComponentDefinition() + const scope = def.getComponentOptions().styleScope + if (scope && scope !== def.behavior.ownerSpace._$sharedStyleScope) { + props['wx-host'] = def.behavior.ownerSpace.styleScopeManager.queryName(scope)! + } + } if (this.id) props.id = this.getAttribute('id')! if (this._$style) props.style = this.getAttribute('style')! if (this._$classes) props.class = this.getAttribute('class')! diff --git a/glass-easel/tests/core/behavior.test.ts b/glass-easel/tests/core/behavior.test.ts index 1249286..3f3c919 100644 --- a/glass-easel/tests/core/behavior.test.ts +++ b/glass-easel/tests/core/behavior.test.ts @@ -135,7 +135,7 @@ describe('chaining-form interface', () => { ) .registerComponent() const elem = glassEasel.Component.createWithContext('root', compDef, domBackend) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') }) test('chaining data and observers', () => { @@ -579,9 +579,7 @@ describe('chaining-form interface', () => { const comp = glassEasel.Component.createWithContext('root', compDef, domBackend) glassEasel.Element.pretendAttached(comp) expect(eventArr).toStrictEqual([1, 2, 1, 2, 1, 2]) - expect(domHtml(comp)).toBe( - 'ABC', - ) + expect(domHtml(comp)).toBe('ABC') }) test('chaining filter', () => { diff --git a/glass-easel/tests/core/component_space.test.ts b/glass-easel/tests/core/component_space.test.ts index b50acaa..4bb635d 100644 --- a/glass-easel/tests/core/component_space.test.ts +++ b/glass-easel/tests/core/component_space.test.ts @@ -136,6 +136,32 @@ describe('Component Space', () => { expect(mainCs.getComponentByUrlWithoutDefault('space://comp', '')).toBe(extraComp) }) + test('shared style scope applied to components', () => { + const cs = new glassEasel.ComponentSpace() + const sharedStyleScope = cs.styleScopeManager.register('aBc') + const styleScope = cs.styleScopeManager.register('aBc') + cs.setSharedStyleScope(sharedStyleScope) + + const compDef = cs.defineComponent({ + options: { + styleScope: sharedStyleScope, + }, + }) + const elem = glassEasel.Component.createWithContext('root', compDef, domBackend) + const domElem = elem.$$ as unknown as HTMLElement + expect(domElem.getAttribute('wx-host')).toBe(null) + + const compDef2 = cs.defineComponent({ + options: { + styleScope, + extraStyleScope: sharedStyleScope, + }, + }) + const elem2 = glassEasel.Component.createWithContext('root', compDef2, domBackend) + const domElem2 = elem2.$$ as unknown as HTMLElement + expect(domElem2.getAttribute('wx-host')).toBe('aBc') + }) + test('create component with URL params (without generics)', () => { const cs = new glassEasel.ComponentSpace() const compDef = cs.defineComponent({ diff --git a/glass-easel/tests/core/data_update.test.ts b/glass-easel/tests/core/data_update.test.ts index cf07d74..5f33fb3 100644 --- a/glass-easel/tests/core/data_update.test.ts +++ b/glass-easel/tests/core/data_update.test.ts @@ -92,7 +92,7 @@ describe('partial update', () => { }) const elem = glassEasel.Component.createWithContext('root', def, domBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('1020') + expect(domHtml(elem)).toBe('1020') expect(execArr).toStrictEqual(['B', 'A', 'B', 'A']) execArr = [] ;(elem.data.list[0]!.v as any) = 30 @@ -100,7 +100,7 @@ describe('partial update', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment list: elem.data.list as any, }) - expect(domHtml(elem)).toBe('3020') + expect(domHtml(elem)).toBe('3020') expect(execArr).toStrictEqual(['D', 'B', 'A', 'B']) execArr = [] elem.setData({ list: [] }) diff --git a/glass-easel/tests/core/placeholder.test.ts b/glass-easel/tests/core/placeholder.test.ts index bf62c13..6d2b1e4 100644 --- a/glass-easel/tests/core/placeholder.test.ts +++ b/glass-easel/tests/core/placeholder.test.ts @@ -58,23 +58,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend) expect(listener).toHaveBeenCalledTimes(1) expect(listener).toHaveBeenNthCalledWith(1, false, 'placeholder/simple/child', elem) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) componentSpace.defineComponent({ is: 'placeholder/simple/child', template: tmpl('child
'), }) - expect(domHtml(elem)).toBe( - '
child
', - ) + expect(domHtml(elem)).toBe('
child
') matchElementWithDom(elem) elem.setData({ b: true, }) expect(domHtml(elem)).toBe( - '
child
', + '
child
', ) matchElementWithDom(elem) }) @@ -97,7 +95,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }) .registerComponent() const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend) - expect(domHtml(elem)).toBe('test') + expect(domHtml(elem)).toBe('test') matchElementWithDom(elem) }) @@ -118,7 +116,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }) .registerComponent() const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) componentSpace.groupRegister(() => { @@ -133,7 +131,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const childDef = componentSpace.define('child').template(tmpl('CHILD')).registerComponent() componentSpace.setGlobalUsingComponent('child', childDef) }) - expect(domHtml(elem)).toBe('CHILD') + expect(domHtml(elem)).toBe('CHILD') matchElementWithDom(elem) }) @@ -166,20 +164,18 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(listener).toHaveBeenCalledTimes(2) expect(listener).toHaveBeenNthCalledWith(1, true, 'child-pub', elem) expect(listener).toHaveBeenNthCalledWith(2, false, 'child', elem) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) extraCs.defineComponent({ is: 'child', template: tmpl('A'), }) - expect(domHtml(elem)).toBe('A') + expect(domHtml(elem)).toBe('A') matchElementWithDom(elem) extraCs.exportComponent('child-pub', 'child') - expect(domHtml(elem)).toBe( - 'AA', - ) + expect(domHtml(elem)).toBe('AA') matchElementWithDom(elem) }) @@ -222,7 +218,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { is: 'placeholder/simple/child', template: tmpl('B'), }) - expect(domHtml(elem)).toBe('AB') + expect(domHtml(elem)).toBe('AB') matchElementWithDom(elem) }) @@ -264,16 +260,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, template: tmpl('B'), }) - expect(domHtml(elem)).toBe('AB') + expect(domHtml(elem)).toBe('AB') matchElementWithDom(elem) componentSpace.defineComponent({ is: 'placeholder/simple/child-of-child', template: tmpl('C'), }) - expect(domHtml(elem)).toBe( - 'ABC', - ) + expect(domHtml(elem)).toBe('ABC') matchElementWithDom(elem) }) @@ -327,18 +321,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { template: tmpl('{{ prop }}'), }) const child = (elem.$.child as glassEasel.GeneralComponent).asInstanceOf(childDef)! - expect(domHtml(elem)).toBe( - 'new0', - ) + expect(domHtml(elem)).toBe('new0') expect(child.data.prop).toBe('new') elem.setData({ arr: ['1', '2'], }) - expect(domHtml(elem)).toBe( - 'new01', - ) + expect(domHtml(elem)).toBe('new01') matchElementWithDom(elem) const cDef = componentSpace.defineComponent({ @@ -350,9 +340,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }) const c0 = (elem.$['c-0'] as glassEasel.GeneralComponent).asInstanceOf(cDef)! const c1 = (elem.$['c-1'] as glassEasel.GeneralComponent).asInstanceOf(cDef)! - expect(domHtml(elem)).toBe( - 'new12', - ) + expect(domHtml(elem)).toBe('new12') expect(c0.data.prop).toBe('1') expect(c0.dataset.index).toBe(0) expect(c1.data.prop).toBe('2') @@ -416,9 +404,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(callOrder).toStrictEqual([1]) glassEasel.Element.pretendAttached(elem) expect(callOrder).toStrictEqual([1, 2, 7]) - expect(domHtml(elem)).toBe( - '3', - ) + expect(domHtml(elem)).toBe('3') matchElementWithDom(elem) callOrder.splice(0, 99) @@ -444,7 +430,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(callOrder).toStrictEqual([4, 3, 5, 8]) - expect(domHtml(elem)).toBe('
21
') + expect(domHtml(elem)).toBe('
21
') matchElementWithDom(elem) }) diff --git a/glass-easel/tests/core/slot.test.ts b/glass-easel/tests/core/slot.test.ts index 6343c6e..bdde058 100644 --- a/glass-easel/tests/core/slot.test.ts +++ b/glass-easel/tests/core/slot.test.ts @@ -49,7 +49,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .usingComponents({ child, comp }) .definition({ template: tmpl(` - + A B C @@ -82,15 +82,13 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { glassEasel.Element.pretendAttached(parentElem) expect(childElem.childNodes.length).toBe(0) expect(ops).toEqual([]) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) a.appendChild(slotA1) expect(childElem.childNodes.length).toBe(4) expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes) - expect(domHtml(parentElem)).toBe( - 'A', - ) + expect(domHtml(parentElem)).toBe('A') expect(ops).toEqual([[-1, 'A']]) matchElementWithDom(parentElem) @@ -99,7 +97,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes.slice(0, 4)) expect(slotA2.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8)) expect(domHtml(parentElem)).toBe( - 'AA', + 'AA', ) expect(ops).toEqual([ [-1, 'A'], @@ -113,7 +111,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA2.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8)) expect(slotB.getComposedChildren()).toEqual(childElem.childNodes.slice(8, 12)) expect(domHtml(parentElem)).toBe( - 'ABA', + 'ABA', ) expect(ops).toEqual([ [-1, 'A'], @@ -127,7 +125,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA2.getComposedChildren()).toEqual(childElem.childNodes.slice(0, 4)) expect(slotB.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8)) expect(domHtml(parentElem)).toBe( - 'BA', + 'BA', ) expect(ops).toEqual([ [-1, 'A'], @@ -143,7 +141,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotB.getComposedChildren()).toEqual(childElem.childNodes.slice(4, 8)) expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes.slice(8, 12)) expect(domHtml(parentElem)).toBe( - 'BAA', + 'BAA', ) expect(ops).toEqual([ [-1, 'A'], @@ -161,7 +159,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA1.getComposedChildren()).toEqual(childElem.childNodes.slice(8, 12)) expect(slot1.getComposedChildren()).toEqual(childElem.childNodes.slice(12, 16)) expect(domHtml(parentElem)).toBe( - 'BAAD', + 'BAAD', ) expect(ops).toEqual([ [-1, 'A'], @@ -187,7 +185,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .define() .usingComponents({ child }) .definition({ - template: tmpl(''), + template: tmpl(''), }) .registerComponent() @@ -215,7 +213,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) childElem.appendChild(contentA) @@ -223,7 +221,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) glassEasel.Element.setSlotElement(contentA, slotA) @@ -231,7 +229,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([contentA]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('A') + expect(domHtml(parentElem)).toBe('A') matchElementWithDom(parentElem) glassEasel.Element.setSlotElement(contentA, slotB) @@ -239,7 +237,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([contentA]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('A') + expect(domHtml(parentElem)).toBe('A') matchElementWithDom(parentElem) childElem.removeChild(contentA) @@ -247,7 +245,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) glassEasel.Element.setSlotElement(contentA, slotC) @@ -256,7 +254,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([contentA]) - expect(domHtml(parentElem)).toBe('A') + expect(domHtml(parentElem)).toBe('A') matchElementWithDom(parentElem) childElem.appendChild(contentB) @@ -266,7 +264,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([contentA]) - expect(domHtml(parentElem)).toBe('A') + expect(domHtml(parentElem)).toBe('A') matchElementWithDom(parentElem) glassEasel.Element.setSlotElement(contentB, slotC) @@ -276,7 +274,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([contentA, contentB, textB]) - expect(domHtml(parentElem)).toBe('AB') + expect(domHtml(parentElem)).toBe('AB') matchElementWithDom(parentElem) childElem.appendChild(contentA) @@ -286,7 +284,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([contentB, textB, contentA]) - expect(domHtml(parentElem)).toBe('BA') + expect(domHtml(parentElem)).toBe('BA') matchElementWithDom(parentElem) glassEasel.Element.setSlotElement(contentB, slotB) @@ -296,7 +294,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([contentB, textB]) expect(slotC.getComposedChildren()).toEqual([contentA]) - expect(domHtml(parentElem)).toBe('BA') + expect(domHtml(parentElem)).toBe('BA') matchElementWithDom(parentElem) childElem.removeChild(contentB) @@ -306,7 +304,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([contentA]) - expect(domHtml(parentElem)).toBe('A') + expect(domHtml(parentElem)).toBe('A') matchElementWithDom(parentElem) glassEasel.Element.setSlotElement(contentB, slotA) @@ -317,7 +315,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([contentB, textB]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([contentA]) - expect(domHtml(parentElem)).toBe('BA') + expect(domHtml(parentElem)).toBe('BA') matchElementWithDom(parentElem) childElem.removeChild(contentA) @@ -327,7 +325,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([contentB, textB]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('B') + expect(domHtml(parentElem)).toBe('B') matchElementWithDom(parentElem) childElem.removeChild(contentB) @@ -337,7 +335,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { expect(slotA.getComposedChildren()).toEqual([]) expect(slotB.getComposedChildren()).toEqual([]) expect(slotC.getComposedChildren()).toEqual([]) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) }) }) @@ -369,7 +367,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { })) .definition({ template: tmpl(` - + {{slotContent1}} {{slotContent2}} @@ -385,37 +383,37 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)! expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('ABABAB') + expect(domHtml(parentElem)).toBe('ABABAB') matchElementWithDom(parentElem) parentElem.setData({ slotContent1: 'AA' }) expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('AABAABAAB') + expect(domHtml(parentElem)).toBe('AABAABAAB') matchElementWithDom(parentElem) parentElem.setData({ slotName1: 'b' }) expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('BBB') + expect(domHtml(parentElem)).toBe('BBB') matchElementWithDom(parentElem) parentElem.setData({ slotContent1: 'C', slotName1: 'a' }) expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('CBCBCB') + expect(domHtml(parentElem)).toBe('CBCBCB') matchElementWithDom(parentElem) parentElem.setData({ slotContent2: 'D' }) expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('CDCDCD') + expect(domHtml(parentElem)).toBe('CDCDCD') matchElementWithDom(parentElem) parentElem.setData({ slotName2: 'c' }) expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('CCC') + expect(domHtml(parentElem)).toBe('CCC') matchElementWithDom(parentElem) parentElem.setData({ slotName1: 'b', slotName2: 'c' }) expect(childElem.childNodes.length).toBe(6) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) }) @@ -438,7 +436,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .usingComponents({ child }) .definition({ template: tmpl(` - + 456
{{someText}}
 @@ -453,19 +451,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ) const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)! - expect(domHtml(parentElem)).toBe('
123
') + expect(domHtml(parentElem)).toBe('
123
') matchElementWithDom(parentElem) childElem.setData({ sn: '' }) - expect(domHtml(parentElem)).toBe('456') + expect(domHtml(parentElem)).toBe('456') matchElementWithDom(parentElem) childElem.setData({ sn: 'def' }) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) childElem.setData({ sn: 'abc' }) - expect(domHtml(parentElem)).toBe('
123
') + expect(domHtml(parentElem)).toBe('
123
') matchElementWithDom(parentElem) }) @@ -590,7 +588,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { glassEasel.Element.pretendAttached(parentElem) expect(domHtml(parentElem)).toBe( - '', + '', ) expect(ops).toEqual([ [-1, '1:A'], @@ -603,7 +601,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA1: true }) expect(domHtml(parentElem)).toBe( - 'ABABAB', + 'ABABAB', ) expect(ops).toEqual([ [-1, '3:A'], @@ -614,7 +612,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotName2: 'a2' }) expect(domHtml(parentElem)).toBe( - 'ABAA', + 'ABAA', ) expect(ops).toEqual([[-2, '3:B']]) matchElementWithDom(parentElem) @@ -622,7 +620,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA2: true }) expect(domHtml(parentElem)).toBe( - 'ABABABB', + 'ABABABB', ) expect(ops).toEqual([ [-1, '3:B'], @@ -633,7 +631,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA1: false }) expect(domHtml(parentElem)).toBe( - 'ABBBB', + 'ABBBB', ) expect(ops).toEqual([[-2, '3:A']]) matchElementWithDom(parentElem) @@ -641,7 +639,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ duplicateSlots: true }) expect(domHtml(parentElem)).toBe( - 'ABBBBABBBB', + 'ABBBBABBBB', ) expect(ops).toEqual([ [-1, '1:A'], @@ -656,7 +654,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotName1: 'a2' }) expect(domHtml(parentElem)).toBe( - 'ABABABABABABABAB', + 'ABABABABABABABAB', ) expect(ops).toEqual([ [-1, '3:A'], @@ -669,7 +667,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA2: false }) expect(domHtml(parentElem)).toBe( - '', + '', ) expect(ops).toEqual([ [-2, '3:A'], @@ -686,7 +684,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA1: true }) expect(domHtml(parentElem)).toBe( - 'ABAB', + 'ABAB', ) expect(ops).toEqual([]) matchElementWithDom(parentElem) @@ -694,7 +692,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotName1: 'a1' }) expect(domHtml(parentElem)).toBe( - 'ABAAABAA', + 'ABAAABAA', ) expect(ops).toEqual([ [-1, '3:A'], @@ -705,7 +703,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotContent1: 'C' }) expect(domHtml(parentElem)).toBe( - 'CBCCCBCC', + 'CBCCCBCC', ) expect(ops).toEqual([]) matchElementWithDom(parentElem) @@ -713,7 +711,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ duplicateSlots: false }) expect(domHtml(parentElem)).toBe( - 'CBCC', + 'CBCC', ) expect(ops).toEqual([ [-2, '1:C'], @@ -849,9 +847,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ).asInstanceOf(parent)! glassEasel.Element.pretendAttached(parentElem) - expect(domHtml(parentElem)).toBe( - '', - ) + expect(domHtml(parentElem)).toBe('') expect(ops).toEqual([ [-1, '1:A'], [-1, '1:B'], @@ -863,7 +859,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA1: true }) expect(domHtml(parentElem)).toBe( - 'ABABAB', + 'ABABAB', ) expect(ops).toEqual([ [-1, '3:A'], @@ -874,7 +870,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotName2: 'b2' }) expect(domHtml(parentElem)).toBe( - 'ABBABBABB', + 'ABBABBABB', ) expect(ops).toEqual([ [-2, '1:B'], @@ -892,7 +888,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA2: true }) expect(domHtml(parentElem)).toBe( - 'ABBABBABB', + 'ABBABBABB', ) expect(ops).toEqual([]) matchElementWithDom(parentElem) @@ -900,7 +896,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ childSlotName: 'a2' }) expect(domHtml(parentElem)).toBe( - 'ABBABBABBABB', + 'ABBABBABBABB', ) expect(ops).toEqual([ [-2, '3:A'], @@ -918,7 +914,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotName1: 'b2' }) expect(domHtml(parentElem)).toBe( - 'ABABABABABABABAB', + 'ABABABABABABABAB', ) expect(ops).toEqual([ [-2, '1:A'], @@ -939,7 +935,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ slotContent1: 'C' }) expect(domHtml(parentElem)).toBe( - 'CBCBCBCBCBCBCBCB', + 'CBCBCBCBCBCBCBCB', ) expect(ops).toEqual([]) matchElementWithDom(parentElem) @@ -947,7 +943,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA2: false, childSlotName: 'a1' }) expect(domHtml(parentElem)).toBe( - 'CBCBCBCBCBCB', + 'CBCBCBCBCBCB', ) expect(ops).toEqual([ [-1, '3:C'], @@ -967,9 +963,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] parentElem.setData({ enableA1: false }) - expect(domHtml(parentElem)).toBe( - '', - ) + expect(domHtml(parentElem)).toBe('') expect(ops).toEqual([ [-2, '3:C'], [-2, '3:B'], @@ -1011,7 +1005,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .usingComponents({ child, 'x-c': subComp }) .definition({ template: tmpl(` - + {{ foo.b[bar] }} @@ -1029,7 +1023,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const childElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(child)! expect(domHtml(parentElem)).toBe( - '100200', + '100200', ) expect(updateCount).toBe(2) matchElementWithDom(parentElem) @@ -1037,7 +1031,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { childElem.replaceDataOnPath(['a1', 'b', 0], 11) childElem.applyDataUpdates() expect(domHtml(parentElem)).toBe( - '110200', + '110200', ) expect(updateCount).toBe(3) matchElementWithDom(parentElem) @@ -1046,7 +1040,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { childElem.replaceDataOnPath(['a2', 'b', 0], 21) childElem.applyDataUpdates() expect(domHtml(parentElem)).toBe( - '120210', + '120210', ) expect(updateCount).toBe(5) matchElementWithDom(parentElem) @@ -1054,14 +1048,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { childElem.replaceDataOnPath(['a2', 'b', 1], 201) childElem.applyDataUpdates() expect(domHtml(parentElem)).toBe( - '120210', + '120210', ) expect(updateCount).toBe(6) matchElementWithDom(parentElem) childElem.setData({ c: 1 }) expect(domHtml(parentElem)).toBe( - '10012011', + '10012011', ) expect(updateCount).toBe(8) matchElementWithDom(parentElem) @@ -1112,7 +1106,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .definition({ template: tmpl(` - + {{index}}:{{item}} `), @@ -1125,7 +1119,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { parentElem.replaceDataOnPath(['a', 'foo'], 'oops') - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') expect(ops).toEqual([ [0, 'foo'], [-1, 'foo'], @@ -1135,7 +1129,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ops = [] childElem.setData({ items: [1, 2, 3] }) expect(domHtml(parentElem)).toBe( - '0:11:22:3', + '0:11:22:3', ) expect(ops).toEqual([ [0, '0:1'], @@ -1161,7 +1155,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [-1, '2:6'], ]) expect(domHtml(parentElem)).toBe( - '0:41:52:6', + '0:41:52:6', ) matchElementWithDom(parentElem) @@ -1178,7 +1172,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [-1, '5:2'], ]) expect(domHtml(parentElem)).toBe( - '0:11:42:63:34:55:2', + '0:11:42:63:34:55:2', ) matchElementWithDom(parentElem) @@ -1193,7 +1187,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [0, '5:3'], ]) expect(domHtml(parentElem)).toBe( - '0:21:52:13:44:65:3', + '0:21:52:13:44:65:3', ) matchElementWithDom(parentElem) @@ -1208,7 +1202,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [0, '5:2'], ]) expect(domHtml(parentElem)).toBe( - '0:11:42:63:34:55:2', + '0:11:42:63:34:55:2', ) matchElementWithDom(parentElem) @@ -1222,7 +1216,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [0, '4:2'], ]) expect(domHtml(parentElem)).toBe( - '0:11:42:33:54:2', + '0:11:42:33:54:2', ) matchElementWithDom(parentElem) @@ -1237,7 +1231,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [0, '5:2'], ]) expect(domHtml(parentElem)).toBe( - '0:11:42:63:34:55:2', + '0:11:42:63:34:55:2', ) matchElementWithDom(parentElem) @@ -1251,7 +1245,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { [-2, '5:2'], [-2, '2:6'], ]) - expect(domHtml(parentElem)).toBe('') + expect(domHtml(parentElem)).toBe('') matchElementWithDom(parentElem) ops = [] @@ -1319,29 +1313,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const noneElem = parentElem.getShadowRoot()!.childNodes[0]!.asInstanceOf(none)! const recElem = parentElem.getShadowRoot()!.childNodes[1]!.asInstanceOf(rec)! - expect(domHtml(parentElem)).toBe( - '
123
abc
', - ) + expect(domHtml(parentElem)).toBe('
123
abc
') matchElementWithDom(parentElem) noneElem.setData({ 'sp.text': 456 }) - expect(domHtml(parentElem)).toBe( - '
123
abc
', - ) + expect(domHtml(parentElem)).toBe('
123
abc
') matchElementWithDom(parentElem) noneElem.setData({ sp: { text: 789 } }) - expect(domHtml(parentElem)).toBe( - '
789
abc
', - ) + expect(domHtml(parentElem)).toBe('
789
abc
') matchElementWithDom(parentElem) const recObj = {} as { r: any } recObj.r = recObj recElem.setData({ sp: { text: 'def' }, recObj }) - expect(domHtml(parentElem)).toBe( - '
789
def
', - ) + expect(domHtml(parentElem)).toBe('
789
def
') matchElementWithDom(parentElem) }) @@ -1385,7 +1371,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { testBackend, ) - expect(domHtml(parentElem)).toBe('
123
') + expect(domHtml(parentElem)).toBe('
123
') matchElementWithDom(parentElem) componentSpace @@ -1405,7 +1391,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { })) .registerComponent() - expect(domHtml(parentElem)).toBe('
456
') + expect(domHtml(parentElem)).toBe('
456
') matchElementWithDom(parentElem) }) @@ -1431,7 +1417,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .usingComponents({ comp }) .template( tmpl(` - +
child
 @@ -1460,19 +1446,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { parent.general(), testBackend, ) - expect(domHtml(parentElem)).toBe('
comp
') + expect(domHtml(parentElem)).toBe('
comp
') parentElem.setData({ s: 'comp-slot', }) expect(domHtml(parentElem)).toBe( - '
comp
content
', + '
comp
content
', ) parentElem.setData({ s: 'invalid', }) - expect(domHtml(parentElem)).toBe('
comp
') + expect(domHtml(parentElem)).toBe('
comp
') }) test('should support slot as slot content with virtual host and placeholder', () => { @@ -1500,7 +1486,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .placeholders({ comp: 'placeholder' }) .template( tmpl(` - +
child
 @@ -1513,7 +1499,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .usingComponents({ child }) .template( tmpl(` - +
content
 `), @@ -1540,7 +1526,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { ) .registerComponent() - expect(domHtml(parentElem)).toBe('
comp
content
') + expect(domHtml(parentElem)).toBe('
comp
content
') }) }) }) diff --git a/glass-easel/tests/core/trait_behaviors.test.ts b/glass-easel/tests/core/trait_behaviors.test.ts index d1d0528..09c5e88 100644 --- a/glass-easel/tests/core/trait_behaviors.test.ts +++ b/glass-easel/tests/core/trait_behaviors.test.ts @@ -154,8 +154,6 @@ describe('trait behaviors', () => { const comp = glassEasel.Component.createWithContext('root', compDef, domBackend) glassEasel.Element.pretendAttached(comp) expect(eventArr).toStrictEqual([1, 2, 1, 2, 1, 2]) - expect(domHtml(comp)).toBe( - 'ABC', - ) + expect(domHtml(comp)).toBe('ABC') }) }) diff --git a/glass-easel/tests/tmpl/binding_map.test.ts b/glass-easel/tests/tmpl/binding_map.test.ts index 6a83999..df2b2b9 100644 --- a/glass-easel/tests/tmpl/binding_map.test.ts +++ b/glass-easel/tests/tmpl/binding_map.test.ts @@ -59,15 +59,15 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }) const elem = glassEasel.Component.createWithContext('root', def, testBackend) const comp = elem.getShadowRoot()!.getElementById('comp') as glassEasel.GeneralComponent - expect(domHtml(elem)).toBe('
123
B') + expect(domHtml(elem)).toBe('
123
B') comp.setData({ propA: 789 }) - expect(domHtml(elem)).toBe('
789
B') + expect(domHtml(elem)).toBe('
789
B') expect(elem.data.list).toEqual([{ a: 789 }, { a: 456 }]) elem.setData({ index: 1 }) - expect(domHtml(elem)).toBe('
456
C') + expect(domHtml(elem)).toBe('
456
C') expect(elem.data.list).toEqual([{ a: 789 }, { a: 456 }]) comp.setData({ propA: 123 }) - expect(domHtml(elem)).toBe('
123
C') + expect(domHtml(elem)).toBe('
123
C') expect(elem.data.list).toEqual([{ a: 789 }, { a: 123 }]) }) }) @@ -102,9 +102,9 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const child = ( elem.getShadowRoot()!.childNodes[0] as glassEasel.GeneralComponent ).asInstanceOf(subComp)! - expect(domHtml(elem)).toBe('
abc
') + expect(domHtml(elem)).toBe('
abc
') elem.setData({ c: 'def' }) - expect(domHtml(elem)).toBe('
def
') + expect(domHtml(elem)).toBe('
def
') child.setData({ propA: 456 }) expect(elem.data.a).toBe(456) child.setData({ propA: 789 }) diff --git a/glass-easel/tests/tmpl/lvalue.test.ts b/glass-easel/tests/tmpl/lvalue.test.ts index c44d6e6..8eb25e3 100644 --- a/glass-easel/tests/tmpl/lvalue.test.ts +++ b/glass-easel/tests/tmpl/lvalue.test.ts @@ -40,26 +40,26 @@ describe('model value binding', () => { }) const elem = glassEasel.Component.createWithContext('root', def, domBackend) const comp = elem.getShadowRoot()!.getElementById('comp')! as glassEasel.GeneralComponent - expect(domHtml(elem)).toBe('
10
') + expect(domHtml(elem)).toBe('
10
') expect(updateCount).toBe(1) expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(10) comp.setData({ propA: 20 }) - expect(domHtml(elem)).toBe('
20
') + expect(domHtml(elem)).toBe('
20
') expect(updateCount).toBe(3) expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(20) expect(elem.data.a).toEqual({ b: [20, 100] }) elem.setData({ 'a.b[0]': 30 }) - expect(domHtml(elem)).toBe('
30
') + expect(domHtml(elem)).toBe('
30
') expect(updateCount).toBe(4) expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(30) elem.setData({ 'a.b[1]': 200 }) expect(updateCount).toBe(4) elem.setData({ c: 1 }) - expect(domHtml(elem)).toBe('
200
') + expect(domHtml(elem)).toBe('
200
') expect(updateCount).toBe(5) expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(200) comp.setData({ propA: 300 }) - expect(domHtml(elem)).toBe('
300
') + expect(domHtml(elem)).toBe('
300
') expect(updateCount).toBe(7) expect(comp.getShadowRoot()!.getElementById('a')!.dataset.a).toBe(300) expect(elem.data.a).toEqual({ b: [30, 300] }) @@ -169,21 +169,21 @@ describe('model value binding', () => { const elem = glassEasel.Component.createWithContext('root', def, domBackend) const comp0 = elem.getShadowRoot()!.getElementById('comp0')! as glassEasel.GeneralComponent const comp1 = elem.getShadowRoot()!.getElementById('comp1')! as glassEasel.GeneralComponent - expect(domHtml(elem)).toBe('123:X456:Y') + expect(domHtml(elem)).toBe('123:X456:Y') comp0.setData({ propA: 'X0', propB: 1230 }) - expect(domHtml(elem)).toBe('1230:X0456:Y') + expect(domHtml(elem)).toBe('1230:X0456:Y') expect(elem.data.list).toEqual([ { a: 'X0', b: 1230 }, { a: 'Y', b: 456 }, ]) comp1.setData({ propA: 'Y0', propB: 4560 }) - expect(domHtml(elem)).toBe('1230:X04560:Y0') + expect(domHtml(elem)).toBe('1230:X04560:Y0') expect(elem.data.list).toEqual([ { a: 'X0', b: 1230 }, { a: 'Y0', b: 4560 }, ]) elem.setData({ list: [{ a: 'Z', b: 789 }] }) - expect(domHtml(elem)).toBe('789:Z') + expect(domHtml(elem)).toBe('789:Z') }) test('invalid model value binding for items', () => { @@ -210,9 +210,9 @@ describe('model value binding', () => { }) const elem = glassEasel.Component.createWithContext('root', def, domBackend) const comp = elem.getShadowRoot()!.getElementById('comp')! as glassEasel.GeneralComponent - expect(domHtml(elem)).toBe('123') + expect(domHtml(elem)).toBe('123') comp.setData({ propA: 456 }) - expect(domHtml(elem)).toBe('456') + expect(domHtml(elem)).toBe('456') expect(elem.data.list).toEqual([{ a: [123] }]) }) @@ -237,11 +237,11 @@ describe('model value binding', () => { const elem = glassEasel.Component.createWithContext('root', def, domBackend) const comp0 = elem.getShadowRoot()!.getElementById('comp0')! as glassEasel.GeneralComponent const comp1 = elem.getShadowRoot()!.getElementById('comp1')! as glassEasel.GeneralComponent - expect(domHtml(elem)).toBe('123456') + expect(domHtml(elem)).toBe('123456') comp0.setData({ propA: 321 }) - expect(domHtml(elem)).toBe('321456') + expect(domHtml(elem)).toBe('321456') comp1.setData({ propA: 654 }) - expect(domHtml(elem)).toBe('321654') + expect(domHtml(elem)).toBe('321654') }) test('nested model value bindings', () => { @@ -278,19 +278,19 @@ describe('model value binding', () => { const elem = glassEasel.Component.createWithContext('root', def, domBackend) const compB = elem.getShadowRoot()!.getElementById('comp')!.asInstanceOf(subCompB)! const compA = compB.getShadowRoot()!.getElementById('comp')!.asInstanceOf(subCompA)! - expect(domHtml(elem)).toBe('
123
') + expect(domHtml(elem)).toBe('
123
') compA.setData({ propA: 45 }) - expect(domHtml(elem)).toBe('
45
') + expect(domHtml(elem)).toBe('
45
') expect(elem.data.b).toBe(45) expect(compB.data.propB).toBe(45) expect(compA.data.propA).toBe(45) compB.setData({ propB: 67 }) - expect(domHtml(elem)).toBe('
67
') + expect(domHtml(elem)).toBe('
67
') expect(elem.data.b).toBe(67) expect(compB.data.propB).toBe(67) expect(compA.data.propA).toBe(67) elem.setData({ b: 89 }) - expect(domHtml(elem)).toBe('
89
') + expect(domHtml(elem)).toBe('
89
') expect(elem.data.b).toBe(89) expect(compB.data.propB).toBe(89) expect(compA.data.propA).toBe(89) diff --git a/glass-easel/tests/tmpl/native_rendering.test.ts b/glass-easel/tests/tmpl/native_rendering.test.ts index b27eef8..ae7c260 100644 --- a/glass-easel/tests/tmpl/native_rendering.test.ts +++ b/glass-easel/tests/tmpl/native_rendering.test.ts @@ -58,11 +58,11 @@ describe('native rendering mode', () => { }, }) const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend) - expect(domHtml(elem)).toBe('
21
') + expect(domHtml(elem)).toBe('
21
') elem.setData({ c: 10, }) - expect(domHtml(elem)).toBe('
1110
') + expect(domHtml(elem)).toBe('
1110
') }) test('slot appending', () => { @@ -87,11 +87,11 @@ describe('native rendering mode', () => { }, }) const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend) - expect(domHtml(elem)).toBe('
cA
A') + expect(domHtml(elem)).toBe('
cA
A') elem.setData({ c: 'B', }) - expect(domHtml(elem)).toBe('
cB
B') + expect(domHtml(elem)).toBe('
cB
B') }) test('default template', () => { @@ -110,11 +110,11 @@ describe('native rendering mode', () => { }, }) const elem = glassEasel.Component.createWithContext('root', def.general(), domBackend) - expect(domHtml(elem)).toBe('123') + expect(domHtml(elem)).toBe('123') elem.setData({ c: 'ABC', }) - expect(domHtml(elem)).toBe('ABC') + expect(domHtml(elem)).toBe('ABC') }) test('event handling', () => { diff --git a/glass-easel/tests/tmpl/structure.test.ts b/glass-easel/tests/tmpl/structure.test.ts index 46836ef..acbfa8b 100644 --- a/glass-easel/tests/tmpl/structure.test.ts +++ b/glass-easel/tests/tmpl/structure.test.ts @@ -223,19 +223,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) const child = elem.getShadowRoot()!.getElementById('c')!.asInstanceOf(childComp)! - expect(domHtml(elem)).toBe('
A
') + expect(domHtml(elem)).toBe('
A
') matchElementWithDom(elem) child.setData({ cond1: false, cond2: true, }) - expect(domHtml(elem)).toBe('
C
') + expect(domHtml(elem)).toBe('
C
') matchElementWithDom(elem) child.setData({ cond1: false, cond2: false, }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) }) @@ -271,7 +271,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('
0
1
') + expect(domHtml(elem)).toBe('
0
1
') matchElementWithDom(elem) expect(ops).toEqual([ [-1, '10'], @@ -281,7 +281,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { elem.setData({ list: [20, 10], }) - expect(domHtml(elem)).toBe('
0
1
') + expect(domHtml(elem)).toBe('
0
1
') matchElementWithDom(elem) expect(ops).toEqual([]) ops.length = 0 @@ -289,7 +289,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { list: [30, 40, 50, 60], }) expect(domHtml(elem)).toBe( - '
0
1
2
3
', + '
0
1
2
3
', ) matchElementWithDom(elem) expect(ops).toEqual([ @@ -300,7 +300,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { elem.setData({ list: [50], }) - expect(domHtml(elem)).toBe('
0
') + expect(domHtml(elem)).toBe('
0
') matchElementWithDom(elem) expect(ops).toEqual([ [-2, '40'], @@ -354,7 +354,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { } } glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('1020') + expect(domHtml(elem)).toBe('1020') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([ @@ -371,9 +371,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { { k: 'e', v: 70 }, ], }) - expect(domHtml(elem)).toBe( - '3040506070', - ) + expect(domHtml(elem)).toBe('3040506070') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([ @@ -391,9 +389,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { { k: 'e', v: 70 }, ], }) - expect(domHtml(elem)).toBe( - '3060405070', - ) + expect(domHtml(elem)).toBe('3060405070') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([[-3, 'b:60']]) @@ -407,9 +403,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { { k: 'a', v: 70 }, ], }) - expect(domHtml(elem)).toBe( - '3040506070', - ) + expect(domHtml(elem)).toBe('3040506070') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([[-3, 'a:40']]) @@ -423,9 +417,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { { k: 'a', v: 70 }, ], }) - expect(domHtml(elem)).toBe( - '3040506070', - ) + expect(domHtml(elem)).toBe('3040506070') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([]) @@ -436,7 +428,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { { k: 'e', v: 90 }, ], }) - expect(domHtml(elem)).toBe('8090') + expect(domHtml(elem)).toBe('8090') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([ @@ -535,7 +527,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('
a
b
') + expect(domHtml(elem)).toBe('
a
b
') matchElementWithDom(elem) expect(ops).toEqual([ [-1, 'a:10'], @@ -545,7 +537,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { elem.setData({ list: { a: 20, b: 10 }, }) - expect(domHtml(elem)).toBe('
a
b
') + expect(domHtml(elem)).toBe('
a
b
') matchElementWithDom(elem) expect(ops).toEqual([]) ops.length = 0 @@ -558,7 +550,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(domHtml(elem)).toBe( - '
a
b
c
d
', + '
a
b
c
d
', ) matchElementWithDom(elem) expect(ops).toEqual([ @@ -569,7 +561,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { elem.setData({ list: { c: 50 }, }) - expect(domHtml(elem)).toBe('
c
') + expect(domHtml(elem)).toBe('
c
') matchElementWithDom(elem) expect(ops).toEqual([ [-2, 'b:40'], @@ -620,7 +612,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { } } glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('1020') + expect(domHtml(elem)).toBe('1020') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([ @@ -639,7 +631,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(domHtml(elem)).toBe( - '304050607080', + '304050607080', ) matchElementWithDom(elem) checkIndex() @@ -661,7 +653,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(domHtml(elem)).toBe( - '506070803040', + '506070803040', ) matchElementWithDom(elem) checkIndex() @@ -681,9 +673,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { f2: { k: 'b', v: 50 }, }, }) - expect(domHtml(elem)).toBe( - '1020304050', - ) + expect(domHtml(elem)).toBe('1020304050') matchElementWithDom(elem) checkIndex() expect(ops).toEqual([ @@ -704,7 +694,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(domHtml(elem)).toBe( - '10203040506070', + '10203040506070', ) matchElementWithDom(elem) checkIndex() @@ -726,7 +716,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(domHtml(elem)).toBe( - '605040302010', + '605040302010', ) matchElementWithDom(elem) checkIndex() @@ -750,7 +740,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }, }) expect(domHtml(elem)).toBe( - '8070605040302010', + '8070605040302010', ) matchElementWithDom(elem) checkIndex() @@ -800,7 +790,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { glassEasel.Component.createWithContext('root', def, testBackend), ) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('x') + expect(domHtml(elem)).toBe('x') matchElementWithDom(elem) expect(ops).toEqual([[-1, 'x']]) ops.length = 0 @@ -809,7 +799,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { s: 'abc', }) }) - expect(domHtml(elem)).toBe('abc') + expect(domHtml(elem)).toBe('abc') matchElementWithDom(elem) expect(ops).toEqual([ [-2, 'x'], @@ -823,7 +813,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { s: 'cab', }) }) - expect(domHtml(elem)).toBe('cab') + expect(domHtml(elem)).toBe('cab') matchElementWithDom(elem) ops.length = 0 execWithWarn(1, () => { @@ -877,29 +867,27 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { }) const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('012') + expect(domHtml(elem)).toBe('012') matchElementWithDom(elem) elem.spliceArrayDataOnPath(['n'], 3, 0, [3, 4]) elem.applyDataUpdates() - expect(domHtml(elem)).toBe('01234') + expect(domHtml(elem)).toBe('01234') matchElementWithDom(elem) elem.spliceArrayDataOnPath(['n'], 0, 0, [5, 6]) elem.applyDataUpdates() - expect(domHtml(elem)).toBe( - '5601234', - ) + expect(domHtml(elem)).toBe('5601234') matchElementWithDom(elem) elem.spliceArrayDataOnPath(['n'], 2, 3, [7, 8]) elem.applyDataUpdates() - expect(domHtml(elem)).toBe('567834') + expect(domHtml(elem)).toBe('567834') matchElementWithDom(elem) elem.spliceArrayDataOnPath(['n'], 0, 3, []) elem.applyDataUpdates() - expect(domHtml(elem)).toBe('834') + expect(domHtml(elem)).toBe('834') matchElementWithDom(elem) elem.spliceArrayDataOnPath(['n'], 1, 2, []) elem.applyDataUpdates() - expect(domHtml(elem)).toBe('8') + expect(domHtml(elem)).toBe('8') matchElementWithDom(elem) }) @@ -1339,12 +1327,12 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('
123
') + expect(domHtml(elem)).toBe('
123
') matchElementWithDom(elem) elem.setData({ d: '', }) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) }) @@ -1508,7 +1496,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { 'sub-comp': subComp, }, template: tmpl(` - + `), @@ -1516,17 +1504,17 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) elem.setData({ s: 'a', }) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) elem.setData({ s: 'b', }) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) }) @@ -1561,44 +1549,44 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const elem = glassEasel.Component.createWithContext('root', def, testBackend) const subElem = (elem.$.sub as glassEasel.GeneralComponent).asInstanceOf(subComp)! glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ b: 's', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ a: 's', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ b: '', c: '', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ c: 's', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ b: 's', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ a: 'a', b: 'b', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) subElem.setData({ c: '', }) - expect(domHtml(elem)).toBe('') + expect(domHtml(elem)).toBe('') matchElementWithDom(elem) }) @@ -1696,7 +1684,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) }) @@ -1729,14 +1717,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ classes: ['static', 'dynamic'], }) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ @@ -1744,15 +1732,13 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { extClass: ['a-class', 'dynamic'], }) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ extClass: 'static', }) - expect(domHtml(elem)).toBe( - '
', - ) + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) }) @@ -1788,21 +1774,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ dynamic: 'dynamic', }) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ dynamic: '', }) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) }) @@ -1849,19 +1835,19 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { dynamic1: '', dynamic2: '', }, - template: tmpl(``), + template: tmpl(``), }) const elem = glassEasel.Component.createWithContext('root', parent, testBackend) glassEasel.Element.pretendAttached(elem) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ dynamic1: 'dynamic', }) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) elem.setData({ @@ -1869,7 +1855,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { dynamic2: 'dynamic', }) expect(domHtml(elem)).toBe( - '
', + '
', ) matchElementWithDom(elem) }) @@ -1908,7 +1894,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { .general() const elem = glassEasel.Component.createWithContext('root', def, testBackend) glassEasel.Element.pretendAttached(elem) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) expect(ops).toBe(1) elem.setData({ @@ -1922,7 +1908,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => { elem.setData({ obj: { a: 'a2' }, }) - expect(domHtml(elem)).toBe('
') + expect(domHtml(elem)).toBe('
') matchElementWithDom(elem) expect(ops).toBe(3) }) From 8f7eba4fc2eaae2430f76584d79145c74abdfeaf Mon Sep 17 00:00:00 2001 From: LastLeaf Date: Wed, 31 Jul 2024 14:16:51 +0800 Subject: [PATCH 2/2] fix(adapter): match new core api --- .../src/backend.ts | 4 ++- glass-easel-miniprogram-adapter/src/space.ts | 8 +++-- .../tests/env.test.ts | 4 ++- .../tests/selector.test.ts | 32 +++++++++++-------- .../tests/space.test.ts | 15 ++++++--- .../tests/trait_behavior.test.ts | 5 ++- 6 files changed, 45 insertions(+), 23 deletions(-) diff --git a/glass-easel-miniprogram-adapter/src/backend.ts b/glass-easel-miniprogram-adapter/src/backend.ts index deb9795..c44d20b 100644 --- a/glass-easel-miniprogram-adapter/src/backend.ts +++ b/glass-easel-miniprogram-adapter/src/backend.ts @@ -78,7 +78,9 @@ export class Root { } const addStyleSheet = (comp: glassEasel.GeneralComponentDefinition) => { const { styleScope } = comp.getComponentOptions() - const path = codeSpace.getStyleSheet(comp.is) + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + const codeSpace = (comp.behavior.ownerSpace as any).__wxCodeSpace as CodeSpace | undefined + const path = codeSpace?.getStyleSheet(comp.is) if (path !== undefined) { backendContext.appendStyleSheetPath( path, diff --git a/glass-easel-miniprogram-adapter/src/space.ts b/glass-easel-miniprogram-adapter/src/space.ts index 67ed4e5..bdb60be 100644 --- a/glass-easel-miniprogram-adapter/src/space.ts +++ b/glass-easel-miniprogram-adapter/src/space.ts @@ -78,7 +78,9 @@ export class CodeSpace { private space: glassEasel.ComponentSpace private styleScopeManager: glassEasel.StyleScopeManager private staticConfigMap: { [path: string]: ComponentStaticConfig } - private styleSheetMap: { [path: string]: { url: string; styleScopeName: string | undefined } } + private styleSheetMap: { + [path: string]: { url: string | undefined; styleScopeName: string | undefined } + } private compiledTemplateMap: { [path: string]: glassEasel.template.ComponentTemplate } private waitingAliasMap: { [is: string]: string[] } /** @internal */ @@ -102,6 +104,8 @@ export class CodeSpace { globalCodeSpace?.space, globalCodeSpace?.space.styleScopeManager, ) + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + ;(this.space as any).__wxCodeSpace = this this.styleScopeManager = this.space.styleScopeManager this.staticConfigMap = Object.create(null) as { [path: string]: ComponentStaticConfig } this.styleSheetMap = Object.create(null) as { @@ -164,7 +168,7 @@ export class CodeSpace { * The URL should be recognized by the target backend. * The `path` should not contain the `.wxss` suffix. */ - addStyleSheet(path: string, styleSheetUrl: string, styleScopeName?: string) { + addStyleSheet(path: string, styleSheetUrl?: string, styleScopeName?: string) { this.styleSheetMap[path] = { url: styleSheetUrl, styleScopeName } } diff --git a/glass-easel-miniprogram-adapter/tests/env.test.ts b/glass-easel-miniprogram-adapter/tests/env.test.ts index 51a6309..984c5fb 100644 --- a/glass-easel-miniprogram-adapter/tests/env.test.ts +++ b/glass-easel-miniprogram-adapter/tests/env.test.ts @@ -95,11 +95,13 @@ describe('env', () => { expect(codeSpace.isMainSpace()).toBe(true) pluginCodeSpace1.addCompiledTemplate('inner-comp-1', tmpl('A')) + pluginCodeSpace1.addStyleSheet('inner-comp-1', undefined, 'c1') pluginCodeSpace1.componentEnv('inner-comp-1', ({ Component }) => { Component().register() }) pluginCodeSpace2.addCompiledTemplate('inner-comp-2', tmpl('B')) + pluginCodeSpace2.addStyleSheet('inner-comp-2', undefined, 'c2') pluginCodeSpace2.componentEnv('inner-comp-2', ({ Component }) => { Component().register() }) @@ -135,7 +137,7 @@ describe('env', () => { const ab = env.associateBackend(backend) const root = ab.createRoot('body', codeSpace, 'path/to/comp') expect(domHtml(root.getComponent())).toBe( - 'AAB', + 'AAB', ) }) }) diff --git a/glass-easel-miniprogram-adapter/tests/selector.test.ts b/glass-easel-miniprogram-adapter/tests/selector.test.ts index 489bc1a..0462f70 100644 --- a/glass-easel-miniprogram-adapter/tests/selector.test.ts +++ b/glass-easel-miniprogram-adapter/tests/selector.test.ts @@ -1,6 +1,7 @@ import * as glassEasel from 'glass-easel' import { tmpl } from './base/env' import { MiniProgramEnv } from '../src' +import { StyleIsolation } from '../src/types' const domHtml = (elem: glassEasel.Element): string => { const domElem = elem.getBackendElement() as unknown as Element @@ -14,6 +15,7 @@ describe('selector query', () => { codeSpace.addComponentStaticConfig('child/comp', { component: true, + styleIsolation: StyleIsolation.Shared, }) codeSpace.addCompiledTemplate('child/comp', tmpl('{{a}}')) // eslint-disable-next-line arrow-body-style @@ -72,17 +74,18 @@ describe('selector query', () => { const ab = env.associateBackend() const root = ab.createRoot('body', codeSpace, 'path/to/comp') glassEasel.Element.pretendAttached(root.getComponent()) - expect(domHtml(root.getComponent())).toBe( - '
456789
', - ) + expect(domHtml(root.getComponent())).toBe('
456789
') }) test('select single component (with custom export)', () => { const env = new MiniProgramEnv() const codeSpace = env.createCodeSpace('', true) - codeSpace.addComponentStaticConfig('child1/comp', { component: true }) - codeSpace.addComponentStaticConfig('child2/comp', { component: true }) + codeSpace.addComponentStaticConfig('child1/comp', { + component: true, + styleIsolation: StyleIsolation.Shared, + }) + codeSpace.addComponentStaticConfig('child2/comp', { component: false }) codeSpace.addCompiledTemplate('child1/comp', tmpl('{{a}}')) codeSpace.addCompiledTemplate('child2/comp', tmpl('{{a}}')) @@ -161,17 +164,18 @@ describe('selector query', () => { const ab = env.associateBackend() const root = ab.createRoot('body', codeSpace, 'path/to/comp') glassEasel.Element.pretendAttached(root.getComponent()) - expect(domHtml(root.getComponent())).toBe( - '
456789
', - ) + expect(domHtml(root.getComponent())).toBe('
456789
') }) test('select single component (with custom export on behavior)', () => { const env = new MiniProgramEnv() const codeSpace = env.createCodeSpace('', true) - codeSpace.addComponentStaticConfig('child1/comp', { component: true }) - codeSpace.addComponentStaticConfig('child2/comp', { component: true }) + codeSpace.addComponentStaticConfig('child1/comp', { + component: true, + styleIsolation: StyleIsolation.Shared, + }) + codeSpace.addComponentStaticConfig('child2/comp', { component: false }) codeSpace.addCompiledTemplate('child1/comp', tmpl('{{a}}')) codeSpace.addCompiledTemplate('child2/comp', tmpl('{{a}}')) @@ -255,9 +259,7 @@ describe('selector query', () => { const ab = env.associateBackend() const root = ab.createRoot('body', codeSpace, 'path/to/comp') glassEasel.Element.pretendAttached(root.getComponent()) - expect(domHtml(root.getComponent())).toBe( - '
456789
', - ) + expect(domHtml(root.getComponent())).toBe('
456789
') }) test('select all components', () => { @@ -266,6 +268,7 @@ describe('selector query', () => { codeSpace.addComponentStaticConfig('child/comp', { component: true, + styleIsolation: StyleIsolation.Shared, }) codeSpace.addCompiledTemplate('child/comp', tmpl('{{a}}')) // eslint-disable-next-line arrow-body-style @@ -279,6 +282,7 @@ describe('selector query', () => { codeSpace.addComponentStaticConfig('child/comp2', { component: true, + styleIsolation: StyleIsolation.Shared, }) codeSpace.addCompiledTemplate('child/comp2', tmpl('{{a}}')) // eslint-disable-next-line arrow-body-style @@ -322,7 +326,7 @@ describe('selector query', () => { const root = ab.createRoot('body', codeSpace, 'path/to/comp') glassEasel.Element.pretendAttached(root.getComponent()) expect(domHtml(root.getComponent())).toBe( - '
012
', + '
012
', ) }) diff --git a/glass-easel-miniprogram-adapter/tests/space.test.ts b/glass-easel-miniprogram-adapter/tests/space.test.ts index b96a60f..2328b79 100644 --- a/glass-easel-miniprogram-adapter/tests/space.test.ts +++ b/glass-easel-miniprogram-adapter/tests/space.test.ts @@ -214,6 +214,7 @@ describe('define', () => { `), ) + codeSpace.addStyleSheet('comp/a', undefined, 'A') codeSpace.componentEnv('comp/a', ({ Component }) => { Component().register() }) @@ -227,6 +228,7 @@ describe('define', () => { B `), ) + codeSpace.addStyleSheet('comp/b', undefined, 'B') codeSpace.componentEnv('comp/b', ({ Component }) => { Component().register() }) @@ -250,7 +252,7 @@ describe('define', () => { const ab = env.associateBackend() const root = ab.createRoot('body', codeSpace, 'path/to/comp') expect(domHtml(root.getComponent())).toBe( - 'B', + 'B', ) }) @@ -267,6 +269,7 @@ describe('define', () => {
A
`), ) + codeSpace.addStyleSheet('comp/a', undefined, 'A') codeSpace.componentEnv('comp/a', ({ Component }) => { Component().register() }) @@ -286,13 +289,14 @@ describe('define', () => { `), ) + codeSpace.addStyleSheet('path/to/comp', undefined, 'COMP') codeSpace.componentEnv('path/to/comp', ({ Component }) => { Component().register() }) const ab = env.associateBackend() const root = ab.createRoot('body', codeSpace, 'path/to/comp') - expect(domHtml(root.getComponent())).toBe('
A
') + expect(domHtml(root.getComponent())).toBe('
A
') codeSpace.addComponentStaticConfig('comp/b', { component: true, @@ -303,11 +307,12 @@ describe('define', () => { B `), ) + codeSpace.addStyleSheet('comp/b', undefined, 'B') codeSpace.componentEnv('comp/b', ({ Component }) => { Component().register() }) - expect(domHtml(root.getComponent())).toBe('B') + expect(domHtml(root.getComponent())).toBe('B') }) test('options pureDataPattern (js)', () => { @@ -1009,6 +1014,7 @@ describe('define', () => {
{{count}}
`), ) + codeSpace.addStyleSheet('child/list', undefined, 'LIST') // eslint-disable-next-line arrow-body-style const listDef = codeSpace.componentEnv('child/list', ({ Component }) => { return Component() @@ -1031,6 +1037,7 @@ describe('define', () => { codeSpace.addComponentStaticConfig('child/item', { component: true, }) + codeSpace.addStyleSheet('child/item', undefined, 'ITEM') // eslint-disable-next-line arrow-body-style const itemDef = codeSpace.componentEnv('child/item', ({ Component }) => { return Component() @@ -1069,7 +1076,7 @@ describe('define', () => { const root = ab.createRoot('body', codeSpace, 'path/to/comp') glassEasel.Element.pretendAttached(root.getComponent()) expect(domHtml(root.getComponent())).toBe( - '
2
', + '
2
', ) }) diff --git a/glass-easel-miniprogram-adapter/tests/trait_behavior.test.ts b/glass-easel-miniprogram-adapter/tests/trait_behavior.test.ts index 4facfb2..34f930a 100644 --- a/glass-easel-miniprogram-adapter/tests/trait_behavior.test.ts +++ b/glass-easel-miniprogram-adapter/tests/trait_behavior.test.ts @@ -1,6 +1,7 @@ import * as glassEasel from 'glass-easel' import { tmpl } from './base/env' import { MiniProgramEnv } from '../src' +import { StyleIsolation } from '../src/types' const domHtml = (elem: glassEasel.Element): string => { const domElem = elem.getBackendElement() as unknown as Element @@ -60,6 +61,7 @@ describe('trait behavior', () => { codeSpace.addComponentStaticConfig('child/list', { component: true, + styleIsolation: StyleIsolation.Shared, }) codeSpace.addCompiledTemplate( 'child/list', @@ -93,6 +95,7 @@ describe('trait behavior', () => { codeSpace.addComponentStaticConfig('child/item', { component: true, + styleIsolation: StyleIsolation.Shared, }) codeSpace.addCompiledTemplate('child/item', tmpl('{{a}}')) // eslint-disable-next-line arrow-body-style @@ -138,7 +141,7 @@ describe('trait behavior', () => { const root = ab.createRoot('body', codeSpace, 'path/to/comp') glassEasel.Element.pretendAttached(root.getComponent()) expect(domHtml(root.getComponent())).toBe( - '
2
23', + '
2
23', ) }) })