Use default prettier config for trailing commas

assets/js/app.js

@@ -47,7 +47,7 @@ function connect() {
       },
       hooks: hooks,
       dom: morphdomOptions,
-    }
+    },
   );
 
   // Show progress bar on live navigation and form submits

assets/js/events.js

@@ -55,7 +55,7 @@ export function registerGlobalEventHandlers() {
       }
     } else {
       alert(
-        "Sorry, your browser does not support clipboard copy.\nThis generally requires a secure origin — either HTTPS or localhost."
+        "Sorry, your browser does not support clipboard copy.\nThis generally requires a secure origin — either HTTPS or localhost.",
       );
     }
   });
@@ -82,25 +82,25 @@ export function registerGlobalEventHandlers() {
 
   window.addEventListener("lb:session_list:on_selection_change", () => {
     const anySessionSelected = !!document.querySelector(
-      "[name='session_ids[]']:checked"
+      "[name='session_ids[]']:checked",
     );
     const disconnect = document.querySelector(
-      "#edit-sessions [name='disconnect']"
+      "#edit-sessions [name='disconnect']",
     );
     const closeAll = document.querySelector(
-      "#edit-sessions [name='close_all']"
+      "#edit-sessions [name='close_all']",
     );
     disconnect.parentElement.classList.toggle(
       "pointer-events-none",
-      !anySessionSelected
+      !anySessionSelected,
     );
     disconnect.parentElement.classList.toggle(
       "opacity-50",
-      !anySessionSelected
+      !anySessionSelected,
     );
     closeAll.parentElement.classList.toggle(
       "pointer-events-none",
-      !anySessionSelected
+      !anySessionSelected,
     );
     closeAll.parentElement.classList.toggle("opacity-50", !anySessionSelected);
   });
@@ -125,7 +125,7 @@ export function registerGlobalEventHandlers() {
         event.stopPropagation();
       }
     },
-    { capture: true }
+    { capture: true },
   );
 }
 

assets/js/hooks/audio_input.js

@@ -195,7 +195,7 @@ const AudioInput = {
       return encodePcmAsWav(
         audioInfo.data,
         audioInfo.numChannels,
-        audioInfo.samplingRate
+        audioInfo.samplingRate,
       );
     }
   },

assets/js/hooks/cell.js

