klap

// 1. Initialize a new project with TypeScript and JSX support // Open your terminal and run: // npx klap init tsx // 2. Create your source file (e.g., src/index.tsx) // This file will be bundled by klap. Klap automatically detects .ts, .tsx, .js, .jsx files. // src/index.tsx import React from 'react'; interface GreeterProps { name: string; } export const Greeter = ({ name }: GreeterProps) => { return <h1>Hello, {name}!</h1>; }; export const sum = (a: number, b: number): number => a + b; // 3. Add a simple usage example for local development (e.g., examples/app.tsx) // This file is used for `npm start` and demonstrates library usage, but isn't bundled into the library itself. // examples/app.tsx import { Greeter, sum } from '../src'; // Adjust path as needed based on your project structure import { createRoot } from 'react-dom/client'; const rootElement = document.getElementById('root'); if (rootElement) { createRoot(rootElement).render( <> <Greeter name="Klap User" /> <p>The sum of 5 and 3 is: {sum(5, 3)}</p> </> ); } else { console.error("Root element not found!"); } // 4. Run the development server to test your example // Open your terminal in the project root and run: // npm start // 5. Build your library for distribution // Open your terminal in the project root and run: // npm run build // This command will output bundled files (cjs, esm, umd) to the 'dist' directory, // as configured by the 'main', 'module', and 'browser' fields that 'klap init' sets up in your package.json.