Add createLazyCallable implementation and docs

[flt3150sk]

🚀 Feature: Implement createLazyCallable

Description

Implemented the createLazyCallable feature proposed in GitHub issue #55.
This feature allows for more concise syntax when using React lazy loading with react-call.

Motivation

Current approach:

const MyDialog = createCallable(lazy(() => import('./MyDialog')));

New approach:

const MyDialog = createLazyCallable(() => import('./MyDialog'));

This change simplifies lazy loading syntax and improves developer experience.

Changes

• src/createLazyCallable/index.tsx - New createLazyCallable function implementation
• src/main.ts - Added createLazyCallable export
• tests/src/lazy.test.tsx - Comprehensive test suite added
• demo/src/CallableScenes/YourLazy.tsx - Demo component added
• README.md - Added Lazy loading section

Usage Example

import { createLazyCallable } from 'react-call'

// Simple lazy loading
const MyDialog = createLazyCallable(() => import('./MyDialog'));

// With unmountingDelay option
const HeavyForm = createLazyCallable(() => import('./HeavyForm'), 500);

// Usage remains the same
const result = await MyDialog.call({ message: 'Hello!' })

Screenshots / Demos

Demo Site Functionality

createLazyCallable-site.mov

Bundle Analyzer Verification

createLazyCallable-analyze.mov

• Main bundle: index-xxx.js
• Lazy loaded chunk: YourLazy-xxx.js ← Evidence of code splitting

Related Issues

Fixes #55

Checklist

• Implementation completed
• TypeScript type definitions added
• Test suite created (all 29 tests passing)
• Demo app implementation example added
• Documentation updated
• Build verification (bundle splitting confirmed)

Notes for Reviewers

• Maintains full backward compatibility with existing createCallable API
• Requires default export to comply with React.lazy requirements
• Bundle analysis confirms lazy loading works correctly
• All tests pass and type safety is ensured
• demo/src/CallableScenes/YourLazy.tsx and demo site additions are for functionality verification and bundle analysis
  • Can be removed if not needed for the actual release

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-call	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 12, 2025 2:55am

[flt3150sk]

@desko27

I created this PR in response to the related issue, but after reconsidering the actual use case, I'm starting to think that this change may not be strictly necessary.

If you feel that the priority is low, please feel free to close it.

I'd be happy if you could take a quick look whenever you have time.
Thank you!

[desko27]

Hey @flt3150sk! Sorry for the late reply. I forgot to mention in #55 that I’d rather not increase the bundle size unless really needed 🙏🏻

That said, adding a note to the README to explain how to do lazy loading using the official React API sounds great.

Happy to merge a PR for that — thanks a lot for your contributions, really appreciated!

[flt3150sk]

@desko27

I completely agree about not increasing the bundle size unless really necessary.
I created a PR that only adds documentation. #64

I’ll close this PR. Thanks!