@reactpy/client 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# @reactpy/client
+
+A client for ReactPy implemented in React

package/package.json

@@ -0,0 +1,35 @@
+{
+  "author": "Ryan Morshead",
+  "dependencies": {
+    "htm": "^3.0.3",
+    "json-pointer": "^0.6.2"
+  },
+  "description": "A client for ReactPy implemented in React",
+  "devDependencies": {
+    "jsdom": "16.5.0",
+    "lodash": "^4.17.21",
+    "prettier": "^2.5.1",
+    "uvu": "^0.5.1"
+  },
+  "files": [
+    "src/**/*.js"
+  ],
+  "license": "MIT",
+  "main": "src/index.js",
+  "name": "@reactpy/client",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reactive-python/reactpy"
+  },
+  "scripts": {
+    "check-format": "prettier --check ./src ./tests",
+    "format": "prettier --write ./src ./tests",
+    "test": "uvu tests"
+  },
+  "type": "module",
+  "version": "0.1.0"
+}

package/src/components.js

@@ -0,0 +1,220 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import htm from "htm";
+import { set as setJsonPointer } from "json-pointer";
+
+import { useImportSource } from "./import-source.js";
+import { LayoutContext } from "./contexts.js";
+
+import {
+  createElementAttributes,
+  createElementChildren,
+} from "./element-utils.js";
+
+const html = htm.bind(React.createElement);
+
+export function Layout({ saveUpdateHook, sendEvent, loadImportSource }) {
+  const currentModel = React.useState({})[0];
+  const forceUpdate = useForceUpdate();
+
+  const patchModel = React.useCallback(
+    ({ path, model }) => {
+      if (!path) {
+        Object.assign(currentModel, model);
+      } else {
+        setJsonPointer(currentModel, path, model);
+      }
+      forceUpdate();
+    },
+    [currentModel]
+  );
+
+  React.useEffect(() => saveUpdateHook(patchModel), [patchModel]);
+
+  if (!Object.keys(currentModel).length) {
+    return html`<${React.Fragment} />`;
+  }
+
+  return html`
+    <${LayoutContext.Provider} value=${{ sendEvent, loadImportSource }}>
+      <${Element} model=${currentModel} />
+    <//>
+  `;
+}
+
+export function Element({ model }) {
+  if (model.error !== undefined) {
+    if (model.error) {
+      return html`<pre>${model.error}</pre>`;
+    } else {
+      return null;
+    }
+  } else if (model.tagName == "script") {
+    return html`<${ScriptElement} model=${model} />`;
+  } else if (["input", "select", "textarea"].includes(model.tagName)) {
+    return html`<${UserInputElement} model=${model} />`;
+  } else if (model.importSource) {
+    return html`<${ImportedElement} model=${model} />`;
+  } else {
+    return html`<${StandardElement} model=${model} />`;
+  }
+}
+
+function StandardElement({ model }) {
+  const layoutContext = React.useContext(LayoutContext);
+
+  let type;
+  if (model.tagName == "") {
+    type = React.Fragment;
+  } else {
+    type = model.tagName;
+  }
+
+  // Use createElement here to avoid warning about variable numbers of children not
+  // having keys. Warning about this must now be the responsibility of the server
+  // providing the models instead of the client rendering them.
+  return React.createElement(
+    type,
+    createElementAttributes(model, layoutContext.sendEvent),
+    ...createElementChildren(
+      model,
+      (model) => html`<${Element} key=${model.key} model=${model} />`
+    )
+  );
+}
+
+// Element with a value attribute controlled by user input
+function UserInputElement({ model }) {
+  const ref = React.useRef();
+  const layoutContext = React.useContext(LayoutContext);
+
+  const props = createElementAttributes(model, layoutContext.sendEvent);
+
+  // Because we handle events asynchronously, we must leave the value uncontrolled in
+  // order to allow all changes committed by the user to be recorded in the order they
+  // occur. If we don't the user may commit multiple changes before we render next
+  // causing the content of prior changes to be overwritten by subsequent changes.
+  let value = props.value;
+  delete props.value;
+
+  // Instead of controlling the value, we set it in an effect.
+  React.useEffect(() => {
+    if (value !== undefined) {
+      ref.current.value = value;
+    }
+  }, [ref.current, value]);
+
+  // Track a buffer of observed values in order to avoid flicker
+  const observedValues = React.useState([])[0];
+  if (observedValues) {
+    if (value === observedValues[0]) {
+      observedValues.shift();
+      value = observedValues[observedValues.length - 1];
+    } else {
+      observedValues.length = 0;
+    }
+  }
+
+  const givenOnChange = props.onChange;
+  if (typeof givenOnChange === "function") {
+    props.onChange = (event) => {
+      observedValues.push(event.target.value);
+      givenOnChange(event);
+    };
+  }
+
+  // Use createElement here to avoid warning about variable numbers of children not
+  // having keys. Warning about this must now be the responsibility of the server
+  // providing the models instead of the client rendering them.
+  return React.createElement(
+    model.tagName,
+    {
+      ...props,
+      ref: (target) => {
+        ref.current = target;
+      },
+    },
+    ...createElementChildren(
+      model,
+      (model) => html`<${Element} key=${model.key} model=${model} />`
+    )
+  );
+}
+
+function ScriptElement({ model }) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    if (model?.children?.length > 1) {
+      console.error("Too many children for 'script' element.");
+    }
+
+    let scriptContent = model?.children?.[0];
+
+    let scriptElement;
+    if (model.attributes) {
+      scriptElement = document.createElement("script");
+      for (const [k, v] of Object.entries(model.attributes)) {
+        scriptElement.setAttribute(k, v);
+      }
+      scriptElement.appendChild(document.createTextNode(scriptContent));
+      ref.current.appendChild(scriptElement);
+    } else {
+      let scriptResult = eval(scriptContent);
+      if (typeof scriptResult == "function") {
+        return scriptResult();
+      }
+    }
+  }, [model.key]);
+  return html`<div ref=${ref} />`;
+}
+
+function ImportedElement({ model }) {
+  const layoutContext = React.useContext(LayoutContext);
+
+  const importSourceFallback = model.importSource.fallback;
+  const importSource = useImportSource(model.importSource);
+
+  if (!importSource) {
+    // display a fallback if one was given
+    if (!importSourceFallback) {
+      return html`<div />`;
+    } else if (typeof importSourceFallback === "string") {
+      return html`<div>${importSourceFallback}</div>`;
+    } else {
+      return html`<${StandardElement} model=${importSourceFallback} />`;
+    }
+  } else {
+    return html`<${_ImportedElement}
+      model=${model}
+      importSource=${importSource}
+    />`;
+  }
+}
+
+function _ImportedElement({ model, importSource }) {
+  const layoutContext = React.useContext(LayoutContext);
+  const mountPoint = React.useRef(null);
+  const sourceBinding = React.useRef(null);
+
+  React.useEffect(() => {
+    sourceBinding.current = importSource.bind(mountPoint.current);
+    if (!importSource.data.unmountBeforeUpdate) {
+      return sourceBinding.current.unmount;
+    }
+  }, []);
+
+  // this effect must run every time in case the model has changed
+  React.useEffect(() => {
+    sourceBinding.current.render(model);
+    if (importSource.data.unmountBeforeUpdate) {
+      return sourceBinding.current.unmount;
+    }
+  });
+
+  return html`<div ref=${mountPoint} />`;
+}
+
+function useForceUpdate() {
+  const [, updateState] = React.useState();
+  return React.useCallback(() => updateState({}), []);
+}

