diff --git a/.changeset/witty-bobcats-serve.md b/.changeset/witty-bobcats-serve.md new file mode 100644 index 0000000..2d99496 --- /dev/null +++ b/.changeset/witty-bobcats-serve.md @@ -0,0 +1,5 @@ +--- +'click-to-react-component': minor +--- + +Add remix/esbuild support by checking the \_debugOwner.\_debugSource diff --git a/apps/remix/app/root.tsx b/apps/remix/app/root.tsx index 21dc6be..313ef13 100644 --- a/apps/remix/app/root.tsx +++ b/apps/remix/app/root.tsx @@ -1,8 +1,6 @@ -import type { - LinksFunction, - LoaderFunction, - MetaFunction, -} from "@remix-run/node"; +import { cssBundleHref } from "@remix-run/css-bundle"; +import type { LinksFunction, LoaderArgs } from "@remix-run/node"; +import { ClickToComponent } from "click-to-react-component"; import { json } from "@remix-run/node"; import { Links, @@ -11,36 +9,32 @@ import { Outlet, Scripts, ScrollRestoration, + useLoaderData, } from "@remix-run/react"; -import { ClickToComponent } from "click-to-react-component"; -import tailwindStylesheetUrl from "./styles/tailwind.css"; -import { getUser } from "./session.server"; - -export const links: LinksFunction = () => { - return [{ rel: "stylesheet", href: tailwindStylesheetUrl }]; -}; +import { getUser } from "~/session.server"; +import stylesheet from "~/tailwind.css"; -export const meta: MetaFunction = () => ({ - charset: "utf-8", - title: "Remix Notes", - viewport: "width=device-width,initial-scale=1", -}); +export const links: LinksFunction = () => [ + { rel: "stylesheet", href: stylesheet }, + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; -type LoaderData = { - user: Awaited>; -}; - -export const loader: LoaderFunction = async ({ request }) => { - return json({ - user: await getUser(request), +export const loader = async ({ request }: LoaderArgs) => { + return json({ + user: await getUser(request), + projectDir: process.env.NODE_ENV === 'production' ? undefined : process.cwd(), }); }; export default function App() { + const { projectDir } = useLoaderData(); + return ( + + @@ -49,7 +43,7 @@ export default function App() { - + `${projectDir}/${path}`} /> ); diff --git a/apps/remix/app/session.server.ts b/apps/remix/app/session.server.ts index aa9efde..31a861e 100644 --- a/apps/remix/app/session.server.ts +++ b/apps/remix/app/session.server.ts @@ -10,7 +10,6 @@ export const sessionStorage = createCookieSessionStorage({ cookie: { name: "__session", httpOnly: true, - maxAge: 0, path: "/", sameSite: "lax", secrets: [process.env.SESSION_SECRET], @@ -25,13 +24,15 @@ export async function getSession(request: Request) { return sessionStorage.getSession(cookie); } -export async function getUserId(request: Request): Promise { +export async function getUserId( + request: Request +): Promise { const session = await getSession(request); const userId = session.get(USER_SESSION_KEY); return userId; } -export async function getUser(request: Request): Promise { +export async function getUser(request: Request) { const userId = await getUserId(request); if (userId === undefined) return null; @@ -44,7 +45,7 @@ export async function getUser(request: Request): Promise { export async function requireUserId( request: Request, redirectTo: string = new URL(request.url).pathname -): Promise { +) { const userId = await getUserId(request); if (!userId) { const searchParams = new URLSearchParams([["redirectTo", redirectTo]]); diff --git a/apps/remix/app/tailwind.css b/apps/remix/app/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/apps/remix/app/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/apps/remix/postcss.config.js b/apps/remix/postcss.config.js new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/apps/remix/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/apps/remix/tailwind.config.js b/apps/remix/tailwind.config.js deleted file mode 100644 index 6432a62..0000000 --- a/apps/remix/tailwind.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - content: ["./app/**/*.{ts,tsx,jsx,js}"], - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/apps/remix/tailwind.config.ts b/apps/remix/tailwind.config.ts new file mode 100644 index 0000000..64a5243 --- /dev/null +++ b/apps/remix/tailwind.config.ts @@ -0,0 +1,9 @@ +import type { Config } from "tailwindcss"; + +export default { + content: ["./app/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +} satisfies Config; diff --git a/packages/click-to-react-component/src/ClickToComponent.js b/packages/click-to-react-component/src/ClickToComponent.js index 1a21383..7ed3ea5 100644 --- a/packages/click-to-react-component/src/ClickToComponent.js +++ b/packages/click-to-react-component/src/ClickToComponent.js @@ -21,7 +21,7 @@ export const State = /** @type {const} */ ({ /** * @param {Props} props */ -export function ClickToComponent({ editor = 'vscode' }) { +export function ClickToComponent({ editor = 'vscode', pathModifier }) { const [state, setState] = React.useState( /** @type {State[keyof State]} */ (State.IDLE) @@ -41,7 +41,7 @@ export function ClickToComponent({ editor = 'vscode' }) { ) { if (state === State.HOVER && target instanceof HTMLElement) { const source = getSourceForElement(target) - const path = getPathToSource(source) + const path = getPathToSource(source, pathModifier) const url = getUrl({ editor, pathToSource: path, @@ -174,11 +174,9 @@ export function ClickToComponent({ editor = 'vscode' }) { if (state === State.IDLE) { delete window.document.body.dataset.clickToComponent - if (target) { delete target.dataset.clickToComponentTarget } - return } @@ -233,6 +231,7 @@ export function ClickToComponent({ editor = 'vscode' }) { ${html`<${ContextMenu} key="click-to-component-contextmenu" onClose=${onClose} + pathModifier=${pathModifier} />`} { - const { onClose } = props + const { onClose, pathModifier } = props const [target, setTarget] = React.useState( /** @type {HTMLElement | null} */ @@ -327,7 +327,7 @@ export const ContextMenu = React.forwardRef( ${instances.map((instance, i) => { const name = getDisplayNameForInstance(instance) const source = getSourceForInstance(instance) - const path = getPathToSource(source) + const path = getPathToSource(source, pathModifier) const props = getPropsForInstance(instance) return html` diff --git a/packages/click-to-react-component/src/getPathToSource.js b/packages/click-to-react-component/src/getPathToSource.js index a3ef639..fb99337 100644 --- a/packages/click-to-react-component/src/getPathToSource.js +++ b/packages/click-to-react-component/src/getPathToSource.js @@ -1,11 +1,13 @@ /** * @typedef {import('react-reconciler').Source} Source + * @typedef {import('./types').PathModifier} PathModifier */ /** * @param {Source} source + * @param {PathModifier} pathModifier */ -export function getPathToSource(source) { +export function getPathToSource(source, pathModifier) { const { // It _does_ exist! // @ts-ignore Property 'columnNumber' does not exist on type 'Source'.ts(2339) @@ -14,5 +16,10 @@ export function getPathToSource(source) { lineNumber = 1, } = source - return `${fileName}:${lineNumber}:${columnNumber}` + let path = `${fileName}:${lineNumber}:${columnNumber}` + if (pathModifier) { + path = pathModifier(path) + } + + return path } diff --git a/packages/click-to-react-component/src/getSourceForInstance.js b/packages/click-to-react-component/src/getSourceForInstance.js index b3c9d5d..a59e690 100644 --- a/packages/click-to-react-component/src/getSourceForInstance.js +++ b/packages/click-to-react-component/src/getSourceForInstance.js @@ -6,8 +6,11 @@ /** * @param {Fiber} instance */ -export function getSourceForInstance({ _debugSource }) { - if (!_debugSource) return +export function getSourceForInstance({ _debugSource, _debugOwner }) { + // source is sometimes stored on _debugOwner + const source = _debugSource || (_debugOwner && _debugOwner._debugSource) + + if (!source) return const { // It _does_ exist! @@ -15,7 +18,7 @@ export function getSourceForInstance({ _debugSource }) { columnNumber = 1, fileName, lineNumber = 1, - } = _debugSource + } = source return { columnNumber, fileName, lineNumber } } diff --git a/packages/click-to-react-component/src/types.d.ts b/packages/click-to-react-component/src/types.d.ts index f9df9b8..727e296 100644 --- a/packages/click-to-react-component/src/types.d.ts +++ b/packages/click-to-react-component/src/types.d.ts @@ -2,8 +2,11 @@ export { ClickToComponent } from './ClickToComponent' export type Editor = 'vscode' | 'vscode-insiders' +export type PathModifier = (path: string) => string; + export type ClickToComponentProps = { - editor?: Editor + editor?: Editor; + pathModifier?: PathModifier; } export type Coords = [MouseEvent['pageX'], MouseEvent['pageY']] @@ -11,5 +14,6 @@ export type Coords = [MouseEvent['pageX'], MouseEvent['pageY']] export type Target = HTMLElement export type ContextMenuProps = { - onClose?: () => void -} + onClose?: () => void; + pathModifier?: PathModifier; +} \ No newline at end of file