Glass-Easel

https://github.com/wechat-miniprogram/glass-easel
Admin
Glass-Easel is a component-based UI framework for WeChat MiniProgram, enabling declarative UI...
Tokens:51,416
Snippets:207
Trust Score:8.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Glass-Easel Build Configuration Example

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/build_args.md

Example of setting the GLASS_EASEL_ARGS environment variable to build Glass-Easel with specific modes and configurations. This example enables 'all' and 'domlike-global' modes while disabling code minimization.

```bash
all domlike-global --no-minimize
```

--------------------------------

### Install Dependencies

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-adapter/README.md

Installs the necessary dependencies for the glass-easel-miniprogram-adapter project using npm. Requires Node.js toolchain to be installed globally.

```sh
npm install
```

--------------------------------

### Install Glass-Easel Packages

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/README.md

Demonstrates how to install the core 'glass-easel' package and the development dependency 'glass-easel-template-compiler' using npm.

```sh
npm install --save glass-easel
npm install --save-dev glass-easel-template-compiler
```

--------------------------------

### Install Glass-Easel and Template Compiler

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/README-zh_CN.md

Installs the core Glass-Easel package and the template compiler development dependency using npm.

```sh
npm install --save glass-easel
npm install --save-dev glass-easel-template-compiler
```

--------------------------------

### Build WebAssembly for Node.js

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-template-compiler/README.md

Builds the WebAssembly binary for the glass-easel-template-compiler targeting Node.js using wasm-pack. Requires a Rust toolchain and wasm-pack to be installed.

```sh
wasm-pack build glass-easel-template-compiler --target nodejs --out-dir pkg-nodejs
```

--------------------------------

### JavaScript Custom Template Engine Example

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/template_engine.md

This JavaScript code demonstrates the structure of a custom template engine for Glass-Easel components. It includes classes for the engine, template, and template instance, along with methods for initialization and updates. The example also shows how to register the custom template engine with a component definition.

```javascript
class MyTemplateEngine {
  create(rootBehavior, options) {
    behavior.getTemplate() // 组件的 template 字段内容
    return new MyTemplate()
  }
}

class MyTemplate {
  createInstance(component) {
    return new MyTemplateInstance(component)
  }
}

class MyTemplateInstance {
  constructor(component) {
    this.shadowRoot = ShadowRoot.createShadowRoot(component)
  }

  initValues(data) {
    // 组件被创建，初始数据是 data
  }

  updateValues(data, changes) {
    // 组件更新，新的数据是 data ，变更内容描述在 changes 中
  }
}

export const myComponent = componentSpace.defineComponent({
  options: {
    templateEngine: MyTemplateEngine,
  },
  template: {
    // 这部分内容由 MyTemplateEngine 来处理
  },
})
```

--------------------------------

### Build WebAssembly Binary with wasm-pack

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-stylesheet-compiler/README.md

Builds the WebAssembly binary for the glass-easel-stylesheet-compiler using wasm-pack, targeting Node.js and outputting to the 'pkg-nodejs' directory. Requires a Rust toolchain and wasm-pack to be installed.

```sh
wasm-pack build glass-easel-stylesheet-compiler --target nodejs --out-dir pkg-nodejs
```

--------------------------------

### Build WebAssembly for Browser (No Modules)

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-template-compiler/README.md

Builds the WebAssembly binary for the glass-easel-template-compiler targeting simple browser usage without module support, using wasm-pack. Requires a Rust toolchain and wasm-pack to be installed.

```sh
wasm-pack build glass-easel-template-compiler --target no-modules --out-dir pkg-web
```

--------------------------------

### Custom Bootstrap Configuration

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-webpack-plugin/README.md

This example shows how to enable custom bootstrapping for the GlassEaselMiniprogramWebpackPlugin by setting the `customBootstrap` option to `true`. This is useful when the backend environment is not DOM-based or when manual bootstrapping is preferred.

```js
new GlassEaselMiniprogramWebpackPlugin({
  customBootstrap: true,
})
```

--------------------------------

### Define Methods using Chaining API

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/method.md

Illustrates defining component methods using the `methods` function within the Chaining API. The example shows adding the `aPlusB` method and calling it in the `attached` lifecycle.

```javascript
export const myComponent = componentSpace.define()
  .methods({
    aPlusB(a, b) {
      return a + b
    },
  })
  .lifetime('attached', function () {
    this.aPlusB(1, 2) === 3 // true
  })
  .registerComponent()
```

--------------------------------

### Create Media Query Observer

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Creates a MediaQueryObserver to monitor changes in media query states. The observer is triggered once upon starting to listen, providing initial media query state information. This is a suggestive interface and not directly called by glass-easel.

```javascript
Element#createMediaQueryObserver(...)
```

--------------------------------

### Glass-Easel Node Tree Manipulation Example

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/tree/node_tree_modification.md

This JavaScript example demonstrates how to manipulate the node tree within a Glass-Easel component. It shows how to get a node, create a new node, set it to auto-destroy on detach, append it to the tree, and then remove it.

```javascript
export const myComponent = componentSpace.defineComponent({
  template: compileTemplate(`
    <div id="wrapper" />
  `),
  lifetimes: {
    attached() {
      // 获得 wrapper 节点
      const wrapper = this.shadowRoot.getElementById('#wrapper')
      // 创建一个新的 span 节点
      const span = this.shadowRoot.createNativeNode('span')
      // 当 span 被移出时自动销毁它
      span.destroyBackendElementOnDetach()
      // 将 span 插入到 wrapper 下
      wrapper.appendChild(span)
      // 将 span 移除出来
      wrapper.removeChildAt(0)
    },
  },
})
```

--------------------------------

### Build Documentation

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-adapter/README.md

Generates documentation for the glass-easel-miniprogram-adapter project. This command is used to create or update the project's documentation files.

```sh
npm run doc
```

--------------------------------

### Build Project

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-adapter/README.md

Builds the glass-easel-miniprogram-adapter project. This command compiles the project's source code.

```sh
npm run build
```

--------------------------------

### Run Tests

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-adapter/README.md

Executes the test suite for the glass-easel-miniprogram-adapter project. This command runs all defined tests to ensure the project's functionality.

```sh
npm test
```

--------------------------------

### Splice Remove Nodes

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Removes a specified number of nodes starting from a 'before' node.

```javascript
Element#spliceRemove(before: Element, deleteCount: number): void
```

--------------------------------

### Define Component Space and Component

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/component_space.md

Demonstrates how to create a new component space and define a 'hello-world' component within it using the `ComponentSpace` and `defineComponent` methods.

```javascript
const componentSpace = new glassEasel.ComponentSpace()

export const helloWorld = componentSpace.defineComponent({
  is: 'hello-world',
})
```

--------------------------------

### Get Element From Point

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Retrieves the node at the specified coordinates. This is a suggestive interface and not directly called by glass-easel.

```javascript
async Context#elementFromPoint(left: number, top: number): Node | undefined
```

--------------------------------

### 编译 Glass-Easel 模板

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/beginning.md

使用 `glass-easel-template-compiler` 将 WXML 模板字符串编译成组件可用的对象。此方法通过 WebAssembly 引入编译器，并返回编译后的模板内容。

```javascript
import { TmplGroup } from 'glass-easel-template-compiler'
const compileTemplate = (src: string) => {
  const group = new TmplGroup()
  group.addTmpl('', src)
  const genObjectSrc = `return ${group.getTmplGenObjectGroups()}`
  group.free()
  const genObjectGroupList = (new Function(genObjectSrc))() as { [key: string]: any }
  return {
    content: genObjectGroupList[''],
  }
}
```

--------------------------------

### Get Focused Node

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Retrieves the currently focused node. This is a suggestive interface and not directly called by glass-easel.

```javascript
async Context#getFocusedNode(): Node | undefined
```

--------------------------------

### Get Shadow Root

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

For component nodes, returns its ShadowRootContext; otherwise, returns undefined. This method is only effective in Shadow Mode.

```javascript
Element#getShadowRoot(): ShadowRootContext | undefined
```

--------------------------------

### Get Element Computed Styles

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Retrieves the computed styles for a node, including properties, their values, and disabled/invalid states. This is a suggestive interface.

```typescript
async Element#getAllComputedStyles(): { properties: CSSProperty[] }
```