package/src/contexts.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const LayoutContext = React.createContext({
+  sendEvent: undefined,
+  loadImportSource: undefined,
+});

package/src/element-utils.js

@@ -0,0 +1,82 @@
+import { serializeEvent } from "./event-to-object.js";
+
+export function createElementChildren(model, createElement) {
+  if (!model.children) {
+    return [];
+  } else {
+    return model.children
+      .filter((x) => x) // filter nulls
+      .map((child) => {
+        switch (typeof child) {
+          case "object":
+            return createElement(child);
+          case "string":
+            return child;
+        }
+      });
+  }
+}
+
+export function createElementAttributes(model, sendEvent) {
+  const attributes = Object.assign({}, model.attributes);
+
+  if (model.eventHandlers) {
+    for (const [eventName, eventSpec] of Object.entries(model.eventHandlers)) {
+      attributes[eventName] = createEventHandler(sendEvent, eventSpec);
+    }
+  }
+
+  return Object.fromEntries(Object.entries(attributes).map(normalizeAttribute));
+}
+
+function createEventHandler(sendEvent, eventSpec) {
+  return function () {
+    const data = Array.from(arguments).map((value) => {
+      if (typeof value === "object" && value.nativeEvent) {
+        if (eventSpec["preventDefault"]) {
+          value.preventDefault();
+        }
+        if (eventSpec["stopPropagation"]) {
+          value.stopPropagation();
+        }
+        return serializeEvent(value);
+      } else {
+        return value;
+      }
+    });
+    sendEvent({
+      data: data,
+      target: eventSpec["target"],
+    });
+  };
+}
+
+function normalizeAttribute([key, value]) {
+  let normKey = key;
+  let normValue = value;
+
+  if (key === "style" && typeof value === "object") {
+    normValue = Object.fromEntries(
+      Object.entries(value).map(([k, v]) => [snakeToCamel(k), v])
+    );
+  } else if (
+    key.startsWith("data_") ||
+    key.startsWith("aria_") ||
+    DASHED_HTML_ATTRS.includes(key)
+  ) {
+    normKey = key.replaceAll("_", "-");
+  } else {
+    normKey = snakeToCamel(key);
+  }
+  return [normKey, normValue];
+}
+
+function snakeToCamel(str) {
+  return str.replace(/([_][a-z])/g, (group) =>
+    group.toUpperCase().replace("_", "")
+  );
+}
+
+// see list of HTML attributes with dashes in them:
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#attribute_list
+const DASHED_HTML_ATTRS = ["accept_charset", "http_equiv"];

package/src/event-to-object.js

@@ -0,0 +1,240 @@
+export function serializeEvent(event) {
+  const data = {};
+
+  if (event.type in eventTransforms) {
+    Object.assign(data, eventTransforms[event.type](event));
+  }
+
+  data.target = serializeDomElement(event.target);
+  data.currentTarget =
+    event.target === event.currentTarget
+      ? data.target
+      : serializeDomElement(event.currentTarget);
+  data.relatedTarget = serializeDomElement(event.relatedTarget);
+
+  return data;
+}
+
+function serializeDomElement(element) {
+  let elementData = null;
+  if (element) {
+    elementData = defaultElementTransform(element);
+    if (element.tagName in elementTransforms) {
+      elementTransforms[element.tagName].forEach((trans) =>
+        Object.assign(elementData, trans(element))
+      );
+    }
+  }
+  return elementData;
+}
+
+const elementTransformCategories = {
+  hasValue: (element) => ({
+    value: element.value,
+  }),
+  hasCurrentTime: (element) => ({
+    currentTime: element.currentTime,
+  }),
+  hasFiles: (element) => {
+    if (element?.type === "file") {
+      return {
+        files: Array.from(element.files).map((file) => ({
+          lastModified: file.lastModified,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+        })),
+      };
+    } else {
+      return {};
+    }
+  },
+  hasElements: (element) => {
+    const { elements } = element;
+    const indices = [...Array(elements.length).keys()];
+    return {
+      elements: indices.map((index) => serializeDomElement(elements[index])),
+    };
+  },
+  hasName: (element) => {
+    const { name } = element;
+    // In some edge cases, "name" may not be a string. For example, in the case of
+    // `<form><input name="name"></form>`, the "name" attribute of the `<form>` will
+    // be the `<input>` element.
+    return typeof name === "string" ? { name } : {};
+  },
+};
+
+function defaultElementTransform(element) {
+  return { boundingClientRect: element.getBoundingClientRect() };
+}
+
+const elementTagCategories = {
+  hasValue: [
+    "BUTTON",
+    "INPUT",
+    "OPTION",
+    "LI",
+    "METER",
+    "PROGRESS",
+    "PARAM",
+    "SELECT",
+    "TEXTAREA",
+  ],
+  hasCurrentTime: ["AUDIO", "VIDEO"],
+  hasFiles: ["INPUT"],
+  hasElements: ["FORM"],
+  hasName: [
+    "BUTTON",
+    "FORM",
+    "FIELDSET",
+    "IFRAME",
+    "INPUT",
+    "KEYGEN",
+    "OBJECT",
+    "OUTPUT",
+    "SELECT",
+    "TEXTAREA",
+    "MAP",
+    "META",
+    "PARAM",
+  ],
+};
+
+const elementTransforms = {};
+
+Object.keys(elementTagCategories).forEach((category) => {
+  elementTagCategories[category].forEach((type) => {
+    const transforms =
+      elementTransforms[type] || (elementTransforms[type] = []);
+    transforms.push(elementTransformCategories[category]);
+  });
+});
+
+function EventTransformCategories() {
+  this.clipboard = (event) => ({
+    clipboardData: event.clipboardData,
+  });
+  this.composition = (event) => ({
+    data: event.data,
+  });
+  this.keyboard = (event) => ({
+    altKey: event.altKey,
+    charCode: event.charCode,
+    ctrlKey: event.ctrlKey,
+    key: event.key,
+    keyCode: event.keyCode,
+    locale: event.locale,
+    location: event.location,
+    metaKey: event.metaKey,
+    repeat: event.repeat,
+    shiftKey: event.shiftKey,
+    which: event.which,
+  });
+  this.mouse = (event) => ({
+    altKey: event.altKey,
+    button: event.button,
+    buttons: event.buttons,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    pageX: event.pageX,
+    pageY: event.pageY,
+    screenX: event.screenX,
+    screenY: event.screenY,
+    shiftKey: event.shiftKey,
+  });
+  this.pointer = (event) => ({
+    ...this.mouse(event),
+    pointerId: event.pointerId,
+    width: event.width,
+    height: event.height,
+    pressure: event.pressure,
+    tiltX: event.tiltX,
+    tiltY: event.tiltY,
+    pointerType: event.pointerType,
+    isPrimary: event.isPrimary,
+  });
+  this.selection = () => {
+    return { selectedText: window.getSelection().toString() };
+  };
+  this.touch = (event) => ({
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+  });
+  this.ui = (event) => ({
+    detail: event.detail,
+  });
+  this.wheel = (event) => ({
+    deltaMode: event.deltaMode,
+    deltaX: event.deltaX,
+    deltaY: event.deltaY,
+    deltaZ: event.deltaZ,
+  });
+  this.animation = (event) => ({
+    animationName: event.animationName,
+    pseudoElement: event.pseudoElement,
+    elapsedTime: event.elapsedTime,
+  });
+  this.transition = (event) => ({
+    propertyName: event.propertyName,
+    pseudoElement: event.pseudoElement,
+    elapsedTime: event.elapsedTime,
+  });
+}
+
+const eventTypeCategories = {
+  clipboard: ["copy", "cut", "paste"],
+  composition: ["compositionend", "compositionstart", "compositionupdate"],
+  keyboard: ["keydown", "keypress", "keyup"],
+  mouse: [
+    "click",
+    "contextmenu",
+    "doubleclick",
+    "drag",
+    "dragend",
+    "dragenter",
+    "dragexit",
+    "dragleave",
+    "dragover",
+    "dragstart",
+    "drop",
+    "mousedown",
+    "mouseenter",
+    "mouseleave",
+    "mousemove",
+    "mouseout",
+    "mouseover",
+    "mouseup",
+  ],
+  pointer: [
+    "pointerdown",
+    "pointermove",
+    "pointerup",
+    "pointercancel",
+    "gotpointercapture",
+    "lostpointercapture",
+    "pointerenter",
+    "pointerleave",
+    "pointerover",
+    "pointerout",
+  ],
+  selection: ["select"],
+  touch: ["touchcancel", "touchend", "touchmove", "touchstart"],
+  ui: ["scroll"],
+  wheel: ["wheel"],
+  animation: ["animationstart", "animationend", "animationiteration"],
+  transition: ["transitionend"],
+};
+
+const eventTransforms = {};
+
+const eventTransformCategories = new EventTransformCategories();
+Object.keys(eventTypeCategories).forEach((category) => {
+  eventTypeCategories[category].forEach((type) => {
+    eventTransforms[type] = eventTransformCategories[category];
+  });
+});

