@simpreact/simpreact 0.0.0-alpha.1f6ee65 → 0.0.1

package/dom/index.js

@@ -1 +1,3 @@
+import { createRoot, render } from './render';
 export { createRoot, render } from './render';
+export default { createRoot, render };

package/dom/namespace.d.ts

@@ -0,0 +1,2 @@
+export type Namespace = 'http://www.w3.org/1999/xhtml' | 'http://www.w3.org/2000/svg' | (string & {});
+export declare const defaultNamespace: Namespace;

package/dom/namespace.js

@@ -0,0 +1 @@
+export const defaultNamespace = 'http://www.w3.org/1999/xhtml';

package/dom/props/controlled/index.d.ts

@@ -0,0 +1,7 @@
+import type { SimpElement } from '../../../core/internal.js';
+import type { Dict } from '../../../shared';
+export declare function isEventNameIgnored(element: SimpElement, eventName: string): boolean;
+export declare function isFormElementControlled(props: Dict): boolean;
+export declare function addControlledFormElementEventHandlers(element: SimpElement): void;
+export declare function removeControlledFormElementEventHandlers(element: SimpElement): void;
+export declare function syncControlledFormElementPropsWithAttrs(element: SimpElement, props: Dict, mounting?: boolean): void;

package/dom/props/controlled/index.js

@@ -0,0 +1,51 @@
+import { addControlledInputEventHandlers, isEventNameIgnored as isEventNameIgnoredInput, removeControlledInputEventHandlers, syncControlledInputProps, } from './input';
+import { addControlledSelectEventHandlers, isEventNameIgnored as isEventNameIgnoredSelect, removeControlledSelectEventHandlers, syncControlledSelectProps, } from './select';
+import { addControlledTextareaEventHandlers, isEventNameIgnored as isEventNameIgnoredTextarea, removeControlledTextareaEventHandlers, syncControlledTextareaProps, } from './textarea';
+export function isEventNameIgnored(element, eventName) {
+    if (element.type === 'input') {
+        return isEventNameIgnoredInput(element.props, eventName);
+    }
+    else if (element.type === 'select') {
+        return isEventNameIgnoredSelect(eventName);
+    }
+    else if (element.type === 'textarea') {
+        return isEventNameIgnoredTextarea(eventName);
+    }
+    return false;
+}
+export function isFormElementControlled(props) {
+    return props.value != null || props.checked != null;
+}
+export function addControlledFormElementEventHandlers(element) {
+    if (element.type === 'input') {
+        addControlledInputEventHandlers(element.reference);
+    }
+    else if (element.type === 'select') {
+        addControlledSelectEventHandlers(element.reference);
+    }
+    else if (element.type === 'textarea') {
+        addControlledTextareaEventHandlers(element.reference);
+    }
+}
+export function removeControlledFormElementEventHandlers(element) {
+    if (element.type === 'input') {
+        removeControlledInputEventHandlers(element.reference);
+    }
+    else if (element.type === 'select') {
+        removeControlledSelectEventHandlers(element.reference);
+    }
+    else if (element.type === 'textarea') {
+        removeControlledTextareaEventHandlers(element.reference);
+    }
+}
+export function syncControlledFormElementPropsWithAttrs(element, props, mounting = false) {
+    if (element.type === 'input') {
+        syncControlledInputProps(element, props);
+    }
+    else if (element.type === 'select') {
+        syncControlledSelectProps(element, props, mounting);
+    }
+    else if (element.type === 'textarea') {
+        syncControlledTextareaProps(element, props, mounting);
+    }
+}

package/dom/props/controlled/input.d.ts

@@ -0,0 +1,7 @@
+import type { SimpElement } from '../../../core/internal.js';
+import type { Dict } from '../../../shared';
+export declare function isCheckedType(type: string): boolean;
+export declare function isEventNameIgnored(props: Dict, eventName: string): boolean;
+export declare function addControlledInputEventHandlers(dom: HTMLInputElement): void;
+export declare function removeControlledInputEventHandlers(dom: HTMLInputElement): void;
+export declare function syncControlledInputProps(element: SimpElement, props: Dict): void;

package/dom/props/controlled/input.js

