Merge pull request #722 from robinweser/targetDocument-support

Support for targetDocument

Author: robinweser

packages/fela-bindings/src/RendererProviderFactory.js

@@ -2,18 +2,18 @@
 import { render, rehydrate } from 'fela-dom'
 import objectEach from 'fast-loops/lib/objectEach'
 
-function hasDOM(renderer) {
+function hasDOM(renderer, targetDocument = document) {
   return (
     renderer &&
     !renderer.isNativeRenderer &&
     typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement
+    targetDocument &&
+    targetDocument.createElement
   )
 }
 
-function hasServerRenderedStyle() {
-  return window.document.querySelectorAll('[data-fela-type]').length > 0
+function hasServerRenderedStyle(targetDocument = document) {
+  return targetDocument.querySelectorAll('[data-fela-type]').length > 0
 }
 
 export default function RendererProviderFactory(
@@ -27,11 +27,26 @@ export default function RendererProviderFactory(
     constructor(props: Object, context: Object) {
       super(props, context)
 
-      if (hasDOM(props.renderer)) {
-        if (props.rehydrate && hasServerRenderedStyle()) {
-          rehydrate(props.renderer)
+      this._renderStyle()
+    }
+
+    componentDidUpdate(prevProps) {
+      // TODO: we might add a shallow compare to avoid unnecessary rerenders
+      this._renderStyle()
+    }
+
+    _renderStyle() {
+      const {
+        renderer,
+        rehydrate: shouldRehydrate,
+        targetDocument,
+      } = this.props
+
+      if (hasDOM(renderer, targetDocument)) {
+        if (shouldRehydrate && hasServerRenderedStyle(targetDocument)) {
+          rehydrate(renderer, targetDocument)
         } else {
-          render(props.renderer)
+          render(renderer, targetDocument)
         }
       }
     }

packages/fela-dom/src/dom/connection/createNode.js

@@ -6,11 +6,12 @@ import type { NodeAttributes } from '../../../../../flowtypes/DOMNode'
 export default function createNode(
   nodes: Object,
   score: number,
-  { type, media, support }: NodeAttributes
+  { type, media, support }: NodeAttributes,
+  targetDocument: any = document
 ): Object {
-  const head = document.head || {}
+  const head = targetDocument.head || {}
 
-  const node = document.createElement('style')
+  const node = targetDocument.createElement('style')
   node.setAttribute('data-fela-type', type)
   node.type = 'text/css'
 

packages/fela-dom/src/dom/connection/createSubscription.js

@@ -15,7 +15,10 @@ import insertRule from './insertRule'
 
 import type { DOMRenderer } from '../../../../../flowtypes/DOMRenderer'
 
-export default function createSubscription(renderer: DOMRenderer): Function {
+export default function createSubscription(
+  renderer: DOMRenderer,
+  targetDocument: any = document
+): Function {
   return change => {
     if (change.type === CLEAR_TYPE) {
       objectEach(renderer.nodes, ({ node }) =>
@@ -27,7 +30,7 @@ export default function createSubscription(renderer: DOMRenderer): Function {
       return
     }
 
-    const node = getNodeFromCache(change, renderer)
+    const node = getNodeFromCache(change, renderer, targetDocument)
 
     switch (change.type) {
       case KEYFRAME_TYPE:

packages/fela-dom/src/dom/connection/getNodeFromCache.js

@@ -16,14 +16,16 @@ function getReference({
 
 export default function getNodeFromCache(
   attributes: NodeAttributes,
-  renderer: DOMRenderer
+  renderer: DOMRenderer,
+  targetDocument: any = document
 ): Object {
   const reference = getReference(attributes)
 
   if (!renderer.nodes[reference]) {
     const score = calculateNodeScore(attributes, renderer.mediaQueryOrder)
     const node =
-      queryNode(attributes) || createNode(renderer.nodes, score, attributes)
+      queryNode(attributes, targetDocument) ||
+      createNode(renderer.nodes, score, attributes, targetDocument)
 
     renderer.nodes[reference] = {
       node,

packages/fela-dom/src/dom/connection/queryNode.js

@@ -3,14 +3,14 @@ import type { NodeAttributes } from '../../../../../flowtypes/DOMNode'
 
 export default function queryNode(
   { type, media, support }: NodeAttributes,
-  id?: string = ''
+  targetDocument: any = document
 ): ?Object {
   const mediaQuery = media ? `[media="${media}"]` : ':not([media])'
   const supportQuery = support
     ? '[data-fela-support="true"]'
     : ':not([data-fela-support="true"])'
 
-  return document.querySelector(
+  return targetDocument.querySelector(
     `[data-fela-type="${type}"]${supportQuery}${mediaQuery}`
   )
 }

packages/fela-dom/src/dom/rehydrate.js

@@ -14,10 +14,13 @@ const CLASSNAME_REGEX = /[.][a-z0-9_-]*/gi
 
 // rehydration (WIP)
 // TODO: static, keyframe, font
-export default function rehydrate(renderer: DOMRenderer): void {
-  render(renderer)
+export default function rehydrate(
+  renderer: DOMRenderer,
+  targetDocument: any = document
+): void {
+  render(renderer, targetDocument)
 
-  arrayEach(document.querySelectorAll('[data-fela-type]'), node => {
+  arrayEach(targetDocument.querySelectorAll('[data-fela-type]'), node => {
     const rehydrationAttribute =
       node.getAttribute('data-fela-rehydration') || -1
     const rehydrationIndex =

packages/fela-dom/src/dom/render.js

@@ -5,12 +5,15 @@ import createSubscription from './connection/createSubscription'
 
 import type { DOMRenderer } from '../../../../flowtypes/DOMRenderer'
 
-export default function render(renderer: DOMRenderer): void {
+export default function render(
+  renderer: DOMRenderer,
+  targetDocument?: any
+): void {
   if (!renderer.updateSubscription) {
     renderer.scoreIndex = {}
     renderer.nodes = {}
 
-    renderer.updateSubscription = createSubscription(renderer)
+    renderer.updateSubscription = createSubscription(renderer, targetDocument)
     renderer.subscribe(renderer.updateSubscription)
 
     // simulate rendering to ensure all styles rendered prior to

packages/fela/README.md

@@ -211,6 +211,7 @@ Don't want to miss any update? Follow us on [Twitter](https://twitter.com/felajs
 - [Kilix](http://kilix.fr)
 - [Lusk](https://lusk.io)
 - [MediaFire](https://m.mediafire.com)
+- [Microsoft](https://microsoft.com)
 - [N26](https://n26.com)
 - [Net-A-Porter](https://www.net-a-porter.com/gb/en/porter)
 - [NinjaConcept](https://www.ninjaconcept.com)

yarn.lock

@@ -7216,13 +7216,6 @@ fela-dom@4.2.6:
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-4.2.6.tgz#fb8b618a3cb9e87a4ae15c438389a2a7057ebb31"
 
-fela-plugin-extend@^5.0.11:
-  version "5.0.12"
-  resolved "https://registry.yarnpkg.com/fela-plugin-extend/-/fela-plugin-extend-5.0.12.tgz#f3065fd0dc25e586c4e23a67448657c35a573ec0"
-  dependencies:
-    css-in-js-utils "2.0.0"
-    fela-utils "^7.0.4"
-
 fela-plugin-lvha@^5.0.16:
   version "5.0.16"
   resolved "https://registry.yarnpkg.com/fela-plugin-lvha/-/fela-plugin-lvha-5.0.16.tgz#f20cb7d73755ea123fb87acf19a5aca38001d72b"
@@ -7235,7 +7228,7 @@ fela-plugin-named-media-query@^5.0.13:
   dependencies:
     fela-utils "^7.0.5"
 
-fela-utils@^7.0.4, fela-utils@^7.0.5:
+fela-utils@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-7.0.5.tgz#62397db8abf8294bb160ba7575b31d68495283b2"
   dependencies: