```js self.addEventListener('fetch', event => { const { headers, url } = event.request; const isSSERequest = headers.get('Accept') === 'text/event-stream';

// We process only SSE connections if (!isSSERequest) { return; }

// Response Headers for SSE const sseHeaders = { 'content-type': 'text/event-stream', 'Transfer-Encoding': 'chunked', 'Connection': 'keep-alive', }; // Function formatting data for SSE const sseChunkData = (data, event, retry, id) => Object.entries({ event, id, data, retry }) .filter(([, value]) => ![undefined, null].includes(value)) .map(([key, value]) => ${key}: ${value}) .join('\n') + '\n\n'; // Table with server connections, where key is url, value is EventSource const serverConnections = {}; // For each url, we open only one connection to the server and use it for subsequent requests const getServerConnection = url => { if (!serverConnections[url]) serverConnections[url] = new EventSource(url);

return serverConnections[url];

}; // When we receive a message from the server, we forward it to the browser const onServerMessage = (controller, { data, type, retry, lastEventId }) => { const responseText = sseChunkData(data, type, retry, lastEventId); const responseData = Uint8Array.from(responseText, x => x.charCodeAt(0)); controller.enqueue(responseData); }; const stream = new ReadableStream({ start: controller => getServerConnection(url).onmessage = onServerMessage.bind(null, controller) }); const response = new Response(stream, { headers: sseHeaders });

event.respondWith(response); }); ```

```html <select id="position"> <br /> <option>beforebegin</option>

</select>

<button id="insert">Insert HTML</button> <button id="reset">Reset</button>

Some text, with a code-formatted element inside it.

```

```js const insert = document.querySelector("#insert"); insert.addEventListener("click", () => { const subject = document.querySelector("#subject"); const positionSelect = document.querySelector("#position"); subject.insertAdjacentHTML( positionSelect.value, "inserted text" ); });

const reset = document.querySelector("#reset"); reset.addEventListener("click", () => { document.location.reload(); });

```

js var mylist = document.getElementById('mylist'); mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

```html

• first
• second

```

```js /* * @param {String} HTML representing a single element * @return {Element} / function htmlToElement(html) { var template = document.createElement('template'); html = html.trim(); // Never return a text node of whitespace as the result template.innerHTML = html; return template.content.firstChild; }

var td = htmlToElement('<td>foo</td>'), div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/* * @param {String} HTML representing any number of sibling elements * @return {NodeList} / function htmlToElements(html) { var template = document.createElement('template'); template.innerHTML = html; return template.content.childNodes; }

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>'); ```

npx -p typescript tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types

js /** * This component is just a Box with border. * It serves as an example of how you can incorporate * components together. * * Component also has slots, methods and events. * * @component * @example <caption>Basic usage just with the default slot</caption> * <Box> * I am inside a slot * </Box> * * @example <caption>Using second component inside</caption> * <Box> * <ProgressBar :spent="spent" :remaining="50"></ProgressBar> * </Box> * * @example <caption>Example of passing an entire component in a preview</caption> * { * template: `<Box> * <ProgressBar :spent="spent" :remaining="50"></ProgressBar> * <ProgressBar :spent="50" :remaining="50" style="margin-top: 20px"></ProgressBar> * </Box>`, * data: function() { * return {spent: 223}; * } * } */ export default { name: "Box", props: { /** * This will be in the header */ title: { type: String, default: "My box" } }, methods: { /** * Also, you can describe methods for each component * the same as you would do this in regular @jsdoc * documented file * * @param {string} prop1 some example property * @param {string} prop2 other property */ exampleMethod(prop1, prop2) { // method body // The method could even throw an event /** * This event could be thrown by component in case * of some kind of unexpected behaviour. * * @category API * @event unexpectedEvent */ this.$emit('unexpecteEvent') } } }

🥳

```js import { connect } from 'cloudflare:sockets';

export default { async fetch(req: Request) { const gopherAddr = "gopher.floodgap.com:70"; const url = new URL(req.url);

try {
  const socket = connect(gopherAddr);

  const writer = socket.writable.getWriter()
  const encoder = new TextEncoder();
  const encoded = encoder.encode(url.pathname + "\r\n");
  await writer.write(encoded);

  return new Response(socket.readable, { headers: { "Content-Type": "text/plain" } });
} catch (error) {
  return new Response("Socket connection failed: " + error, { status: 500 });
}

} }; ts connect(address: SocketAddress | string, options?: SocketOptions): Socket

declare interface Socket { get readable(): ReadableStream; get writable(): WritableStream; get closed(): Promise<void>; close(): Promise<void>; startTls(): Socket; }

declare interface SocketOptions { secureTransport?: string; allowHalfOpen: boolean; }

declare interface SocketAddress { hostname: string; port: number; } ```

```ts

/* * Initiates a connection to the selected port. / async function connectToServer(): Promise<void> { hostInput.disabled = true; portInput.disabled = true; connectButton.textContent = 'Connecting...'; connectButton.disabled = true;

try { socket = new TCPSocket(hostInput.value, parseInt(portInput.value)); connection = await socket.opened; term.writeln('<CONNECTED>'); connectButton.textContent = 'Disconnect'; connectButton.disabled = false; } catch (e) { console.error(e); term.writeln(<ERROR: ${e.message}>); markDisconnected(); return; }

try { reader = connection?.readable.getReader(); for (;;) { const {value, done} = await reader.read(); if (value) { await new Promise<void>((resolve) => { term.write(value, resolve); }); } if (done) { break; } } reader.releaseLock(); reader = undefined; } catch (e) { console.error(e); term.writeln(<ERROR: ${e.message}>); }

markDisconnected(); }

/* * Closes the currently active connection. / async function disconnectFromServer(): Promise<void> { // Canceling |reader| will close the connection and cause the read loop in // connectToServer() to exit when read() returns with done set to true. if (reader) { await reader.cancel(); } } ```