Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(runtime): support insertAdjacentHTML #9596

Merged
merged 6 commits into from
Jun 28, 2021

Conversation

b2nil
Copy link
Collaborator

@b2nil b2nil commented Jun 24, 2021

这个 PR 做了什么? (简要描述所做更改)
vue@3.1.2 对静态内容插入逻辑进行了更改,其中使用了 Taro Runtime 尚未支持的 insertAdjacentHTML 方法。

本 PR 为 TaroNode 新增了 insertAdjacentHTML 方法,以适配 vue@^3.1.2

这个 PR 是什么类型? (至少选择一个)

这个 PR 涉及以下平台:

  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

@luckyadam
Copy link
Member

老哥威武!

@HurricaneTBS
Copy link

还是不行呀,我已经更新了taro,运行之后还是报这个错误
image

@luckyadam luckyadam merged commit 29efd39 into NervJS:next Jun 28, 2021
@HurricaneTBS
Copy link

看不懂,具体怎么操作呢?

@Chen-jj
Copy link
Contributor

Chen-jj commented Jun 28, 2021

@HurricaneTBS 要等这周 Taro 发版后正式修复,目前可以先降 Vue 版本到 3.1.2 以下。

@HurricaneTBS
Copy link

@HurricaneTBS 要等这周 Taro 发版后正式修复,目前可以先降 Vue 版本到 3.1.2 以下。

我现在的vue版本是3.0.0,还是不行

@HurricaneTBS
Copy link

@HurricaneTBS 要等这周 Taro 发版后正式修复,目前可以先降 Vue 版本到 3.1.2 以下。

image

@b2nil b2nil deleted the feat/insertStaticContent branch June 28, 2021 09:10
@HurricaneTBS
Copy link

发现了解决问题的方法,虽然package.json文件中的vue版本是3.0.0但是实际执行yarn的时候,会下载最新的vue,所以需要将yarn.lock文件中的vue版本降低到3.0.0

@wzt1111
Copy link

wzt1111 commented Jun 30, 2021

发现了解决问题的方法,虽然package.json文件中的vue版本是3.0.0但是实际执行yarn的时候,会下载最新的vue,所以需要将yarn.lock文件中的vue版本降低到3.0.0

没有 yarn.lock 文件,那怎么给 vue 降级?

@HurricaneTBS
Copy link

也可以直接使用yarn add vue@3.0.11来解决

发现了解决问题的方法,虽然package.json文件中的vue版本是3.0.0但是实际执行yarn的时候,会下载最新的vue,所以需要将yarn.lock文件中的vue版本降低到3.0.0

没有 yarn.lock 文件,那怎么给 vue 降级?

也可以直接使用yarn add vue@3.0.11来解决

@HurricaneTBS
Copy link

也可以直接使用yarn add vue@3.0.11来解决

发现了解决问题的方法,虽然package.json文件中的vue版本是3.0.0但是实际执行yarn的时候,会下载最新的vue,所以需要将yarn.lock文件中的vue版本降低到3.0.0

没有 yarn.lock 文件,那怎么给 vue 降级?

也可以直接使用yarn add vue@3.0.11来解决

依赖里面写的是“vue”:“^3.0.0”表示你执行yarn的时候他会安装大版本3里面的最新版本,所以会安装成3.1.2,你可直接指定为 "vue": "3.0.11",然后yarn,也可以在控制台执行yarn add vue@3.0.11来安装指定版本

@wzt1111
Copy link

wzt1111 commented Jun 30, 2021

也可以直接使用yarn add vue@3.0.11来解决

发现了解决问题的方法,虽然package.json文件中的vue版本是3.0.0但是实际执行yarn的时候,会下载最新的vue,所以需要将yarn.lock文件中的vue版本降低到3.0.0

没有 yarn.lock 文件,那怎么给 vue 降级?

也可以直接使用yarn add vue@3.0.11来解决

依赖里面写的是“vue”:“^3.0.0”表示你执行yarn的时候他会安装大版本3里面的最新版本,所以会安装成3.1.2,你可直接指定为 "vue": "3.0.11",然后yarn,也可以在控制台执行yarn add vue@3.0.11来安装指定版本

好的 完美解决

@zhangwujian
Copy link

看更新日志 taro v3.2.13是目前最新版本,该版本下vue 3.1.12 存在同样的问题;vue降到3.0.11可以解决问题;
愣是不降级的话,还有个玄学的方法,就是 view 上即写class 也 写 className;
例: <view class="test" className="test"></view>
原理不知,已做vue降级处理,不知更多的view和更深层次嵌套好不好使;

break
case 'afterbegin':
if (this.hasChildNodes()) {
this.childNodes[0].insertBefore(n)
Copy link
Contributor

@Chen-jj Chen-jj Jul 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@b2nil 这里应该是 this.insertBefore(n, this.childNodes[0]) 吧,但我没搞懂为什么测试能过。

现在的测试运行结果:

<container>
  <view></view>
  <div>
    <text>
      <button></button>
    </text>
    <input />
  </div>
  <image></image>
</container>

正确的运行结果:

<container>
  <view></view>
  <div>
    <button></button>
    <text></text>
    <input />
  </div>
  <image></image>
</container>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

尴尬,的确插错位置了。
抱歉,我没有在本地跑测试,纯粹依赖 CI 了。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

仔细看了几个 PR 的 CI 测试日志,虽然 scope 里有 @tarojs/runtime, 但是都没有执行 ci 脚本的记录。

插入位置错误的地方,你看是需要我再提 PR 改,还是你直接改?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@b2nil 我这边改下哈,另外目测是因为 @tarojs/runtime 跑测试的 npm script 和 yarn test 跑的不一致。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

vue 3.1.2 报 TypeError: insertionPoint.insertAdjacentHTML is not a function
6 participants