@@ -0,0 +1,80 @@
+import { syncRerenderLocker } from '../../../core/internal.js';
+import { getElementFromDom } from '../../attach-element-to-dom';
+export function isCheckedType(type) {
+    return type === 'checkbox' || type === 'radio';
+}
+export function isEventNameIgnored(props, eventName) {
+    return isCheckedType(props.type) ? eventName === 'onChange' : eventName === 'onInput';
+}
+function onControlledInputInput(event) {
+    let element = getElementFromDom(event.target);
+    if (!element || !element.props) {
+        return;
+    }
+    if (element.props['onInput']) {
+        syncRerenderLocker.lock();
+        element.props['onInput'](event);
+        syncRerenderLocker.flush();
+        element = getElementFromDom(event.target);
+    }
+    if (element) {
+        syncControlledInputProps(element, element.props);
+    }
+}
+function onControlledInputChange(event) {
+    let element = getElementFromDom(event.target);
+    if (!element || !element.props) {
+        return;
+    }
+    if (element.props['onChange']) {
+        syncRerenderLocker.lock();
+        element.props['onChange'](event);
+        syncRerenderLocker.flush();
+        element = getElementFromDom(event.target);
+    }
+    if (element) {
+        syncControlledInputProps(element, element.props);
+    }
+}
+export function addControlledInputEventHandlers(dom) {
+    if (isCheckedType(dom.type)) {
+        dom.addEventListener('change', onControlledInputChange);
+    }
+    else {
+        dom.addEventListener('input', onControlledInputInput);
+    }
+}
+export function removeControlledInputEventHandlers(dom) {
+    if (isCheckedType(dom.type)) {
+        dom.removeEventListener('change', onControlledInputChange);
+    }
+    else {
+        dom.removeEventListener('input', onControlledInputInput);
+    }
+}
+export function syncControlledInputProps(element, props) {
+    const { type, value, checked, multiple, defaultValue } = props;
+    const dom = element.reference;
+    const hasValue = value != null;
+    const hasChecked = checked != null;
+    if (type != null && type !== dom.type) {
+        dom.setAttribute('type', type);
+    }
+    if (multiple != null && multiple !== dom.multiple) {
+        dom.multiple = multiple;
+    }
+    if (defaultValue != null && !hasValue) {
+        dom.defaultValue = defaultValue + '';
+    }
+    if (isCheckedType(type)) {
+        if (hasChecked) {
+            dom.checked = checked;
+        }
+    }
+    else {
+        if (hasValue && dom.value !== value) {
+            dom.defaultValue = value;
+            dom.value = value;
+        }
+    }
+}

package/dom/props/controlled/select.d.ts

@@ -0,0 +1,6 @@
+import type { SimpElement } from '../../../core/internal.js';
+import type { Dict } from '../../../shared';
+export declare function isEventNameIgnored(eventName: string): boolean;
+export declare function addControlledSelectEventHandlers(dom: HTMLSelectElement): void;
+export declare function removeControlledSelectEventHandlers(dom: HTMLSelectElement): void;
+export declare function syncControlledSelectProps(element: SimpElement, props: Dict, mounting?: boolean): void;

package/dom/props/controlled/select.js

@@ -0,0 +1,76 @@
+import { syncRerenderLocker } from '../../../core/internal.js';
+import { emptyObject } from '../../../shared';
+import { getElementFromDom } from '../../attach-element-to-dom';
+export function isEventNameIgnored(eventName) {
+    return eventName === 'onChange';
+}
+function onControlledInputChange(event) {
+    let element = getElementFromDom(event.target);
+    if (!element || !element.props) {
+        return;
+    }
+    if (element.props['onChange']) {
+        syncRerenderLocker.lock();
+        element.props['onChange'](event);
+        syncRerenderLocker.flush();
+        element = getElementFromDom(event.target);
+    }
+    if (element) {
+        syncControlledSelectProps(element, element.props);
+    }
+}
+export function addControlledSelectEventHandlers(dom) {
+    dom.addEventListener('change', onControlledInputChange);
+}
+export function removeControlledSelectEventHandlers(dom) {
+    dom.removeEventListener('change', onControlledInputChange);
+}
+export function syncControlledSelectProps(element, props, mounting = false) {
+    const multiple = Boolean(props.multiple);
+    const dom = element.reference;
+    if (props.multiple != null && multiple !== dom.multiple) {
+        dom.multiple = multiple;
+    }
+    const index = props.selectedIndex;
+    if (index === -1) {
+        dom.selectedIndex = -1;
+    }
+    let value = props.value;
+    if (typeof index === 'number' && index > -1 && dom.options[index] != null) {
+        value = dom.options[index].value;
+    }
+    if (mounting && value == null) {
+        value = props.defaultValue;
+    }
+    updateOptions(element, value);
+}
+function updateOptions(element, value) {
+    if (element.type === 'option') {
+        updateOption(element, value);
+        return;
+    }
+    const children = element.children;
+    if (Array.isArray(children)) {
+        for (let i = 0, len = children.length; i < len; ++i) {
+            updateOptions(children[i], value);
+        }
+    }
+    else if (children) {
+        updateOptions(children, value);
+    }
+}
+function updateOption(element, value) {
+    const props = element.props || emptyObject;
+    const propsValue = props.value;
+    const dom = element.reference;
+    if (!dom) {
+        return;
+    }
+    dom.value = propsValue;
+    if (propsValue === value || (Array.isArray(value) && value.includes(propsValue))) {
+        dom.selected = true;
+    }
+    else if (value != null || props.selected != null) {
+        dom.selected = Boolean(props.selected);
+    }
+}

