partial upgrade to inferno@6 (excludes storybook)

WIP until inferno issues are resolved

* infernojs/inferno-typescript-example#13
* infernojs/inferno#1410

package.json

@@ -20,11 +20,11 @@
   "scripts": {
     "stage": "bin/git-stage git.zenyway.com:staging.zenypass.git dist staging",
     "deploy": "bin/git-deploy git.zenyway.com:production.zenypass.git dist production",
-    "debug": "budo --open --live --host 127.0.0.1 --port 6510 --dir src/static/ src/index.tsx:index.js -- --extension=.tsx -t [ envify purge --NODE_ENV=development --ZP_VERSION=$npm_package_version ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -t brfs --debug -v",
+    "debug": "budo --open --live --host 127.0.0.1 --port 6510 --dir src/static/ src/index.tsx:index.js -- -g [ envify purge --NODE_ENV=development --ZP_VERSION=$npm_package_version ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -t brfs --debug -v",
     "dist:clean": "mkdirp dist && rimraf dist/*",
     "dist": "npm run dist:production",
-    "dist:production": "npm run dist:clean && npm run dist:static && browserify src/index.tsx --extension=.tsx -t [ envify purge --NODE_ENV=production --ZP_VERSION=$npm_package_version ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -t brfs -g uglifyify -p bundle-collapser/plugin -p [ common-shakeify -v ] | uglifyjs -c -m toplevel > dist/index.js",
-    "dist:staging": "npm run dist:clean && npm run dist:static && browserify src/index.tsx --extension=.tsx -t [ envify purge --NODE_ENV=staging --ZP_VERSION=$npm_package_version ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -t brfs -g uglifyify -p bundle-collapser/plugin -p [ common-shakeify -v ] | uglifyjs -c -m toplevel > dist/index.js",
+    "dist:production": "npm run dist:clean && npm run dist:static && browserify src/index.tsx -g [ envify purge --NODE_ENV=production --ZP_VERSION=$npm_package_version ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -g uglifyify -p [ common-shakeify -v ] -p browser-pack-flat/plugin | terser -c -m --toplevel > dist/index.js",
+    "dist:staging": "npm run dist:clean && npm run dist:static && browserify src/index.tsx -g [ envify purge --NODE_ENV=staging --ZP_VERSION=$npm_package_version ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -g uglifyify -p [ common-shakeify -v ] -p browser-pack-flat/plugin | terser -c -m --toplevel > dist/index.js",
     "dist:static": "cpx \"src/favicons/*\" dist && cpx \"src/static/**/*\" dist",
     "prepublish": "npm run dist",
     "pretest": "mkdirp spec/reports && rimraf spec/reports/*",
@@ -33,7 +33,7 @@
     "test:hocs": "jasmine-ts \"spec/hocs/**/*.spec.ts\"",
     "pretest:ci": "mkdirp spec/reports/coverage && rimraf spec/reports/coverage",
     "serve": "http-server -c-1 -i -e html -o -p 6510 dist",
-    "debug:ssl": "budo --ssl --live --open --port 6510 --dir src/static/ src/index.tsx:index.js -- --extension=.tsx -t [ envify purge --NODE_ENV development ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify -t brfs --debug -v",
+    "debug:ssl": "budo --ssl --live --open --port 6510 --dir src/static/ src/index.tsx:index.js -- -g [ envify purge --NODE_ENV development ] -t [ browserify-markdown --breaks false ] -p [ tsify -p src ] -t imgurify --debug -v",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "start": "npm run dist && npm run serve",
     "test:ci:coveralls": "cat spec/reports/coverage/lcov.info | sed -e 's/SF:\\.\\.\\//SF:/' | coveralls",
@@ -70,9 +70,9 @@
     "component-from-stream": "^0.17.2",
     "component-from-stream-redux": "^0.5.7",
     "debug": "^4.1.0",
-    "inferno": "^5.6.1",
-    "inferno-bootstrap": "^5.1.4",
-    "inferno-create-element": "^5.6.1",
+    "inferno": "^6.1.1",
+    "inferno-bootstrap": "^6.0.1",
+    "inferno-create-element": "^6.1.1",
     "rxjs": "^6.3.3",
     "typestyle": "^2.0.1"
   },
@@ -82,16 +82,16 @@
     "@storybook/react": "^3.4.11",
     "@types/debug": "0.0.31",
     "@types/jasmine": "^2.8.9",
-    "@types/node": "^10.12.0",
+    "@types/node": "^10.12.1",
     "aliasify": "^2.1.0",
     "babel-core": "^6.26.3",
     "brfs": "^2.0.1",
+    "browser-pack-flat": "^3.2.0",
     "browserify": "^16.2.3",
     "browserify-istanbul": "^2.0.0",
     "browserify-licenses": "^1.4.6",
     "browserify-markdown": "^2.0.1",
     "budo": "^11.5.0",
-    "bundle-collapser": "^1.3.0",
     "common-shakeify": "^0.4.6",
     "concurrently": "^4.0.1",
     "coveralls": "^3.0.2",
@@ -101,19 +101,19 @@
     "extract-zip": "^1.6.7",
     "http-server": "^0.11.1",
     "imgurify": "^2.0.1",
-    "inferno-clone-vnode": "^5.6.1",
-    "inferno-compat": "^5.6.1",
-    "inferno-create-class": "^5.6.1",
-    "inferno-devtools": "^5.6.1",
-    "jasmine-core": "^3.2.1",
+    "inferno-clone-vnode": "^6.1.1",
+    "inferno-compat": "^6.1.1",
+    "inferno-create-class": "^6.1.1",
+    "inferno-devtools": "^6.1.1",
+    "jasmine-core": "^3.3.0",
     "jasmine-ts": "^0.3.0",
-    "karma": "^3.0.0",
+    "karma": "^3.1.1",
     "karma-browserify": "^5.3.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.2",
     "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^1.1.2",
-    "karma-jasmine-html-reporter": "^1.3.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
     "karma-junit-reporter": "^1.2.0",
     "karma-safari-launcher": "^1.0.0",
     "karma-spec-reporter": "0.0.32",
@@ -128,7 +128,7 @@
     "tsify": "^4.0.0",
     "tslint": "^5.11.0",
     "tslint-config-standard": "^8.0.1",
-    "typescript": "^3.1.3",
+    "typescript": "^3.1.4",
     "typescript-eslint-parser": "^20.0.0",
     "uglify-es": "^3.3.9",
     "uglifyify": "^5.0.1",

src/bootstrap/collapse.tsx

@@ -14,13 +14,12 @@
  * Limitations under the License.
  */
 /** @jsx createElement */
-import { createElement, Children } from 'create-element'
+import { createElement } from 'create-element'
 import { classes } from 'utils'
 
 export interface CollapseProps {
   isOpen?: boolean
   navbar?: boolean
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }

src/bootstrap/dropdown.tsx

@@ -14,7 +14,7 @@
  * Limitations under the License.
  */
 /** @jsx createElement */
-import { createElement, Children } from 'create-element'
+import { createElement } from 'create-element'
 import { classes } from 'utils'
 import { orDefaultHref } from './utils'
 import { Button } from './button'
