{"id":14984154,"url":"https://github.com/hotell/typescript-lib-starter","last_synced_at":"2025-04-08T03:11:55.013Z","repository":{"id":143046301,"uuid":"83232292","full_name":"Hotell/typescript-lib-starter","owner":"Hotell","description":"Typescript library starter","archived":false,"fork":false,"pushed_at":"2020-06-02T18:23:49.000Z","size":9697,"stargazers_count":259,"open_issues_count":47,"forks_count":27,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-08T03:11:48.851Z","etag":null,"topics":["es2015-modules","npm-package","prettier","rollup","typescript","typescript-library","umd"],"latest_commit_sha":null,"homepage":null,"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/Hotell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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-02-26T18:51:28.000Z","updated_at":"2024-06-04T20:19:22.000Z","dependencies_parsed_at":"2023-03-21T14:18:13.366Z","dependency_job_id":null,"html_url":"https://github.com/Hotell/typescript-lib-starter","commit_stats":{"total_commits":156,"total_committers":4,"mean_commits":39.0,"dds":0.09615384615384615,"last_synced_commit":"d563328aefa2d212a3499701ccc01f3d384610c1"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Ftypescript-lib-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Ftypescript-lib-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Ftypescript-lib-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hotell%2Ftypescript-lib-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hotell","download_url":"https://codeload.github.com/Hotell/typescript-lib-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767236,"owners_count":20992548,"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":["es2015-modules","npm-package","prettier","rollup","typescript","typescript-library","umd"],"created_at":"2024-09-24T14:08:33.586Z","updated_at":"2025-04-08T03:11:54.980Z","avatar_url":"https://github.com/Hotell.png","language":"JavaScript","funding_links":["https://paypal.me/martinhochel"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1223799/50992071-73562500-1516-11e9-99fa-9f73b0f0eee2.png\" width=\"597\" alt=\"{library-name}\"\u003e\n\u003c/p\u003e\n\n# TypeScript lib starter\n\n\u003e **Enjoying/Using TypeScript lib starter ? 💪✅**\n\u003e\n\u003e \u003cdiv align=\"center\"\u003e\u003ca href=\"https://paypal.me/martinhochel\"\u003eBuy me a ☕️\u003cbr/\u003e\u003cimg src=\"https://img.shields.io/badge/Donate-PayPal-green.svg\" alt=\"donate\"\u003e\u003c/a\u003e\u003c/div\u003e\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/Hotell/typescript-lib-starter.svg)](https://greenkeeper.io/)\n\n[![Build Status](https://travis-ci.org/Hotell/typescript-lib-starter.svg?branch=master)](https://travis-ci.org/Hotell/typescript-lib-starter)\n[![NPM version](https://img.shields.io/npm/v/%40martin_hotell%2Ftypescript-lib-starter.svg)](https://www.npmjs.com/package/@martin_hotell/typescript-lib-starter)\n![Downloads](https://img.shields.io/npm/dm/@martin_hotell/typescript-lib-starter.svg)\n[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n## ✨ Features\n\n- creates package for both Node and Browser\n- build will creates 4 standard \"package\" formats:\n  - `umd` 👉 UMD bundle for Node and Browser\n    \u003e `main` field in package.json\n  - `esm5` 👉 transpiled files to ES5 + es2015 modules for tree shaking\n    \u003e `module` field in package.json\n  - `esm2015` 👉 raw javascript files transpiled from typescript to latest ES standard ( es2018 )\n    \u003e `es2015` field in package.json\n    \u003e\n    \u003e this is useful if you wanna transpile everything or just wanna ship untranspiled esNext code for evergreen browsers)\n  - `fesm` 👉 experimental bundle type introduced by Angular team (TL;DR: it's an es2015 flattened bundle, like UMD but with latest ECMAscript and JS modules)\n- type definitions are automatically generated and shipped with your package\n  - \u003e `types` field in package.json\n- `sideEffects` 👉 [support proper tree-shaking](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) for whole library ( Webpack \u003e= 4). Turn this off or adjust as needed if your modules are not pure!\n\n## ✌️ start coding in 2 steps\n\n1.  `git clone https://github.com/Hotell/typescript-lib-starter \u003cyour-libary-folder-name\u003e \u0026\u0026 cd $_`\n\n1.  `yarn`\n\n![setting-up-your-library](https://user-images.githubusercontent.com/1223799/49905150-fd09c880-fe6c-11e8-9ad8-425c3a38b1b4.gif)\n\nYes that's it. Happy coding ! 🖖\n\n## 💉 Consumption of published library:\n\n1.  install it 🤖\n\n```sh\nyarn add my-new-library\n# OR\nnpm install my-new-library\n```\n\n1.  use it 💪\n\n### Webpack\n\n\u003e #### NOTE:\n\u003e\n\u003e Don't forget to turn off ES modules transpilation to enable tree-shaking!\n\u003e\n\u003e - babel: `{\"modules\": false}`\n\u003e - typescript: `{\"module\": \"esnext\"}`\n\n```ts\n// main.ts or main.js\nimport { Greeter } from 'my-new-library'\n\nconst mountPoint = document.getElementById('app')\nconst App = () =\u003e {\n  const greeter = new Greeter('Stranger')\n  return `\u003ch1\u003e${greeter.greet()}\u003c/h1\u003e`\n}\nconst render = (Root: Function, where: HTMLElement) =\u003e {\n  where.innerHTML = Root()\n}\n\nrender(App, mountPoint)\n```\n\n```html\n\u003c!-- index.htm --\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"bundle.js\" async\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### UMD/ES2015 module aware browsers (no bundler)\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\"\u003e\n      import { Greeter } from './node_modules/my-lib/esm2015/index.js'\n\n      const mountPoint = document.querySelector('#root')\n\n      const App = () =\u003e {\n        const greeter = new Greeter('Stranger')\n        return `\u003ch1\u003e${greeter.greet()}\u003c/h1\u003e`\n      }\n\n      const render = (Root, where) =\u003e {\n        where.innerHTML = Root()\n      }\n\n      render(App, mountPoint)\n    \u003c/script\u003e\n    \u003cscript\n      nomodule\n      src=\"node_modules/my-lib/bundles/my-new-library.umd.min.js\"\n    \u003e\u003c/script\u003e\n    \u003cscript nomodule async\u003e\n      var Greeter = MyLib.Greeter\n\n      var mountPoint = document.querySelector('#root')\n\n      var App = function() {\n        var greeter = new Greeter('Stranger')\n        return '\u003ch1\u003e' + greeter.greet() + '\u003c/h1\u003e'\n      }\n\n      var render = function(Root, where) {\n        where.innerHTML = Root()\n      }\n\n      render(App, mountPoint)\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## [👨‍🔧 Technical overview](./.github/CONTRIBUTING.md#technical-overview)\n\n## [💅 Style guides](./.github/CONTRIBUTING.md#-style-guides)\n\n## [🚀 Publishing](./.github/CONTRIBUTING.md#-publishing)\n\n## 🕵️‍♀️ Troubleshooting\n\n#### dynamic `import()`\n\nThis starter uses latest **TypeScript \u003e=3.x** which has support for lazy loading chunks/modules via `import()` and also definition acquisition via [`import('../path-to-module').TypeFoo`](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types)\n\nBefore TS 2.9, it wasn't possible to properly generate ambient definitions if you used dynamic `import()`. This works now as expected without any hacks ❤️ !\n\n\u003e #### Before TS 2.9\n\u003e\n\u003e Please note that if you wanna use that feature, compiler will complain because declaration generation is turned on, and currently TS can't handle type generation with types that will be loaded in the future ( lazily )\n\u003e\n\u003e **How to solve this:**\n\u003e\n\u003e - turn of type checking and don't generate types for that lazy import: `import('./components/button') as any`\n\u003e - or you can use this [temporary workaround](https://github.com/Microsoft/TypeScript/issues/16603#issuecomment-310208259)\n\n## 🥂 License\n\n[MIT](./LICENSE.md) as always\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhotell%2Ftypescript-lib-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhotell%2Ftypescript-lib-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhotell%2Ftypescript-lib-starter/lists"}