diff --git a/templates/Angular2Spa/ClientApp/app/app.module.ts b/templates/Angular2Spa/ClientApp/app/app.module.ts index 6d912da0..006fea8d 100644 --- a/templates/Angular2Spa/ClientApp/app/app.module.ts +++ b/templates/Angular2Spa/ClientApp/app/app.module.ts @@ -1,11 +1,11 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { UniversalModule } from 'angular2-universal'; -import { AppComponent } from './components/app/app.component' -import { NavMenuComponent } from './components/navmenu/navmenu.component'; -import { HomeComponent } from './components/home/home.component'; -import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; -import { CounterComponent } from './components/counter/counter.component'; +import { NgModule } from "@angular/core"; +import { RouterModule } from "@angular/router"; +import { UniversalModule } from "angular2-universal"; +import { AppComponent } from "./components/app/app.component"; +import { NavMenuComponent } from "./components/navmenu/navmenu.component"; +import { HomeComponent } from "./components/home/home.component"; +import { FetchDataComponent } from "./components/fetchdata/fetchdata.component"; +import { CounterComponent } from "./components/counter/counter.component"; @NgModule({ bootstrap: [ AppComponent ], @@ -19,11 +19,11 @@ import { CounterComponent } from './components/counter/counter.component'; imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forRoot([ - { path: '', redirectTo: 'home', pathMatch: 'full' }, - { path: 'home', component: HomeComponent }, - { path: 'counter', component: CounterComponent }, - { path: 'fetch-data', component: FetchDataComponent }, - { path: '**', redirectTo: 'home' } + { path: "", redirectTo: "home", pathMatch: "full" }, + { path: "home", component: HomeComponent }, + { path: "counter", component: CounterComponent }, + { path: "fetch-data", component: FetchDataComponent }, + { path: "**", redirectTo: "home" } ]) ] }) diff --git a/templates/Angular2Spa/ClientApp/boot-client.ts b/templates/Angular2Spa/ClientApp/boot-client.ts index 03d73a72..9cc4b5f8 100644 --- a/templates/Angular2Spa/ClientApp/boot-client.ts +++ b/templates/Angular2Spa/ClientApp/boot-client.ts @@ -1,13 +1,13 @@ -import 'angular2-universal-polyfills/browser'; -import { enableProdMode } from '@angular/core'; -import { platformUniversalDynamic } from 'angular2-universal'; -import { AppModule } from './app/app.module'; -import 'bootstrap'; +import "angular2-universal-polyfills/browser"; +import { enableProdMode } from "@angular/core"; +import { platformUniversalDynamic } from "angular2-universal"; +import { AppModule } from "./app/app.module"; +import "bootstrap"; // Enable either Hot Module Reloading or production mode -if (module['hot']) { - module['hot'].accept(); - module['hot'].dispose(() => { platform.destroy(); }); +if (module["hot"]) { + module["hot"].accept(); + module["hot"].dispose(() => { platform.destroy(); }); } else { enableProdMode(); } @@ -15,8 +15,8 @@ if (module['hot']) { // Boot the application, either now or when the DOM content is loaded const platform = platformUniversalDynamic(); const bootApplication = () => { platform.bootstrapModule(AppModule); }; -if (document.readyState === 'complete') { +if (document.readyState === "complete") { bootApplication(); } else { - document.addEventListener('DOMContentLoaded', bootApplication); + document.addEventListener("DOMContentLoaded", bootApplication); } diff --git a/templates/Angular2Spa/ClientApp/boot-server.ts b/templates/Angular2Spa/ClientApp/boot-server.ts index a5ee0860..14a93023 100644 --- a/templates/Angular2Spa/ClientApp/boot-server.ts +++ b/templates/Angular2Spa/ClientApp/boot-server.ts @@ -1,24 +1,24 @@ -import 'angular2-universal-polyfills'; -import 'zone.js'; -import { enableProdMode } from '@angular/core'; -import { platformNodeDynamic } from 'angular2-universal'; -import { AppModule } from './app/app.module'; +import "angular2-universal-polyfills"; +import "zone.js"; +import { enableProdMode } from "@angular/core"; +import { platformNodeDynamic } from "angular2-universal"; +import { AppModule } from "./app/app.module"; enableProdMode(); const platform = platformNodeDynamic(); -export default function (params: any) : Promise<{ html: string, globals?: any }> { +export default function (params: any): Promise<{ html: string, globals?: any }> { return new Promise((resolve, reject) => { const requestZone = Zone.current.fork({ - name: 'angular-universal request', + name: "angular-universal request", properties: { - baseUrl: '/', + baseUrl: "/", requestUrl: params.url, originUrl: params.origin, preboot: false, // TODO: Render just the component instead of wrapping it inside an extra HTML document // Waiting on https://github.com/angular/universal/issues/347 - document: '' + document: "" }, onHandleError: (parentZone, currentZone, targetZone, error) => { // If any error occurs while rendering the module, reject the whole operation diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js index 813c12a2..092990c4 100644 --- a/templates/Angular2Spa/webpack.config.js +++ b/templates/Angular2Spa/webpack.config.js @@ -1,36 +1,36 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var nodeExternals = require('webpack-node-externals'); -var merge = require('webpack-merge'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var nodeExternals = require("webpack-node-externals"); +var merge = require("webpack-merge"); var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/; // Configuration in common to both client-side and server-side bundles var sharedConfig = { - resolve: { extensions: [ '', '.js', '.ts' ] }, + resolve: { extensions: [ "", ".js", ".ts" ] }, output: { - filename: '[name].js', - publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix + filename: "[name].js", + publicPath: "/dist/" // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { loaders: [ - { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, - { test: /\.html$/, loader: 'raw' }, - { test: /\.css$/, loader: 'to-string!css' }, - { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } + { test: /\.ts$/, include: /ClientApp/, loader: "ts", query: { silent: true } }, + { test: /\.html$/, loader: "raw" }, + { test: /\.css$/, loader: "to-string!css" }, + { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url", query: { limit: 25000 } } ] } }; // Configuration for client-side bundle suitable for running in browsers var clientBundleConfig = merge(sharedConfig, { - entry: { 'main-client': './ClientApp/boot-client.ts' }, - output: { path: path.join(__dirname, './wwwroot/dist') }, - devtool: isDevBuild ? 'inline-source-map' : null, + entry: { "main-client": "./ClientApp/boot-client.ts" }, + output: { path: path.join(__dirname, "./wwwroot/dist") }, + devtool: isDevBuild ? "inline-source-map" : null, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, - manifest: require('./wwwroot/dist/vendor-manifest.json') + manifest: require("./wwwroot/dist/vendor-manifest.json") }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only @@ -41,13 +41,13 @@ var clientBundleConfig = merge(sharedConfig, { // Configuration for server-side (prerendering) bundle suitable for running in Node var serverBundleConfig = merge(sharedConfig, { - entry: { 'main-server': './ClientApp/boot-server.ts' }, + entry: { "main-server": "./ClientApp/boot-server.ts" }, output: { - libraryTarget: 'commonjs', - path: path.join(__dirname, './ClientApp/dist') + libraryTarget: "commonjs", + path: path.join(__dirname, "./ClientApp/dist") }, - target: 'node', - devtool: 'inline-source-map', + target: "node", + devtool: "inline-source-map", externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules }); diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js index 5853c8dd..4b1b2623 100644 --- a/templates/Angular2Spa/webpack.config.vendor.js +++ b/templates/Angular2Spa/webpack.config.vendor.js @@ -1,51 +1,51 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('vendor.css'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var extractCSS = new ExtractTextPlugin("vendor.css"); module.exports = { resolve: { - extensions: [ '', '.js' ] + extensions: [ "", ".js" ] }, module: { loaders: [ - { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, - { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } + { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: "url-loader?limit=100000" }, + { test: /\.css(\?|$)/, loader: extractCSS.extract(["css"]) } ] }, entry: { vendor: [ - '@angular/common', - '@angular/compiler', - '@angular/core', - '@angular/http', - '@angular/platform-browser', - '@angular/platform-browser-dynamic', - '@angular/router', - '@angular/platform-server', - 'angular2-universal', - 'angular2-universal-polyfills', - 'bootstrap', - 'bootstrap/dist/css/bootstrap.css', - 'es6-shim', - 'es6-promise', - 'jquery', - 'zone.js', + "@angular/common", + "@angular/compiler", + "@angular/core", + "@angular/http", + "@angular/platform-browser", + "@angular/platform-browser-dynamic", + "@angular/router", + "@angular/platform-server", + "angular2-universal", + "angular2-universal-polyfills", + "bootstrap", + "bootstrap/dist/css/bootstrap.css", + "es6-shim", + "es6-promise", + "jquery", + "zone.js", ] }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - library: '[name]_[hash]', + path: path.join(__dirname, "wwwroot", "dist"), + filename: "[name].js", + library: "[name]_[hash]", }, plugins: [ extractCSS, - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) + new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), new webpack.DllPlugin({ - path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), - name: '[name]_[hash]' + path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"), + name: "[name]_[hash]" }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) diff --git a/templates/KnockoutSpa/ClientApp/boot.ts b/templates/KnockoutSpa/ClientApp/boot.ts index a3932f87..1ef48e3a 100644 --- a/templates/KnockoutSpa/ClientApp/boot.ts +++ b/templates/KnockoutSpa/ClientApp/boot.ts @@ -1,11 +1,11 @@ -import './css/site.css'; -import * as ko from 'knockout'; -import { createHistory } from 'history'; -import './webpack-component-loader'; -import AppRootComponent from './components/app-root/app-root'; +import "./css/site.css"; +import * as ko from "knockout"; +import { createHistory } from "history"; +import "./webpack-component-loader"; +import AppRootComponent from "./components/app-root/app-root"; // Load and register the component -ko.components.register('app-root', AppRootComponent); +ko.components.register("app-root", AppRootComponent); // Tell Knockout to start up an instance of your application ko.applyBindings({ history: createHistory() }); diff --git a/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts b/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts index 7583faff..224c37d2 100644 --- a/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts +++ b/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts @@ -1,12 +1,12 @@ -import * as ko from 'knockout'; -import { Route, Router } from '../../router'; -import navMenu from '../nav-menu/nav-menu'; +import * as ko from "knockout"; +import { Route, Router } from "../../router"; +import navMenu from "../nav-menu/nav-menu"; // Declare the client-side routing configuration const routes: Route[] = [ - { url: '', params: { page: 'home-page' } }, - { url: 'counter', params: { page: 'counter-example' } }, - { url: 'fetch-data', params: { page: 'fetch-data' } } + { url: "", params: { page: "home-page" } }, + { url: "counter", params: { page: "counter-example" } }, + { url: "fetch-data", params: { page: "fetch-data" } } ]; class AppRootViewModel { @@ -15,17 +15,17 @@ class AppRootViewModel { constructor(params: { history: HistoryModule.History }) { // Activate the client-side router - this._router = new Router(params.history, routes) + this._router = new Router(params.history, routes); this.route = this._router.currentRoute; // Load and register all the KO components needed to handle the routes - // The optional 'bundle?lazy!' prefix is a Webpack feature that causes the referenced modules + // The optional "bundle?lazy!" prefix is a Webpack feature that causes the referenced modules // to be split into separate files that are then loaded on demand. // For docs, see https://github.com/webpack/bundle-loader - ko.components.register('nav-menu', navMenu); - ko.components.register('home-page', require('bundle?lazy!../home-page/home-page')); - ko.components.register('counter-example', require('bundle?lazy!../counter-example/counter-example')); - ko.components.register('fetch-data', require('bundle?lazy!../fetch-data/fetch-data')); + ko.components.register("nav-menu", navMenu); + ko.components.register("home-page", require("bundle?lazy!../home-page/home-page")); + ko.components.register("counter-example", require("bundle?lazy!../counter-example/counter-example")); + ko.components.register("fetch-data", require("bundle?lazy!../fetch-data/fetch-data")); } // To support hot module replacement, this method unregisters the router and KO components. @@ -40,4 +40,4 @@ class AppRootViewModel { } } -export default { viewModel: AppRootViewModel, template: require('./app-root.html') }; +export default { viewModel: AppRootViewModel, template: require("./app-root.html") }; diff --git a/templates/KnockoutSpa/ClientApp/components/counter-example/counter-example.ts b/templates/KnockoutSpa/ClientApp/components/counter-example/counter-example.ts index 39b7f046..bcf1a4ce 100644 --- a/templates/KnockoutSpa/ClientApp/components/counter-example/counter-example.ts +++ b/templates/KnockoutSpa/ClientApp/components/counter-example/counter-example.ts @@ -1,4 +1,4 @@ -import * as ko from 'knockout'; +import * as ko from "knockout"; class CounterExampleViewModel { public currentCount = ko.observable(0); @@ -9,4 +9,4 @@ class CounterExampleViewModel { } } -export default { viewModel: CounterExampleViewModel, template: require('./counter-example.html') }; +export default { viewModel: CounterExampleViewModel, template: require("./counter-example.html") }; diff --git a/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts b/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts index a6618cd3..15583845 100644 --- a/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts +++ b/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts @@ -1,5 +1,5 @@ -import * as ko from 'knockout'; -import 'isomorphic-fetch'; +import * as ko from "knockout"; +import "isomorphic-fetch"; interface WeatherForecast { dateFormatted: string; @@ -12,7 +12,7 @@ class FetchDataViewModel { public forecasts = ko.observableArray(); constructor() { - fetch('/api/SampleData/WeatherForecasts') + fetch("/api/SampleData/WeatherForecasts") .then(response => response.json()) .then((data: WeatherForecast[]) => { this.forecasts(data); @@ -20,4 +20,4 @@ class FetchDataViewModel { } } -export default { viewModel: FetchDataViewModel, template: require('./fetch-data.html') }; +export default { viewModel: FetchDataViewModel, template: require("./fetch-data.html") }; diff --git a/templates/KnockoutSpa/ClientApp/components/home-page/home-page.ts b/templates/KnockoutSpa/ClientApp/components/home-page/home-page.ts index 588024e2..a4918e99 100644 --- a/templates/KnockoutSpa/ClientApp/components/home-page/home-page.ts +++ b/templates/KnockoutSpa/ClientApp/components/home-page/home-page.ts @@ -1,6 +1,6 @@ -import * as ko from 'knockout'; +import * as ko from "knockout"; class HomePageViewModel { } -export default { viewModel: HomePageViewModel, template: require('./home-page.html') }; +export default { viewModel: HomePageViewModel, template: require("./home-page.html") }; diff --git a/templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.ts b/templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.ts index 186c60e1..4be0b20b 100644 --- a/templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.ts +++ b/templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.ts @@ -1,5 +1,5 @@ -import * as ko from 'knockout'; -import { Route } from '../../router'; +import * as ko from "knockout"; +import { Route } from "../../router"; interface NavMenuParams { route: KnockoutObservable; @@ -16,4 +16,4 @@ class NavMenuViewModel { } } -export default { viewModel: NavMenuViewModel, template: require('./nav-menu.html') }; +export default { viewModel: NavMenuViewModel, template: require("./nav-menu.html") }; diff --git a/templates/KnockoutSpa/ClientApp/router.ts b/templates/KnockoutSpa/ClientApp/router.ts index 4550d16e..1c5a66e6 100644 --- a/templates/KnockoutSpa/ClientApp/router.ts +++ b/templates/KnockoutSpa/ClientApp/router.ts @@ -1,13 +1,13 @@ -import * as ko from 'knockout'; -import * as $ from 'jquery'; -import crossroads = require('crossroads'); +import * as ko from "knockout"; +import * as $ from "jquery"; +import crossroads = require("crossroads"); // This module configures crossroads.js, a routing library. If you prefer, you // can use any other routing library (or none at all) as Knockout is designed to // compose cleanly with external libraries. // // You *don't* have to follow the pattern established here (each route entry -// specifies a 'page', which is a Knockout component) - there's nothing built into +// specifies a "page", which is a Knockout component) - there's nothing built into // Knockout that requires or even knows about this technique. It's just one of // many possible ways of setting up client-side routes. export class Router { @@ -30,21 +30,21 @@ export class Router { this.disposeHistory = history.listen(location => crossroads.parse(location.pathname)); this.clickEventListener = evt => { let target: any = evt.currentTarget; - if (target && target.tagName === 'A') { - let href = target.getAttribute('href'); - if (href && href.charAt(0) == '/') { + if (target && target.tagName === "A") { + let href = target.getAttribute("href"); + if (href && href.charAt(0) === "/") { history.push(href); evt.preventDefault(); } } }; - $(document).on('click', 'a', this.clickEventListener); + $(document).on("click", "a", this.clickEventListener); } public dispose() { this.disposeHistory(); - $(document).off('click', 'a', this.clickEventListener); + $(document).off("click", "a", this.clickEventListener); } } diff --git a/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts b/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts index 10f13e8f..dfaf2d36 100644 --- a/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts +++ b/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts @@ -1,12 +1,12 @@ -import * as ko from 'knockout'; +import * as ko from "knockout"; // This Knockout component loader integrates with Webpack's lazy-loaded bundle feature. // Having this means you can optionally declare components as follows: -// ko.components.register('my-component', require('bundle?lazy!../some-path-to-a-js-or-ts-module')); +// ko.components.register("my-component", require("bundle?lazy!../some-path-to-a-js-or-ts-module")); // ... and then it will be loaded on demand instead of being loaded up front. ko.components.loaders.unshift({ loadComponent: (name, componentConfig, callback) => { - if (typeof componentConfig === 'function') { + if (typeof componentConfig === "function") { // It's a lazy-loaded Webpack bundle (componentConfig as any)(loadedModule => { // Handle TypeScript-style default exports diff --git a/templates/KnockoutSpa/webpack.config.js b/templates/KnockoutSpa/webpack.config.js index 352ab3c3..a8744264 100644 --- a/templates/KnockoutSpa/webpack.config.js +++ b/templates/KnockoutSpa/webpack.config.js @@ -1,34 +1,34 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { - devtool: isDevBuild ? 'inline-source-map' : null, - entry: { 'main': './ClientApp/boot.ts' }, - resolve: { extensions: [ '', '.js', '.ts' ] }, + devtool: isDevBuild ? "inline-source-map" : null, + entry: { "main": "./ClientApp/boot.ts" }, + resolve: { extensions: [ "", ".js", ".ts" ] }, output: { - path: path.join(__dirname, './wwwroot/dist'), - filename: '[name].js', - publicPath: '/dist/' + path: path.join(__dirname, "./wwwroot/dist"), + filename: "[name].js", + publicPath: "/dist/" }, module: { loaders: [ - { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, - { test: /\.html$/, loader: 'raw' }, - { test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) }, - { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } + { test: /\.ts$/, include: /ClientApp/, loader: "ts", query: { silent: true } }, + { test: /\.html$/, loader: "raw" }, + { test: /\.css$/, loader: isDevBuild ? "style!css" : ExtractTextPlugin.extract(["css"]) }, + { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url", query: { limit: 25000 } } ] }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, - manifest: require('./wwwroot/dist/vendor-manifest.json') + manifest: require("./wwwroot/dist/vendor-manifest.json") }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), - new ExtractTextPlugin('site.css') + new ExtractTextPlugin("site.css") ]) }; diff --git a/templates/KnockoutSpa/webpack.config.vendor.js b/templates/KnockoutSpa/webpack.config.vendor.js index bc734d91..98b5f3e3 100644 --- a/templates/KnockoutSpa/webpack.config.vendor.js +++ b/templates/KnockoutSpa/webpack.config.vendor.js @@ -1,34 +1,34 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('vendor.css'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var extractCSS = new ExtractTextPlugin("vendor.css"); module.exports = { resolve: { - extensions: [ '', '.js' ] + extensions: [ "", ".js" ] }, module: { loaders: [ - { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, - { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } + { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: "url-loader?limit=100000" }, + { test: /\.css(\?|$)/, loader: extractCSS.extract(["css"]) } ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'knockout', 'crossroads', 'history', 'isomorphic-fetch', 'style-loader', 'jquery'], + vendor: ["bootstrap", "bootstrap/dist/css/bootstrap.css", "knockout", "crossroads", "history", "isomorphic-fetch", "style-loader", "jquery"], }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - library: '[name]_[hash]', + path: path.join(__dirname, "wwwroot", "dist"), + filename: "[name].js", + library: "[name]_[hash]", }, plugins: [ extractCSS, - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) + new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), new webpack.DllPlugin({ - path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), - name: '[name]_[hash]' + path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"), + name: "[name]_[hash]" }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) diff --git a/templates/ReactReduxSpa/ClientApp/boot-client.tsx b/templates/ReactReduxSpa/ClientApp/boot-client.tsx index 4dc12af3..61581184 100644 --- a/templates/ReactReduxSpa/ClientApp/boot-client.tsx +++ b/templates/ReactReduxSpa/ClientApp/boot-client.tsx @@ -1,13 +1,13 @@ -import './css/site.css'; -import 'bootstrap'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { browserHistory, Router } from 'react-router'; -import { Provider } from 'react-redux'; -import { syncHistoryWithStore } from 'react-router-redux'; -import routes from './routes'; -import configureStore from './configureStore'; -import { ApplicationState } from './store'; +import "./css/site.css"; +import "bootstrap"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { browserHistory, Router } from "react-router"; +import { Provider } from "react-redux"; +import { syncHistoryWithStore } from "react-router-redux"; +import routes from "./routes"; +import configureStore from "./configureStore"; +import { ApplicationState } from "./store"; // Get the application-wide store instance, prepopulating with state from the server where available. const initialState = (window as any).initialReduxState as ApplicationState; @@ -20,5 +20,5 @@ ReactDOM.render( , - document.getElementById('react-app') + document.getElementById("react-app") ); diff --git a/templates/ReactReduxSpa/ClientApp/boot-server.tsx b/templates/ReactReduxSpa/ClientApp/boot-server.tsx index 62aefcfa..c8f176a5 100644 --- a/templates/ReactReduxSpa/ClientApp/boot-server.tsx +++ b/templates/ReactReduxSpa/ClientApp/boot-server.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; -import { Provider } from 'react-redux'; -import { renderToString } from 'react-dom/server'; -import { match, RouterContext } from 'react-router'; -import createMemoryHistory from 'history/lib/createMemoryHistory'; -import routes from './routes'; -import configureStore from './configureStore'; +import * as React from "react"; +import { Provider } from "react-redux"; +import { renderToString } from "react-dom/server"; +import { match, RouterContext } from "react-router"; +import createMemoryHistory from "history/lib/createMemoryHistory"; +import routes from "./routes"; +import configureStore from "./configureStore"; type BootResult = { html?: string, globals?: { [key: string]: any }, redirectUrl?: string}; export default function (params: any): Promise<{ html: string }> { @@ -23,7 +23,7 @@ export default function (params: any): Promise<{ html: string }> { // If it didn't match any route, renderProps will be undefined if (!renderProps) { - throw new Error(`The location '${ params.url }' doesn't match any route configured in react-router.`); + throw new Error(`The location "${ params.url }" doesn't match any route configured in react-router.`); } // Build an instance of the application diff --git a/templates/ReactReduxSpa/ClientApp/components/Counter.tsx b/templates/ReactReduxSpa/ClientApp/components/Counter.tsx index 6b8f05cb..f7cd3562 100644 --- a/templates/ReactReduxSpa/ClientApp/components/Counter.tsx +++ b/templates/ReactReduxSpa/ClientApp/components/Counter.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import { Link } from 'react-router'; -import { provide } from 'redux-typed'; -import { ApplicationState } from '../store'; -import * as CounterStore from '../store/Counter'; +import * as React from "react"; +import { Link } from "react-router"; +import { provide } from "redux-typed"; +import { ApplicationState } from "../store"; +import * as CounterStore from "../store/Counter"; class Counter extends React.Component { public render() { @@ -13,7 +13,7 @@ class Counter extends React.Component {

