feat: add AppProps (#380)

v 1 r t l · web-flow · commit ed71f3a68845 · 2021-09-07T19:43:26.000+08:00
* feat: add `AppProps` + replace in all examples

* fix(types): replace import alias with http link
diff --git a/examples/anchor-links/app.tsx b/examples/anchor-links/app.tsx
@@ -1,4 +1,5 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
+import { AppProps } from 'aleph/types.d.ts'
 
 const links = {
   'Home': '/',
@@ -13,7 +14,7 @@ const links = {
   'Dark Green': '/colors/darkgreen?text=orange',
 }
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps) {
   return (
     <main>
       <head>
diff --git a/examples/css-modules/app.tsx b/examples/css-modules/app.tsx
@@ -1,6 +1,7 @@
 import React, { ComponentType } from 'react'
+import { AppProps } from 'aleph/types.d.ts'
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps) {
   return (
     <main>
       <head>
diff --git a/examples/hello-world-spa/app.tsx b/examples/hello-world-spa/app.tsx
@@ -1,6 +1,7 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
+import { AppProps } from 'aleph/types.d.ts'
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps) {
   return (
     <main>
       <head>
diff --git a/examples/hello-world/app.tsx b/examples/hello-world/app.tsx
@@ -1,6 +1,7 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
+import { AppProps } from 'aleph/types.d.ts'
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps) {
   return (
     <main>
       <head>
diff --git a/examples/markdown-pages/app.tsx b/examples/markdown-pages/app.tsx
@@ -1,11 +1,13 @@
 import React, { ComponentType } from 'react'
+import { AppProps } from 'aleph/types.d.ts'
+
 
 type Metadata = {
   title?: string
   url?: string
 }
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any> & { meta: Metadata }, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps<Record<string, any>, { meta: Metadata }>) {
   return (
     <main>
       <head>
diff --git a/examples/windicss/app.tsx b/examples/windicss/app.tsx
@@ -1,6 +1,7 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
+import { AppProps } from 'aleph/types.d.ts'
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps) {
   return (
     <main>
       <head>
diff --git a/examples/with-src-dir/src/app.tsx b/examples/with-src-dir/src/app.tsx
@@ -1,6 +1,7 @@
-import React, { ComponentType } from 'react'
+import React from 'react'
+import { AppProps } from 'aleph/types.d.ts'
 
-export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+export default function App({ Page, pageProps }: AppProps) {
   return (
     <main>
       <head>
diff --git a/types.d.ts b/types.d.ts
@@ -1,3 +1,5 @@
+import type { ComponentType } from 'https://esm.sh/react@17.0.2'
+
 /**
  * An interface that aligns to the parts of the `Aleph` class.
  */
@@ -328,3 +330,11 @@ export type RouterURL = {
   push(url: string): void
   replace(url: string): void
 }
+
+/**
+ * Custom `App` props
+ */
+export interface AppProps<P extends Record<string, any> = Record<string, any>, T extends {} = {}> {
+  pageProps: P
+  Page: ComponentType<P> & T
+}
