Add Remix/ESBuild support by checking the _debugOwner._debugSource (#73)

* fix: add support to specify project's root * fix: add path modifier * fix: remove bad code * fix: add changeset * fix: remix example * fix: use pathModifier in ContextMenu --------- Co-authored-by: Eric Clemmons <eric@smarterspam.com>
ericclemmons · Nov 25, 2023 · 9246a89 · 9246a89
1 parent b56ca31
commit 9246a89
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 50 deletions.
diff --git a/.changeset/witty-bobcats-serve.md 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
@@ -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<ReturnType<typeof getUser>>;
-};
-
-export const loader: LoaderFunction = async ({ request }) => {
-  return json<LoaderData>({
-    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 (
     <html lang="en" className="h-full">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>
@@ -49,7 +43,7 @@ export default function App() {
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
-        <ClickToComponent editor="vscode-insiders" />
+        <ClickToComponent pathModifier={(path: string) => `${projectDir}/${path}`} />
       </body>
     </html>
   );

diff --git 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<string | undefined> {
+export async function getUserId(
+  request: Request
+): Promise<User["id"] | undefined> {
   const session = await getSession(request);
   const userId = session.get(USER_SESSION_KEY);
   return userId;
 }
 
-export async function getUser(request: Request): Promise<null | User> {
+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<null | User> {
 export async function requireUserId(
   request: Request,
   redirectTo: string = new URL(request.url).pathname
-): Promise<string> {
+) {
   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
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/remix/postcss.config.js 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
diff --git a/apps/remix/tailwind.config.ts 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
@@ -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}
       />`}
     </${FloatingPortal}
   `

diff --git a/packages/click-to-react-component/src/ContextMenu.js b/packages/click-to-react-component/src/ContextMenu.js
@@ -35,7 +35,7 @@ export const ContextMenu = React.forwardRef(
     props,
     ref
   ) => {
-    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
@@ -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
@@ -6,16 +6,19 @@
 /**
  * @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!
     // @ts-ignore Property 'columnNumber' does not exist on type 'Source'.ts(2339)
     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
@@ -2,14 +2,18 @@ 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']]
 
 export type Target = HTMLElement
 
 export type ContextMenuProps = {
-  onClose?: () => void
-}
+  onClose?: () => void;
+  pathModifier?: PathModifier;
+}