@pronto-tools-and-more/files 4.2.0 → 4.3.0

package/files/assets/live-reload-readmode.js

@@ -0,0 +1,96 @@
+const webSocket = new WebSocket("ws://localhost:3000/ws/readmode");
+
+const reload = () => {
+  window.location.reload();
+};
+
+let sheet;
+
+let error;
+
+const sheetMap = Object.create(null);
+
+const getOrCreateSheet = (fileName) => {
+  if (!sheetMap[fileName]) {
+    sheetMap[fileName] = new CSSStyleSheet();
+    document.adoptedStyleSheets.push(sheetMap[fileName]);
+  }
+  const existing = sheetMap[fileName];
+  return existing;
+};
+
+let customCssRemoved = false;
+
+const removeCustomCss = () => {
+  if (customCssRemoved) {
+    return;
+  }
+  const customCss = document.querySelector('[href$="custom.css"]');
+  if (!customCss) {
+    return;
+  }
+  customCss.remove();
+  customCssRemoved = true;
+};
+
+const removeError = () => {
+  if (!error) {
+    return;
+  }
+  error.remove();
+  error = undefined;
+};
+
+const updateCss = (changes) => {
+  for (const change of changes) {
+    const sheet = getOrCreateSheet(change.fileName);
+    sheet.replaceSync(change.css);
+  }
+
+  removeError();
+  removeCustomCss();
+};
+
+const updateCssError = (errorColor, css) => {
+  console.log({ errorColor });
+  removeError();
+  error = document.createElement("div");
+  error.className = "pronto-css-error";
+  error.style.position = "fixed";
+  error.style.top = "0";
+  error.style.right = "0";
+  error.style.width = "20px";
+  error.style.height = "20px";
+  error.style.background = `radial-gradient(${errorColor}, transparent)`;
+  error.style.zIndex = "11111111";
+  error.style.display = "flex";
+  document.body.append(error);
+};
+
+const commandMap = {
+  reload,
+  updateCss,
+  updateCssError,
+};
+
+const getCommand = (method) => {
+  return commandMap[method];
+};
+
+const executeCommand = (method, ...params) => {
+  const fn = getCommand(method);
+  if (!fn) {
+    throw new Error(`command not found ${method}`);
+  }
+  // @ts-ignore
+  return fn(...params);
+};
+
+const handleMessage = (event) => {
+  const { data } = event;
+  const parsed = JSON.parse(data);
+  const { method, params } = parsed;
+  executeCommand(method, ...params);
+};
+
+webSocket.onmessage = handleMessage;

package/files/assets/live-reload.js

@@ -1,4 +1,4 @@
-const webSocket = new WebSocket("ws://localhost:3000");
+const webSocket = new WebSocket("ws://localhost:3000/ws/page");
 
 const reload = () => {
   window.location.reload();
@@ -41,12 +41,21 @@ const removeError = () => {
   error = undefined;
 };
 
+const isReadModeUpdate = (changes) => {
+  return (
+    changes.length === 1 &&
+    changes[0].fileName === "default/readmode/custom.css"
+  );
+};
+
 const updateCss = (changes) => {
+  if (isReadModeUpdate(changes)) {
+    return;
+  }
   for (const change of changes) {
     const sheet = getOrCreateSheet(change.fileName);
     sheet.replaceSync(change.css);
   }
-
   removeError();
   removeCustomCss();
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pronto-tools-and-more/files",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {},