@ngxtm/devkit 3.0.3 → 3.2.0

package/skills/react-modernization/resources/implementation-playbook.md

@@ -0,0 +1,512 @@
+# React Modernization Implementation Playbook
+
+This file contains detailed patterns, checklists, and code samples referenced by the skill.
+
+# React Modernization
+
+Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
+
+## When to Use This Skill
+
+- Upgrading React applications to latest versions
+- Migrating class components to functional components with hooks
+- Adopting concurrent React features (Suspense, transitions)
+- Applying codemods for automated refactoring
+- Modernizing state management patterns
+- Updating to TypeScript
+- Improving performance with React 18+ features
+
+## Version Upgrade Path
+
+### React 16 → 17 → 18
+
+**Breaking Changes by Version:**
+
+**React 17:**
+- Event delegation changes
+- No event pooling
+- Effect cleanup timing
+- JSX transform (no React import needed)
+
+**React 18:**
+- Automatic batching
+- Concurrent rendering
+- Strict Mode changes (double invocation)
+- New root API
+- Suspense on server
+
+## Class to Hooks Migration
+
+### State Management
+```javascript
+// Before: Class component
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0,
+      name: ''
+    };
+  }
+
+  increment = () => {
+    this.setState({ count: this.state.count + 1 });
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Count: {this.state.count}</p>
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    );
+  }
+}
+
+// After: Functional component with hooks
+function Counter() {
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState('');
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+### Lifecycle Methods to Hooks
+```javascript
+// Before: Lifecycle methods
+class DataFetcher extends React.Component {
+  state = { data: null, loading: true };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id) {
+      this.fetchData();
+    }
+  }
+
+  componentWillUnmount() {
+    this.cancelRequest();
+  }
+
+  fetchData = async () => {
+    const data = await fetch(`/api/${this.props.id}`);
+    this.setState({ data, loading: false });
+  };
+
+  cancelRequest = () => {
+    // Cleanup
+  };
+
+  render() {
+    if (this.state.loading) return <div>Loading...</div>;
+    return <div>{this.state.data}</div>;
+  }
+}
+
+// After: useEffect hook
+function DataFetcher({ id }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(`/api/${id}`);
+        const result = await response.json();
+
+        if (!cancelled) {
+          setData(result);
+          setLoading(false);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.error(error);
+        }
+      }
+    };
+
+    fetchData();
+
+    // Cleanup function
+    return () => {
+      cancelled = true;
+    };
+  }, [id]); // Re-run when id changes
+
+  if (loading) return <div>Loading...</div>;
+  return <div>{data}</div>;
+}
+```
+
+### Context and HOCs to Hooks
+```javascript
+// Before: Context consumer and HOC
+const ThemeContext = React.createContext();
+
+class ThemedButton extends React.Component {
+  static contextType = ThemeContext;
+
+  render() {
+    return (
+      <button style={{ background: this.context.theme }}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+
+// After: useContext hook
+function ThemedButton({ children }) {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <button style={{ background: theme }}>
+      {children}
+    </button>
+  );
+}
+
+// Before: HOC for data fetching
+function withUser(Component) {
+  return class extends React.Component {
+    state = { user: null };
+
+    componentDidMount() {
+      fetchUser().then(user => this.setState({ user }));
+    }
+
+    render() {
+      return <Component {...this.props} user={this.state.user} />;
+    }
+  };
+}
+
+// After: Custom hook
+function useUser() {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    fetchUser().then(setUser);
+  }, []);
+
+  return user;
+}
+
+function UserProfile() {
+  const user = useUser();
+  if (!user) return <div>Loading...</div>;
+  return <div>{user.name}</div>;
+}
+```
+
+## React 18 Concurrent Features
+
+### New Root API
+```javascript
+// Before: React 17
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// After: React 18
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+### Automatic Batching
+```javascript
+// React 18: All updates are batched
+function handleClick() {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // Only one re-render (batched)
+}
+
+// Even in async:
+setTimeout(() => {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // Still batched in React 18!
+}, 1000);
+
+// Opt out if needed
+import { flushSync } from 'react-dom';
+
+flushSync(() => {
+  setCount(c => c + 1);
+});
+// Re-render happens here
+setFlag(f => !f);
+// Another re-render
+```
+
+### Transitions
+```javascript
+import { useState, useTransition } from 'react';
+
+function SearchResults() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isPending, startTransition] = useTransition();
+
+  const handleChange = (e) => {
+    // Urgent: Update input immediately
+    setQuery(e.target.value);
+
+    // Non-urgent: Update results (can be interrupted)
+    startTransition(() => {
+      setResults(searchResults(e.target.value));
+    });
+  };
+
+  return (
+    <>
+      <input value={query} onChange={handleChange} />
+      {isPending && <Spinner />}
+      <Results data={results} />
+    </>
+  );
+}
+```
+
+### Suspense for Data Fetching
+```javascript
+import { Suspense } from 'react';
+
+// Resource-based data fetching (with React 18)
+const resource = fetchProfileData();
+
+function ProfilePage() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <ProfileDetails />
+      <Suspense fallback={<Loading />}>
+        <ProfileTimeline />
+      </Suspense>
+    </Suspense>
+  );
+}
+
+function ProfileDetails() {
+  // This will suspend if data not ready
+  const user = resource.user.read();
+  return <h1>{user.name}</h1>;
+}
+
+function ProfileTimeline() {
+  const posts = resource.posts.read();
+  return <Timeline posts={posts} />;
+}
+```
+
+## Codemods for Automation
+
+### Run React Codemods
+```bash
+# Install jscodeshift
+npm install -g jscodeshift
+
+# React 16.9 codemod (rename unsafe lifecycle methods)
+npx react-codeshift <transform> <path>
+
+# Example: Rename UNSAFE_ methods
+npx react-codeshift --parser=tsx \
+  --transform=react-codeshift/transforms/rename-unsafe-lifecycles.js \
+  src/
+
+# Update to new JSX Transform (React 17+)
+npx react-codeshift --parser=tsx \
+  --transform=react-codeshift/transforms/new-jsx-transform.js \
+  src/
+
+# Class to Hooks (third-party)
+npx codemod react/hooks/convert-class-to-function src/
+```
+
+### Custom Codemod Example
+```javascript
+// custom-codemod.js
+module.exports = function(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Find setState calls
+  root.find(j.CallExpression, {
+    callee: {
+      type: 'MemberExpression',
+      property: { name: 'setState' }
+    }
+  }).forEach(path => {
+    // Transform to useState
+    // ... transformation logic
+  });
+
+  return root.toSource();
+};
+
+// Run: jscodeshift -t custom-codemod.js src/
+```
+
+## Performance Optimization
+
+### useMemo and useCallback
+```javascript
+function ExpensiveComponent({ items, filter }) {
+  // Memoize expensive calculation
+  const filteredItems = useMemo(() => {
+    return items.filter(item => item.category === filter);
+  }, [items, filter]);
+
+  // Memoize callback to prevent child re-renders
+  const handleClick = useCallback((id) => {
+    console.log('Clicked:', id);
+  }, []); // No dependencies, never changes
+
+  return (
+    <List items={filteredItems} onClick={handleClick} />
+  );
+}
+
+// Child component with memo
+const List = React.memo(({ items, onClick }) => {
+  return items.map(item => (
+    <Item key={item.id} item={item} onClick={onClick} />
+  ));
+});
+```
+
+### Code Splitting
+```javascript
+import { lazy, Suspense } from 'react';
+
+// Lazy load components
+const Dashboard = lazy(() => import('./Dashboard'));
+const Settings = lazy(() => import('./Settings'));
+
+function App() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/settings" element={<Settings />} />
+      </Routes>
+    </Suspense>
+  );
+}
+```
+
+## TypeScript Migration
+
+```typescript
+// Before: JavaScript
+function Button({ onClick, children }) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+// After: TypeScript
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+function Button({ onClick, children }: ButtonProps) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+// Generic components
+interface ListProps<T> {
+  items: T[];
+  renderItem: (item: T) => React.ReactNode;
+}
+
+function List<T>({ items, renderItem }: ListProps<T>) {
+  return <>{items.map(renderItem)}</>;
+}
+```
+
+## Migration Checklist
+
+```markdown
+### Pre-Migration
+- [ ] Update dependencies incrementally (not all at once)
+- [ ] Review breaking changes in release notes
+- [ ] Set up testing suite
+- [ ] Create feature branch
+
+### Class → Hooks Migration
+- [ ] Identify class components to migrate
+- [ ] Start with leaf components (no children)
+- [ ] Convert state to useState
+- [ ] Convert lifecycle to useEffect
+- [ ] Convert context to useContext
+- [ ] Extract custom hooks
+- [ ] Test thoroughly
+
+### React 18 Upgrade
+- [ ] Update to React 17 first (if needed)
+- [ ] Update react and react-dom to 18
+- [ ] Update @types/react if using TypeScript
+- [ ] Change to createRoot API
+- [ ] Test with StrictMode (double invocation)
+- [ ] Address concurrent rendering issues
+- [ ] Adopt Suspense/Transitions where beneficial
+
+### Performance
+- [ ] Identify performance bottlenecks
+- [ ] Add React.memo where appropriate
+- [ ] Use useMemo/useCallback for expensive operations
+- [ ] Implement code splitting
+- [ ] Optimize re-renders
+
+### Testing
+- [ ] Update test utilities (React Testing Library)
+- [ ] Test with React 18 features
+- [ ] Check for warnings in console
+- [ ] Performance testing
+```
+
+## Resources
+
+- **references/breaking-changes.md**: Version-specific breaking changes
+- **references/codemods.md**: Codemod usage guide
+- **references/hooks-migration.md**: Comprehensive hooks patterns
+- **references/concurrent-features.md**: React 18 concurrent features
+- **assets/codemod-config.json**: Codemod configurations
+- **assets/migration-checklist.md**: Step-by-step checklist
+- **scripts/apply-codemods.sh**: Automated codemod script
+
+## Best Practices
+
+1. **Incremental Migration**: Don't migrate everything at once
+2. **Test Thoroughly**: Comprehensive testing at each step
+3. **Use Codemods**: Automate repetitive transformations
+4. **Start Simple**: Begin with leaf components
+5. **Leverage StrictMode**: Catch issues early
+6. **Monitor Performance**: Measure before and after
+7. **Document Changes**: Keep migration log
+
+## Common Pitfalls
+
+- Forgetting useEffect dependencies
+- Over-using useMemo/useCallback
+- Not handling cleanup in useEffect
+- Mixing class and functional patterns
+- Ignoring StrictMode warnings
+- Breaking change assumptions

package/skills/react-native-architecture/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: react-native-architecture
+description: Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
+---
+
+# React Native Architecture
+
+Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.
+
+## Use this skill when
+
+- Starting a new React Native or Expo project
+- Implementing complex navigation patterns
+- Integrating native modules and platform APIs
+- Building offline-first mobile applications
+- Optimizing React Native performance
+- Setting up CI/CD for mobile releases
+
+## Do not use this skill when
+
+- The task is unrelated to react native architecture
+- You need a different domain or tool outside this scope
+
+## Instructions
+
+- Clarify goals, constraints, and required inputs.
+- Apply relevant best practices and validate outcomes.
+- Provide actionable steps and verification.
+- If detailed examples are required, open `resources/implementation-playbook.md`.
+
+## Resources
+
+- `resources/implementation-playbook.md` for detailed patterns and examples.