All Projects → Hotell → Typescript Lib Starter

Hotell / Typescript Lib Starter

Licence: mit
Typescript library starter

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Typescript Lib Starter

zero
📦 A zero config scripts library
Stars: ✭ 17 (-92.77%)
Mutual labels:  rollup, prettier
ts-ci
🚀 A starter for TS projects meant to be published on NPM.
Stars: ✭ 282 (+20%)
Mutual labels:  npm-package, prettier
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-86.38%)
Mutual labels:  prettier, npm-package
js-module-system
A small UI library to demonstrate the JS module system
Stars: ✭ 36 (-84.68%)
Mutual labels:  rollup, npm-package
termy-the-terminal
Web-based terminal powered by React
Stars: ✭ 43 (-81.7%)
Mutual labels:  rollup, prettier
Mevn Cli
Light speed setup for MEVN(Mongo Express Vue Node) Apps
Stars: ✭ 696 (+196.17%)
Mutual labels:  prettier, npm-package
Example Rollup React Component Npm Package
Example React Component, Published to npm
Stars: ✭ 122 (-48.09%)
Mutual labels:  rollup, npm-package
Eslint Plugin Eslint Comments
Additional ESLint rules for directive comments of ESLint.
Stars: ✭ 221 (-5.96%)
Mutual labels:  npm-package
Node Virtualbox
A JavaScript Library for Interacting with VirtualBox
Stars: ✭ 231 (-1.7%)
Mutual labels:  npm-package
Prettier Tslint
Code ➡️ prettier ➡️ tslint --fix ➡️ Formatted Code ✨
Stars: ✭ 221 (-5.96%)
Mutual labels:  prettier
Pinyinlite
Lightweight and Lightning-Fast ⚡️ Pinyin Library for JavaScript
Stars: ✭ 218 (-7.23%)
Mutual labels:  npm-package
Prettier Plugin Organize Imports
Make Prettier organize your imports using the TypeScript language service API.
Stars: ✭ 222 (-5.53%)
Mutual labels:  prettier
Unstated Debug
Debug your Unstated containers with ease
Stars: ✭ 231 (-1.7%)
Mutual labels:  npm-package
Bitcoin Chart Cli
Bitcoin chart for the terminal as command line util
Stars: ✭ 221 (-5.96%)
Mutual labels:  npm-package
Modular Css
A streamlined reinterpretation of CSS Modules via CLI, API, Browserify, Rollup, Webpack, or PostCSS
Stars: ✭ 234 (-0.43%)
Mutual labels:  rollup
Rollup Plugin Esbuild
Use ESBuild with Rollup to transform ESNext and TypeScript code.
Stars: ✭ 220 (-6.38%)
Mutual labels:  rollup
Terminal Image Cli
Display images in the terminal
Stars: ✭ 234 (-0.43%)
Mutual labels:  npm-package
Tslint Plugin Prettier
Runs Prettier as a TSLint rule and reports differences as individual TSLint issues
Stars: ✭ 232 (-1.28%)
Mutual labels:  prettier
Ol3echarts
🌏 📊 ol3Echarts | a openlayers extension to echarts
Stars: ✭ 229 (-2.55%)
Mutual labels:  rollup
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-2.55%)
Mutual labels:  prettier

{library-name}

TypeScript lib starter

Enjoying/Using TypeScript lib starter ? 💪✅

Greenkeeper badge

Build Status NPM version Downloads Standard Version styled with prettier Conventional Commits

✨ Features

  • creates package for both Node and Browser
  • build will creates 4 standard "package" formats:
    • umd 👉 UMD bundle for Node and Browser

      main field in package.json

    • esm5 👉 transpiled files to ES5 + es2015 modules for tree shaking

      module field in package.json

    • esm2015 👉 raw javascript files transpiled from typescript to latest ES standard ( es2018 )

      es2015 field in package.json

      this is useful if you wanna transpile everything or just wanna ship untranspiled esNext code for evergreen browsers)

    • 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)
  • type definitions are automatically generated and shipped with your package
    • types field in package.json

  • sideEffects 👉 support proper tree-shaking for whole library ( Webpack >= 4). Turn this off or adjust as needed if your modules are not pure!

✌️ start coding in 2 steps

  1. git clone https://github.com/Hotell/typescript-lib-starter <your-libary-folder-name> && cd $_

  2. yarn

setting-up-your-library

Yes that's it. Happy coding ! 🖖

💉 Consumption of published library:

  1. install it 🤖
yarn add my-new-library
# OR
npm install my-new-library
  1. use it 💪

Webpack

NOTE:

Don't forget to turn off ES modules transpilation to enable tree-shaking!

  • babel: {"modules": false}
  • typescript: {"module": "esnext"}
// main.ts or main.js
import { Greeter } from 'my-new-library'

const mountPoint = document.getElementById('app')
const App = () => {
  const greeter = new Greeter('Stranger')
  return `<h1>${greeter.greet()}</h1>`
}
const render = (Root: Function, where: HTMLElement) => {
  where.innerHTML = Root()
}

render(App, mountPoint)
<!-- index.htm -->
<html>
  <head>
    <script src="bundle.js" async></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

UMD/ES2015 module aware browsers (no bundler)

<html>
  <head>
    <script type="module">
      import { Greeter } from './node_modules/my-lib/esm2015/index.js'

      const mountPoint = document.querySelector('#root')

      const App = () => {
        const greeter = new Greeter('Stranger')
        return `<h1>${greeter.greet()}</h1>`
      }

      const render = (Root, where) => {
        where.innerHTML = Root()
      }

      render(App, mountPoint)
    </script>
    <script
      nomodule
      src="node_modules/my-lib/bundles/my-new-library.umd.min.js"
    ></script>
    <script nomodule async>
      var Greeter = MyLib.Greeter

      var mountPoint = document.querySelector('#root')

      var App = function() {
        var greeter = new Greeter('Stranger')
        return '<h1>' + greeter.greet() + '</h1>'
      }

      var render = function(Root, where) {
        where.innerHTML = Root()
      }

      render(App, mountPoint)
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

👨‍🔧 Technical overview

💅 Style guides

🚀 Publishing

🕵️‍♀️ Troubleshooting

dynamic import()

This starter uses latest TypeScript >=3.x which has support for lazy loading chunks/modules via import() and also definition acquisition via import('../path-to-module').TypeFoo

Before 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 ❤️ !

Before TS 2.9

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 )

How to solve this:

  • turn of type checking and don't generate types for that lazy import: import('./components/button') as any
  • or you can use this temporary workaround

🥂 License

MIT as always

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].