\n \n \n \n",[],[151,219],"e8fb385e-4967-11f0-9329-76b3cceeab13","LoginForm.tsx","fa619216-3817-11f0-972c-9e149126039e",338,["D",1749937108760],14,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\n\nexport default function LoginForm({ onLogin, onError }) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\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

Please enter your Val Town API key to get started.

\n\n

\n );\n}",[],[151,37,228],"f44c3bf4-4967-11f0-af80-76b3cceeab13","Dashboard.tsx","fa617f4c-3817-11f0-972c-9e149126039e",340,["D",1749937127746],77,"/** @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\";\n\nexport default function Dashboard(\n { user, pipedreamToken, onLogout, onError },\n) {\n const [accounts, setAccounts] = useState([]);\n const [selectedApp, setSelectedApp] = useState(null);\n const [selectedComponent, setSelectedComponent] = useState(null);\n const [componentType, setComponentType] = useState<\"action\" | \"trigger\">(\n \"action\",\n );\n const [configuredProps, setConfiguredProps] = useState({});\n console.log(\n accounts,\n selectedApp,\n selectedComponent,\n componentType,\n );\n\n const frontendClient = createFrontendClient({\n environment: \"development\", // TODO: Make this configurable\n externalUserId: user.id,\n tokenCallback: () => Promise.resolve({ token: pipedreamToken }),\n });\n\n useEffect(() => {\n loadAccounts();\n }, []);\n\n const loadAccounts = async () => {\n try {\n // Load user's connected accounts\n const accountsResponse = await fetch(\"/api/pipedream/accounts\");\n const accountsData = await accountsResponse.json();\n if (accountsData.accounts && Array.isArray(accountsData.accounts)) {\n setAccounts(accountsData.accounts);\n } else {\n console.warn(\"Accounts data is not an array:\", accountsData);\n setAccounts([]);\n }\n } catch (err) {\n console.error(\"Failed to load accounts:\", err);\n onError(\"Failed to load accounts. Please try refreshing the page.\");\n setAccounts([]);\n }\n };\n\n const handleComponentTypeChange = (newType: \"action\" | \"trigger\") => {\n setComponentType(newType);\n setSelectedComponent(null); // Reset component when type changes\n };\n\n const handleComponentSubmit = async (ctx) => {\n try {\n if (componentType === \"action\") {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent.key,\n configuredProps: {\n ...ctx.configuredProps,\n include_sent_via_pipedream_flag: false,\n },\n });\n }\n // TODO trigger\n } catch (error) {\n console.error(`Failed to execute ${componentType}:`, error);\n onError(`Failed to execute ${componentType}: ${error.message}`);\n }\n };\n\n const code =\n `import { actionRun } from \"https://esm.town/v/valdottown/pipedream-connect/sdk/sdk.ts\";\nconst result = await actionRun(${\n JSON.stringify(\n {\n actionId: selectedComponent?.key,\n configuredProps,\n },\n null,\n 2,\n )\n });\nconsole.log(result);`;\n\n return (\n

\n \n

Pipedream Connect

Welcome, {user?.username}!

\n \n Logout\n \n \n\n \n

Connect Apps & Build Workflows

\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 Component Type:\n \n \n handleComponentTypeChange(\n e.target.value as \"action\" | \"trigger\",\n )}\n style={{\n width: \"100%\",\n padding: \"8px 12px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n cursor: \"pointer\",\n }}\n >\n \n \n \n

\n )}\n\n {selectedApp && (\n

\n \n 3. Select{\" \"}\n {componentType === \"action\" ? \"an Action\" : \"a Trigger\"}:\n \n {\n setSelectedComponent(comp);\n }}\n />\n

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

\n \n 4. Configure{\" \"}\n {componentType === \"action\" ? \"Action\" : \"Trigger\"}:\n \n \n \n

\n \n

\n )}\n \n \n\n \n \n );\n}",[],[151,37,237],"1622eb92-4968-11f0-85d0-76b3cceeab13",["D",1749937184518],[185,186],[151,37],"7313d4ac-4967-11f0-b98c-76b3cceeab13","Home.tsx","4646f64c-34e6-11f0-ad7f-9e149126039e","43c67abe-34e6-11f0-ad7f-9e149126039e",329,["D",1749936910953],25,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { LoginForm } from \"./LoginForm.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.tsx\";\n\nexport function Home({ user, pipedreamToken }) {\n const [error, setError] = useState(\"\");\n\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.href = \"/\";\n };\n\n const handleError = (errorMessage: string) => {\n setError(errorMessage);\n };\n\n const dismissError = () => {\n setError(\"\");\n };\n\n if (!user) {\n return (\n <>\n \n console.log(x)} onError={handleError} />\n \n );\n }\n\n return (\n <>\n \n \n \n );\n}",[],[151,259,250],"components","16374962-487c-11f0-9910-76b3cceeab13","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",141,["D",1749835823421],"/** @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}",[],[151,259,261],"49d7285a-4962-11f0-83a4-76b3cceeab13","CodeSnippet.tsx","8144a792-4889-11f0-bd53-76b3cceeab13",303,["D",1749934694286],19,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport {\n toast,\n ToastContainer,\n} 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 {\n navigator.clipboard.writeText(code);\n toast(\"Copied!\");\n }}\n style={{\n position: \"absolute\",\n right: \"10px\",\n top: \"10px\",\n padding: \"5px 10px\",\n background: \"#f0f0f0\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Copy\n \n \n \n {code}\n \n \n

\n );\n}",[],[151,259,269],"06b5e0c0-487c-11f0-9f6a-76b3cceeab13","AccountsList.tsx","fa61761e-3817-11f0-972c-9e149126039e",138,["D",1749835797413],3,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nexport function AccountsList({ accounts }) {\n return (\n

Your Connected Accounts

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

\n No connected accounts yet. Connect an app above to get started.\n

\n )\n : (\n

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

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

\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 \n ))}\n \n )}\n

\n );\n}",[],[151,259,278],"48823462-34e6-11f0-afbf-9e149126039e",10,["D",1747682411203],[180,181,182,183],[151,259],["D",1747682388024],[179,184,187,188],[151],"c6c38020-4967-11f0-825a-76b3cceeab13","render-react-page.tsx","226b0b94-4965-11f0-825a-76b3cceeab13",334,["D",1749937051356],13,"/** @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 hydrateScript = `import React from 'https://esm.sh/react@18';\nimport { hydrateRoot } from 'https://esm.sh/react-dom@18/client';\nimport Page from '${pageModuleURL}';\nconst data = JSON.parse(document.getElementById('__DATA__').textContent);\nhydrateRoot(\n document.getElementById('root'),\n React.createElement(Page, { initialData: data })\n);\n`;\n\n const stream = await renderToReadableStream(\n \n \n {title}\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}",[],[157,295],"b5ce2084-4888-11f0-bdac-76b3cceeab13","pipedream.tsx","fc0842e2-487d-11f0-abe5-76b3cceeab13",253,["D",1749841245124],16,"import { Hono } from \"npm:hono\";\nimport { createBackendClient } from \"npm:@pipedream/sdk/server\";\nimport { getCurrentUser } from \"./auth.tsx\";\n\nconst app = new Hono();\nexport { app as pipedream };\n\nexport const pd = createBackendClient({\n environment: Deno.env.get(\"PIPEDREAM_PROJECT_ENVIRONMENT\"),\n credentials: {\n clientId: Deno.env.get(\"PIPEDREAM_CLIENT_ID\"),\n clientSecret: Deno.env.get(\"PIPEDREAM_CLIENT_SECRET\"),\n },\n projectId: Deno.env.get(\"PIPEDREAM_PROJECT_ID\"),\n});\n\n// Get user's Pipedream connections\napp.get(\"/accounts\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n const accounts = await pd.getAccounts({\n external_user_id: user.id,\n include_credentials: false,\n });\n\n return c.json({ accounts: accounts.data });\n});\n\n// Pipedream Action Proxy\n// Authenicate with Val Town Bearer Token\n// Actually runs the pipedream action\napp.post(\"/action\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n try {\n const args = await c.req.json();\n if (args.externalUserId) {\n // To be doubly sure of authentication\n return c.json({ error: \"Do not include externalUserId\" }, 400);\n }\n\n const result = await pd.actionRun({\n ...args,\n externalUserId: user.id,\n });\n\n return c.json(result);\n } catch (error) {\n console.error(\"Failed to execute action:\", error);\n return c.json({ error: \"Failed to execute action\" }, 500);\n }\n});",[],[157,304],"14cc3a78-4968-11f0-8e97-76b3cceeab13","main.tsx",341,["D",1749937182270],61,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { auth, getCurrentUser } from \"./auth.tsx\";\nimport { pd, pipedream } from \"./pipedream.tsx\";\nimport { renderPage } from \"./render-react-page.tsx\";\n\nconst app = new Hono();\n\napp.route(\"/auth\", auth);\napp.route(\"/api/pipedream\", pipedream);\n\napp.get(\"/\", async (c) => {\n // Inject initial data\n // TODO - prevent XSS attack, do more escaping\n const user = await getCurrentUser(c);\n if (!user) {\n return renderPage({\n pageModuleURL: \"/frontend/pages/LoginForm.tsx\",\n title: \"Pipedream x Val Town Connect\",\n });\n }\n return renderPage({\n pageModuleURL: \"/frontend/pages/Dashboard.tsx\",\n title: \"Pipedream x Val Town Connect\",\n props: {\n user,\n pipedream: await pd\n .createConnectToken({\n external_user_id: user.id,\n allowed_origins: [new URL(c.req.url).origin],\n }),\n },\n });\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => Promise.reject(err));\nexport default app.fetch;","pipedream",[],[157,313],"d8a6de82-4880-11f0-b890-76b3cceeab13","auth.tsx","0e09f6fa-487b-11f0-9981-76b3cceeab13",197,["D",1749837867621],15,"import { ValTown } from \"npm:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";\n\n// in-memory cache\nconst users = {};\nasync function getValTownUser(apiKey: string) {\n if (users[apiKey]) return users[apiKey];\n try {\n const vt = new ValTown({ bearerToken: apiKey });\n const user = await vt.me.profile.retrieve();\n users[apiKey] = user;\n return user;\n } catch (error) {\n console.error(error);\n return null;\n }\n}\n\n// Helper function to get current user from cookie\nexport function getCurrentUser(c: any) {\n const apiKey = getCookie(c, \"vt_api_key\");\n console.log(\"Cookie check - API key found:\", !!apiKey);\n if (!apiKey) return null;\n return getValTownUser(apiKey);\n}\n\nconst app = new Hono();\nexport { app as auth };\n\n// Login endpoint\napp.post(\"/login\", async (c) => {\n const { apiKey } = await c.req.json();\n\n if (!apiKey) {\n return c.json({ error: \"API key is required\" }, 400);\n }\n\n const user = await getValTownUser(apiKey);\n\n if (!user) {\n return c.json({ error: \"Invalid Val Town API key\" }, 401);\n }\n\n // Set secure cookie with API key\n setCookie(c, \"vt_api_key\", apiKey, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\", // Changed from Strict to Lax for better compatibility\n maxAge: 60 * 60 * 24 * 30, // 30 days\n path: \"/\", // Ensure cookie is available for all paths\n });\n\n return c.json({\n success: true,\n user: user,\n });\n});\n\n// Logout endpoint\napp.post(\"/logout\", (c) => {\n deleteCookie(c, \"vt_api_key\");\n return c.json({ success: true });\n});",[],[157,323],["D",1747682399458],[174,175,176,177],[157],["D",1747682234550],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":-5,"_102":103,"_104":59},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_125":371,"_372":373,"_374":375,"_376":25,"_377":25,"_378":25,"_379":59,"_380":-5,"_381":-7,"_382":-7,"_383":63,"_384":25,"_385":25,"_386":-5,"_387":25,"_388":25,"_389":25,"_390":-5},"ENV",{"_342":343,"_344":345,"_346":87,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v342