package/dom/props/controlled/textarea.d.ts

@@ -0,0 +1,6 @@
+import type { SimpElement } from '../../../core/internal.js';
+import type { Dict } from '../../../shared';
+export declare function isEventNameIgnored(eventName: string): boolean;
+export declare function addControlledTextareaEventHandlers(dom: HTMLTextAreaElement): void;
+export declare function removeControlledTextareaEventHandlers(dom: HTMLTextAreaElement): void;
+export declare function syncControlledTextareaProps(element: SimpElement, props: Dict, mounting?: boolean): void;

package/dom/props/controlled/textarea.js

@@ -0,0 +1,61 @@
+import { syncRerenderLocker } from '../../../core/internal.js';
+import { getElementFromDom } from '../../attach-element-to-dom';
+export function isEventNameIgnored(eventName) {
+    return eventName === 'onChange' || eventName === 'onInput';
+}
+function onControlledTextareaChange(event) {
+    let element = getElementFromDom(event.target);
+    if (!element || !element.props) {
+        return;
+    }
+    if (element.props['onChange']) {
+        syncRerenderLocker.lock();
+        element.props['onChange'](event);
+        syncRerenderLocker.flush();
+        element = getElementFromDom(event.target);
+    }
+    if (element) {
+        syncControlledTextareaProps(element, element.props);
+    }
+}
+function onControlledTextareaInput(event) {
+    let element = getElementFromDom(event.target);
+    if (!element || !element.props) {
+        return;
+    }
+    if (element.props['onInput']) {
+        syncRerenderLocker.lock();
+        element.props['onInput'](event);
+        syncRerenderLocker.flush();
+        element = getElementFromDom(event.target);
+    }
+    if (element) {
+        syncControlledTextareaProps(element, element.props);
+    }
+}
+export function addControlledTextareaEventHandlers(dom) {
+    dom.addEventListener('input', onControlledTextareaInput);
+    dom.addEventListener('change', onControlledTextareaChange);
+}
+export function removeControlledTextareaEventHandlers(dom) {
+    dom.removeEventListener('input', onControlledTextareaInput);
+    dom.removeEventListener('change', onControlledTextareaChange);
+}
+export function syncControlledTextareaProps(element, props, mounting = false) {
+    const dom = element.reference;
+    const value = props.value;
+    const domValue = dom.value;
+    if (value == null) {
+        if (mounting) {
+            const defaultValue = props.defaultValue;
+            if (defaultValue != null && defaultValue !== domValue) {
+                dom.defaultValue = defaultValue;
+                dom.value = defaultValue;
+            }
+        }
+    }
+    else if (domValue !== value) {
+        dom.defaultValue = value;
+        dom.value = value;
+    }
+}

package/dom/props/dangerInnerHTML.d.ts

@@ -0,0 +1,7 @@
+import type { Maybe } from '../../shared';
+import type { SimpElement } from '../../core/internal.js';
+export declare function patchDangerInnerHTML(prevValue: Maybe<{
+    __html: string;
+}>, nextValue: Maybe<{
+    __html: string;
+}>, prevElement: Maybe<SimpElement>, nextElement: SimpElement, dom: Element): void;

