## TSDX TSDX is a project by _`Jared Palmer`_ which includes the best practices and optimizations for modern NPM packages baked into it. To quote the website: > **TSDX is a zero-config CLI that helps you develop, test, and publish modern > TypeScript packages** with ease — so you can focus on your awesome new library > and not waste another afternoon on the configuration. In short, it takes away most of the hassle of setting up a package as stated above. Other than that, it sets up all you need to get your package ready for publishing, as well as giving you a playground for testing out your package with an example repo. It doesn’t even have to be a component library. TSDX takes care of all the tedious tasks of setting up a new project. ### TSDX Features Let's look at some of the features: - **Zero-config:** This means you don't need to do anything to get building. The basic configuration needed is all taken care of for you. - **Rollup:** TSDX uses Rollup (similar to Webpack) under the hood and is automatically setup to export both CommonJS and ESM modules without any configuration. - **Live Playground:** Your new project is set up with a live (React) playground so you can import your project and test it out all in the same place. - **Jest:** Jest is setup so you can start writing tests. Don't forget to test your project. - **Project Templates:** There are project templates like react-with-storybook (this is the one we'll be using) which will setup your project with Storybook and React. You can create your library and immediately start developing in Storybook. - **Tree shaking:** Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. Projects using ES modules and modern bundlers, will drop any code they aren't using. For instance, if they only use one component in our library, the rest of the code wont be included at the app level. TSDX is also customizable, so if your project needs some special configuration you can always override default functionality, see more [here](https://tsdx.io/customization). If you want to read more about TSDX you can check out the docs [here](https://tsdx.io/). ## Bootstrapping a New Project Like I’ve mentioned before, all you need to get started with it is one terminal command: ```bash npx tsdx create my-component-library ``` After running this command a new folder will have been created with the name `my-component-library` and all the relevant packages will have been installed. Once that step has finished, a prompt will appear in the terminal asking to choose a template: ![tsdx_cli](/images/posts/tsdx_choose_template.png) Choose `react-with-storybook`. After doing so, all Storybook related packages will be installed as well: ![tsdx_cli](/images/posts/tsdx_installing.png) Once it finishes, a confirmation with the basic command will appear: ![tsdx_cli](/images/posts/tsdx_done.png) Open the project in your favorite editor. You’ll notice that you’ve been given a pretty standard folder structure from TSDX. Let's take a look at it: - **.github:** This folder is generated by Github actions which is used to automate your workflows. I definitely recommend [reading about them](https://docs.github.com/en/actions). - **.storybook:** Your Storybook configuration lives here. We'll be using this a bit later on but if you want to learn more you can check out the setup docs [here](https://storybook.js.org/docs/react/configure/overview). - **dist:** This is where our bundled code will live. It is where TSDX will output the [ES modules](https://flaviocopes.com/es-modules/), [CommonJS modules](https://flaviocopes.com/commonjs/), our [source maps](https://learntypescript.dev/11/l4-source-maps), and all our Typescript types. - **example:** This is the Live Playground piece I described above. It will not be part of the bundle and will not be published. - **node_modules:** All your npm packages go here. - **src:** This is where you will build all your components. This is the main folder that will be compiled to our `dist` folder. - **stories:** This is where your stories will live for [Storybook](https://storybook.js.org/docs/react/get-started/introduction). Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. - **test:** This is where we will put all our component tests. I won't be going into writing tests for components in this article, however I highly recommend reading more about how to write tests for components using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). - **package.json** - our project dependencies, scripts, configuration, etc. - **gitignore** - files and folders that will be ignored by [git](https://git-scm.com/). - **LICENSE** - MIT license is automatically generated. - **README.md** - This is a pretty straight forward readme by TSDX. It has all the commands that are generated with their package. I recommend updating this to suite your package needs. - **tsconfig.json:** The TypeScript configuration file that was generated by TSDX. Unless you need some specific configuration I would leave this alone. If you want to learn more about it you can read more [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). As a quick test I like to try out the commands and see them working. Let's start with a quick build: ```bash yarn build # or npm run build ``` Take a look at the dist folder. You can see the ESM, CJS, source maps, and Typescript types all there. That seems to be working as expected. Out of the box, TSDX has created one component for us, which we can see in our local running Storybook: ```bash yarn storybook # or npm run storybook ``` This loads the stories from `./stories`. Storybook should start and open up in your browser. ![tsdx_storybook](/images/posts/tsdx_storybook.png) ## Proposed Development Workflow After we’ve got our package and repo all configured, let’s see how we develop a new component. We’ll start off by creating a new component, a button for example. As we’ve learned from the section above, the right place to start off is our src directory, in it we'll create a new file: ```ts // src/Button.tsx import React from 'react'; export interface ButtonProps extends React.ButtonHTMLAttributes { label: string; } export const Button: React.FC = ({ disabled, label, ...props }) => { return ( ); }; ``` Now, let’s add a story for it using Storybooks recommend way to write stories follow the [“Component Story Format (CSF)”](https://storybook.js.org/docs/react/api/csf), so we can see what we’ve created: ```ts // stories/Button.stories.tsx import React from 'react'; import { Meta, Story } from '@storybook/react'; import { Button, ButtonProps } from '../src/Button'; export default { title: 'Components/Button', component: Button, argTypes: { onClick: { action: 'clicked' }, label: { control: { type: 'text', }, }, disabled: { control: { type: 'boolean', }, }, }, parameters: { controls: { expanded: true }, }, } as Meta; const Template: Story = (args) =>

blogTitle

How create a UI library with Typescript React and Storybook

Static Generation vs Server-side Rendering