Update code to use javascript

mobxjs · Feb 6, 2017 · 523a5f7 · 523a5f7
1 parent a699079
commit 523a5f7
Show file tree

Hide file tree

Showing 20 changed files with 206 additions and 145 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "transform-es2015-destructuring",
+    "transform-object-rest-spread",
+	["transform-react-jsx", { "pragma": "h" }]
+  ]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,54 @@
+{
+  // http://eslint.org/docs/rules/
+  "root": true,
+  "parser": "babel-eslint",
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": [1, { "pragma": "h" }],
+      "globalReturn ": true,
+      "impliedStrict": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "semi": 0,
+    "no-var": 0,
+    "vars-on-top": 0,
+    "spaced-comment": 0,
+    "prefer-template": 0,
+    "no-unused-vars": 0,
+    "no-inner-declarations": 0,
+    "consistent-return": 0,
+    "comma-dangle": 0,
+    "no-use-before-define": 0,
+    "no-return-assign": 0,
+    "no-console": 0,
+    "max-len": 0,
+    "arrow-body-style": 0,
+    "new-cap": 0,
+    "quotes": 0,
+    "quote-props": 0,
+    "prefer-arrow-callback": 0,
+    "func-names": 0,
+    "padded-blocks": 0,
+    "keyword-spacing": 0,
+    "no-global-assign": 0,
+    "no-trailing-spaces": 0,
+    "no-unused-expressions": 0,
+    "space-before-function-paren": 0,
+    "global-require": 0,
+    "react/jsx-no-bind": 0,
+    "react/jsx-space-before-closing": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "react/prop-types": 0,
+    "react/prefer-stateless-function": 0
+  }
+}
diff --git a/DOM.js b/DOM.js
@@ -0,0 +1,40 @@
+/* eslint-disable */
+var jsdom = require('jsdom');
+
+// Setup the jsdom environment
+// @see https://github.com/facebook/react/issues/5046
+global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = global.window.navigator;
+global.usingJSDOM = true;
+
+global.chai = require('chai');
+global.expect = global.chai.expect;
+global.SVGElement = global.Element;
+
+//JSDOM doesn't support localStorage by default, so lets just fake it..
+if (!global.window.localStorage) {
+	global.window.localStorage = {
+		getItem() { return '{}'; },
+		setItem() {}
+	};
+}
+
+// take all properties of the window object and also attach it to the
+// mocha global object
+propagateToGlobal(global.window);
+
+// from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
+function propagateToGlobal (window) {
+	for (var key in window) {
+		if (!window.hasOwnProperty(key)) continue;
+		if (key in global) continue;
+
+		global[key] = window[key];
+	}
+}
+if (!global.requestAnimationFrame) {
+	global.requestAnimationFrame = function (func) {
+		setTimeout(func, 1000 / 60);
+	}
+}
diff --git a/README.md b/README.md
@@ -7,10 +7,15 @@
 <img alt="Preact" title="Preact" src="https://cdn.rawgit.com/developit/b4416d5c92b743dbaec1e68bc4c27cda/raw/3235dc508f7eb834ebf48418aea212a05df13db1/preact-logo-trans.svg" width="250">
 </a>
 
