Merge pull request #6 from costrojs/fix/replace-children

Add fallback for replaceChildren support

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 1.0.6
+
+### Fixes
+
+- Add fallback for replaceChildren support ([#6](https://github.com/costrojs/costro/pull/6))
+
 ## 1.0.5
 
 ### Fixes

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "costro",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"description": "Build web applications with Components, Store and Router in 3KB",
 	"keywords": [
 		"costro",

src/app.ts

@@ -237,7 +237,12 @@ export default class App {
 	destroyComponent() {
 		if (this.previousRoute) {
 			this.previousRoute.isComponentClass && this.previousRoute.component.beforeDestroy()
-			this.target.replaceChildren()
+
+			if (typeof Element.prototype.replaceChildren === 'function') {
+				this.target.replaceChildren()
+			} else {
+				this.target.innerHTML = ''
+			}
 			this.previousRoute.isComponentClass && this.previousRoute.component.afterDestroy()
 		}
 	}

tests/unit/app.test.js

@@ -657,6 +657,24 @@ describe('App', () => {
 			expect(app.target.replaceChildren).toHaveBeenCalled()
 			expect(app.previousRoute.component.afterDestroy).toHaveBeenCalled()
 		})
+
+		it('should call the destroyComponent function without replaceChildren support', () => {
+			app.previousRoute = {
+				component: {
+					afterDestroy: jest.fn(),
+					beforeDestroy: jest.fn()
+				},
+				isComponentClass: true
+			}
+
+			Element.prototype.replaceChildren = undefined
+
+			app.destroyComponent()
+
+			expect(app.previousRoute.component.beforeDestroy).toHaveBeenCalled()
+			expect(app.target.innerHTML).toStrictEqual('')
+			expect(app.previousRoute.component.afterDestroy).toHaveBeenCalled()
+		})
 	})
 
 	describe('createComponent', () => {