improved init command with typescript scaffolding (#24)

improved init command with typescript scaffolding

README.md

@@ -41,6 +41,18 @@ First, setup your project using `klap init`:
 npx klap init
 ```
 
+**Prefer Typescript Setup ?** `init` using `ts` argument:
+
+```bash
+npx klap init ts
+```
+
+**Want to use JSX with Typescript?** `init` using `tsx` argument:
+
+```bash
+npx klap init tsx
+```
+
 This will create a minimal `package.json` with `source`, `main`, `module` and `browser` entries and the `build`, `watch` and `start` scripts.
 
 ```jsonc

cli.js

@@ -1,24 +1,24 @@
 #!/usr/bin/env node
-const path = require('path')
-const { init, klap, read, log, error, info } = require('./dist')
-const { name, version } = require('./package.json')
-const command = process.argv[2]
+const path = require('path');
+const { init, klap, read, log, error, info } = require('./dist');
+const { name, version } = require('./package.json');
+const command = process.argv[2];
 
-;(async () => {
+(async () => {
   switch (command) {
     case 'init':
-      log(`${name}@${version} - Initializing your package...`)
-      await init(command)
-      break
+      log(`${name}@${version} - Initializing your package...`);
+      await init(command);
+      break;
     case 'build':
     case 'watch':
     case 'start':
-      log(`${name}@${version} - Working on ${command}...`)
+      log(`${name}@${version} - Working on ${command}...`);
       const pkg = JSON.parse(
         await read(path.join(process.cwd(), 'package.json'))
-      )
-      await klap(command, pkg)
-      break
+      );
+      await klap(command, pkg);
+      break;
     case 'help':
       info(`
 ${name}@${version} - Usage
@@ -27,9 +27,9 @@ ${name}@${version} - Usage
   klap build - bundle your package, in production mode.
   klap watch - bundle your package and watch for changes.
   klap start - start a development server.
-`)
-      break
+`);
+      break;
     default:
-      error('No Such Command !!')
+      error('No Such Command !!');
   }
-})()
+})();

examples/react-component/package.json

@@ -1,27 +1,27 @@
 {
-	"name": "react-component",
-	"version": "0.0.0",
-	"private": true,
-	"files": [
-		"dist"
-	],
-	"main": "dist/index.cjs.js",
-	"module": "dist/index.esm.js",
-	"source": "src/index.js",
-	"browser": "dist/index.js",
-	"scripts": {
-		"build": "klap build",
-		"start": "klap start",
-		"watch": "klap watch"
-	},
-	"dependencies": {
-		"react": "*",
-		"react-dom": "*"
-	},
-	"devDependencies": {
-		"klap": "2.1.0"
-	},
-	"klap": {
-		"example": "public/index.js"
-	}
+  "name": "react-component",
+  "version": "0.0.0",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "source": "src/index.js",
+  "browser": "dist/index.js",
+  "scripts": {
+    "build": "klap build",
+    "start": "klap start",
+    "watch": "klap watch"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "klap": "2.1.0"
+  },
+  "klap": {
+    "example": "public/index.js"
+  }
 }

examples/react-component/public/index.js

@@ -1,5 +1,8 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { Button } from '../src'
+import React from 'react';
+import { render } from 'react-dom';
+import { Button } from '../src';
 
-render(<Button onClick={e => console.log(e)} />, document.getElementById('root'))
+render(
+  <Button onClick={e => console.log(e)} />,
+  document.getElementById('root')
+);

examples/react-component/src/index.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import React from 'react';
 
 const Button = ({ onClick }) => {
   return (
     <button class="button" onClick={onClick}>
       Hello Button
     </button>
-  )
-}
+  );
+};
 
-export { Button }
+export { Button };