wechat-miniprogram / glass-easel Goto Github PK

To match the behavior in legacy framework.

Currently the ~ uses the extraStyleScope component option. It is incorrect and should be the styleScope of the root component.

In cascaded ancestor/descendent relations, the closest parent/child pair should be used. (This is also how legacy framework did).

here

When adding a custom field in a component (defined with definition API), its type is hard to specify.

Solution 1

Add a definition field for specifying types for the extra fields, e.g.

componentSpace.defineComponent({
  extraThisFieldsType: undefined as unknown as { /* SOME CUSTOM FIELDS TYPE */ }
})

The data type of extraThisFieldsType can be merged into ThisType of the component.

Solution 2

Add another initiation function, which returns some fields that will be written into this (of the method caller, if any), e.g.

componentSpace.defineComponent({
  extraThisFields: () => { /* SOME CUSTOM FIELDS */ }
})

If some fields cannot be set during initiation, its type should be given manually, e.g.

componentSpace.defineComponent({
  extraThisFields: () => {
    delayedField: undefined as SomeType | undefined
  }
})

Layout change listeners are required sometimes. This includes:

• IntersectionObserver
• MediaQueryObserver
• ResizeObserver

类似react的函数组件，减少声明周期，但从框架层面提供类似useHooks的机制？

SelectorQuery in adapter lacks context field getter.

Currently, when creating a component through createComponent , the tag name seach rules are:

• search in the usingComponents list;
• search in the generics list;
• search in the component space with the tag name treated as absolute path.

The last rule does not make sense. The propose of the rule is to make it possible to use global components, but there should be a better way to define the global component list.

#18 introduced web-like intersection observer support.

However, the miniprogram-like intersection observer supports more than two element intersections.

When default field is set for a property definition, value field in the same definition will never take effect. A warning for this case will be nice to have. Also, default field may be not a valid function to call and will cause an exception during initialization, which may also worth a warning.

When a component is about to be replaced into a placeholder (synchronously), there might be some other dependencies not registered.

groupRegister is designed to group a series of component registration. If any placeholder needs to be replaced, it happens at the end of all component registrations.

Currently these two component options are used to control whether the data should be copied while templating. It is component-level options, but it is more practical to control the deep copy strategies of each data field.

We want to remove them in faver of some advanced data update methods.

General API design:

• add an extra argument for replaceDataOnPath and spliceArrayDataOnPath for the DeepCopyStrategy ;
• add a new method updateAtomicData to set fields with DeepCopyStrategy.None .

Inline scripts in WXML files obtained by TmplGroup#get_inline_script may be processed by an external processor for validation or transformation purpose. In that case, row offset of inline scripts is required for calculating code position during external processing.

The backend would like to know which classes are changed, in other words, addClass and removeClass interfaces are better, but clearClasses is not good.

This also helps the implementation of #60 .

For the compatibilities of the legacy framework and XML spec, tag name and common attributes should be lower-cased. For example:

<Div data-myData></diV>

should be treated as the same as

<div data-mydata></div>

Special template directives are excluded:

• data:myData and mark:myMark should not be lowercased;
• event bindings like bind:myEvent should not be lowercased.

Currently there is no warning generated.

If variables in the template start with true/false/null (<text>{{ trueText }}</text>), it will cause a syntax error.

Test:

https://npm.runkit.com/glass-easel-template-compiler

Code:

const glassEaselTemplateCompiler = require("glass-easel-template-compiler")
const g = new glassEaselTemplateCompiler.TmplGroup()
g.addTmpl('/path', '<text>{{ trueText }}</text>')
console.log(g.getTmplGenObjectGroups())

Return:

"Template parsing error (from line 1 column 14 to line 1 column 14) : Unexpected character"

It should be related to the syntax definition of this file:
https://github.com/wechat-miniprogram/glass-easel/blob/1874b8d2099ec62364113be76f3939b81a10a6e7/glass-easel-template-compiler/src/tmpl.pest

Currently model bindings require the binding target to be a Component .

Some backend implementions require the supports on the NativeNode .

还是只是在较长一段时间不会应用于线上小程序么？或者后面上线小程序会放开new Function的使用？

guide 中的自定义后端协议文档很难独立维护。

These syntax are more clear in practise.

However, they are conflicted with the classic class/style syntax if it contains data bindings.