package/dom/props/dangerInnerHTML.js

@@ -0,0 +1,24 @@
+import { unmount } from '../../core/internal.js';
+export function patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom) {
+    const prevHTML = prevValue?.__html || '';
+    const nextHTML = nextValue?.__html || '';
+    if (nextElement.children) {
+        console.warn('Avoid setting both children and props.dangerouslySetInnerHTML at the same time — this can cause unpredictable behavior.');
+    }
+    if (prevHTML !== nextHTML) {
+        if (nextHTML != null && !isSameInnerHTML(dom, nextHTML)) {
+            if (prevElement != null) {
+                if (prevElement.children) {
+                    unmount(prevElement.children);
+                    prevElement.children = undefined;
+                }
+            }
+            dom.innerHTML = nextHTML;
+        }
+    }
+}
+function isSameInnerHTML(dom, innerHTML) {
+    const temp = document.createElement('i');
+    temp.innerHTML = innerHTML;
+    return temp.innerHTML === dom.innerHTML;
+}

package/dom/props/index.d.ts

@@ -0,0 +1 @@
+export * from './props';

package/dom/props/index.js

@@ -0,0 +1 @@
+export * from './props';

package/dom/props/props.d.ts

@@ -0,0 +1,5 @@
+import type { SimpElement } from '../../core/internal.js';
+import type { Namespace } from '../namespace';
+export declare function mountProps(dom: HTMLElement | SVGElement, element: SimpElement, namespace: Namespace): void;
+export declare function unmountProps(dom: HTMLElement | SVGElement, element: SimpElement): void;
+export declare function patchProps(dom: HTMLElement | SVGElement, prevElement: SimpElement, nextElement: SimpElement, namespace: Namespace): void;

package/dom/props/props.js

