fix typescript & styled-jsx

Author: timsuchanek

.gitignore

@@ -9,4 +9,6 @@ coverage
 .idea
 .prep-tmp
 lib/
-.cache
+.cache
+public
+public*

custom.d.ts

@@ -31,6 +31,7 @@ module.exports = {
     },
     `gatsby-plugin-sharp`,
     `gatsby-plugin-styled-jsx`,
-    `gatsby-plugin-typescript`
+    `gatsby-plugin-typescript`,
+    `styled-jsx-plugin`
   ],
 }

gatsby-config.js

@@ -24,7 +24,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
 
   return new Promise((resolve, reject) => {
     const pages = []
-    const tracks = path.resolve("src/templates/tracks.js")
+    const tracks = path.resolve('src/templates/tracks.tsx')
     // Query for all markdown "nodes" and for the slug we previously created.
     resolve(
       graphql(

gatsby-node.js

@@ -4,7 +4,6 @@
     "gatsby-link": "next",
     "gatsby-plugin-sharp": "next",
     "gatsby-plugin-styled-jsx": "next",
-    "gatsby-plugin-typescript": "next",
     "gatsby-remark-copy-linked-files": "next",
     "gatsby-remark-prismjs": "next",
     "gatsby-remark-responsive-iframe": "next",
@@ -13,9 +12,22 @@
     "gatsby-source-filesystem": "next",
     "gatsby-transformer-remark": "next",
     "graphcool-styles": "^0.1.23",
+    "postcss-cssnext": "^2.11.0",
     "postcss-inherit": "git+https://github.com/timsuchanek/postcss-inherit#build3",
     "postcss-simple-vars": "^4.0.0",
+    "prep-cloud": "^0.0.8",
     "styled-jsx": "git+https://github.com/timsuchanek/styled-jsx#build",
-    "styled-jsx-postcss": "git+https://github.com/timsuchanek/styled-jsx-postcss#build3"
+    "styled-jsx-postcss": "git+https://github.com/timsuchanek/styled-jsx-postcss#build3",
+    "ts-loader": "^2.2.0",
+    "typescript": "2.2.1"
+  },
+  "scripts": {
+    "start": "gatsby develop",
+    "build": "gatsby build"
+  },
+  "devDependencies": {
+    "@types/react-router": "^4.0.11",
+    "postcss-discard-comments": "^2.0.4",
+    "tslint-microsoft-contrib": "^5.0.0"
   }
 }

package.json

@@ -0,0 +1,4 @@
+node_modules
+typescript
+/index.js
+/gatsby-node.js

plugins/gatsby-plugin-typescript/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# 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 directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

plugins/gatsby-plugin-typescript/.npmignore

@@ -0,0 +1,36 @@
+# gatsby-plugin-typescript
+Provides drop-in support for TypeScript and TSX.
+
+## Install
+`yarn add gatsby-plugin-typescript typescript`
+
+## How to use
+1. Include the plugin in your `gatsby-config.js` file.
+1. Add `tsconfig.json` file on your root directory.
+1. Write your components in TSX or TypeScript.
+1. You're good to go.
+
+`gatsby-config.js`
+```javascript
+plugins: [
+  `gatsby-plugin-typescript`,
+]
+```
+
+`tsconfig.json`
+```json
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "esnext",
+        "jsx": "react",
+        "lib": ["dom", "es2015", "es2017"]
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}
+```

plugins/gatsby-plugin-typescript/README.md

@@ -0,0 +1,27 @@
+{
+  "name": "gatsby-plugin-typescript",
+  "version": "1.0.0-beta.1",
+  "description": "Adds TypeScript support for Gatsby layouts and pages.",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "contributors": [
+    "Noah Lange <noahrlange@gmail.com>"
+  ],
+  "dependencies": {
+    "transform-runtime": "^0.0.0",
+    "ts-loader": "^2.0.3",
+    "typescript": "^2.2.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1"
+  },
+  "keywords": [
+    "gatsby",
+    "typescript"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir .",
+    "watch": "babel -w src --out-dir ."
+  }
+}

plugins/gatsby-plugin-typescript/package.json

@@ -0,0 +1,63 @@
+const { transpileModule } = require(`typescript`)
+const path = require(`path`)
+
+const test = /\.tsx?$/
+const compilerDefaults = {
+  target: `esnext`,
+  experimentalDecorators: true,
+  jsx: `preserve`,
+}
+
+module.exports.resolvableExtensions = () => [`.ts`, `.tsx`]
+
+module.exports.modifyWebpackConfig = ({ config }, { compilerOptions }) => {
+  // CommonJS to keep Webpack happy.
+  const copts = Object.assign({}, compilerDefaults, compilerOptions, {
+    module: `commonjs`,
+  })
+
+  let tsConfig = {}
+
+  try {
+    const tsConfigPath = path.resolve(__dirname, '../../tsconfig.json')
+    tsConfig = require(tsConfigPath)
+  } catch (e) {
+    console.error('no tsconfig found')
+  }
+
+  console.log('tsconfig')
+  console.log(tsConfig)
+
+  // React-land is rather undertyped; nontrivial TS projects will most likely
+  // error (i.e., not build) at something or other.
+  const opts = Object.assign({}, { compilerOptions: copts }, tsConfig)
+
+  // Load gatsby babel plugin to extract graphql query
+  const extractQueryPlugin = path.resolve(
+    __dirname,
+    `../../node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js`
+  )
+
+  config.loader(`typescript`, {
+    test,
+    loaders: [
+      `babel?${JSON.stringify({ plugins: [extractQueryPlugin] })}`,
+      `ts-loader?${JSON.stringify(opts)}`,
+    ],
+  })
+}
+
+module.exports.preprocessSource = (
+  { contents, filename },
+  { compilerOptions }
+) => {
+  // overwrite defaults with custom compiler options
+  const copts = Object.assign({}, compilerDefaults, compilerOptions, {
+    target: `esnext`,
+    module: `es6`,
+  })
+  // return the transpiled source if it's TypeScript, otherwise null
+  return test.test(filename)
+    ? transpileModule(contents, { compilerOptions: copts }).outputText
+    : null
+}

plugins/gatsby-plugin-typescript/src/gatsby-node.js

@@ -0,0 +1 @@
+// noop