Skip to content

Instantly share code, notes, and snippets.

@dalechyn
Created November 25, 2024 23:11
Show Gist options
  • Select an option

  • Save dalechyn/d2329ed0b1e8f16eea81520ad38d3d82 to your computer and use it in GitHub Desktop.

Select an option

Save dalechyn/d2329ed0b1e8f16eea81520ad38d3d82 to your computer and use it in GitHub Desktop.
patch to fix ssr issues within frame sdk
diff --git a/node_modules/@farcaster/frame-sdk/dist/endpoint.js b/node_modules/@farcaster/frame-sdk/dist/endpoint.js
index b034ca0..697a451 100644
--- a/node_modules/@farcaster/frame-sdk/dist/endpoint.js
+++ b/node_modules/@farcaster/frame-sdk/dist/endpoint.js
@@ -1,18 +1,32 @@
var _a;
import { windowEndpoint } from "comlink";
+const mockEndpoint = {
+ // noop
+ postMessage() { },
+ // noop
+ addEventListener: () => {
+ },
+ // noop
+ removeEventListener: () => {
+ },
+}
const webViewEndpoint = {
- postMessage: (data) => {
- console.debug("[webview:req]", data);
- window.ReactNativeWebView.postMessage(JSON.stringify(data));
- },
- addEventListener: (_, listener, ...args) => {
- document.addEventListener("FarcasterFrameCallback", listener, ...args);
- },
- removeEventListener: (_, listener) => {
- document.removeEventListener("FarcasterFrameCallback", listener);
- },
+ postMessage: (data) => {
+ console.debug("[webview:req]", data);
+ window.ReactNativeWebView.postMessage(JSON.stringify(data));
+ },
+ addEventListener: (_, listener, ...args) => {
+ document.addEventListener("FarcasterFrameCallback", listener, ...args);
+ },
+ removeEventListener: (_, listener) => {
+ document.removeEventListener("FarcasterFrameCallback", listener);
+ },
};
-export const endpoint = (window === null || window === void 0 ? void 0 : window.ReactNativeWebView)
+export const endpoint = (() => {
+ if (typeof window === 'undefined') return mockEndpoint
+ return window?.ReactNativeWebView
? webViewEndpoint
: // TODO fallback cleanly when not in iFrame or webview
- windowEndpoint((_a = window === null || window === void 0 ? void 0 : window.parent) !== null && _a !== void 0 ? _a : window);
+ windowEndpoint(window?.parent ?? window);
+})()
+
diff --git a/node_modules/@farcaster/frame-sdk/dist/provider.js b/node_modules/@farcaster/frame-sdk/dist/provider.js
index 4191c14..e0bdf60 100644
--- a/node_modules/@farcaster/frame-sdk/dist/provider.js
+++ b/node_modules/@farcaster/frame-sdk/dist/provider.js
@@ -3,16 +3,17 @@ import { frameHost } from "./frameHost";
const emitter = Provider.createEmitter();
const store = RpcRequest.createStore();
export const provider = Provider.from({
- ...emitter,
- async request(args) {
- return await frameHost.ethProviderRequest(
- // @ts-expect-error - from ox examples but our FetchFn needs better typing
- store.prepare(args));
- },
+ ...emitter,
+ async request(args) {
+ return await frameHost.ethProviderRequest(
+ // @ts-expect-error - from ox examples but our FetchFn needs better typing
+ store.prepare(args));
+ },
});
-document.addEventListener("FarcasterFrameEvent", (event) => {
+if (typeof document !== 'undefined')
+ document.addEventListener("FarcasterFrameEvent", (event) => {
if (event instanceof MessageEvent) {
- // TODO narrow to EventMap types and emit
- // emitter.emit(event.type as (keyof Provider.EventMap), event.data);
+ // TODO narrow to EventMap types and emit
+ // emitter.emit(event.type as (keyof Provider.EventMap), event.data);
}
-});
+ });
diff --git a/node_modules/@farcaster/frame-sdk/dist/sdk.js b/node_modules/@farcaster/frame-sdk/dist/sdk.js
index ad3ef38..1bbd3d7 100644
--- a/node_modules/@farcaster/frame-sdk/dist/sdk.js
+++ b/node_modules/@farcaster/frame-sdk/dist/sdk.js
@@ -2,44 +2,45 @@ import { EventEmitter } from "eventemitter3";
import { frameHost } from "./frameHost";
import { provider } from "./provider";
export function createEmitter() {
- const emitter = new EventEmitter();
- return {
- get eventNames() {
- return emitter.eventNames.bind(emitter);
- },
- get listenerCount() {
- return emitter.listenerCount.bind(emitter);
- },
- get listeners() {
- return emitter.listeners.bind(emitter);
- },
- addListener: emitter.addListener.bind(emitter),
- emit: emitter.emit.bind(emitter),
- off: emitter.off.bind(emitter),
- on: emitter.on.bind(emitter),
- once: emitter.once.bind(emitter),
- removeAllListeners: emitter.removeAllListeners.bind(emitter),
- removeListener: emitter.removeListener.bind(emitter),
- };
+ const emitter = new EventEmitter();
+ return {
+ get eventNames() {
+ return emitter.eventNames.bind(emitter);
+ },
+ get listenerCount() {
+ return emitter.listenerCount.bind(emitter);
+ },
+ get listeners() {
+ return emitter.listeners.bind(emitter);
+ },
+ addListener: emitter.addListener.bind(emitter),
+ emit: emitter.emit.bind(emitter),
+ off: emitter.off.bind(emitter),
+ on: emitter.on.bind(emitter),
+ once: emitter.once.bind(emitter),
+ removeAllListeners: emitter.removeAllListeners.bind(emitter),
+ removeListener: emitter.removeListener.bind(emitter),
+ };
}
const emitter = createEmitter();
export const sdk = {
- ...emitter,
- context: frameHost.context,
- actions: {
- setPrimaryButton: frameHost.setPrimaryButton.bind(frameHost),
- ready: frameHost.ready.bind(frameHost),
- close: frameHost.close.bind(frameHost),
- openUrl: frameHost.openUrl.bind(frameHost),
- },
- wallet: {
- ethProvider: provider,
- }
+ ...emitter,
+ context: frameHost.context,
+ actions: {
+ setPrimaryButton: frameHost.setPrimaryButton.bind(frameHost),
+ ready: frameHost.ready.bind(frameHost),
+ close: frameHost.close.bind(frameHost),
+ openUrl: frameHost.openUrl.bind(frameHost),
+ },
+ wallet: {
+ ethProvider: provider,
+ }
};
-document.addEventListener("FarcasterFrameEvent", (event) => {
+if (typeof document !== 'undefined')
+ document.addEventListener("FarcasterFrameEvent", (event) => {
if (event instanceof MessageEvent) {
- if (event.data.type === "primaryButtonClicked") {
- emitter.emit("primaryButtonClicked");
- }
+ if (event.data.type === "primaryButtonClicked") {
+ emitter.emit("primaryButtonClicked");
+ }
}
-});
+ });
diff --git a/node_modules/@farcaster/frame-sdk/src/endpoint.ts b/node_modules/@farcaster/frame-sdk/src/endpoint.ts
index d7aac19..54ef4c5 100644
--- a/node_modules/@farcaster/frame-sdk/src/endpoint.ts
+++ b/node_modules/@farcaster/frame-sdk/src/endpoint.ts
@@ -1,5 +1,16 @@
import { type Endpoint, windowEndpoint } from "comlink";
+const mockEndpoint: Endpoint = {
+ // noop
+ postMessage() { },
+ // noop
+ addEventListener: () => {
+ },
+ // noop
+ removeEventListener: () => {
+ },
+}
+
const webViewEndpoint: Endpoint = {
postMessage: (data: unknown) => {
console.debug("[webview:req]", data);
@@ -13,7 +24,11 @@ const webViewEndpoint: Endpoint = {
},
};
-export const endpoint = window?.ReactNativeWebView
- ? webViewEndpoint
- : // TODO fallback cleanly when not in iFrame or webview
+export const endpoint = (() => {
+ if (typeof window === 'undefined') return mockEndpoint
+ return window?.ReactNativeWebView
+ ? webViewEndpoint
+ : // TODO fallback cleanly when not in iFrame or webview
windowEndpoint(window?.parent ?? window);
+})()
+
diff --git a/node_modules/@farcaster/frame-sdk/src/provider.ts b/node_modules/@farcaster/frame-sdk/src/provider.ts
index 843ed6a..f1754d3 100644
--- a/node_modules/@farcaster/frame-sdk/src/provider.ts
+++ b/node_modules/@farcaster/frame-sdk/src/provider.ts
@@ -16,9 +16,10 @@ export const provider = Provider.from({
export type ProviderType = typeof provider;
-document.addEventListener("FarcasterFrameEvent", (event) => {
- if (event instanceof MessageEvent) {
- // TODO narrow to EventMap types and emit
- // emitter.emit(event.type as (keyof Provider.EventMap), event.data);
- }
-});
+if (typeof document !== 'undefined')
+ document.addEventListener("FarcasterFrameEvent", (event) => {
+ if (event instanceof MessageEvent) {
+ // TODO narrow to EventMap types and emit
+ // emitter.emit(event.type as (keyof Provider.EventMap), event.data);
+ }
+ });
diff --git a/node_modules/@farcaster/frame-sdk/src/sdk.ts b/node_modules/@farcaster/frame-sdk/src/sdk.ts
index ca87b18..60b70c0 100644
--- a/node_modules/@farcaster/frame-sdk/src/sdk.ts
+++ b/node_modules/@farcaster/frame-sdk/src/sdk.ts
@@ -42,10 +42,11 @@ export const sdk: FrameSDK = {
}
};
-document.addEventListener("FarcasterFrameEvent", (event) => {
- if (event instanceof MessageEvent) {
- if (event.data.type === "primaryButtonClicked") {
- emitter.emit("primaryButtonClicked");
+if (typeof document !== 'undefined')
+ document.addEventListener("FarcasterFrameEvent", (event) => {
+ if (event instanceof MessageEvent) {
+ if (event.data.type === "primaryButtonClicked") {
+ emitter.emit("primaryButtonClicked");
+ }
}
- }
-});
+ });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment