\n \n \n \n \n ,\n );\n\n return new Response(stream, {\n status,\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n ...extraHeaders,\n },\n });\n}",[],[154,199],[154],{"_103":209,"_95":210,"_155":211,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":212,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":213,"_99":327},"d1864154-512e-11f0-9a15-f69ea79377d9","frontend","1e07cd7c-140f-4145-8a26-651816e18280",["D",1750792197393],[214,253,318],{"_103":215,"_95":216,"_155":217,"_157":211,"_158":138,"_159":160,"_161":162,"_105":218,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":219,"_99":252},"d1862732-512e-11f0-9a15-f69ea79377d9","components","59e0aad7-28c6-4c44-b9d1-bbe44aeda89b",["D",1750792197393],[220,228,236,244],{"_103":221,"_95":222,"_155":223,"_157":217,"_158":138,"_159":160,"_161":162,"_105":224,"_100":32,"_164":176,"_166":225,"_167":22,"_168":-5,"_169":226,"_99":227},"d1861a94-512e-11f0-9a15-f69ea79377d9","CodeSnippet.tsx","742d3015-0c66-498f-8675-6a99a24c66da",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { toast } from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\";\n\nexport function CodeSnippet({ code }: { code: string }) {\n return (\n

\n {\n navigator.clipboard.writeText(code);\n toast(\"Copied!\");\n }}\n className=\"absolute right-3 top-3 px-3 py-1 text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded transition-colors z-10\"\n >\n Copy\n \n

\n        \n          {code}\n        \n

\n );\n}",[],[210,216,222],{"_103":229,"_95":230,"_155":231,"_157":217,"_158":138,"_159":160,"_161":162,"_105":232,"_100":32,"_164":176,"_166":233,"_167":22,"_168":-5,"_169":234,"_99":235},"d1861d1e-512e-11f0-9a15-f69ea79377d9","ErrorMessage.tsx","acb7c201-d447-4b51-b859-34c1d74a4b8e",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ErrorMessage({ error, onDismiss }) {\n if (!error) return null;\n\n return (\n

\n {error}\n {onDismiss && (\n \n ×\n \n )}\n

\n );\n}",[],[210,216,230],{"_103":237,"_95":238,"_155":239,"_157":217,"_158":138,"_159":160,"_161":162,"_105":240,"_100":32,"_164":176,"_166":241,"_167":22,"_168":-5,"_169":242,"_99":243},"d1861ea4-512e-11f0-9a15-f69ea79377d9","ExperimentalWarning.tsx","55889a6e-4bd4-40a3-ba43-cd47ec6a48aa",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ExperimentalWarning() {\n return (\n

⚠️ Experimental Integration

\n We will email you if anything changes.\n

\n );\n}",[],[210,216,238],{"_103":245,"_95":246,"_155":247,"_157":217,"_158":138,"_159":160,"_161":162,"_105":248,"_100":32,"_164":176,"_166":249,"_167":22,"_168":-5,"_169":250,"_99":251},"d1862016-512e-11f0-9a15-f69ea79377d9","Layout.tsx","cdca88e1-6535-485b-b778-339d502e862e",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ToastContainer } from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nexport function Layout(\n { user, children }: { user: { username: string }; children: React.ReactNode },\n) {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n window.location.href = \"/\";\n };\n\n const toggleMenu = () => {\n setIsMenuOpen(!isMenuOpen);\n };\n\n // Close menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (isMenuOpen && !(event.target as Element).closest(\".profile-menu\")) {\n setIsMenuOpen(false);\n }\n };\n\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsMenuOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n document.addEventListener(\"keydown\", handleEscKey);\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n document.removeEventListener(\"keydown\", handleEscKey);\n };\n }, [isMenuOpen]);\n\n return (\n

\n \n

\n \n Val Town x Pipedream Connect\n \n

\n \n View source\n \n

\n\n

