Feature/typescript app template

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"
+  }
+}

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>
+);

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>

examples/typescript/pages/webpack.config.js

@@ -0,0 +1,13 @@
+/**
+ * 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" }
+        ]
+    }
+}

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"
+    ]
+}

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) => {