Merge pull request #185 from wechat-miniprogram/feat-host-on-style-scope

feat: new host style support based on style scope
wechat-miniprogram · Aug 1, 2024 · bf2ab90 · bf2ab90
2 parents ee90b13 + 8f7eba4
commit bf2ab90
Show file tree

Hide file tree

Showing 26 changed files with 356 additions and 304 deletions.
diff --git 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
@@ -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 }
   }
 

diff --git 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(
-      '<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>',
     )
   })
 })
diff --git 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(
-      '<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>',
     )
   })
 

diff --git a/glass-easel-miniprogram-adapter/tests/space.test.ts b/glass-easel-miniprogram-adapter/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)', () => {
@@ -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>',
     )
   })
 

diff --git 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(
-      '<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>',
     )
   })
 })
diff --git 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
@@ -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
@@ -55,15 +55,15 @@ impl StyleSheetTransformer {
         s: &str,
         class_prefix: Option<String>,
         rpx_ratio: f32,
-        host_is: Option<String>,
+        convert_host: bool,
     ) -> Self {
         let mut sst = crate::StyleSheetTransformer::from_css(
             name,
             s,
             StyleSheetOptions {
                 class_prefix,
                 rpx_ratio,
-                host_is,
+                convert_host,
                 ..Default::default()
             },
         );