Sometimes it is better to write properties: { xxx: 'string' } than properties: { xxx: String }

Currently the unused directive like <div unused:xxx="xxx" /> will be dropped automatically.

But in some cases we do like some special directives attached to an element.

itemLvaluePath in itemCallback in DefineForLoop may be null, leads to nested wx:for throws TypeError: Spread syntax requires ...iterable not be null or undefined

Most external components require better controls of the host node itself, so the tag name should be able to be specified.

It may be specified in component options, default to wx-x .

When comparer is set and returns true, the property value comparison is still executed:

Is it expected?

:host in component stylesheets should be translated into [is="COMPONENT_PATH"] .

It seems like there is a better way to manage ChildNodes in glassEasel.Element , especially in dynamic slotting.

In WXML editors, it is much more convinient if we support template update, which means, when wxml updates, the template engine gets the new content, and applies it to the component directly without recreate the component and without state loss. This will be helpful for rapid development.

The relation path search logic is outdated.

Currently, in using or usingComponents of behaviors (and components), if the target is not found, the default component in current component space is used.

This behavior should be changed. If the target is not found, then treat it as a native node.

This is helpful when working with placeholders, and maybe helpful to solve #5 .

Currently the Shadow Mode Backend Protocol is still not stable yet.

We have to make an implementation and confirm the stabilities.

Tag name can be aliased with "using" or "usingComponents".

Sometimes we would like the alias contains the same logic behavior as the using target in the backend, but its styling (tag name selector matching) follows the alias itself.

This requires several features.

• In the backend protocol, the createElement call contains a second argument as the alias.
• When aliasing native node (introduced in #13 ), the using information contains the logical tag name.
• While host node creation, the logical tag name always refers to a non-special element (such as "span").

Only Named character reference like   is supported now, it would be useful to also supports Numeric character reference like 😀 (hexadecimal) or 😀 (decimal) for situations like iconfonts.

个人感觉：从API角度，defineComponent时is属性显得很多余，直接将defineComponent的结果赋在using上感觉比较合理，如果是为了兼容老版本，应该也可以用babel来在编译时生成唯一id并派发到实际文件路径来解决

When an invalid wx:key is given, there will be lots of duplicated key values. This causes list diff algorithm fails on key-deduplication.

Definition,

is conflicted with its implementation here

版本：iphone12，iOS 16.4.1 ，微信 8.0.36，基础库 2.31.0
使用开发者工具 mac 1.0.6.2304212 运行正常

页面有配置全局组件 usingComponents、只在后面的页单独开启了 "renderer": "skyline", "componentFramework": "glass-easel"

使用工具启动真机预览小程序，进主页就报错了。主页是 webview 模式

When calling a value that is not a function as function, template should make this evaluating to undefined instead of throwing an Error

reproducing:

<wxs module="mod">
  module.exports = {}
</wxs>

<view>{{ mod.notExistsFn() }}</view>

These are supported in legacy framework.

Currently dynamic slotting performance is not good enough.

We are doing some test to find a better slot management algo.

test case to reproduce:

const def = glassEasel
  .registerElement({
    template: multiTmpl({
      child: `
        <wxs name="w">module.exports = { fn: function () { return 1 } }</wxs>
        <template name="child">
          <span>{{ w.fn() }}</span>
        </template>
      `,
      '': `
        <import src="./child" />
        <div>
          <template is="child" />
        </div>
      `,
    }),
  })
  .general()
const elem = glassEasel.Component.create('root', def)

WASM version of template compiler lacks binding of get_direct_dependencies while C binding supports tmpl_group_get_direct_dependencies

The composed-parent ElementIterator stopped at the shadow root of the first node. This is not expected.

When passing objects or arrays between components, most of the times the value is treated as updated (without any deep-comparison). It causes some update perf issues between components.

This can be solved by adding a custom property comparison function to decide whether the value is updated.

For such expression:

<template data="{{ field }}">

The data value should always be treated as { field: field } , not field it self.

Add a listener for a hint of a placeholder is used.

When doing dash-to-camel conversion, e.g. handling template attributes as property names, dash with a lowercase letter followed it will be correctly converted: a-b => aB

However, when a dash is not followed by a lowercase letter, it will not be removed. a-3 => a-3

The expected result should be a-3 => a3

纯内部状态的UI组件么？不能数据绑定的话，只是出于复用角度，个人感觉，几乎没什么实用性