chore: auto deploy docs (#1000)

* chore: auto deploy docs

* chore: lint

.eslintrc.js

@@ -1,14 +1,11 @@
 module.exports = {
-  extends: ['4catalyzer-react', '4catalyzer-jest', 'prettier'],
+  extends: [
+    '4catalyzer-react',
+    '4catalyzer-jest',
+    '4catalyzer-typescript',
+    'prettier',
+  ],
   plugins: ['prettier', 'import'],
-  parser: '@typescript-eslint/parser',
-  settings: {
-    'import/resolver': {
-      typescript: {
-        alwaysTryTypes: true,
-      },
-    },
-  },
   rules: {
     'react/prop-types': 'off',
     'prettier/prettier': 'error',

.github/workflows/main.yml

@@ -20,3 +20,11 @@ jobs:
       - run: yarn --cwd www install --frozen-lockfile
       - run: yarn test --coverage
       - run: node_modules/.bin/codecov
+      - if: ${{ github.ref == 'refs/heads/master' }}
+        run: yarn --cwd www build
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/master' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./www/build

package.json

@@ -104,7 +104,7 @@
     "eslint": "^8.13.0",
     "eslint-config-4catalyzer-jest": "^2.2.0",
     "eslint-config-4catalyzer-react": "^1.2.2",
-    "eslint-config-4catalyzer-typescript": "^3.2.0",
+    "eslint-config-4catalyzer-typescript": "^3.3.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^25.7.0",

www/docs/advanced/component-route-access.md

@@ -16,11 +16,13 @@ function MyButton() {
   const { match, router } = useRouter();
 
   const onClick = useCallback(() => {
-    router.replace('/widgets');
+    router.replace("/widgets");
   }, [router]);
 
   return (
-    <button onClick={onClick}>Current widget: {match.params.widgetId}</button>
+    <button onClick={onClick}>
+      Current widget: {match.params.widgetId}
+    </button>
   );
 }
 ```

www/docs/advanced/error-handling.md

@@ -14,7 +14,7 @@ The router will throw a `new HttpError(404)` in the case when no routes match th
 
 ```js
 const route = {
-  path: 'widgets/:widgetId',
+  path: "widgets/:widgetId",
   Component: WidgetPage,
   getData: ({ params: { widgetId } }) =>
     fetchWidget(widgetId).catch(() => {

www/docs/advanced/minimize-bundle.md

@@ -7,10 +7,10 @@ sidebar_position: 7
 The top-level `found` package exports everything available in this library. It is unlikely that any single application will use all the features available. As such, for real applications, you should import the modules you need directly, to pull in only the code that you use.
 
 ```js
-import createBrowserRouter from 'found/createBrowserRouter';
-import makeRouteConfig from 'found/makeRouteConfig';
-import { routerShape } from 'found/PropTypes';
-import Route from 'found/Route';
+import createBrowserRouter from "found/createBrowserRouter";
+import makeRouteConfig from "found/makeRouteConfig";
+import { routerShape } from "found/PropTypes";
+import Route from "found/Route";
 
 // Instead of:
 // import {

www/docs/advanced/names-child-routes.md

@@ -17,36 +17,36 @@ function AppPage({ nav, main }) {
 }
 
 const route = {
-  path: '/',
+  path: "/",
   Component: AppPage,
   children: [
     {
-      path: 'foo',
+      path: "foo",
       children: {
         nav: [
           {
-            path: '(.*)?',
+            path: "(.*)?",
             Component: FooNav,
           },
         ],
         main: [
           {
-            path: 'a',
+            path: "a",
             Component: FooA,
           },
           {
-            path: 'b',
+            path: "b",
             Component: FooB,
           },
         ],
       },
     },
     {
-      path: 'bar',
+      path: "bar",
       children: {
         nav: [
           {
-            path: '(.*)?',
+            path: "(.*)?",
             Component: BarNav,
           },
         ],

www/docs/advanced/redirects.md

@@ -8,12 +8,12 @@ The `Redirect` route class sets up static redirect routes. You can also use it t
 
 ```js
 const redirect1 = new Redirect({
-  from: 'widget/:widgetId',
-  to: '/widgets/:widgetId',
+  from: "widget/:widgetId",
+  to: "/widgets/:widgetId",
 });
 
 const redirect2 = new Redirect({
-  from: 'widget/:widgetId',
+  from: "widget/:widgetId",
   to: ({ params }) => `/widgets/${params.widgetId}`,
   status: 301,
 });
@@ -45,7 +45,7 @@ const customRedirect = {
 
 const permanentRedirect = {
   render: () => {
-    throw new RedirectException('/widgets', 301);
+    throw new RedirectException("/widgets", 301);
   },
 };
 ```

www/docs/advanced/redux-integration.md

@@ -11,8 +11,8 @@ If you are using your own Redux store, use `createConnectedRouter` as described
 To access the current routing state, connect to the `resolvedMatch` property of the `foundReducer` state. To navigate, dispatch the appropriate actions from Farce.
 
 ```js
-import { Actions as FarceActions } from 'farce';
-import { connect } from 'react-redux';
+import { Actions as FarceActions } from "farce";
+import { connect } from "react-redux";
 
 const MyConnectedComponent = connect(
   ({ found: { resolvedMatch } }) => ({
@@ -21,6 +21,6 @@ const MyConnectedComponent = connect(
   }),
   {
     push: FarceActions.push,
-  },
+  }
 )(MyComponent);
 ```

www/docs/advanced/server-side-rendering.md

@@ -9,7 +9,7 @@ Found supports server-side rendering for universal applications. Functionality s
 To render your application on the server, use `getFarceResult`.
 
 ```js
-import { getFarceResult } from 'found/server';
+import { getFarceResult } from "found/server";
 
 /* ... */
 
@@ -60,7 +60,7 @@ This promise resolves when all asynchronous dependencies are available. If your
 When using server-side rendering, you need to delay the initial render on the client, such that the initial client-rendered markup matches the server-rendered markup. To do so, use `createInitialBrowserRouter` or `createInitialFarceRouter` instead of `createBrowserRouter` or `createFarceRouter` respectively.
 
 ```js
-import { createInitialBrowserRouter } from 'found';
+import { createInitialBrowserRouter } from "found";
 
 /* ... */
 
@@ -70,7 +70,7 @@ import { createInitialBrowserRouter } from 'found';
     render,
   });
 
-  ReactDOM.render(<BrowserRouter />, document.getElementById('root'));
+  ReactDOM.render(<BrowserRouter />, document.getElementById("root"));
 })();
 ```
 
@@ -81,8 +81,8 @@ These behave similarly to their counterparts above, except that the options obje
 Found exposes lower-level functionality for doing server-side rendering for use with your own Redux store, as with `createConnectedRouter` above. On the server, use `getStoreRenderArgs` to get a promise for the arguments to your `render` function, then wrap the rendered elements with a `<RouterProvider>`.
 
 ```js
-import { getStoreRenderArgs } from 'found';
-import { RouterProvider } from 'found/server';
+import { getStoreRenderArgs } from "found";
+import { RouterProvider } from "found/server";
 
 /* ... */
 
@@ -113,8 +113,8 @@ app.use(async (req, res) => {
           {render(renderArgs)}
         </RouterProvider>
       </Provider>,
-      store.getState(),
-    ),
+      store.getState()
+    )
   );
 });
 ```
@@ -124,7 +124,7 @@ You must dispatch `FarceActions.init()` before calling `getStoreRenderArgs`. `ge
 On the client, pass the value resolved by by `getStoreRenderArgs` to your `<ConnectedRouter>` as the `initialRenderArgs` prop.
 
 ```js
-import { getStoreRenderArgs } from 'found';
+import { getStoreRenderArgs } from "found";
 
 /* ... */
 
@@ -143,7 +143,7 @@ import { getStoreRenderArgs } from 'found';
         initialRenderArgs={initialRenderArgs}
       />
     </Provider>,
-    document.getElementById('root'),
+    document.getElementById("root")
   );
 })();
 ```

www/docs/configuration/navigation.md

@@ -21,7 +21,7 @@ const link2 = (
   <Link
     as={CustomAnchor}
     to={{
-      pathname: '/widgets/bar',
+      pathname: "/widgets/bar",
       query: { the: query },
     }}
     activePropName="active"
@@ -33,7 +33,7 @@ const link2 = (
 const link3 = (
   <Link
     to={{
-      pathname: '/widgets/bar',
+      pathname: "/widgets/bar",
       query: { the: query },
     }}
   >
@@ -75,7 +75,7 @@ const propTypes = {
 
 class MyButton extends React.Component {
   onClick = () => {
-    this.props.router.replace('/widgets');
+    this.props.router.replace("/widgets");
   };
 
   render() {
@@ -99,11 +99,13 @@ function MyButton() {
   const { match, router } = useRouter();
 
   const onClick = useCallback(() => {
-    router.replace('/widgets');
+    router.replace("/widgets");
   }, [router]);
 
   return (
-    <button onClick={onClick}>Current widget: {match.params.widgetId}</button>
+    <button onClick={onClick}>
+      Current widget: {match.params.widgetId}
+    </button>
   );
 }
 ```
@@ -122,10 +124,10 @@ function MyForm(props) {
       dirty
         ? router.addNavigationListener(
             () =>
-              'You have unsaved input. Are you sure you want to leave this page?',
+              "You have unsaved input. Are you sure you want to leave this page?"
           )
         : undefined,
-    [dirty],
+    [dirty]
   );
 
   /* ... */
@@ -145,7 +147,7 @@ router.addNavigationListener(
 
     return asyncConfirm(location);
   },
-  { beforeUnload: true },
+  { beforeUnload: true }
 );
 ```
 

www/docs/configuration/route-config.md

@@ -58,12 +58,12 @@ interface Router {
   isActive: (
     match: Match,
     location: LocationDescriptor,
-    { exact: boolean },
+    { exact: boolean }
   ) => boolean; // For `match` as above, returns whether `match` corresponds to `location` or a subpath of `location`; if `exact` is set, returns whether `match` corresponds exactly to `location`
   format: (pattern: string, params: ParamsDescriptor) => string;
   addNavigationListener(
     listener: (location: LocationDescriptor) => any,
-    { beforeUnload: boolean },
+    { beforeUnload: boolean }
   ); // Adds a [navigation listener](https://github.com/4Catalyzer/farce#navigation-listeners) that can [block navigation](#blocking-navigation)
 }
 ```
@@ -105,7 +105,7 @@ If you need additional context such as a store instance to fetch data, specify t
 
 ```js
 const route = {
-  path: 'widgets/:widgetId',
+  path: "widgets/:widgetId",
   Component: WidgetPage,
   getData: ({ params, context }) =>
     context.store.dispatch(Actions.getWidget(params.widgetId)),