TypeScript redux-saga.eventChannel函數代碼示例

function testEventChannel(secs: number) {
  const subscribe = (emitter: (input: number | END) => void) => {
    const iv = setInterval(() => {
      secs -= 1
      if (secs > 0) {
        emitter(secs)
      } else {
        emitter(END)
        clearInterval(iv)
      }
    }, 1000);
    return () => {
      clearInterval(iv)
    }
  };
  const c1: Channel<number> = eventChannel<number>(subscribe);
  // typings:expect-error
  const c2: Channel<number> = eventChannel<number>(subscribe,
    buffers.none<string>());

  const c3: Channel<number> = eventChannel<number>(subscribe,
    buffers.none<number>());

  // typings:expect-error
  const c4: Channel<number> = eventChannel<number>(subscribe,
    buffers.none<number>(), (input: string) => true);

  const c5: Channel<number> = eventChannel<number>(subscribe,
    buffers.none<number>(), (input: number) => true);
}

  yield spawn(function*() {
    yield put(artboardLoading(artboardId));

    // TODO - if state exists, then fetch diffs diffs instead
    const state: ApplicationState = yield select();
    const artboard = getArtboardById(artboardId, state);
    const [dependencyUris, compressedNode] = yield call(getComponentPreview, artboard.componentId, artboard.previewName, state);

    let doc = uncompressRootNode([dependencyUris, compressedNode]);
    const checksum = getDocumentChecksum(doc as SlimParentNode);
    const idSeed = crc32(checksum + artboard.$id);
    doc = setVMObjectIds(doc, idSeed);

    const mount = document.createElement("iframe");
    mount.setAttribute("style", `border: none; width: 100%; height: 100%`);
    const renderChan = eventChannel((emit) => {
      mount.addEventListener("load", () => {
        emit(renderDOM2(doc, mount.contentDocument.body));
      });
      return () => {};
    });

    yield spawn(function*() {
      yield put(artboardRendered(artboardId, yield take(renderChan)));
    });

    // Unique IDs necessary for the front-end to ensure that other artboards with the same component & preview don't contain the same node IDs.
    const html: SlimElement = createSlimElement("html", "html", [], [
      createSlimElement("body", "body", [], [doc])
    ]);

    yield put(artboardLoaded(artboard.$id, dependencyUris, html, checksum, mount));
  });

function initScheduleWS(id: string) {
    return eventChannel(emitter => {
        const socket = new WebSocket(Urls.getWebSocket('schedule'));
        socket.onmessage = (ev: MessageEvent) => {
            const data = JSON.parse(ev.data);
            if (data.isResult) {
                setTimeout(() => {
                    emitter(actionCreator(RunScheduleFulfillType, { id, data }));
                }, 1000);
            } else {
                emitter(actionCreator(ScheduleChunkDataType, { id, data }));
            }
        };
        socket.onopen = (ev: Event) => {
            socket.send(id);
        };
        socket.onclose = (ev: CloseEvent) => {
            setTimeout(() => {
                emitter(END);
            }, 2000);
        };
        socket.onerror = (ev: Event) => {
            console.error(ev);
            emitter(END);
        };
        return () => { return true; };
    });
}

function* handleCommands() {
  const chan = eventChannel((emit) => {

    // TODO - vscode styling is foobar, so this command is not available in package.json for now. Need to open a GH ticket for styling issues.
    vscode.commands.registerCommand("tandem.openTandem", () => {
      emit(openTandemExecuted());
    });

    vscode.commands.registerCommand("tandem.openExternalWindow", () => {
      emit(openExternalWindowExecuted());
    });

    vscode.commands.registerCommand("tandem.openCurrentFileInTandem", () => {
      emit(openCurrentFileInTandemExecuted());
    });

    vscode.commands.registerCommand("tandem.insertNewComponent", () => {
      emit(insertNewComponentExecuted());
    });

    vscode.commands.registerCommand("tandem.openTandemIfDisconnectedRequested", () => {
      emit(openTandemIfDisconnectedRequested());
    });

    return () => {};
  });

  while(true) {
    yield put(yield take(chan));
  }
}

 // region function deftinitions
 function* borrowLifeWatcher() {
   const chan = eventChannel(emit => {
     const callback = (event: KeyboardEvent) => {
       if (event.code === config.control.fire) {
         emit('borrow')
       }
     }
     document.addEventListener('keydown', callback)
     return () => document.removeEventListener('keydown', callback)
   })
   try {
     while (true) {
       yield take(chan)
       const state: State = yield select()
       const inMultiPlayersMode = selectors.isInMultiPlayersMode(state)
       const player: PlayerRecord = selectors.player(state, playerName)
       if (inMultiPlayersMode && !player.isActive() && player.lives === 0) {
         const lenderName = playerName === 'player-1' ? 'player-2' : 'player-1'
         const lender = selectors.player(state, lenderName)
         if (lender.lives > 0) {
           yield put(actions.decrementPlayerLife(lenderName))
           yield put(actions.incrementPlayerLife(playerName))
           yield spawnPlayerTank()
         }
       }
     }
   } finally {
     chan.close()
   }
 }

