diff --git a/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts b/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts index 212e06c..5bd38cf 100644 --- a/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts +++ b/apps/journal/app/routes/api.routes.$id.edit-in-planner.ts @@ -33,9 +33,18 @@ export async function action({ params, request }: Route.ActionArgs) { return data({ error: "Failed to create Planner session" }, { status: 502 }); } - const session = (await sessionResp.json()) as { url: string }; + const session = (await sessionResp.json()) as { + url: string; + initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>; + }; + + // Encode waypoints in URL params (small — just coordinates, not full GPX) + const urlParams = new URLSearchParams({ returnUrl }); + if (session.initialWaypoints?.length) { + urlParams.set("waypoints", JSON.stringify(session.initialWaypoints)); + } return data({ - url: `${plannerUrl}${session.url}?returnUrl=${encodeURIComponent(returnUrl)}`, + url: `${plannerUrl}${session.url}?${urlParams}`, }); } diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx index 93bf228..779e4f1 100644 --- a/apps/planner/app/components/SessionView.tsx +++ b/apps/planner/app/components/SessionView.tsx @@ -21,10 +21,11 @@ interface SessionViewProps { callbackUrl?: string; callbackToken?: string; returnUrl?: string; + initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>; } -export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl }: SessionViewProps) { - const yjs = useYjs(sessionId); +export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl, initialWaypoints }: SessionViewProps) { + const yjs = useYjs(sessionId, initialWaypoints); const { isHost, computing, routeStats, requestRoute } = useRouting(yjs); const [highlightPosition, setHighlightPosition] = useState<[number, number] | null>(null); diff --git a/apps/planner/app/lib/use-yjs.ts b/apps/planner/app/lib/use-yjs.ts index 066c7fb..e7f4d67 100644 --- a/apps/planner/app/lib/use-yjs.ts +++ b/apps/planner/app/lib/use-yjs.ts @@ -36,10 +36,14 @@ export interface YjsState { connected: boolean; } -export function useYjs(sessionId: string): YjsState | null { +export function useYjs( + sessionId: string, + initialWaypoints?: Array<{ lat: number; lon: number; name?: string }>, +): YjsState | null { const [state, setState] = useState(null); const providerRef = useRef(null); const docRef = useRef(null); + const initializedWaypoints = useRef(false); useEffect(() => { const doc = new Y.Doc(); @@ -52,10 +56,28 @@ export function useYjs(sessionId: string): YjsState | null { const waypoints = doc.getArray>("waypoints"); const routeData = doc.getMap("routeData"); - // Use persistent identity const { color, name } = getOrCreateUserIdentity(); provider.awareness.setLocalStateField("user", { color, name }); + // Initialize waypoints once after first sync + if (initialWaypoints?.length && !initializedWaypoints.current) { + (provider as unknown as { on(event: string, cb: () => void): void }).on("synced", () => { + // Only add if the doc is empty (avoid duplicating on reconnect) + if (waypoints.length === 0 && !initializedWaypoints.current) { + initializedWaypoints.current = true; + doc.transact(() => { + for (const wp of initialWaypoints) { + const yMap = new Y.Map(); + yMap.set("lat", wp.lat); + yMap.set("lon", wp.lon); + if (wp.name) yMap.set("name", wp.name); + waypoints.push([yMap]); + } + }); + } + }); + } + const updateState = (connected: boolean) => { setState({ doc, diff --git a/apps/planner/app/routes/api.sessions.ts b/apps/planner/app/routes/api.sessions.ts index 8fc4eb9..66c437b 100644 --- a/apps/planner/app/routes/api.sessions.ts +++ b/apps/planner/app/routes/api.sessions.ts @@ -1,7 +1,7 @@ import { data } from "react-router"; import type { Route } from "./+types/api.sessions"; -import { createSession, initializeSessionWithWaypoints, listSessions } from "~/lib/sessions"; -import { parseGpx } from "@trails-cool/gpx"; +import { createSession, listSessions } from "~/lib/sessions"; +import { parseGpxAsync } from "@trails-cool/gpx"; export async function action({ request }: Route.ActionArgs) { if (request.method !== "POST") { @@ -17,10 +17,11 @@ export async function action({ request }: Route.ActionArgs) { const session = await createSession({ callbackUrl, callbackToken }); + let initialWaypoints: Array<{ lat: number; lon: number; name?: string }> | undefined; if (gpx) { try { - const gpxData = parseGpx(gpx); - initializeSessionWithWaypoints(session.id, gpxData.waypoints); + const gpxData = await parseGpxAsync(gpx); + initialWaypoints = gpxData.waypoints; } catch (_e) { // Continue with empty session if GPX is invalid } @@ -30,6 +31,7 @@ export async function action({ request }: Route.ActionArgs) { { sessionId: session.id, url: `/session/${session.id}`, + initialWaypoints, }, { status: 201 }, ); diff --git a/apps/planner/app/routes/session.$id.tsx b/apps/planner/app/routes/session.$id.tsx index fca4983..101c881 100644 --- a/apps/planner/app/routes/session.$id.tsx +++ b/apps/planner/app/routes/session.$id.tsx @@ -29,6 +29,11 @@ export default function SessionPage({ loaderData }: Route.ComponentProps) { const { id } = useParams(); const [searchParams] = useSearchParams(); const returnUrl = searchParams.get("returnUrl") ?? undefined; + const waypointsParam = searchParams.get("waypoints"); + let initialWaypoints: Array<{ lat: number; lon: number; name?: string }> | undefined; + if (waypointsParam) { + try { initialWaypoints = JSON.parse(waypointsParam); } catch { /* ignore */ } + } return (
@@ -52,6 +57,7 @@ export default function SessionPage({ loaderData }: Route.ComponentProps) { callbackUrl={loaderData.callbackUrl ?? undefined} callbackToken={loaderData.callbackToken ?? undefined} returnUrl={returnUrl} + initialWaypoints={initialWaypoints} /> )} diff --git a/package.json b/package.json index 142ae2d..4f7f882 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "i18next-browser-languagedetector": "^8.2.1", "jsdom": "^29.0.1", "leaflet": "^1.9.4", + "linkedom": "^0.18.12", "playwright": "^1.58.2", "postgres": "^3.4.8", "prettier": "^3.8.1", diff --git a/packages/gpx/src/index.ts b/packages/gpx/src/index.ts index 6dc0a8d..46ec02a 100644 --- a/packages/gpx/src/index.ts +++ b/packages/gpx/src/index.ts @@ -1,3 +1,3 @@ -export { parseGpx } from "./parse"; +export { parseGpx, parseGpxAsync } from "./parse"; export { generateGpx } from "./generate"; export type { GpxData, TrackPoint, ElevationProfile } from "./types"; diff --git a/packages/gpx/src/parse.ts b/packages/gpx/src/parse.ts index d1069ea..b9cb5dc 100644 --- a/packages/gpx/src/parse.ts +++ b/packages/gpx/src/parse.ts @@ -4,9 +4,39 @@ import type { GpxData, TrackPoint, ElevationProfile } from "./types"; /** * Parse a GPX XML string into structured data. */ +let _LinkedDOMParser: typeof DOMParser | null = null; + +async function getDOMParser(): Promise { + if (typeof DOMParser !== "undefined") return DOMParser; + if (!_LinkedDOMParser) { + const linkedom = await import("linkedom"); + _LinkedDOMParser = linkedom.DOMParser as unknown as typeof DOMParser; + } + return _LinkedDOMParser; +} + export function parseGpx(xml: string): GpxData { - const parser = new DOMParser(); - const doc = parser.parseFromString(xml, "application/xml"); + // Synchronous path for browser + if (typeof DOMParser !== "undefined") { + return parseGpxWithParser(new DOMParser(), xml); + } + // Fallback: try linkedom synchronously (works in Node with top-level await or CJS) + try { + // eslint-disable-next-line @typescript-eslint/no-require-imports + const { DOMParser: LP } = require("linkedom"); + return parseGpxWithParser(new LP() as unknown as DOMParser, xml); + } catch { + throw new Error("DOMParser not available — install linkedom for Node.js"); + } +} + +export async function parseGpxAsync(xml: string): Promise { + const Parser = await getDOMParser(); + return parseGpxWithParser(new Parser(), xml); +} + +function parseGpxWithParser(parser: DOMParser, xml: string): GpxData { + const doc = parser.parseFromString(xml, "application/xml") as unknown as Document; const parserError = doc.querySelector("parsererror"); if (parserError) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04cd0cd..7423955 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -119,6 +119,9 @@ importers: leaflet: specifier: ^1.9.4 version: 1.9.4 + linkedom: + specifier: ^0.18.12 + version: 0.18.12 playwright: specifier: ^1.58.2 version: 1.58.2 @@ -1545,6 +1548,9 @@ packages: resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==} engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} + boolbase@1.0.0: + resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} + brace-expansion@5.0.4: resolution: {integrity: sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==} engines: {node: 18 || 20 || >=22} @@ -1621,13 +1627,23 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} + css-select@5.2.2: + resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==} + css-tree@3.2.1: resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + css-what@6.2.2: + resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} + engines: {node: '>= 6'} + css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} + cssom@0.5.0: + resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==} + csstype@3.2.3: resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} @@ -1688,6 +1704,19 @@ packages: dom-accessibility-api@0.6.3: resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} + dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + + domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + + domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + + domutils@3.2.2: + resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} + drizzle-kit@0.31.10: resolution: {integrity: sha512-7OZcmQUrdGI+DUNNsKBn1aW8qSoKuTH7d0mYgSP8bAzdFzKoovxEFnoGQp2dVs82EOJeYycqRtciopszwUf8bw==} hasBin: true @@ -1897,10 +1926,18 @@ packages: resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==} engines: {node: '>=10.13.0'} + entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + entities@6.0.1: resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} engines: {node: '>=0.12'} + entities@7.0.1: + resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==} + engines: {node: '>=0.12'} + es-define-property@1.0.1: resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==} engines: {node: '>= 0.4'} @@ -2110,9 +2147,15 @@ packages: resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==} engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0} + html-escaper@3.0.3: + resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} + html-parse-stringify@3.0.1: resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} + htmlparser2@10.1.0: + resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==} + http-errors@2.0.1: resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==} engines: {node: '>= 0.8'} @@ -2299,6 +2342,15 @@ packages: resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==} engines: {node: '>= 12.0.0'} + linkedom@0.18.12: + resolution: {integrity: sha512-jalJsOwIKuQJSeTvsgzPe9iJzyfVaEJiEXl+25EkKevsULHvMJzpNqwvj1jOESWdmgKDiXObyjOYwlUqG7wo1Q==} + engines: {node: '>=16'} + peerDependencies: + canvas: '>= 2' + peerDependenciesMeta: + canvas: + optional: true + locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} @@ -2392,6 +2444,9 @@ packages: node-releases@2.0.36: resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==} + nth-check@2.1.1: + resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} + object-inspect@1.13.4: resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==} engines: {node: '>= 0.4'} @@ -2771,6 +2826,9 @@ packages: engines: {node: '>=14.17'} hasBin: true + uhyphen@0.2.0: + resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==} + undici-types@7.18.2: resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==} @@ -4132,6 +4190,8 @@ snapshots: transitivePeerDependencies: - supports-color + boolbase@1.0.0: {} + brace-expansion@5.0.4: dependencies: balanced-match: 4.0.4 @@ -4206,13 +4266,25 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 + css-select@5.2.2: + dependencies: + boolbase: 1.0.0 + css-what: 6.2.2 + domhandler: 5.0.3 + domutils: 3.2.2 + nth-check: 2.1.1 + css-tree@3.2.1: dependencies: mdn-data: 2.27.1 source-map-js: 1.2.1 + css-what@6.2.2: {} + css.escape@1.5.1: {} + cssom@0.5.0: {} + csstype@3.2.3: {} data-urls@7.0.0: @@ -4248,6 +4320,24 @@ snapshots: dom-accessibility-api@0.6.3: {} + dom-serializer@2.0.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.5.0 + + domelementtype@2.3.0: {} + + domhandler@5.0.3: + dependencies: + domelementtype: 2.3.0 + + domutils@3.2.2: + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + drizzle-kit@0.31.10: dependencies: '@drizzle-team/brocli': 0.10.2 @@ -4284,8 +4374,12 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.3.0 + entities@4.5.0: {} + entities@6.0.1: {} + entities@7.0.1: {} + es-define-property@1.0.1: {} es-errors@1.3.0: {} @@ -4576,10 +4670,19 @@ snapshots: transitivePeerDependencies: - '@noble/hashes' + html-escaper@3.0.3: {} + html-parse-stringify@3.0.1: dependencies: void-elements: 3.1.0 + htmlparser2@10.1.0: + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + domutils: 3.2.2 + entities: 7.0.1 + http-errors@2.0.1: dependencies: depd: 2.0.0 @@ -4734,6 +4837,14 @@ snapshots: lightningcss-win32-arm64-msvc: 1.32.0 lightningcss-win32-x64-msvc: 1.32.0 + linkedom@0.18.12: + dependencies: + css-select: 5.2.2 + cssom: 0.5.0 + html-escaper: 3.0.3 + htmlparser2: 10.1.0 + uhyphen: 0.2.0 + locate-path@6.0.0: dependencies: p-locate: 5.0.0 @@ -4802,6 +4913,10 @@ snapshots: node-releases@2.0.36: {} + nth-check@2.1.1: + dependencies: + boolbase: 1.0.0 + object-inspect@1.13.4: {} obug@2.1.1: {} @@ -5179,6 +5294,8 @@ snapshots: typescript@5.9.3: {} + uhyphen@0.2.0: {} + undici-types@7.18.2: {} undici@7.24.5: {}