\n \n {user?.username}\n \n \n \n \n\n {isMenuOpen && (\n

\n \n New Action\n \n \n New Trigger\n \n \n My Triggers\n \n \n My Connections\n \n \n Logout\n \n

\n )}\n

\n\n

\n {/* Removed the welcome message since it's now in the profile menu */}\n

\n\n {children}\n

\n );\n}",[],[210,216,246],[210,216],{"_103":254,"_95":255,"_155":256,"_157":211,"_158":138,"_159":160,"_161":162,"_105":257,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":258,"_99":317},"d1863fe2-512e-11f0-9a15-f69ea79377d9","pages","760748ad-4487-4239-ac88-bc345d38c0fd",["D",1750792197393],[259,267,275,283,293,301,309],{"_103":260,"_95":261,"_155":262,"_157":256,"_158":138,"_159":160,"_161":162,"_105":263,"_100":32,"_164":176,"_166":264,"_167":22,"_168":-5,"_169":265,"_99":266},"d18628a4-512e-11f0-9a15-f69ea79377d9","ConnectionsPage.tsx","c5ce7b97-1c39-4ef6-a531-297021157018",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ accounts, user }) {\n console.log(accounts);\n return (\n \n

Your Connected Accounts

\n {!Array.isArray(accounts) || accounts.length === 0\n ? (\n

\n No connected accounts yet.\n

\n )\n : (\n

\n {accounts.map((account) => (\n \n

\n {account.app?.name || \"Unknown App\"}\n

\n {account.name || \"Connected Account\"}\n

\n Connected: {account.created_at\n ? new Date(account.created_at).toLocaleDateString()\n : \"Unknown\"}\n

\n \n {account.app?.auth_type || \"Unknown\"}\n \n {\n if (\n !confirm(\n `Are you sure you want to delete the connection to ${account.app?.name || \"this app\"}?`,\n )\n ) {\n e.preventDefault();\n }\n }}\n >\n \n Delete\n \n \n

\n ))}\n \n )}\n \n );\n}",[],[210,255,261],{"_103":268,"_95":269,"_155":270,"_157":256,"_158":138,"_159":160,"_161":162,"_105":271,"_100":32,"_164":176,"_166":272,"_167":22,"_168":-5,"_169":273,"_99":274},"d1862b9c-512e-11f0-9a15-f69ea79377d9","HomePage.tsx","f0b4f09b-4e10-420e-88a4-016d7f4458c1",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ExperimentalWarning } from \"../components/ExperimentalWarning.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\nexport default function({ user }) {\n return (\n \n

\n Pipedream Connect{\" \"}\n provides managed authentication for thousands of services. This application provides Val Town users access to\n Pipedream's OAuth library. Click on your username in the top-right corner of this page to get started.\n

\n \n

\n \n );\n}",[],[210,255,269],{"_103":276,"_95":277,"_155":278,"_157":256,"_158":138,"_159":160,"_161":162,"_105":279,"_100":32,"_164":176,"_166":280,"_167":22,"_168":-5,"_169":281,"_99":282},"d1862d22-512e-11f0-9a15-f69ea79377d9","LoginPage.tsx","50be7040-0da4-47ee-80d0-9a2c56d85fe9",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { ExperimentalWarning } from \"../components/ExperimentalWarning.tsx\";\n\nexport default function({ onLogin }) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, onError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n onError(\"\");\n try {\n const response = await fetch(\"/auth/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ apiKey }),\n });\n if (response.ok) window.location.href = \"/\";\n } catch (err) {\n console.error(err);\n onError(err.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Val Town + Pipedream Connect

\n \n View source\n \n

\n Pipedream Connect{\" \"}\n provides managed authentication for thousands of services, such as Slack, Discord, Google, etc. This app gives\n Val Town users access to Pipedream's OAuth library.\n

\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n );\n}",[],[210,255,277],{"_103":284,"_95":285,"_155":286,"_157":256,"_158":138,"_159":287,"_161":162,"_105":288,"_100":289,"_164":176,"_166":290,"_167":22,"_168":-5,"_169":291,"_99":292},"d3c5be8a-5139-11f0-b6d4-f69ea79377d9","NewActionPage.tsx","bdc3cf3a-b23e-4c20-a9f9-51e97aaac27d",66,["D",1750796925629],40,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ComponentForm,\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { useUrlSearchParams } from \"use-url-search-params\";\nimport { AccountsList } from \"../components/AccountsList.tsx\";\nimport { CodeSnippet } from \"../components/CodeSnippet.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\nimport { useQueryState } from \"../useQueryState.tsx\";\n\nexport const compactProps = (props = {}) =>\n Object.fromEntries(Object.entries(props).filter(([_, v]) => v !== \"\" && v !== null && v !== false));\n\nexport default function({ user }) {\n const [selectedApp, setSelectedApp] = useQueryState(\"app\", null);\n const [selectedComponent, setSelectedComponent] = useQueryState(\"component\", null);\n const [configuredProps, setConfiguredProps] = useQueryState(\"props\", {});\n const [sdkErrors, setSdkErrors] = useQueryState(\"err\", null);\n const [dynamicProps, setDynamicProps] = useQueryState(\"dyn\", null);\n\n const frontendClient = createFrontendClient({\n environment: \"production\",\n externalUserId: user.id,\n tokenCallback: async () => {\n const resp = await fetch(\"/api/pipedream/token\", {\n method: \"POST\",\n });\n const data = await resp.json();\n return data;\n },\n });\n const handleComponentSubmit = async (ctx) => {\n try {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent!.key,\n configuredProps: ctx.configuredProps,\n dynamicPropsId: dynamicProps?.id,\n });\n } catch (error) {\n setSdkErrors(error);\n }\n };\n\n const code = `import { actionRun } from \"https://esm.town/v/valdottown/pipedream-connect/sdk/sdk.ts\";\n\n// Configured at ${window.location.href}\nconst result = await actionRun(${\n JSON.stringify(\n {\n actionId: selectedComponent?.key,\n configuredProps,\n dynamicPropsId: dynamicProps?.id,\n },\n null,\n 2,\n )\n });\n\nconsole.log(result);`;\n\n return (\n \n \n

New Action

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select an Action\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 3. Configure Action:\n \n

\n setConfiguredProps(compactProps(props))}\n onUpdateDynamicProps={props => setDynamicProps(compactProps(props))}\n onSubmit={handleComponentSubmit}\n sdkResponse={sdkErrors}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 4. Copy code to use in Val Town:\n \n

\n \n

\n )}\n

\n \n \n );\n}",[],[210,255,285],{"_103":294,"_95":295,"_155":296,"_157":256,"_158":138,"_159":160,"_161":162,"_105":297,"_100":32,"_164":176,"_166":298,"_167":22,"_168":-5,"_169":299,"_99":300},"d1863574-512e-11f0-9a15-f69ea79377d9","NewTriggerPage.tsx","5cc16997-bb51-4510-a716-5d39bb61d173",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ComponentForm,\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser?deps=react@18.2.0,react-dom@18.2.0\";\nimport { toast } from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AccountsList } from \"../components/AccountsList.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ user }: { user: any }) {\n const [selectedApp, setSelectedApp] = useState();\n const [selectedComponent, setSelectedComponent] = useState();\n const [configuredProps, setConfiguredProps] = useState({});\n const [sdkErrors, setSdkErrors] = useState();\n const [dynamicProps, setDynamicProps] = useState();\n const [webhookUrl, setWebhookUrl] = useState(\"\");\n\n const frontendClient = createFrontendClient({\n environment: \"production\",\n externalUserId: user.id,\n tokenCallback: async () => {\n const resp = await fetch(\"/api/pipedream/token\", {\n method: \"POST\",\n });\n const data = await resp.json();\n return data;\n },\n });\n\n const handleComponentSubmit = async (ctx) => {\n try {\n const result = await frontendClient.deployTrigger({\n externalUserId: user.id,\n triggerId: selectedComponent!.key,\n configuredProps: ctx.configuredProps,\n webhookUrl,\n dynamicPropsId: dynamicProps?.id,\n });\n toast(\"Trigger created! Redirecting to the list of triggers...\");\n window.location.href = \"/triggers\";\n } catch (error) {\n setSdkErrors(error);\n }\n };\n\n return (\n \n \n

