jc4p/Hello.tsx

## Hello.tsx
// src/components/Hello.tsx

import { h, Component, render } from "preact";

export interface HelloProps { compiler: string; framework: string; }

export default class Hello extends Component<HelloProps, undefined> {
    constructor(props: any) {
        super(props);
        // #TODO: fetch() from the API, or set up a ServiceWorker to do so.
    }

    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello preact!</title>
    </head>
    <body>
        <div id="main"></div>

        <!-- Dependencies -->
        <script src="/vendor.js"></script>

        <!-- Main -->
        <script src="/main.js"></script>
    </body>
</html>

## index.tsx
// src/index.tsx

import { h, Component, render } from "preact";
import { default as Hello } from './components/Hello';

render(
    <Hello compiler="TypeScript" framework="preact" />,
    document.getElementById("main")
);

## package.json
{
  "name": "my first PWA",
  "version": "0.0.1",
  "description": "a really fast PWA, eventually",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server --progress --port 3000 --compress true"
  },
  "author": "Kasra Rahjerdi",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.0.0",
    "preact": "^7.1.0"
  },
  "devDependencies": {
    "babel": "^6.0.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-react": "^6.0.0",
    "del": "^2.0.2",
    "eslint": "^2.0.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "source-map-loader": "^0.1.5",
    "ts-loader": "^1.3.3",
    "typescript": "^2.1.4",
    "webpack": "^2.2.0-rc.3",
    "webpack-dev-server": "^2.2.0-rc.0"
  }
}

## tsconfig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "target": "es5",
        "jsx": "react",
        "jsxFactory": "h"
    },
    "include": [
        "./src/**/*"
    ]
}

## webpack.config.js
'use strict';

var path = require('path');
var webpack = require('webpack');

// The plugins I use could be split up for dev/prod, or you could just remove most of the optimizations.

// our babel options are funneled through babel-loader then ts-loader
const options = {
  plugins: [
    ['transform-react-jsx', {
      pragma: 'h'
    }],
    ['react-hot-loader/babel']
  ]
}

module.exports = {
  cache: true,
  entry: {
    main: ['./src/index.tsx'],
    vendor: [
      'babel-polyfill',
      'preact'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    chunkFilename: '[chunkhash].js'
  },
  module: {
    loaders: [{
      test: /\.ts(x?)$/,
      exclude: /node_modules/,
      loader: `babel-loader?${JSON.stringify(options)}!ts-loader`
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }]
  },
  plugins: [
    new webpack.DefinePlugin({}),
    // I'm not sure how to take the most benefit out of this plugin using TypeScript yet. No `require([])` as far as I know.
    new webpack.optimize.CommonsChunkPlugin({
        children: true,
        async: true
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
      },
      output: {
        comments: false
      },
    })
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
};
	// src/components/Hello.tsx

	import { h, Component, render } from "preact";

	export interface HelloProps { compiler: string; framework: string; }

	export default class Hello extends Component<HelloProps, undefined> {
	constructor(props: any) {
	super(props);
	// #TODO: fetch() from the API, or set up a ServiceWorker to do so.
	}

	render() {
	return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello preact!</title>
	</head>
	<body>
	<div id="main"></div>

	<!-- Dependencies -->
	<script src="/vendor.js"></script>

	<!-- Main -->
	<script src="/main.js"></script>
	</body>
	</html>
	// src/index.tsx

	import { h, Component, render } from "preact";
	import { default as Hello } from './components/Hello';

	render(
	<Hello compiler="TypeScript" framework="preact" />,
	document.getElementById("main")
	);
	{
	"name": "my first PWA",
	"version": "0.0.1",
	"description": "a really fast PWA, eventually",
	"main": "index.js",
	"scripts": {
	"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server --progress --port 3000 --compress true"
	},
	"author": "Kasra Rahjerdi",
	"license": "ISC",
	"dependencies": {
	"babel-polyfill": "^6.0.0",
	"preact": "^7.1.0"
	},
	"devDependencies": {
	"babel": "^6.0.0",
	"babel-core": "^6.0.0",
	"babel-loader": "^6.0.0",
	"babel-preset-es2015": "^6.0.0",
	"babel-preset-react": "^6.0.0",
	"del": "^2.0.2",
	"eslint": "^2.0.0",
	"react-hot-loader": "^3.0.0-beta.6",
	"source-map-loader": "^0.1.5",
	"ts-loader": "^1.3.3",
	"typescript": "^2.1.4",
	"webpack": "^2.2.0-rc.3",
	"webpack-dev-server": "^2.2.0-rc.0"
	}
	}
	{
	"compilerOptions": {
	"outDir": "./dist/",
	"sourceMap": true,
	"noImplicitAny": true,
	"target": "es5",
	"jsx": "react",
	"jsxFactory": "h"
	},
	"include": [
	"./src/*/"
	]
	}
	'use strict';

	var path = require('path');
	var webpack = require('webpack');

	// The plugins I use could be split up for dev/prod, or you could just remove most of the optimizations.

	// our babel options are funneled through babel-loader then ts-loader
	const options = {
	plugins: [
	['transform-react-jsx', {
	pragma: 'h'
	}],
	['react-hot-loader/babel']
	]
	}

	module.exports = {
	cache: true,
	entry: {
	main: ['./src/index.tsx'],
	vendor: [
	'babel-polyfill',
	'preact'
	]
	},
	output: {
	path: path.resolve(__dirname, './dist'),
	filename: '[name].js',
	chunkFilename: '[chunkhash].js'
	},
	module: {
	loaders: [{
	test: /\.ts(x?)$/,
	exclude: /node_modules/,
	loader: `babel-loader?${JSON.stringify(options)}!ts-loader`
	}, {
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'babel-loader'
	}]
	},
	plugins: [
	new webpack.DefinePlugin({}),
	// I'm not sure how to take the most benefit out of this plugin using TypeScript yet. No `require([])` as far as I know.
	new webpack.optimize.CommonsChunkPlugin({
	children: true,
	async: true
	}),
	new webpack.LoaderOptionsPlugin({
	minimize: true,
	debug: false
	}),
	new webpack.optimize.UglifyJsPlugin({
	compress: {
	warnings: false,
	screw_ie8: true,
	conditionals: true,
	unused: true,
	comparisons: true,
	sequences: true,
	dead_code: true,
	evaluate: true,
	if_return: true,
	join_vars: true,
	},
	output: {
	comments: false
	},
	})
	],
	resolve: {
	extensions: ['.ts', '.tsx', '.js']
	},
	};