closes #2984

src/core/mocked-template-interface.js

@@ -1,8 +1,23 @@
-import { PURE_COMPONENT_API } from './pure-component-api.js'
-import { noop } from '@riotjs/util'
+import {
+ noop,
+ removeChild,
+ cleanNode,
+ UNMOUNT_METHOD_KEY,
+ MOUNT_METHOD_KEY,
+ UPDATE_METHOD_KEY,
+} from '@riotjs/util'
 
+// Components without template use a mocked template interface with some basic functionalities to
+// guarantee consistent rendering behaviour see https://github.com/riot/riot/issues/2984
 export const MOCKED_TEMPLATE_INTERFACE = {
- ...PURE_COMPONENT_API,
+ [MOUNT_METHOD_KEY](el) {
+ this.el = el
+ },
+ [UPDATE_METHOD_KEY]: noop,
+ [UNMOUNT_METHOD_KEY](_, __, mustRemoveRoot = false) {
+ if (mustRemoveRoot) removeChild(this.el)
+ else if (!mustRemoveRoot) cleanNode(this.el)
+ },
  clone: noop,
  createDOM: noop,
 }

test/components/raw-component.riot

@@ -0,0 +1,17 @@
+<raw>
+ <script>
+ export default {
+ onMounted() {
+ this.updateContent()
+ },
+ onUpdated() {
+ this.updateContent()
+ },
+ updateContent() {
+ if (this.props.html) {
+ this.root.innerHTML = this.props.html
+ }
+ }
+ }
+ </script>
+</raw>

test/specs/lifecycle-events.spec.js

@@ -4,6 +4,7 @@ import CommentsAndExpressions from '../components/comments-and-expressions.riot'
 import ConditionalSelectOption from '../components/conditional-select-option.riot'
 import EachCustomChildrenComponents from '../components/each-custom-children-components.riot'
 import ExpressionParts from '../components/expression-parts.riot'
+import RawComponent from '../components/raw-component.riot'
 import InvalidPureCssComponent from '../components/invalid-pure-css-component.riot'
 import InvalidPureHtmlComponent from '../components/invalid-pure-html-component.riot'
 import NativeAttributes from '../components/native-attributes.riot'
@@ -49,6 +50,19 @@ describe('lifecycle events', () => {
  expect(element.parentNode).to.be.not.ok
  })
 
+ it('unmounting raw components should not preserve the root tag', () => {
+ const component = riot.component(RawComponent)
+ const element = document.createElement('div')
+ document.body.appendChild(element)
+
+ const tag = component(element)
+
+ expect(element.parentNode).to.be.ok
+
+ tag.unmount()
+ expect(element.parentNode).to.be.not.ok
+ })
+
  it('unmounting components can preserve the root tag', () => {
  const component = riot.component(SimpleComponent)
  const element = document.createElement('div')
@@ -63,6 +77,24 @@ describe('lifecycle events', () => {
  document.body.removeChild(element)
  })
 
+ it('unmounting raw components can preserve the root tag', () => {
+ const component = riot.component(RawComponent)
+ const element = document.createElement('div')
+ document.body.appendChild(element)
+
+ const tag = component(element, {
+ html: '<p>hello</p>',
+ })
+
+ expect(element.parentNode).to.be.ok
+ expect(element.querySelector('p')).to.be.ok
+ tag.unmount(true)
+ expect(element.parentNode).to.be.ok
+ expect(element.querySelector('p')).to.be.not.ok
+
+ document.body.removeChild(element)
+ })
+
  it('the shouldUpdate method can block all the components updates', () => {
  const updatedSpy = spy()
  const MyComponent = {