Merge branch 'master' into improve-types

kof · kof · commit cb2af91a2eb9 · 2019-03-11T13:42:26.000+01:00
diff --git a/changelog.md b/changelog.md
@@ -6,6 +6,7 @@
 
 ### Improvements
 
+- [jss] Remove VirtualRenderer and the option `virtual: true`. Now to simulate a non-browser environment, pass `create({Renderer: null})` when creating a Jss instance.
 - [react-jss] Add dynamic rules to the static sheet ([#1048](https://github.com/cssinjs/jss/pull/1048))
 
 ## 10.0.0-alpha.12 (2019-2-27)
diff --git a/docs/jss-api.md b/docs/jss-api.md
@@ -47,7 +47,7 @@ Options:
 
 - `createGenerateId` - a function which returns a function which generates unique class names.
 - `plugins` - an array of functions, will be passed to `jss.use`.
-- `virtual` - if true, JSS will use VirtualRenderer.
+- `Renderer` - if null, JSS will not render to DOM, or pass a custom Renderer.
 - `insertionPoint` - string value of a DOM comment node which marks the start of sheets or a rendered DOM node. Sheets rendered by this Jss instance are inserted after this point sequentially.
 
 **Note**: Each `jss.setup()` call will perform a shallow merge with the old options except for `plugins`. Passed `plugins` will get added to the existing plugins.
diff --git a/packages/jss-plugin-template/benchmark/tests/createSheet.js b/packages/jss-plugin-template/benchmark/tests/createSheet.js
@@ -3,7 +3,7 @@ import {create} from 'jss'
 import template from '../../src/index'
 import parse from '../../src/parse'
 
-const options = {virtual: true}
+const options = {Renderer: null}
 const jss = create(options).use(template())
 
 const css = `
diff --git a/packages/jss/.size-snapshot.json b/packages/jss/.size-snapshot.json
@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 59644,
-    "minified": 22179,
-    "gzipped": 6636
+    "bundled": 58916,
+    "minified": 21875,
+    "gzipped": 6588
   },
   "dist/jss.min.js": {
-    "bundled": 58478,
-    "minified": 21261,
-    "gzipped": 6190
+    "bundled": 57750,
+    "minified": 20957,
+    "gzipped": 6147
   },
   "dist/jss.cjs.js": {
-    "bundled": 55048,
-    "minified": 24138,
-    "gzipped": 6689
+    "bundled": 54372,
+    "minified": 23786,
+    "gzipped": 6637
   },
   "dist/jss.esm.js": {
-    "bundled": 54552,
-    "minified": 23734,
-    "gzipped": 6607,
+    "bundled": 53876,
+    "minified": 23382,
+    "gzipped": 6555,
     "treeshaked": {
       "rollup": {
-        "code": 19321,
+        "code": 19017,
         "import_statements": 281
       },
       "webpack": {
-        "code": 20736
+        "code": 20432
       }
     }
   }
diff --git a/packages/jss/benchmark/tests/bootstrap.js b/packages/jss/benchmark/tests/bootstrap.js
@@ -4,7 +4,7 @@ import global from 'jss-plugin-global'
 import styles from '../fixtures/bootstrap.json'
 
 // Avoid memory leak with registry.
-const options = {virtual: true}
+const options = {Renderer: null}
 const jssWithoutGlobal = create(options)
 const jssWithGlobal = create(options).use(global())
 
diff --git a/packages/jss/benchmark/tests/conditional-regular.js b/packages/jss/benchmark/tests/conditional-regular.js
@@ -3,7 +3,7 @@ import conditional from '../fixtures/conditional.json'
 import regular from '../fixtures/regular.json'
 
 // Avoid memory leak with registry.
-const options = {virtual: true}
+const options = {Renderer: null}
 
 suite('Conditional vs. regular rules to CSS', () => {
   benchmark('conditionals .toString()', () => {
diff --git a/packages/jss/benchmark/tests/create-instance.js b/packages/jss/benchmark/tests/create-instance.js
@@ -2,7 +2,7 @@ import {create} from 'jss'
 import preset from 'jss-preset-default'
 
 // Avoid memory leak with registry.
-const options = {virtual: true}
+const options = {Renderer: null}
 
 suite('create a new instance', () => {
   benchmark('without preset', () => {
diff --git a/packages/jss/src/DomRenderer.js b/packages/jss/src/DomRenderer.js
@@ -1,20 +1,21 @@
 /* @flow */
 import warning from 'tiny-warning'
-import sheets from '../sheets'
-import toCssValue from '../utils/toCssValue'
+import sheets from './sheets'
+import toCssValue from './utils/toCssValue'
 import type {
   CSSStyleRule,
   CSSMediaRule,
   CSSKeyframesRule,
   CSSKeyframeRule,
   HTMLElementWithStyleMap,
+  AnyCSSRule,
   Rule,
   RuleList,
   ContainerRule,
   JssValue,
   InsertionPoint,
   StyleSheet
-} from '../types'
+} from './types'
 
 type PriorityOptions = {
   index: number,
@@ -184,7 +185,7 @@ function findPrevNode(options: PriorityOptions): PrevNode | false {
   if (registry.length > 0) {
     // Try to insert before the next higher sheet.
     let sheet = findHigherSheet(registry, options)
-    if (sheet) {
+    if (sheet && sheet.renderer) {
       return {
         parent: sheet.renderer.element.parentNode,
         node: sheet.renderer.element
@@ -193,7 +194,7 @@ function findPrevNode(options: PriorityOptions): PrevNode | false {
 
     // Otherwise insert after the last attached.
     sheet = findHighestSheet(registry, options)
-    if (sheet) {
+    if (sheet && sheet.renderer) {
       return {
         parent: sheet.renderer.element.parentNode,
         node: sheet.renderer.element.nextSibling
@@ -299,7 +300,7 @@ export default class DomRenderer {
   // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
   element: any
 
-  sheet: ?StyleSheet
+  sheet: StyleSheet | void
 
   hasInsertedRules: boolean = false
 
@@ -373,7 +374,7 @@ export default class DomRenderer {
     rule: Rule,
     index?: number,
     nativeParent?: CSSStyleSheet | CSSMediaRule | CSSKeyframesRule = this.element.sheet
-  ): false | CSSStyleSheet | CSSMediaRule | CSSKeyframesRule | CSSRule {
+  ): false | CSSStyleSheet | AnyCSSRule {
     if (rule.rules) {
       const parent: ContainerRule = (rule: any)
       let latestNativeParent = nativeParent
@@ -405,7 +406,7 @@ export default class DomRenderer {
   /**
    * Delete a rule.
    */
-  deleteRule(cssRule: CSSRule): boolean {
+  deleteRule(cssRule: AnyCSSRule): boolean {
     const {sheet} = this.element
     const index = this.indexOf(cssRule)
     if (index === -1) return false
@@ -416,7 +417,7 @@ export default class DomRenderer {
   /**
    * Get index of a CSS Rule.
    */
-  indexOf(cssRule: CSSRule): number {
+  indexOf(cssRule: AnyCSSRule): number {
     const {cssRules} = this.element.sheet
     for (let index = 0; index < cssRules.length; index++) {
       if (cssRule === cssRules[index]) return index
@@ -429,10 +430,7 @@ export default class DomRenderer {
    *
    * Only used for some old browsers because they can't set a selector.
    */
-  replaceRule(
-    cssRule: CSSRule,
-    rule: Rule
-  ): false | CSSStyleSheet | CSSMediaRule | CSSKeyframesRule | CSSRule {
+  replaceRule(cssRule: AnyCSSRule, rule: Rule): false | CSSStyleSheet | AnyCSSRule {
     const index = this.indexOf(cssRule)
     if (index === -1) return false
     this.element.sheet.deleteRule(index)
diff --git a/packages/jss/src/Jss.js b/packages/jss/src/Jss.js
@@ -6,8 +6,7 @@ import sheets from './sheets'
 import {plugins as internalPlugins} from './plugins/index'
 import createGenerateIdDefault from './utils/createGenerateId'
 import createRule from './utils/createRule'
-import DomRenderer from './renderers/DomRenderer'
-import VirtualRenderer from './renderers/VirtualRenderer'
+import DomRenderer from './DomRenderer'
 import type {
   Rule,
   RuleFactoryOptions,
@@ -31,7 +30,7 @@ export default class Jss {
 
   options: InternalJssOptions = {
     createGenerateId: createGenerateIdDefault,
-    Renderer: isInBrowser ? DomRenderer : VirtualRenderer,
+    Renderer: isInBrowser ? DomRenderer : null,
     plugins: []
   }
 
@@ -57,8 +56,8 @@ export default class Jss {
     }
 
     if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint
-    if (options.virtual || options.Renderer) {
-      this.options.Renderer = options.Renderer || (options.virtual ? VirtualRenderer : DomRenderer)
+    if ('Renderer' in options) {
+      this.options.Renderer = options.Renderer
     }
 
     // eslint-disable-next-line prefer-spread
diff --git a/packages/jss/src/StyleSheet.js b/packages/jss/src/StyleSheet.js
@@ -10,7 +10,8 @@ import type {
   JssStyle,
   Classes,
   KeyframesMap,
-  JssStyles
+  JssStyles,
+  Renderer
 } from './types'
 
 export default class StyleSheet {
@@ -22,7 +23,7 @@ export default class StyleSheet {
 
   rules: RuleList
 
-  renderer: Object
+  renderer: Renderer | null
 
   classes: Classes
 
@@ -42,7 +43,9 @@ export default class StyleSheet {
       classes: this.classes,
       keyframes: this.keyframes
     }
-    this.renderer = new options.Renderer(this)
+    if (options.Renderer) {
+      this.renderer = new options.Renderer(this)
+    }
     this.rules = new RuleList(this.options)
 
     for (const name in styles) {
@@ -56,7 +59,7 @@ export default class StyleSheet {
    * Attach renderable to the render tree.
    */
   attach(): this {
-    if (this.attached) return this
+    if (this.attached || !this.renderer) return this
     this.renderer.attach()
     this.attached = true
     // Order is important, because we can't use insertRule API if style element is not attached.
@@ -68,7 +71,7 @@ export default class StyleSheet {
    * Remove renderable from render tree.
    */
   detach(): this {
-    if (!this.attached) return this
+    if (!this.attached || !this.renderer) return this
     this.renderer.detach()
     this.attached = false
     return this
@@ -118,7 +121,9 @@ export default class StyleSheet {
    * Insert rule into the StyleSheet
    */
   insertRule(rule: Rule) {
-    this.renderer.insertRule(rule)
+    if (this.renderer) {
+      this.renderer.insertRule(rule)
+    }
   }
 
   /**
@@ -152,7 +157,7 @@ export default class StyleSheet {
 
     this.rules.remove(rule)
 
-    if (this.attached && rule.renderable) {
+    if (this.attached && rule.renderable && this.renderer) {
       return this.renderer.deleteRule(rule.renderable)
     }
 
@@ -170,8 +175,10 @@ export default class StyleSheet {
    * Deploy pure CSS string to a renderable.
    */
   deploy(): this {
-    this.renderer.deploy()
-    this.deployed = true
+    if (this.renderer) {
+      this.renderer.deploy()
+      this.deployed = true
+    }
     return this
   }
 
diff --git a/packages/jss/src/index.d.ts b/packages/jss/src/index.d.ts
@@ -200,8 +200,7 @@ export interface StyleSheet<RuleName extends string = string> {
 export interface JssOptions {
   createGenerateId: CreateGenerateId
   plugins: ReadonlyArray<Plugin>
-  virtual: boolean
-  Renderer?: Renderer
+  Renderer?: Renderer | null
   insertionPoint: InsertionPoint
 }
 
diff --git a/packages/jss/src/plugins/simpleRule.js b/packages/jss/src/plugins/simpleRule.js
@@ -1,5 +1,13 @@
 /* @flow */
-import type {CSSSimpleRule, RuleOptions, JssStyle, ToCssOptions, BaseRule} from '../types'
+import type {
+  CSSCharsetRule,
+  CSSImportRule,
+  CSSNamespaceRule,
+  RuleOptions,
+  JssStyle,
+  ToCssOptions,
+  BaseRule
+} from '../types'
 
 export class SimpleRule implements BaseRule {
   type = 'simple'
@@ -12,7 +20,7 @@ export class SimpleRule implements BaseRule {
 
   isProcessed: boolean = false
 
-  renderable: ?CSSSimpleRule
+  renderable: ?CSSCharsetRule | CSSImportRule | CSSNamespaceRule
 
   constructor(key: string, value: string, options: RuleOptions) {
     this.key = key
diff --git a/packages/jss/src/plugins/styleRule.js b/packages/jss/src/plugins/styleRule.js
@@ -24,7 +24,7 @@ export class BaseStyleRule implements BaseRule {
 
   style: JssStyle
 
-  renderer: RendererInterface
+  renderer: RendererInterface | null
 
   renderable: ?Object
 
@@ -35,7 +35,8 @@ export class BaseStyleRule implements BaseRule {
     this.key = key
     this.options = options
     this.style = style
-    this.renderer = sheet ? sheet.renderer : new Renderer()
+    if (sheet) this.renderer = sheet.renderer
+    else if (Renderer) this.renderer = new Renderer()
   }
 
   /**
@@ -67,7 +68,7 @@ export class BaseStyleRule implements BaseRule {
     else this.style[name] = newValue
 
     // Renderable is defined if StyleSheet option `link` is true.
-    if (this.renderable) {
+    if (this.renderable && this.renderer) {
       if (remove) this.renderer.removeProperty(this.renderable, name)
       else this.renderer.setProperty(this.renderable, name, newValue)
       return this
@@ -109,13 +110,15 @@ export class StyleRule extends BaseStyleRule {
 
     this.selectorText = selector
 
-    if (!this.renderable) return
+    const {renderer, renderable} = this
 
-    const hasChanged = this.renderer.setSelector(this.renderable, selector)
+    if (!renderable || !renderer) return
+
+    const hasChanged = renderer.setSelector(renderable, selector)
 
     // If selector setter is not implemented, rerender the rule.
     if (!hasChanged) {
-      this.renderer.replaceRule(((this.renderable: any): CSSRule), this)
+      renderer.replaceRule(renderable, this)
     }
   }
 
@@ -130,8 +133,13 @@ export class StyleRule extends BaseStyleRule {
    * Apply rule to an element inline.
    */
   applyTo(renderable: HTMLElementWithStyleMap): this {
-    const json = this.toJSON()
-    for (const prop in json) this.renderer.setProperty(renderable, prop, json[prop])
+    const {renderer} = this
+    if (renderer) {
+      const json = this.toJSON()
+      for (const prop in json) {
+        renderer.setProperty(renderable, prop, json[prop])
+      }
+    }
     return this
   }
 
diff --git a/packages/jss/src/renderers/VirtualRenderer.js b/packages/jss/src/renderers/VirtualRenderer.js
diff --git a/packages/jss/src/types/cssom.js b/packages/jss/src/types/cssom.js
diff --git a/packages/jss/src/types/jss.js b/packages/jss/src/types/jss.js
diff --git a/packages/jss/tests/functional/sheet.js b/packages/jss/tests/functional/sheet.js
diff --git a/packages/jss/tests/integration/sheetsRegistry.js b/packages/jss/tests/integration/sheetsRegistry.js
diff --git a/packages/jss/tests/unit/Jss.js b/packages/jss/tests/unit/Jss.js
