Tsdx: HOWTOs

[ambroseus]

Collection of useful HOWTOs

:warning: 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) https://github.com/jaredpalmer/tsdx/issues/376

tsconfig.json

  "downlevelIteration": true

package.json

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

[ambroseus]

How to change output folder name from "dist" to "build" https://github.com/jaredpalmer/tsdx/issues/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 https://github.com/jaredpalmer/tsdx/issues/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

[sw-yx]

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;
   }
}

1. 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 https://github.com/jaredpalmer/tsdx/pull/374#issuecomment-567687288 https://github.com/jaredpalmer/tsdx/issues/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 https://github.com/jaredpalmer/tsdx/pull/374#issuecomment-571667779
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 https://github.com/jaredpalmer/tsdx/issues/278#issuecomment-563184800 https://github.com/jaredpalmer/tsdx/issues/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: https://github.com/jaredpalmer/tsdx/issues/379#issuecomment-601499240

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: https://github.com/jaredpalmer/tsdx/issues/379#issuecomment-601499240

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.

[dclark27]

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

I was able to get the Jest plugin working by adding a jest.config.js file to my top level and adding:

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  }
}

[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

[sw-yx]

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

[brandoneggar]

I'm posting this here in case it saves someone setup time with @rollup/plugin-image.

It needs to be added as the 1st plugin in your config.plugins array to work correctly!!!

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

module.exports = {
  rollup(config, options) {
    config.plugins.push(
    //  ... your plugins here ...
    );

    // Per docs for @rollup/plugin-image it needs to be first plugin
    config.plugins.unshift(
      image({
        include: ['**/*.png', '**/*.jpg']
      })
    );

    return config;
  }
};

[agilgur5]

@brandoneggar comments above already state that and put it first, so that is duplicative