--------------------------------

### Get Element Context

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Retrieves the context object associated with a node. This is a suggestive interface, meaning GlassEasel itself does not call it, but other modules might.

```typescript
async Element#getContext(): unknown
```

--------------------------------

### Build Native Binary

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-template-compiler/README.md

Builds a release-optimized native binary for the glass-easel-template-compiler using Cargo. This command compiles the Rust code directly.

```sh
cargo build --release
```

--------------------------------

### 使用 init 响应事件 (JavaScript)

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/event.md

在 `init` 函数中使用 `listener` 包裹响应函数来处理事件，这在 TypeScript 中可以方便地指定事件 `detail` 的数据类型。

```javascript
export const myComponent = componentSpace.define()
  .template(compileTemplate(`
    <child catch:customEvent="childEvent" />
  `))
  .init(function ({ method }) {
    const childEvent = listener(({ detail }) => {
      detail.someData === 'data' // true
    })
    return { childEvent }
  })
  .registerComponent()
```

```typescript
.init(function ({ method }) {
  const childEvent = listener<{ someData: string }>(({ detail }) => {
    detail.someData === 'data' // true
  })
  return { childEvent }
})
```

--------------------------------

### Get Element Matched CSS Rules

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Retrieves the CSS rules matched by a node, including inline rules and properties. This is a suggestive interface.

```typescript
async Element#getMatchedRules(): { inline: CSSProperty[], rules: CSSRule[] }
```

--------------------------------

### 定义 Glass-Easel 组件

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/beginning.md

使用 JavaScript 或 TypeScript 定义一个 Glass-Easel 组件。这包括组件的空间、模板、数据以及其他配置。示例展示了如何创建一个包含简单文本绑定的 'hello-world' 组件。

```javascript
// hello-world.js
import * as glassEasel from 'glass-easel'

// 定义一个组件空间
const componentSpace = new glassEasel.ComponentSpace()

// 组件模板
const template = `
  <div class="blue">
    <span>{{ hello }}</span>
  </div>
`

// 定义组件
export const helloWorld = componentSpace.defineComponent({
  // 组件所使用的模板
  template: compileTemplate(template),
  // 用在组件模板上的数据
  data: {
    hello: 'Hello world!'
  },
})
```

--------------------------------

### Get Element Bounding Rectangle

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Obtains the bounding rectangle area of a node. If the node has no layout information, it returns zero values. This is a suggestive interface.

```typescript
async Element#getBoundingClientRect(): { left: number, top: number, width: number, height: number }
```

--------------------------------

### List Rendering with Key for Performance

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/template.md

Explains the use of `wx:key` for optimizing list rendering performance in Glass-Easel, especially for insertions or deletions in the middle of a list. It details key selection criteria and limitations.

```xml
<block wx:for="{{ arr }}" wx:key="id">
  <div>姓名：{{ item.name }}</div>
</block>
```

--------------------------------

### List Rendering with wx:for

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/template.md

Shows how to render lists of data using the `wx:for` directive in Glass-Easel. It explains how to access item data and index, and how to customize these variables.

```xml
<div wx:for="{{ arr }}">数组的第 {{ index }} 项是 {{ item }}</div>
```

```xml
<block wx:for="{{ arr }}">
  <div>数组的第 {{ index }} 项是 {{ item }}</div>
</block>
```

```xml
<block wx:for="{{ arr }}" wx:for-index="i" wx:for-item="t">
  <div>数组的第 {{ i }} 项是 {{ t }}</div>
</block>
```

--------------------------------

### Create Intersection Observer for Element

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Creates an IntersectionObserver to monitor changes in intersection status. The listener is triggered once at the start to provide initial intersection state. This is a suggestive interface.

```typescript
Element#createIntersectionObserver(...)
```

--------------------------------

### Get Element Scroll Position

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Retrieves the internal scroll position and dimensions of a node. If the node is not scrollable, it returns zero scroll positions and its own dimensions. This is a suggestive interface.

```typescript
async Element#getScrollPosition(): { scrollLeft: number, scrollTop: number, scrollWidth: number, scrollHeight: number }
```

--------------------------------

### Define Methods within init using init API

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/method.md

