feat: show expression in window title

Author: smeijer

src/components/App.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import debounce from 'lodash/debounce';
 import Editor from './Editor';
 import ElementInfo from './ElementInfo';
 import Header from './Header';
@@ -30,6 +31,7 @@ function App() {
 
     parsed.targets?.forEach((el) => el.classList.add('highlight'));
     state.save({ html, js });
+    state.updateTitle(parsed.expression?.expression);
 
     return () => {
       parsed.targets?.forEach((el) => el.classList.remove('highlight'));

src/lib/state.js

@@ -21,17 +21,28 @@ function load() {
     .slice(1)
     .split('&');
 
-  console.log('load', { htmlCompressed, jsCompressed });
-
   return {
     html: htmlCompressed && decompressFromEncodedURIComponent(htmlCompressed),
     js: jsCompressed && decompressFromEncodedURIComponent(jsCompressed),
   };
 }
 
+function updateTitle(text) {
+  const title = document.title.split(':')[0];
+
+  if (!text || text.length === 0) {
+    document.title = title;
+    return;
+  }
+
+  const suffix = text.replace(/\s+/g, ' ').substring(0, 1000).trim();
+  document.title = title + ': ' + suffix;
+}
+
 const state = {
   save,
   load,
+  updateTitle,
 };
 
 export default state;