Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

True RSC support, CJS compile-time exports. #64

Merged
merged 6 commits into from Sep 19, 2023
Merged

Conversation

rektdeckard
Copy link
Member

@rektdeckard rektdeckard commented Sep 15, 2023

This patch refactors a fair amount of the lib to solve several problems:

  1. Support of React Server Components without forcing "use client" (principally for NextJS users)
  2. Support of CJS-based build tooling, and possibly obviate the need to modularizeImports in NextJS builds, and should also fix EMFILE exceptions during compilation

The way this works:

  • Icon path definitions are now extracted into /src/defs/
  • For regular CSR, components in /src/csr/ now import their corresponding defs and render them into an IconBase, context and all. They can still be imported from the barrel file.
  • For any environment that cannot use hooks, components in /src/ssr/ import their defs and render them into an SSRBase, sans context. These can be imported from the SSR barrel file.

What this should now look like for real-world users:

// CSR application
import { Smiley } from "@phosphor-icons/react";

function MyRegularComponent() {
  return <Smiley size={48} color="limegreen" />;
}
// NextJS 13+ app Server Component
import { Smiley } from "@phosphor-icons/react/dist/ssr";

function MyServerComponent() {
  return <Smiley size={48} color="limegreen" />;
}

@rektdeckard rektdeckard self-assigned this Sep 15, 2023
@rektdeckard rektdeckard added the enhancement New feature or request label Sep 15, 2023
@rektdeckard
Copy link
Member Author

This build is live on NPM under version 2.1.3, or the @next tag

@rektdeckard
Copy link
Member Author

Considering making this the default behavior rather than the exception, I.E.

import { Fish } from "@phosphor-icons/react"; // SSR version
import { Fish as ClientFish } from "@phosphor-icons/react/dist/csr"; // CSR version with `useContext`

This may make sense given that Context usage is probably pretty rare, and Next.js and other frameworks supporting RSC are on the rise.

@rektdeckard rektdeckard merged commit a72ef63 into master Sep 19, 2023
1 check passed
@rektdeckard rektdeckard deleted the modern-extensions branch September 19, 2023 21:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant