From 9e35e540f8551e5541517190d4bb3e4fe0064b5c Mon Sep 17 00:00:00 2001 From: nehalist Date: Fri, 5 Jul 2019 20:31:50 +0200 Subject: [PATCH] Switch to TypeScript --- theme/gatsby-config.js | 9 +- theme/gatsby-node.js | 6 +- theme/package.json | 7 +- .../src/components/{layout.js => layout.tsx} | 22 ++-- .../{index.js => index.ts} | 7 +- theme/src/templates/page.js | 12 -- theme/src/templates/page.tsx | 10 ++ tsconfig.json | 28 +++++ tslint.json | 14 +++ yarn.lock | 116 ++++++++++++++++-- 10 files changed, 188 insertions(+), 43 deletions(-) rename theme/src/components/{layout.js => layout.tsx} (54%) rename theme/src/gatsby-plugin-theme-ui/{index.js => index.ts} (90%) delete mode 100644 theme/src/templates/page.js create mode 100644 theme/src/templates/page.tsx create mode 100644 tsconfig.json create mode 100644 tslint.json diff --git a/theme/gatsby-config.js b/theme/gatsby-config.js index f19b5096b..24639e9bd 100644 --- a/theme/gatsby-config.js +++ b/theme/gatsby-config.js @@ -1,6 +1,9 @@ module.exports = { siteMetadata: { - title: "Gatsby Theme Jam Example Submission", + title: `Gatsby Theme Jam Example Submission`, }, - plugins: ["gatsby-plugin-theme-ui"], -} + plugins: [ + `gatsby-plugin-theme-ui`, + `gatsby-plugin-typescript` + ], +}; diff --git a/theme/gatsby-node.js b/theme/gatsby-node.js index be339606a..5b8500181 100644 --- a/theme/gatsby-node.js +++ b/theme/gatsby-node.js @@ -1,10 +1,10 @@ exports.createPages = ({ actions, reporter }) => { - reporter.warn("make sure to load data from somewhere!") + reporter.warn("make sure to load data from somewhere!"); // TODO replace this with data from somewhere actions.createPage({ path: "/", - component: require.resolve("./src/templates/page.js"), + component: require.resolve("./src/templates/page.tsx"), context: { heading: "Your Theme Here", content: ` @@ -18,4 +18,4 @@ exports.createPages = ({ actions, reporter }) => { `, }, }) -} +}; diff --git a/theme/package.json b/theme/package.json index 0ce163f11..54423f721 100644 --- a/theme/package.json +++ b/theme/package.json @@ -22,7 +22,12 @@ "@emotion/core": "^10.0.14", "@mdx-js/react": "^1.0.21", "gatsby-plugin-theme-ui": "^0.2.2", - "theme-ui": "^0.2.2" + "gatsby-plugin-typescript": "^2.1.0", + "theme-ui": "^0.2.2", + "tslint": "^5.18.0", + "tslint-react": "^4.0.0", + "tslint-react-hooks": "^2.1.1", + "typescript": "^3.5.2" }, "keywords": [ "gatsby", diff --git a/theme/src/components/layout.js b/theme/src/components/layout.tsx similarity index 54% rename from theme/src/components/layout.js rename to theme/src/components/layout.tsx index aa34bf0af..1bf734580 100644 --- a/theme/src/components/layout.js +++ b/theme/src/components/layout.tsx @@ -1,9 +1,13 @@ -import React from "react" -import { css, Global } from "@emotion/core" -import { Layout as StyledLayout, Header, Main, Container } from "theme-ui" -import { graphql, useStaticQuery } from "gatsby" +import React, {FunctionComponent, ReactNode} from "react"; +import {css, Global} from "@emotion/core"; +import {Container, Header, Layout as StyledLayout, Main} from "theme-ui"; +import {graphql, useStaticQuery} from "gatsby"; -const Layout = ({ children }) => { +interface LayoutProps { + children: ReactNode; +} + +const Layout: FunctionComponent = ({children}) => { const data = useStaticQuery(graphql` query { site { @@ -12,7 +16,7 @@ const Layout = ({ children }) => { } } } - `) + `); return ( @@ -30,7 +34,7 @@ const Layout = ({ children }) => { {children} - ) -} + ); +}; -export default Layout +export default Layout; diff --git a/theme/src/gatsby-plugin-theme-ui/index.js b/theme/src/gatsby-plugin-theme-ui/index.ts similarity index 90% rename from theme/src/gatsby-plugin-theme-ui/index.js rename to theme/src/gatsby-plugin-theme-ui/index.ts index 2b11c77b8..22b0a7811 100644 --- a/theme/src/gatsby-plugin-theme-ui/index.js +++ b/theme/src/gatsby-plugin-theme-ui/index.ts @@ -6,12 +6,13 @@ export default { colors: { text: "#232129", - background: "#fff", + background: "#fafafa", primary: "#639", }, fonts: { default: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",' + + ' "Segoe UI Emoji", "Segoe UI Symbol"', }, fontSizes: [16, 18, 20, 22, 27, 36], lineHeights: { @@ -59,4 +60,4 @@ export default { lineHeight: "heading", }, }, -} +}; diff --git a/theme/src/templates/page.js b/theme/src/templates/page.js deleted file mode 100644 index bdbfad836..000000000 --- a/theme/src/templates/page.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react" -import { Styled } from "theme-ui" -import Layout from "../components/layout" - -const PageTemplate = ({ pageContext }) => ( - - {pageContext.heading} -
- -) - -export default PageTemplate diff --git a/theme/src/templates/page.tsx b/theme/src/templates/page.tsx new file mode 100644 index 000000000..0bdb22d8a --- /dev/null +++ b/theme/src/templates/page.tsx @@ -0,0 +1,10 @@ +import React, {FunctionComponent} from "react"; +import Layout from "../components/layout"; + +const PageTemplate: FunctionComponent<{}> = () => ( + + Layout... + +); + +export default PageTemplate; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..328537385 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "esnext", + "jsx": "preserve", + "lib": [ + "dom", + "es2015", + "es2017" + ], + "strict": true, + "noEmit": true, + "isolatedModules": true, + "esModuleInterop": true, + "skipLibCheck": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "removeComments": false, + "moduleResolution": "node", + "preserveConstEnums": true, + "baseUrl": "src", + "noImplicitAny": false, + "allowSyntheticDefaultImports": true + }, + "include": [ + "./theme/src/**/*" + ] +} diff --git a/tslint.json b/tslint.json new file mode 100644 index 000000000..2df841af5 --- /dev/null +++ b/tslint.json @@ -0,0 +1,14 @@ +{ + "extends": [ + "tslint:latest", + "tslint-react", + "tslint-react-hooks" + ], + "rules": { + "interface-name": false, + "object-literal-sort-keys": false, + "ordered-imports": false, + "jsx-no-multiline-js": false, + "react-hooks-nesting": "error" + } +} diff --git a/yarn.lock b/yarn.lock index 212ba0615..3d7e94dec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -344,6 +344,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-typescript@^7.2.0": + version "7.3.3" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991" + integrity sha512-dGwbSMA1YhVS8+31CnPR7LB4pcbrzcV99wQzby4uAfrkZPYZlQ7ImwdpzLqi6Z6IL02b8IAL379CaMwo0x5Lag== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550" @@ -628,6 +635,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-transform-typescript@^7.3.2": + version "7.4.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.4.5.tgz#ab3351ba35307b79981993536c93ff8be050ba28" + integrity sha512-RPB/YeGr4ZrFKNwfuQRlMf2lxoCUaU01MTw39/OFE/RiL8HDjtn68BwEPft1P7JN4akyEmjGWAMNldOV7o9V2g== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-typescript" "^7.2.0" + "@babel/plugin-transform-unicode-regex@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz#ab4634bb4f14d36728bf5978322b35587787970f" @@ -710,6 +725,14 @@ "@babel/plugin-transform-react-jsx-self" "^7.0.0" "@babel/plugin-transform-react-jsx-source" "^7.0.0" +"@babel/preset-typescript@^7.0.0": + version "7.3.3" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a" + integrity sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-typescript" "^7.3.2" + "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" @@ -953,9 +976,9 @@ integrity sha512-MNodHp46og+Sdde/LCxTLrxcD5Dimu21R/Fer2raXMG1XtHSV2+vZnkIV87OPAxuf2NiDj1W5hN7Q2MYUfQQ8w== "@styled-system/css@^5.0.5": - version "5.0.11" - resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.0.11.tgz#6e5aafc8a4730eab79e0dc79ac04eadae102b280" - integrity sha512-rq/KO2SEpUbk9dWIRdWEkNL3w6Eds55KGdAcD+9DttqrC+FwPXfk27ebmTMfwyIAiDES9uW7z57Bo6v34VUNqw== + version "5.0.13" + resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.0.13.tgz#77adebede128649aa662c994a7be364058d2bb81" + integrity sha512-BN/d/zYw5jpBuhzRVpPLfqsFH6TaTjcROtiJcLzFkhc8RUM+AFp3n3pGTY0yoIqLEhYSU+z5frQ4yi7V5xb7NQ== "@types/configstore@^2.1.1": version "2.1.1" @@ -1997,6 +2020,11 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" +builtin-modules@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" + integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8= + builtin-modules@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" @@ -2156,7 +2184,7 @@ chalk@1.1.3, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2: +chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -2401,7 +2429,7 @@ command-exists@^1.2.2: resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.8.tgz#715acefdd1223b9c9b37110a149c6392c2852291" integrity sha512-PM54PkseWbiiD/mMsbvW351/u+dafwTJ0ye2qB60G1aGQP9j3xK2gmMDc+R34L3nDtx4qMCitXT75mkbkGJDLw== -commander@^2.11.0, commander@^2.19.0: +commander@^2.11.0, commander@^2.12.1, commander@^2.19.0: version "2.20.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== @@ -3167,6 +3195,11 @@ dezalgo@^1.0.0: asap "^2.0.0" wrappy "1" +diff@^3.2.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" + integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== + diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" @@ -4292,9 +4325,18 @@ gatsby-plugin-page-creator@^2.1.2: micromatch "^3.1.10" gatsby-plugin-theme-ui@^0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/gatsby-plugin-theme-ui/-/gatsby-plugin-theme-ui-0.2.2.tgz#5b6db0e61033e490b76cb0b00c1350e1eb7b1165" - integrity sha512-SfXyerGvqzzCa6VE6oftY7WH7ySxtMLTB/27Fm5L1qVP4gnjPRyrDhSyHT2rYyzheLdT2/XYGNmsu/K47kJrFA== + version "0.2.6" + resolved "https://registry.yarnpkg.com/gatsby-plugin-theme-ui/-/gatsby-plugin-theme-ui-0.2.6.tgz#b153a3897e03fa5d4c5e33d04db822d57790a39e" + integrity sha512-Vs8Fr/qOMCSC1W4uCDjCAHI1zN7NEMfgiKESVCtytPlvL1fZau+qytk3er7vrLn1IdBi1KtnPc2hJ/bHoIW1ZQ== + +gatsby-plugin-typescript@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.1.0.tgz#a587b082820078bcee5dac8f6af0e1088f8ee05d" + integrity sha512-SDV1uzm1cKGHnfNAkjxgTfiKw4B1wy0oWWeFeTdsm2I40b9XQR8kSVWYyrR5nAjspgF5hWyCdvwTyzT1KeepnA== + dependencies: + "@babel/preset-typescript" "^7.0.0" + "@babel/runtime" "^7.0.0" + babel-plugin-remove-graphql-queries "^2.7.0" gatsby-react-router-scroll@^2.1.1: version "2.1.1" @@ -8968,9 +9010,9 @@ text-table@0.2.0, text-table@^0.2.0: integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= theme-ui@^0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.2.2.tgz#b211ab0e565b8e74c843bc5c18b30d848ad13b15" - integrity sha512-ce29BzEP2pSogQ5XxtEUDXcwdtcb1SdPgJCZdFi7sfglA2vdADY6CdRXxZ6cVrdeVaDQQMtSaIbFghpplZbGMg== + version "0.2.6" + resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.2.6.tgz#f3f1990df83a93a9223e70f84665f9111d2080ed" + integrity sha512-pjyld9LsZrZcIPuCidEfV6wa07OuhcJptI0s4gQZQNAinHNeCMUYy0fV8N6IN1okb7prHnK04xOS/jSav+o7xw== dependencies: "@emotion/is-prop-valid" "^0.8.1" "@styled-system/css" "^5.0.5" @@ -9088,11 +9130,56 @@ ts-pnp@^1.1.2: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552" integrity sha512-f5Knjh7XCyRIzoC/z1Su1yLLRrPrFCgtUAh/9fCSP6NKbATwpOL1+idQVXQokK9GRFURn/jYPGPfegIctwunoA== -tslib@^1.6.0, tslib@^1.9.0: +tslib@^1.6.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== +tslint-react-hooks@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/tslint-react-hooks/-/tslint-react-hooks-2.1.1.tgz#d6066d0eef45b0ff8f5457c79e7cca2271e816a7" + integrity sha512-QdOog0JgU6hvMOWBcSK9n/Av+MOJoLl9W8VruvmsIfkgDgMfuwSwoVO6mpxB+8tpQCU/PDJvcLu3oo4qwiLCxw== + +tslint-react@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-4.0.0.tgz#b4bb4c01c32448cb14d23f143a2f5e4989bb961e" + integrity sha512-9fNE0fm9zNDx1+b6hgy8rgDN2WsQLRiIrn3+fbqm0tazBVF6jiaCFAITxmU+WSFWYE03Xhp1joCircXOe1WVAQ== + dependencies: + tsutils "^3.9.1" + +tslint@^5.18.0: + version "5.18.0" + resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.18.0.tgz#f61a6ddcf372344ac5e41708095bbf043a147ac6" + integrity sha512-Q3kXkuDEijQ37nXZZLKErssQVnwCV/+23gFEMROi8IlbaBG6tXqLPQJ5Wjcyt/yHPKBC+hD5SzuGaMora+ZS6w== + dependencies: + "@babel/code-frame" "^7.0.0" + builtin-modules "^1.1.1" + chalk "^2.3.0" + commander "^2.12.1" + diff "^3.2.0" + glob "^7.1.1" + js-yaml "^3.13.1" + minimatch "^3.0.4" + mkdirp "^0.5.1" + resolve "^1.3.2" + semver "^5.3.0" + tslib "^1.8.0" + tsutils "^2.29.0" + +tsutils@^2.29.0: + version "2.29.0" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99" + integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA== + dependencies: + tslib "^1.8.1" + +tsutils@^3.9.1: + version "3.14.0" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.14.0.tgz#bf8d5a7bae5369331fa0f2b0a5a10bd7f7396c77" + integrity sha512-SmzGbB0l+8I0QwsPgjooFRaRvHLBLNYM8SeQ0k6rtNDru5sCGeLJcZdwilNndN+GysuFjF5EIYgN8GfFG6UeUw== + dependencies: + tslib "^1.8.1" + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" @@ -9128,6 +9215,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c" + integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA== + ua-parser-js@^0.7.18: version "0.7.20" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"