New Trigger

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select an Trigger\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 3. Webhook URL to trigger:\n \n setWebhookUrl(e.target.value)}\n autoFocus\n />\n

\n )}\n\n {webhookUrl && selectedComponent && (\n

\n \n 4. Configure Trigger:\n \n

\n \n

\n )}\n

\n \n \n );\n}",[],[210,255,295],{"_103":302,"_95":303,"_155":304,"_157":256,"_158":138,"_159":160,"_161":162,"_105":305,"_100":32,"_164":176,"_166":306,"_167":22,"_168":-5,"_169":307,"_99":308},"d1863a24-512e-11f0-9a15-f69ea79377d9","TriggerEventsPage.tsx","2d4fbb3c-12ce-410a-ac3a-cf7de766b094",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ trigger, events, user }) {\n return (\n \n

Trigger

\n {trigger.configurable_props.find(x => x.type === \"app\")?.name || \"Unknown App\"}\n

\n Created at: {trigger.created_at\n ? new Date(trigger.created_at * 1000).toLocaleString(\"en-US\", {\n timeZoneName: \"short\",\n })\n : \"Unknown\"}\n

\n Trigger JSON\n

\n          {JSON.stringify(trigger, null, 2)}\n

Events

\n {!Array.isArray(events) || events.length === 0\n ? (\n

\n No events yet.\n

\n )\n : (\n

\n {events.map((event) => (\n

\n Event at {new Date(event.ts).toLocaleString(\"en-US\", {\n timeZoneName: \"short\",\n })}\n

\n                    {JSON.stringify(event, null, 2)}\n

\n ))}\n

\n )}\n \n );\n}",[],[210,255,303],{"_103":310,"_95":311,"_155":312,"_157":256,"_158":138,"_159":160,"_161":162,"_105":313,"_100":32,"_164":176,"_166":314,"_167":22,"_168":-5,"_169":315,"_99":316},"d1863cfe-512e-11f0-9a15-f69ea79377d9","TriggersPage.tsx","e5ca8c10-c39a-4b53-b531-2c61420559f1",["D",1750792197393],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ triggers, user }) {\n return (\n \n

Your Triggers

\n {!Array.isArray(triggers) || triggers.length === 0\n ? (\n

\n No triggers yet.\n

\n )\n : (\n

\n {triggers.map((trigger) => (\n \n

\n {trigger.configurable_props.find(x => x.type === \"app\")?.name || \"Unknown App\"}\n

\n \n View events\n \n

\n Created at: {trigger.created_at\n ? new Date(trigger.created_at * 1000).toLocaleDateString()\n : \"Unknown\"}\n

\n {\n if (\n !confirm(\n `Are you sure you want to delete the triggers ${trigger.app?.name || \"this app\"}?`,\n )\n ) {\n e.preventDefault();\n }\n }}\n >\n \n Delete\n \n \n

\n ))}\n \n )}\n \n );\n}",[],[210,255,311],[210,255],{"_103":319,"_95":320,"_155":321,"_157":211,"_158":138,"_159":137,"_161":162,"_105":322,"_100":323,"_164":176,"_166":324,"_167":22,"_168":-5,"_169":325,"_99":326},"aa08fe34-513b-11f0-8129-f69ea79377d9","useQueryState.tsx","ff4204a4-5136-11f0-be3c-f69ea79377d9",["D",1750797714604],11,"import { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * useQueryState – JSON-backed useState that keeps its value in the URL\n * and always uses history.replaceState (never pushState).\n */\nexport function useQueryState(\n key: string,\n initialValue: T,\n): [T, (v: T | ((prev: T) => T)) => void] {\n const read = (): T => {\n const raw = new URLSearchParams(window.location.search).get(key);\n if (raw === null) return initialValue;\n try {\n return JSON.parse(raw) as T;\n } catch {\n return initialValue;\n }\n };\n\n const [state, setState] = useState(read);\n\n // sync when the user navigates back / forward\n useEffect(() => {\n const onPop = () => setState(read());\n window.addEventListener(\"popstate\", onPop);\n return () => window.removeEventListener(\"popstate\", onPop);\n }, []);\n\n const write = (value: T) => {\n const params = new URLSearchParams(window.location.search);\n\n if (value === undefined) params.delete(key);\n else params.set(key, JSON.stringify(value));\n\n const url = window.location.pathname\n + (params.toString() ? `?${params}` : \"\")\n + window.location.hash;\n\n history.replaceState(null, \"\", url);\n };\n\n const set = useCallback(\n (v: T | ((prev: T) => T)) =>\n setState(prev => {\n const next = typeof v === \"function\" ? (v as (p: T) => T)(prev) : v;\n write(next);\n return next;\n }),\n [],\n );\n\n return [state, set];\n}",[],[210,320],[210],{"_103":329,"_95":330,"_155":331,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":332,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":333,"_99":342},"d1864474-512e-11f0-9a15-f69ea79377d9","sdk","05e7a966-b7a5-451d-8aff-e6491f1e2a5e",["D",1750792197393],[334],{"_103":335,"_95":336,"_155":337,"_157":331,"_158":138,"_159":160,"_161":162,"_105":338,"_100":32,"_164":176,"_166":339,"_167":22,"_168":-5,"_169":340,"_99":341},"d18642e4-512e-11f0-9a15-f69ea79377d9","sdk.ts","c35f9340-325e-45cd-843a-76d18990c7be",["D",1750792197393],"export async function actionRun(args: any) {\n const response = await fetch(\n \"https://pipedream.val.run/api/pipedream/action\",\n {\n method: \"POST\",\n body: JSON.stringify(args),\n headers: {\n Cookie: \"vt_api_key=\" + Deno.env.get(\"valtown\"),\n },\n },\n );\n return response.json();\n}\n\nexport async function proxyRun(args: any) {\n const response = await fetch(\n \"https://pipedream.val.run/api/pipedream/proxy\",\n {\n method: \"POST\",\n body: JSON.stringify(args),\n headers: {\n Cookie: \"vt_api_key=\" + Deno.env.get(\"valtown\"),\n },\n },\n );\n return response.json();\n}",[],[330,336],[330],{"_103":344,"_95":345,"_155":346,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":347,"_100":32,"_164":348,"_166":349,"_167":22,"_168":-5,"_169":350,"_99":351},"d18645f0-512e-11f0-9a15-f69ea79377d9","README.md","37b976f5-6ae2-4d65-9b39-ee94bc474b89",["D",1750792197393],"file","# Val Town + Pipedream Connect Integration\n\nThis application allows Val Town users to authenticate and connect to external services via Pipedream Connect.\n\n## Misc todos\n\n- [ ] Automatically include `\"includeSentViaPipedream\": false` for Discord and Slack\n- [ ] Replace Discord & Slack apps with our own https://pipedream.com/docs/connect/managed-auth/oauth-clients/#using-a-custom-oauth-client\n - [ ] I made one for discord, but am struggling to figure out where to supply the `oauthAppId`. I asked Pipedream.\n- [ ] Would be neat if you could scroll more in the list of connections or see a grid of the top 100 connections\n- [ ] How do we teach Townie how to use this?\n - [ ] search for potential actions (maybe their mcp can help?)\n- [ ] (Maybe) Help users connect trigger to val more directly than copying endpoint (via val town sdk)\n\n## Authentication\n\nThis app uses Val Town API tokens for authentication. (Eventually, we'll swap\nthis for Val Town OAuth.)\n\nTo login, create and supply a Val Town API token with the `user:read` scope only. We store it in cookies.\n\nTo run actions on connected apps, you'll also need to supply a Val Town API\ntoken. If you're doing this from within Val Town, you can use\n`process.env.valtown`, which this app's client libraries will use by default.",[],[345],"files",[152,171,180,189,197,208,214,220,228,236,244,253,259,267,275,283,293,301,309,318,328,334,343],"counts",{"_356":32,"_357":358,"_359":32,"_360":361},"pulls","branches",3,"forks","envVars",4,"contents",[364,367,370,373],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":365,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":366},["D",1750792197393],[154],{"_103":209,"_95":210,"_155":211,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":368,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":369},["D",1750792197393],[210],{"_103":329,"_95":330,"_155":331,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":371,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":372},["D",1750792197393],[330],{"_103":344,"_95":345,"_155":346,"_157":-5,"_158":138,"_159":160,"_161":162,"_105":374,"_100":32,"_164":348,"_166":349,"_167":22,"_168":-5,"_99":375},["D",1750792197393],[345],"upstreamProject","upstreamBranch",{"_103":141,"_105":379,"_380":381,"_95":43,"_139":104,"_100":382,"_140":-5,"_142":-5,"_383":384,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":119,"_147":96},["D",1747682234550],"updatedAt",["D",1757364451236],803,"lockfileKey","1757364461611-esm.town_v_valdottown_pipedream-connect@803-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":98,"_101":391,"_396":397,"_398":399,"_400":401,"_445":162,"_446":395,"_447":448,"_451":-5},{"_103":104,"_95":96,"_105":392,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":393,"_132":394,"_135":395,"_149":22},["D",1747682234550],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":98,"_103":138,"_139":104,"_140":141,"_142":143,"_144":110,"_145":104,"_146":119,"_147":96,"_148":94},"ahead",71,"behind",84,"diff",{"_402":403,"_167":412,"_413":414},"added",[404],{"_99":405,"_406":-7,"_407":408},"frontend/useQueryState.tsx","targetFile","sourceFile",{"_103":319,"_95":320,"_155":321,"_157":211,"_158":138,"_159":137,"_161":162,"_105":322,"_100":323,"_164":176,"_166":324,"_167":22,"_168":-5,"_169":-7,"_99":409,"_410":411},[210,320],"contentHash","1a24fcf1a1d21fb9cdb5f24f4b8af3a7bf112fec80e9bf5d8adcf3f5e40723bc",[],"modified",[415,430],{"_99":416,"_406":417,"_407":427},"backend/render-react-page.tsx",{"_103":418,"_95":199,"_155":419,"_157":420,"_158":141,"_159":421,"_161":162,"_105":422,"_100":423,"_164":176,"_166":424,"_167":22,"_168":-5,"_169":-7,"_99":425,"_410":426},"5994c8c0-49de-11f0-9032-76b3cceeab13","226b0b94-4965-11f0-825a-76b3cceeab13","3bc97898-34e6-11f0-9e62-9e149126039e",421,["D",1749987978287],35,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToReadableStream } from \"npm:react-dom@18.2.0/server\";\nimport serialize from \"npm:serialize-javascript\";\n\nexport async function renderPage({\n pageModuleURL,\n props = {},\n status = 200,\n title = \"\",\n extraHeaders = {},\n}: {\n pageModuleURL: string;\n props?: Record;\n status?: number;\n title?: string;\n extraHeaders?: HeadersInit;\n}): Promise {\n const safeJson = serialize(props, { isJSON: true });\n const renderScript = `import React from 'https://esm.sh/react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport Page from '${pageModuleURL}';\nconst data = JSON.parse(document.getElementById('__DATA__').textContent);\ncreateRoot(document.getElementById('root')).render(\n React.createElement(Page, data)\n);`;\n const stream = await renderToReadableStream(\n \n \n \n \n {title}\n \n \n \n

\n \n \n \n \n ,\n );\n\n return new Response(stream, {\n status,\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n ...extraHeaders,\n },\n });\n}",[154,199],"ca1edd7e007da645829cf724154c06dc2e0a42349123231739b2149007edf820",{"_103":198,"_95":199,"_155":200,"_157":156,"_158":138,"_159":201,"_161":162,"_105":202,"_100":203,"_164":176,"_166":204,"_167":22,"_168":-5,"_169":-7,"_99":428,"_410":429},[154,199],"bdb393d051ec74c1937809c862c96cd808da761f3b1c24b2ed3215553c3abbdf",{"_99":431,"_406":432,"_407":442},"frontend/pages/NewActionPage.tsx",{"_103":433,"_95":285,"_155":434,"_157":435,"_158":141,"_159":436,"_161":22,"_105":437,"_100":438,"_164":176,"_166":439,"_167":22,"_168":-5,"_169":-7,"_99":440,"_410":441},"bbd0bb02-4b82-11f0-ac87-76b3cceeab13","3651b41a-4969-11f0-9fbb-76b3cceeab13","67c40202-4967-11f0-b291-76b3cceeab13",632,["D",1750168531724],29,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ComponentForm,\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AccountsList } from \"../components/AccountsList.tsx\";\nimport { CodeSnippet } from \"../components/CodeSnippet.tsx\";\nimport { Layout } from \"../components/Layout.tsx\";\n\nexport default function({ user }) {\n const [selectedApp, setSelectedApp] = useState();\n const [selectedComponent, setSelectedComponent] = useState();\n const [configuredProps, setConfiguredProps] = useState({});\n const [sdkErrors, setSdkErrors] = useState();\n const [dynamicProps, setDynamicProps] = useState();\n\n const frontendClient = createFrontendClient({\n environment: \"production\",\n externalUserId: user.id,\n tokenCallback: async () => {\n const resp = await fetch(\"/api/pipedream/token\", {\n method: \"POST\",\n });\n const data = await resp.json();\n return data;\n },\n });\n const handleComponentSubmit = async (ctx) => {\n try {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent!.key,\n configuredProps: ctx.configuredProps,\n dynamicPropsId: dynamicProps?.id,\n });\n } catch (error) {\n setSdkErrors(error);\n }\n };\n\n const code = `import { actionRun } from \"https://esm.town/v/valdottown/pipedream-connect/sdk/sdk.ts\";\n\n// Configured at https://pipedream.val.run\nconst result = await actionRun(${\n JSON.stringify(\n {\n actionId: selectedComponent?.key,\n configuredProps,\n dynamicPropsId: dynamicProps?.id,\n },\n null,\n 2,\n )\n });\n\nconsole.log(result);`;\n\n return (\n \n \n

New Action

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select an Action\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 3. Configure Action:\n \n

\n \n

\n )}\n\n {selectedComponent && (\n

\n \n 4. Copy code to use in Val Town:\n \n

\n \n

\n )}\n

\n \n \n );\n}",[210,255,285],"8c3e371711bbb31cd785bcfe25e9a3902ddfe4fd5c3b726981edf551e6182a97",{"_103":284,"_95":285,"_155":286,"_157":256,"_158":138,"_159":287,"_161":162,"_105":288,"_100":289,"_164":176,"_166":290,"_167":22,"_168":-5,"_169":-7,"_99":443,"_410":444},[210,255,285],"9e2cad08a6b4c70ab511cf024079ca6fd197c33cf89b4a401e834f6882bca132","hasChanges","sourceBranch","targetBranch",{"_103":141,"_105":449,"_380":450,"_95":43,"_139":104,"_100":382,"_140":-5,"_142":-5,"_383":384,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":119,"_147":96},["D",1747682234550],["D",1757364451236],"pull","actionData","errors"]

Mergequery-paramsintomain

backend/render-react-page.tsx+1-1

frontend/pages/NewActionPage.tsx+13-8

frontend/useQueryState.tsx+54-0