console.time('HTMLToCanvas');

html2canvas(document.querySelector('body')).then(canvas => {
    let img = canvas.toDataURL("image/png");
    document.body.append('<img id="result" src="'+img+'"/>');
    console.timeEnd('HTMLToCanvas');
});

// HTMLToCanvas: 26687.60693359375ms / 0.0374 FPS

let promise = navigator.mediaDevices.getDisplayMedia(constraints);

// Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: MIT-0

var AWS = require("aws-sdk");
AWS.config.update({ region: process.env.AWS_REGION });
var DDB = new AWS.DynamoDB({ apiVersion: "2012-10-08" });

exports.handler = function (event, context, callback) {
  var putParams = {
    TableName: process.env.TABLE_NAME,
    Item: {
      connectionId: { S: event.requestContext.connectionId }
    }
  };

  DDB.putItem(putParams, function (err) {
    callback(null, {
      statusCode: err ? 500 : 200,
      body: err ? "Failed to connect: " + JSON.stringify(err) : "Connected."
    });
  });
};

exports.handler = async (event, context) => {
    const apigwManagementApi = new AWS.ApiGatewayManagementApi({
      apiVersion: '2018-11-29',
      endpoint: event.requestContext.domainName + '/' + event.requestContext.stage
    });

    const { data } = JSON.parse(event.body);

    switch (data.action) {
      case 'register':
        await registerController(data, event, ddb, apigwManagementApi);
        break;
      case 'communicate':
        await communicateController(data, event, ddb, apigwManagementApi);
        break;
      
      default:
        break;
    }
}

let el = document.elementFromPoint(x, y); 
// https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/elementFromPoint

el.dispatchEvent(new MouseEvent('click', opts));

if (document.activeElement !== null) {
  this.fireEvent('blur', document.activeElement as HTMLElement);
}

if (el.focus) {
  el.focus();
}

export class ClickToAction implements PreoccupyAction {
  static type: string = ActionsName.CLICK_TO;
  static eventName: string = 'click';
  constructor(
    public payload: {
      x: number;
      y: number;
    }
  ) {
    this.type = ClickToAction.type;
  }

  performEvent(dom: DomController, stack: PreoccupyAction[]) {
    dom.clickTo(this.payload);
  }

  static handleEvent(host: Host, event: Event): PreoccupyAction {
    const payload = host.getRelativeCoordinate(event as MouseEvent);
    return new ClickToAction(payload);
  }
}

import { Host, RxjsTransport } from 'preoccupyjs';

// fill free to style and modify this element as you wish, but keep it in the DOM!
const hostEl = document.createElement('div'); 
hostEl.tabIndex = 0; // make it focusable

const transport = new RxjsTransport(options as {
    subject: new Subject<object>; //e.g. WebSocketSubject
});


const host = new Host(transport, hostEl);
host.start(); // run the communication whenever your app is ready!

import { Host, RxjsTransport, DomController } from 'preoccupyjs';

//Set up the transport
const transport = new RxjsTransport(options as {
    subject: new Subject() // e.g. WebSocketSubject
});

// Set up and run the client
// It's possible to specify the controlled scope of the page by passing any DOM element
const client = new Client(transport, new DomController(document.body)); 

// run the communication whenever your app is ready!
client.start();

javascript:(function(){
  //Statements returning a non-undefined type, e.g. assignments
})();

<a href="{bookmarkletText}"> Bookmark me </a>

import bookmarklet from './assets/bookmarklet.bundle';

// via JSX
return (
  <a href={bookmarklet}>
    Click me, I am a bookmarklet.
  </a>
);
 
// via vanilla JS
let link = document.createElement('a');
    link.href = bookmarklet;
    link.innerHTML = 'Click me, I am a bookmaklet';
return link;