Commit 54918820 authored by Peter Müller's avatar Peter Müller
Browse files

Update auf neue Meteor-Version und kleine typings-Änderung

parent 25e462fd
......@@ -6,15 +6,15 @@
meteor-base@1.0.4 # Packages every Meteor app needs to have
mobile-experience@1.0.4 # Packages for a great mobile UX
mongo@1.1.12 # The database Meteor supports right now
reactive-var@1.0.10 # Reactive variable for tracker
jquery@1.11.9 # Helpful client-side library
tracker@1.1.0 # Meteor's client-side reactive programming library
mongo@1.1.14 # The database Meteor supports right now
reactive-var@1.0.11 # Reactive variable for tracker
jquery@1.11.10 # Helpful client-side library
tracker@1.1.1 # Meteor's client-side reactive programming library
standard-minifier-css@1.2.0 # CSS minifier run for production mode
standard-minifier-js@1.2.0 # JS minifier run for production mode
es5-shim@4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript@0.5.8 # Enable ECMAScript2015+ syntax in app code
standard-minifier-css@1.3.2 # CSS minifier run for production mode
standard-minifier-js@1.2.1 # JS minifier run for production mode
es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers.
ecmascript@0.5.9 # Enable ECMAScript2015+ syntax in app code
shell-server@0.2.1 # Server-side component of the `meteor shell` command
autopublish@1.0.7 # Publish all data to the clients (for prototyping)
......@@ -22,4 +22,4 @@ insecure@1.0.7 # Allow all DB writes from clients (for prototypin
meteortypescript:compiler
react-meteor-data
fourseven:scss
static-html
static-html@1.1.12_1
METEOR@1.4.1.1
METEOR@1.4.2.1
allow-deny@1.0.5
autopublish@1.0.7
autoupdate@1.2.11
babel-compiler@6.9.1
babel-runtime@0.1.11
barbatus:typescript@0.3.4_1
barbatus:typescript-compiler@0.6.11
autoupdate@1.3.12
babel-compiler@6.13.0
babel-runtime@1.0.0
barbatus:typescript@0.5.2
barbatus:typescript-compiler@0.8.4
barbatus:typescript-runtime@0.1.2
base64@1.0.9
binary-heap@1.0.9
blaze@2.1.9
base64@1.0.10
binary-heap@1.0.10
blaze@2.2.0
blaze-tools@1.0.10
boilerplate-generator@1.0.9
caching-compiler@1.1.7
boilerplate-generator@1.0.11
caching-compiler@1.1.9
caching-html-compiler@1.0.7
callback-hook@1.0.9
check@1.2.3
callback-hook@1.0.10
check@1.2.4
ddp@1.2.5
ddp-client@1.2.9
ddp-common@1.2.6
ddp-server@1.2.10
ddp-client@1.3.2
ddp-common@1.2.8
ddp-server@1.3.12
deps@1.0.12
diff-sequence@1.0.6
ecmascript@0.5.8
ecmascript-runtime@0.3.14
ejson@1.0.12
es5-shim@4.6.14
fastclick@1.0.12
fourseven:scss@3.10.0
geojson-utils@1.0.9
diff-sequence@1.0.7
ecmascript@0.6.0
ecmascript-runtime@0.3.15
ejson@1.0.13
es5-shim@4.6.15
fastclick@1.0.13
fourseven:scss@3.10.1
geojson-utils@1.0.10
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
http@1.1.8
id-map@1.0.8
http@1.2.10
id-map@1.0.9
insecure@1.0.7
jquery@1.11.9
launch-screen@1.0.12
jquery@1.11.10
launch-screen@1.1.0
livedata@1.0.18
logging@1.1.15
meteor@1.2.17
logging@1.1.16
meteor@1.6.0
meteor-base@1.0.4
meteortypescript:compiler@3.2.2
minifier-css@1.2.14
minifier-js@1.2.14
minimongo@1.0.17
minifier-css@1.2.15
minifier-js@1.2.15
minimongo@1.0.18
mobile-experience@1.0.4
mobile-status-bar@1.0.12
modules@0.7.6
modules-runtime@0.7.6
mongo@1.1.12
mongo-id@1.0.5
npm-mongo@1.5.49
observe-sequence@1.0.12
ordered-dict@1.0.8
promise@0.8.7
mobile-status-bar@1.0.13
modules@0.7.7
modules-runtime@0.7.7
mongo@1.1.14
mongo-id@1.0.6
npm-mongo@2.2.11_2
observe-sequence@1.0.14
ordered-dict@1.0.9
promise@0.8.8
random@1.0.10
react-meteor-data@0.2.9
reactive-var@1.0.10
reload@1.1.10
retry@1.0.8
routepolicy@1.0.11
reactive-var@1.0.11
reload@1.1.11
retry@1.0.9
routepolicy@1.0.12
shell-server@0.2.1
spacebars@1.0.13
spacebars-compiler@1.0.13
standard-minifier-css@1.2.0
standard-minifier-js@1.2.0
standard-minifier-css@1.3.2
standard-minifier-js@1.2.1
static-html@1.1.13
templating-tools@1.0.5
tmeasday:check-npm-versions@0.2.0
tracker@1.1.0
tmeasday:check-npm-versions@0.3.1
tracker@1.1.1
ui@1.0.12
underscore@1.0.9
url@1.0.10
webapp@1.3.11
underscore@1.0.10
url@1.0.11
webapp@1.3.12
webapp-hashing@1.0.9
......@@ -2,7 +2,7 @@
Code-Beispiele sind in den entsprechenden Ordnern enthalten.
Alle Clientseitigen TypeScript-Dateien mit React müssen die Dateiendung _.tsx_ haben.
Alle Clientseitigen TypeScript-Dateien mit React müssen die Dateiendung `.tsx` haben.
---
......@@ -11,11 +11,12 @@ Alle Clientseitigen TypeScript-Dateien mit React müssen die Dateiendung _.tsx_
## Global benötigte Tools installieren
### NodeJS
NodeJS wird zwar nicht extra für Meteor benötigt, ist aber für z.B. _typings_ erforderlich.
NodeJS wird zwar nicht extra für Meteor benötigt, ist aber für z.B. `typings` erforderlich.
### TypeScript und typings
npm install -g typescript typings
```bash
npm install -g typescript typings
```
---
......@@ -24,92 +25,97 @@ NodeJS wird zwar nicht extra für Meteor benötigt, ist aber für z.B. _typings_
## Installation der benötigten Module/Pakete/Definitionen etc.
### Meteor-Projekt erstellen
meteor create MeinProjekt
cd MeinProjekt
```bash
meteor create MeinProjekt
cd MeinProjekt
```
### Pakete installieren/entfernen
meteor npm install --save react react-dom react-router react-addons-pure-render-mixin
meteor add static-html meteortypescript:compiler react-meteor-data fourseven:scss
meteor remove blaze-html-templates
```bash
meteor npm install --save babel-runtime react react-dom react-router react-addons-pure-render-mixin
meteor add static-html meteortypescript:compiler react-meteor-data fourseven:scss
meteor remove blaze-html-templates
```
### typings
typings install --save react react-dom react-router
typings install --save --global env~meteor dt~node
Datei _./typings/react-meteor-data.d.ts_ mit folgendem Inhalt anlegen, um die Type-Definitionen für das Module 'meteor/react-meteor-data' zu erhalten:
declare module 'meteor/react-meteor-data'{
import * as React from 'react';
export function createContainer<P>(options:any, Component:any): React.ClassicComponentClass<P>;
}
Datei _./typings/meteor-extra.d.ts_ mit folgendem Inhalt anlegen, um Mongo.ObjectID genauer zu typisieren:
declare module 'meteor/mongo'{
module Mongo {
interface ObjectID {
toHexString():string;
}
}
}
```bash
typings install --save --global env~meteor dt~node dt~react dt~react-dom dt~react-router dt~react-router/history dt~react-addons-pure-render-mixin
```
Datei `./typings/react-meteor-data.d.ts` mit folgendem Inhalt anlegen, um die Type-Definitionen für das Module 'meteor/react-meteor-data' zu erhalten:
```ts
declare module 'meteor/react-meteor-data'{
import * as React from 'react';
export function createContainer<P>(options:any, Component:any): React.ClassicComponentClass<P>;
}
```
Datei `./typings/meteor-extra.d.ts` mit folgendem Inhalt anlegen, um `Mongo.ObjectID` genauer zu typisieren:
```ts
declare module 'meteor/mongo'{
module Mongo {
interface ObjectID {
toHexString():string;
}
}
}
```
### tsconfig.json anlegen
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"noImplicitUseStrict": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"filesGlob": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"files": [
],
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": true
}
}
```json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"noImplicitUseStrict": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"filesGlob": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"typings/browser",
"typings/browser.d.ts"
],
"files": [
],
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": true
}
}
```
---
## Nützliche Snippets für Atom
'.source.tsx':
'extends React.Component<...,{}>':
'prefix': 'erc'
'body': 'extends React.Component<$1,{}>$2'
'extends React.Props<any>':
'prefix': 'erp'
'body': 'extends React.Props<${1:any}>$2'
```cson
'.source.tsx':
'extends React.Component<...,{}>':
'prefix': 'erc'
'body': 'extends React.Component<$1,{}>$2'
'extends React.Props<any>':
'prefix': 'erp'
'body': 'extends React.Props<${1:any}>$2'
```
---
......
......@@ -4,13 +4,13 @@ import {Meteor} from 'meteor/meteor';
import {createContainer} from 'meteor/react-meteor-data';
import {DatenCollection} from '../../imports/api/collections.ts';
import {DatenCollection} from '../../imports/api/collections';
interface DatenProps extends React.Props<any>{
task: {
task?: {
text: string;
},
daten: Array<Object>
daten?: Array<Object>
}
export class Daten extends React.Component<DatenProps,{}> {
......
......@@ -5,6 +5,7 @@
"start": "meteor run"
},
"dependencies": {
"babel-runtime": "^6.18.0",
"meteor-node-stubs": "~0.2.0",
"react": "^15.3.1",
"react-addons-pure-render-mixin": "^15.3.1",
......
......@@ -30,11 +30,13 @@
"server/main.ts",
"typings/globals/meteor/index.d.ts",
"typings/globals/node/index.d.ts",
"typings/globals/react-addons-pure-render-mixin/index.d.ts",
"typings/globals/react-dom/index.d.ts",
"typings/globals/react-router/history/index.d.ts",
"typings/globals/react-router/index.d.ts",
"typings/globals/react/index.d.ts",
"typings/index.d.ts",
"typings/meteor-extra.d.ts",
"typings/modules/react-dom/index.d.ts",
"typings/modules/react-router/index.d.ts",
"typings/modules/react/index.d.ts",
"typings/react-meteor-data.d.ts",
"client/imports/daten.tsx",
"client/imports/routertest.tsx",
......
{
"dependencies": {
"react": "registry:npm/react#15.0.1+20160601175240",
"react-dom": "registry:npm/react-dom#15.0.1+20160826174104",
"react-router": "registry:npm/react-router#2.4.0+20160915183637"
},
"dependencies": {},
"globalDependencies": {
"meteor": "registry:env/meteor#1.3.0+20160830163906",
"node": "registry:dt/node#6.0.0+20160915134512"
"node": "registry:dt/node#6.0.0+20160915134512",
"react": "registry:dt/react#0.14.0+20161024223416",
"react-addons-pure-render-mixin": "registry:dt/react-addons-pure-render-mixin#0.14.0+20160316155526",
"react-dom": "registry:dt/react-dom#0.14.0+20160412154040",
"react-router": "registry:dt/react-router#2.0.0+20160928130202",
"react-router/history": "registry:dt/react-router/history#2.0.0+20160830150755"
}
}
// Generated by typings
// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/56295f5058cac7ae458540423c50ac2dcf9fc711/react/react-addons-pure-render-mixin.d.ts
declare namespace __React {
interface PureRenderMixin extends Mixin<any, any> {}
namespace __Addons {
export var PureRenderMixin: PureRenderMixin;
}
}
declare module "react-addons-pure-render-mixin" {
var PureRenderMixin: __React.PureRenderMixin;
type PureRenderMixin = __React.PureRenderMixin;
export = PureRenderMixin;
}
{
"resolution": "main",
"tree": {
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/56295f5058cac7ae458540423c50ac2dcf9fc711/react/react-addons-pure-render-mixin.d.ts",
"raw": "registry:dt/react-addons-pure-render-mixin#0.14.0+20160316155526",
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/56295f5058cac7ae458540423c50ac2dcf9fc711/react/react-addons-pure-render-mixin.d.ts"
}
}
// Generated by typings
// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b9642fb8ac07f7164dc643ddd1fa99b58ae9be8b/react/react-dom.d.ts
declare namespace __React {
namespace __DOM {
function findDOMNode<E extends Element>(instance: ReactInstance): E;
function findDOMNode(instance: ReactInstance): Element;
function render<P extends DOMAttributes, T extends Element>(
element: DOMElement<P, T>,
container: Element,
callback?: (element: T) => any): T;
function render<P>(
element: SFCElement<P>,
container: Element,
callback?: () => any): void;
function render<P, T extends Component<P, ComponentState>>(
element: CElement<P, T>,
container: Element,
callback?: (component: T) => any): T;
function render<P>(
element: ReactElement<P>,
container: Element,
callback?: (component?: Component<P, ComponentState> | Element) => any): Component<P, ComponentState> | Element | void;
function unmountComponentAtNode(container: Element): boolean;
var version: string;
function unstable_batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
function unstable_batchedUpdates(callback: () => any): void;
function unstable_renderSubtreeIntoContainer<P extends DOMAttributes, T extends Element>(
parentComponent: Component<any, any>,
element: DOMElement<P, T>,
container: Element,
callback?: (element: T) => any): T;
function unstable_renderSubtreeIntoContainer<P, T extends Component<P, ComponentState>>(
parentComponent: Component<any, any>,
element: CElement<P, T>,
container: Element,
callback?: (component: T) => any): T;
function render<P>(
parentComponent: Component<any, any>,
element: SFCElement<P>,
container: Element,
callback?: () => any): void;
function unstable_renderSubtreeIntoContainer<P>(
parentComponent: Component<any, any>,
element: ReactElement<P>,
container: Element,
callback?: (component?: Component<P, ComponentState> | Element) => any): Component<P, ComponentState> | Element | void;
}
namespace __DOMServer {
function renderToString(element: ReactElement<any>): string;
function renderToStaticMarkup(element: ReactElement<any>): string;
var version: string;
}
}
declare module "react-dom" {
import DOM = __React.__DOM;
export = DOM;
}
declare module "react-dom/server" {
import DOMServer = __React.__DOMServer;
export = DOMServer;
}
{
"resolution": "main",
"tree": {
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b9642fb8ac07f7164dc643ddd1fa99b58ae9be8b/react/react-dom.d.ts",
"raw": "registry:dt/react-dom#0.14.0+20160412154040",
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b9642fb8ac07f7164dc643ddd1fa99b58ae9be8b/react/react-dom.d.ts"
}
}
// Generated by typings
// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b83a05d33569361f3ebe1ea3dfdb5bfd5499749d/react-router/history.d.ts
declare namespace HistoryModule {
// types based on https://github.com/rackt/history/blob/master/docs/Terms.md
type Action = string
type BeforeUnloadHook = () => string | boolean
type CreateHistory<T> = (options?: HistoryOptions) => T
type CreateHistoryEnhancer<T, E> = (createHistory: CreateHistory<T>) => CreateHistory<T & E>
interface History {
listenBefore(hook: TransitionHook): () => void
listen(listener: LocationListener): () => void
transitionTo(location: Location): void
push(path: LocationDescriptor): void
replace(path: LocationDescriptor): void
go(n: number): void
goBack(): void
goForward(): void
createKey(): LocationKey
createPath(path: LocationDescriptor): Path
createHref(path: LocationDescriptor): Href
createLocation(path?: LocationDescriptor, action?: Action, key?: LocationKey): Location
getCurrentLocation: () => Location
/** @deprecated use a location descriptor instead */
createLocation(path?: Path, state?: LocationState, action?: Action, key?: LocationKey): Location
/** @deprecated use location.key to save state instead */
pushState(state: LocationState, path: Path): void
/** @deprecated use location.key to save state instead */
replaceState(state: LocationState, path: Path): void
/** @deprecated use location.key to save state instead */
setState(state: LocationState): void
/** @deprecated use listenBefore instead */
registerTransitionHook(hook: TransitionHook): void
/** @deprecated use the callback returned from listenBefore instead */
unregisterTransitionHook(hook: TransitionHook): void
}
type HistoryOptions = {
getCurrentLocation?: () => Location
finishTransition?: (nextLocation: Location) => boolean
saveState?: (key: LocationKey, state: LocationState) => void
go?: (n: number) => void
getUserConfirmation?: (message: string, callback: (result: boolean) => void) => void
keyLength?: number
queryKey?: string | boolean
stringifyQuery?: (obj: any) => string
parseQueryString?: (str: string) => any
basename?: string
entries?: string | [any]
current?: number
}
type Href = string
type Location = {
pathname: Pathname
search: Search
query: Query
state: LocationState
action: Action
key: LocationKey
hash: Hash
basename?: string
}
type LocationDescriptorObject = {
pathname?: Pathname
search?: Search
query?: Query
state?: LocationState
}
type LocationDescriptor = LocationDescriptorObject | Path
type LocationKey = string
type LocationListener = (location: Location) => void
type LocationState = Object
type Path = string // Pathname + QueryString
type Pathname = string
type Query = { [key: string]: any; }