@@ -47,7 +47,7 @@ const Cell = {
 
     if (["code", "smart"].includes(this.props.type)) {
       const amplifyButton = this.el.querySelector(
-        `[data-el-amplify-outputs-button]`
+        `[data-el-amplify-outputs-button]`,
       );
       amplifyButton.addEventListener("click", (event) => {
         this.el.toggleAttribute("data-js-amplified");
@@ -56,7 +56,7 @@ const Cell = {
 
     if (this.props.type === "smart") {
       const toggleSourceButton = this.el.querySelector(
-        `[data-el-toggle-source-button]`
+        `[data-el-toggle-source-button]`,
       );
       toggleSourceButton.addEventListener("click", (event) => {
         this.el.toggleAttribute("data-js-source-visible");
@@ -90,12 +90,12 @@ const Cell = {
     this.subscriptions = [
       globalPubsub.subscribe(
         "navigation",
-        this.handleNavigationEvent.bind(this)
+        this.handleNavigationEvent.bind(this),
       ),
       globalPubsub.subscribe("cells", this.handleCellsEvent.bind(this)),
       globalPubsub.subscribe(
         `cells:${this.props.cellId}`,
-        this.handleCellEvent.bind(this)
+        this.handleCellEvent.bind(this),
       ),
     ];
 
@@ -104,7 +104,7 @@ const Cell = {
     this._handleViewportResize = this.handleViewportResize.bind(this);
     window.visualViewport.addEventListener(
       "resize",
-      this._handleViewportResize
+      this._handleViewportResize,
     );
   },
 
@@ -118,7 +118,7 @@ const Cell = {
 
     window.visualViewport.removeEventListener(
       "resize",
-      this._handleViewportResize
+      this._handleViewportResize,
     );
   },
 
@@ -215,7 +215,7 @@ const Cell = {
       // Setup markdown rendering
       if (this.props.type === "markdown") {
         const markdownContainer = this.el.querySelector(
-          `[data-el-markdown-container]`
+          `[data-el-markdown-container]`,
         );
         const markdown = new Markdown(markdownContainer, source, {
           baseUrl: this.props.sessionPath,
@@ -240,7 +240,7 @@ const Cell = {
           `evaluation_finished:${this.props.cellId}`,
           ({ code_markers }) => {
             liveEditor.setCodeMarkers(code_markers);
-          }
+          },
         );
 
         this.handleEvent(`start_evaluation:${this.props.cellId}`, () => {
@@ -251,7 +251,7 @@ const Cell = {
           `doctest_report:${this.props.cellId}`,
           (doctestReport) => {
             liveEditor.updateDoctests([doctestReport]);
-          }
+          },
         );
 
         this.handleEvent(`erase_outputs`, () => {
@@ -288,7 +288,7 @@ const Cell = {
   updateInsertModeAvailability() {
     this.el.toggleAttribute(
       "data-js-insert-mode-disabled",
-      !this.currentEditor()
+      !this.currentEditor(),
     );
   },
 

assets/js/hooks/cell_editor.js

@@ -11,7 +11,7 @@ const CellEditor = {
       `cell_editor_init:${this.props.cellId}:${this.props.tag}`,
       ({ source, revision, doctest_reports, code_markers }) => {
         const editorContainer = this.el.querySelector(
-          `[data-el-editor-container]`
+          `[data-el-editor-container]`,
         );
 
         const editorEl = document.createElement("div");
@@ -20,7 +20,7 @@ const CellEditor = {
         this.connection = new Connection(
           this,
           this.props.cellId,
-          this.props.tag
+          this.props.tag,
         );
 
         this.liveEditor = new LiveEditor(
@@ -30,7 +30,7 @@ const CellEditor = {
           revision,
           this.props.language,
           this.props.intellisense,
-          this.props.readOnly
+          this.props.readOnly,
         );
 
         this.liveEditor.setCodeMarkers(code_markers);
@@ -48,7 +48,7 @@ const CellEditor = {
           "whitespace-pre",
           "text-editor",
           "font-editor",
-          "px-12"
+          "px-12",
         );
         sourceEl.textContent = source;
         skeletonEl.replaceChildren(sourceEl);
@@ -62,7 +62,7 @@ const CellEditor = {
           new CustomEvent("lb:cell:editor_created", {
             detail: { tag: this.props.tag, liveEditor: this.liveEditor },
             bubbles: true,
-          })
+          }),
         );
 
         this.visibility = waitUntilInViewport(this.el, {
@@ -76,7 +76,7 @@ const CellEditor = {
             this.liveEditor.mount();
           }
         });
-      }
+      },
     );
   },
 
@@ -98,7 +98,7 @@ const CellEditor = {
         new CustomEvent("lb:cell:editor_removed", {
           detail: { tag: this.props.tag },
           bubbles: true,
-        })
+        }),
       );
       this.liveEditor.destroy();
     }

assets/js/hooks/cell_editor/live_editor.js

@@ -100,7 +100,7 @@ export default class LiveEditor {
     revision,
     language,
     intellisense,
-    readOnly
+    readOnly,
   ) {
     this.container = container;
     this.source = source;
@@ -264,7 +264,7 @@ export default class LiveEditor {
       const node = document.createElement("i");
       node.classList.add(
         open ? "ri-arrow-down-s-line" : "ri-arrow-right-s-line",
-        open ? "cm-gutterFoldMarker-open" : null
+        open ? "cm-gutterFoldMarker-open" : null,
       );
       return node;
     };
@@ -351,7 +351,7 @@ export default class LiveEditor {
 
     if (event.key === "Escape") {
       this.container.dispatchEvent(
-        new CustomEvent("lb:editor_escape", { bubbles: true })
+        new CustomEvent("lb:editor_escape", { bubbles: true }),
       );
     }
 
@@ -406,7 +406,7 @@ export default class LiveEditor {
 
         const replaceLength = replacedSuffixLength(
           lineUntilCursor.text,
-          response.items[0].insert_text
+          response.items[0].insert_text,
         );
 
         return {
@@ -526,7 +526,7 @@ export default class LiveEditor {
   setInitialWidgets() {
     if (this.initialWidgets.doctestReportsByLine) {
       const doctestReports = Object.values(
-        this.initialWidgets.doctestReportsByLine
+        this.initialWidgets.doctestReportsByLine,
       );
       this.updateDoctests(doctestReports);
     }

assets/js/hooks/cell_editor/live_editor/codemirror/collab.js

@@ -48,7 +48,7 @@ const collabPlugin = ViewPlugin.fromClass(
     update(update) {
       // Skip changes dispatched by ourselves
       const isRemoteChange = update.transactions.some((tr) =>
-        tr.annotation(remoteTransaction)
+        tr.annotation(remoteTransaction),
       );
 
       if (isRemoteChange) return;
@@ -69,7 +69,7 @@ const collabPlugin = ViewPlugin.fromClass(
     destroy() {
       this.deltaSubscription.destroy();
     }
-  }
+  },
 );
 
 export function deltaToChanges(delta) {
@@ -136,8 +136,8 @@ export function transformSelection(selection, delta) {
   const ranges = selection.ranges.map((range) =>
     EditorSelection.range(
       delta.transformPosition(range.anchor),
-      delta.transformPosition(range.head)
+      delta.transformPosition(range.head),
-    )
+    ),
   );
 
   return EditorSelection.create(ranges, selection.mainIndex);

assets/js/hooks/cell_editor/live_editor/codemirror/collab_markers.js

@@ -73,7 +73,7 @@ const collabMarkersPlugin = ViewPlugin.fromClass(
 
       this.decorations = RangeSet.of(
         Object.values(this.peers).flatMap(decorationsForPeer),
-        true
+        true,
       );
 
       this.peersSubscription = collabClient.onPeersChange((peers) => {
@@ -118,7 +118,7 @@ const collabMarkersPlugin = ViewPlugin.fromClass(
       this.peersSubscription.destroy();
     }
   },
-  { decorations: (plugin) => plugin.decorations }
+  { decorations: (plugin) => plugin.decorations },
 );
 
 class CursorWidget extends WidgetType {

assets/js/hooks/cell_editor/live_editor/codemirror/doctests.js

@@ -72,11 +72,11 @@ const doctestsField = StateField.define({
         decorations = decorations.update({
           filter: (from, to, decoration) => {
             return !reports.some(
-              (report) => decoration.spec.report.line === report.line
+              (report) => decoration.spec.report.line === report.line,
             );
           },
           add: reports.flatMap((report) =>
-            decorationsForDoctest(report, tr.state.doc)
+            decorationsForDoctest(report, tr.state.doc),
           ),
           sort: true,
         });
@@ -113,7 +113,7 @@ function decorationsForDoctest(report, doc) {
         widget: new DoctestDetailsWidget(report),
         block: true,
         report,
-      }).range(detailsLine.from)
+      }).range(detailsLine.from),
     );
   }
 

assets/js/hooks/cell_editor/live_editor/codemirror/formatter.js

@@ -80,7 +80,7 @@ const formatterPlugin = ViewPlugin.fromClass(
         this.query = null;
       }
     }
-  }
+  },
 );
 
 function startFormat(view) {

assets/js/hooks/cell_editor/live_editor/codemirror/read_only_hint.js

@@ -76,7 +76,7 @@ const hintPlugin = ViewPlugin.fromClass(
         }
       },
     },
-  }
+  },
 );
 
 function closeHint(view) {

assets/js/hooks/cell_editor/live_editor/codemirror/signature.js

@@ -38,7 +38,7 @@ const characterSetsConfig = Facet.define({}).from(
     triggerCharacters: new Set(triggerCharacters),
     // Note: all trigger characters are also retrigger characters
     retriggerCharacters: new Set(triggerCharacters.concat(retriggerCharacters)),
-  })
+  }),
 );
 
 const setSignatureResultEffect = StateEffect.define();
@@ -139,7 +139,7 @@ function shouldRequestSignature(tr, isOpen) {
   if (!tr.docChanged && startCursorPos !== cursorPos) {
     const movedOver = tr.state.doc.sliceString(
       Math.min(startCursorPos, cursorPos),
-      Math.max(startCursorPos, cursorPos)
+      Math.max(startCursorPos, cursorPos),
     );
 
     if (isOpen) {
@@ -255,7 +255,7 @@ class SignatureTooltip {
     this.contentLeft.textContent = item.signature.slice(0, idx);
     this.contentActive.textContent = activeArgument;
     this.contentRight.textContent = item.signature.slice(
-      idx + activeArgument.length
+      idx + activeArgument.length,
     );
   }
 }
@@ -327,7 +327,7 @@ const signaturePlugin = ViewPlugin.fromClass(
         }
       },
     },
-  }
+  },
 );
 
 function startSignature(view) {
@@ -378,7 +378,7 @@ export function signature(
     closeOnBlur = true,
     triggerCharacters = ["(", ","],
     retriggerCharacters = [")"],
-  } = {}
+  } = {},
 ) {
   return [
     signatureField,

assets/js/hooks/cell_editor/live_editor/codemirror/theme.js

@@ -415,7 +415,7 @@ function buildEditorTheme(colors, { dark }) {
         },
       },
     },
-    { dark }
+    { dark },
   );
 }
 
@@ -495,7 +495,7 @@ const editorTheme = buildEditorTheme(
     searchMatchActiveBackground: "#54789e",
     separator: "#464b57",
   },
-  { dark: true }
+  { dark: true },
 );
 
 export const highlightStyle = buildHighlightStyle({
@@ -532,7 +532,7 @@ const lightEditorTheme = buildEditorTheme(
     searchMatchActiveBackground: "#9daeec",
     separator: "#c9c9ca",
   },
-  { dark: false }
+  { dark: false },
 );
 
 export const lightHighlightStyle = buildHighlightStyle({

assets/js/hooks/cell_editor/live_editor/collab_client.js

@@ -229,7 +229,7 @@ export default class CollabClient {
     this.connection.sendDelta(
       this.inflightDelta,
       this.selection,
-      this.revision
+      this.revision,
     );
 
     this.selectionChanged = false;

assets/js/hooks/cell_editor/live_editor/connection.js

@@ -130,14 +130,14 @@ export default class Connection {
         delta = Delta.fromCompressed(delta);
         selection = selection && selectionFromCompressed(selection);
         this._onDelta.dispatch(delta, selection, client_id);
-      }
+      },
     );
 
     this.hook.handleEvent(
       `cell_acknowledgement:${this.cellId}:${this.tag}`,
       () => {
         this._onAcknowledgement.dispatch();
-      }
+      },
     );
 
     this.hook.handleEvent(
@@ -145,7 +145,7 @@ export default class Connection {
       ({ selection, client_id }) => {
         selection = selection && selectionFromCompressed(selection);
         this._onSelection.dispatch(selection, client_id);
-      }
+      },
     );
   }
 
@@ -192,19 +192,19 @@ export default class Connection {
               } else {
                 reject(
                   new IntellisenseError(
-                    "No relevant intellisense response for the given parameters"
+                    "No relevant intellisense response for the given parameters",
-                  )
+                  ),
                 );
               }
             };
           } else {
             reject(
               new IntellisenseError(
-                "Intellisense request could not be completed"
+                "Intellisense request could not be completed",
-              )
+              ),
             );
           }
-        }
+        },
       );
     });
   }
@@ -216,7 +216,7 @@ function selectionToCompressed(selection) {
 
 function selectionFromCompressed(list) {
   const ranges = list.map(([anchor, head]) =>
-    EditorSelection.range(anchor, head)
+    EditorSelection.range(anchor, head),
   );
 
   return EditorSelection.create(ranges);

assets/js/hooks/cell_editor/live_editor/highlight.js

@@ -8,7 +8,7 @@ import { settingsStore } from "../../../lib/settings";
 export function highlight(code, language) {
   const languageDesc = LanguageDescription.matchLanguageName(
     languages,
-    language
+    language,
   );
 
   if (!languageDesc) {
@@ -28,7 +28,7 @@ export function highlight(code, language) {
     },
     () => {
       html += "<br />";
-    }
+    },
   );
 
   return html;

assets/js/hooks/custom_view_settings.js

@@ -8,16 +8,16 @@ const CustomViewSettings = {
     const settings = settingsStore.get();
 
     const customSectionCheckbox = this.el.querySelector(
-      `[name="show_section"][value="true"]`
+      `[name="show_section"][value="true"]`,
     );
     const customMarkdownCheckbox = this.el.querySelector(
-      `[name="show_markdown"][value="true"]`
+      `[name="show_markdown"][value="true"]`,
     );
     const customOutputCheckbox = this.el.querySelector(
-      `[name="show_output"][value="true"]`
+      `[name="show_output"][value="true"]`,
     );
     const customSpotlightCheckbox = this.el.querySelector(
-      `[name="spotlight"][value="true"]`
+      `[name="spotlight"][value="true"]`,
     );
 
     customSectionCheckbox.checked = settings.custom_view_show_section;

assets/js/hooks/editor_settings.js

@@ -12,19 +12,19 @@ const EditorSettings = {
     const settings = settingsStore.get();
 
     const editorAutoCompletionCheckbox = this.el.querySelector(
-      `[name="editor_auto_completion"][value="true"]`
+      `[name="editor_auto_completion"][value="true"]`,
     );
     const editorAutoSignatureCheckbox = this.el.querySelector(
-      `[name="editor_auto_signature"][value="true"]`
+      `[name="editor_auto_signature"][value="true"]`,
     );
     const editorFontSizeCheckbox = this.el.querySelector(
-      `[name="editor_font_size"][value="true"]`
+      `[name="editor_font_size"][value="true"]`,
     );
     const editorLightThemeCheckbox = this.el.querySelector(
-      `[name="editor_light_theme"][value="true"]`
+      `[name="editor_light_theme"][value="true"]`,
     );
     const editorMarkdownWordWrapCheckbox = this.el.querySelector(
-      `[name="editor_markdown_word_wrap"][value="true"]`
+      `[name="editor_markdown_word_wrap"][value="true"]`,
     );
     const editorMode = this.el.querySelector(`select[name="editor_mode"]`);
 

assets/js/hooks/emoji_picker.js

@@ -15,7 +15,7 @@ const EmojiPicker = {
         triggerElement: button,
         referenceElement: button,
         position: "bottom",
-      }
+      },
     );
 
     picker.addEventListener("emoji:select", ({ emoji }) => {

assets/js/hooks/headline.js

@@ -28,7 +28,7 @@ const Headline = {
 
     this.navigationSubscription = globalPubsub.subscribe(
       "navigation",
-      this.handleNavigationEvent.bind(this)
+      this.handleNavigationEvent.bind(this),
     );
   },
 

assets/js/hooks/image_input.js

@@ -43,7 +43,7 @@ const ImageInput = {
     this.uploadButton = this.el.querySelector(`[data-btn-upload]`);
     this.openCameraButton = this.el.querySelector(`[data-btn-open-camera]`);
     this.captureCameraButton = this.el.querySelector(
-      `[data-btn-capture-camera]`
+      `[data-btn-capture-camera]`,
     );
     this.cancelButton = this.el.querySelector(`[data-btn-cancel]`);
 
@@ -116,7 +116,7 @@ const ImageInput = {
       const canvas = this.toCanvas(
         this.cameraVideoEl,
         this.cameraVideoEl.videoWidth,
-        this.cameraVideoEl.videoHeight
+        this.cameraVideoEl.videoHeight,
       );
       this.pushImage(canvas);
       this.closeCameraView();
@@ -153,7 +153,7 @@ const ImageInput = {
         this.props.imageUrl,
         this.props.valueHeight,
         this.props.valueWidth,
-        this.props.format
+        this.props.format,
       ).then((element) => {
         this.setPreview(element);
       });
@@ -331,7 +331,7 @@ const ImageInput = {
         0,
         0,
         scaledWidth,
-        scaledHeight
+        scaledHeight,
       );
     } else if (this.props.fit === "crop") {
       const widthScale = boundWidth / width;
@@ -353,7 +353,7 @@ const ImageInput = {
         0,
         0,
         boundWidth,
-        boundHeight
+        boundHeight,
       );
     } else if (this.props.fit === "pad") {
       const widthScale = boundWidth / width;
@@ -378,7 +378,7 @@ const ImageInput = {
         Math.round((boundWidth - scaledWidth) / 2),
         Math.round((boundHeight - scaledHeight) / 2),
         scaledWidth,
-        scaledHeight
+        scaledHeight,
       );
     } else {
       canvas.width = boundWidth;
@@ -393,7 +393,7 @@ const ImageInput = {
         0,
         0,
         boundWidth,
-        boundHeight
+        boundHeight,
       );
     }
 

assets/js/hooks/image_output.js

@@ -33,7 +33,7 @@ const ImageOutput = {
         pixelBuffer,
         width,
         height,
-        channels
+        channels,
       );
 
       const canvas = document.createElement("canvas");

assets/js/hooks/js_view.js

@@ -104,7 +104,7 @@ const JSView = {
       (raw) => {
         const [, payload] = transportDecode(raw);
         this.handleServerInit(payload);
-      }
+      },
     );
 
     const eventRef = this.channel.on(`event:${this.props.ref}`, (raw) => {
@@ -116,7 +116,7 @@ const JSView = {
       `error:${this.props.ref}`,
       ({ message, init }) => {
         this.handleServerError(message, init);
-      }
+      },
     );
 
     const pongRef = this.channel.on(`pong:${this.props.ref}`, () => {
@@ -133,11 +133,11 @@ const JSView = {
     this.subscriptions = [
       globalPubsub.subscribe(
         `js_views:${this.props.ref}`,
-        this.handleJSViewEvent.bind(this)
+        this.handleJSViewEvent.bind(this),
       ),
       globalPubsub.subscribe(
         "navigation",
-        this.handleNavigationEvent.bind(this)
+        this.handleNavigationEvent.bind(this),
       ),
     ];
 
@@ -150,7 +150,7 @@ const JSView = {
       },
       // If the client is very busy with executing JS we may reach the
       // default timeout of 10s, so we increase it
-      30_000
+      30_000,
     );
   },
 
@@ -213,7 +213,7 @@ const JSView = {
 
     const notebookEl = document.querySelector(`[data-el-notebook]`);
     const notebookContentEl = notebookEl.querySelector(
-      `[data-el-notebook-content]`
+      `[data-el-notebook-content]`,
     );
 
     // Most placeholder position changes are accompanied by changes to the
@@ -244,13 +244,13 @@ const JSView = {
 
     this.iframe.addEventListener("mouseenter", (event) => {
       this.iframePlaceholder.dispatchEvent(
-        new MouseEvent("mouseenter", { bubbles: true })
+        new MouseEvent("mouseenter", { bubbles: true }),
       );
     });
 
     this.iframe.addEventListener("mouseleave", (event) => {
       this.iframePlaceholder.dispatchEvent(
-        new MouseEvent("mouseleave", { bubbles: true })
+        new MouseEvent("mouseleave", { bubbles: true }),
       );
     });
 
@@ -266,7 +266,7 @@ const JSView = {
     // is later synced on "element_focused" events
     this.iframe.toggleAttribute(
       "data-js-focused",
-      !!this.el.closest(`[data-js-focused]`)
+      !!this.el.closest(`[data-js-focused]`),
     );
 
     // Cleanup
@@ -308,7 +308,7 @@ const JSView = {
     initializeIframeSource(
       this.iframe,
       this.props.iframePort,
-      this.props.iframeUrl
+      this.props.iframeUrl,
     ).then(() => {
       iframesEl.appendChild(this.iframe);
     });
@@ -477,7 +477,7 @@ const JSView = {
 
       this.iframe.toggleAttribute(
         "data-js-focused",
-        focusableId === event.focusableId
+        focusableId === event.focusableId,
       );
     }
   },

assets/js/hooks/js_view/iframe.js

@@ -61,7 +61,7 @@ function verifyIframeSource(iframeUrl) {
       .then((html) => {
         if (sha256Base64(html) !== IFRAME_SHA256) {
           throw new Error(
-            `The iframe loaded from ${iframeUrl} doesn't have the expected checksum ${IFRAME_SHA256}`
+            `The iframe loaded from ${iframeUrl} doesn't have the expected checksum ${IFRAME_SHA256}`,
           );
         }
       });

assets/js/hooks/session.js

@@ -112,39 +112,39 @@ const Session = {
     });
 
     this.getElement("clients-list").addEventListener("click", (event) =>
-      this.handleClientsListClick(event)
+      this.handleClientsListClick(event),
     );
 
     this.getElement("sections-list-toggle").addEventListener("click", (event) =>
-      this.toggleSectionsList()
+      this.toggleSectionsList(),
     );
 
     this.getElement("clients-list-toggle").addEventListener("click", (event) =>
-      this.toggleClientsList()
+      this.toggleClientsList(),
     );
 
     this.getElement("secrets-list-toggle").addEventListener("click", (event) =>
-      this.toggleSecretsList()
+      this.toggleSecretsList(),
     );
 
     this.getElement("runtime-info-toggle").addEventListener("click", (event) =>
-      this.toggleRuntimeInfo()
+      this.toggleRuntimeInfo(),
     );
 
     this.getElement("app-info-toggle").addEventListener("click", (event) =>
-      this.toggleAppInfo()
+      this.toggleAppInfo(),
     );
 
     this.getElement("files-list-toggle").addEventListener("click", (event) =>
-      this.toggleFilesList()
+      this.toggleFilesList(),
     );
 
     this.getElement("notebook").addEventListener("scroll", (event) =>
-      this.updateSectionListHighlight()
+      this.updateSectionListHighlight(),
     );
 
     this.getElement("notebook-indicators").addEventListener("click", (event) =>
-      this.handleCellIndicatorsClick(event)
+      this.handleCellIndicatorsClick(event),
     );
 
     this.getElement("views").addEventListener("click", (event) => {
@@ -153,7 +153,7 @@ const Session = {
 
     this.getElement("section-toggle-collapse-all-button").addEventListener(
       "click",
-      (event) => this.toggleCollapseAllSections()
+      (event) => this.toggleCollapseAllSections(),
     );
 
     this.initializeDragAndDrop();
@@ -163,7 +163,7 @@ const Session = {
       () => {
         this.initializeFocus();
       },
-      { once: true }
+      { once: true },
     );
 
     // Server events
@@ -190,7 +190,7 @@ const Session = {
       "cell_deleted",
       ({ cell_id: cellId, sibling_cell_id: siblingCellId }) => {
         this.handleCellDeleted(cellId, siblingCellId);
-      }
+      },
     );
 
     this.handleEvent("cell_restored", ({ cell_id: cellId }) => {
@@ -229,7 +229,7 @@ const Session = {
       "secret_selected",
       ({ select_secret_ref, secret_name }) => {
         this.handleSecretSelected(select_secret_ref, secret_name);
-      }
+      },
     );
 
     this.handleEvent("location_report", ({ client_id, focusable_id }) => {
@@ -392,7 +392,7 @@ const Session = {
       } else if (
         keyBuffer.tryMatch(["i"]) ||
         (event.target.matches(
-          `body, [data-el-cell-body], [data-el-heading], [data-focusable-id]`
+          `body, [data-el-cell-body], [data-el-heading], [data-focusable-id]`,
         ) &&
           this.focusedId &&
           key === "Enter")
@@ -493,7 +493,7 @@ const Session = {
   editableElementClicked(event, focusableEl) {
     if (focusableEl) {
       const editableElement = event.target.closest(
-        `[data-el-editor-container], [data-el-heading]`
+        `[data-el-editor-container], [data-el-heading]`,
       );
       return editableElement && focusableEl.contains(editableElement);
     }
@@ -530,12 +530,12 @@ const Session = {
     }
 
     const evalButton = event.target.closest(
-      `[data-el-queue-cell-evaluation-button]`
+      `[data-el-queue-cell-evaluation-button]`,
     );
     if (evalButton) {
       const cellId = evalButton.getAttribute("data-cell-id");
       const disableDependenciesCache = evalButton.hasAttribute(
-        "data-disable-dependencies-cache"
+        "data-disable-dependencies-cache",
       );
       this.queueCellEvaluation(cellId, disableDependenciesCache);
     }
@@ -551,7 +551,7 @@ const Session = {
         history.pushState(
           null,
           document.title,
-          window.location.pathname + window.location.search
+          window.location.pathname + window.location.search,
         );
       }
     }
@@ -584,7 +584,7 @@ const Session = {
       }
 
       const clientFollowToggle = event.target.closest(
-        `[data-el-client-follow-toggle]`
+        `[data-el-client-follow-toggle]`,
       );
       if (clientFollowToggle) {
         this.handleClientFollowToggleClick(clientId, clientListItem);
@@ -598,7 +598,7 @@ const Session = {
 
   handleClientFollowToggleClick(clientId, clientListItem) {
     const followedClientListItem = this.el.querySelector(
-      `[data-el-clients-list-item][data-js-followed]`
+      `[data-el-clients-list-item][data-js-followed]`,
     );
 
     if (followedClientListItem) {
@@ -666,7 +666,7 @@ const Session = {
    */
   updateSectionListHighlight() {
     const currentListItem = this.el.querySelector(
-      `[data-el-sections-list-item][data-js-is-viewed]`
+      `[data-el-sections-list-item][data-js-is-viewed]`,
     );
 
     if (currentListItem) {
@@ -685,7 +685,7 @@ const Session = {
     if (viewedSection) {
       const sectionId = viewedSection.getAttribute("data-section-id");
       const listItem = this.el.querySelector(
-        `[data-el-sections-list-item][data-section-id="${sectionId}"]`
+        `[data-el-sections-list-item][data-section-id="${sectionId}"]`,
       );
       listItem.setAttribute("data-js-is-viewed", "");
     }
@@ -778,7 +778,7 @@ const Session = {
 
     this.handleEvent("finish_file_drop", (event) => {
       const inputEl = document.querySelector(
-        `#add-file-entry-modal input[type="file"]`
+        `#add-file-entry-modal input[type="file"]`,
       );
 
       if (inputEl) {
@@ -966,7 +966,7 @@ const Session = {
       if (focusableIds.length > 0) {
         this.insertCellBelowFocusableId(
           focusableIds[focusableIds.length - 1],
-          type
+          type,
         );
       }
     }
@@ -1097,7 +1097,7 @@ const Session = {
             showOutput: settings.custom_view_show_output,
             spotlight: settings.custom_view_spotlight,
           });
-        }
+        },
       );
 
       this.pushEvent("open_custom_view_settings");
@@ -1162,7 +1162,7 @@ const Session = {
 
   toggleCollapseAllSections() {
     const allCollapsed = this.getSections().every((section) =>
-      section.hasAttribute("data-js-collapsed")
+      section.hasAttribute("data-js-collapsed"),
     );
 
     this.getSections().forEach((section) => {
@@ -1338,7 +1338,7 @@ const Session = {
   ensureVisibleFocusableEl(cellId) {
     const focusableEl = this.getFocusableEl(cellId);
     const allFocusableEls = Array.from(
-      this.el.querySelectorAll(`[data-focusable-id]`)
+      this.el.querySelectorAll(`[data-focusable-id]`),
     );
     const idx = allFocusableEls.indexOf(focusableEl);
     const visibleSibling = [
@@ -1370,13 +1370,13 @@ const Session = {
 
   getFocusableEls() {
     return Array.from(this.el.querySelectorAll(`[data-focusable-id]`)).filter(
-      (el) => !isElementHidden(el)
+      (el) => !isElementHidden(el),
     );
   },
 
   getFocusableIds() {
     return this.getFocusableEls().map((el) =>
-      el.getAttribute("data-focusable-id")
+      el.getAttribute("data-focusable-id"),
     );
   },
 
@@ -1397,7 +1397,7 @@ const Session = {
 
   getSectionById(sectionId) {
     return this.el.querySelector(
-      `[data-el-section][data-section-id="${sectionId}"]`
+      `[data-el-section][data-section-id="${sectionId}"]`,
     );
   },
 

assets/js/hooks/virtualized_lines.js

@@ -82,7 +82,7 @@ const VirtualizedLines = {
 
     const height = Math.min(
       this.props.maxHeight,
-      this.lineHeight * numberOfLines
+      this.lineHeight * numberOfLines,
     );
 
     return {
@@ -127,7 +127,7 @@ const VirtualizedLines = {
   capLines() {
     if (this.props.maxLines) {
       const lineEls = Array.from(
-        this.templateEl.querySelectorAll("[data-line]")
+        this.templateEl.querySelectorAll("[data-line]"),
       );
       const ignoredLineEls = lineEls.slice(0, -this.props.maxLines);
 

assets/js/lib/attribute.js

@@ -6,7 +6,7 @@ export function parseHookProps(element, names) {
 
     if (!element.hasAttribute(attr)) {
       throw new Error(
-        `Missing attribute "${attr}" on element <${element.tagName}:${element.id}>`
+        `Missing attribute "${attr}" on element <${element.tagName}:${element.id}>`,
       );
     }
 

assets/js/lib/codec.js

@@ -73,14 +73,14 @@ export function encodeAnnotatedBuffer(meta, buffer) {
   const metaArray = encoder.encode(JSON.stringify(meta));
 
   const raw = new ArrayBuffer(
-    HEADER_LENGTH + metaArray.byteLength + buffer.byteLength
+    HEADER_LENGTH + metaArray.byteLength + buffer.byteLength,
   );
   const view = new DataView(raw);
 
   view.setUint32(0, metaArray.byteLength);
   new Uint8Array(raw, HEADER_LENGTH, metaArray.byteLength).set(metaArray);
   new Uint8Array(raw, HEADER_LENGTH + metaArray.byteLength).set(
-    new Uint8Array(buffer)
+    new Uint8Array(buffer),
   );
 
   return raw;

assets/js/lib/delta.js

@@ -130,7 +130,7 @@ export default class Delta {
   transform(other, priority) {
     if (priority !== "left" && priority !== "right") {
       throw new Error(
-        `Invalid priority "${priority}", should be either "left" or "right"`
+        `Invalid priority "${priority}", should be either "left" or "right"`,
       );
     }
 

assets/js/lib/markdown.js

@@ -33,7 +33,7 @@ class Markdown {
       defaultCodeLanguage = null,
       emptyText = "",
       allowedUriSchemes = [],
-    } = {}
+    } = {},
   ) {
     this.container = container;
     this.content = content;

assets/js/lib/storage.js

@@ -12,7 +12,7 @@ export function load(key) {
     }
   } catch (error) {
     console.error(
-      `Failed to load from local storage, reason: ${error.message}`
+      `Failed to load from local storage, reason: ${error.message}`,
     );
   }
 

assets/js/lib/utils.js

@@ -61,7 +61,7 @@ export function waitUntilVisible(element) {
  */
 export function waitUntilInViewport(
   element,
-  { root = null, proximity = 0 } = {}
+  { root = null, proximity = 0 } = {},
 ) {
   let observer = null;
 
@@ -77,7 +77,7 @@ export function waitUntilInViewport(
             resolve();
           }
         },
-        { root, rootMargin: `${proximity}px` }
+        { root, rootMargin: `${proximity}px` },
       );
       observer.observe(element);
     }
@@ -234,7 +234,7 @@ export function findChildOrThrow(element, selector) {
 
   if (!child) {
     throw new Error(
-      `expected a child matching ${selector}, but none was found`
+      `expected a child matching ${selector}, but none was found`,
     );
   }
 

assets/package.json

@@ -3,8 +3,8 @@
   "scripts": {
     "deploy": "node build.js --deploy",
     "watch": "node build.js --watch",
-    "format": "prettier --trailing-comma es5 --write '{js,test,css}/**/*.{js,json,css,md}' --no-error-on-unmatched-pattern",
+    "format": "prettier --write '{js,test,css}/**/*.{js,json,css,md}' --no-error-on-unmatched-pattern",
-    "format-check": "prettier --trailing-comma es5 --check '{js,test,css}/**/*.{js,json,css,md}' --no-error-on-unmatched-pattern",
+    "format-check": "prettier --check '{js,test,css}/**/*.{js,json,css,md}' --no-error-on-unmatched-pattern",
     "test": "jest",
     "test:watch": "jest --watch"
   },

assets/test/hooks/cell_editor/live_editor/collab_client.test.js

@@ -149,7 +149,7 @@ describe("with buffer delta", () => {
     expect(connection.sendDelta).toHaveBeenCalledWith(
       bufferDelta,
       bufferSelection,
-      1
+      1,
     );
   });
 
@@ -196,7 +196,7 @@ describe("with buffer delta", () => {
     expect(connection.sendDelta).toHaveBeenCalledWith(
       bufferDelta,
       bufferSelection,
-      2
+      2,
     );
   });
 });
@@ -254,7 +254,7 @@ describe("peers", () => {
     getListener(connection, "onDelta")(
       remoteDelta2,
       remoteSelection2,
-      "client3"
+      "client3",
     );
 
     expect(onPeersChange).toHaveBeenCalledWith({