diff --git a/README.md b/README.md index 2c6db42..26d30d5 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,15 @@ # TypeScript Samples +Most of the samples here will assume that you have TypeScript installed. +You can get TypeScript with Visual Studio, NuGet, or with npm: + +```shell +npm install -g typescript +``` + +To compile each sample, `cd` into the directory and use the `tsc` command to compile. +`tsc` will use each directory's `tsconfig.json` to get specific compiler options. + ##### [AMD Modules](amd/README.md) ##### [Angular Seed TypeScript](angular1/README.md) @@ -12,7 +22,7 @@ ##### [D3](d3/README.md) -##### [ES6 + TypeScript + Babel + React + Karma: The Secret Recipe](es6-babel-react-flux-karma/README.md) +##### [React + Flux + Babel + Karma: The Secret Recipe](react-flux-babel-karma/README.md) ##### [Greeter](greeter/README.md) diff --git a/amd/README.md b/amd/README.md index ff7ae78..5170210 100644 --- a/amd/README.md +++ b/amd/README.md @@ -9,6 +9,6 @@ It uses [require.js](http://www.requirejs.org/) to load `app.js` once compiled f ``` tsc --sourcemap --module amd app.ts -start default.htm +start default.html ``` diff --git a/angular1/app/app.ts b/angular1/app/app.ts index 21eccdb..68fd66c 100644 --- a/angular1/app/app.ts +++ b/angular1/app/app.ts @@ -6,7 +6,7 @@ angular.module('myApp', [ 'myApp.view1', 'myApp.view2', 'myApp.version' -]). -config(['$routeProvider', function($routeProvider) { - $routeProvider.otherwise({redirectTo: '/view1'}); -}]); +]) + .config(['$routeProvider', $routeProvider => { + $routeProvider.otherwise({ redirectTo: '/view1' }); + }]); diff --git a/angular1/app/components/version/interpolate-filter.ts b/angular1/app/components/version/interpolate-filter.ts index 03bb198..91a4198 100644 --- a/angular1/app/components/version/interpolate-filter.ts +++ b/angular1/app/components/version/interpolate-filter.ts @@ -1,9 +1,6 @@ 'use strict'; angular.module('myApp.version.interpolate-filter', []) - -.filter('interpolate', ['version', function(version) { - return function(text) { - return String(text).replace(/\%VERSION\%/mg, version); - }; -}]); + .filter('interpolate', ['version', version => { + return text => String(text).replace(/\%VERSION\%/mg, version); + }]); diff --git a/angular1/app/components/version/interpolate-filter_test.ts b/angular1/app/components/version/interpolate-filter_test.ts index ff56c52..c4b060f 100644 --- a/angular1/app/components/version/interpolate-filter_test.ts +++ b/angular1/app/components/version/interpolate-filter_test.ts @@ -1,14 +1,14 @@ 'use strict'; -describe('myApp.version module', function() { +describe('myApp.version module', () => { beforeEach(module('myApp.version')); - describe('interpolate filter', function() { - beforeEach(module(function($provide) { + describe('interpolate filter', () => { + beforeEach(module($provide => { $provide.value('version', 'TEST_VER'); })); - it('should replace VERSION', inject(function(interpolateFilter) { + it('should replace VERSION', inject(interpolateFilter => { expect(interpolateFilter('before %VERSION% after')).toEqual('before TEST_VER after'); })); }); diff --git a/angular1/app/components/version/version-directive.ts b/angular1/app/components/version/version-directive.ts index 74088f8..deb07d0 100644 --- a/angular1/app/components/version/version-directive.ts +++ b/angular1/app/components/version/version-directive.ts @@ -1,9 +1,8 @@ 'use strict'; angular.module('myApp.version.version-directive', []) - -.directive('appVersion', ['version', function(version) { - return function(scope, elm, attrs) { - elm.text(version); - }; -}]); + .directive('appVersion', ['version', version => { + return (scope, element, attributes) => { + element.text(version); + }; + }]); diff --git a/angular1/app/components/version/version-directive_test.ts b/angular1/app/components/version/version-directive_test.ts index 4a59e11..2510e13 100644 --- a/angular1/app/components/version/version-directive_test.ts +++ b/angular1/app/components/version/version-directive_test.ts @@ -1,15 +1,16 @@ 'use strict'; -describe('myApp.version module', function() { +describe('myApp.version module', () => { beforeEach(module('myApp.version')); - describe('app-version directive', function() { - it('should print current version', function() { - module(function($provide) { + describe('app-version directive', () => { + it('should print current version', () => { + module($provide => { $provide.value('version', 'TEST_VER'); }); - inject(function($compile, $rootScope) { - var element = $compile('')($rootScope); + + inject(($compile, $rootScope) => { + let element = $compile('')($rootScope); expect(element.text()).toEqual('TEST_VER'); }); }); diff --git a/angular1/app/components/version/version.ts b/angular1/app/components/version/version.ts index cb7a10f..0139bdb 100644 --- a/angular1/app/components/version/version.ts +++ b/angular1/app/components/version/version.ts @@ -4,5 +4,4 @@ angular.module('myApp.version', [ 'myApp.version.interpolate-filter', 'myApp.version.version-directive' ]) - .value('version', '0.1'); diff --git a/angular1/app/components/version/version_test.ts b/angular1/app/components/version/version_test.ts index 4ca6880..b911ef2 100644 --- a/angular1/app/components/version/version_test.ts +++ b/angular1/app/components/version/version_test.ts @@ -1,10 +1,10 @@ 'use strict'; -describe('myApp.version module', function() { +describe('myApp.version module', () => { beforeEach(module('myApp.version')); - describe('version service', function() { - it('should return current version', inject(function(version) { + describe('version service', () => { + it('should return current version', inject(version => { expect(version).toEqual('0.1'); })); }); diff --git a/angular1/app/view1/view1.ts b/angular1/app/view1/view1.ts index 4a50ba2..8cf391b 100644 --- a/angular1/app/view1/view1.ts +++ b/angular1/app/view1/view1.ts @@ -1,19 +1,14 @@ 'use strict'; -class View1Controller{ - static $inject = []; - constructor(){ - - } +class View1Controller { + static $inject = []; } angular.module('myApp.view1', ['ngRoute']) - -.config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/view1', { - templateUrl: 'view1/view1.html', - controller: 'View1Ctrl' - }); -}]) - -.controller('View1Ctrl', View1Controller); + .config(['$routeProvider', $routeProvider => { + $routeProvider.when('/view1', { + templateUrl: 'view1/view1.html', + controller: 'View1Ctrl' + }); + }]) + .controller('View1Ctrl', View1Controller); diff --git a/angular1/app/view1/view1_test.ts b/angular1/app/view1/view1_test.ts index c993773..95fa007 100644 --- a/angular1/app/view1/view1_test.ts +++ b/angular1/app/view1/view1_test.ts @@ -1,16 +1,12 @@ 'use strict'; -describe('myApp.view1 module', function() { - +describe('myApp.view1 module', () => { beforeEach(module('myApp.view1')); - describe('view1 controller', function(){ - - it('should ....', inject(function($controller) { - //spec body - var view1Ctrl:View1Controller = $controller('View1Ctrl'); + describe('view1 controller', () => { + it('should be defined', inject($controller => { + let view1Ctrl: View1Controller = $controller('View1Ctrl'); expect(view1Ctrl).toBeDefined(); })); - }); }); diff --git a/angular1/app/view2/view2.ts b/angular1/app/view2/view2.ts index 35a8126..264db98 100644 --- a/angular1/app/view2/view2.ts +++ b/angular1/app/view2/view2.ts @@ -1,19 +1,14 @@ 'use strict'; -class View2Controller{ - static $inject = []; - constructor(){ - - } +class View2Controller { + static $inject = []; } angular.module('myApp.view2', ['ngRoute']) - -.config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/view2', { - templateUrl: 'view2/view2.html', - controller: 'View2Ctrl' - }); -}]) - -.controller('View2Ctrl', View2Controller); + .config(['$routeProvider', $routeProvider => { + $routeProvider.when('/view2', { + templateUrl: 'view2/view2.html', + controller: 'View2Ctrl' + }); + }]) + .controller('View2Ctrl', View2Controller); diff --git a/angular1/app/view2/view2_test.ts b/angular1/app/view2/view2_test.ts index 8467624..b3ee22b 100644 --- a/angular1/app/view2/view2_test.ts +++ b/angular1/app/view2/view2_test.ts @@ -1,16 +1,12 @@ 'use strict'; -describe('myApp.view2 module', function() { - +describe('myApp.view2 module', () => { beforeEach(module('myApp.view2')); - describe('view2 controller', function(){ - - it('should ....', inject(function($controller) { - //spec body - var view2Ctrl:View2Controller = $controller('View2Ctrl'); + describe('view2 controller', () => { + it('should be defined', inject($controller => { + let view2Ctrl: View2Controller = $controller('View2Ctrl'); expect(view2Ctrl).toBeDefined(); })); - }); }); diff --git a/angular1/e2e-tests/scenarios.ts b/angular1/e2e-tests/scenarios.ts index 0e8348a..234906c 100644 --- a/angular1/e2e-tests/scenarios.ts +++ b/angular1/e2e-tests/scenarios.ts @@ -2,41 +2,29 @@ /* https://github.com/angular/protractor/blob/master/docs/toc.md */ -describe('my app', function() { - - - it('should automatically redirect to /view1 when location hash/fragment is empty', function() { +describe('my app', () => { + it('should automatically redirect to /view1 when location hash/fragment is empty', () => { browser.get('index.html'); expect(browser.getLocationAbsUrl()).toMatch("/view1"); }); - - describe('view1', function() { - - beforeEach(function() { + describe('view1', () => { + beforeEach(() => { browser.get('index.html#/view1'); }); - - it('should render view1 when user navigates to /view1', function() { - expect(element.all(by.css('[ng-view] p')).first().getText()). - toMatch(/partial for view 1/); + it('should render view1 when user navigates to /view1', () => { + expect(element.all(by.css('[ng-view] p')).first().getText()).toMatch(/partial for view 1/); }); - }); - - describe('view2', function() { - - beforeEach(function() { + describe('view2', () => { + beforeEach(() => { browser.get('index.html#/view2'); }); - - it('should render view2 when user navigates to /view2', function() { - expect(element.all(by.css('[ng-view] p')).first().getText()). - toMatch(/partial for view 2/); + it('should render view2 when user navigates to /view2', () => { + expect(element.all(by.css('[ng-view] p')).first().getText()).toMatch(/partial for view 2/); }); - }); }); diff --git a/angular2/index.html b/angular2/index.html index 8b4dfca..a8f1f5f 100644 --- a/angular2/index.html +++ b/angular2/index.html @@ -24,7 +24,7 @@ - + Loading... diff --git a/browserify/README.md b/browserify/README.md index 092fe7d..ea600ee 100644 --- a/browserify/README.md +++ b/browserify/README.md @@ -1,45 +1,63 @@ **Install Browserify** -``` + +```shell npm install -g browserify ``` **Fetch dependencies** -``` + +```shell npm install ``` **Compile .ts files** -``` + +Either enter the following command + +```shell node node_modules/typescript/bin/tsc.js ``` -shortcut for this command -``` + +or use the `tsc` script from our `package.json` with + +```shell npm run tsc ``` **Run Browserify** -``` + +Either enter the following command + +```shell browserify src/app.js -o bundle.js -s app ``` -shortcut for this command -``` + +or use the `browserify` script from our `package.json` with + +```shell npm run browserify ``` **Start http-server** -``` + +Either enter the following command + +```shell node node_modules/http-server/bin/http-server -o ``` -shortcut for this command + +or use the `listen` script from our `package.json` with + ``` npm run listen ``` -By default http-server listens on port 8080. If this port is taken use '-p' to specify free port. - +By default http-server listens on port `8080`. +If this port is taken, use '-p ####' to specify a free port, where `####` is the available port. **Shortcut for running all steps in a batch** + ``` npm run all ``` \ No newline at end of file diff --git a/browserify/package.json b/browserify/package.json index fc11a8e..d6b3f94 100644 --- a/browserify/package.json +++ b/browserify/package.json @@ -10,12 +10,12 @@ "http-server": "0.8.0" }, "devDependencies": { - "typescript": "^1.5.3" + "typescript": "^1.8.9" }, "scripts": { - "tsc": "node node_modules/typescript/bin/tsc.js", + "tsc": "node node_modules/typescript/lib/tsc.js", "browserify": "browserify src/app.js -o bundle.js -s app", "listen": "node node_modules/http-server/bin/http-server", "all": "npm run tsc && npm run browserify && npm run listen" } -} \ No newline at end of file +} diff --git a/es6-babel-react-flux-karma/gulp/tests.js b/es6-babel-react-flux-karma/gulp/tests.js deleted file mode 100644 index 4d6ba04..0000000 --- a/es6-babel-react-flux-karma/gulp/tests.js +++ /dev/null @@ -1,26 +0,0 @@ -'use strict'; - -var Server = require('karma').Server; -var path = require('path'); -var gutil = require('gulp-util'); - -module.exports = { - watch: function() { - // Documentation: https://karma-runner.github.io/0.13/dev/public-api.html - var karmaConfig = { - configFile: path.join(__dirname, '../karma.conf.js'), - singleRun: false, - - // Fancy runner - plugins: ['karma-webpack', 'karma-jasmine', 'karma-mocha-reporter', /*'karma-junit-reporter', 'karma-coverage', */'karma-sourcemap-loader', 'karma-phantomjs-launcher'], - reporters: ['mocha'] - }; - - new Server(karmaConfig, karmaCompleted).start(); - - function karmaCompleted(exitCode) { - gutil.log('Karma has exited with:', exitCode); - process.exit(exitCode); - } - } -}; diff --git a/es6-babel-react-flux-karma/gulp/webpack.js b/es6-babel-react-flux-karma/gulp/webpack.js deleted file mode 100644 index 37c4ded..0000000 --- a/es6-babel-react-flux-karma/gulp/webpack.js +++ /dev/null @@ -1,91 +0,0 @@ -'use strict'; - -var gulp = require('gulp'); -var gutil = require('gulp-util'); -var webpack = require('webpack'); -var WebpackNotifierPlugin = require('webpack-notifier'); -var webpackConfig = require('../webpack.config.js'); - -function buildProduction(done) { - // modify some webpack config options - var myProdConfig = Object.create(webpackConfig); - myProdConfig.output.filename = '[name].[hash].js'; - - myProdConfig.plugins = myProdConfig.plugins.concat( - new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.[hash].js' }), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.UglifyJsPlugin() - ); - - // run webpack - webpack(myProdConfig, function(err, stats) { - if(err) { throw new gutil.PluginError('webpack:build', err); } - gutil.log('[webpack:build]', stats.toString({ - colors: true - })); - - if (done) { done(); } - }); -} - -function createDevCompiler() { - // modify some webpack config options - var myDevConfig = Object.create(webpackConfig); - myDevConfig.devtool = 'inline-source-map'; - myDevConfig.debug = true; - - myDevConfig.plugins = myDevConfig.plugins.concat( - new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }), - new WebpackNotifierPlugin({ title: 'Webpack build', excludeWarnings: true }) - ); - - // create a single instance of the compiler to allow caching - return webpack(myDevConfig); -} - -function buildDevelopment(done, devCompiler) { - // run webpack - devCompiler.run(function(err, stats) { - if(err) { throw new gutil.PluginError('webpack:build-dev', err); } - gutil.log('[webpack:build-dev]', stats.toString({ - chunks: false, - colors: true - })); - - if (done) { done(); } - }); -} - - -function bundle(options) { - var devCompiler; - - function build(done) { - if (options.shouldWatch) { - buildDevelopment(done, devCompiler); - } else { - buildProduction(done); - } - } - - if (options.shouldWatch) { - devCompiler = createDevCompiler(); - - gulp.watch('src/**/*', function() { build(); }); - } - - return new Promise(function(resolve, reject) { - build(function (err) { - if (err) { - reject(err); - } else { - resolve('webpack built'); - } - }); - }); -} - -module.exports = { - build: function() { return bundle({ shouldWatch: false }); }, - watch: function() { return bundle({ shouldWatch: true }); } -}; diff --git a/es6-babel-react-flux-karma/gulpFile.js b/es6-babel-react-flux-karma/gulpFile.js deleted file mode 100644 index b7b3abe..0000000 --- a/es6-babel-react-flux-karma/gulpFile.js +++ /dev/null @@ -1,66 +0,0 @@ -/* eslint-disable no-var, strict, prefer-arrow-callback */ -'use strict'; - -var gulp = require('gulp'); -var gutil = require('gulp-util'); -var eslint = require('gulp-eslint'); -var webpack = require('./gulp/webpack'); -var staticFiles = require('./gulp/staticFiles'); -var tests = require('./gulp/tests'); -var clean = require('./gulp/clean'); -var inject = require('./gulp/inject'); - -var lintSrcs = ['./gulp/**/*.js']; - -gulp.task('delete-dist', function (done) { - clean.run(done); -}); - -gulp.task('build-process.env.NODE_ENV', function () { - process.env.NODE_ENV = 'production'; -}); - -gulp.task('build-js', ['delete-dist', 'build-process.env.NODE_ENV'], function(done) { - webpack.build().then(function() { done(); }); -}); - -gulp.task('build-other', ['delete-dist', 'build-process.env.NODE_ENV'], function() { - staticFiles.build(); -}); - -gulp.task('build', ['build-js', 'build-other', 'lint'], function () { - inject.build(); -}); - -gulp.task('lint', function () { - return gulp.src(lintSrcs) - .pipe(eslint()) - .pipe(eslint.format()); -}); - -gulp.task('watch', ['delete-dist'], function(done) { - process.env.NODE_ENV = 'development'; - Promise.all([ - webpack.watch()//, - //less.watch() - ]).then(function() { - gutil.log('Now that initial assets (js and css) are generated inject will start...'); - inject.watch(); - done(); - }).catch(function(error) { - gutil.log('Problem generating initial assets (js and css)', error); - }); - - gulp.watch(lintSrcs, ['lint']); - staticFiles.watch(); - tests.watch(); -}); - -gulp.task('watch-and-serve', ['watch'], function() { - // local as not required for build - var express = require('express') - var app = express() - - app.use(express.static('dist', {'index': 'index.html'})) - app.listen(8080); -}); diff --git a/es6-babel-react-flux-karma/package.json b/es6-babel-react-flux-karma/package.json deleted file mode 100644 index 04d8f90..0000000 --- a/es6-babel-react-flux-karma/package.json +++ /dev/null @@ -1,72 +0,0 @@ -{ - "name": "es6-babel-react-flux-karma", - "version": "1.0.0", - "description": "ES6 + TypeScript + Babel + React + Karma: The Secret Recipe", - "main": "index.js", - "scripts": { - "test": "karma start --reporters mocha,junit --single-run --browsers PhantomJS", - "serve": "gulp watch-and-serve", - "watch": "gulp watch", - "build": "gulp build" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/microsoft/typescriptsamples.git" - }, - "keywords": [ - "React", - "Flux", - "ES6", - "typescript" - ], - "author": "John Reilly", - "license": "MIT", - "bugs": { - "url": "https://github.com/microsoft/typescriptsamples/issues" - }, - "homepage": "https://github.com/Microsoft/TypeScriptSamples/tree/master/es6-babel-react-flux-karma#readme", - "devDependencies": { - "babel": "^6.0.0", - "babel-core": "^6.0.0", - "babel-loader": "^6.0.0", - "babel-polyfill": "^6.0.0", - "babel-preset-es2015": "^6.0.0", - "babel-preset-react": "^6.0.0", - "del": "^2.0.2", - "eslint": "^2.0.0", - "express": "^4.13.3", - "flux": "^2.0.3", - "glob": "^7.0.0", - "gulp": "^3.9.0", - "gulp-autoprefixer": "^3.1.0", - "gulp-cached": "^1.1.0", - "gulp-cssmin": "^0.1.7", - "gulp-eslint": "^2.0.0", - "gulp-if": "^2.0.0", - "gulp-inject": "^3.0.0", - "gulp-notify": "^2.2.0", - "gulp-sourcemaps": "^1.5.2", - "gulp-streamify": "1.0.2", - "gulp-uglify": "^1.2.0", - "gulp-util": "^3.0.6", - "jasmine-core": "^2.3.4", - "karma": "^0.13.10", - "karma-coverage": "^0.5.2", - "karma-jasmine": "^0.3.6", - "karma-junit-reporter": "^0.3.7", - "karma-mocha-reporter": "^1.1.1", - "karma-phantomjs-launcher": "^1.0.0", - "karma-phantomjs-shim": "^1.1.1", - "karma-sourcemap-loader": "^0.3.6", - "karma-webpack": "^1.7.0", - "phantomjs": "^2.1.3", - "phantomjs-prebuilt": "^2.1.4", - "react": "^0.14.3", - "react-addons-test-utils": "^0.14.3", - "react-dom": "^0.14.3", - "ts-loader": "^0.8.1", - "typescript": "^1.8.0", - "webpack": "^1.12.2", - "webpack-notifier": "^1.2.1" - } -} diff --git a/es6-babel-react-flux-karma/src/actions/GreetingActions.ts b/es6-babel-react-flux-karma/src/actions/GreetingActions.ts deleted file mode 100644 index c451280..0000000 --- a/es6-babel-react-flux-karma/src/actions/GreetingActions.ts +++ /dev/null @@ -1,23 +0,0 @@ -import AppDispatcher from '../dispatcher/AppDispatcher'; -import GreetingActionTypes from '../constants/action-types/GreetingActionTypes'; - -export function addGreeting(newGreeting: string) { - AppDispatcher.dispatch({ - newGreeting, - type: GreetingActionTypes.ADD_GREETING - }); -} - -export function newGreetingChanged(newGreeting: string) { - AppDispatcher.dispatch({ - newGreeting, - type: GreetingActionTypes.NEW_GREETING_CHANGED - }); -} - -export function removeGreeting(greetingToRemove: string) { - AppDispatcher.dispatch({ - greetingToRemove, - type: GreetingActionTypes.REMOVE_GREETING - }); -} diff --git a/es6-babel-react-flux-karma/src/components/App.tsx b/es6-babel-react-flux-karma/src/components/App.tsx deleted file mode 100644 index f6bceb6..0000000 --- a/es6-babel-react-flux-karma/src/components/App.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import GreetingStore from '../stores/GreetingStore'; -import * as GreetingActions from '../actions/GreetingActions'; -import GreetingState from '../types/GreetingState'; -import WhoToGreet from './WhoToGreet'; -import Greeting from './Greeting'; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = this._getStateFromStores(); - } - - componentWillMount() { - GreetingStore.addChangeListener(this._onChange); - } - - componentWillUnmount() { - GreetingStore.removeChangeListener(this._onChange); - } - - render() { - const { greetings, newGreeting } = this.state; - return ( -
-

