fix: some typescript adjustments

doczjs · Jul 10, 2019 · 4ba6eaf · 4ba6eaf
1 parent feb2457
commit 4ba6eaf
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git a/core/docz-core/src/bundler/machine/services/create-resources.ts b/core/docz-core/src/bundler/machine/services/create-resources.ts
@@ -110,10 +110,15 @@ export const writeNotFound = async () => {
 const writeGatsbyConfig = async ({ args, isDoczRepo }: ServerMachineCtx) => {
   const outputPath = path.join(paths.docz, 'gatsby-config.js')
   const config = omit(['plugins'], args)
-  const newConfig = JSON.stringify({ ...config, root: paths.docz })
+  const newConfig = {
+    ...config,
+    root: paths.docz,
+  }
+
   await outputFileFromTemplate('gatsby-config.tpl.js', outputPath, {
     isDoczRepo,
     config: newConfig,
+    opts: JSON.stringify(newConfig),
   })
 }
 

diff --git a/core/docz-core/templates/gatsby-config.tpl.js b/core/docz-core/templates/gatsby-config.tpl.js
@@ -15,9 +15,16 @@ const config = {
   plugins: [
     {
       resolve: 'gatsby-theme-docz',
-      options: <%- config %>
-    },
-    <% if (isDoczRepo) {%>{
+      options: <%- opts %>
+    },<% if (config.typescript) {%>
+    {
+      resolve: 'gatsby-plugin-typescript',
+      options: {
+        isTSX: true,
+        allExtensions: true
+      }
+    },<%}%><% if (isDoczRepo) {%>
+    {
       resolve: 'gatsby-plugin-eslint',
       options: {
         test: /\.js$|\.jsx$/,
@@ -35,13 +42,6 @@ const config = {
         modules: ['docz', 'gatsby-theme-docz'],
       },
     },<%}%>
-    <% if (config.typescript) {%>{
-      resolve: 'gatsby-plugin-typescript',
-      options: {
-        isTSX: true,
-        allExtensions: true
-      }
-    }<%}%>
   ],
 }
 

diff --git a/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js b/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js
@@ -12,6 +12,14 @@ module.exports = async (params, opts) => {
   const run = Plugin.runPluginsMethod(args.plugins)
   const config = getConfig()
 
+  if (args.typescript) {
+    actions.setWebpackConfig({
+      resolve: {
+        extensions: config.resolve.extensions.concat(['.ts', '.tsx']),
+      },
+    })
+  }
+
   if (hasParentNodeModules && stage === 'develop') {
     actions.setWebpackConfig({
       resolve: {

diff --git a/examples/typescript/src/components/Alert.tsx b/examples/typescript/src/components/Alert.tsx
@@ -19,12 +19,12 @@ export interface AlertProps {
   kind: 'info' | 'positive' | 'negative' | 'warning'
 }
 
-const AlertStyled = styled('div')`
+const AlertStyled = styled('div')<AlertProps>`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
   color: white;
-  background: ${({ kind = 'info' }: AlertProps) => kinds[kind]};
+  background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
 export const Alert: SFC<AlertProps> = ({ kind, ...props }) => (

diff --git a/examples/typescript/src/components/Button.tsx b/examples/typescript/src/components/Button.tsx
@@ -58,7 +58,7 @@ const getScale = ({ scale = 'normal' }: ButtonProps) => scales[scale]
 const getKind = ({ kind = 'primary', outline = false }: ButtonProps) =>
   kinds(outline)[kind]
 
-const ButtonStyled = styled('button')`
+const ButtonStyled = styled('button')<ButtonProps>`
   ${getKind};
   ${getScale};
   cursor: pointer;