@well-do-it-too/ts-universal-package
v1.0.7
Published
A universal TypeScript package template for creating libraries compatible with React, Node.js, and web projects
Downloads
9
Maintainers
well-do-it-tooReadme
ts-universal-package
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.
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
npm install @well-do-it-too/ts-universal-packageUsage
In a TypeScript/JavaScript project
import { greet, doubleNumber, getMyName } from '@well-do-it-too/ts-universal-package';
console.log(greet('World')); // Output: Hello, World!
console.log(doubleNumber(5)); // Output: 10
console.log(getMyName()); // Output: Well Do It TooIn a browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Package Demo</title>
</head>
<body>
<h1>Universal Package Demo</h1>
<div id="result"></div>
<script src="https://unpkg.com/@well-do-it-too/ts-universal-package"></script>
<script>
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>
`;
</script>
</body>
</html>Integration Guide
React Project
Install the package:
npm install @well-do-it-too/ts-universal-packageImport and use in your React component:
import React from 'react'; import { greet, doubleNumber } from '@well-do-it-too/ts-universal-package'; function MyComponent() { return ( <div> <h1>{greet('React')}</h1> <p>Double of 10 is: {doubleNumber(10)}</p> </div> ); } export default MyComponent;
Node.js Project
Install the package:
npm install @well-do-it-too/ts-universal-packageUse in your Node.js script:
const { greet, doubleNumber } = require('@well-do-it-too/ts-universal-package'); 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Project Demo</title>
</head>
<body>
<div id="result"></div>
<script src="https://unpkg.com/@well-do-it-too/ts-universal-package"></script>
<script>
const { greet, doubleNumber } = welldoittoo;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h1>${greet('Web')}</h1>
<p>Double of 15 is: ${doubleNumber(15)}</p>
`;
</script>
</body>
</html>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:
- Clone the repository
- Navigate to the
example/directory - Open the HTML file in a browser or run the Node.js script
Development
Clone the repository:
git clone https://github.com/Well-do-it-too/ts-universal-package.git cd ts-universal-packageInstall dependencies:
pnpm installRun tests:
pnpm testBuild the package:
pnpm buildRun pre-commit checks:
pnpm pre-commit
Using Make commands
Run these commands with make <command>:
makeormake 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.yamlpnpm rmdist: Remove the dist folderpnpm build: Build the packagepnpm test: Run testspnpm lint: Run ESLintpnpm format: Format code with Prettierpnpm check: Run linter and Prettier checkspnpm version-up: Update package versionpnpm 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
Developed with ❤️ by Well-do-it-too