Shows how to define methods, such as `aPlusB`, using the `method` utility within the `init` function of the Chaining API. This approach allows methods to be registered and accessed via `this` in lifecycle hooks.

```javascript
export const myComponent = componentSpace.define()
  .init(function ({ lifetime, method }) {
    const aPlusB = method((a, b) => {
      return a + b
    })
    lifetime('attached', function () {
      this.aPlusB(1, 2) === 3 // true
    })
    // 注意 method 需要返回
    return { aPlusB }
  })
  .registerComponent()
```

--------------------------------

### Single Slot in Glass-Easel

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/interaction/slot.md

Demonstrates how a child component uses a single `<slot />` to render content provided by its parent. The example shows the definition of both the child and parent components.

```javascript
export const childComponent = componentSpace.defineComponent({
  template: compileTemplate(`
    <div>
      <slot />
    </div>
  `)
})
export const myComponent = componentSpace.defineComponent({
  using: {
    child: childComponent,
  },
  template: compileTemplate(`
    <div>
      <child>
        <div class="a" />
      </child>
    </div>
  `)
})
```

--------------------------------

### 事件节点标记 (XML/JavaScript)

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/event.md

在 `wx:for` 列表中，可以使用 `mark:` 为节点添加标记，以便在事件响应函数中获取列表索引等信息。

```xml
<block wx:for="{{ list }}">
  <child mark:listIndex="{{ index }}" bind:customEvent="childEvent" />
</block>

<block wx:for="{{ list }}">
  <div mark:listIndex="{{ index }}">
    <child bind:customEvent="childEvent" />
  </div>
</block>
```

```javascript
childEvent({ mark }) {
  mark.listIndex // 列表中的 index
}
```

--------------------------------

### CSS with Class Prefix for Style Isolation

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/styling/style_isolation.md

Example of CSS rules with a prefix (`my-prefix--`) to ensure styles are scoped to a specific component. This is a prerequisite for using style scopes in Glass-Easel.

```css
.my-prefix--header {
  font-size: 1.5em;
}
.my-prefix--footer {
  font-size: 0.9em;
}
```

--------------------------------

### Configure GlassEaselMiniprogramWebpackPlugin

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-webpack-plugin/README.md

This code demonstrates how to configure the GlassEaselMiniprogramWebpackPlugin in Webpack. It specifies the mini-program-like directory structure to be compiled, a pattern for resource files to be copied, and the default entry point for the mini-program.

```js
plugins: [
  new GlassEaselMiniprogramWebpackPlugin({
    path: path.join(__dirname, 'src'),
    resourceFilePattern: /\.(jpg|jpeg|png|gif|html)$/,
    defaultEntry: 'pages/index/index',
  }),
]
```

--------------------------------

### Dynamic Slots in Glass-Easel (Basic)

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/interaction/slot.md

Illustrates the use of dynamic slots in Glass-Easel, enabled by the `dynamicSlots` option. This allows `<slot />` nodes to be repeated within a list, as shown in the example with a `wx:for` loop.

```javascript
export const childComponent = componentSpace.defineComponent({
  options: {
    dynamicSlots: true,
  },
  template: compileTemplate(`
    <block wx:for="{{ list }}">
      <slot />
    </block>
  `),
  data: {
    list: ['A', 'B', 'C'],
  },
})
export const myComponent = componentSpace.defineComponent({
  using: {
    child: childComponent,
  },
  template: compileTemplate(`
    <div>
      <child>
        <div class="a" />
      </child>
    </div>
  `)
})
```

--------------------------------

### Manual Page Loading with Custom Bootstrap

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-webpack-plugin/README.md

This JavaScript code demonstrates how to manually load a mini-program page when using the custom bootstrap feature. It involves importing necessary components from the plugin-generated module, creating a backend context, initializing the backend, and attaching the created root component to the document body.

```js
import * as glassEasel from 'glass-easel'
import { codeSpace, initWithBackend, registerGlobalEventListener } from './src' // import the plugin-generated code

// create the backend context
const backendContext = new glassEasel.CurrentWindowBackendContext() // or another backend context
registerGlobalEventListener(backendContext)
const ab = initWithBackend(backendContext)

// create a mini-program page
const root = ab.createRoot(
  'glass-easel-root', // the tag name of the mount point
  codeSpace,
  'pages/index/index', // the mini-program page to load
)

// insert the page into backend
// (this step is backend-related - if the backend is not DOM, refer to the backend documentation)
const placeholder = document.createElement('span')
document.body.appendChild(placeholder)
root.attach(
  document.body as unknown as glassEasel.GeneralBackendElement,
  placeholder as unknown as glassEasel.GeneralBackendElement,
)
```

--------------------------------

### Splice Remove Slot Nodes

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Modifies the slot content of the current node by deleting a specified number of nodes starting from 'before'. The current node must be a slot node. This is only effective in Shadow Mode.

```javascript
Element#spliceRemoveSlotNodes(before: number, deleteCount: number)
```

--------------------------------

### Build Release Binary with Cargo

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-stylesheet-compiler/README.md

Builds the release version of the glass-easel-stylesheet-compiler using Cargo. This command compiles the Rust project in release mode for optimized performance.

```sh
cargo build --release
```

--------------------------------

### Splice Before and Insert List

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Deletes a specified number of nodes starting from a 'before' node and inserts all nodes from a 'list' at that position. The 'list' is a fragment node that will be cleared but may be reused. Inserted nodes are guaranteed to have no parent.

```javascript
Element#spliceBefore(before: Element, deleteCount: number, list: Element): void
```

--------------------------------

### JavaScript Interface for StyleSheetTransformer

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-stylesheet-compiler/README.md

Demonstrates how to use the StyleSheetTransformer class from the 'glass-easel-stylesheet-compiler' package in JavaScript. It shows how to instantiate the transformer with file path, content, class prefix, and rpx ratio, and how to retrieve the compiled CSS and source map.

```javascript
const { StyleSheetTransformer } = require('glass-easel-stylesheet-compiler')

// convert a CSS file
const rpxRatio = 750
const sst = new StyleSheetTransformer(PATH, CONTENT, CLASS_PREFIX, rpxRatio)

// get the CSS output
const ss = sst.getContent()

// get the source map if needed
sst.toSourceMap()

// free it if the source map is not required
sst.free()
```

--------------------------------

### CSS for External Style Class

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/styling/external_class.md

This CSS snippet shows an example of a style rule that would be applied to the 'some-class' when used as an external style class in a WeChat Mini Program component.

```css
.some-class {
  /* ... */
}
```

--------------------------------

### Glass-Easel: Query Node by ID

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/tree/selector.md

Demonstrates how to define a Glass-Easel component and use `querySelector` within the `attached` lifecycle hook to find a specific element by its ID. The example retrieves a span with the ID 'the-id' and modifies its text content.

```javascript
export const myComponent = componentSpace.defineComponent({
  template: compileTemplate(`
    <div>
      <span id="the-id">Some Text</span>
    </div>
  `),
  lifetimes: {
    attached() {
      // 获取 id="the-id" 的节点
      const span = this.shadowRoot.querySelector('#the-id')
      span.childNodes[0].textContent = 'Some Text'
    },
  },
})
```

--------------------------------

### Define Methods using Definition API

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/method.md

Demonstrates how to define methods like `aPlusB` directly within the `methods` object when using the Definition API for component creation. It also shows how to call these methods within the `attached` lifecycle hook.

```javascript
export const myComponent = componentSpace.defineComponent({
  methods: {
    aPlusB(a, b) {
      return a + b
    },
  },
  lifetimes: {
    attached() {
      this.aPlusB(1, 2) === 3 // true
    },
  },
})
```

--------------------------------

### Rendering and Node Creation

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Handles the rendering process and creation of different node types. `render` synchronizes with the backend's rendering cycle. Node creation methods are mode-specific.

```TypeScript
Context#render(cb: (Error | null) => void): void;
Context#getRootNode(): Element;
Context#createElement(tagName: string): Element;
Context#createTextNode(content: string): Element;
Context#createFragment(): Element;
```

--------------------------------

### Component Space - Import Space

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/component_space.md

Demonstrates importing components from another component space using `importSpace`, specifying a reference URL prefix and whether to import only public components.

```javascript
const componentSpaceA = new glassEasel.ComponentSpace()

componentSpaceA.defineComponent({
  is: 'a-component',
})

componentSpaceA.exportComponent('public-name', 'a-component')

const componentSpaceB = new glassEasel.ComponentSpace()

componentSpaceB.importSpace('space://space-a', componentSpaceA, false)

componentSpaceB.defineComponent({
  using: {
    base: 'space://space-a/public-name',
  },
})
```

--------------------------------

### Define Trait Behavior with Interface Conversion

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/interaction/trait_behavior.md

Illustrates how to define a trait behavior that requires implementing a subset of interfaces but provides a richer set of methods. This example shows implementing only the 'add' interface while providing both 'add' and 'minus' methods.

```TypeScript
interface Add {
  add(a: number, b: number): number
}
interface AddMinus {
  add(a: number, b: number): number
  minus(a: number, b: number): number
}
// This trait behavior requires implementing the add interface, but can provide both add and minus interfaces
const addMinusTrait = componentSpace.defineTraitBehavior<Add, AddMinus>((impl) => ({
  // Specifically:
  // The input impl is an implementation of interface Add
  // Here, it needs to return an implementation of interface AddMinus
  add(a: number, b: number): number {
    return impl.add(a, b)
  },
  // Need to additionally implement the minus interface method
  minus(a: number, b: number): number {
    return impl.add(a, -b)
  },
}))

const childComponent = componentSpace.define()
  .implement(addMinusTrait, {
    // For the implementer, only the add interface method needs to be implemented
    add(a, b) {
      return a + b
    }
  })
  .defineComponent()
```

```TypeScript
const myComponent = componentSpace.define()
  .usingComponents({
    child: childComponent,
  })
  .template(compileTemplate(`
    <child id="c" />
  `))
  .lifetime('attached', function () {
    const child = this.shadowRoot.querySelector('#c')!
    const impl = child.traitBehavior(addMinusTrait)!
    // Can call both add and minus interfaces
    impl.add(1, 2) === 3 // true
    impl.minus(5, 3) === 2 // true
  })
```

--------------------------------

### Test Coverage

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel-miniprogram-adapter/README.md

Generates a test coverage report for the glass-easel-miniprogram-adapter project. This helps in understanding which parts of the code are covered by tests.

```sh
npm run coverage
```

--------------------------------

### Prevent Infinite Loop in Data Listener

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/data_management/data_observer.md

Provides an example of how to avoid infinite loops in data listeners by not setting the observed data field within the listener itself. This snippet shows a problematic implementation that would cause an infinite loop.

```javascript
export const addComponent = componentSpace.defineComponent({
  data: {
    a: 1,
  },
  observers: {
    'a': function () {
      // Will cause an infinite loop!
      this.updateData({
        a: 1,
      })
    },
  },
})
```

--------------------------------

### Implement Custom Backend with Composed Mode

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/custom_backend.md

This TypeScript code demonstrates how to implement a custom rendering backend using the Composed Mode protocol. It requires implementing the `glassEasel.composedBackend.Context` interface.

```TypeScript
class MyCustomBackend implements glassEasel.composedBackend.Context {
  // ...
}
```

--------------------------------

### Glass-Easel: Default Data Deep Copy

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/data_management/data_deep_copy.md

Demonstrates the default behavior of data deep copying in Glass-Easel components. Modifications to `this.data` are not applied to the template due to the deep copy. This example shows how direct modification of `this.data.a` does not affect the rendered output.

```javascript
export const myComponent = componentSpace.defineComponent({
  template: compileTemplate(
    '<div>{{ a }}</div>'
  ),
  data: {
    a: 1,
  },
  lifetimes: {
    attached() {
      // 这样进行的更新不会应用到模板上
      this.data.a = 2
    },
  },
})
```

--------------------------------

### 挂载 Glass-Easel 根组件

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/beginning.md

在 DOM 环境中，使用启动脚本将 Glass-Easel 的根组件挂载到页面。此过程涉及创建组件实例、指定 DOM 后端，并将组件插入到文档的指定位置。

```javascript
import * as glassEasel from 'glass-easel'
import { helloWorld } from './hello-world'

// 创建根组件实例
const domBackend = new glassEasel.domlikeBackend.CurrentWindowBackendContext()
const rootComponent = glassEasel.Component.createWithContext('body', helloWorld, domBackend)

// 将组件插入到 DOM 树中
const placeholder = document.createElement('span')
document.body.appendChild(placeholder)
glassEasel.Element.replaceDocumentElement(rootComponent, document.body, placeholder)
```

--------------------------------

### Component Space - Using Components

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/component_space.md

Illustrates how to specify component dependencies within a component definition using the `using` property, referencing components defined in the same component space.

```javascript
componentSpace.defineComponent({
  using: {
    hello: 'hello-world',
  },
})
```

--------------------------------

### Splice Before Slot Nodes

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/appendix/backend_protocol.md

Modifies the slot content of the current node by deleting a specified number of nodes starting from 'before' and inserting nodes from 'list'. The 'list' is a fragment node that will be cleared but may be reused. The current node must be a slot node. This is only effective in Shadow Mode.

```javascript
Element#spliceBeforeSlotNodes(before: number, deleteCount: number, list: Element)
```

--------------------------------

### Component Space - Import All Components

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/component_space.md

Shows how to import all components from another component space, not just the publicly exported ones, using `importSpace` with the `allComponents` flag set to true.

```javascript
const componentSpaceC = new glassEasel.ComponentSpace()

componentSpaceC.importSpace('space-private://space-a', componentSpaceA, true)

componentSpaceC.defineComponent({
  using: {
    base: 'space-private://space-a/a-component',
  },
})
```

--------------------------------

### glass-easel Mini Program Webpack Plugin (JavaScript)

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/README-zh_CN.md

A simple Webpack plugin used in conjunction with glass-easel-miniprogram-adapter. It helps in organizing code using WXML, WXSS, and JS files, similar to a mini-program project structure.

```JavaScript
const GlassEaselMiniprogramWebpackPlugin = require('glass-easel-miniprogram-webpack-plugin');

// Example Webpack configuration
module.exports = {
  plugins: [
    new GlassEaselMiniprogramWebpackPlugin()
  ]
};
```

--------------------------------

### glass-easel Template Compiler (Rust)

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/README-zh_CN.md

Compiles WXML syntax templates into JavaScript code. This module is written in Rust and requires Rust and wasm-pack for self-compilation.

```Rust
// Example of how the template compiler might be used internally or via a binding
// This is a conceptual representation as direct Rust code usage isn't typical for end-users.
fn compile_wxml_template(template_string: &str) -> String {
    // ... compilation logic ...
    String::from("// Compiled JS code")
}
```

--------------------------------

### Integrate Custom Backend with Glass-Easel

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/advanced/custom_backend.md

This JavaScript code shows how to integrate a custom rendering backend with Glass-Easel. It involves creating an instance of the custom backend, connecting its event system, creating a root component with the custom context, and appending the component to the backend's node tree.

```JavaScript
// Create backend instance
const myCustomBackend = new MyCustomBackend()

// Connect event system
backendContext.onEvent((target, type, detail, options) => {
  const ev = new glassEasel.Event(type, detail, options)
  glassEasel.Event.dispatchEvent(target, ev)
  return ev.defaultPrevented()
    ? glassEasel.EventBubbleStatus.NoDefault
    : glassEasel.EventBubbleStatus.Normal
})

// Create root component instance
const rootComponent = glassEasel.Component.createWithContext('body', helloWorld, myCustomBackend)

// Append component to the rendering backend's node tree
const rootNode = myCustomBackend.getRootNode()
const placeholder = myCustomBackend.createElement('placeholder')
rootNode.appendChild(placeholder)
glassEasel.Element.replaceDocumentElement(rootComponent, rootNode, placeholder)
placeholder.release()
rootNode.release()
```

--------------------------------

### Glass-Easel 模板示例

Source: https://github.com/wechat-miniprogram/glass-easel/blob/master/glass-easel/guide/zh_CN/basic/beginning.md

一个简单的 WXML 模板示例，展示了如何使用 `{{ ... }}` 进行数据绑定，并将内容包裹在 `div` 和 `span` 标签中。

```xml
<div class="blue">
  <span>{{ hello }}</span>
</div>
```
Tokens:
Raw