Current count: { this.props.count }

- + ; } } diff --git a/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx b/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx index d204029a..35e8a31b 100644 --- a/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx +++ b/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import { Link } from 'react-router'; -import { provide } from 'redux-typed'; -import { ApplicationState } from '../store'; -import * as WeatherForecastsState from '../store/WeatherForecasts'; +import * as React from "react"; +import { Link } from "react-router"; +import { provide } from "redux-typed"; +import { ApplicationState } from "../store"; +import * as WeatherForecastsState from "../store/WeatherForecasts"; interface RouteParams { startDateIndex: string; @@ -14,7 +14,7 @@ class FetchData extends React.Component { let startDateIndex = parseInt(this.props.params.startDateIndex) || 0; this.props.requestWeatherForecasts(startDateIndex); } - + componentWillReceiveProps(nextProps: WeatherForecastProps) { // This method runs when incoming props (e.g., route params) change let startDateIndex = parseInt(nextProps.params.startDateIndex) || 0; @@ -31,7 +31,7 @@ class FetchData extends React.Component { } private renderForecastsTable() { - return + return
@@ -52,14 +52,14 @@ class FetchData extends React.Component {
Date
; } - + private renderPagination() { let prevStartDateIndex = this.props.startDateIndex - 5; let nextStartDateIndex = this.props.startDateIndex + 5; - return

- Previous - Next + return

+ Previous + Next { this.props.isLoading ? Loading... : [] }

; } @@ -69,6 +69,6 @@ class FetchData extends React.Component { const provider = provide( (state: ApplicationState) => state.weatherForecasts, // Select which part of global state maps to this component WeatherForecastsState.actionCreators // Select which action creators should be exposed to this component -).withExternalProps<{ params: RouteParams }>(); // Also include a 'params' property on WeatherForecastProps +).withExternalProps<{ params: RouteParams }>(); // Also include a "params" property on WeatherForecastProps type WeatherForecastProps = typeof provider.allProps; export default provider.connect(FetchData); diff --git a/templates/ReactReduxSpa/ClientApp/components/Home.tsx b/templates/ReactReduxSpa/ClientApp/components/Home.tsx index 50995624..a0d4ecdf 100644 --- a/templates/ReactReduxSpa/ClientApp/components/Home.tsx +++ b/templates/ReactReduxSpa/ClientApp/components/Home.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import * as React from "react"; export default class Home extends React.Component { public render() { @@ -6,10 +6,10 @@ export default class Home extends React.Component {

Hello, world!

Welcome to your new single-page application, built with:

To help you get started, we've also set up:

    diff --git a/templates/ReactReduxSpa/ClientApp/components/Layout.tsx b/templates/ReactReduxSpa/ClientApp/components/Layout.tsx index b9f877bd..e0718bd3 100644 --- a/templates/ReactReduxSpa/ClientApp/components/Layout.tsx +++ b/templates/ReactReduxSpa/ClientApp/components/Layout.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; -import { NavMenu } from './NavMenu'; +import * as React from "react"; +import { NavMenu } from "./NavMenu"; export interface LayoutProps { body: React.ReactElement; @@ -7,12 +7,12 @@ export interface LayoutProps { export class Layout extends React.Component { public render() { - return
    -
    -
    + return
    +
    +
    -
    +
    { this.props.body }
    diff --git a/templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx b/templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx index e3158f61..9f2c0cb5 100644 --- a/templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx +++ b/templates/ReactReduxSpa/ClientApp/components/NavMenu.tsx @@ -1,35 +1,35 @@ -import * as React from 'react'; -import { Link } from 'react-router'; +import * as React from "react"; +import { Link } from "react-router"; export class NavMenu extends React.Component { public render() { - return
    -
    -
    - - WebApplicationBasic + WebApplicationBasic
    -
    -
    -
      +
      +
      +
      • - - Home + + Home
      • - - Counter + + Counter
      • - - Fetch data + + Fetch data
      diff --git a/templates/ReactReduxSpa/ClientApp/configureStore.ts b/templates/ReactReduxSpa/ClientApp/configureStore.ts index 3ce14319..b74ff762 100644 --- a/templates/ReactReduxSpa/ClientApp/configureStore.ts +++ b/templates/ReactReduxSpa/ClientApp/configureStore.ts @@ -1,13 +1,13 @@ -import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; -import * as thunkModule from 'redux-thunk'; -import { routerReducer } from 'react-router-redux'; -import * as Store from './store'; -import { typedToPlain } from 'redux-typed'; +import { createStore, applyMiddleware, compose, combineReducers } from "redux"; +import * as thunkModule from "redux-thunk"; +import { routerReducer } from "react-router-redux"; +import * as Store from "./store"; +import { typedToPlain } from "redux-typed"; export default function configureStore(initialState?: Store.ApplicationState) { // Build middleware. These are functions that can process the actions before they reach the store. const thunk = (thunkModule as any).default; // Workaround for TypeScript not importing thunk module as expected - const windowIfDefined = typeof window === 'undefined' ? null : window as any; + const windowIfDefined = typeof window === "undefined" ? null : window as any; const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension; // If devTools is installed, connect to it const createStoreWithMiddleware = compose( applyMiddleware(thunk, typedToPlain), @@ -20,8 +20,8 @@ export default function configureStore(initialState?: Store.ApplicationState) { // Enable Webpack hot module replacement for reducers if (module.hot) { - module.hot.accept('./store', () => { - const nextRootReducer = require('./store'); + module.hot.accept("./store", () => { + const nextRootReducer = require("./store"); store.replaceReducer(buildRootReducer(nextRootReducer.reducers)); }); } diff --git a/templates/ReactReduxSpa/ClientApp/routes.tsx b/templates/ReactReduxSpa/ClientApp/routes.tsx index 1f2406d1..c8bf0ec6 100644 --- a/templates/ReactReduxSpa/ClientApp/routes.tsx +++ b/templates/ReactReduxSpa/ClientApp/routes.tsx @@ -1,15 +1,15 @@ -import * as React from 'react'; -import { Router, Route, HistoryBase } from 'react-router'; -import { Layout } from './components/Layout'; -import Home from './components/Home'; -import FetchData from './components/FetchData'; -import Counter from './components/Counter'; +import * as React from "react"; +import { Router, Route, HistoryBase } from "react-router"; +import { Layout } from "./components/Layout"; +import Home from "./components/Home"; +import FetchData from "./components/FetchData"; +import Counter from "./components/Counter"; export default - - - - { /* Optional route segment that does not affect NavMenu highlighting */ } + + + + { /* Optional route segment that does not affect NavMenu highlighting */ } ; diff --git a/templates/ReactReduxSpa/ClientApp/store/Counter.ts b/templates/ReactReduxSpa/ClientApp/store/Counter.ts index 67eee6b4..e53a7c42 100644 --- a/templates/ReactReduxSpa/ClientApp/store/Counter.ts +++ b/templates/ReactReduxSpa/ClientApp/store/Counter.ts @@ -1,5 +1,5 @@ -import { typeName, isActionType, Action, Reducer } from 'redux-typed'; -import { ActionCreator } from './'; +import { typeName, isActionType, Action, Reducer } from "redux-typed"; +import { ActionCreator } from "./"; // ----------------- // STATE - This defines the type of data maintained in the Redux store. diff --git a/templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts b/templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts index 3101a7dd..f4e354d3 100644 --- a/templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts +++ b/templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts @@ -1,6 +1,6 @@ -import { fetch, addTask } from 'domain-task'; -import { typeName, isActionType, Action, Reducer } from 'redux-typed'; -import { ActionCreator } from './'; +import { fetch, addTask } from "domain-task"; +import { typeName, isActionType, Action, Reducer } from "redux-typed"; +import { ActionCreator } from "./"; // ----------------- // STATE - This defines the type of data maintained in the Redux store. @@ -70,7 +70,7 @@ export const reducer: Reducer = (state, action) => { return { startDateIndex: action.startDateIndex, forecasts: action.forecasts, isLoading: false }; } } - + // For unrecognized actions (or in cases where actions have no effect), must return the existing state // (or default initial state if none was supplied) return state || unloadedState; diff --git a/templates/ReactReduxSpa/ClientApp/store/index.ts b/templates/ReactReduxSpa/ClientApp/store/index.ts index 1f4798b4..bf98f7c9 100644 --- a/templates/ReactReduxSpa/ClientApp/store/index.ts +++ b/templates/ReactReduxSpa/ClientApp/store/index.ts @@ -1,11 +1,11 @@ -import { ActionCreatorGeneric } from 'redux-typed'; -import * as WeatherForecasts from './WeatherForecasts'; -import * as Counter from './Counter'; +import { ActionCreatorGeneric } from "redux-typed"; +import * as WeatherForecasts from "./WeatherForecasts"; +import * as Counter from "./Counter"; // The top-level state object export interface ApplicationState { - counter: Counter.CounterState, - weatherForecasts: WeatherForecasts.WeatherForecastsState + counter: Counter.CounterState; + weatherForecasts: WeatherForecasts.WeatherForecastsState; } // Whenever an action is dispatched, Redux will update each top-level application state property using @@ -16,6 +16,6 @@ export const reducers = { weatherForecasts: WeatherForecasts.reducer }; -// This type can be used as a hint on action creators so that its 'dispatch' and 'getState' params are +// This type can be used as a hint on action creators so that its "dispatch" and "getState" params are // correctly typed to match your store. export type ActionCreator = ActionCreatorGeneric; diff --git a/templates/ReactReduxSpa/webpack.config.js b/templates/ReactReduxSpa/webpack.config.js index 2d641c71..9b8f098d 100644 --- a/templates/ReactReduxSpa/webpack.config.js +++ b/templates/ReactReduxSpa/webpack.config.js @@ -1,42 +1,42 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var nodeExternals = require('webpack-node-externals'); -var merge = require('webpack-merge'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var nodeExternals = require("webpack-node-externals"); +var merge = require("webpack-merge"); var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/; // Configuration in common to both client-side and server-side bundles var sharedConfig = () => ({ - resolve: { extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ] }, + resolve: { extensions: [ "", ".js", ".jsx", ".ts", ".tsx" ] }, output: { - filename: '[name].js', - publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix + filename: "[name].js", + publicPath: "/dist/" // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { loaders: [ - { test: /\.tsx?$/, include: /ClientApp/, loader: 'babel-loader' }, - { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } } + { test: /\.tsx?$/, include: /ClientApp/, loader: "babel-loader" }, + { test: /\.tsx?$/, include: /ClientApp/, loader: "ts", query: { silent: true } } ] } }); // Configuration for client-side bundle suitable for running in browsers var clientBundleConfig = merge(sharedConfig(), { - entry: { 'main-client': './ClientApp/boot-client.tsx' }, + entry: { "main-client": "./ClientApp/boot-client.tsx" }, module: { loaders: [ - { test: /\.css$/, loader: ExtractTextPlugin.extract(['css']) }, - { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } + { test: /\.css$/, loader: ExtractTextPlugin.extract(["css"]) }, + { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url", query: { limit: 25000 } } ] }, - output: { path: path.join(__dirname, './wwwroot/dist') }, - devtool: isDevBuild ? 'inline-source-map' : null, + output: { path: path.join(__dirname, "./wwwroot/dist") }, + devtool: isDevBuild ? "inline-source-map" : null, plugins: [ - new ExtractTextPlugin('site.css'), + new ExtractTextPlugin("site.css"), new webpack.DllReferencePlugin({ context: __dirname, - manifest: require('./wwwroot/dist/vendor-manifest.json') + manifest: require("./wwwroot/dist/vendor-manifest.json") }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only @@ -47,13 +47,13 @@ var clientBundleConfig = merge(sharedConfig(), { // Configuration for server-side (prerendering) bundle suitable for running in Node var serverBundleConfig = merge(sharedConfig(), { - entry: { 'main-server': './ClientApp/boot-server.tsx' }, + entry: { "main-server": "./ClientApp/boot-server.tsx" }, output: { - libraryTarget: 'commonjs', - path: path.join(__dirname, './ClientApp/dist') + libraryTarget: "commonjs", + path: path.join(__dirname, "./ClientApp/dist") }, - target: 'node', - devtool: 'inline-source-map', + target: "node", + devtool: "inline-source-map", externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules }); diff --git a/templates/ReactReduxSpa/webpack.config.vendor.js b/templates/ReactReduxSpa/webpack.config.vendor.js index 7e4175a1..175a36c0 100644 --- a/templates/ReactReduxSpa/webpack.config.vendor.js +++ b/templates/ReactReduxSpa/webpack.config.vendor.js @@ -1,37 +1,37 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('vendor.css'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var extractCSS = new ExtractTextPlugin("vendor.css"); module.exports = { resolve: { - extensions: [ '', '.js' ] + extensions: [ "", ".js" ] }, module: { loaders: [ - { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, - { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } + { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: "url-loader?limit=100000" }, + { test: /\.css(\?|$)/, loader: extractCSS.extract(["css"]) } ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'domain-task', 'react', 'react-dom', 'react-router', 'redux', 'redux-thunk', 'react-router-redux', 'redux-typed', 'style-loader', 'jquery'], + vendor: ["bootstrap", "bootstrap/dist/css/bootstrap.css", "domain-task", "react", "react-dom", "react-router", "redux", "redux-thunk", "react-router-redux", "redux-typed", "style-loader", "jquery"], }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - library: '[name]_[hash]', + path: path.join(__dirname, "wwwroot", "dist"), + filename: "[name].js", + library: "[name]_[hash]", }, plugins: [ extractCSS, - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) + new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), new webpack.DllPlugin({ - path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), - name: '[name]_[hash]' + path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"), + name: "[name]_[hash]" }), new webpack.DefinePlugin({ - 'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"' + "process.env.NODE_ENV": isDevBuild ? '"development"' : '"production"' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) diff --git a/templates/ReactSpa/ClientApp/boot.tsx b/templates/ReactSpa/ClientApp/boot.tsx index 129f349d..d4891276 100644 --- a/templates/ReactSpa/ClientApp/boot.tsx +++ b/templates/ReactSpa/ClientApp/boot.tsx @@ -1,13 +1,13 @@ -import './css/site.css'; +import "./css/site.css"; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { browserHistory, Router } from 'react-router'; -import routes from './routes'; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { browserHistory, Router } from "react-router"; +import routes from "./routes"; // This code starts up the React app when it runs in a browser. It sets up the routing configuration // and injects the app into a DOM element. ReactDOM.render( , - document.getElementById('react-app') + document.getElementById("react-app") ); diff --git a/templates/ReactSpa/ClientApp/components/Counter.tsx b/templates/ReactSpa/ClientApp/components/Counter.tsx index 233bed06..4fae17e1 100644 --- a/templates/ReactSpa/ClientApp/components/Counter.tsx +++ b/templates/ReactSpa/ClientApp/components/Counter.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import * as React from "react"; interface CounterState { currentCount: number; @@ -18,7 +18,7 @@ export class Counter extends React.Component {

      Current count: { this.state.currentCount }

      - +
      ; } diff --git a/templates/ReactSpa/ClientApp/components/FetchData.tsx b/templates/ReactSpa/ClientApp/components/FetchData.tsx index 2ee2f1d1..ceda83f3 100644 --- a/templates/ReactSpa/ClientApp/components/FetchData.tsx +++ b/templates/ReactSpa/ClientApp/components/FetchData.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; -import 'isomorphic-fetch'; +import * as React from "react"; +import "isomorphic-fetch"; interface FetchDataExampleState { forecasts: WeatherForecast[]; @@ -11,7 +11,7 @@ export class FetchData extends React.Component { super(); this.state = { forecasts: [], loading: true }; - fetch('/api/SampleData/WeatherForecasts') + fetch("/api/SampleData/WeatherForecasts") .then(response => response.json()) .then((data: WeatherForecast[]) => { this.setState({ forecasts: data, loading: false }); @@ -32,7 +32,7 @@ export class FetchData extends React.Component { } private static renderForecastsTable(forecasts: WeatherForecast[]) { - return + return
      diff --git a/templates/ReactSpa/ClientApp/components/Home.tsx b/templates/ReactSpa/ClientApp/components/Home.tsx index 9f68e05c..4771db5d 100644 --- a/templates/ReactSpa/ClientApp/components/Home.tsx +++ b/templates/ReactSpa/ClientApp/components/Home.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import * as React from "react"; export class Home extends React.Component { public render() { @@ -6,10 +6,10 @@ export class Home extends React.Component {

      Hello, world!

      Welcome to your new single-page application, built with:

      To help you get started, we've also set up:

        diff --git a/templates/ReactSpa/ClientApp/components/Layout.tsx b/templates/ReactSpa/ClientApp/components/Layout.tsx index b9f877bd..e0718bd3 100644 --- a/templates/ReactSpa/ClientApp/components/Layout.tsx +++ b/templates/ReactSpa/ClientApp/components/Layout.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; -import { NavMenu } from './NavMenu'; +import * as React from "react"; +import { NavMenu } from "./NavMenu"; export interface LayoutProps { body: React.ReactElement; @@ -7,12 +7,12 @@ export interface LayoutProps { export class Layout extends React.Component { public render() { - return
        -
        -
        + return
        +
        +
        -
        +
        { this.props.body }
        diff --git a/templates/ReactSpa/ClientApp/components/NavMenu.tsx b/templates/ReactSpa/ClientApp/components/NavMenu.tsx index e3158f61..9f2c0cb5 100644 --- a/templates/ReactSpa/ClientApp/components/NavMenu.tsx +++ b/templates/ReactSpa/ClientApp/components/NavMenu.tsx @@ -1,35 +1,35 @@ -import * as React from 'react'; -import { Link } from 'react-router'; +import * as React from "react"; +import { Link } from "react-router"; export class NavMenu extends React.Component { public render() { - return
        -
        -
        - - WebApplicationBasic + WebApplicationBasic
        -
        -
        -
          +
          +
          +
          • - - Home + + Home
          • - - Counter + + Counter
          • - - Fetch data + + Fetch data
          diff --git a/templates/ReactSpa/ClientApp/routes.tsx b/templates/ReactSpa/ClientApp/routes.tsx index 5a3dafb6..8c3ba0af 100644 --- a/templates/ReactSpa/ClientApp/routes.tsx +++ b/templates/ReactSpa/ClientApp/routes.tsx @@ -1,14 +1,14 @@ -import * as React from 'react'; -import { Router, Route, HistoryBase } from 'react-router'; -import { Layout } from './components/Layout'; -import { Home } from './components/Home'; -import { FetchData } from './components/FetchData'; -import { Counter } from './components/Counter'; +import * as React from "react"; +import { Router, Route, HistoryBase } from "react-router"; +import { Layout } from "./components/Layout"; +import { Home } from "./components/Home"; +import { FetchData } from "./components/FetchData"; +import { Counter } from "./components/Counter"; export default - - - + + + ; // Allow Hot Module Reloading diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/webpack.config.js index f8ed0cdb..83ac71a9 100644 --- a/templates/ReactSpa/webpack.config.js +++ b/templates/ReactSpa/webpack.config.js @@ -1,34 +1,34 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { - devtool: isDevBuild ? 'inline-source-map' : null, - entry: { 'main': './ClientApp/boot.tsx' }, - resolve: { extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ] }, + devtool: isDevBuild ? "inline-source-map" : null, + entry: { "main": "./ClientApp/boot.tsx" }, + resolve: { extensions: [ "", ".js", ".jsx", ".ts", ".tsx" ] }, output: { - path: path.join(__dirname, './wwwroot/dist'), - filename: '[name].js', - publicPath: '/dist/' + path: path.join(__dirname, "./wwwroot/dist"), + filename: "[name].js", + publicPath: "/dist/" }, module: { loaders: [ - { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' }, - { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, - { test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) }, - { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } + { test: /\.ts(x?)$/, include: /ClientApp/, loader: "babel-loader" }, + { test: /\.tsx?$/, include: /ClientApp/, loader: "ts", query: { silent: true } }, + { test: /\.css$/, loader: isDevBuild ? "style!css" : ExtractTextPlugin.extract(["css"]) }, + { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url", query: { limit: 25000 } } ] }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, - manifest: require('./wwwroot/dist/vendor-manifest.json') + manifest: require("./wwwroot/dist/vendor-manifest.json") }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), - new ExtractTextPlugin('site.css') + new ExtractTextPlugin("site.css") ]) }; diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js index 8a95bb38..66347a32 100644 --- a/templates/ReactSpa/webpack.config.vendor.js +++ b/templates/ReactSpa/webpack.config.vendor.js @@ -1,37 +1,37 @@ -var isDevBuild = process.argv.indexOf('--env.prod') < 0; -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('vendor.css'); +var isDevBuild = process.argv.indexOf("--env.prod") < 0; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var extractCSS = new ExtractTextPlugin("vendor.css"); module.exports = { resolve: { - extensions: [ '', '.js' ] + extensions: [ "", ".js" ] }, module: { loaders: [ - { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, - { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } + { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: "url-loader?limit=100000" }, + { test: /\.css(\?|$)/, loader: extractCSS.extract(["css"]) } ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'], + vendor: ["bootstrap", "bootstrap/dist/css/bootstrap.css", "isomorphic-fetch", "react", "react-dom", "react-router", "style-loader", "jquery"], }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - library: '[name]_[hash]', + path: path.join(__dirname, "wwwroot", "dist"), + filename: "[name].js", + library: "[name]_[hash]" }, plugins: [ extractCSS, - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) + new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), new webpack.DllPlugin({ - path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), - name: '[name]_[hash]' + path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"), + name: "[name]_[hash]" }), new webpack.DefinePlugin({ - 'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"' + "process.env.NODE_ENV": isDevBuild ? 'development"' : '"production"' }) ].concat(isDevBuild ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) diff --git a/templates/WebApplicationBasic/ClientApp/App.ts b/templates/WebApplicationBasic/ClientApp/App.ts index 4cde26cb..34d3a0dd 100644 --- a/templates/WebApplicationBasic/ClientApp/App.ts +++ b/templates/WebApplicationBasic/ClientApp/App.ts @@ -1,5 +1,5 @@ -import 'bootstrap'; -import './css/site.css'; +import "bootstrap"; +import "./css/site.css"; // Replace with your TypeScript code -console.log('Hello, world!'); +console.log("Hello, world!"); diff --git a/templates/WebApplicationBasic/webpack.config.dev.js b/templates/WebApplicationBasic/webpack.config.dev.js index 719de1fb..b9a67538 100644 --- a/templates/WebApplicationBasic/webpack.config.dev.js +++ b/templates/WebApplicationBasic/webpack.config.dev.js @@ -1,3 +1,3 @@ module.exports = { - devtool: 'inline-source-map' + devtool: "inline-source-map" }; diff --git a/templates/WebApplicationBasic/webpack.config.js b/templates/WebApplicationBasic/webpack.config.js index 129d22ce..f4c79601 100644 --- a/templates/WebApplicationBasic/webpack.config.js +++ b/templates/WebApplicationBasic/webpack.config.js @@ -1,35 +1,35 @@ -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var merge = require('extendify')({ isDeep: true, arrays: 'concat' }); -var devConfig = require('./webpack.config.dev'); -var prodConfig = require('./webpack.config.prod'); -var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; -var extractCSS = new ExtractTextPlugin('site.css'); +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var merge = require("extendify")({ isDeep: true, arrays: "concat" }); +var devConfig = require("./webpack.config.dev"); +var prodConfig = require("./webpack.config.prod"); +var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === "Development"; +var extractCSS = new ExtractTextPlugin("site.css"); module.exports = merge({ resolve: { - extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ] + extensions: [ "", ".js", ".jsx", ".ts", ".tsx" ] }, module: { loaders: [ - { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader?silent=true' }, - { test: /\.css/, loader: extractCSS.extract(['css']) } + { test: /\.ts(x?)$/, include: /ClientApp/, loader: "ts-loader?silent=true" }, + { test: /\.css/, loader: extractCSS.extract(["css"]) } ] }, entry: { - main: ['./ClientApp/App.ts'] + main: ["./ClientApp/App.ts"] }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - publicPath: '/dist/' + path: path.join(__dirname, "wwwroot", "dist"), + filename: "[name].js", + publicPath: "/dist/" }, plugins: [ extractCSS, new webpack.DllReferencePlugin({ context: __dirname, - manifest: require('./wwwroot/dist/vendor-manifest.json') + manifest: require("./wwwroot/dist/vendor-manifest.json") }) ] }, isDevelopment ? devConfig : prodConfig); diff --git a/templates/WebApplicationBasic/webpack.config.prod.js b/templates/WebApplicationBasic/webpack.config.prod.js index 775f115f..4ba042f2 100644 --- a/templates/WebApplicationBasic/webpack.config.prod.js +++ b/templates/WebApplicationBasic/webpack.config.prod.js @@ -1,4 +1,4 @@ -var webpack = require('webpack'); +var webpack = require("webpack"); module.exports = { plugins: [ diff --git a/templates/WebApplicationBasic/webpack.config.vendor.js b/templates/WebApplicationBasic/webpack.config.vendor.js index 19ad77c5..bae8635d 100644 --- a/templates/WebApplicationBasic/webpack.config.vendor.js +++ b/templates/WebApplicationBasic/webpack.config.vendor.js @@ -1,34 +1,34 @@ -var path = require('path'); -var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('vendor.css'); -var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; +var path = require("path"); +var webpack = require("webpack"); +var ExtractTextPlugin = require("extract-text-webpack-plugin"); +var extractCSS = new ExtractTextPlugin("vendor.css"); +var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === "Development"; module.exports = { resolve: { - extensions: [ '', '.js' ] + extensions: [ "", ".js" ] }, module: { loaders: [ - { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, - { test: /\.css/, loader: extractCSS.extract(['css']) } + { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit=100000" }, + { test: /\.css/, loader: extractCSS.extract(["css"]) } ] }, entry: { - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery'] + vendor: ["bootstrap", "bootstrap/dist/css/bootstrap.css", "style-loader", "jquery"] }, output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - library: '[name]_[hash]', + path: path.join(__dirname, "wwwroot", "dist"), + filename: "[name].js", + library: "[name]_[hash]", }, plugins: [ extractCSS, - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) + new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), new webpack.DllPlugin({ - path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), - name: '[name]_[hash]' + path: path.join(__dirname, "wwwroot", "dist", "[name]-manifest.json"), + name: "[name]_[hash]" }) ].concat(isDevelopment ? [] : [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
      Date