dub

dub copied to clipboard

Source of Problem

import { defineConfig, Options } from "tsup";

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

Currently this is needed to prevent Next from crashing whenever a component that would normally need the "use client" directive is called from the package but as tsup 6.1.3 does not support file level directives it has to be injected onto all the files, this is currently increasing first load JS across the project.

To fix this there needs to be a way of bundling client and server components separately, currently following this issue https://github.com/egoist/tsup/issues/835 as it proposes some solutions such as splitting pure RSCs and then mixed + client components into separate bundles, second option which may be more effective but won't produce exportable packages for npm is to have Next transpile the packages https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages.

ENG-163 Fix all UI Components from @dub/ui being client components

Really great feedback here, thank you @versecafe! Excited to see that PR develop 👀

@steven-tey This does make create some annoying behaviour for an external user using the package on something other than NextJS but as next is actively in the deps list that should be extremely unlikely

New addition to package readme

Transpiling

As of version 0.1.0 the package is not bundled, this means transpilining the module is highly recommended, this was done to support React Server Components.

If you are using NextJS this is as simple as:

// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  transpilePackages: ["@dub/ui"]
}

If there are any changes you'd like let me know but it should be production ready, and got a version bump as it would be considered a breaking change for someone using it externally. It is compatible and fully functional with the current dub/main branch and there should be no need for any change for any branches besides if someone has ui changes in work they'll need to ensure they properly declare client components.