From 5cacdecaea558cabe4114b5cc3af1e8e71927114 Mon Sep 17 00:00:00 2001 From: Stephan Troyer Date: Wed, 5 Oct 2016 14:11:21 +0200 Subject: [PATCH 1/5] templates: (JS/TS) change ' to " I have changed all ' to " in ClientApp and webpack.config.* files --- .../Angular2Spa/ClientApp/app/app.module.ts | 26 ++++---- .../Angular2Spa/ClientApp/boot-client.ts | 20 +++---- .../Angular2Spa/ClientApp/boot-server.ts | 18 +++--- templates/Angular2Spa/webpack.config.js | 42 ++++++------- .../Angular2Spa/webpack.config.vendor.js | 60 +++++++++---------- templates/KnockoutSpa/ClientApp/boot.ts | 12 ++-- .../ClientApp/components/app-root/app-root.ts | 26 ++++---- .../counter-example/counter-example.ts | 4 +- .../components/fetch-data/fetch-data.ts | 8 +-- .../components/home-page/home-page.ts | 4 +- .../ClientApp/components/nav-menu/nav-menu.ts | 6 +- templates/KnockoutSpa/ClientApp/router.ts | 18 +++--- .../ClientApp/webpack-component-loader.ts | 6 +- templates/KnockoutSpa/webpack.config.js | 32 +++++----- .../KnockoutSpa/webpack.config.vendor.js | 30 +++++----- .../ReactReduxSpa/ClientApp/boot-client.tsx | 22 +++---- .../ReactReduxSpa/ClientApp/boot-server.tsx | 16 ++--- .../ClientApp/components/Counter.tsx | 12 ++-- .../ClientApp/components/FetchData.tsx | 24 ++++---- .../ClientApp/components/Home.tsx | 10 ++-- .../ClientApp/components/Layout.tsx | 12 ++-- .../ClientApp/components/NavMenu.tsx | 40 ++++++------- .../ReactReduxSpa/ClientApp/configureStore.ts | 16 ++--- templates/ReactReduxSpa/ClientApp/routes.tsx | 20 +++---- .../ReactReduxSpa/ClientApp/store/Counter.ts | 4 +- .../ClientApp/store/WeatherForecasts.ts | 8 +-- .../ReactReduxSpa/ClientApp/store/index.ts | 12 ++-- templates/ReactReduxSpa/webpack.config.js | 46 +++++++------- .../ReactReduxSpa/webpack.config.vendor.js | 32 +++++----- templates/ReactSpa/ClientApp/boot.tsx | 12 ++-- .../ReactSpa/ClientApp/components/Counter.tsx | 4 +- .../ClientApp/components/FetchData.tsx | 8 +-- .../ReactSpa/ClientApp/components/Home.tsx | 10 ++-- .../ReactSpa/ClientApp/components/Layout.tsx | 12 ++-- .../ReactSpa/ClientApp/components/NavMenu.tsx | 40 ++++++------- templates/ReactSpa/ClientApp/routes.tsx | 18 +++--- templates/ReactSpa/webpack.config.js | 32 +++++----- templates/ReactSpa/webpack.config.vendor.js | 32 +++++----- .../WebApplicationBasic/ClientApp/App.ts | 6 +- .../WebApplicationBasic/webpack.config.dev.js | 2 +- .../WebApplicationBasic/webpack.config.js | 32 +++++----- .../webpack.config.prod.js | 2 +- .../webpack.config.vendor.js | 30 +++++----- 43 files changed, 413 insertions(+), 413 deletions(-) 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: