From 74bb7df9126b498ce6d600cc1088c96970a8d1ea Mon Sep 17 00:00:00 2001
From: Tobias Golbs <tobias.golbs@quinscape.de>
Date: Sun, 26 Aug 2018 21:23:40 +0200
Subject: [PATCH 1/3] Allow usage of _app.tsx as custom App

- added tsx extension to file pattern
- changed filtering of existing files to match against new regex that
matches _app.js and _app.tsx
and is also easily extendable
---
 src/entry.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/entry.js b/src/entry.js
index 5c76d75..ca44087 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -21,7 +21,7 @@ import ScrollTop from './ScrollTop'
 import CenteredLayout from './CenteredLayout'
 
 const IS_CLIENT = typeof document !== 'undefined'
-const req = require.context(DIRNAME, true, /\.(js|md|mdx|jsx)$/)
+const req = require.context(DIRNAME, true, /\.(js|md|mdx|jsx|tsx)$/)
 
 const { filename, basename = '', disableScroll } = OPTIONS
 
@@ -42,7 +42,7 @@ const initialComponents = getComponents(req)
 const DefaultApp = props => props.children
 
 const Router = IS_CLIENT ? BrowserRouter : StaticRouter
-const appPath = req.keys().find(key => key === './_app.js')
+const appPath = req.keys().find(key => key.match(/_app\.(js|jsx|tsx)/g))
 const App = appPath ? (req(appPath).default || req(appPath)) : DefaultApp
 
 export const getRoutes = async (components = initialComponents) => {

From aaab8da11fb12b448bdd303e3ef13727cc7d9111 Mon Sep 17 00:00:00 2001
From: Tobias Golbs <tobias.golbs@quinscape.de>
Date: Sun, 26 Aug 2018 21:36:05 +0200
Subject: [PATCH 2/3] Add example for using .tsx files as custom Apps

- included custom webpack.config.js to add ts-loader
- added simple tsconfig
- added _app.tsx
---
 examples/typescript/package.json            | 13 +++++++++++++
 examples/typescript/pages/_app.tsx          |  9 +++++++++
 examples/typescript/pages/index.mdx         |  9 +++++++++
 examples/typescript/pages/webpack.config.js | 10 ++++++++++
 examples/typescript/tsconfig.json           | 15 +++++++++++++++
 5 files changed, 56 insertions(+)
 create mode 100644 examples/typescript/package.json
 create mode 100644 examples/typescript/pages/_app.tsx
 create mode 100644 examples/typescript/pages/index.mdx
 create mode 100644 examples/typescript/pages/webpack.config.js
 create mode 100644 examples/typescript/tsconfig.json

diff --git a/examples/typescript/package.json b/examples/typescript/package.json
new file mode 100644
index 0000000..3a6dc6b
--- /dev/null
+++ b/examples/typescript/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "x0-typescript-example",
+  "private": true,
+  "scripts": {
+    "start": "x0 pages",
+    "build": "x0 build pages"
+  },
+  "dependencies": {
+    "@compositor/x0": "^5.0.0",
+    "rebass": "^2.0.0-2",
+    "ts-loader": "^4.5.0"
+  }
+}
diff --git a/examples/typescript/pages/_app.tsx b/examples/typescript/pages/_app.tsx
new file mode 100644
index 0000000..b84cb52
--- /dev/null
+++ b/examples/typescript/pages/_app.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Box, Heading, Provider } from "rebass";
+
+export default ({ render }: { render: any }) => (
+    <div>
+        Custom-App-Wrapper created with Typescript
+        {render()}
+    </div>
+);
\ No newline at end of file
diff --git a/examples/typescript/pages/index.mdx b/examples/typescript/pages/index.mdx
new file mode 100644
index 0000000..924f288
--- /dev/null
+++ b/examples/typescript/pages/index.mdx
@@ -0,0 +1,9 @@
+import { Provider, Box, Heading } from 'rebass'
+
+# Hello MDX with custom TypeScript App
+
+<Provider>
+  <Box px={2} py={3}>
+    <Heading>Hello</Heading>
+  </Box>
+</Provider>
diff --git a/examples/typescript/pages/webpack.config.js b/examples/typescript/pages/webpack.config.js
new file mode 100644
index 0000000..2428c9d
--- /dev/null
+++ b/examples/typescript/pages/webpack.config.js
@@ -0,0 +1,10 @@
+/**
+ * It is necessary to add the ts-loader for .tsx files
+ */
+module.exports = {
+    module: {
+        rules: [
+            { test: /\.tsx?$/, loader: "ts-loader" }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/examples/typescript/tsconfig.json b/examples/typescript/tsconfig.json
new file mode 100644
index 0000000..e0d7964
--- /dev/null
+++ b/examples/typescript/tsconfig.json
@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "lib": ["es5", "es6"],
+        "target": "es6",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "sourceMap": true,
+        "jsx": "react",
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}
\ No newline at end of file

From 2490f00d08167f85ea5bebb7fb1fa2b88e7a4fe2 Mon Sep 17 00:00:00 2001
From: Tobias Golbs <tobias.golbs@quinscape.de>
Date: Sun, 26 Aug 2018 22:29:33 +0200
Subject: [PATCH 3/3] Add .ts / .tsx to resolvable extensions

To allow .ts and .tsx files webpack.config.js must be updated
with resolve.extensions parameter
This will ensure, that .ts and .tsx extensions must not be explicitly added in relative imports
---
 examples/typescript/pages/webpack.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/examples/typescript/pages/webpack.config.js b/examples/typescript/pages/webpack.config.js
index 2428c9d..1c6de03 100644
--- a/examples/typescript/pages/webpack.config.js
+++ b/examples/typescript/pages/webpack.config.js
@@ -2,6 +2,9 @@
  * It is necessary to add the ts-loader for .tsx files
  */
 module.exports = {
+    resolve: {
+        extensions: [".js", "md", "mdx", "jsx", ".ts", ".tsx"],
+    },
     module: {
         rules: [
             { test: /\.tsx?$/, loader: "ts-loader" }