Skip to content

Instantly share code, notes, and snippets.

@jc4p
Created January 6, 2017 18:05
Show Gist options
  • Save jc4p/7e99f1ec253e95cdc25debba2d8eaf33 to your computer and use it in GitHub Desktop.
Save jc4p/7e99f1ec253e95cdc25debba2d8eaf33 to your computer and use it in GitHub Desktop.
TypeScript 2.1.4 + Webpack 2.0 beta + Preact. Uses babel and ts-loader to convert to ES5/ES6/whatever-you-want bundle.
// 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']
},
};
@daslicht
Copy link

vscode throws an error for the h1 element in the hello.tsx:

Cannot find name 'React'.
(property) JSX.IntrinsicElements.h1: JSX.HTMLAttributes

idea?

@idchlife
Copy link

idchlife commented Mar 6, 2017

Upvoting @daslicht question. VSCode shows error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment