Skip to content

Conversation

@konard
Copy link
Member

@konard konard commented Sep 10, 2025

🚀 Summary

This pull request adds comprehensive built-in module support for React.js and ink (React for CLI applications) to use-m, enabling developers to use these popular frameworks without explicit dependency management.

📋 Issue Reference

Fixes #28

✨ Features Added

  • React.js Support: Built-in modules for react, react-dom, and react/jsx-runtime
  • ink Support: Built-in module for ink (React for CLI applications)
  • Environment Detection: Automatic browser vs Node.js environment detection
  • CDN Fallbacks: Browser environments automatically fall back to CDN loading (esm.sh)
  • Error Handling: Graceful error messages when dependencies aren't installed

🔧 Implementation Details

Built-in Module Support

// React.js usage - works in both browser and Node.js
const React = await use('react');
const ReactDOM = await use('react-dom');

// ink usage - Node.js only
const { render, Text, Box } = await use('ink');

Environment-Specific Behavior

  • Browser: Tries global React/ReactDOM first, falls back to esm.sh CDN
  • Node.js: Imports from locally installed packages with helpful error messages
  • ink: Node.js-only (returns appropriate error for browser environments)

📁 Files Added/Modified

Core Implementation

  • use.js, use.mjs, use.cjs - Added React.js and ink to supportedBuiltins
  • package.json - Version bump to 8.14.0

Examples & Documentation

  • examples/react/ - Node.js and browser React.js examples
  • examples/ink/ - CLI application examples with interactive features
  • README.md - Updated with React.js and ink usage documentation

Testing

  • tests/builtin-react.test.* - Comprehensive React.js built-in module tests
  • tests/builtin-ink.test.* - ink built-in module tests with environment detection

🎯 Usage Examples

React.js in Browser

const { use } = eval(await (await fetch('https://unpkg.com/use-m/use.js')).text());
const React = await use('react');
const ReactDOM = await use('react-dom');

const App = React.createElement('h1', null, 'Hello from React with use-m!');
ReactDOM.render(App, document.getElementById('root'));

React.js in Node.js (SSR)

import { use } from 'use-m';

const React = await use('react');
const ReactDOMServer = await use('react-dom/server');

const App = React.createElement('h1', null, 'Hello from React with use-m!');
const html = ReactDOMServer.renderToString(App);
console.log(html);

ink CLI Applications

#!/usr/bin/env node
import { use } from 'use-m';

const React = await use('react');
const { render, Text } = await use('ink');

const CliApp = () => React.createElement(Text, { color: 'green' }, 
  '🚀 Hello from ink with use-m!'
);

render(React.createElement(CliApp));

✅ Testing

  • All existing tests continue to pass
  • New tests cover React.js and ink built-in module functionality
  • Tests handle missing dependencies gracefully
  • Environment-specific behavior is properly tested

💡 Benefits

  • Zero Configuration: No need to manage React.js or ink dependencies explicitly
  • Cross-Environment: Same API works in browser and Node.js with environment-appropriate behavior
  • Educational: Perfect for tutorials, examples, and rapid prototyping
  • Self-Contained Scripts: Create React.js/ink applications in single .mjs files
  • Version Consistency: Ensures consistent React.js versions across environments

🔄 Migration

This is a purely additive change - no breaking changes to existing functionality. Users can immediately start using:

const React = await use('react');
const ReactDOM = await use('react-dom'); 
const { render, Text } = await use('ink');

🤖 Generated with Claude Code

Adding CLAUDE.md with task information for AI processing.
This file will be removed when the task is complete.

Issue: #28
@konard konard self-assigned this Sep 10, 2025
konard and others added 2 commits September 10, 2025 07:26
This commit implements support for React.js and ink (React for CLI) as built-in modules in use-m, addressing issue #28.

## Features Added

- **React.js Support**: Built-in modules for `react`, `react-dom`, and `react/jsx-runtime`
- **ink Support**: Built-in module for `ink` (React for CLI applications)
- **Environment Detection**: Automatic browser vs Node.js environment detection
- **CDN Fallbacks**: Browser environments automatically fall back to CDN loading
- **Error Handling**: Graceful error messages when dependencies aren't installed

## Implementation Details

- Added React.js and ink modules to `supportedBuiltins` in all use-m variants (use.js, use.mjs, use.cjs)
- Browser environments try global React/ReactDOM first, then fall back to esm.sh CDN
- Node.js environments import from locally installed packages with helpful error messages
- ink is Node.js-only (returns null for browser environments)

## Examples and Tests

- Added comprehensive examples for both React.js and ink usage
- Created browser and Node.js React examples with different rendering approaches
- Added interactive ink CLI examples with user input handling
- Comprehensive test coverage for both React.js and ink built-in modules
- Tests handle environments where packages aren't installed gracefully

## Documentation

- Updated README.md with React.js and ink usage examples
- Added dedicated example directories with detailed READMEs
- Updated package version to 8.14.0 for this feature release

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@konard konard changed the title [WIP] Support React.js and ink (may be contexts needed) Add React.js and ink built-in module support Sep 10, 2025
@konard konard marked this pull request as ready for review September 10, 2025 04:37
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.

Support React.js and ink (may be contexts needed)

2 participants