initial commit.

.appveyor.yml

@@ -0,0 +1,32 @@
+# Test against this version of Node.js
+environment:
+  matrix:
+  # node.js
+  - nodejs_version: "6"
+  - nodejs_version: "5"
+  - nodejs_version: "4"
+
+# Install scripts. (runs after repo cloning)
+install:
+  # Get the latest stable version of Node.js or io.js
+  - ps: Install-Product node $env:nodejs_version
+  # install modules
+  - yarn
+
+cache:
+  - "%LOCALAPPDATA%/Yarn"
+
+# Post-install test scripts.
+test_script:
+  - npm test
+
+build: off
+
+notifications:
+- provider: Email
+  to:
+  - nick@iamdeveloper.com
+  subject: 'Build failed: ts-preact-starter'
+  on_build_success: false
+  on_build_failure: true
+  on_build_status_changed: false

.editorConfig

@@ -0,0 +1,19 @@
+# http://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+#Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
+
+[*]
+# Indentation style
+indent_style = space
+indent_size = 2
+
+# File character encoding
+charset = utf-8
+
+# Denotes whether to trim whitespace at the end of lines
+trim_trailing_whitespace = true

.gitattributes

@@ -0,0 +1 @@
+*.ts linguist-language=TypeScript

.gitignore

@@ -0,0 +1,49 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+dist/

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from '@kadira/storybook';
+
+configure((loadStories) => require('../workbench'), module);

.storybook/webpack.config.js

@@ -0,0 +1,35 @@
+module.exports = {
+  name: 'client',
+  target: 'web',
+  entry: {
+    app: [
+      './src/index.tsx'
+    ],
+  },
+  output: {
+    filename: '[name].js',
+    path: 'dist',
+    publicPath: ''
+  },
+  resolve: {
+    extensions: ["", ".ts", ".tsx", ".js", "jsx"],
+  },
+  devtool: 'source-map',
+  module: {
+    preLoaders: [{
+      test: /\.tsx?$/,
+      loader: "tslint",
+      exclude: /node_modules/
+    }],
+    loaders: [{
+      test: /\.tsx?$/,
+      loader: "awesome-typescript",
+      exclude: /node_modules/
+    }]
+  },
+  tslint: {
+    configFile: './tslint.json',
+    emitErrors: true,
+    failOnHint: true
+  }
+};

.travis.yml

@@ -0,0 +1,11 @@
+language: node_js
+
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
+node_js:
+  - "6"
+  - "5"
+  - "4"

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Nick Taylor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,27 @@
+[![Build status](https://ci.appveyor.com/api/projects/status/bxe1t656us4dp5dd?svg=true)](https://ci.appveyor.com/project/nickytonline/ts-preact-starter)
+[![Build status](https://img.shields.io/travis/nickytonline/ts-preact-starter.svg)](https://travis-ci.org/nickytonline/ts-preact-starter)
+
+
+ts-preact-starter
+================
+
+This is a barebones starter kit for Preact with TypeScript. The initial goal of this is just to be able to clone a repo and get going with Preact and TypeScript.
+Here's the starter kit deployed at [https://ts-preact-starter.now.sh](https://ts-preact-starter.now.sh).
+
+To get up and running:
+* `npm install` or `yarn` (assuming you have yarn installed globally)
+* From the command line run `npm start` or `yarn start`
+* Navigate to [http://localhost:3000](http://localhost:3000)
+
+To run tests:
+* `npm test` or `yarn test`
+* To run in watch mode, run `npm run test:watch` or `yarn run test:watch`
+* Tests are set up to run out of the `__tests__` folder. I put this by default as this appears to be part of the Jest defaults, but if you prefer to have your tests beside the code you want to test, simply modify the regex in the Jest configuration in `package.json`.
+
+To run the workbench:
+* `npm run workbench` or `yarn run workbench`
+* Navigate to [http://localhost:9001](http://localhost:9001)
+* For more information on using the workbench, see:
+  * [React Storybook](https://github.com/storybooks/preact-storybook)
+  * [React Storybook Knobs Add-on](https://github.com/storybooks/storybook-addon-knobs)
+  * View the [existing workbench]() online

__tests__/sample-test-spec.ts

@@ -0,0 +1,13 @@
+describe ('WHEN this sample test runs', () => {
+  it('SHOULD return true', () => {
+    // Arrange
+    const testData: string = 'some data';
+    const expected = true;
+
+    // Act
+    const actual = testData.includes('a');
+
+    // Assert
+    expect(expected).toBe(actual);
+  });
+});

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "ts-preact-starter",
+  "version": "1.0.0",
+  "description": "Barebones starter project for Preact with TypeScript",
+  "main": "index.js",
+  "author": "Nick Taylor <nick@iamdeveloper.com>",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript",
+    "boilerplate"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=prod webpack",
+    "start": "cross-env NODE_ENV=dev webpack-dev-server --progress --debug --config --display-error-details",
+    "test": "jest",
+    "test:watch": "npm run test -- --watch",
+    "workbench": "start-storybook -p 9001"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js"
+    },
+    "testRegex": "/__tests__/.*\\.(ts|tsx|js)$"
+  },
+  "devDependencies": {
+    "@kadira/storybook": "2.35.0",
+    "@types/jest": "16.0.1",
+    "@types/webpack": "2.0.0",
+    "awesome-typescript-loader": "3.0.0-beta.17",
+    "cross-env": "3.1.3",
+    "html-webpack-plugin": "2.24.1",
+    "jest": "18.0.0",
+    "tslint": "4.1.1",
+    "tslint-loader": "3.3.0",
+    "typescript": "2.1.4",
+    "webpack": "1.14.0",
+    "webpack-dev-server": "1.16.2"
+  },
+  "dependencies": {
+    "preact": "7.1.0"
+  }
+}

preprocessor.js

@@ -0,0 +1,16 @@
+const tsc = require('typescript');
+const tsConfig = require('./tsconfig.json');
+
+module.exports = {
+  process(src, path) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      return tsc.transpile(
+        src,
+        tsConfig.compilerOptions,
+        path,
+        []
+      );
+    }
+    return src;
+  },
+};

src/components/todo-item.tsx

@@ -0,0 +1,9 @@
+import * as preact from 'preact';
+
+interface TodoItemProps {
+  text: string;
+}
+
+const TodoItem = ({text}: TodoItemProps) => (<li>{text}</li>);
+
+export default TodoItem;

src/components/todo-list.tsx

@@ -0,0 +1,40 @@
+import * as preact from 'preact';
+import TodoItem from './todo-item';
+
+interface TodoListState {
+  todos: { text: string }[];
+  text: string;
+}
+
+export default class TodoList extends preact.Component<{}, TodoListState> {
+  state = { todos: [], text: '' };
+
+  setText = (e: Event) => {
+    this.setState({ text: (e.target as HTMLInputElement).value } as TodoListState);
+  }
+
+  addTodo = () => {
+    const { todos, text } = this.state;
+
+    this.setState({
+      todos: [
+        ...todos,
+        { text }
+      ], text: ''
+    });
+  }
+
+  render({ }, { todos, text }) {
+    return (
+      <form onSubmit={this.addTodo} action='javascript:'>
+        <input value={text} onInput={this.setText} />
+        <button type='submit'>Add</button>
+        <ul>
+          {todos.map(({text}) => (
+            <TodoItem text={text} />
+          ))}
+        </ul>
+      </form>
+    );
+  }
+}

src/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ts-preact-starter</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

src/index.tsx

@@ -0,0 +1,7 @@
+import * as preact from 'preact';
+import TodoList from './components/todo-list';
+
+preact.render(
+  <TodoList />,
+  document.querySelector('#root')
+);

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "jsx": "react",
+    "target": "es5",
+    "module": "commonjs",
+    "lib": [
+      "dom", "es2015"
+    ],
+    "jsxFactory": "preact.h"
+  }
+}

tslint.json

@@ -0,0 +1,16 @@
+{
+  "rules": {
+    "indent": [true, "spaces"],
+    "no-duplicate-variable": true,
+    "no-eval": true,
+    "no-trailing-whitespace": true,
+    "no-var-keyword": true,
+    "quotemark": [true, "single"],
+    "semicolon": true,
+    "member-ordering": [true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ]
+  }
+}