@@ -27,7 +27,6 @@ export interface DropdownProps {
   active?: boolean
   disabled?: boolean
   className?: string
-  children?: Children
   tag?: string
   innerRef?: (element?: HTMLElement | null) => void
   [prop: string]: unknown
@@ -60,7 +59,6 @@ export function Dropdown ({
 
 export interface DropdownDividerProps {
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -82,7 +80,6 @@ export function DropdownDivider ({
 
 export interface DropdownHeaderProps {
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -106,7 +103,6 @@ export interface DropdownItemProps {
   active?: boolean
   href?: string
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -138,7 +134,6 @@ export interface DropdownMenuProps {
   expanded?: boolean
   right?: boolean
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -169,7 +164,6 @@ export interface DropdownToggleProps {
   nav?: boolean
   href?: string
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }

src/bootstrap/nav.tsx

@@ -14,7 +14,7 @@
  * Limitations under the License.
  */
 /** @jsx createElement */
-import { createElement, Children } from 'create-element'
+import { createElement } from 'create-element'
 import { classes } from 'utils'
 import { orDefaultHref } from './utils'
 
@@ -28,7 +28,6 @@ export interface NavProps {
   navbar?: boolean
   card?: boolean
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -74,7 +73,6 @@ export interface NavbarProps {
   sticky?: boolean
   color?: string
   className?: string
-  children?: Children
   tag?: string
   innerRef?: (element?: HTMLElement | null) => void
   [prop: string]: unknown
@@ -113,7 +111,6 @@ export function Navbar ({
 export interface NavbarBrandProps {
   href?: string
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -134,7 +131,6 @@ export function NavbarBrand ({
 
 export interface NavbarTogglerProps {
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -159,7 +155,6 @@ export interface NavItemProps {
   active?: boolean
   disabled?: boolean
   className?: string
-  children?: Children
   tag?: string
   [prop: string]: unknown
 }
@@ -189,7 +184,6 @@ export interface NavLinkProps {
   disabled?: boolean
   active?: boolean
   className?: string
-  children?: Children
   onClick? (event: MouseEvent): void
   tag?: string
   [prop: string]: unknown

src/component-from-events.ts

@@ -16,9 +16,9 @@
 import redux, { connect as _connect, Reducer } from 'component-from-stream-redux'
 import componentFromStream, {
   Component,
-  ComponentClass,
+  ComponentConstructor,
   ComponentFromStreamConstructor,
-  Children,
+  ComponentType,
   OperatorFactory,
   SFC
 } from './component-from-props'
@@ -27,11 +27,11 @@ import { createActionFactory, StandardAction } from 'basic-fsa-factories'
 import compose from 'basic-compose'
 
 export {
-  Children,
   Component,
-  ComponentClass,
+  ComponentConstructor,
   ComponentFromStreamConstructor,
   componentFromStream,
+  ComponentType,
   OperatorFactory,
   SFC,
   redux,
@@ -48,7 +48,7 @@ export function connect <S= {},P= {}> (
 }
 
 export default function <P, Q>(
-  render: (props: Q) => Children,
+  render: SFC<Q>,
   factory: OperatorFactory<StandardAction<P>, any, any>,
   ...factories: OperatorFactory<StandardAction<P>, any, any>[]
 ) {
@@ -57,5 +57,5 @@ export default function <P, Q>(
     createActionFactory('PROPS'),
     factory,
     ...factories
-  ) as ComponentClass<P>
+  ) as ComponentConstructor<P>
 }

src/component-from-props.ts

@@ -19,21 +19,28 @@ import createComponentFromStreamFactory, {
   Operator as GenericOperator,
   OperatorFactory as GenericOperatorFactory
 } from 'component-from-stream'
-import { Component, ComponentClass, Children, SFC } from 'create-element'
+import {
+  Component,
+  ComponentConstructor,
+  ComponentType,
+  Node,
+  SFC
+} from 'create-element'
 import { Observable, from } from 'rxjs'
 
 export {
-  Children,
   Component,
-  ComponentClass,
+  ComponentConstructor,
   ComponentFromStreamConstructor,
   ComponentFromStreamFactory,
+  ComponentType,
+  Node,
   SFC
 }
 export type Operator<I= {},O= I> = GenericOperator<I,O,Observable<I>,Observable<O>>
 export type OperatorFactory<A= void,I= {},O= I> =
   GenericOperatorFactory<A,I,O,Observable<I>,Observable<O>>
 
-const componentFromStream = createComponentFromStreamFactory(Component, from) as ComponentFromStreamFactory<Component<any, any>, Children>
+const componentFromStream = createComponentFromStreamFactory(Component, from) as ComponentFromStreamFactory<Component<any, any>, Node>
 
 export default componentFromStream

src/components/sfcs/navbar-menu.tsx

@@ -15,7 +15,7 @@
  * Limitations under the License.
  */
 /** @jsx createElement */
-import { createElement, Children } from 'create-element'
+import { createElement } from 'create-element'
 import {
   Collapse,
   Nav,
@@ -33,21 +33,21 @@ import { ZENYPASS_LOGO_SVG } from 'static'
 export interface NavbarMenuProps {
   menu?: MenuSpecs
   expanded?: boolean
-  children?: Children
   onClickItem?: (event: MouseEvent) => void
   onClickToggle?: (event: MouseEvent) => void
   innerRef?: (element?: HTMLElement | null) => void
+  [prop: string]: unknown
 }
 
 export interface MenuSpecs extends Array<DropdownItemsProps[] | DropdownItemsProps> {}
 
 export function NavbarMenu ({
   menu = [],
   expanded,
-  children,
   onClickItem,
   onClickToggle,
-  innerRef
+  innerRef,
+  ...attrs
 }: NavbarMenuProps) {
   return (
     <Navbar
@@ -60,7 +60,7 @@ export function NavbarMenu ({
         <img height='32' src={ZENYPASS_LOGO_SVG}/>
         <small>&nbsp;ZenyPass</small>
       </NavbarBrand>
-      <span>{ children /* TODO replace wrapping span with Fragment */}</span>
+      <span {...attrs} />
       <NavbarToggler onClick={onClickToggle} />
       <Collapse navbar isOpen={expanded} >
         <Nav className='ml-auto' navbar>

src/components/sfcs/with-authentication.tsx

@@ -14,7 +14,7 @@
  * Limitations under the License.
  */
 /** @jsx createElement */
-import { createElement, ComponentClass, SFC } from 'create-element'
+import { createElement, ComponentType, Fragment, SFC } from 'create-element'
 import { AuthenticationModal } from '../authentication-modal'
 import { Observer } from 'rxjs'
 
@@ -27,10 +27,17 @@ export interface AuthenticationProviderProps {
   onAuthenticationRejected?: () => void
 }
 
+export interface AuthenticationConsumerProps {
+  locale: string
+  session?: string
+  onAuthenticationRequest?: (res$: Observer<string>) => void
+  [prop: string]: unknown
+}
+
 export function withAuthenticationModal <
-  P extends { session?: string, locale?: string, [prop: string]: unknown }
+  P extends {} = {}
 > (
-  PrivilegedComponent: ComponentClass<P> | SFC<P>
+  PrivilegedComponent: ComponentType<P & AuthenticationConsumerProps>
 ): SFC<AuthenticationProviderProps & P> {
   return function ({
       locale,
@@ -39,17 +46,16 @@ export function withAuthenticationModal <
       onAuthenticationRejected,
       ...attrs
     }: AuthenticationProviderProps) {
-    // TODO replace <div> with <Fragment>
     return (
-      <div>
+      <Fragment>
         <AuthenticationModal
           locale={locale}
           authenticate={authenticate}
           onCancelled={onAuthenticationRejected}
           onAuthenticated={onAuthenticationResolved}
         />
         <PrivilegedComponent locale={locale} {...attrs} />
-      </div>
+      </Fragment>
     )
   }
 }