Skip to content

Commit

Permalink
component does not set state null when disconnected
Browse files Browse the repository at this point in the history
  • Loading branch information
dmonad committed May 8, 2020
1 parent c6da567 commit 62e70f0
Showing 3 changed files with 38 additions and 9 deletions.
11 changes: 7 additions & 4 deletions component.js
Original file line number Diff line number Diff line change
@@ -30,10 +30,9 @@ export const define = (name, constr, opts) => registry.define(name, constr, opts
*/
export const whenDefined = name => registry.whenDefined(name)

/**
* @todo rename to lib0-component-upgradet before next major release
*/
const upgradedEventName = 'upgraded'
const connectedEventName = 'connected'
const disconnectedEventName = 'disconnected'

/**
* @template S
@@ -162,6 +161,7 @@ export const createComponent = (name, { template, style = '', state: defaultStat
* @type {any}
*/
this.state = state || (object.assign({}, defaultState))
this.connected = false
// init shadow dom
if (templateElement) {
const shadow = /** @type {ShadowRoot} */ (this.attachShadow({ mode: 'open' }))
@@ -178,6 +178,7 @@ export const createComponent = (name, { template, style = '', state: defaultStat
}

connectedCallback () {
this.connected = true
if (!this._init) {
this._init = true
const shadow = this.shadowRoot
@@ -211,10 +212,12 @@ export const createComponent = (name, { template, style = '', state: defaultStat
this.state = null
this.setState(startState)
}
dom.emitCustomEvent(/** @type {any} */ (this.shadowRoot || this), connectedEventName, { bubbles: true })
}

disconnectedCallback () {
this.setState(null)
this.connected = false
dom.emitCustomEvent(/** @type {any} */ (this.shadowRoot || this), disconnectedEventName, { bubbles: true })
}

static get observedAttributes () {
22 changes: 17 additions & 5 deletions dom.js
Original file line number Diff line number Diff line change
@@ -85,7 +85,7 @@ export const setAttributesMap = (el, attrs) => {
export const fragment = children => {
const fragment = createDocumentFragment()
for (let i = 0; i < children.length; i++) {
fragment.appendChild(children[i])
appendChild(fragment, children[i])
}
return fragment
}
@@ -97,7 +97,7 @@ export const fragment = children => {
*/
/* istanbul ignore next */
export const append = (parent, nodes) => {
parent.appendChild(fragment(nodes))
appendChild(parent, fragment(nodes))
return parent
}

@@ -257,9 +257,9 @@ export const replaceWith = (oldEl, newEl) => oldEl.replaceWith(newEl)
export const insertBefore = (parent, el, ref) => parent.insertBefore(el, ref)

/**
* @param {HTMLElement} parent
* @param {HTMLElement|DocumentFragment} child
* @return {HTMLElement|DocumentFragment}
* @param {Node} parent
* @param {Node} child
* @return {Node}
*/
/* istanbul ignore next */
export const appendChild = (parent, child) => parent.appendChild(child)
@@ -277,3 +277,15 @@ export const DOCUMENT_FRAGMENT_NODE = doc.DOCUMENT_FRAGMENT_NODE
* @param {number} type
*/
export const checkNodeType = (node, type) => node.nodeType === type

/**
* @param {Node} parent
* @param {HTMLElement} child
*/
export const isParentOf = (parent, child) => {
let p = child.parentNode
while (p && p !== parent) {
p = p.parentNode
}
return p === parent
}
14 changes: 14 additions & 0 deletions eventloop.js
Original file line number Diff line number Diff line change
@@ -90,3 +90,17 @@ const Idle = createTimeoutClass(arg => typeof cancelIdleCallback !== 'undefined'
*/
// @ts-ignore
export const idleCallback = cb => typeof requestIdleCallback !== 'undefined' ? new Idle(requestIdleCallback(cb)) : timeout(1000, cb)

/**
* @param {number} timeout Timeout of the debounce action
* @return {function(function | null):void}
*/
export const createDebouncer = timeout => {
let timer = -1
return f => {
clearTimeout(timer)
if (f) {
timer = setTimeout(f, timeout)
}
}
}

0 comments on commit 62e70f0

Please sign in to comment.