{"id":20046409,"url":"https://github.com/aneldev/dyna-ts-module-boilerplate","last_synced_at":"2026-02-10T10:37:44.902Z","repository":{"id":38272818,"uuid":"92422971","full_name":"aneldev/dyna-ts-module-boilerplate","owner":"aneldev","description":"Typescript boilerplate for module (for a javascript library)","archived":false,"fork":false,"pushed_at":"2024-11-24T18:06:10.000Z","size":2209,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-14T09:35:57.418Z","etag":null,"topics":["boilerplate","builder","coverage","debug","javascript","nodejs","test","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aneldev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-25T16:31:12.000Z","updated_at":"2024-11-24T18:06:14.000Z","dependencies_parsed_at":"2023-02-09T15:02:18.255Z","dependency_job_id":"87a2f167-f861-473d-a78f-f6f3920cf39c","html_url":"https://github.com/aneldev/dyna-ts-module-boilerplate","commit_stats":{"total_commits":464,"total_committers":8,"mean_commits":58.0,"dds":0.7068965517241379,"last_synced_commit":"10c6a44237cee274140e091c199e6d6d7c4a81d4"},"previous_names":[],"tags_count":119,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aneldev%2Fdyna-ts-module-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aneldev%2Fdyna-ts-module-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aneldev%2Fdyna-ts-module-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aneldev%2Fdyna-ts-module-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aneldev","download_url":"https://codeload.github.com/aneldev/dyna-ts-module-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233655325,"owners_count":18709260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","builder","coverage","debug","javascript","nodejs","test","typescript"],"created_at":"2024-11-13T11:23:40.414Z","updated_at":"2025-09-20T10:32:52.601Z","avatar_url":"https://github.com/aneldev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About dyna-ts-module-boilerplate\n\n**Boilerplate with Webpack setup for ES6/ESNEXT for TypeScript Node Libraries/Packages.**\n\n- Develop in TypeScript\n- Debug with Chrome Dev Tools\n- Write tests with Jest\n- Lint\n- Build\n- Deploy on Git and npm\n\nThis boilerplate includes minimal configuration and dependencies for creating one or multiple modules written in TypeScript.\n\nIt can export one module or multiple for explicit imports.\n\n**Happy coding!**\n\n# React?\n\nNo, this boilerplate is not designed for developing React components. However, you can still create a library that handles React components and supports JSX.\n\nTo develop React components, use the [dyna-ts-react-module-boilerplate](https://www.npmjs.com/package/dyna-ts-react-module-boilerplate), which is a similar boilerplate but with more infrastructure for React development.\n\n# How to use this boilerplate\n\nTo use it and create your own module:\n\n- Clone it into a folder named after your module, like `my-module`.\n- Run `pnpm bootstrap` to unlink it from this git repo.\n\nExample:\n\n```bash\ngit clone https://github.com/aneldev/dyna-ts-module-boilerplate.git my-module\ncd my-module\npnpm bootstrap\n```\n\nYour repo will now be ready, and you can `git init` under your own account.\n\n# Features\n\n- Uses the powerful `pnpm` as a packager, but you can easily replace it with another one\n- Written in TypeScript, .tsx, .ts\n- Supports CSS, SCSS \u0026 LESS at the same time\n- Advanced ESLint\n- Tested with Jest\n- Debugged with Chrome Dev Tools\n- Distributes with TypeScript definitions\n- Supports distribution of one or multiple modules for explicit import\n- Supports distribution of modules for Web and Node\n- Analyzes the distribution\n- Exports ESNext modules\n- Exports Typescript declarations\n- Detects circular dependencies (which can lead to `undefined` or `null` imports)\n- Monorepo friendly\n\n# Specs\n\n- Webpack 5\n- TypeScript v5 with higher restrictions\n- Supports ES2019 lib\n- React JSX syntax\n- Less/Scss module CSS or other loaders\n- Image loaders\n- ESLint configuration for React and rules\n- Webpack analyzer for package content with the [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)\n\n# Scripts\n\n| Script                  | Description                                                                                                  | Notes                                                             |\n|:------------------------|:-------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------|\n| `install-clean`         | Clears all `node_modules` and runs `pnpm install`                                                            |                                                                   |\n| `start`                 | Runs the built application _meaning the `./src.index.ts`_                                                    | You can remove this is this repo nothing starts                   |\n| `start-dev`             | Runs the `build-watch` \u0026 `start` parallel _for development_                                                  | You can remove this is this repo nothing starts                   |\n| `build`                 | Builds `.src/index` into the `dist` folder                                                                   |                                                                   |\n| `build`                 | Builds `.src/index` into the `dist` folder                                                                   |                                                                   |\n| `build-watch`           | Runs `build` in watch mode                                                                                   |                                                                   |\n| `build-analyze`         | Shows the Webpack dependencies analyzer                                                                      |                                                                   |\n| `commit`                | Easily commit, including unstaged files                                                                      |                                                                   |\n| `commit-amend`          | Easily amend the previous commit with unstaged files                                                         |                                                                   |\n| `lint`                  | Runs ESLint on your source code                                                                              |                                                                   |\n| `lint-watch`            | Runs ESLint in watch mode                                                                                    |                                                                   |\n| `lint-fix`              | Autofixes issues with ESLint                                                                                 |                                                                   |\n| `lint-fix-watch`        | Autofixes issues with ESLint in watch mode                                                                   |                                                                   |\n| `test`                  | Runs all or filtered tests                                                                                   | Arguments `\u003cfilter\u003e`. Example: `test MyService`                   |\n| `test-debug`            | Debugs tests with Dev Tools                                                                                  | Arguments `\u003cfilter\u003e`. Example: `test-debug MyService`             |\n| `test-watch`            | Runs all or filtered tests in watch mode                                                                     | Arguments `\u003cfilter\u003e`. Example: `test-watch MyService`             |\n| `test-no-coverage`      | Runs all or filtered tests without coverage                                                                  | Arguments `\u003cfilter\u003e`. Example: `test-no-coverage MyService`       |\n| `test-update-snapshots` | Updates test snapshots                                                                                       | Arguments `\u003cfilter\u003e`. Example: `test-update-snapshots MyService`  |\n| `update-deps`           | Bumps all dependencies to their latest versions based on version definition                                  |                                                                   |\n| `publish-push`          | Bumps the patch version, publishes to npm, and pushes to Git                                                 |                                                                   |\n| `release`               | Runs `build` \u0026 `publish-push`                                                                                |                                                                   |\n| `bootstrap`             | Initialization script that prepares the boilerplate and disconnects it from the Anel Dev organization’s Git. | You shouldn't see this script; it's only run right after cloning. |\n\nIf you see the `bootstrap` script and you've already run `git init` on your versioning system, you can delete:\n\n- The `bootstrap` script\n- The `bootstrap.js` file\n\n# Configuration\n\nThis is a **Zero-Configuration** boilerplate!\n\nHowever, if needed, you should only edit the following:\n\n## Webpack Loaders/Rules\n\nAdd them in `/webpack.loaders.js`.\n\n## Webpack Plugins\n\nAdd them in `/webpack.plugins.js`.\n\n# Distributions\n\nThis boilerplate can export one or multiple independent modules.\n\n## Single module\n\nIf the boilerplate finds the `src/index.ts` file, it considers the module *Single*.\n\n**For example:**\n\nContent of `src/index.ts`:\n```\nexport class Invoice {...}\n```\nFrom another package, you can import this module like this:\n```\nimport { Invoice } from \"my-module\";\n```\n\n## Multi modules\n\nIf the boilerplate cannot find the `src/index.ts` file, it considers the module *Multi*. In this case, the `/src` folder should contain folders, each representing a module with its own `index.ts` file.\n\nThis allows making **explicit imports** from other packages or apps improving the tree shaking.\n\n**For example:**\n\nFolder structure:\n```\nsrc/Invoice/index.ts   // content: export class Invoice {...}\nsrc/Person/index.ts    // content: export class Person {...}\n```\nFrom another package, you can explicit import these modules like this:\n```\nimport { Invoice } from \"my-module/dist/Invoice\";\nimport { Person } from \"my-module/dist/Person\";\n```\nSimilarly, you can distribute modules for specific environments, such as Web or Node, ensuring you import dependencies compatible with the target environment.\n\nThe `dist` folder contains only JavaScript code (ES5), without Webpack module loaders, so the code works everywhere as ES5.\n\n## Switching from Single to Multi\n\n1. The `/src` folder should contain only subfolders.\n2. Each subfolder is considered an independent module.\n3. Each subfolder should have an `/index.ts` that exports what’s needed.\n4. Delete the `src/index.ts`.\n\n## Switching from Multi to Single\n\n1. Create the `src/index.ts`.\n2. Export what’s needed.\n3. The folder structure can be anything.\n\n# Develop\n\n## Using Jest tests\n\nDevelopment is based on [Jest](https://facebook.github.io/jest) tests. After creating something in the `src`, create a Jest test like the [main.test.ts](tests/ui/main.test.ts) and run or debug it.\n\n**Steps:**\n\n1. Write your Jest tests anywhere under the `./src`.\n2. **Important** Place a `debugger;` statement somewhere; otherwise, the debug runtime won’t stop.\n3. Run `pnpm test-debug \u003cname of the test file\u003e`.\n4. Open [chrome://inspect/#devices](chrome://inspect/#devices).\n5. Select the remote target instance and click `inspect`.\n6. Ready for debugging.\n\n**Note:** You might need to press `Resume script` (the `Play` button) to skip some internal Node lib points.\n\nFor more information about the tests, read below.\n\n## Using app\n\nThis repo might export modules and/or can start an application from `src/index.ts`.\n\nThis app can be built and deployed, so the user of your clone would simply `pnpm start`.\n\n**Steps:**\n\n1. Write your own app that will start from the `./src/index.ts`\n2. Run `pnpm build-watch`\n2. Run `pnpm start`\n3. OR `pnpm start-dev` that execute the above in parallel.\n\n# Analyze\n\n1. Run `pnpm analyse`.\n\n# Test\n\n## Write tests\n\nFor testing, [Jest](https://facebook.github.io/jest) is used. Check the documentation for details.\n\nTest files can be located anywhere but should have names in the format `*.(test|spec).(ts|js)`.\n\n## Run tests\n\nRun `pnpm test` to execute your tests and coverage.\n\nRun `pnpm test-watch` to execute tests on changes.\n\nRun `pnpm test-no-coverage` to run tests without coverage.\n\nRun `pnpm test-update-snapshots` to update the snapshots.\n\nRun `pnpm test-debug` to debug with Chrome Dev Tools.\n\n# Dist / Release\n\n## General\n\nRun `pnpm build` to create a distributable version of your project in the `dist/` folder.\n\nThe package configuration exports the `dist/` folder, so you need to run `pnpm build` each time you want to publish this package. TypeScript declarations are included out of the box.\n\nRun `pnpm release` to build, publish to npm, and push to your repo.\n\n# References\n\n[Webpack configuration](https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faneldev%2Fdyna-ts-module-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faneldev%2Fdyna-ts-module-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faneldev%2Fdyna-ts-module-boilerplate/lists"}