Hello People!

- - - - { greetings.map((g, index) => ) } -
- ); - } - - _onChange = () => { - this.setState(this._getStateFromStores()); - } - - _getStateFromStores() { - return GreetingStore.getState(); - } -} - -export default App; diff --git a/es6-babel-react-flux-karma/src/components/Greeting.tsx b/es6-babel-react-flux-karma/src/components/Greeting.tsx deleted file mode 100644 index 213af66..0000000 --- a/es6-babel-react-flux-karma/src/components/Greeting.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import * as GreetingActions from '../actions/GreetingActions'; - -interface Props { - key: number; - targetOfGreeting: string; -} - -class Greeting extends React.Component { - constructor(props) { - super(props); - } - - static propTypes: React.ValidationMap = { - targetOfGreeting: React.PropTypes.string.isRequired - } - - render() { - return ( -

- Hello { this.props.targetOfGreeting }! - - -

- ); - } - - _onClick = (event) => { - GreetingActions.removeGreeting(this.props.targetOfGreeting); - } -} - -export default Greeting; diff --git a/es6-babel-react-flux-karma/src/components/WhoToGreet.tsx b/es6-babel-react-flux-karma/src/components/WhoToGreet.tsx deleted file mode 100644 index 5e3794f..0000000 --- a/es6-babel-react-flux-karma/src/components/WhoToGreet.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import * as GreetingActions from '../actions/GreetingActions'; - -interface Props { - newGreeting: string; -} - -class WhoToGreet extends React.Component { - constructor(props) { - super(props); - } - - static propTypes: React.ValidationMap = { - newGreeting: React.PropTypes.string.isRequired - } - - render() { - return ( -
-
- - -
-
- ); - } - - get _preventSubmission() { - return !this.props.newGreeting; - } - - _handleNewGreetingChange = (event) => { - const { target: { value: newGreeting } } = event; - GreetingActions.newGreetingChanged(newGreeting); - } - - _onSubmit = (event) => { - event.preventDefault(); - - if (!this._preventSubmission) { - GreetingActions.addGreeting(this.props.newGreeting); - } - } -} - -export default WhoToGreet; diff --git a/es6-babel-react-flux-karma/src/constants/action-types/GreetingActionTypes.ts b/es6-babel-react-flux-karma/src/constants/action-types/GreetingActionTypes.ts deleted file mode 100644 index ef9fda4..0000000 --- a/es6-babel-react-flux-karma/src/constants/action-types/GreetingActionTypes.ts +++ /dev/null @@ -1,7 +0,0 @@ -const GreetingActionTypes = { - ADD_GREETING: 'GreetingActionTypes.ADD_GREETING', - REMOVE_GREETING: 'GreetingActionTypes.REMOVE_GREETING', - NEW_GREETING_CHANGED: 'GreetingActionTypes.NEW_GREETING_CHANGED' -}; - -export default GreetingActionTypes; diff --git a/es6-babel-react-flux-karma/src/dispatcher/AppDispatcher.ts b/es6-babel-react-flux-karma/src/dispatcher/AppDispatcher.ts deleted file mode 100644 index 428b8a6..0000000 --- a/es6-babel-react-flux-karma/src/dispatcher/AppDispatcher.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Dispatcher } from 'flux'; - -const dispatcherInstance = new Dispatcher(); - -export default dispatcherInstance; diff --git a/es6-babel-react-flux-karma/src/index.html b/es6-babel-react-flux-karma/src/index.html deleted file mode 100644 index c5c150d..0000000 --- a/es6-babel-react-flux-karma/src/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - ES6 + Babel + React + Flux + Karma: The Secret Recipe - - - - - - -
- - - - diff --git a/es6-babel-react-flux-karma/src/stores/FluxStore.ts b/es6-babel-react-flux-karma/src/stores/FluxStore.ts deleted file mode 100644 index 552aaf7..0000000 --- a/es6-babel-react-flux-karma/src/stores/FluxStore.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { EventEmitter } from 'events'; - -const CHANGE_EVENT = 'change'; - -class FluxStore { - _changed: boolean; - _emitter: EventEmitter; - dispatchToken: string; - _dispatcher: Flux.Dispatcher; - _cleanStateFn: () => TState; - _state: TState; - - constructor(dispatcher, cleanStateFn) { - this._emitter = new EventEmitter(); - this._changed = false; - this._dispatcher = dispatcher; - this.dispatchToken = dispatcher.register(payload => { - this._invokeOnDispatch(payload); - }); - - this._cleanStateFn = cleanStateFn; - this._state = this._cleanStateFn(); - } - - /** - * Is idempotent per dispatched event - */ - emitChange() { - this._changed = true; - } - - hasChanged() { return this._changed; } - - addChangeListener(callback) { - this._emitter.on(CHANGE_EVENT, callback); - } - - removeChangeListener(callback) { - this._emitter.removeListener(CHANGE_EVENT, callback); - } - - _cleanState() { - this._changed = false; - this._state = this._cleanStateFn(); - } - - _invokeOnDispatch(payload) { - this._changed = false; - this._onDispatch(payload); - if (this._changed) { - this._emitter.emit(CHANGE_EVENT); - } - } - - _onDispatch(payload) { - if (process.env.NODE_ENV !== 'production') { - console.error(`${this.constructor.name} has not overridden FluxStore.__onDispatch(), which is required`); // eslint-disable-line no-console - } - } -} - -export default FluxStore; diff --git a/es6-babel-react-flux-karma/src/stores/GreetingStore.ts b/es6-babel-react-flux-karma/src/stores/GreetingStore.ts deleted file mode 100644 index c80dbfc..0000000 --- a/es6-babel-react-flux-karma/src/stores/GreetingStore.ts +++ /dev/null @@ -1,38 +0,0 @@ -import FluxStore from './FluxStore'; -import GreetingActionTypes from '../constants/action-types/GreetingActionTypes'; -import AppDispatcher from '../dispatcher/AppDispatcher'; -import GreetingState from '../types/GreetingState'; - -class GreeterStore extends FluxStore { - constructor(dispatcher) { - super(dispatcher, () => ({ - greetings: [], - newGreeting: '' - })); - } - - getState() { - return this._state - } - - _onDispatch(action) { - switch(action.type) { - case GreetingActionTypes.ADD_GREETING: - this._state.newGreeting = ''; - this._state.greetings = this._state.greetings.concat(action.newGreeting); - this.emitChange(); - break; - case GreetingActionTypes.REMOVE_GREETING: - this._state.greetings = this._state.greetings.filter(g => g !== action.greetingToRemove); - this.emitChange(); - break; - case GreetingActionTypes.NEW_GREETING_CHANGED: - this._state.newGreeting = action.newGreeting; - this.emitChange(); - break; - } - } -} - -const greeterStoreInstance = new GreeterStore(AppDispatcher); -export default greeterStoreInstance; diff --git a/es6-babel-react-flux-karma/src/tsconfig.json b/es6-babel-react-flux-karma/src/tsconfig.json deleted file mode 100644 index dbffad0..0000000 --- a/es6-babel-react-flux-karma/src/tsconfig.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "compileOnSave": false, - "filesGlob": [ - "../typings/**/*.*.ts", - "!../typings/jasmine/jasmine.d.ts", - "!../typings/react/react-addons-test-utils.d.ts", - "**/*.{ts,tsx}" - ], - "compilerOptions": { - "jsx": "preserve", - "target": "es6", - "noImplicitAny": false, - "removeComments": false, - "preserveConstEnums": true, - "sourceMap": true - }, - "files": [ - "../typings/flux/flux.d.ts", - "../typings/node/node.d.ts", - "../typings/react/react-dom.d.ts", - "../typings/react/react.d.ts", - "../typings/tsd.d.ts", - "actions/GreetingActions.ts", - "components/App.tsx", - "components/Greeting.tsx", - "components/WhoToGreet.tsx", - "constants/action-types/GreetingActionTypes.ts", - "dispatcher/AppDispatcher.ts", - "main.tsx", - "stores/FluxStore.ts", - "stores/GreetingStore.ts", - "types/GreetingState.ts" - ], - "exclude": [], - "atom": { - "rewriteTsconfig": true - } -} diff --git a/es6-babel-react-flux-karma/test/components/Greeting.tests.tsx b/es6-babel-react-flux-karma/test/components/Greeting.tests.tsx deleted file mode 100644 index 9ea44b4..0000000 --- a/es6-babel-react-flux-karma/test/components/Greeting.tests.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import * as TestUtils from 'react-addons-test-utils'; -import Greeting from '../../src/components/Greeting'; -import * as GreetingActions from '../../src/actions/GreetingActions'; - -describe('Greeting', () => { - let handleSelectionChangeSpy: jasmine.Spy; - beforeEach(() => { - handleSelectionChangeSpy = jasmine.createSpy('handleSelectionChange'); - }); - - it('given a targetOfGreeting of \'James\' it renders a p containing a greeting and a remove button', () => { - const targetOfGreeting = 'James'; - - const p = render({ targetOfGreeting }); - expect(p.type).toBe('p'); - expect(p.props.children[0]).toBe('Hello '); - expect(p.props.children[1]).toBe('James'); - expect(p.props.children[2]).toBe('!'); - - const [ , , , button ] = p.props.children; - - expect(button.type).toBe('button'); - expect(button.props.className).toBe('btn btn-default btn-danger'); - expect(button.props.children).toBe('Remove'); - }); - - it('button onClick triggers an removeGreeting action', () => { - const targetOfGreeting = 'Benjamin'; - const p = render({ targetOfGreeting }); - const [ , , , button ] = p.props.children; - spyOn(GreetingActions, 'removeGreeting'); - - button.props.onClick(); - - expect(GreetingActions.removeGreeting).toHaveBeenCalledWith(targetOfGreeting); - }); - - function render({ targetOfGreeting }) { - const shallowRenderer = TestUtils.createRenderer(); - shallowRenderer.render(); - return shallowRenderer.getRenderOutput(); - } -}); diff --git a/es6-babel-react-flux-karma/test/import-babel-polyfill.js b/es6-babel-react-flux-karma/test/import-babel-polyfill.js deleted file mode 100644 index b012711..0000000 --- a/es6-babel-react-flux-karma/test/import-babel-polyfill.js +++ /dev/null @@ -1 +0,0 @@ -import 'babel-polyfill'; diff --git a/es6-babel-react-flux-karma/test/stores/GreetingStore.tests.ts b/es6-babel-react-flux-karma/test/stores/GreetingStore.tests.ts deleted file mode 100644 index cb536b9..0000000 --- a/es6-babel-react-flux-karma/test/stores/GreetingStore.tests.ts +++ /dev/null @@ -1,56 +0,0 @@ -import GreetingStore from '../../src/stores/GreetingStore'; -import GreetingActionTypes from '../../src/constants/action-types/GreetingActionTypes'; - -const registeredCallback = GreetingStore._onDispatch.bind(GreetingStore); - -describe('GreetingStore', () => { - beforeEach(() => { - GreetingStore._cleanState(); - }); - - it('given no actions, newGreeting should be an empty string and greetings should be an empty array', () => { - const { greetings, newGreeting } = GreetingStore.getState(); - - expect(greetings).toEqual([]); - expect(newGreeting).toBe(''); - }); - - it('given an ADD_GREETING action with a newGreeting of \'Benjamin\', the newGreeting should be an empty string and greetings should contain \'Benjamin\'', () => { - [{ - newGreeting: 'Benjamin', - type: GreetingActionTypes.ADD_GREETING, - }].forEach(registeredCallback); - - const { greetings, newGreeting } = GreetingStore.getState(); - - expect(greetings.find(g => g === 'Benjamin')).toBeTruthy(); - expect(newGreeting).toBe(''); - }); - - it('given an REMOVE_GREETING action with a greetingToRemove of \'Benjamin\', the state greetings should be an empty array', () => { - [{ - newGreeting: 'Benjamin', - type: GreetingActionTypes.ADD_GREETING, - }, { - greetingToRemove: 'Benjamin', - type: GreetingActionTypes.REMOVE_GREETING, - }].forEach(registeredCallback); - - const { greetings } = GreetingStore.getState(); - - expect(greetings.length).toBe(0); - expect(greetings.find(g => g === 'Benjamin')).toBeFalsy(); - }); - - it('given a NEW_GREETING_CHANGED action with a newGreeting of \'Benjamin\', the state newGreeting should be \'Benjamin\'', () => { - [{ - newGreeting: 'Benjamin', - type: GreetingActionTypes.NEW_GREETING_CHANGED, - }].forEach(registeredCallback); - - const { newGreeting } = GreetingStore.getState(); - - expect(newGreeting).toEqual('Benjamin'); - }); - -}); diff --git a/es6-babel-react-flux-karma/test/tsconfig.json b/es6-babel-react-flux-karma/test/tsconfig.json deleted file mode 100644 index 368d9d5..0000000 --- a/es6-babel-react-flux-karma/test/tsconfig.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "compileOnSave": false, - "filesGlob": [ - "**/*.{ts,tsx}", - "../typings/**/*.*.ts" - ], - "compilerOptions": { - "jsx": "preserve", - "target": "es6", - "module": "commonjs", - "noImplicitAny": false, - "suppressImplicitAnyIndexErrors": true, - "removeComments": false, - "preserveConstEnums": true, - "sourceMap": true - }, - "files": [ - "components/App.tests.tsx", - "components/Greeting.tests.tsx", - "components/WhoToGreet.tests.tsx", - "stores/GreetingStore.tests.ts", - "../typings/flux/flux.d.ts", - "../typings/jasmine/jasmine.d.ts", - "../typings/node/node.d.ts", - "../typings/react/react-addons-test-utils.d.ts", - "../typings/react/react-dom.d.ts", - "../typings/react/react.d.ts", - "../typings/tsd.d.ts" - ], - "exclude": [], - "atom": { - "rewriteTsconfig": true - } -} diff --git a/es6-babel-react-flux-karma/tsd.json b/es6-babel-react-flux-karma/tsd.json deleted file mode 100644 index 2716a22..0000000 --- a/es6-babel-react-flux-karma/tsd.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "version": "v4", - "repo": "borisyankov/DefinitelyTyped", - "ref": "master", - "path": "typings", - "bundle": "typings/tsd.d.ts", - "installed": { - "jasmine/jasmine.d.ts": { - "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" - }, - "flux/flux.d.ts": { - "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" - }, - "node/node.d.ts": { - "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" - }, - "react/react.d.ts": { - "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" - }, - "react/react-dom.d.ts": { - "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" - }, - "react/react-addons-test-utils.d.ts": { - "commit": "bcd5761826eb567876c197ccc6a87c4d05731054" - } - } -} diff --git a/imageboard/db.ts b/imageboard/db.ts index c927607..ad85c69 100644 --- a/imageboard/db.ts +++ b/imageboard/db.ts @@ -1,7 +1,7 @@ // Mongo import mongodb = require('mongodb'); -var server = new mongodb.Server('localhost', 27017, {auto_reconnect: true}) +var server = new mongodb.Server('localhost', 27017, {auto_reconnect: true}); var db = new mongodb.Db('mydb', server, { w: 1 }); db.open(function() {}); @@ -33,9 +33,9 @@ export interface Image { export function getUser(id: string, callback: (user: User) => void) { db.collection('users', function(error, users) { if(error) { console.error(error); return; } - users.findOne({_id: id}, function(error, user) { - if(error) { console.error(error); return; } - callback(user); + users.find({_id: id}).batchSize(10).nextObject(function(error, user) { + if(error) { console.error(error); return; } + callback(user); }); }); } @@ -53,7 +53,7 @@ export function getUsers(callback: (users: User[]) => void) { export function getImage(imageId: string, callback: (image: Image) => void) { db.collection('images', function(error, images_collection) { if(error) { console.error(error); return; } - images_collection.findOne({_id: new mongodb.ObjectID(imageId)}, function(error, image) { + images_collection.find({_id: new mongodb.ObjectID(imageId)}).batchSize(10).nextObject(function(error, image) { if(error) { console.error(error); return; } callback(image); }); diff --git a/jquery/README.md b/jquery/README.md index 6739dba..2ffaefc 100644 --- a/jquery/README.md +++ b/jquery/README.md @@ -10,6 +10,7 @@ For best results, scroll the window using the scrollbar. ## Running ``` -tsc --sourcemap --target ES5 parallax.ts -start parallax.html +npm install +tsc +open parallax.html ``` diff --git a/jquery/jquery.d.ts b/jquery/jquery.d.ts deleted file mode 100644 index 219469c..0000000 --- a/jquery/jquery.d.ts +++ /dev/null @@ -1,703 +0,0 @@ -/* ***************************************************************************** -Copyright (c) Microsoft Corporation. All rights reserved. -Licensed under the Apache License, Version 2.0 (the "License"); you may not use -this file except in compliance with the License. You may obtain a copy of the -License at http://www.apache.org/licenses/LICENSE-2.0 - -THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED -WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, -MERCHANTABLITY OR NON-INFRINGEMENT. - -See the Apache Version 2.0 License for specific language governing permissions -and limitations under the License. -***************************************************************************** */ - -// Typing for the jQuery library, version 1.10 - -/* - Interface for the AJAX setting that will configure the AJAX request -*/ -interface JQueryAjaxSettings { - accepts?: any; - async?: boolean; - beforeSend? (jqXHR: JQueryXHR, settings: JQueryAjaxSettings): any; - cache?: boolean; - complete? (jqXHR: JQueryXHR, textStatus: string): any; - contents?: { [key: string]: any; }; - contentType?: any; - context?: any; - converters?: { [key: string]: any; }; - crossDomain?: boolean; - data?: any; - dataFilter? (data: any, ty: any): any; - dataType?: string; - error? (jqXHR: JQueryXHR, textStatus: string, errorThrow: string): any; - global?: boolean; - headers?: { [key: string]: any; }; - ifModified?: boolean; - isLocal?: boolean; - jsonp?: string; - jsonpCallback?: any; - mimeType?: string; - password?: string; - processData?: boolean; - scriptCharset?: string; - statusCode?: { [key: string]: any; }; - success? (data: any, textStatus: string, jqXHR: JQueryXHR): any; - timeout?: number; - traditional?: boolean; - type?: string; - url?: string; - username?: string; - xhr?: any; - xhrFields?: { [key: string]: any; }; -} - -/* - Interface for the jqXHR object -*/ -interface JQueryXHR extends XMLHttpRequest { - overrideMimeType(): any; -} - -/* - Interface for the JQuery callback -*/ -interface JQueryCallback { - add(...callbacks: any[]): any; - disable(): any; - empty(): any; - fire(...arguments: any[]): any; - fired(): boolean; - fireWith(context: any, ...args: any[]): any; - has(callback: any): boolean; - lock(): any; - locked(): boolean; - removed(...callbacks: any[]): any; -} - -/* - Interface for the JQuery promise, part of callbacks -*/ -interface JQueryPromise { - always(...alwaysCallbacks: any[]): JQueryDeferred; - done(...doneCallbacks: any[]): JQueryDeferred; - fail(...failCallbacks: any[]): JQueryDeferred; - pipe(doneFilter?: (x: any) => any, failFilter?: (x: any) => any, progressFilter?: (x: any) => any): JQueryPromise; - then(doneCallbacks: any, failCallbacks: any, progressCallbacks?: any): JQueryDeferred; -} - -/* - Interface for the JQuery deferred, part of callbacks -*/ -interface JQueryDeferred extends JQueryPromise { - notify(...args: any[]): JQueryDeferred; - notifyWith(context: any, ...args: any[]): JQueryDeferred; - - progress(...progressCallbacks: any[]): JQueryDeferred; - reject(...args: any[]): JQueryDeferred; - rejectWith(context: any, ...args: any[]): JQueryDeferred; - resolve(...args: any[]): JQueryDeferred; - resolveWith(context: any, ...args: any[]): JQueryDeferred; - state(): string; - then(doneCallbacks: any, failCallbacks?: any, progressCallbacks?: any): JQueryDeferred; -} - -/* - Interface of the JQuery extension of the W3C event object -*/ -interface JQueryEventObject extends Event { - data: any; - delegateTarget: Element; - isDefaultPrevented(): boolean; - isImmediatePropogationStopped(): boolean; - isPropogationStopped(): boolean; - namespace: string; - preventDefault(): any; - relatedTarget: Element; - result: any; - stopImmediatePropagation(): void; - stopPropagation(): void; - pageX: number; - pageY: number; - which: number; - metaKey: any; -} - -/* - Collection of properties of the current browser -*/ -interface JQueryBrowserInfo { - safari: boolean; - opera: boolean; - msie: boolean; - mozilla: boolean; - version: string; -} - -interface JQuerySupport { - ajax?: boolean; - boxModel?: boolean; - changeBubbles?: boolean; - checkClone?: boolean; - checkOn?: boolean; - cors?: boolean; - cssFloat?: boolean; - hrefNormalized?: boolean; - htmlSerialize?: boolean; - leadingWhitespace?: boolean; - noCloneChecked?: boolean; - noCloneEvent?: boolean; - opacity?: boolean; - optDisabled?: boolean; - optSelected?: boolean; - scriptEval? (): boolean; - style?: boolean; - submitBubbles?: boolean; - tbody?: boolean; -} - -interface JQueryTransport { - send(headers: { [index: string]: string; }, completeCallback: (status: number, statusText: string, responses: { [dataType: string]: any; }, headers: string) => void): void; - abort(): void; -} - -/* - Static members of jQuery (those on $ and jQuery themselves) -*/ -interface JQueryStatic { - - // AJAX - ajax(settings: JQueryAjaxSettings): JQueryXHR; - ajax(url: string, settings: JQueryAjaxSettings): JQueryXHR; - - ajaxPrefilter(handler: (opts: any, originalOpts: any, jqXHR: JQueryXHR) => any): any; - ajaxPrefilter(dataTypes: string, handler: (opts: any, originalOpts: any, jqXHR: JQueryXHR) => any): any; - - ajaxSetup(options: any): void; - ajaxTransport(dataType: string, handler: (options: JQueryAjaxSettings, originalOptions: JQueryAjaxSettings, jqXHR: JQueryXHR) => JQueryTransport): void; - - get(url: string, data?: any, success?: any, dataType?: any): JQueryXHR; - getJSON(url: string, data?: any, success?: any): JQueryXHR; - getScript(url: string, success?: any): JQueryXHR; - - param(obj: any): string; - param(obj: any, traditional: boolean): string; - - post(url: string, data?: any, success?: any, dataType?: any): JQueryXHR; - - // Callbacks - Callbacks(flags: any): JQueryCallback; - - // Core - holdReady(hold: boolean): any; - - (): JQuery; - (selector: string, context?: any): JQuery; - (element: Element): JQuery; - (elementArray: Element[]): JQuery; - (object: JQuery): JQuery; - (func: Function): JQuery; - (object: {}): JQuery; - - noConflict(removeAll?: boolean): Object; - - when(...deferreds: any[]): JQueryPromise; - - // CSS - css(e: any, propertyName: string, value?: any): any; - css(e: any, propertyName: any, value?: any): any; - cssHooks: { [key: string]: any; }; - - // Data - data(element: Element, key: string, value: any): Object; - - dequeue(element: Element, queueName?: string): any; - - hasData(element: Element): boolean; - - queue(element: Element, queueName?: string): any[]; - queue(element: Element, queueName: string, newQueueOrCallback: any): JQuery; - - removeData(element: Element, name?: string): JQuery; - - // Deferred - Deferred(beforeStart?: (deferred: JQueryDeferred) => any): JQueryDeferred; - - // Effects - fx: { tick: () => void; interval: number; stop: () => void; speeds: { slow: number; fast: number; }; off: boolean; step: any; }; - - // Events - proxy(func: Function, context: any): any; - proxy(context: any, name: string): any; - - // Internals - error(message: any): void; - - // Miscellaneous - expr: any; - fn: any; //TODO: Decide how we want to type this - isReady: boolean; - - // Properties - browser: JQueryBrowserInfo; - support: JQuerySupport; - - // Utilities - contains(container: Element, contained: Element): boolean; - - each(collection: any, callback: (indexInArray: any, valueOfElement: any) => any): any; - - extend(deep: boolean, target: any, ...objs: any[]): Object; - extend(target: any, ...objs: any[]): Object; - - globalEval(code: string): any; - - grep(array: any[], func: any, invert: boolean): any[]; - - inArray(value: any, array: any[], fromIndex?: number): number; - - isArray(obj: any): boolean; - isEmptyObject(obj: any): boolean; - isFunction(obj: any): boolean; - isNumeric(value: any): boolean; - isPlainObject(obj: any): boolean; - isWindow(obj: any): boolean; - isXMLDoc(node: Node): boolean; - - makeArray(obj: any): any[]; - - map(array: any[], callback: (elementOfArray: any, indexInArray: any) => any): any[]; - - merge(first: any[], second: any[]): any[]; - - noop(): any; - - now(): number; - - parseHTML(data: string, context?: Element, keepScripts?: boolean): any[]; - parseJSON(json: string): any; - - //FIXME: This should return an XMLDocument - parseXML(data: string): any; - - queue(element: Element, queueName: string, newQueue: any[]): JQuery; - - trim(str: string): string; - - type(obj: any): string; - - unique(arr: any[]): any[]; -} - -/* - The jQuery instance members -*/ -interface JQuery { - // AJAX - ajaxComplete(handler: any): JQuery; - ajaxError(handler: (evt: any, xhr: any, opts: any) => any): JQuery; - ajaxSend(handler: (evt: any, xhr: any, opts: any) => any): JQuery; - ajaxStart(handler: () => any): JQuery; - ajaxStop(handler: () => any): JQuery; - ajaxSuccess(handler: (evt: any, xml: any, opts: any) => any): JQuery; - - serialize(): string; - serializeArray(): any[]; - - // Attributes - addClass(classNames: string): JQuery; - addClass(func: (index: any, currentClass: any) => JQuery): JQuery; - - attr(attributeName: string): string; - attr(attributeName: string, func: (index: any, attr: any) => any): JQuery; - attr(attributeName: string, value: any): JQuery; - attr(map: { [key: string]: any; }): JQuery; - - hasClass(className: string): boolean; - - html(): string; - html(htmlString: string): JQuery; - - prop(propertyName: string): any; - prop(propertyName: string, func: (index: any, oldPropertyValue: any) => any): JQuery; - prop(propertyName: string, value: any): JQuery; - prop(map: any): JQuery; - - removeAttr(attributeName: any): JQuery; - - removeClass(func: (index: any, cls: any) => any): JQuery; - removeClass(className?: string): JQuery; - - removeProp(propertyName: any): JQuery; - - toggleClass(func: (index: any, cls: any, swtch: any) => any): JQuery; - toggleClass(swtch?: boolean): JQuery; - toggleClass(className: any, swtch?: boolean): JQuery; - - val(): any; - val(value: string[]): JQuery; - val(value: string): JQuery; - val(func: (index: any, value: any) => any): JQuery; - - // CSS - css(propertyNames: any[]): string; - css(propertyName: string): string; - css(propertyName: string, value: any): JQuery; - css(propertyName: any, value?: any): JQuery; - - height(): number; - height(value: number): JQuery; - height(func: (index: any, height: any) => any): JQuery; - - innerHeight(): number; - innerWidth(): number; - - offset(): { top: number; left: number; }; - offset(func: (index: any, coords: any) => any): JQuery; - offset(coordinates: any): JQuery; - - outerHeight(includeMargin?: boolean): number; - outerWidth(includeMargin?: boolean): number; - - position(): { top: number; left: number; }; - - scrollLeft(): number; - scrollLeft(value: number): JQuery; - - scrollTop(): number; - scrollTop(value: number): JQuery; - - width(): number; - width(value: number): JQuery; - width(func: (index: any, height: any) => any): JQuery; - - // Data - clearQueue(queueName?: string): JQuery; - - data(key: string, value: any): JQuery; - data(obj: { [key: string]: any; }): JQuery; - data(key?: string): any; - - dequeue(queueName?: string): JQuery; - - queue(queueName?: string): any[]; - queue(queueName: string, newQueueOrCallback: any): JQuery; - queue(newQueueOrCallback: any): JQuery; - - removeData(nameOrList?: any): JQuery; - - // Deferred - promise(type?: any, target?: any): JQueryPromise; - - // Effects - animate(properties: any, options: { duration?: any; easing?: string; complete?: Function; step?: Function; queue?: boolean; specialEasing?: any; }): JQuery; - animate(properties: any, duration?: any, easing?: "linear", complete?: Function): JQuery; - animate(properties: any, duration?: any, easing?: "swing", complete?: Function): JQuery; - animate(properties: any, duration?: any, easing?: string, complete?: Function): JQuery; - - delay(duration: number, queueName?: string): JQuery; - - fadeIn(duration?: any, easing?: "linear", complete?: Function): JQuery; - fadeIn(duration?: any, easing?: "swing", complete?: Function): JQuery; - fadeIn(duration?: any, easing?: string, complete?: Function): JQuery; - fadeIn(duration?: any, complete?: Function): JQuery; - - - fadeOut(duration?: any, easing?: "linear", complete?: Function): JQuery; - fadeOut(duration?: any, easing?: "swing", complete?: Function): JQuery; - fadeOut(duration?: any, easing?: string, complete?: Function): JQuery; - fadeOut(duration?: any, complete?: any): JQuery; - - fadeTo(duration: any, opacity: number, easing?: "linear", complete?: Function): JQuery; - fadeTo(duration: any, opacity: number, easing?: "swing", complete?: Function): JQuery; - fadeTo(duration: any, opacity: number, easing?: string, complete?: Function): JQuery; - fadeTo(duration: any, opacity: number, complete?: Function): JQuery; - - fadeToggle(duration?: any, easing?: "linear", complete?: Function): JQuery; - fadeToggle(duration?: any, easing?: "swing", complete?: Function): JQuery; - fadeToggle(duration?: any, easing?: string, complete?: Function): JQuery; - - finish(queue?: string): JQuery; - - hide(duration?: any, easing?: "linear", callback?: Function): JQuery; - hide(duration?: any, easing?: "swing", callback?: Function): JQuery; - hide(duration?: any, easing?: string, callback?: Function): JQuery; - hide(duration?: any, callback?: Function): JQuery; - - show(duration?: any, easing?: "linear", complete?: Function): JQuery; - show(duration?: any, easing?: "swing", complete?: Function): JQuery; - show(duration?: any, easing?: string, complete?: Function): JQuery; - show(duration?: any, complete?: Function): JQuery; - - slideDown(duration?: any, easing?: "linear", complete?: Function): JQuery; - slideDown(duration?: any, easing?: "swing", complete?: Function): JQuery; - slideDown(duration?: any, easing?: string, complete?: Function): JQuery; - slideDown(duration?: any, complete?: Function): JQuery; - - slideToggle(duration?: any, easing?: "linear", complete?: Function): JQuery; - slideToggle(duration?: any, easing?: "swing", complete?: Function): JQuery; - slideToggle(duration?: any, easing?: string, complete?: Function): JQuery; - slideToggle(duration?: any, complete?: Function): JQuery; - - slideUp(duration?: any, easing?: "linear", complete?: Function): JQuery; - slideUp(duration?: any, easing?: "swing", complete?: Function): JQuery; - slideUp(duration?: any, easing?: string, complete?: Function): JQuery; - slideUp(duration?: any, complete?: Function): JQuery; - - stop(clearQueue?: boolean, jumpToEnd?: boolean): JQuery; - stop(queue?: any, clearQueue?: boolean, jumpToEnd?: boolean): JQuery; - - toggle(showOrHide: boolean): JQuery; - toggle(duration?: any, easing?: "linear", complete?: Function): JQuery; - toggle(duration?: any, easing?: "swing", complete?: Function): JQuery; - toggle(duration?: any, easing?: string, complete?: Function): JQuery; - toggle(duration?: any, complete?: Function): JQuery; - - // Events - bind(eventType: string, preventBubble: boolean): JQuery; - bind(eventType: string, eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - bind(eventType: string, eventData: any, preventBubble: boolean): JQuery; - bind(...events: any[]): JQuery; - - blur(handler: (eventObject: JQueryEventObject) => any): JQuery; - blur(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - change(handler: (eventObject: JQueryEventObject) => any): JQuery; - change(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - click(handler: (eventObject: JQueryEventObject) => any): JQuery; - click(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - dblclick(handler: (eventObject: JQueryEventObject) => any): JQuery; - dblclick(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - delegate(selector: any, eventType: string, handler: (eventObject: JQueryEventObject) => any): JQuery; - - focus(handler: (eventObject: JQueryEventObject) => any): JQuery; - focus(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - focusin(handler: (eventObject: JQueryEventObject) => any): JQuery; - focusin(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - focusout(handler: (eventObject: JQueryEventObject) => any): JQuery; - focusout(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - hover(handlerIn: (eventObject: JQueryEventObject) => any, handlerOut: (eventObject: JQueryEventObject) => any): JQuery; - hover(handlerInOut: (eventObject: JQueryEventObject) => any): JQuery; - - keydown(handler: (eventObject: JQueryEventObject) => any): JQuery; - keydown(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - keypress(handler: (eventObject: JQueryEventObject) => any): JQuery; - keypress(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - keyup(handler: (eventObject: JQueryEventObject) => any): JQuery; - keyup(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - mousedown(handler: (eventObject: JQueryEventObject) => any): JQuery; - mousedown(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mouseevent(handler: (eventObject: JQueryEventObject) => any): JQuery; - mouseevent(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mouseenter(handler: (eventObject: JQueryEventObject) => any): JQuery; - mouseenter(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mouseleave(handler: (eventObject: JQueryEventObject) => any): JQuery; - mouseleave(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mousemove(handler: (eventObject: JQueryEventObject) => any): JQuery; - mousemove(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mouseout(handler: (eventObject: JQueryEventObject) => any): JQuery; - mouseout(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mouseover(handler: (eventObject: JQueryEventObject) => any): JQuery; - mouseover(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - mouseup(handler: (eventObject: JQueryEventObject) => any): JQuery; - mouseup(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery; - - off(events?: string, selector?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - off(eventsMap: { [key: string]: any; }, selector?: any): JQuery; - - on(events: string, selector?: any, data?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - on(eventsMap: { [key: string]: any; }, selector?: any, data?: any): JQuery; - - one(events: string, selector?: any, data?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - one(eventsMap: { [key: string]: any; }, selector?: any, data?: any): JQuery; - - ready(handler: any): JQuery; - - resize(handler: (eventObject: JQueryEventObject) => any): JQuery; - resize(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - scroll(handler: (eventObject: JQueryEventObject) => any): JQuery; - scroll(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - select(handler: (eventObject: JQueryEventObject) => any): JQuery; - select(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - submit(handler: (eventObject: JQueryEventObject) => any): JQuery; - submit(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery; - - trigger(eventType: string, ...extraParameters: any[]): JQuery; - trigger(event: JQueryEventObject): JQuery; - - triggerHandler(eventType: string, ...extraParameters: any[]): Object; - - unbind(eventType?: string, handler?: (eventObject: JQueryEventObject) => any): JQuery; - unbind(eventType: string, fls: boolean): JQuery; - unbind(evt: any): JQuery; - - undelegate(): JQuery; - undelegate(selector: any, eventType: string, handler?: (eventObject: JQueryEventObject) => any): JQuery; - undelegate(selector: any, events: any): JQuery; - undelegate(namespace: string): JQuery; - - // Internals - context: Element; - jquery: string; - pushStack(elements: any[]): JQuery; - pushStack(elements: any[], name: any, arguments: any): JQuery; - - // Manipulation - after(func: (index: any) => any): JQuery; - after(...content: any[]): JQuery; - - append(func: (index: any, html: any) => any): JQuery; - append(...content: any[]): JQuery; - - appendTo(target: any): JQuery; - - before(func: (index: any) => any): JQuery; - before(...content: any[]): JQuery; - - clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): JQuery; - - detach(selector?: any): JQuery; - - empty(): JQuery; - - insertAfter(target: any): JQuery; - insertBefore(target: any): JQuery; - - prepend(func: (index: any, html: any) => any): JQuery; - prepend(...content: any[]): JQuery; - - prependTo(target: any): JQuery; - - remove(selector?: any): JQuery; - - replaceAll(target: any): JQuery; - - replaceWith(func: any): JQuery; - - text(textString: string): JQuery; - text(): string; - - toArray(): any[]; - - unwrap(): JQuery; - - wrap(func: (index: any) => any): JQuery; - wrap(wrappingElement: any): JQuery; - - wrapAll(wrappingElement: any): JQuery; - - wrapInner(func: (index: any) => any): JQuery; - wrapInner(wrappingElement: any): JQuery; - - // Miscellaneous - each(func: (index: any, elem: Element) => any): JQuery; - - get(index?: number): any; - - index(selectorOrElement?: any): number; - - // Properties - length: number; - [x: number]: HTMLElement; - - // Traversing - add(selector: string, context?: any): JQuery; - add(html: string): JQuery; - add(obj: JQuery): JQuery; - add(...elements: any[]): JQuery; - - addBack(selector?: any): JQuery; - - children(selector?: any): JQuery; - - closest(selector: string): JQuery; - closest(selector: string, context?: Element): JQuery; - closest(obj: JQuery): JQuery; - closest(element: any): JQuery; - closest(selectors: any, context?: Element): any[]; - - contents(): JQuery; - - end(): JQuery; - - eq(index: number): JQuery; - - filter(selector: string): JQuery; - filter(func: (index: any) => any): JQuery; - filter(obj: JQuery): JQuery; - filter(element: any): JQuery; - - find(selector: string): JQuery; - find(element: any): JQuery; - find(obj: JQuery): JQuery; - - first(): JQuery; - - has(selector: string): JQuery; - has(contained: Element): JQuery; - - is(selector: string): boolean; - is(func: (index: any) => any): boolean; - is(obj: JQuery): boolean; - is(element: any): boolean; - - last(): JQuery; - - map(callback: (index: any, domElement: Element) => any): JQuery; - - next(selector?: string): JQuery; - - nextAll(selector?: string): JQuery; - - nextUntil(selector?: string, filter?: string): JQuery; - nextUntil(element?: Element, filter?: string): JQuery; - - not(selector: string): JQuery; - not(func: (index: any) => any): JQuery; - not(obj: JQuery): JQuery; - not(element: any): JQuery; - - offsetParent(): JQuery; - - parent(selector?: string): JQuery; - - parents(selector?: string): JQuery; - - parentsUntil(selector?: string, filter?: string): JQuery; - parentsUntil(element?: Element, filter?: string): JQuery; - - prev(selector?: string): JQuery; - - prevAll(selector?: string): JQuery; - - prevUntil(selector?: string, filter?: string): JQuery; - prevUntil(element?: Element, filter?: string): JQuery; - - siblings(selector?: string): JQuery; - - slice(start: number, end?: number): JQuery; -} - -declare var jQuery: JQueryStatic; -declare var $: JQueryStatic; diff --git a/jquery/package.json b/jquery/package.json new file mode 100644 index 0000000..8fe52aa --- /dev/null +++ b/jquery/package.json @@ -0,0 +1,18 @@ +{ + "name": "jquery", + "version": "1.0.0", + "description": "jQuery Typescript Demo", + "scripts":{ + "tsc": "tsc" + }, + "dependencies": { + "jquery": "^3.1.1" + }, + "devDependencies": { + "@types/jquery": "^2.0.40", + "typescript": "^2.1.6" + }, + "type": "git", + "url": "https://github.com/Microsoft/TypeScriptSamples.git", + "license": "MIT" +} \ No newline at end of file diff --git a/jquery/parallax.html b/jquery/parallax.html index 2ac4626..4f2c4c7 100644 --- a/jquery/parallax.html +++ b/jquery/parallax.html @@ -1,4 +1,4 @@ - + @@ -7,11 +7,9 @@ height: 2000px; background-color: Black; } - #plaxHost div { width: 95%; } - #plax1 { position: fixed; color:White; @@ -21,14 +19,12 @@ left: 0; z-index: 1; } - #plax2 { position: fixed; height: 2000px; background-image: url(starfield.png); background-position: 1087px 0; top: 0; - left: 0; z-index: 2; } @@ -42,7 +38,6 @@ left: 0; z-index: 3; } - #plax4 { position: fixed; height: 2000px; @@ -52,7 +47,6 @@ left: 0; z-index: 4; } - #plax5 { position: fixed; height: 2000px; @@ -84,7 +78,7 @@ - + - + \ No newline at end of file diff --git a/jquery/parallax.ts b/jquery/parallax.ts index eb772bc..8d44af9 100644 --- a/jquery/parallax.ts +++ b/jquery/parallax.ts @@ -1,5 +1,3 @@ -/// - module Parallax { export class ParallaxContainer { private content: HTMLElement; @@ -10,7 +8,7 @@ module Parallax { * Creates a Container for a Parallax * * @param {HTMLElement} scrollableContent The container that will be parallaxed - * @param {perspective} perspective The ratio of how much back content should be scroleld relative to forward content. For example, if this value is 0.5, and there are 2 surfaces, + * @param {perspective} perspective The ratio of how much back content should be scrolled relative to forward content. For example, if this value is 0.5, and there are 2 surfaces, * the front-most surface would be scrolled normally, and the surface behind it would be scrolled half as much. */ constructor(scrollableContent: HTMLElement, @@ -55,4 +53,4 @@ module Parallax { $(this.content).css({ marginTop: value }); } } -} +} \ No newline at end of file diff --git a/js-and-ts/README.md b/js-and-ts/README.md new file mode 100644 index 0000000..2b3ecfb --- /dev/null +++ b/js-and-ts/README.md @@ -0,0 +1,17 @@ +# TypeScript Sample: Mixing TypeScript and JavaScript + +## Overview + +A sample of how to use the `allowJS` option to use both JavaScript and TypeScript together. +A simple text formatter is provided, written in JavaScript. This formatter is then used +within a TypeScript class to format a computation. + +To run this sample, you must have `node` installed. You can also use `ts-node` to run this directly +without a compilation from TypeScript to JavaScript. + +## Running + +```bash +$ tsc robot.ts` +$ node robot.js` +``` \ No newline at end of file diff --git a/js-and-ts/format.js b/js-and-ts/format.js new file mode 100644 index 0000000..9b6ebd7 --- /dev/null +++ b/js-and-ts/format.js @@ -0,0 +1,13 @@ +const surroundWithStars = (value) => { + const valueLength = value.toString().length; + const topBottomBorder = '*'.repeat(valueLength + 2); + + return topBottomBorder + + "\n" + + '*' + value.toString() + '*' + + "\n" + + topBottomBorder; +} + +module.exports.Formatter = { surroundWithStars }; + diff --git a/js-and-ts/robot.ts b/js-and-ts/robot.ts new file mode 100644 index 0000000..0542c12 --- /dev/null +++ b/js-and-ts/robot.ts @@ -0,0 +1,46 @@ +// This import wouldn't be possible without the allowJS option in tsconfig +import { Formatter } from './format.js'; + +interface Robot { + name: String; + currentComputation: Number; +} + +class Robot { + constructor(public name: String) { + this.name = name; + this.currentComputation = 0; + } + + // Given a mathematical operation, return a value based on the value passed, + // the operation and the number 10 + compute(operation, value) { + let computedValue = 0; + switch(operation) { + case '+': + computedValue = value + 10; + break; + case '-': + computedValue = value - 10; + break; + case '/': + computedValue = value / 10; + break; + case '*': + computedValue = value * 10; + break; + default: + console.log("Does not compute!!") + } + this.currentComputation = computedValue; + } + + // Using an external JS module, format the computed value from our robot + displayCurrentComputation() { + console.log(Formatter.surroundWithStars(this.currentComputation)); + } +} + +const hal = new Robot('Hal'); +hal.compute('+', 32); +hal.displayCurrentComputation(); \ No newline at end of file diff --git a/js-and-ts/tsconfig.json b/js-and-ts/tsconfig.json new file mode 100644 index 0000000..2a9bebf --- /dev/null +++ b/js-and-ts/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "outDir": "./built", + "sourceMap": true, + "allowJs": true, + "target": "es6" + }, + "include": [ + "./**/*" + ] +} \ No newline at end of file diff --git a/jspm/config.js b/jspm/config.js deleted file mode 100644 index 9949125..0000000 --- a/jspm/config.js +++ /dev/null @@ -1,59 +0,0 @@ -System.config({ - baseURL: "/", - defaultJSExtensions: true, - transpiler: "typescript", - paths: { - "*": "src/*", - "src": "src", - "github:*": "jspm_packages/github/*", - "npm:*": "jspm_packages/npm/*" - }, - - packages: { - "/src": { - "defaultExtension": "ts" - } - }, - - map: { - "core-js": "npm:core-js@0.9.18", - "typescript": "npm:typescript@1.5.3", - "github:jspm/nodelibs-buffer@0.1.0": { - "buffer": "npm:buffer@3.4.3" - }, - "github:jspm/nodelibs-os@0.1.0": { - "os-browserify": "npm:os-browserify@0.1.2" - }, - "github:jspm/nodelibs-path@0.1.0": { - "path-browserify": "npm:path-browserify@0.0.0" - }, - "github:jspm/nodelibs-process@0.1.1": { - "process": "npm:process@0.10.1" - }, - "npm:buffer@3.4.3": { - "base64-js": "npm:base64-js@0.0.8", - "ieee754": "npm:ieee754@1.1.6", - "is-array": "npm:is-array@1.0.1" - }, - "npm:core-js@0.9.18": { - "fs": "github:jspm/nodelibs-fs@0.1.2", - "process": "github:jspm/nodelibs-process@0.1.1", - "systemjs-json": "github:systemjs/plugin-json@0.1.0" - }, - "npm:os-browserify@0.1.2": { - "os": "github:jspm/nodelibs-os@0.1.0" - }, - "npm:path-browserify@0.0.0": { - "process": "github:jspm/nodelibs-process@0.1.1" - }, - "npm:typescript@1.5.3": { - "buffer": "github:jspm/nodelibs-buffer@0.1.0", - "child_process": "github:jspm/nodelibs-child_process@0.1.0", - "fs": "github:jspm/nodelibs-fs@0.1.2", - "os": "github:jspm/nodelibs-os@0.1.0", - "path": "github:jspm/nodelibs-path@0.1.0", - "process": "github:jspm/nodelibs-process@0.1.1", - "readline": "github:jspm/nodelibs-readline@0.1.0" - } - } -}); diff --git a/jspm/index.html b/jspm/index.html index 08741d0..83851d5 100644 --- a/jspm/index.html +++ b/jspm/index.html @@ -2,12 +2,12 @@ Jspm sample - +