Merge pull request #41 from risenforces/feat/optional-props-in-customize

[Feature] Optional props in customize

README.md

@@ -166,9 +166,8 @@ Page.getInitialProps = createGIP({
   // It's run after all events are settled but before Scope serialization
   // So, here you can safely call allSettled
   async customize({ scope, context }) {
-    return {
-      /* Props */
-    };
+    // You can also return nothing (there will be no impact on props in this case)
+    return { /* Props */ };
   },
 });
 ```
@@ -210,9 +209,8 @@ export const getServerSideProps = createGSSP({
   // It's run after all events are settled but before Scope serialization
   // So, here you can safely call allSettled
   customize({ scope, context }) {
-    return {
-      /* GSSP Result */
-    };
+    // You can omit the "props" field (there will be no impact on props in this case)
+    return { /* GSSP Result */ };
   },
 });
 ```
@@ -252,9 +250,8 @@ export const getStaticProps = createGSP({
   // It's run after all events are settled but before Scope serialization
   // So, here you can safely call allSettled
   customize({ scope, context }) {
-    return {
-      /* GSP Result */
-    };
+    // You can omit the "props" field (there will be no impact on props in this case)
+    return { /* GSP Result */ };
   },
 });
 ```

apps/test-app/.eslintrc.js

@@ -0,0 +1,15 @@
+const { configure, presets } = require('eslint-kit')
+
+module.exports = configure({
+  allowDebug: process.env.NODE_ENV !== 'production',
+
+  presets: [
+    presets.imports(),
+    presets.node(),
+    presets.prettier(),
+    presets.react(),
+    presets.nextJs(),
+    presets.effector(),
+    presets.typescript(),
+  ],
+})

apps/test-app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "quoteProps": "consistent"
+}

apps/test-app/package.json

@@ -21,7 +21,7 @@
     "clsx": "^1.2.1",
     "effector": "^22.8.1",
     "effector-react": "^22.5.1",
-    "eslint": "8.38.0",
+    "eslint": "^8.39.0",
     "eslint-config-next": "13.3.0",
     "fs-extra": "^11.1.1",
     "next": "13.3.0",
@@ -38,5 +38,8 @@
     "@effector/next": "^0.3.0",
     "effector": "^22.8.1",
     "effector-react": "^22.5.1"
+  },
+  "devDependencies": {
+    "eslint-kit": "^7.0.0"
   }
 }

apps/test-app/pages/blog/[slug].tsx

@@ -8,7 +8,9 @@ import { localApi } from '@app/shared/api'
 const Page: NextPage = () => {
   console.info('[Render] BlogPostPage')
 
+  // eslint-disable-next-line effector/mandatory-scope-binding
   usePageEvent(appStarted, { runOnce: true })
+
   return <BlogPostPage />
 }
 
@@ -28,6 +30,7 @@ export const getStaticProps = createGSP<
   { slug: string }
 >({
   pageEvent: pageStarted,
+  customize: () => ({ revalidate: 60 }),
 })
 
 export default Page

apps/test-app/pages/blog/index.tsx

@@ -7,7 +7,9 @@ import { appStarted } from '@app/pages/shared/model'
 const Page: NextPage = () => {
   console.info('[Render] BlogPage')
 
+  // eslint-disable-next-line effector/mandatory-scope-binding
   usePageEvent(appStarted, { runOnce: true })
+
   return <BlogPage />
 }
 

apps/test-app/src/pages/blog-post/page.tsx

@@ -1,10 +1,10 @@
-import { useStore } from 'effector-react'
+import { useUnit } from 'effector-react'
 import { BaseTemplate } from '@app/computed/widgets/layouts'
 import { $categories, $post } from './model'
 
 export function BlogPostPage() {
-  const post = useStore($post)
-  const categories = useStore($categories)
+  const post = useUnit($post)
+  const categories = useUnit($categories)
 
   if (!post) {
     return null

apps/test-app/src/pages/blog/page.tsx

@@ -1,18 +1,23 @@
-import { useStore } from 'effector-react'
+import { useUnit } from 'effector-react'
 import Link from 'next/link'
 import { BaseTemplate } from '@app/computed/widgets/layouts'
 import { paths } from '@app/shared/routing'
 import { $posts } from './model'
 
 export function BlogPage() {
-  const posts = useStore($posts)
+  const posts = useUnit($posts)
 
   return (
     <BaseTemplate
       title="Blog"
       content={posts.map((post) => {
         return (
-          <Link legacyBehavior key={post.id} href={paths.blogPost(post.slug)} passHref={true}>
+          <Link
+            key={post.id}
+            legacyBehavior
+            href={paths.blogPost(post.slug)}
+            passHref={true}
+          >
             <a href="_">
               <h3>{post.title}</h3>
             </a>

apps/test-app/src/pages/home/page.tsx

@@ -1,9 +1,9 @@
-import { useStore } from 'effector-react'
+import { useUnit } from 'effector-react'
 import { BaseTemplate } from '@app/computed/widgets/layouts'
 import { $authenticatedUser } from '@app/entities/authenticated-user'
 
 export function HomePage() {
-  const user = useStore($authenticatedUser)
+  const user = useUnit($authenticatedUser)
 
   return (
     <BaseTemplate

apps/test-app/src/pages/my-profile/page.tsx

@@ -1,11 +1,11 @@
-import { useStore } from 'effector-react'
+import { useUnit } from 'effector-react'
 import { BaseTemplate } from '@app/computed/widgets/layouts'
 import { $authenticatedUser } from '@app/entities/authenticated-user'
 import { $bio } from './model'
 
 export function MyProfilePage() {
-  const user = useStore($authenticatedUser)
-  const bio = useStore($bio)
+  const user = useUnit($authenticatedUser)
+  const bio = useUnit($bio)
 
   return (
     <BaseTemplate

apps/test-app/src/widgets/header/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useStore } from 'effector-react'
+import { useUnit } from 'effector-react'
 import Link from 'next/link'
 import { $authenticatedUser } from '@app/entities/authenticated-user'
 import { paths } from '@app/shared/routing'
@@ -26,7 +26,7 @@ const routes: Route[] = [
 ]
 
 export function Header() {
-  const user = useStore($authenticatedUser)
+  const user = useUnit($authenticatedUser)
 
   return (
     <header className={styles.header}>
@@ -37,7 +37,7 @@ export function Header() {
       </Link>
       <nav className={styles.navbar}>
         {routes.map((route) => (
-          <Link legacyBehavior key={route.path} href={route.path} passHref>
+          <Link key={route.path} legacyBehavior href={route.path} passHref>
             <a className={styles.navlink} href="_">
               {route.title}
             </a>