+
 This is a fork of [mobx-react](https://github.com/mobxjs/mobx-react) for [Preact](https://preactjs.com/)
 
 This package provides the bindings for [MobX](https://mobxjs.github.io/mobx).
 
+**_It's not really maintained, if someone wants to take over, ping me on github!_**
+
+Consider using [mobx-observer](https://www.npmjs.com/package/mobx-observer) or another library instead.
+
 Exports the `connect`  (or alias `observer`) decorator and some development utilities.
 
 ## Installation

diff --git a/mocha.opts b/mocha.opts
@@ -1,4 +1,6 @@
+-r babel-register
+--require ./DOM.js
 --recursive
 --colors
 
-test/**/*.js
+test/*.js
diff --git a/package.json b/package.json
@@ -36,10 +36,30 @@
     "@types/core-js": "^0.9.35",
     "@types/mocha": "^2.2.39",
     "@types/node": "^7.0.5",
+    "babel-eslint": "^7.1.1",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-transform-es2015-arrow-functions": "6.8.0",
+    "babel-plugin-transform-es2015-block-scoped-functions": "6.8.0",
+    "babel-plugin-transform-es2015-block-scoping": "6.21.0",
+    "babel-plugin-transform-es2015-classes": "6.18.0",
+    "babel-plugin-transform-es2015-computed-properties": "6.8.0",
+    "babel-plugin-transform-es2015-destructuring": "6.19.0",
+    "babel-plugin-transform-es2015-literals": "6.8.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
+    "babel-plugin-transform-es2015-parameters": "6.21.0",
+    "babel-plugin-transform-es2015-shorthand-properties": "6.18.0",
+    "babel-plugin-transform-es2015-spread": "6.8.0",
+    "babel-plugin-transform-es2015-template-literals": "6.8.0",
+    "babel-plugin-transform-object-rest-spread": "^6.20.2",
+    "babel-plugin-transform-react-jsx": "^6.22.0",
+    "babel-register": "^6.22.0",
     "chai": "^3.5.0",
+    "eslint": "^3.15.0",
+    "jsdom": "^9.10.0",
     "mobx": "^3.1.0",
     "mocha": "^3.2.0",
     "preact": "^7.1.0",
+    "ts-node": "^2.0.0",
     "tslint": "^4.4.2",
     "typescript": "^2.1.5"
   }

diff --git a/src/EventEmitter.ts → src/EventEmitter.js b/src/EventEmitter.ts → src/EventEmitter.js
@@ -1,8 +1,9 @@
-export default class EventEmitter {
-
-	private listeners: Function[] = [];
+class EventEmitter {
+	constructor() {
+		this.listeners = [];
+	}
 
-	public on(cb: Function) {
+	on(cb) {
 		this.listeners.push(cb);
 		return () => {
 			const index = this.listeners.indexOf(cb);
@@ -12,15 +13,17 @@ export default class EventEmitter {
 		};
 	}
 
-	public emit(data: any) {
+	emit(data) {
 		this.listeners.forEach((fn) => fn(data));
-	};
+	}
 
-	public getTotalListeners(): number {
+	getTotalListeners() {
 		return this.listeners.length;
 	}
 
-	public clearListeners(): void {
+	clearListeners() {
 		this.listeners = [];
 	}
 }
+
+export default EventEmitter
diff --git a/src/Provider.ts → src/Provider.js b/src/Provider.ts → src/Provider.js
@@ -14,38 +14,24 @@ function childOnly(children) {
 	return children.length ? children[0] : children;
 }
 
-export default class Provider extends Component<any, any> {
-	contextTypes: any = {
-		mobxStores() {
-		}
-	};
-	childContextTypes: any = {
-		mobxStores() {
-		}
-	};
-	private store: any;
-
-	constructor(props?: any, context?: any) {
+class Provider extends Component {
+	constructor(props, context) {
 		super(props, context);
 		this.store = props.store;
 	}
 
-	public render() {
-		return childOnly(this.props.children);
-	}
-
 	getChildContext() {
-		let stores = {};
+		const stores = {};
 		// inherit stores
-		let baseStores = this.context.mobxStores;
+		const baseStores = this.context.mobxStores;
 
 		if (baseStores) {
-			for (let key in baseStores) {
+			for (const key in baseStores) {
 				stores[key] = baseStores[key];
 			}
 		}
 		// add own stores
-		for (let key in this.props) {
+		for (const key in this.props) {
 			if (!specialKeys[key]) {
 				stores[key] = this.props[key];
 			}
@@ -54,6 +40,10 @@ export default class Provider extends Component<any, any> {
 			mobxStores: stores
 		};
 	}
+
+	render() {
+		return childOnly(this.props.children);
+	}
 }
 
 if (process.env.NODE_ENV !== 'production') {
@@ -64,7 +54,7 @@ if (process.env.NODE_ENV !== 'production') {
 			'MobX Provider: The set of provided stores has changed. ' +
 			'Please avoid changing stores as the change might not propagate to all children'
 		);
-		for (let key in nextProps) {
+		for (const key in nextProps) {
 			warning(specialKeys[key] || this.props[key] === nextProps[key],
 				`MobX Provider: Provided store '${key}' has changed. ` +
 				`Please avoid replacing stores as the change might not propagate to all children`
@@ -74,3 +64,12 @@ if (process.env.NODE_ENV !== 'production') {
 	};
 }
 
+Provider.contextTypes = {
+	mobxStores() {}
+};
+
+Provider.childContextTypes = {
+	mobxStores() {}
+};
+
+export default Provider
diff --git a/src/connect.ts → src/connect.js b/src/connect.ts → src/connect.js
@@ -1,4 +1,3 @@
-import invariant = require('invariant');
 import { Component } from 'preact';
 import createClass from 'preact-classless-component';
 import inject from './inject';
@@ -8,7 +7,7 @@ import { throwError } from './utils/shared';
 /**
  * Wraps a component and provides stores as props
  */
-function connect (arg1: any, arg2 = null): any {
+function connect (arg1, arg2 = null) {
 	if (typeof arg1 === 'string') {
 		throwError('Store names should be provided as array');
 	}
@@ -39,7 +38,7 @@ function connect (arg1: any, arg2 = null): any {
 			contextTypes: componentClass.contextTypes,
 			getDefaultProps: () => componentClass.defaultProps,
 			render() {
-				return componentClass.call(this, this.props, this.state, this.context);
+				return componentClass.call(this, this.props, this.context, this.context);
 			}
 		});
 

diff --git a/src/index.ts → src/index.js b/src/index.ts → src/index.js
diff --git a/src/inject.ts → src/inject.js b/src/inject.ts → src/inject.js
@@ -1,19 +1,15 @@
-import hoistStatics = require('hoist-non-react-statics');
+import hoistStatics from 'hoist-non-react-statics';
 import { h } from 'preact';
 import createComponent from 'preact-classless-component';
 
-interface IStoreProps {
-	ref: any;
-}
-
 /**
  * Store Injection
  */
-function createStoreInjector(grabStoresFn: Function, component) {
-	const Injector: any = createComponent({
+function createStoreInjector(grabStoresFn, component) {
+	const Injector = createComponent({
 		displayName: component.name,
 		render() {
-			const newProps = <IStoreProps> {};
+			const newProps = {};
 			for (let key in this.props) {
 				if (this.props.hasOwnProperty(key)) {
 					newProps[key] = this.props[key];
@@ -41,8 +37,8 @@ function createStoreInjector(grabStoresFn: Function, component) {
 	return Injector;
 }
 
-const grabStoresByName = function(storeNames: string[]): Function {
-	return function(baseStores: Object, nextProps: Object): Object {
+const grabStoresByName = function(storeNames) {
+	return function(baseStores, nextProps) {
 		storeNames.forEach(function(storeName) {
 
 			// Prefer props over stores
@@ -69,17 +65,17 @@ const grabStoresByName = function(storeNames: string[]): Function {
  * or a function that manually maps the available stores from the context to props:
  * storesToProps(mobxStores, props, context) => newProps
  */
-export default function inject(grabStoresFn?: Function | string): any {
+export default function inject(grabStoresFn) {
 
 	if (typeof grabStoresFn !== 'function') {
 
-		let storesNames: any = [];
+		let storesNames = [];
 		for (let i = 0; i < arguments.length; i++) {
 			storesNames[i] = arguments[i];
 		}
 
 		grabStoresFn = grabStoresByName(storesNames);
 	}
 
-	return (componentClass) => createStoreInjector(grabStoresFn as Function, componentClass);
+	return (componentClass) => createStoreInjector(grabStoresFn, componentClass);
 }
diff --git a/src/makeReactive.ts → src/makeReactive.js b/src/makeReactive.ts → src/makeReactive.js
@@ -8,7 +8,7 @@ import { throwError } from './utils/shared';
  */
 let isDevtoolsEnabled = false;
 
-export const componentByNodeRegistery: WeakMap<any, any> = new WeakMap();
+export const componentByNodeRegistery = new WeakMap();
 export const renderReporter = new EventEmitter();
 
 function reportRendering(component) {
@@ -35,11 +35,6 @@ export function trackComponents() {
 	}
 }
 
-interface IReactiveRender {
-	$mobx?: Reaction;
-	(nextProps, nextState, nextContext): void;
-}
-
 export default function makeReactive(componentClass) {
 
 	const target = componentClass.prototype || componentClass;
@@ -52,7 +47,7 @@ export default function makeReactive(componentClass) {
 		// Call original
 		baseWillMount && baseWillMount.call(this);
 
-		let reaction: Reaction;
+		let reaction;
 		let isRenderingPending = false;
 
 		const initialName = this.displayName || this.name || (this.constructor && (this.constructor.displayName || this.constructor.name)) || '<component>';
@@ -80,7 +75,7 @@ export default function makeReactive(componentClass) {
 			return reactiveRender(nextProps, nextState, nextContext);
 		};
 
-		const reactiveRender: IReactiveRender = (nextProps, nextState, nextContext) => {
+		const reactiveRender = (nextProps, nextState, nextContext) => {
 			isRenderingPending = false;
 			let rendering = undefined;
 			reaction.track(() => {