Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/t34-dev/ts-package-starter
A universal TypeScript package template for creating libraries compatible with React, Node.js, and web projects
https://github.com/t34-dev/ts-package-starter
eslint node package prettier react starter ts typescript web
Last synced: about 1 month ago
JSON representation
A universal TypeScript package template for creating libraries compatible with React, Node.js, and web projects
- Host: GitHub
- URL: https://github.com/t34-dev/ts-package-starter
- Owner: t34-dev
- License: isc
- Created: 2024-07-31T09:18:31.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-05T14:18:14.000Z (3 months ago)
- Last Synced: 2024-10-05T17:05:03.259Z (about 1 month ago)
- Topics: eslint, node, package, prettier, react, starter, ts, typescript, web
- Language: JavaScript
- Homepage: https://t34-dev.github.io/ts-package-starter/
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://copyfree.org)
# ts-package-starter
A universal TypeScript package template for creating libraries that can be used in React, Node.js, and web projects.
## Features
- TypeScript support
- Compatible with browser and Node.js environments
- Easy to use and extend
- Includes example functions
- Configured with ESLint, Prettier, and Husky for code quality
- Uses Rollup for building and bundling
- Vitest for testing
## Demo
You can see a live demo of this package in action at our [GitHub Pages demo site](https://t34-dev.github.io/ts-package-starter/).
This demo showcases the basic functionality of the package, including:
- Greeting function
- Number doubling function
- Package name retrieval
Feel free to inspect the source code of the demo page for an example of how to integrate this package into your web projects.
## Installation
```bash
npm install @t34-dev/ts-package-starter
```
## Usage
### In a TypeScript/JavaScript project
```typescript
import { greet, doubleNumber, getMyName } from '@t34-dev/ts-package-starter';
console.log(greet('World')); // Output: Hello, World!
console.log(doubleNumber(5)); // Output: 10
console.log(getMyName()); // Output: Well Do It Too
```
### In a browser
```html
Universal Package Demo
Universal Package Demo
const resultDiv = document.getElementById('result');
const greeting = welldoittoo.greet('Browser');
const doubledNumber = welldoittoo.doubleNumber(21);
const name = welldoittoo.getMyName();
resultDiv.innerHTML = `
<p>${greeting}</p>
<p>Double of 21 is: ${doubledNumber}</p>
<p>Name: ${name}</p>
`;
```
## Integration Guide
### React Project
1. Install the package:
```bash
npm install @t34-dev/ts-package-starter
```
2. Import and use in your React component:
```jsx
import React from 'react';
import { greet, doubleNumber } from '@t34-dev/ts-package-starter';
function MyComponent() {
return (
{greet('React')}
Double of 10 is: {doubleNumber(10)}
);
}
export default MyComponent;
```
### Node.js Project
1. Install the package:
```bash
npm install @t34-dev/ts-package-starter
```
2. Use in your Node.js script:
```javascript
const { greet, doubleNumber } = require('@t34-dev/ts-package-starter');
console.log(greet('Node.js'));
console.log(`Double of 7 is: ${doubleNumber(7)}`);
```
### Web Project (via CDN)
You can include the package directly in your HTML file using a CDN:
```html
Web Project Demo
const { greet, doubleNumber } = welldoittoo;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h1>${greet('Web')}</h1>
<p>Double of 15 is: ${doubleNumber(15)}</p>
`;
```
## Examples
You can find example usage of this package in the `example/` directory of this repository. This includes:
- Basic HTML usage
- Node.js script example
- React component example
To run the examples locally:
1. Clone the repository
2. Navigate to the `example/` directory
3. Open the HTML file in a browser or run the Node.js script
## Development
1. Clone the repository:
```bash
git clone https://github.com/t34-dev/ts-package-starter.git
cd ts-package-starter
```
2. Install dependencies:
```bash
pnpm install
```
3. Run tests:
```bash
pnpm test
```
4. Build the package:
```bash
pnpm build
```
5. Run pre-commit checks:
```bash
pnpm pre-commit
```
### Using Make commands
Run these commands with `make `:
- `make` or `make help`: Shows all available Make commands.
- `make rmdist`: Removes the dist folder.
- `make build`: Builds the project (includes removing dist folder).
- `make test`: Runs the test suite.
- `make version-up`: Updates the project version.
- `make pre`: Runs pre-commit checks.
#### Git Tag Management
The project includes additional commands for managing Git tags:
- `make tag`: Displays the latest Git tag.
- `make tag-new`: Displays the next Git tag that would be created.
- `make tag-up`: Creates and pushes a new Git tag. Note: This command can only be run from the 'main' branch.
## Scripts
- `pnpm clean`: Remove node_modules and pnpm-lock.yaml
- `pnpm rmdist`: Remove the dist folder
- `pnpm build`: Build the package
- `pnpm test`: Run tests
- `pnpm lint`: Run ESLint
- `pnpm format`: Format code with Prettier
- `pnpm check`: Run linter and Prettier checks
- `pnpm version-up`: Update package version
- `pnpm pre-commit`: Run pre-commit checks
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the ISC License.
## Links
- [GitHub Repository](https://github.com/t34-dev/ts-package-starter)
- [npm Package](https://www.npmjs.com/package/@t34-dev/ts-package-starter)
- [Demo](https://t34-dev.github.io/ts-package-starter/)
---
Developed with ❤️ by [T34](https://github.com/t34-dev)