在调用 destroy 方法后，前端框架无法重载 Artalk

[syfxlin]

Description

Artalk 在调用 destroy 方法时会调用 element.remove() 方法删除 HTML 元素（包含 root 元素），这会导致前端框架在更新时丢失 HTML 元素，从而无法重载 Artalk。

Artalk/ui/artalk/src/artalk.ts

Line 62 in b60cb58

this.ctx.$root.remove()

Reproduction steps

https://stackblitz.com/edit/vitejs-vite-y5eqcb?file=src%2FApp.tsx&terminal=dev

• 移除 destroy 方法情况下，Artalk 在框架更新或者初始化中都可以正常重载。
• 添加回 destroy 方法，Artalk 无法被正常初始化或重载。

Versions

Artalk UI：2.8.3
Artalk API：2.8.3

Possible solutions

使用 element.innerHTML = '' 移除子元素，而不是使用 element.remove()，element.remove() 会将父元素（root）也一起移除。我可以为 Artalk 提 PR 来修复这个问题。

另外，可以考虑为不同的前端框架制作 wrapper，降低集成 Artalk 的难度。

Reference

• 提供 Vue/React 组件导出 #670
• https://github.com/syfxlin/blog/blob/master/src/components/widgets/artalk/index.tsx

[qwqcode]

非常感谢！！❤️ 这个 issue 真的很详细！

[syhily]

I meet the same issues in React. When can we get this fix released to npmjs.

[qwqcode]

@syhily Hello, v2.8.4 npm package has just been released, including this fix.