diff options
Diffstat (limited to 'node_modules/ts-loader/examples/react-babel-karma-gulp')
11 files changed, 544 insertions, 0 deletions
diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/README.md b/node_modules/ts-loader/examples/react-babel-karma-gulp/README.md new file mode 100644 index 000000000..e7a0cb064 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/README.md @@ -0,0 +1,16 @@ +# TypeScript, Babel, React, and Karma Sample
+
+## Getting started
+
+You'll need [node / npm](https://nodejs.org/) installed. To get up and running just enter:
+
+```
+npm install
+npm run serve
+```
+
+This will:
+
+1. Download the npm packages you need (including the type definitions from DefinitelyTyped)
+2. Compile the code and serve it up at [http://localhost:8080](http://localhost:8080)
+
diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/clean.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/clean.js new file mode 100644 index 000000000..c51b4e416 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/clean.js @@ -0,0 +1,29 @@ +'use strict'; + +var del = require('del'); +var gutil = require('gulp-util'); +var fs = require('fs'); + +function run(done) { + fs.stat('./dist', function(err){ + if (err) { + // Never existed + done(); + } + else { + del(['./dist'], { force: true }) + .then(function(paths) { + gutil.log('Deleted files/folders:\n', paths.join('\n')); + done(); + }) + .catch(function(error) { + gutil.log('Problem deleting:\n', error); + done(); + }); + } + }); +} + +module.exports = { + run: function(done) { return run(done); } +}; diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/inject.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/inject.js new file mode 100644 index 000000000..e4133e565 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/inject.js @@ -0,0 +1,55 @@ +'use strict'; + +var gulp = require('gulp'); +var inject = require('gulp-inject'); +var glob = require('glob'); + +function injectIndex(options) { + function run() { + var target = gulp.src('./src/index.html'); + var sources = gulp.src([ + //'./dist/styles/main*.css', + './dist/scripts/vendor*.js', + './dist/scripts/main*.js' + ], { read: false }); + + return target + .pipe(inject(sources, { ignorePath: '/dist/', addRootSlash: false, removeTags: true })) + .pipe(gulp.dest('./dist')); + } + + var jsCssGlob = 'dist/**/*.{js,css}'; + + function checkForInitialFilesThenRun() { + glob(jsCssGlob, function (er, files) { + var filesWeNeed = ['dist/scripts/main', 'dist/scripts/vendor'/*, 'dist/styles/main'*/]; + + function fileIsPresent(fileWeNeed) { + return files.some(function(file) { + return file.indexOf(fileWeNeed) !== -1; + }); + } + + if (filesWeNeed.every(fileIsPresent)) { + run('initial build'); + } else { + checkForInitialFilesThenRun(); + } + }); + } + + checkForInitialFilesThenRun(); + + if (options.shouldWatch) { + gulp.watch(jsCssGlob, function(evt) { + if (evt.path && evt.type === 'changed') { + run(evt.path); + } + }); + } +} + +module.exports = { + build: function() { return injectIndex({ shouldWatch: false }); }, + watch: function() { return injectIndex({ shouldWatch: true }); } +}; diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/staticFiles.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/staticFiles.js new file mode 100644 index 000000000..20327f272 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/staticFiles.js @@ -0,0 +1,31 @@ +'use strict'; + +var gulp = require('gulp'); +var cache = require('gulp-cached'); + +var targets = [ + { description: 'INDEX', src: './src/index.html', dest: './dist' } +]; + +function copy(options) { + function run(target) { + gulp.src(target.src) + .pipe(cache(target.description)) + .pipe(gulp.dest(target.dest)); + } + + function watch(target) { + gulp.watch(target.src, function() { run(target); }); + } + + targets.forEach(run); + + if (options.shouldWatch) { + targets.forEach(watch); + } +} + +module.exports = { + build: function() { return copy({ shouldWatch: false }); }, + watch: function() { return copy({ shouldWatch: true }); } +}; diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/tests.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/tests.js new file mode 100644 index 000000000..05af0a551 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/tests.js @@ -0,0 +1,45 @@ +'use strict'; + +var Server = require('karma').Server; +var path = require('path'); +var gutil = require('gulp-util'); + +function runTests(options) { + // Documentation: https://karma-runner.github.io/0.13/dev/public-api.html + var karmaConfig = { + configFile: path.join(__dirname, '../karma.conf.js'), + singleRun: !options.shouldWatch, + + plugins: ['karma-webpack', 'karma-jasmine', 'karma-mocha-reporter', 'karma-sourcemap-loader', 'karma-phantomjs-launcher'], + reporters: ['mocha'] + }; + + if (options.done) { + karmaConfig.plugins.push('karma-junit-reporter'); + karmaConfig.reporters.push('junit'); + } else { + karmaConfig.plugins.push('karma-notify-reporter'); + karmaConfig.reporters.push('notify'); + } + + new Server(karmaConfig, karmaCompleted).start(); + + function karmaCompleted(exitCode) { + if (options.done) { + if (exitCode === 1) { + gutil.log('Karma: tests failed with code ' + exitCode); + } else { + gutil.log('Karma completed!'); + } + options.done(); + } + else { + process.exit(exitCode); + } + } +} + +module.exports = { + run: function(done) { return runTests({ shouldWatch: false, done: done }); }, + watch: function() { return runTests({ shouldWatch: true }); } +}; diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/webpack.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/webpack.js new file mode 100644 index 000000000..2ecbf42ea --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulp/webpack.js @@ -0,0 +1,100 @@ +'use strict'; + +var gulp = require('gulp'); +var gutil = require('gulp-util'); +var webpack = require('webpack'); +var WebpackNotifierPlugin = require('webpack-notifier'); +var failPlugin = require('webpack-fail-plugin'); +var webpackConfig = require('../webpack.config.js'); +var packageJson = require('../package.json'); + +function buildProduction(done) { + // modify some webpack config options + var myProdConfig = webpackConfig; + myProdConfig.output.filename = '[name].[hash].js'; + + myProdConfig.plugins = myProdConfig.plugins.concat( + new webpack.DefinePlugin({ + 'process.env': { + 'NODE_ENV': JSON.stringify('production') + } + }), + new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.[hash].js' }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: true + } + }), + failPlugin + ); + + // 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 = webpackConfig; + myDevConfig.devtool = 'inline-source-map'; + + 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 build() { + return new Promise(function (resolve, reject) { + buildProduction(function (err) { + if (err) { + reject(err); + } else { + resolve('webpack built'); + } + }); + }); +} + +function watch() { + var firstBuildDone = false; + + return new Promise(function (resolve, reject) { + var devCompiler = createDevCompiler(); + devCompiler.watch({ // watch options: + aggregateTimeout: 300 // wait so long for more changes + }, function (err, stats) { + if (err) { + if (!firstBuildDone) { + firstBuildDone = true; + reject(err); + } + throw new gutil.PluginError('webpack:build-dev', err); + } else { + if (!firstBuildDone) { + firstBuildDone = true; + resolve('webpack built'); + } + } + + gutil.log('[webpack:build-dev]', stats.toString({ + chunks: false, + colors: true + })); + }); + }); +} + +module.exports = { + build: function () { return build(); }, + watch: function () { return watch(); } +}; diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/gulpFile.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulpFile.js new file mode 100644 index 000000000..03c6a6b4e --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/gulpFile.js @@ -0,0 +1,49 @@ +'use strict'; + +var gulp = require('gulp'); +var gutil = require('gulp-util'); +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'); + +gulp.task('delete-dist', function (done) { + clean.run(done); +}); + +gulp.task('build-js', ['delete-dist'], function(done) { + webpack.build().then(function() { done(); }); +}); + +gulp.task('build-other', ['delete-dist'], function() { + staticFiles.build(); +}); + +gulp.task('build', ['build-js', 'build-other'], function () { + inject.build(); +}); + +gulp.task('watch', ['delete-dist'], function(done) { + Promise.all([ + webpack.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); + }); + + 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/node_modules/ts-loader/examples/react-babel-karma-gulp/karma.conf.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/karma.conf.js new file mode 100644 index 000000000..f07fbc179 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/karma.conf.js @@ -0,0 +1,49 @@ +/* eslint-disable no-var, strict */ +'use strict'; + +var webpackConfig = require('./webpack.config.js'); + +module.exports = function(config) { + // Documentation: https://karma-runner.github.io/0.13/config/configuration-file.html + config.set({ + browsers: [ 'PhantomJS' ], + + files: [ + // This ensures we have the es6 shims in place and then loads all the tests + 'test/main.js' + ], + + port: 9876, + + frameworks: [ 'jasmine' ], + + logLevel: config.LOG_INFO, //config.LOG_DEBUG + + preprocessors: { + 'test/main.js': [ 'webpack', 'sourcemap' ] + }, + + webpack: { + devtool: 'inline-source-map', + module: webpackConfig.module, + resolve: webpackConfig.resolve + }, + + webpackMiddleware: { + quiet: true, + stats: { + colors: true + } + }, + + // reporter options + mochaReporter: { + colors: { + success: 'bgGreen', + info: 'cyan', + warning: 'bgBlue', + error: 'bgRed' + } + } + }); +}; diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/package.json b/node_modules/ts-loader/examples/react-babel-karma-gulp/package.json new file mode 100644 index 000000000..52ed4c468 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/package.json @@ -0,0 +1,84 @@ +{
+ "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",
+ "ES2016",
+ "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": {
+ "@types/fbemitter": "^2.0.32",
+ "@types/flux": "0.0.32",
+ "@types/jasmine": "^2.5.35",
+ "@types/react": "^0.14.41",
+ "@types/react-addons-test-utils": "^0.14.15",
+ "@types/react-test-renderer": "^15.5.0",
+ "@types/react-bootstrap": "0.0.33",
+ "@types/react-dom": "^0.14.18",
+ "babel": "^6.0.0",
+ "babel-core": "^6.0.0",
+ "babel-loader": "^7.0.0",
+ "babel-preset-es2015": "^6.0.0",
+ "babel-preset-es2016": "^6.16.0",
+ "babel-preset-react": "^6.0.0",
+ "del": "^2.0.2",
+ "eslint": "^2.0.0",
+ "express": "^4.13.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": "^1.2.0",
+ "karma-jasmine": "^1.0.0",
+ "karma-junit-reporter": "^1.0.0",
+ "karma-mocha-reporter": "^2.0.0",
+ "karma-notify-reporter": "^1.0.0",
+ "karma-phantomjs-launcher": "^1.0.0",
+ "karma-sourcemap-loader": "^0.3.6",
+ "karma-webpack": "^2.0.1",
+ "phantomjs-prebuilt": "^2.1.4",
+ "react-addons-test-utils": "^15.3.1",
+ "react-test-renderer": "^15.5.4",
+ "ts-loader": "^2.0.0",
+ "typescript": "^2.1.4",
+ "webpack": "^2.2.0",
+ "webpack-fail-plugin": "^1.0.4",
+ "webpack-notifier": "^1.2.1"
+ },
+ "dependencies": {
+ "babel-polyfill": "^6.0.0",
+ "flux": "^2.0.3",
+ "fbemitter": "^2.0.2",
+ "react": "^15.4.1",
+ "react-dom": "^15.4.1"
+ }
+}
diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/tsconfig.json b/node_modules/ts-loader/examples/react-babel-karma-gulp/tsconfig.json new file mode 100644 index 000000000..c3a732c12 --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/tsconfig.json @@ -0,0 +1,22 @@ +{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "allowSyntheticDefaultImports": true,
+ "lib": [
+ "dom",
+ "es2015",
+ "es2016"
+ ],
+ "jsx": "preserve",
+ "target": "es2016",
+ "module": "es2015",
+ "moduleResolution": "node",
+ "noImplicitAny": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "removeComments": false,
+ "preserveConstEnums": true,
+ "sourceMap": true,
+ "skipLibCheck": true
+ }
+}
\ No newline at end of file diff --git a/node_modules/ts-loader/examples/react-babel-karma-gulp/webpack.config.js b/node_modules/ts-loader/examples/react-babel-karma-gulp/webpack.config.js new file mode 100644 index 000000000..60620a83f --- /dev/null +++ b/node_modules/ts-loader/examples/react-babel-karma-gulp/webpack.config.js @@ -0,0 +1,64 @@ +'use strict'; + +var path = require('path'); + +var babelOptions = { + "presets": [ + "react", + [ + "es2015", + { + "modules": false + } + ], + "es2016" + ] +}; + +module.exports = { + cache: true, + entry: { + main: './src/main.tsx', + vendor: [ + 'babel-polyfill', + 'fbemitter', + 'flux', + 'react', + 'react-dom' + ] + }, + output: { + path: path.resolve(__dirname, './dist/scripts'), + filename: '[name].js', + chunkFilename: '[chunkhash].js' + }, + module: { + rules: [{ + test: /\.ts(x?)$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + options: babelOptions + }, + { + loader: 'ts-loader' + } + ] + }, { + test: /\.js$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + options: babelOptions + } + ] + }] + }, + plugins: [ + ], + resolve: { + extensions: ['.ts', '.tsx', '.js'] + }, +}; |