I would like to export separated build for web and mobile

[ScreamZ]

Hello,

I would like to support two file for web (react) and mobile (react-native) and be able to import that way:

• For the web : import { someAsset } from "mylib/web" or just import { someAsset } from "mylib"
• For the mobile import { someAsset } from "mylib/mobile.

In order to have my .d.ts files generated I'm not sure how to proceed… I want this because I've library that should not be packaged for the web as it's for mobile only and vis-versa.

I've tried such configuration, but I end up with a lot of file at my root folder, which is kind of annoying, also I'm not sure what should be in my package.json especially my main entry:

export default defineConfig({
  entry: ["src/web.ts", "src/native.ts"],
  outDir: "./",
  format: ["esm", "cjs"],
  dts: true,
  sourcemap: !isRelease,
  silent: isRelease,
  clean: false,
  treeshake: isRelease,
});

Any recommendation on that pattern ?

Regards

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[lvqq]

You can use exports to make different config for each path in package.json, for example:

"exports": {
    "./web": {
      "types": "./web.d.ts",
    },
    "./mobile": {
      "types": "./mobile.d.ts"
    },
}

[gunnartorfis]

Since this is quite similar to my requirement I want to add to this issue instead of opening a new one.

When using react-native-web, one often wants to provide a platform specific file extension:
button.web.tsx,
button.tsx,

This way, web should pick up button.web.tsx while other platforms should use button.tsx. When using tsup, the button.web.tsx file isn't included at all in my dist output.

Here's my tsup.config.ts

import { defineConfig, Options } from "tsup";

export default defineConfig((options: Options) => ({
  entry: {
    index: "src/index.tsx",
  },
  banner: {
    js: "'use client'",
  },
  clean: true,
  format: ["cjs", "esm"],
  external: ["react"],
  dts: true,
  ...options,
}));

Is there any configuration in tsup I can add to support this?

[clayrisser]

I'm facing the same issue.