Skip to content

Add createLazyCallable implementation and docs #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

flt3150sk
Copy link
Contributor

@flt3150sk flt3150sk commented Jul 12, 2025

🚀 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

Copy link

vercel bot commented Jul 12, 2025

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
Copy link
Contributor Author

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature? lazy dialogs!
1 participant