glass-easel-miniprogram-adapter 0.8.2 → 0.10.0

package/src/builder/behavior_builder.ts

@@ -43,6 +43,7 @@ export class BehaviorBuilder<
   TExtraThisFields
 > {
   private _$definitionFilter: DefinitionFilter | undefined
+  private _$chainingFilter?: ChainingFilterFunc<any, any>
 
   /** @internal */
   static create(codeSpace: CodeSpace): BehaviorBuilder {
@@ -74,7 +75,7 @@ export class BehaviorBuilder<
     >,
     TChainingFilter
   > {
-    this._$.chainingFilter(func as any)
+    this._$chainingFilter = func
     return this as any
   }
 
@@ -103,6 +104,9 @@ export class BehaviorBuilder<
     this._$parents.push(behavior as GeneralBehavior)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     this._$ = this._$.behavior(behavior._$)
+    if (behavior._$chainingFilter) {
+      return behavior._$chainingFilter(this as any)
+    }
     return this as any
   }
 
@@ -284,6 +288,7 @@ export class BehaviorBuilder<
       this._$.registerBehavior(),
       this._$parents,
       this._$definitionFilter,
+      this._$chainingFilter,
       this._$export,
     )
   }

package/src/builder/component_builder.ts

@@ -125,6 +125,9 @@ export class ComponentBuilder<
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       this._$export = behavior._$export as any
     }
+    if (behavior._$chainingFilter) {
+      return behavior._$chainingFilter(this as any)
+    }
     return this as any
   }
 

package/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 {
@@ -117,6 +121,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 }
   }
 
@@ -163,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 }
   }
 
@@ -262,6 +267,7 @@ export class CodeSpace {
     const ret: glassEasel.ComponentOptions = {
       idPrefixGenerator: guid,
       multipleSlots: options?.multipleSlots,
+      dynamicSlots: options?.dynamicSlots,
       pureDataPattern,
       virtualHost: options?.virtualHost,
       styleScope,

package/src/types.ts

@@ -28,6 +28,7 @@ export type ComponentStaticConfig = {
 
 export type ComponentDefinitionOptions = {
   multipleSlots?: boolean
+  dynamicSlots?: boolean
   pureDataPattern?: RegExp
   virtualHost?: boolean
   dataDeepCopy?: DeepCopyKind

package/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(
-      '<c-a is="inner-comp-1">A</c-a><c-aa is="inner-comp-1">A</c-aa><i-a></i-a><i-b></i-b><c-b is="inner-comp-2">B</c-b>',
+      '<c-a wx-host="c1">A</c-a><c-aa wx-host="c1">A</c-aa><i-a></i-a><i-b></i-b><c-b wx-host="c2">B</c-b>',
     )
   })
 })

package/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(
-      '<div><child is="child/comp">456</child><child is="child/comp">789</child></div>',
-    )
+    expect(domHtml(root.getComponent())).toBe('<div><child>456</child><child>789</child></div>')
   })
 
   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(
-      '<div><child1 is="child1/comp">456</child1><child2 is="child2/comp">789</child2></div>',
-    )
+    expect(domHtml(root.getComponent())).toBe('<div><child1>456</child1><child2>789</child2></div>')
   })
 
   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(
-      '<div><child1 is="child1/comp">456</child1><child2 is="child2/comp">789</child2></div>',
-    )
+    expect(domHtml(root.getComponent())).toBe('<div><child1>456</child1><child2>789</child2></div>')
   })
 
   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(
-      '<div><child is="child/comp" class="c">0</child><child is="child/comp" class="c">1</child><child-b is="child/comp2" class="c">2</child-b></div>',
+      '<div><child class="c">0</child><child class="c">1</child><child-b class="c">2</child-b></div>',
     )
   })
 

package/tests/space.test.ts

@@ -214,6 +214,7 @@ describe('define', () => {
       <c />
     `),
     )
+    codeSpace.addStyleSheet('comp/a', undefined, 'A')
     codeSpace.componentEnv('comp/a', ({ Component }) => {
       Component().register()
     })
@@ -227,6 +228,7 @@ describe('define', () => {
       <span>B</span>
     `),
     )
+    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(
-      '<a is="comp/a"><c is="comp/b"><span>B</span></c></a>',
+      '<a wx-host="A"><c wx-host="B"><span>B</span></c></a>',
     )
   })
 
@@ -267,6 +269,7 @@ describe('define', () => {
       <div>A</div>
     `),
     )
+    codeSpace.addStyleSheet('comp/a', undefined, 'A')
     codeSpace.componentEnv('comp/a', ({ Component }) => {
       Component().register()
     })
@@ -286,13 +289,14 @@ describe('define', () => {
       <a />
     `),
     )
+    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 is="comp/a"><div>A</div></a>')
+    expect(domHtml(root.getComponent())).toBe('<a wx-host="A"><div>A</div></a>')
 
     codeSpace.addComponentStaticConfig('comp/b', {
       component: true,
@@ -303,11 +307,12 @@ describe('define', () => {
       <span>B</span>
     `),
     )
+    codeSpace.addStyleSheet('comp/b', undefined, 'B')
     codeSpace.componentEnv('comp/b', ({ Component }) => {
       Component().register()
     })
 
-    expect(domHtml(root.getComponent())).toBe('<a is="comp/b"><span>B</span></a>')
+    expect(domHtml(root.getComponent())).toBe('<a wx-host="B"><span>B</span></a>')
   })
 
   test('options pureDataPattern (js)', () => {
@@ -748,7 +753,7 @@ describe('define', () => {
       .chainingFilter<TAdd, TRemove>((chain) => {
         const oldData = chain.data.bind(chain)
         const newData = function () {
-          oldData(() => ({
+          return oldData(() => ({
             a: 123,
           }))
         }
@@ -1009,6 +1014,7 @@ describe('define', () => {
       <div>{{count}}</div><slot />
     `),
     )
+    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(
-      '<list is="child/list"><div>2</div><item is="child/item"></item><item is="child/item"></item></list>',
+      '<list wx-host="LIST"><div>2</div><item wx-host="ITEM"></item><item wx-host="ITEM"></item></list>',
     )
   })
 

package/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(
-      '<list is="child/list"><div>2</div><item is="child/item">2</item><item is="child/item">3</item></list>',
+      '<list><div>2</div><item>2</item><item>3</item></list>',
     )
   })
 })