package/src/import-source.js

@@ -0,0 +1,134 @@
+import React from "react";
+
+import { LayoutContext } from "./contexts.js";
+
+import {
+  createElementAttributes,
+  createElementChildren,
+} from "./element-utils.js";
+
+export function useImportSource(modelImportSource) {
+  const layoutContext = React.useContext(LayoutContext);
+  const [importSource, setImportSource] = React.useState(null);
+
+  React.useEffect(() => {
+    let unmounted = false;
+
+    loadModelImportSource(layoutContext, modelImportSource).then((src) => {
+      if (!unmounted) {
+        setImportSource(src);
+      }
+    });
+
+    return () => {
+      unmounted = true;
+    };
+  }, [layoutContext, modelImportSource, setImportSource]);
+
+  return importSource;
+}
+
+function loadModelImportSource(layoutContext, importSource) {
+  return layoutContext
+    .loadImportSource(importSource.source, importSource.sourceType)
+    .then((module) => {
+      if (typeof module.bind === "function") {
+        return {
+          data: importSource,
+          bind: (node) => {
+            const shortImportSource = {
+              source: importSource.source,
+              sourceType: importSource.sourceType,
+            };
+            const binding = module.bind(node, layoutContext);
+            if (
+              typeof binding.create === "function" &&
+              typeof binding.render === "function" &&
+              typeof binding.unmount === "function"
+            ) {
+              return {
+                render: (model) =>
+                  binding.render(
+                    createElementFromModuleBinding(
+                      layoutContext,
+                      importSource,
+                      module,
+                      binding,
+                      model
+                    )
+                  ),
+                unmount: binding.unmount,
+              };
+            } else {
+              console.error(
+                `${importSource.source} returned an impropper binding`
+              );
+            }
+          },
+        };
+      } else {
+        console.error(
+          `${importSource.source} did not export a function 'bind'`
+        );
+      }
+    });
+}
+
+function createElementFromModuleBinding(
+  layoutContext,
+  currentImportSource,
+  module,
+  binding,
+  model
+) {
+  let type;
+  if (model.importSource) {
+    if (!isImportSourceEqual(currentImportSource, model.importSource)) {
+      console.error(
+        "Parent element import source " +
+          stringifyImportSource(currentImportSource) +
+          " does not match child's import source " +
+          stringifyImportSource(model.importSource)
+      );
+      return null;
+    } else if (!module[model.tagName]) {
+      console.error(
+        "Module from source " +
+          stringifyImportSource(currentImportSource) +
+          ` does not export ${model.tagName}`
+      );
+      return null;
+    } else {
+      type = module[model.tagName];
+    }
+  } else {
+    type = model.tagName;
+  }
+  return binding.create(
+    type,
+    createElementAttributes(model, layoutContext.sendEvent),
+    createElementChildren(model, (child) =>
+      createElementFromModuleBinding(
+        layoutContext,
+        currentImportSource,
+        module,
+        binding,
+        child
+      )
+    )
+  );
+}
+
+function isImportSourceEqual(source1, source2) {
+  return (
+    source1.source === source2.source &&
+    source1.sourceType === source2.sourceType
+  );
+}
+
+function stringifyImportSource(importSource) {
+  return JSON.stringify({
+    source: importSource.source,
+    sourceType: importSource.sourceType,
+  });
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export * from "./mount.js";
+export * from "./contexts.js";
+export * from "./components.js";
+export * from "./server.js";

package/src/mount.js

@@ -0,0 +1,105 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Layout } from "./components.js";
+
+export function mountLayout(mountElement, layoutProps) {
+  ReactDOM.render(React.createElement(Layout, layoutProps), mountElement);
+}
+
+export function mountLayoutWithWebSocket(
+  element,
+  endpoint,
+  loadImportSource,
+  maxReconnectTimeout
+) {
+  mountLayoutWithReconnectingWebSocket(
+    element,
+    endpoint,
+    loadImportSource,
+    maxReconnectTimeout
+  );
+}
+
+function mountLayoutWithReconnectingWebSocket(
+  element,
+  endpoint,
+  loadImportSource,
+  maxReconnectTimeout,
+  mountState = {
+    everMounted: false,
+    reconnectAttempts: 0,
+    reconnectTimeoutRange: 0,
+  }
+) {
+  const socket = new WebSocket(endpoint);
+
+  const updateHookPromise = new LazyPromise();
+
+  socket.onopen = (event) => {
+    console.info(`ReactPy WebSocket connected.`);
+
+    if (mountState.everMounted) {
+      ReactDOM.unmountComponentAtNode(element);
+    }
+    _resetOpenMountState(mountState);
+
+    mountLayout(element, {
+      loadImportSource,
+      saveUpdateHook: updateHookPromise.resolve,
+      sendEvent: (event) => socket.send(JSON.stringify(event)),
+    });
+  };
+
+  socket.onmessage = (event) => {
+    const message = JSON.parse(event.data);
+    updateHookPromise.promise.then((update) => update(message));
+  };
+
+  socket.onclose = (event) => {
+    if (!maxReconnectTimeout) {
+      console.info(`ReactPy WebSocket connection lost.`);
+      return;
+    }
+
+    const reconnectTimeout = _nextReconnectTimeout(
+      maxReconnectTimeout,
+      mountState
+    );
+
+    console.info(
+      `ReactPy WebSocket connection lost. Reconnecting in ${reconnectTimeout} seconds...`
+    );
+
+    setTimeout(function () {
+      mountState.reconnectAttempts++;
+      mountLayoutWithReconnectingWebSocket(
+        element,
+        endpoint,
+        loadImportSource,
+        maxReconnectTimeout,
+        mountState
+      );
+    }, reconnectTimeout * 1000);
+  };
+}
+
+function _resetOpenMountState(mountState) {
+  mountState.everMounted = true;
+  mountState.reconnectAttempts = 0;
+  mountState.reconnectTimeoutRange = 0;
+}
+
+function _nextReconnectTimeout(maxReconnectTimeout, mountState) {
+  const timeout =
+    Math.floor(Math.random() * mountState.reconnectTimeoutRange) || 1;
+  mountState.reconnectTimeoutRange =
+    (mountState.reconnectTimeoutRange + 5) % maxReconnectTimeout;
+  return timeout;
+}
+
+function LazyPromise() {
+  this.promise = new Promise((resolve, reject) => {
+    this.resolve = resolve;
+    this.reject = reject;
+  });
+}

package/src/server.js

@@ -0,0 +1,46 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { mountLayoutWithWebSocket } from "./mount.js";
+
+export function mountWithLayoutServer(
+  element,
+  serverInfo,
+  maxReconnectTimeout
+) {
+  const loadImportSource = (source, sourceType) =>
+    import(
+      sourceType == "NAME" ? serverInfo.path.module(source) : source
+    ).catch((error) => {
+      // Added a catch to silence a build warning caller so we just re-throw.
+      // The caller is actually responsible for catching this error.
+      throw error;
+    });
+
+  mountLayoutWithWebSocket(
+    element,
+    serverInfo.path.stream,
+    loadImportSource,
+    maxReconnectTimeout
+  );
+}
+
+export function LayoutServerInfo({ host, port, path, query, secure }) {
+  const wsProtocol = `ws${secure ? "s" : ""}`;
+  const wsBaseUrl = `${wsProtocol}://${host}:${port}`;
+
+  let pathName = path || new URL(document.baseURI).pathname;
+  if (pathName.endsWith("/")) {
+    pathName = pathName.slice(0, -1);
+  }
+
+  if (query) {
+    query = `?${query}`;
+  } else {
+    query = "";
+  }
+
+  this.path = {
+    stream: `${wsBaseUrl}/_reactpy/stream${pathName}${query}`,
+    module: (source) => `/_reactpy/modules/${source}`,
+  };
+}