feat: add more granular root on platforms with custom element (v1 or v0) support

Author: solkimicreb

src/index.js

@@ -1,5 +1,2 @@
-import { observe } from './observer'
-observe(document)
-
 export { default as component } from './component'
 export { register as load } from './loaders'

src/registerRoot.js

@@ -0,0 +1,63 @@
+import setupDom from './setupDom'
+import cleanupDom from './cleanupDom'
+import { observe, unobserve } from './observer'
+
+let documentObserved = false
+
+export default function registerRoot (name, config) {
+  if ('customElements' in window) {
+    registerRootV1(name, config)
+  } else if ('registerElement' in document) {
+    registerRootV0(name, config)
+  } else if (!documentObserved) {
+    observe(document)
+    documentObserved = true
+  }
+}
+
+function registerRootV1 (name, config) {
+  const parentProto = getParentProto(config)
+  const parentConstructor = getParentConstructor(config)
+
+  function RootElement () {
+    return Reflect.construct(parentConstructor, [], RootElement)
+  }
+  const proto = RootElement.prototype
+  proto.connectedCallback = attachedCallback
+  proto.disconnectedCallback = detachedCallback
+  Object.setPrototypeOf(proto, parentProto)
+  Object.setPrototypeOf(RootElement, parentConstructor)
+  customElements.define(name, RootElement, { extends: config.element })
+}
+
+function registerRootV0 (name, config) {
+  const parentProto = getParentProto(config)
+  const proto = Object.create(parentProto)
+  proto.attachedCallback = attachedCallback
+  proto.detachedCallback = detachedCallback
+  document.registerElement(name, { prototype: proto, extends: config.element })
+}
+
+function getParentProto (config) {
+  if (config.element) {
+    return Object.getPrototypeOf(document.createElement(config.element))
+  }
+  return HTMLElement.prototype
+}
+
+function getParentConstructor (config) {
+  if (config.element) {
+    return document.createElement(config.element).constructor
+  }
+  return HTMLElement
+}
+
+function attachedCallback () {
+  setupDom(this)
+  observe(this)
+}
+
+function detachedCallback () {
+  cleanupDom(this)
+  unobserve(this)
+}

src/registry.js

@@ -1,3 +1,4 @@
+import registerRoot from './registerRoot'
 import setupDom from './setupDom'
 import { run as runLoader } from './loaders'
 
@@ -10,7 +11,11 @@ export function register (name, config) {
     throw new Error('double registration')
   }
   registry.set(name, config)
-  processRegistered(name, config)
+  if (config.root) {
+    registerRoot(name, config)
+  } else {
+    processRegistered(name, config)
+  }
 }
 
 function processRegistered (name, config) {
@@ -63,10 +68,10 @@ function upgradeElement (elem, config) {
 }
 
 const originalCreateElement = document.createElement
-document.createElement = function createElement (name, is) {
+document.createElement = function createElement (name, config) {
   const element = originalCreateElement.call(document, name)
-  if (is) {
-    element.setAttribute('is', is)
+  if (config && config.is) {
+    element.setAttribute('is', config.is)
   }
   return element
 }

src/setupDom.js

@@ -14,11 +14,12 @@ export default function setupDom (node) {
 }
 
 function shouldSetupDom (node, parent) {
-  return (
-    !node.$lifecycleStage &&
-    ((parent && parent.$lifecycleStage === 'attached' && parent.$isolate !== true) ||
-    node.$root === node)
-  )
+  const validParent = (parent && parent.$lifecycleStage === 'attached' && parent.$isolate !== true)
+  const isRoot = (node.$root === node)
+  if (validParent && isRoot) {
+    throw new Error('Nested root component.')
+  }
+  return (!node.$lifecycleStage && (validParent || isRoot))
 }
 
 function setupNode (node, parent) {