@jburnhams/tube-ts 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +322 -0
- package/dist/browser/index.css +988 -0
- package/dist/browser/index.css.map +1 -0
- package/dist/browser/index.global.js +82151 -0
- package/dist/browser/index.global.js.map +1 -0
- package/dist/bundles/index.css +988 -0
- package/dist/bundles/index.css.map +1 -0
- package/dist/bundles/index.esm.js +82137 -0
- package/dist/bundles/index.esm.js.map +1 -0
- package/dist/index.cjs +854 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +93 -0
- package/dist/index.d.ts +93 -0
- package/dist/index.js +841 -0
- package/dist/index.js.map +1 -0
- package/package.json +81 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Jonathan Burnhams
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
# JavaScript/TypeScript Library Template
|
|
2
|
+
|
|
3
|
+
A production-ready template for creating npm libraries with TypeScript, comprehensive testing, and automated CI/CD.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **TypeScript** with strict mode and multiple build targets
|
|
8
|
+
- **Multi-format distribution**: ESM, CommonJS, and Browser bundles
|
|
9
|
+
- **Testing**: Node.js built-in test framework with coverage reporting
|
|
10
|
+
- **Browser testing**: Automated browser bundle validation
|
|
11
|
+
- **GitHub Actions CI/CD**:
|
|
12
|
+
- Multi-version Node.js testing (20.x, 22.x, 24.x, 25.x)
|
|
13
|
+
- Automated version bumping and releases
|
|
14
|
+
- NPM publishing with OIDC (no stored credentials)
|
|
15
|
+
- GitHub Pages deployment for documentation
|
|
16
|
+
- Dependency review for security
|
|
17
|
+
- **Bundle size enforcement**: Automated size budget checks
|
|
18
|
+
- **Smoke tests**: Validate ESM and CJS exports
|
|
19
|
+
|
|
20
|
+
## Getting Started
|
|
21
|
+
|
|
22
|
+
### 1. Clone this template
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
git clone <this-repo> my-new-library
|
|
26
|
+
cd my-new-library
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### 2. Customize for your project
|
|
30
|
+
|
|
31
|
+
Update the following in `package.json`:
|
|
32
|
+
- `name`: Your library name
|
|
33
|
+
- `version`: Start version (e.g., "0.1.0")
|
|
34
|
+
- `description`: What your library does
|
|
35
|
+
- `repository.url`: Your GitHub repository URL
|
|
36
|
+
- `keywords`: Relevant keywords
|
|
37
|
+
- `author`: Your name
|
|
38
|
+
- `dependencies`: Add any runtime dependencies you need
|
|
39
|
+
|
|
40
|
+
Update bundle size limits in `scripts/check-bundle-size.mjs` if needed:
|
|
41
|
+
- `BUNDLE_LIMIT`: Default 100KB for browser bundle
|
|
42
|
+
- `GZIP_LIMIT`: Default 50KB for gzipped bundle
|
|
43
|
+
- `ESM_LIMIT`: Default 200KB for ESM bundle
|
|
44
|
+
|
|
45
|
+
### 3. Update exports
|
|
46
|
+
|
|
47
|
+
Edit `scripts/smoke-esm.mjs` and `scripts/smoke-cjs.cjs` to match your library's exports.
|
|
48
|
+
|
|
49
|
+
Example:
|
|
50
|
+
```javascript
|
|
51
|
+
// Change this:
|
|
52
|
+
assert.strictEqual(typeof mod.hello, 'function', 'ESM build should export hello');
|
|
53
|
+
|
|
54
|
+
// To match your exports:
|
|
55
|
+
assert.strictEqual(typeof mod.myFunction, 'function', 'ESM build should export myFunction');
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 4. Write your code
|
|
59
|
+
|
|
60
|
+
Replace the example code in `src/index.ts` with your library code.
|
|
61
|
+
Add tests alongside your source files as `*.test.ts`.
|
|
62
|
+
|
|
63
|
+
### 5. Install dependencies
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
npm install
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 6. Build and test
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
# Run all tests (unit + browser)
|
|
73
|
+
npm run test:all
|
|
74
|
+
|
|
75
|
+
# Run just unit tests
|
|
76
|
+
npm test
|
|
77
|
+
|
|
78
|
+
# Run with coverage
|
|
79
|
+
npm run coverage
|
|
80
|
+
|
|
81
|
+
# Build the library
|
|
82
|
+
npm run build
|
|
83
|
+
|
|
84
|
+
# Check bundle sizes
|
|
85
|
+
npm run size
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Project Structure
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
.
|
|
92
|
+
├── .github/workflows/ # GitHub Actions workflows
|
|
93
|
+
│ ├── ci.yml # Continuous integration
|
|
94
|
+
│ ├── release.yml # Version bumping and releases
|
|
95
|
+
│ ├── npm-publish.yml # NPM publishing
|
|
96
|
+
│ ├── github-pages.yml # Documentation deployment
|
|
97
|
+
│ └── dependency-review.yml
|
|
98
|
+
├── scripts/ # Build and utility scripts
|
|
99
|
+
│ ├── clean.mjs # Clean build artifacts
|
|
100
|
+
│ ├── build-bundles.mjs # Generate ESM and browser bundles
|
|
101
|
+
│ ├── build-browser-bundle.js # Package docs
|
|
102
|
+
│ ├── check-bundle-size.mjs # Enforce size budgets
|
|
103
|
+
│ ├── smoke-esm.mjs # Test ESM exports
|
|
104
|
+
│ └── smoke-cjs.cjs # Test CJS exports
|
|
105
|
+
├── src/ # Source code
|
|
106
|
+
│ ├── index.ts # Main entry point
|
|
107
|
+
│ └── *.test.ts # Unit tests
|
|
108
|
+
├── tests/ # Additional tests
|
|
109
|
+
│ └── browser.test.ts # Browser bundle tests
|
|
110
|
+
├── docs/ # Documentation (optional)
|
|
111
|
+
├── tsconfig.*.json # TypeScript configurations
|
|
112
|
+
├── package.json # Project metadata
|
|
113
|
+
└── .gitignore # Git ignore rules
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Available Scripts
|
|
117
|
+
|
|
118
|
+
- `npm run clean` - Remove build artifacts
|
|
119
|
+
- `npm run build` - Build all formats (ESM, CJS, bundles)
|
|
120
|
+
- `npm run build:esm` - Build ESM only
|
|
121
|
+
- `npm run build:cjs` - Build CommonJS only
|
|
122
|
+
- `npm run build:bundles` - Build browser bundles
|
|
123
|
+
- `npm run build:docs` - Build documentation assets
|
|
124
|
+
- `npm test` - Run unit tests
|
|
125
|
+
- `npm run test:browser` - Run browser tests
|
|
126
|
+
- `npm run test:all` - Run all tests
|
|
127
|
+
- `npm run coverage` - Generate coverage report
|
|
128
|
+
- `npm run smoke` - Run smoke tests
|
|
129
|
+
- `npm run size` - Check bundle sizes
|
|
130
|
+
- `npm run prepublishOnly` - Pre-publish checks (runs automatically)
|
|
131
|
+
|
|
132
|
+
## GitHub Actions Setup
|
|
133
|
+
|
|
134
|
+
### Required Secrets
|
|
135
|
+
|
|
136
|
+
For automated releases and NPM publishing, configure these secrets in your GitHub repository:
|
|
137
|
+
|
|
138
|
+
1. **RELEASE_TOKEN**: A GitHub Personal Access Token with `repo` and `packages:write` permissions
|
|
139
|
+
- Go to GitHub Settings → Developer settings → Personal access tokens
|
|
140
|
+
- Create a token with appropriate permissions
|
|
141
|
+
- Add it to your repository secrets as `RELEASE_TOKEN`
|
|
142
|
+
|
|
143
|
+
2. **NPM Publishing**: This template uses OIDC for npm publishing (no token storage required)
|
|
144
|
+
- Configure your npm account for provenance: https://docs.npmjs.com/generating-provenance-statements
|
|
145
|
+
- No additional secrets needed!
|
|
146
|
+
|
|
147
|
+
### Automated Version Bumping
|
|
148
|
+
|
|
149
|
+
Commits to `main` trigger automatic version bumping based on commit messages:
|
|
150
|
+
|
|
151
|
+
- **Patch** (0.0.x): Include `patch`, `fix`, or `fixes` in commit message
|
|
152
|
+
- **Minor** (0.x.0): Include `minor`, `feat`, or `feature` in commit message
|
|
153
|
+
- **Major** (x.0.0): Include `major` or `breaking` in commit message
|
|
154
|
+
- **Pre-release**: Include `rc`, `pre`, `beta`, or `alpha` in commit message
|
|
155
|
+
|
|
156
|
+
Example:
|
|
157
|
+
```bash
|
|
158
|
+
git commit -m "feat: add new feature" # Bumps minor version
|
|
159
|
+
git commit -m "fix: resolve bug" # Bumps patch version
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### GitHub Pages
|
|
163
|
+
|
|
164
|
+
To enable GitHub Pages:
|
|
165
|
+
1. Go to repository Settings → Pages
|
|
166
|
+
2. Set Source to "GitHub Actions"
|
|
167
|
+
3. The workflow will deploy `docs-dist/` to GitHub Pages
|
|
168
|
+
|
|
169
|
+
Add your documentation HTML/assets to a `docs/` directory, and they'll be copied to the deployment.
|
|
170
|
+
|
|
171
|
+
## Distribution Formats
|
|
172
|
+
|
|
173
|
+
### ESM (ES Modules)
|
|
174
|
+
```javascript
|
|
175
|
+
import { hello, Greeter } from 'my-library';
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### CommonJS
|
|
179
|
+
```javascript
|
|
180
|
+
const { hello, Greeter } = require('my-library');
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Browser (IIFE)
|
|
184
|
+
```html
|
|
185
|
+
<script src="https://unpkg.com/my-library/dist/browser/my-library.min.js"></script>
|
|
186
|
+
<script>
|
|
187
|
+
const greeting = MyLibrary.hello('World');
|
|
188
|
+
</script>
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Browser (ESM)
|
|
192
|
+
```html
|
|
193
|
+
<script type="module">
|
|
194
|
+
import { hello } from 'https://unpkg.com/my-library/dist/bundles/my-library.esm.js';
|
|
195
|
+
console.log(hello('World'));
|
|
196
|
+
</script>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
## Testing
|
|
200
|
+
|
|
201
|
+
This template uses Node.js built-in test framework (no Jest, Mocha, etc. required).
|
|
202
|
+
|
|
203
|
+
### Writing Tests
|
|
204
|
+
|
|
205
|
+
Create test files alongside your source code:
|
|
206
|
+
|
|
207
|
+
```typescript
|
|
208
|
+
// src/mymodule.test.ts
|
|
209
|
+
import { describe, it } from 'node:test';
|
|
210
|
+
import assert from 'node:assert';
|
|
211
|
+
import { myFunction } from './mymodule.js';
|
|
212
|
+
|
|
213
|
+
describe('myFunction', () => {
|
|
214
|
+
it('should work correctly', () => {
|
|
215
|
+
assert.strictEqual(myFunction(), 'expected result');
|
|
216
|
+
});
|
|
217
|
+
});
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
### Browser Testing
|
|
221
|
+
|
|
222
|
+
Browser tests validate that your bundles work in browser environments:
|
|
223
|
+
|
|
224
|
+
```typescript
|
|
225
|
+
// tests/browser.test.ts
|
|
226
|
+
import { test } from 'node:test';
|
|
227
|
+
import assert from 'node:assert';
|
|
228
|
+
|
|
229
|
+
test('bundle exports work', async () => {
|
|
230
|
+
const mod = await import('./dist/bundles/my-library.esm.js');
|
|
231
|
+
assert.strictEqual(typeof mod.myFunction, 'function');
|
|
232
|
+
});
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
## Dependencies
|
|
236
|
+
|
|
237
|
+
- **Development**:
|
|
238
|
+
- `typescript` - TypeScript compiler
|
|
239
|
+
- `@types/node` - Node.js type definitions
|
|
240
|
+
- `c8` - Code coverage tool
|
|
241
|
+
- `happy-dom` - Lightweight DOM for browser testing
|
|
242
|
+
|
|
243
|
+
- **Production**: Add your runtime dependencies to `package.json`
|
|
244
|
+
|
|
245
|
+
## Customization
|
|
246
|
+
|
|
247
|
+
### Change Bundle Size Limits
|
|
248
|
+
|
|
249
|
+
Edit `scripts/check-bundle-size.mjs`:
|
|
250
|
+
|
|
251
|
+
```javascript
|
|
252
|
+
const BUNDLE_LIMIT = 100 * 1024; // 100KB
|
|
253
|
+
const GZIP_LIMIT = 50 * 1024; // 50KB
|
|
254
|
+
const ESM_LIMIT = 200 * 1024; // 200KB
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
### Add Linting
|
|
258
|
+
|
|
259
|
+
This template doesn't include ESLint/Prettier by default. To add them:
|
|
260
|
+
|
|
261
|
+
```bash
|
|
262
|
+
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
Then configure `.eslintrc.json` and `.prettierrc` to your preferences.
|
|
266
|
+
|
|
267
|
+
### Customize TypeScript
|
|
268
|
+
|
|
269
|
+
The template includes 5 TypeScript configurations:
|
|
270
|
+
- `tsconfig.base.json` - Shared base configuration
|
|
271
|
+
- `tsconfig.json` - Root config (type checking only)
|
|
272
|
+
- `tsconfig.esm.json` - ESM build
|
|
273
|
+
- `tsconfig.cjs.json` - CommonJS build
|
|
274
|
+
- `tsconfig.tests.json` - Test build
|
|
275
|
+
|
|
276
|
+
Modify these to match your needs (e.g., change target, add paths, etc.).
|
|
277
|
+
|
|
278
|
+
## Publishing
|
|
279
|
+
|
|
280
|
+
### Manual Publishing
|
|
281
|
+
|
|
282
|
+
```bash
|
|
283
|
+
npm run build
|
|
284
|
+
npm test
|
|
285
|
+
npm publish
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
### Automated Publishing
|
|
289
|
+
|
|
290
|
+
When you create a GitHub release (triggered automatically by version bump), the library is automatically published to npm via GitHub Actions.
|
|
291
|
+
|
|
292
|
+
## License
|
|
293
|
+
|
|
294
|
+
MIT (or update to your preferred license in `package.json`)
|
|
295
|
+
|
|
296
|
+
## Contributing
|
|
297
|
+
|
|
298
|
+
1. Fork the repository
|
|
299
|
+
2. Create a feature branch
|
|
300
|
+
3. Make your changes with tests
|
|
301
|
+
4. Ensure all tests pass: `npm run test:all`
|
|
302
|
+
5. Submit a pull request
|
|
303
|
+
|
|
304
|
+
## Troubleshooting
|
|
305
|
+
|
|
306
|
+
### Tests fail with "Module not found"
|
|
307
|
+
|
|
308
|
+
Run `npm run build` before running tests. The tests import from the built output.
|
|
309
|
+
|
|
310
|
+
### Bundle size check fails
|
|
311
|
+
|
|
312
|
+
Either optimize your code or update the limits in `scripts/check-bundle-size.mjs`.
|
|
313
|
+
|
|
314
|
+
### GitHub Actions fail on release
|
|
315
|
+
|
|
316
|
+
Ensure `RELEASE_TOKEN` is configured in repository secrets with appropriate permissions.
|
|
317
|
+
|
|
318
|
+
### NPM publish fails
|
|
319
|
+
|
|
320
|
+
1. Check that your npm account has 2FA enabled
|
|
321
|
+
2. Verify OIDC is configured: https://docs.npmjs.com/generating-provenance-statements
|
|
322
|
+
3. Ensure package name is available on npm
|