@@ -0,0 +1,197 @@
+import { emptyObject } from '../../shared';
+import { defaultNamespace } from '../namespace';
+import { addControlledFormElementEventHandlers, isEventNameIgnored, isFormElementControlled, removeControlledFormElementEventHandlers, syncControlledFormElementPropsWithAttrs, } from './controlled';
+import { isPropNameEventName, patchEvent } from '../events';
+import { patchStyle } from './style';
+import { patchDangerInnerHTML } from './dangerInnerHTML';
+export function mountProps(dom, element, namespace) {
+    if (!isFormElement(element)) {
+        for (const propName in element.props) {
+            patchDefaultElementPropAndAttrs(propName, dom, null, element, null, element.props[propName], namespace);
+        }
+        return;
+    }
+    const isControlled = isFormElementControlled(element.props);
+    for (const propName in element.props) {
+        patchFormElementsPropAndAttrs(propName, dom, element, isControlled, null, element.props[propName]);
+    }
+    if (isControlled) {
+        addControlledFormElementEventHandlers(element);
+        syncControlledFormElementPropsWithAttrs(element, element.props, true);
+    }
+}
+export function unmountProps(dom, element) {
+    if (!element.props) {
+        return;
+    }
+    for (const propName in element.props) {
+        if (isPropNameEventName(propName)) {
+            patchEvent(propName, element.props[propName], null, dom);
+        }
+    }
+}
+export function patchProps(dom, prevElement, nextElement, namespace) {
+    const prevProps = prevElement.props || emptyObject;
+    const nextProps = nextElement.props || emptyObject;
+    if (!isFormElement(nextElement)) {
+        for (const propName in nextProps) {
+            const prevValue = prevProps[propName];
+            const nextValue = nextProps[propName];
+            if (prevValue !== nextValue) {
+                patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevValue, nextValue, namespace);
+            }
+        }
+        for (const propName in prevProps) {
+            if (nextProps[propName] == null && prevProps[propName] != null) {
+                patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevProps[propName], null, namespace);
+            }
+        }
+        return;
+    }
+    const isPrevElementControlled = isFormElementControlled(prevProps);
+    const isNextElementControlled = isFormElementControlled(nextProps);
+    for (const propName in nextProps) {
+        const prevValue = prevProps[propName];
+        const nextValue = nextProps[propName];
+        if (prevValue !== nextValue) {
+            patchFormElementsPropAndAttrs(propName, dom, nextElement, isNextElementControlled, prevValue, nextValue);
+        }
+    }
+    for (const propName in prevProps) {
+        if (nextProps[propName] == null && prevProps[propName] != null) {
+            patchFormElementsPropAndAttrs(propName, dom, prevElement, isPrevElementControlled, prevProps[propName], null);
+        }
+    }
+    if (!isPrevElementControlled && isNextElementControlled) {
+        addControlledFormElementEventHandlers(nextElement);
+    }
+    else if (isPrevElementControlled && !isNextElementControlled) {
+        removeControlledFormElementEventHandlers(prevElement);
+    }
+    if (isNextElementControlled) {
+        syncControlledFormElementPropsWithAttrs(nextElement, nextProps);
+    }
+}
+function patchFormElementsPropAndAttrs(propName, dom, element, isControlled, prevValue, nextValue) {
+    switch (propName) {
+        case 'children':
+        case 'className':
+        case 'key':
+        case 'ref':
+            break;
+        case 'value':
+            if (!isControlled) {
+                patchDomProp(nextValue, dom, propName);
+            }
+            break;
+        case 'defaultValue':
+        case 'selectedIndex':
+            if (!isControlled) {
+                patchDomProp(nextValue, dom, propName);
+            }
+            break;
+        case 'multiple':
+        case 'defaultChecked':
+        case 'checked':
+            if (!isControlled) {
+                dom[propName] = !!nextValue;
+            }
+            break;
+        case 'capture':
+        case 'indeterminate':
+        case 'readOnly':
+        case 'required':
+            dom[propName] = !!nextValue;
+            break;
+        case 'style':
+            patchStyle(prevValue, nextValue, dom);
+            break;
+        default:
+            if (isPropNameEventName(propName)) {
+                if (isControlled && isEventNameIgnored(element, propName)) {
+                    patchEvent(propName, prevValue, null, dom);
+                    break;
+                }
+                patchEvent(propName, prevValue, nextValue, dom);
+            }
+            else {
+                patchDomAttr(dom, nextValue, propName);
+            }
+    }
+}
+function patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevValue, nextValue, namespace) {
+    switch (propName) {
+        case 'children':
+        case 'className':
+        case 'key':
+        case 'ref':
+            break;
+        case 'autoFocus':
+            dom.autofocus = !!nextValue;
+            break;
+        case 'allowfullscreen':
+        case 'autoplay':
+        case 'controls':
+        case 'default':
+        case 'disabled':
+        case 'hidden':
+        case 'loop':
+        case 'muted':
+        case 'novalidate':
+        case 'open':
+        case 'reversed':
+        case 'selected':
+            dom[propName] = !!nextValue;
+            break;
+        case 'volume':
+            patchDomProp(nextValue, dom, propName);
+            break;
+        case 'style':
+            patchStyle(prevValue, nextValue, dom);
+            break;
+        case 'dangerouslySetInnerHTML':
+            patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom);
+            break;
+        default:
+            if (isPropNameEventName(propName)) {
+                patchEvent(propName, prevValue, nextValue, dom);
+            }
+            else {
+                patchDomAttr(dom, nextValue, propName, namespace);
+            }
+    }
+}
+function patchDomProp(nextValue, dom, propKey) {
+    const value = nextValue == null ? '' : nextValue;
+    if (dom[propKey] !== value) {
+        dom[propKey] = value;
+    }
+}
+function patchDomAttr(dom, value, propName, namespace = defaultNamespace) {
+    if (value == null) {
+        dom.removeAttribute(propName);
+    }
+    else {
+        if (namespace === 'http://www.w3.org/2000/svg' && svgAttrsNamespaces[propName]) {
+            dom.setAttributeNS(svgAttrsNamespaces[propName], propName, value);
+        }
+        else {
+            dom.setAttribute(propName, value);
+        }
+    }
+}
+const svgAttrsNamespaces = {
+    'xlink:actuate': 'http://www.w3.org/1999/xlink',
+    'xlink:arcrole': 'http://www.w3.org/1999/xlink',
+    'xlink:href': 'http://www.w3.org/1999/xlink',
+    'xlink:role': 'http://www.w3.org/1999/xlink',
+    'xlink:show': 'http://www.w3.org/1999/xlink',
+    'xlink:title': 'http://www.w3.org/1999/xlink',
+    'xlink:type': 'http://www.w3.org/1999/xlink',
+    'xml:base': 'http://www.w3.org/XML/1998/namespace',
+    'xml:lang': 'http://www.w3.org/XML/1998/namespace',
+    'xml:space': 'http://www.w3.org/XML/1998/namespace',
+};
+function isFormElement(element) {
+    return element.type === 'input' || element.type === 'textarea' || element.type === 'select';
+}

