Hotell / typescript-lib-starter

Typescript library starter
MIT License
259 stars 26 forks source link
es2015-modules npm-package prettier rollup typescript typescript-library umd

{library-name}

TypeScript lib starter

Enjoying/Using TypeScript lib starter ? 💪✅

Buy me a ☕️
donate

Greenkeeper badge

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

✨ Features

✌️ 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="https://github.com/Hotell/typescript-lib-starter/raw/master/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="https://github.com/Hotell/typescript-lib-starter/raw/master/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