From e7405a6562096a8f78e9d5b0d63ff6b71d84985a Mon Sep 17 00:00:00 2001 From: Gaurav Singh <88540812+jbrocksfellas@users.noreply.github.com> Date: Mon, 6 Jan 2025 21:26:36 +0530 Subject: [PATCH 1/6] docs: fix typo in typescript.mdx of repo-docs (#9674) ### Description Corrected a minor typo in the docs/repo-docs/guides/tools/typescript.mdx file of the documentation. This update ensures better readability and accuracy for users. ### Testing Instructions No specific testing is required, as this is a simple documentation update. To verify the change: Navigate to docs/repo-docs/guides/tools/typescript.mdx. Confirm that the typo has been corrected and the updated text appears as expected. --- docs/repo-docs/guides/tools/typescript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/repo-docs/guides/tools/typescript.mdx b/docs/repo-docs/guides/tools/typescript.mdx index 4a5f8dbae5dc3..a578285f11e0e 100644 --- a/docs/repo-docs/guides/tools/typescript.mdx +++ b/docs/repo-docs/guides/tools/typescript.mdx @@ -81,7 +81,7 @@ The other `tsconfig` files in this package use the `extends` key to start with t Inside `package.json`, name the package so it can be referenced in the rest of the Workspace: -```json title="packages/tsconfig/package.json" +```json title="packages/typescript-config/package.json" { "name": "@repo/typescript-config" } From c1c6e4aeb33740827babab8d733cbb9a98e005a6 Mon Sep 17 00:00:00 2001 From: Anthony Shew Date: Mon, 6 Jan 2025 15:05:43 -0700 Subject: [PATCH 2/6] docs: document creating packages with framework bindings (#9222) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Description We've had users ask about how to create bindings in their packages, so documenting it here. ### Testing Instructions 👀 --- .../guides/frameworks/framework-bindings.mdx | 84 +++++++++++++++++++ docs/repo-docs/guides/frameworks/meta.json | 2 +- 2 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 docs/repo-docs/guides/frameworks/framework-bindings.mdx diff --git a/docs/repo-docs/guides/frameworks/framework-bindings.mdx b/docs/repo-docs/guides/frameworks/framework-bindings.mdx new file mode 100644 index 0000000000000..1aa5fb0add3dc --- /dev/null +++ b/docs/repo-docs/guides/frameworks/framework-bindings.mdx @@ -0,0 +1,84 @@ +--- +title: Framework bindings in libraries +description: Learn how to create framework bindings in packages. +--- + +import { PackageManagerTabs, Tab } from '#/components/tabs'; +import { Callout } from '#/components/callout'; + +Framework bindings in a [Library Package](/repo/docs/core-concepts/package-types#library-packages) integrate your library's code more deeply with a framework by leveraging APIs from the framework directly in the library. + +To do this, use the `peerDependencies` field in `package.json` of the library, which makes the framework APIs available in your library without installing it directly in the package. + + + On this page, we'll be using Next.js for examples, but the concepts below + apply to any framework or other dependency. + + +## Example + +Add a `peerDependency` to your library for the dependency that you intend to create bindings for. + +```json title="./packages/ui/package.json" +{ + "name": "@repo/ui", + "peerDependencies": { + "next": "*" + } +} +``` + + + In the example above, the `peerDependency` for `next` accepts any version. You + may want to specify a range (for example, `">=15"`) according to your needs. + + Additionally, for older package managers, you may need to instruct your package manager to install peer dependencies with configuration, or add the dependency to `devDependencies` as a workaround. + + +This will make the dependency available in your library, allowing you to write code like below. Note the `className` prop, which sets a default styling for this component in the monorepo and can be overridden in the `props` object. + +```tsx title="./packages/ui/src/link.tsx" +import Link from 'next/link'; +import type { ComponentProps } from 'react'; + +type CustomLinkProps = ComponentProps; + +export function CustomLink({ children, ...props }: CustomLinkProps) { + return ( + + {children} + + ); +} +``` + +The version of `next` that will be resolved for the package will come from the consumers of the library. For example, if Next.js 15 is installed in your applications, the TypeScript types and APIs for `next` will also be Next.js 15. + +## Splitting framework bindings using entrypoints + +Using export paths to split a package into framework-specific entrypoints is the simplest way to add bindings to a library that aims to support multiple frameworks. By splitting entrypoints, bundlers have an easier time understanding the framework you intend to target and you're less likely to see strange bundling errors. + +The example below shows a library with two entrypoints, each for a different type of link component. These abstractions likely contain your own styles, APIs, and other adjustments on top of the element they're wrapping. + +- `./link`: An `` HTML tag with some default styles from your design system +- `./next-js/link`: A customized version of [the Next.js `Link` component](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#link-component) with props that are preset to your organization's preferences +- `./svelte/link`: A customized version of an [`a` tag for Svelte](https://svelte.dev/docs/kit/link-options) with presets. + +```json title="./packages/ui/package.json" +{ + "exports": { + "./link": "./dist/link.js", + "./next-js/link": "./dist/next-js/link.js" + }, + "peerDependencies": { + "next": "*" + } +} +``` + + + In the example above, the `peerDependency` for `next` accepts any version. You + may want to specify a range (for example, `">=15"`) according to your needs. + + +This concept can be applied to any number of frameworks or other dependencies that you'd like to provide bindings for. diff --git a/docs/repo-docs/guides/frameworks/meta.json b/docs/repo-docs/guides/frameworks/meta.json index 691dcca5f6d73..1cd9f18eb93c2 100644 --- a/docs/repo-docs/guides/frameworks/meta.json +++ b/docs/repo-docs/guides/frameworks/meta.json @@ -1,3 +1,3 @@ { - "pages": ["nextjs", "sveltekit", "vite", "nuxt"] + "pages": ["nextjs", "sveltekit", "vite", "nuxt", "framework-bindings"] } From 7b077bd30d9f3ca8e8c4927ed3f399b7c1df88b3 Mon Sep 17 00:00:00 2001 From: Anthony Shew Date: Mon, 6 Jan 2025 15:06:38 -0700 Subject: [PATCH 3/6] docs: add note about packaging patterns (#9673) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Description A few corrections and additions on the Structuring your Repository page for added clarity. ### Testing Instructions 👀 --- .../creating-an-internal-package.mdx | 2 +- .../structuring-a-repository.mdx | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/repo-docs/crafting-your-repository/creating-an-internal-package.mdx b/docs/repo-docs/crafting-your-repository/creating-an-internal-package.mdx index 160f1e54aca72..b98dea95e31a8 100644 --- a/docs/repo-docs/crafting-your-repository/creating-an-internal-package.mdx +++ b/docs/repo-docs/crafting-your-repository/creating-an-internal-package.mdx @@ -12,7 +12,7 @@ import { Files, File, Folder } from '#/components/files'; ![Visual representation of a Package Graph in a Turborepo.](/images/docs/package-graph.png) -Let's create your first Internal Package to share math utilities in your repo using the guidance in the [Anatomy of a package](/repo/docs/crafting-your-repository/structuring-a-repository#anatomy-of-a-package) section. In the steps below, we assume you've [created a new repository using `create-turbo`](/repo/docs/getting-started/installation) or are using a similarly structured repository. +Let's create your first Internal Package to share math utilities in your repo using the guidance in the [Anatomy of a package](/repo/docs/crafting-your-repository/structuring-a-repository#anatomy-of-a-package) section and the [Compiled Packages](/repo/docs/core-concepts/internal-packages#compiled-packages) pattern. In the steps below, we assume you've [created a new repository using `create-turbo`](/repo/docs/getting-started/installation) or are using a similarly structured repository. diff --git a/docs/repo-docs/crafting-your-repository/structuring-a-repository.mdx b/docs/repo-docs/crafting-your-repository/structuring-a-repository.mdx index 6558cd1a96d11..3c0b49084f901 100644 --- a/docs/repo-docs/crafting-your-repository/structuring-a-repository.mdx +++ b/docs/repo-docs/crafting-your-repository/structuring-a-repository.mdx @@ -280,13 +280,15 @@ For example, if you had a `@repo/math` package, you might have the following `ex ```json title="./packages/math/package.json" { "exports": { - ".": "./dist/constants.ts", - "./add": "./dist/add.ts", - "./subtract": "./dist/subtract.ts" + ".": "./src/constants.ts", + "./add": "./src/add.ts", + "./subtract": "./src/subtract.ts" } } ``` +Note that this example uses the [Just-in-Time Package](/repo/docs/core-concepts/internal-packages#just-in-time-packages) pattern for simplicity. It exports TypeScript directly, but you might choose to use the [Compiled Package](/repo/docs/core-concepts/internal-packages#compiled-packages) pattern instead. + The `exports` field in this example requires modern versions of Node.js and TypeScript. @@ -307,9 +309,9 @@ Using exports this way provides three major benefits: - **IDE autocompletion**: By specifying the entrypoints for your package using `exports`, you can ensure that your code editor can provide auto-completion for the package's exports. - You may also specify `exports` using a wildcard. However, you will lose IDE - autocompletion due to performance tradeoffs with the TypeScript compiler. For - more information, visit [the TypeScript + You may also specify `exports` using a wildcard. However, you will lose some + IDE autocompletion due to performance tradeoffs with the TypeScript compiler. + For more information, visit [the TypeScript guide](/repo/docs/guides/tools/typescript#package-entrypoint-wildcards). From 90369bd86cd11ae59d5f94f60bcdbe49313d065f Mon Sep 17 00:00:00 2001 From: NotNotARobot <164791169+NotNotARobot@users.noreply.github.com> Date: Tue, 7 Jan 2025 09:30:55 -0500 Subject: [PATCH 4/6] chore: merge `summary` into a single step (#9672) ### Description This'll make the execution time of this specific action faster, as it has to create and run less script files. --- .github/workflows/test-js-packages.yml | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/.github/workflows/test-js-packages.yml b/.github/workflows/test-js-packages.yml index f06215227c2c0..ef022f82f8437 100644 --- a/.github/workflows/test-js-packages.yml +++ b/.github/workflows/test-js-packages.yml @@ -88,8 +88,6 @@ jobs: - js_packages steps: - name: Compute info - id: info - if: always() run: | cancelled=false failure=false @@ -106,17 +104,12 @@ jobs: subjob ${{needs.js_packages.result}} if [ "$cancelled" = "true" ]; then - echo "cancelled=true" >> $GITHUB_OUTPUT + echo "Job was cancelled." + exit 0 elif [ "$failure" = "true" ]; then - echo "failure=true" >> $GITHUB_OUTPUT + echo "Job failed." + exit 1 else - echo "success=true" >> $GITHUB_OUTPUT + echo "Job succeeded." + exit 0 fi - - - name: Failed - if: steps.info.outputs.failure == 'true' - run: exit 1 - - - name: Succeeded - if: steps.info.outputs.success == 'true' - run: echo Ok From f39092e188f5ed79c8c94756d10087df5e752569 Mon Sep 17 00:00:00 2001 From: Anthony Shew Date: Tue, 7 Jan 2025 17:59:22 -0700 Subject: [PATCH 5/6] docs: guide for shadcn/ui (#9675) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Description shadcn/ui recently added [experimental support for monorepos](https://ui.shadcn.com/docs/monorepo), so let's make a pointer for folks who come to Turborepo first. ### Testing Instructions 👀 --- docs/repo-docs/guides/tools/shadcn-ui.mdx | 70 +++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 docs/repo-docs/guides/tools/shadcn-ui.mdx diff --git a/docs/repo-docs/guides/tools/shadcn-ui.mdx b/docs/repo-docs/guides/tools/shadcn-ui.mdx new file mode 100644 index 0000000000000..b910876208f27 --- /dev/null +++ b/docs/repo-docs/guides/tools/shadcn-ui.mdx @@ -0,0 +1,70 @@ +--- +title: shadcn/ui +description: Learn how to use shadcn/ui in a Turborepo. +--- + +import { PackageManagerTabs, Tab } from '#/components/tabs'; + +shadcn/ui is an open-source set of beautifully designed components made with Tailwind CSS that you can copy and paste into your apps. + +To get started with shadcn/ui in a new monorepo, run: + + + + +```bash title="Terminal" +npx shadcn@canary init +``` + + + + + +```bash title="Terminal" +npx shadcn@canary init +``` + + + + + +```bash title="Terminal" +pnpm dlx shadcn@canary init +``` + + + + +When prompted, select the option for monorepos. + +To add a component, run: + + + + +```bash title="Terminal" +npx shadcn@canary add [COMPONENT] +``` + + + + + +```bash title="Terminal" +npx shadcn@canary add [COMPONENT] +``` + + + + + +```bash title="Terminal" +pnpm dlx shadcn@canary add [COMPONENT] +``` + + + + +## More information + +To learn more about using shadcn/ui in Turborepo, [visit the docs for shadcn/ui](https://ui.shadcn.com/docs/monorepo). From a21c30f56aadb6116cc30d43bb1b8bf7cd0b76ca Mon Sep 17 00:00:00 2001 From: Anthony Shew Date: Wed, 8 Jan 2025 11:29:37 -0700 Subject: [PATCH 6/6] docs: add link to shadcn/ui page (#9678) ### Description Links are good. --- docs/repo-docs/guides/tools/shadcn-ui.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/repo-docs/guides/tools/shadcn-ui.mdx b/docs/repo-docs/guides/tools/shadcn-ui.mdx index b910876208f27..f1c042f8341ec 100644 --- a/docs/repo-docs/guides/tools/shadcn-ui.mdx +++ b/docs/repo-docs/guides/tools/shadcn-ui.mdx @@ -5,7 +5,7 @@ description: Learn how to use shadcn/ui in a Turborepo. import { PackageManagerTabs, Tab } from '#/components/tabs'; -shadcn/ui is an open-source set of beautifully designed components made with Tailwind CSS that you can copy and paste into your apps. +[shadcn/ui](https://ui.shadcn.com/docs/monorepo) is an open-source set of beautifully designed components made with Tailwind CSS that you can copy and paste into your apps. To get started with shadcn/ui in a new monorepo, run: