e8fbfb14c1
Add coexistence checks to all enqueue methods to prevent loading both React and Grid.js assets simultaneously. Changes: - ReactAdmin.php: Only enqueue React assets when ?react=1 - Init.php: Skip Grid.js when React active on admin pages - Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0 - Customer.php, Product.php, License.php: Add coexistence checks Now the toggle between Classic and React versions works correctly. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { INTERNAL_Snapshot } from './vanilla';
|
|
declare type Options = {
|
|
sync?: boolean;
|
|
};
|
|
/**
|
|
* useSnapshot
|
|
*
|
|
* Create a local snapshot that catches changes. This hook actually returns a wrapped snapshot in a proxy for
|
|
* render optimization instead of a plain object compared to `snapshot()` method.
|
|
* Rule of thumb: read from snapshots, mutate the source.
|
|
* The component will only re-render when the parts of the state you access have changed, it is render-optimized.
|
|
*
|
|
* @example A
|
|
* function Counter() {
|
|
* const snap = useSnapshot(state)
|
|
* return (
|
|
* <div>
|
|
* {snap.count}
|
|
* <button onClick={() => ++state.count}>+1</button>
|
|
* </div>
|
|
* )
|
|
* }
|
|
*
|
|
* [Notes]
|
|
* Every object inside your proxy also becomes a proxy (if you don't use "ref"), so you can also use them to create
|
|
* the local snapshot as seen on example B.
|
|
*
|
|
* @example B
|
|
* function ProfileName() {
|
|
* const snap = useSnapshot(state.profile)
|
|
* return (
|
|
* <div>
|
|
* {snap.name}
|
|
* </div>
|
|
* )
|
|
* }
|
|
*
|
|
* Beware that you still can replace the child proxy with something else so it will break your snapshot. You can see
|
|
* above what happens with the original proxy when you replace the child proxy.
|
|
*
|
|
* > console.log(state)
|
|
* { profile: { name: "valtio" } }
|
|
* > childState = state.profile
|
|
* > console.log(childState)
|
|
* { name: "valtio" }
|
|
* > state.profile.name = "react"
|
|
* > console.log(childState)
|
|
* { name: "react" }
|
|
* > state.profile = { name: "new name" }
|
|
* > console.log(childState)
|
|
* { name: "react" }
|
|
* > console.log(state)
|
|
* { profile: { name: "new name" } }
|
|
*
|
|
* `useSnapshot()` depends on the original reference of the child proxy so if you replace it with a new one, the component
|
|
* that is subscribed to the old proxy won't receive new updates because it is still subscribed to the old one.
|
|
*
|
|
* In this case we recommend the example C or D. On both examples you don't need to worry with re-render,
|
|
* because it is render-optimized.
|
|
*
|
|
* @example C
|
|
* const snap = useSnapshot(state)
|
|
* return (
|
|
* <div>
|
|
* {snap.profile.name}
|
|
* </div>
|
|
* )
|
|
*
|
|
* @example D
|
|
* const { profile } = useSnapshot(state)
|
|
* return (
|
|
* <div>
|
|
* {profile.name}
|
|
* </div>
|
|
* )
|
|
*/
|
|
export declare function useSnapshot<T extends object>(proxyObject: T, options?: Options): INTERNAL_Snapshot<T>;
|
|
export {};
|