This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import { Context, Effect, Effectable, ExecutionStrategy, Function, Predicate, Runtime, Scope, String, Tracer, type Types, type Utils } from "effect"
|
import { Context, Effect, Effectable, ExecutionStrategy, Function, Predicate, Runtime, Scope, String, Tracer, type Types, type Utils } from "effect"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import { Hooks } from "./hooks/index.js"
|
import { Hooks } from "./hooks/index.js"
|
||||||
import * as Memoized from "./Memoized.js"
|
import * as Memo from "./Memo.js"
|
||||||
|
|
||||||
|
|
||||||
export const TypeId: unique symbol = Symbol.for("effect-fc/Component")
|
export const TypeId: unique symbol = Symbol.for("effect-fc/Component")
|
||||||
@@ -67,7 +67,7 @@ const ComponentProto = Object.freeze({
|
|||||||
const FC = React.useMemo(() => {
|
const FC = React.useMemo(() => {
|
||||||
const f: React.FC<P> = self.makeFunctionComponent(runtimeRef, scope)
|
const f: React.FC<P> = self.makeFunctionComponent(runtimeRef, scope)
|
||||||
f.displayName = self.displayName ?? "Anonymous"
|
f.displayName = self.displayName ?? "Anonymous"
|
||||||
return Memoized.isMemoized(self)
|
return Memo.isMemo(self)
|
||||||
? React.memo(f, self.propsAreEqual)
|
? React.memo(f, self.propsAreEqual)
|
||||||
: f
|
: f
|
||||||
}, [scope])
|
}, [scope])
|
||||||
|
|||||||
47
packages/effect-fc/src/Memo.ts
Normal file
47
packages/effect-fc/src/Memo.ts
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import { type Equivalence, Function, Predicate } from "effect"
|
||||||
|
import type * as Component from "./Component.js"
|
||||||
|
|
||||||
|
|
||||||
|
export const TypeId: unique symbol = Symbol.for("effect-fc/Memo")
|
||||||
|
export type TypeId = typeof TypeId
|
||||||
|
|
||||||
|
export interface Memo<P> extends Memo.Options<P> {
|
||||||
|
readonly [TypeId]: TypeId
|
||||||
|
}
|
||||||
|
|
||||||
|
export namespace Memo {
|
||||||
|
export interface Options<P> {
|
||||||
|
readonly propsAreEqual?: Equivalence.Equivalence<P>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const MemoProto = Object.freeze({
|
||||||
|
[TypeId]: TypeId
|
||||||
|
} as const)
|
||||||
|
|
||||||
|
|
||||||
|
export const isMemo = (u: unknown): u is Memo<unknown> => Predicate.hasProperty(u, TypeId)
|
||||||
|
|
||||||
|
export const memo = <T extends Component.Component<any, any, any, any>>(
|
||||||
|
self: T
|
||||||
|
): T & Memo<Component.Component.Props<T>> => Object.setPrototypeOf(
|
||||||
|
Object.assign(function() {}, self),
|
||||||
|
Object.freeze({ ...Object.getPrototypeOf(self), ...MemoProto }),
|
||||||
|
)
|
||||||
|
|
||||||
|
export const withOptions: {
|
||||||
|
<T extends Component.Component<any, any, any, any> & Memo<any>>(
|
||||||
|
options: Partial<Memo.Options<Component.Component.Props<T>>>
|
||||||
|
): (self: T) => T
|
||||||
|
<T extends Component.Component<any, any, any, any> & Memo<any>>(
|
||||||
|
self: T,
|
||||||
|
options: Partial<Memo.Options<Component.Component.Props<T>>>,
|
||||||
|
): T
|
||||||
|
} = Function.dual(2, <T extends Component.Component<any, any, any, any> & Memo<any>>(
|
||||||
|
self: T,
|
||||||
|
options: Partial<Memo.Options<Component.Component.Props<T>>>,
|
||||||
|
): T => Object.setPrototypeOf(
|
||||||
|
Object.assign(function() {}, self, options),
|
||||||
|
Object.getPrototypeOf(self),
|
||||||
|
))
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
import { type Equivalence, Function, Predicate } from "effect"
|
|
||||||
import type * as Component from "./Component.js"
|
|
||||||
|
|
||||||
|
|
||||||
export const TypeId: unique symbol = Symbol.for("effect-fc/Memoized")
|
|
||||||
export type TypeId = typeof TypeId
|
|
||||||
|
|
||||||
export interface Memoized<P> extends Memoized.Options<P> {
|
|
||||||
readonly [TypeId]: TypeId
|
|
||||||
}
|
|
||||||
|
|
||||||
export namespace Memoized {
|
|
||||||
export interface Options<P> {
|
|
||||||
readonly propsAreEqual?: Equivalence.Equivalence<P>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const MemoizedProto = Object.freeze({
|
|
||||||
[TypeId]: TypeId
|
|
||||||
} as const)
|
|
||||||
|
|
||||||
|
|
||||||
export const isMemoized = (u: unknown): u is Memoized<unknown> => Predicate.hasProperty(u, TypeId)
|
|
||||||
|
|
||||||
export const memo = <T extends Component.Component<any, any, any, any>>(
|
|
||||||
self: T
|
|
||||||
): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
|
|
||||||
Object.assign(function() {}, self),
|
|
||||||
Object.freeze({ ...Object.getPrototypeOf(self), ...MemoizedProto }),
|
|
||||||
)
|
|
||||||
|
|
||||||
export const withOptions: {
|
|
||||||
<T extends Component.Component<any, any, any, any> & Memoized<any>>(
|
|
||||||
options: Partial<Memoized.Options<Component.Component.Props<T>>>
|
|
||||||
): (self: T) => T
|
|
||||||
<T extends Component.Component<any, any, any, any> & Memoized<any>>(
|
|
||||||
self: T,
|
|
||||||
options: Partial<Memoized.Options<Component.Component.Props<T>>>,
|
|
||||||
): T
|
|
||||||
} = Function.dual(2, <T extends Component.Component<any, any, any, any> & Memoized<any>>(
|
|
||||||
self: T,
|
|
||||||
options: Partial<Memoized.Options<Component.Component.Props<T>>>,
|
|
||||||
): T => Object.setPrototypeOf(
|
|
||||||
Object.assign(function() {}, self, options),
|
|
||||||
Object.getPrototypeOf(self),
|
|
||||||
))
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
export * as Component from "./Component.js"
|
export * as Component from "./Component.js"
|
||||||
export * as Memoized from "./Memoized.js"
|
export * as Memo from "./Memo.js"
|
||||||
export * as ReactManagedRuntime from "./ReactManagedRuntime.js"
|
export * as ReactManagedRuntime from "./ReactManagedRuntime.js"
|
||||||
export * as Suspense from "./Suspense.js"
|
export * as Suspense from "./Suspense.js"
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
|
|||||||
import { createFileRoute } from "@tanstack/react-router"
|
import { createFileRoute } from "@tanstack/react-router"
|
||||||
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
||||||
import { Effect } from "effect"
|
import { Effect } from "effect"
|
||||||
import { Component, Memoized, Suspense } from "effect-fc"
|
import { Component, Memo, Suspense } from "effect-fc"
|
||||||
import { Hooks } from "effect-fc/hooks"
|
import { Hooks } from "effect-fc/hooks"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
|
|
||||||
@@ -67,7 +67,7 @@ class AsyncComponent extends Component.makeUntraced(function* AsyncComponent() {
|
|||||||
Suspense.suspense,
|
Suspense.suspense,
|
||||||
Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
|
Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
|
||||||
) {}
|
) {}
|
||||||
class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
|
class MemoizedAsyncComponent extends Memo.memo(AsyncComponent) {}
|
||||||
|
|
||||||
class SubComponent extends Component.makeUntraced(function* SubComponent() {
|
class SubComponent extends Component.makeUntraced(function* SubComponent() {
|
||||||
const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
|
const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
|
|||||||
import { createFileRoute } from "@tanstack/react-router"
|
import { createFileRoute } from "@tanstack/react-router"
|
||||||
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
||||||
import { Effect } from "effect"
|
import { Effect } from "effect"
|
||||||
import { Component, Memoized } from "effect-fc"
|
import { Component, Memo } from "effect-fc"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
|
|
||||||
|
|
||||||
@@ -30,7 +30,7 @@ class SubComponent extends Component.makeUntraced(function* SubComponent() {
|
|||||||
return <Text>{id}</Text>
|
return <Text>{id}</Text>
|
||||||
}) {}
|
}) {}
|
||||||
|
|
||||||
class MemoizedSubComponent extends Memoized.memo(SubComponent) {}
|
class MemoizedSubComponent extends Memo.memo(SubComponent) {}
|
||||||
|
|
||||||
export const Route = createFileRoute("/dev/memo")({
|
export const Route = createFileRoute("/dev/memo")({
|
||||||
component: RouteComponent,
|
component: RouteComponent,
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import * as Domain from "@/domain"
|
|||||||
import { Box, Button, Callout, Flex, IconButton, Text, TextArea } from "@radix-ui/themes"
|
import { Box, Button, Callout, Flex, IconButton, Text, TextArea } from "@radix-ui/themes"
|
||||||
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
||||||
import { Chunk, Effect, Match, Option, ParseResult, Ref, Runtime, Schema, SubscriptionRef } from "effect"
|
import { Chunk, Effect, Match, Option, ParseResult, Ref, Runtime, Schema, SubscriptionRef } from "effect"
|
||||||
import { Component, Memoized } from "effect-fc"
|
import { Component, Memo } from "effect-fc"
|
||||||
import { Hooks } from "effect-fc/hooks"
|
import { Hooks } from "effect-fc/hooks"
|
||||||
import { SubscriptionSubRef } from "effect-fc/types"
|
import { SubscriptionSubRef } from "effect-fc/types"
|
||||||
import { FaArrowDown, FaArrowUp } from "react-icons/fa"
|
import { FaArrowDown, FaArrowUp } from "react-icons/fa"
|
||||||
@@ -123,5 +123,5 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
|
|||||||
</Flex>
|
</Flex>
|
||||||
)
|
)
|
||||||
}).pipe(
|
}).pipe(
|
||||||
Memoized.memo
|
Memo.memo
|
||||||
) {}
|
) {}
|
||||||
|
|||||||
Reference in New Issue
Block a user