package/dom/props/style.d.ts

@@ -0,0 +1 @@
+export declare function patchStyle(prevAttrValue: any, nextAttrValue: any, dom: HTMLElement | SVGElement): void;

package/dom/props/style.js

@@ -0,0 +1,32 @@
+export function patchStyle(prevAttrValue, nextAttrValue, dom) {
+    if (nextAttrValue == null) {
+        dom.removeAttribute('style');
+        return;
+    }
+    const domStyle = dom.style;
+    let style;
+    let value;
+    if (typeof nextAttrValue === 'string') {
+        domStyle.cssText = nextAttrValue;
+        return;
+    }
+    if (prevAttrValue != null && typeof prevAttrValue !== 'string') {
+        for (style in nextAttrValue) {
+            value = nextAttrValue[style];
+            if (value !== prevAttrValue[style]) {
+                domStyle.setProperty(style, value);
+            }
+        }
+        for (style in prevAttrValue) {
+            if (nextAttrValue[style] == null) {
+                domStyle.removeProperty(style);
+            }
+        }
+    }
+    else {
+        for (style in nextAttrValue) {
+            value = nextAttrValue[style];
+            domStyle.setProperty(style, value);
+        }
+    }
+}

package/dom/render.d.ts

@@ -1,6 +1,6 @@
-import { type SimpElement } from '../core/internal';
+import { type SimpElement } from '../core/internal.js';
 import type { Nullable } from '../shared';
-export declare function render(element: SimpElement, parentReference: Nullable<HTMLElement>): void;
+export declare function render(element: Nullable<SimpElement>, container: Nullable<Element | DocumentFragment>): void;
 interface SimpRoot {
     render(element: SimpElement): void;
     unmount(): void;

package/dom/render.js

@@ -1,29 +1,41 @@
-import { GLOBAL, mount, patch } from '../core/internal';
+import { asyncRerenderLocker, hostAdapter, mount, patch, provideHostAdapter, remove, } from '../core/internal.js';
 import { domAdapter } from './domAdapter';
-GLOBAL.hostAdapter = domAdapter;
-export function render(element, parentReference) {
-    mount(element, parentReference, null, null);
+import { attachElementToDom, getElementFromDom } from './attach-element-to-dom';
+provideHostAdapter(domAdapter);
+export function render(element, container) {
+    if (!container) {
+        return;
+    }
+    const currentRootElement = getElementFromDom(container);
+    asyncRerenderLocker.lock();
+    if (!currentRootElement) {
+        if (element) {
+            hostAdapter.clearNode(container);
+            attachElementToDom((element.parent = { flag: 'HOST', reference: container, children: element, parent: null }), container);
+            mount(element, container, null, null, hostAdapter.getHostNamespaces(element, undefined)?.self);
+        }
+    }
+    else {
+        if (!element) {
+            remove(currentRootElement.children, container);
+            currentRootElement.children = null;
+        }
+        else {
+            const prevChildren = currentRootElement.children;
+            currentRootElement.children = element;
+            element.parent = currentRootElement;
+            patch(prevChildren, element, container, null, null, hostAdapter.getHostNamespaces(element, undefined)?.self);
+        }
+    }
+    asyncRerenderLocker.flush();
 }
 export function createRoot(container) {
-    let currentRoot = container.__SIMP_ROOT__;
     return {
         render(element) {
-            if (currentRoot) {
-                patch(currentRoot, element, container, null, null);
-            }
-            else {
-                GLOBAL.hostAdapter.clearNode(container);
-                mount(element, container, null, null);
-            }
-            currentRoot = element;
-            container.__SIMP_ROOT__ = currentRoot;
+            render(element, container);
         },
         unmount() {
-            // if (currentRoot != null) {
-            //   enqueueRender(currentRoot, null);
-            //   currentRoot = null;
-            // }
-            currentRoot = null;
+            render(null, container);
         },
     };
 }