diff --git a/examples/kitchen-sink/apps/blog/app/entry.server.tsx b/examples/kitchen-sink/apps/blog/app/entry.server.tsx index d2051de0ea187..cef2e81af7164 100644 --- a/examples/kitchen-sink/apps/blog/app/entry.server.tsx +++ b/examples/kitchen-sink/apps/blog/app/entry.server.tsx @@ -16,6 +16,6 @@ export default function handleRequest( return new Response("" + markup, { status: responseStatusCode, - headers: responseHeaders + headers: responseHeaders, }); } diff --git a/examples/kitchen-sink/apps/blog/app/root.tsx b/examples/kitchen-sink/apps/blog/app/root.tsx index 10673c9bd9fcd..0aa52f54a2a0d 100644 --- a/examples/kitchen-sink/apps/blog/app/root.tsx +++ b/examples/kitchen-sink/apps/blog/app/root.tsx @@ -6,7 +6,7 @@ import { Outlet, Scripts, ScrollRestoration, - useCatch + useCatch, } from "remix"; import type { LinksFunction } from "remix"; @@ -20,8 +20,8 @@ export let links: LinksFunction = () => { { rel: "stylesheet", href: darkStylesUrl, - media: "(prefers-color-scheme: dark)" - } + media: "(prefers-color-scheme: dark)", + }, ]; }; @@ -95,7 +95,7 @@ export function CatchBoundary() { function Document({ children, - title + title, }: { children: React.ReactNode; title?: string; diff --git a/examples/kitchen-sink/apps/blog/app/routes/demos/about.tsx b/examples/kitchen-sink/apps/blog/app/routes/demos/about.tsx index e44e8279ea3d2..6fc03b0244a3c 100644 --- a/examples/kitchen-sink/apps/blog/app/routes/demos/about.tsx +++ b/examples/kitchen-sink/apps/blog/app/routes/demos/about.tsx @@ -5,7 +5,7 @@ import stylesUrl from "~/styles/demos/about.css"; export let meta: MetaFunction = () => { return { - title: "About Remix" + title: "About Remix", }; }; diff --git a/examples/kitchen-sink/apps/storefront/src/pages/index.tsx b/examples/kitchen-sink/apps/storefront/src/pages/index.tsx index 79bc173853331..c60cd9383101d 100644 --- a/examples/kitchen-sink/apps/storefront/src/pages/index.tsx +++ b/examples/kitchen-sink/apps/storefront/src/pages/index.tsx @@ -1,5 +1,5 @@ import { log } from "logger"; -import { CounterButton } from "ui"; +import { CounterButton, NewTabLink } from "ui"; export default function Store() { log("Hey! This is Home."); @@ -7,6 +7,9 @@ export default function Store() {

Store

+ + Built With TurboRepo +
); } diff --git a/examples/kitchen-sink/packages/ui/package.json b/examples/kitchen-sink/packages/ui/package.json index ec36acd0a3dc3..3d2de4731b0b2 100644 --- a/examples/kitchen-sink/packages/ui/package.json +++ b/examples/kitchen-sink/packages/ui/package.json @@ -12,8 +12,8 @@ ], "scripts": { "test": "jest", - "build": "tsup src/index.tsx --format esm,cjs --dts --external react", - "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react", + "build": "tsup src/index.tsx --format esm,cjs --dts --external react --inject react-shim.js", + "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react --inject react-shim.js", "lint": "TIMING=1 eslint src --fix", "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" }, diff --git a/examples/kitchen-sink/packages/ui/react-shim.js b/examples/kitchen-sink/packages/ui/react-shim.js new file mode 100644 index 0000000000000..d14e6dd035ef9 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/react-shim.js @@ -0,0 +1,3 @@ +// Explanation for why this is required: https://esbuild.github.io/content-types/#auto-import-for-jsx +import React from 'react' +export { React } diff --git a/examples/kitchen-sink/packages/ui/src/CounterButton.tsx b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx new file mode 100644 index 0000000000000..cacfb90e12054 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; + +export const CounterButton = () => { + const [count, setCount] = React.useState(0); + return ( +
+

+ This is component iadasdfsdfdffsfsds from ui +

+

+ +

+
+ ); +}; diff --git a/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx b/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx new file mode 100644 index 0000000000000..890b67d51b2c1 --- /dev/null +++ b/examples/kitchen-sink/packages/ui/src/NewTabLink.tsx @@ -0,0 +1,14 @@ +export const NewTabLink = ({ + children, + href, + ...other +}: { + children: React.ReactNode; + href: string; +}) => { + return ( + + {children} + + ); +}; diff --git a/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx b/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx index a853a2b79fc49..89562084b1752 100644 --- a/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx +++ b/examples/kitchen-sink/packages/ui/src/__tests__/index.test.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { CounterButton } from "../index"; +import { CounterButton } from "../CounterButton"; describe("CounterButton", () => { it("renders without crashing", () => { diff --git a/examples/kitchen-sink/packages/ui/src/index.tsx b/examples/kitchen-sink/packages/ui/src/index.tsx index cacfb90e12054..dae141cd61d81 100644 --- a/examples/kitchen-sink/packages/ui/src/index.tsx +++ b/examples/kitchen-sink/packages/ui/src/index.tsx @@ -1,23 +1,2 @@ -import * as React from "react"; - -export const CounterButton = () => { - const [count, setCount] = React.useState(0); - return ( -
-

- This is component iadasdfsdfdffsfsds from ui -

-

- -

-
- ); -}; +export { NewTabLink } from "./NewTabLink"; +export { CounterButton } from "./CounterButton";