HOWTOs

[ambroseus]

Collection of useful HOWTOs

⚠️ Warning

These modifications will override the default behavior and configuration of TSDX. As such they can invalidate internal guarantees and assumptions. These types of changes can break internal behavior and can be very fragile against updates. Use with discretion!

• How to correctly transpile spread on iterables (Set, Map)
• How to change output folder name from "dist" to "build"
• How to 'play nicely' with tsdx + VS Code + eslint
• How to setup app with live reload for React Native
• How to configure project to use aliases
• How to configure aliases and avoid specifying folders manually
• How to ship components with images properly
• How to load a font into the code
• How to configure a static assets folder

[ambroseus]

How to correctly transpile spread on iterables (Set, Map) #376

tsconfig.json

  "downlevelIteration": true

package.json

{
  "scripts":
    {
       "build": "tsdx build --target node"
    }
}

[ambroseus]

How to change output folder name from "dist" to "build" #351

tsdx.config.js

module.exports = {
  rollup(config, options) {
    config.output.file = config.output.file.replace('dist', 'build');

    return config;
  },
};

[ambroseus]

How to 'play nicely' with tsdx + VS Code + eslint #354

https://github.com/jaredpalmer/tsdx#npm-run-lint-or-yarn-lint
run npm run lint --write-file or yarn lint --write-file to generate .eslintrc.js file

[swyxio]

nice. worth adding to docs when you think its ready.

[ambroseus]

@sw-yx yep) can you plz add label documentation for this issue?

[nartc]

How to setup Example app with live reload for React Native

Note: This is a hack, rather than a solution. This hack requires the example app to be in Javascript instead of TypeScript to prevent additional configuration needed.

1. Init a react-native app using your favorite CLI. (I use ReactNative CLI) in the root dir of the library (aka example should stay on the same level of src)
2. Create tsdx.config.js in the root dir if you haven't already
3. Overide TSDX config with the following:

module.exports = {
   rollup(config, options) {
      const { localDev, name } = options; // localDev can be whatever name you want
      if (localDev) {
          config.output.file = config.output.file.replace('dist', `example/${name}`);
          return config;
      }
      return config;
   }
}

4. Setup a script in package.json

{
   ...
   scripts: {
      "watch": "tsdx watch",
      "dev": "tsdx watch --localDev", // <-- add this line, localDev is just a property name
   }
}

PS: Even though the example app is in JS, type definitions output from tsdx works perfectly fine if your text editor/ide supports typescript.

[vongohren]

Could we pin this issue like the who is using this lib issue? :)

[ambroseus]

How to configure project to use aliases in module's import to avoid '../../../' hell #374 (comment) #336

package.json

"devDependencies": {
  "babel-plugin-module-resolver": "^4.0.0"
}

tsconfig.json

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "comp": ["./src/comp"],
      "utils": ["./src/utils"],
      "*": ["src/*", "node_modules/*"]
    }
 }

.babelrc

  "plugins": [
    [
      "module-resolver",
      {
        "root": "./",
        "alias": {
          "comp": "./src/comp",
          "utils": "./src/utils",
          "*": ["src/*", "node_modules/*"]
        }
      }
    ]
  ]

advanced solution #374 (comment)
babel.config.js

module.exports = {
  // ...
  plugins: [
    // ... other plugins
    [
      'babel-plugin-module-resolver',
      {
        root: './',
        alias: require('./tsconfig.json').compilerOptions.paths,
      },
    ],
  ],
}

[ambroseus]

How to ship components with images properly #278 (comment) #386

thanks @vongohren for suggestion

tsdx.config.js

const images = require('@rollup/plugin-image');

module.exports = {
  rollup(config, options) {
    config.plugins = [
      images({ include: ['**/*.png', '**/*.jpg'] }),
      ...config.plugins,
    ]

    return config
  },
}

[vongohren]

For information, this might be fresh and good in the latest versions: #379 (comment)

Old history

@ambroseus why is your version so complex? What is the value going out of this?
My suggestions results in a data string: const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUh......

This is the code I ended up using

const images = require('@rollup/plugin-image');

module.exports = {
  rollup(config, options) {
    config.plugins = [
      images({ incude: ['**/*.png', '**/*.jpg'] }),
      ...config.plugins,
    ]

    return config
  },
}

[vongohren]

For information, this might be fresh and good in the latest versions: #379 (comment)

Old history

How to load a font into the code.
This uses @rollup/plugin-url, and therefore I want @ambroseus suggestion to still be here. This long complex thing is needed because there is some async mechanism being used inside this library. Therefore we need to tackle that inside typescript with the following solution

Force inline wrapping the option in url plugin, tolimit:Infinity,.
Force the plugin to emit files, use limit:0,

const url = require('@rollup/plugin-url')

module.exports = {
  rollup(config, options) {
    config.plugins = [
      // Force the `url` plugin to emit files.
      url({ include: ['**/*.ttf'] }),
      ...config.plugins,
    ]

    return config
  },
}

Then you can use this wherever you need in the code, also as a Global font face in emotion.

import React from 'react';
import { Global, css } from '@emotion/core'
import RalewayRegular from './assets/fonts/Raleway-Regular.ttf';

export default () => {
  return (
    <Global
      styles={css`
        @font-face {
          font-family: 'Raleway';
          font-style: normal;
          font-weight: 100 400;
          src: url(${RalewayRegular}) format('truetype');
        }
        body, button {
          font-family: 'Raleway', sans-serif;
        }
      `}
    />
  )
}

[ambroseus]

@vongohren thanks for the solution!
@jaredpalmer @agilgur5 ^^^ +1 configuration hack :) , +1 to think about tsdx-plugins approach

[arvigeus]

A slightly better approach to configure aliases and avoid specifying folders manually:

package.json

"devDependencies": {
  "babel-plugin-module-resolver": "^4.0.0"
}

tsconfig.json (no paths)

"compilerOptions": {
  "include": [ "src" ],
  "baseUrl": "./src"
 }

babel.config.js

const { readdirSync } = require('fs');

const resolveAlias = readdirSync("./src", { withFileTypes: true })
    .filter(entry => entry.isDirectory())
    .reduce(
        (aliases, dir) => {
            aliases[dir.name] = "./src/" + dir.name;
            return aliases;
    }, { "*": ["src/*", "node_modules/*"] });

module.exports = function (api) {
  api.cache(true);

  return {
    plugins: [
      [ "module-resolver", { root: "./", alias: resolveAlias } ]
    ]
  };
}

[arvigeus]

There should be HOWTO for Visual Studio Code's Jest plugin as well (maybe something like eslint's "write to file")

[arvinsim]

@ambroseus @vongohren I tried using your @rollup/plugin-image solution.

Unfortunately, it is still not working. Both when importing it from an app and also by running storybook

I have tested it by using TSDX in my library while using CRA for my app. When I look into the src attribute of the imported img component, it is accessing /public/<minified name of image>.gif.

[vongohren]

@arvinsim that is strrange, because I use it in prod right now, and it works even fine in storybook
The D is an image

Are you using this comment? Because that is what im using

[arvinsim]

@vongohren May I know what version of TSDX and plugins that you are using? My package versions

"tsdx": "^0.12.3",
"@storybook/react": "^5.2.8",
"@rollup/plugin-image": "^2.0.0"

[arvinsim]

@vongohren Okay so I found the issue. It was because babel-plugin-file-loader was set up. It overrode the output directory of @rollup/plugin-image. Once I remove it, it now works.

[agilgur5]

Updating here as I did in #294 that async Rollup plugins are now supported out-of-the-box with v0.13.0, which was just released.

I've taken the liberty of editing some of the examples here to reflect that.

[ambroseus]

@agilgur5 awesome! HOWTO with rpt2 & objectHashIgnoreUnknownHack was removed

[swyxio]

How to configure a static assets folder

// tsdx.config.js
let static_files = require('rollup-plugin-static-files');

module.exports = {
  rollup(config) {
    config.plugins.push(
      static_files({
        include: ['./static'],
      })
    );
    return config;
  },
};

good for shipping static CSS that the user can import without assuming bundler setup

[jaredpalmer]

Let’s get these into the new docs site

[shadiramadan]