export function subscribe(channel: IChannel) {
    return eventChannel(emit => {
        channel.setWorkItem.attachHandler(workItemId => {
            emit(workItemSelected(workItemId));
        });

        channel.estimate.attachHandler(e => {
            emit(estimateSet(e));
        });

        channel.join.attachHandler(payload => {
            emit(userJoined(payload));
        });

        channel.left.attachHandler(payload => {
            emit(userLeft(payload));
        });

        channel.revealed.attachHandler(() => {
            emit(revealed());
        });

        channel.snapshot.attachHandler(snapshot => {
            // Snapshot received
            emit(snapshotReceived(snapshot));
        });

        // tslint:disable-next-line:no-empty
        return () => {};
    });
}

function* openSyntheticWindowEnvironment({ $id: windowId = generateDefaultId(), location, bounds, scrollPosition }: SyntheticWindow, browserId: string) {

  let main: SEnvWindowInterface;
  const documentId = generateDefaultId();
  const fetch = yield getFetch();
  const { apiHost }: SyntheticBrowserRootState = yield select();

  let currentWindow: SEnvWindowInterface;

  const reloadChan = yield eventChannel((emit) => {

    const reload = (bounds?: Bounds) => {
      if (currentWindow) {
        currentWindow.dispose();
      }
      const SEnvWindow = getSEnvWindowClass({ 
        console: getSEnvWindowConsole(), 
        fetch, 
        reload: () => reload(),
        getProxyUrl: (url: string) => {
          return apiHost && url.substr(0, 5) !== "data:" && url.indexOf(window.location.host) === -1 ? apiHost + "/proxy/" + encodeURIComponent(url) : url;
        },
        createRenderer: (window: SEnvWindowInterface) => {
          return window.top === window ? new SyntheticMirrorRenderer(window) : new SyntheticDOMRenderer(window, document)
        }
      });
      const window = currentWindow = new SEnvWindow(location, browserId);
  
      // ick. Better to use seed function instead to generate UIDs <- TODO.
      window.$id = windowId;
      window.document.$id = documentId;
  
      if (bounds) {
        window.moveTo(bounds.left, bounds.top);
        if (bounds.right) {
          window.resizeTo(bounds.right - bounds.left, bounds.bottom - bounds.top);
        }
      }

      emit(window);

      return window;
    };

    reload(bounds);

    return () => { };
  });

  yield spawn(function*() {
    while(true) {
      yield watchWindowExternalResourceUris(currentWindow, () => currentWindow.location.reload());
      currentWindow.$load();
      const isNew = !getSyntheticWindow(yield select(), currentWindow.$id);
      yield put(syntheticWindowOpened(currentWindow, null, isNew));
      yield take(reloadChan);
    }
  });
}

 yield spawn(function*() {
   const doneChan = eventChannel((emit) => {
     document.container.onload = emit;
     return () => {};
   });
   yield take(doneChan);
   const computedInfo = renderDOM(document.container.contentDocument.body, document.root);
   yield put(documentRendered(window.documents.indexOf(document), computedInfo, window));
 });

function* getPostData (req: express.Request) {

  const chan = eventChannel((emit) => {
    let buffer = [];
    req.on("data", chunk => buffer.push(chunk));
    req.on("end", () => emit(JSON.parse(buffer.join(""))));
    return () => { };
  });

  return yield take(chan);
}

function* handleActiveTextEditorChange() {
  const chan = eventChannel((emit) => {
    vscode.window.onDidChangeActiveTextEditor(editor => {
      emit(activeTextEditorChange(editor));
    });
    return () => {};
  });
  while(1) {
    yield put(yield take(chan));
  }
}