I tried to follow @vongohren's Font How-To #379 (comment)

I added the rollup dependency:

yarn add --dev @rollup/plugin-url

Instead of .ttf files I use .woff2 in the tsdx.config.js example posted in the comment.

I had to add a fonts.d.ts file to the types folder for VSCode to not complain about my font imports:

declare module '*.woff2';

However, I'm having an issue in which the fonts are not being found when running yarn build

Error: Could not resolve './assets/fonts/MyFont/MyFont-Regular.woff2' from src/fonts.ts

    at error (/<user-path>/react-component-library/node_modules/rollup/dist/shared/node-entry.js:5400:30)

My fonts.ts file looks like:

import { css } from '@emotion/react'

import MyFontRegular from './assets/fonts/MyFont/MyFont-Regular.woff2';

export const fontStyles = css`
@font-face {
  font-family: 'My Font';
  font-style: normal;
  font-weight: 400;
  src: url(${MyFontRegular}) format('woff2');
}
`

I'm not sure where I am going wrong. This is basically off a vanilla tsdx project using the react-storybook template.

[HerbCaudill]

@ambroseus I struggled for some time with the .babelrc config for rewriting paths until I realized that module-resolver doesn't handle TypeScript files by default.

In your example, the options object should include an array of TypeScript extensions:

  "plugins": [
    [
      "module-resolver",
      {
        "root": "./",
        "alias": {
          "comp": "./src/comp",
          "utils": "./src/utils",
          "*": ["src/*", "node_modules/*"]
        },
        "extensions": [".ts", ".tsx"]
      }
    ]
  ]

[Vadorequest]

I've released https://github.com/UnlyEd/simple-logger and now I would like to automatically create a GitHub release when publishing to NPM, what github action do you recommend? Are there any example out there?

[stephencweiss]

@arvigeus , I think there's a small typo in your comment for aliasing for the tsconfig.json (link)

I believe this

"compilerOptions": {
  "include": [ "src" ],
  "baseUrl": "./src"
 }

should be this:

"include": [ "src" ],
"compilerOptions": {
  "baseUrl": "./src"
 }

(include is not a compilerOption in tsconfig)

[drewgaze]

@arvigeus

this solution doesn't appear to work for test execution, is there any workaround?

[bk973]

I have an Issue. I want to know how to change port number when running an development mode.

[saadahmsiddiqui]

How to configure a static assets folder

// tsdx.config.js
let static_files = require('rollup-plugin-static-files');

module.exports = {
  rollup(config) {
    config.plugins.push(
      static_files({
        include: ['./static'],
      })
    );
    return config;
  },
};

good for shipping static CSS that the user can import without assuming bundler setup

Hey, is it possible to include these static files within a specified directory, instead of just the root of dist

[valenciaHQ]

How to configure a static assets folder

// tsdx.config.js
let static_files = require('rollup-plugin-static-files');

module.exports = {
  rollup(config) {
    config.plugins.push(
      static_files({
        include: ['./static'],
      })
    );
    return config;
  },
};

good for shipping static CSS that the user can import without assuming bundler setup

Hey, is it possible to include these static files within a specified directory, instead of just the root of dist

up

[valenciaHQ]

I got HTML files within a node module that are being used as an email template.
I got them under /template folder, but when I pack them, they are at /dist root, is there a way to save them under dist/template?
Thanks!

[ashishtwr314]

Import your assets like this , rather than using import:
const asset = require('../**/*.png');

and in your tsdx.config.js

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      images({ include: ['**/*.png', '**/*.jpg'] }),
      url({ exclude: ['**/*.png', '**/*.jpg'], limit: 0 }),
      ...otherconfig
    return config;
  },
};

[hbisadii]

      static_files({
        include: ['./static'],
      })

This works but when I set include: ['./src/assets', './src/styles'], it copies the files and folders in assets and styles straight into dist folder not under dists>assets and dist>styles

[hbisadii]

      static_files({
        include: ['./static'],
      })

This works but when I set include: ['./src/assets', './src/styles'], it copies the files and folders in assets and styles straight into dist folder not under dists>assets and dist>styles

The answer is I should have simply set include: ['./src'].