@makano/rew 1.0.21 → 1.1.0

package/README.md

@@ -0,0 +1,36 @@
+<h3 align="center">
+<img src="https://raw.githubusercontent.com/kevinJ045/rew/main/assets/logo.png" width="100" />
+<br/>
+Rew
+<br/>
+</h3>
+<p  align="center">
+<a href="https://github.com/kevinj045/rew/stargazers">  <img src="https://img.shields.io/github/stars/kevinj045/rew?style=for-the-badge&logo=starship&color=cba6f7&logoColor=9399b2&labelColor=181825" alt="GitHub stars"/></a>
+<a href="https://github.com/kevinj045/rew/issues">
+  <img src="https://img.shields.io/github/issues/kevinj045/guilib?style=for-the-badge&logo=gitbook&color=f5c2e7&logoColor=9399b2&labelColor=181825" alt="GitHub issues"/></a>
+<a href="https://github.com/kevinj045/rew">  <img src="https://img.shields.io/github/forks/kevinj045/rew?style=for-the-badge&logo=git&color=94e2d5&logoColor=9399b2&labelColor=181825" alt="GitHub forks"/></a>
+<a href="https://www.npmjs.com/package/rayous">  <img src="https://img.shields.io/npm/v/@makano/rew?style=for-the-badge&logo=npm&color=b4befe&logoColor=9399b2&labelColor=181825" alt="npm version" /></a>
+</p>
+
+Rayous is a simple lightweight coffeescript runtime, made to simply using coffescript and revive it
+in the process.
+
+## Getting Started
+1. Install `rew` globally
+  ```bash
+  npm i @makano/rew -g
+  ```
+  > If you're using `nixos`, you can try with `npm config set prefix '~/.npm-global'` and add that to your path
+2. Create a `rew` project
+  ```bash
+  rew create myrewproj
+  ```
+3. Run your project as an app or file
+  ```bash
+  rew run .
+  ```
+  Optionally, you can run single files with `rew [filename]`
+
+## Author's Notes
+
+Any suggestions, bug fixes or ideas are accepted, feel free to ask anything. 

package/lib/rew/html/ui.html

@@ -7,213 +7,9 @@
 
     <style>/* $OPTIONS(style) */</style>
 
-    <script>
-      window.execContext = $OPTIONS(json.execContext);
-    </script>
-    <script>
-      window.exec = $OPTIONS(exec);
-    </script>
-    <script>
-      if(!window.execContext) window.execContext = {};
-      window.addEventListener("load", () => {
-        const ws = new WebSocket("ws://localhost:$OPTIONS(port)");
-        const DOM = [];
-
-        const findInDom = (id) =>
-          DOM.find((el) => el.widgetOptions.uuid == id) ||
-          DOM.find((el) => el.id == id);
-
-        const parseStyleValue = (val) => val;
-
-        const addTo = (el, parent) => {
-          if (parent == "null") {
-            document.body.appendChild(el);
-          } else {
-            findInDom(parent).appendChild(el);
-          }
-        };
-
-        const initElement = (el, options, update = false) => {
-          if(el.widgetOptions){
-            if (el.widgetOptions.style) {
-              for(let i in options.style){
-                el.style.removeProperty(i, el.widgetOptions.style[i]);
-              }
-            }
-            if (el.widgetOptions.attr) {
-              for(let i in el.widgetOptions.attr){
-                el.removeAttribute(i);
-              }
-            }
-          }
-          
-          el.widgetOptions = options;
-          el.id = options.id;
-          el.textContent = options.data.text;
-
-          if (options.style) {
-            for(let i in options.style){
-              el.style.setProperty(i, options.style[i]);
-            }
-          }
-
-          if (options.attr) {
-            for(let i in options.attr){
-              el.setAttribute(i, options.attr[i]);
-            }
-          }
 
-          if (options.children.length) {
-            options.children.forEach((option) => {
-              option.parent = options.uuid;
-              if(update) updateElement(findInDom(option.uuid), option);
-              else createElement(option);
-            });
-          }
-
-          if (options.parent) {
-            addTo(el, options.parent);
-          }
-        }
-
-        const updateElement = (el, options) => {
-          if(!el) return;
-          initElement(el, options, true);
-          return el;
-        }
-
-        const events = [
-          "click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout",
-          "mousemove", "mouseenter", "mouseleave", "keydown", "keypress", "keyup",
-          "change", "input", "submit", "focus", "blur", "copy", "cut", "paste",
-          "scroll", "wheel", "resize", "contextmenu", "drag", "dragstart", "dragend",
-          "dragenter", "dragleave", "dragover", "drop", "error", "load", "abort"
-        ];
-        const handleListeners = (el) => {
-          events.forEach(event => {
-            el.addEventListener(event, (e) => {
-              ws.send(JSON.stringify({
-                action: 'hook:eventTrigger',
-                data: {
-                  rid: 'event_trigger',
-                  object: {
-                    uuid: el.widgetOptions.uuid,
-                    event,
-                    data: {
-                      mouse: { x: e.clientX, y: e.clientY },
-                      key: { code: e.keyCode, key: e.key }
-                    }
-                  }
-                }
-              }))
-            });
-          });
-        }
-
-        function eventHandlerFunction({ uuid, hookID, event }){
-          return function(e){
-            ws.send(JSON.stringify({
-              action: 'hook:event_'+event,
-              data: {
-                rid: hookID,
-                object: {
-                  uuid,
-                  event,
-                  data: {
-                    mouse: { x: e.clientX, y: e.clientY },
-                    key: { code: e.keyCode, key: e.key }
-                  }
-                }
-              }
-            }));
-          }
-        }
-
-        const createElement = (options) => {
-          const el = document.createElement(options.element);
-          DOM.push(el);
-          initElement(el, options);
-          return el;
-        };
-
-        const stringifyJSON = (json) => {
-          try {
-            return JSON.stringify(json, null, 4);
-          } catch (e) {
-            return json.toString();
-          }
-        };
-
-        const log = (...strings) => {
-          window.webkit.messageHandlers.external.postMessage(
-            JSON.stringify({"action": "log", "data": strings
-              .map((r) =>
-                typeof r == "object" ? stringifyJSON(r) : `${r.toString()}`,
-              )
-              // .map((i) => i.replace(/\"/g, '\\\\"').replace(/\n/g, "\\\\n"))
-              .join("\n")}, null, 4)
-          );
-        };
-
-        if (
-          window.webkit &&
-          window.webkit.messageHandlers &&
-          window.webkit.messageHandlers.external &&
-          window.RUNID == "$OPTIONS(runId)"
-        ) {
-
-          ws.onmessage = (event, cb) => {
-            const edata = process_data(event.data);
-            if (edata.action == "init") {
-              document.title = edata.data.title;
-              window.webkit.messageHandlers.external.postMessage(
-                `{"action": "setTitle", "data": "${edata.data.title}"}`,
-              );
-              log("INIT::READY");
-              if(window.exec){
-                window.exec(window.execContext);
-              }
-            } else if(edata.action == 'eventListen') {
-              const el = findInDom(edata.data.uuid);
-              if(el){
-                el.addEventListener(edata.data.event, eventHandlerFunction(edata.data))
-              }
-            } else if (edata.action == "createElement") {
-              const options = edata.data;
-              try {
-                createElement(options);
-              } catch (e) {
-                log(e.toString());
-              }
-            } else if (edata.action == "addStyleSheet") {
-              const style = document.createElement('style');
-              style.textContent = edata.data;
-              document.head.appendChild(style);
-            } else if (edata.action == "updateElement") {
-              const options = edata.data;
-              try {
-                updateElement(findInDom(options.uuid), options);
-              } catch (e) {
-                log(e.toString());
-              }
-            } else if (edata.action == "findElement") {
-              const id = edata.data.id;
-              const rid = edata.data.rid;
-              try {
-                ws.send(JSON.stringify({ action: 'hook:findElement', data: { rid, object: findInDom(id)?.widgetOptions }  }))
-              } catch (e) {
-                log(e.toString());
-              }
-            } 
-          };
-        } else {
-          console.log("Not in a webkit window");
-        }
-
-        function process_data(data) {
-          return JSON.parse(data);
-        }
-      });
+    <script>
+      window.onerror = () => alert('ERror');
     </script>
   </head>
 

package/lib/rew/html/ui.js

@@ -0,0 +1,198 @@
+try{
+  window.execContext = $OPTIONS(json.execContext);
+} catch(e){
+  window.execContext = {};
+}
+
+try{
+  window.exec = $OPTIONS(exec);
+} catch(e){
+  window.exec = function(){};
+}
+
+const DOM = [];
+
+const findInDom = (id) =>
+  DOM.find((el) => el.widgetOptions.uuid == id) ||
+  DOM.find((el) => el.id == id);
+
+const parseStyleValue = (val) => val;
+
+const addTo = (el, parent) => {
+  if (parent == "null") {
+    document.body.appendChild(el);
+  } else {
+    findInDom(parent).appendChild(el);
+  }
+};
+
+const initElement = (el, options, update = false) => {
+  if(el.widgetOptions){
+    if (el.widgetOptions.style) {
+      for(let i in options.style){
+        el.style.removeProperty(i, el.widgetOptions.style[i]);
+      }
+    }
+    if (el.widgetOptions.attr) {
+      for(let i in el.widgetOptions.attr){
+        el.removeAttribute(i);
+      }
+    }
+  }
+  
+  el.widgetOptions = options;
+  el.id = options.id;
+  el.textContent = options.data.text;
+
+  if (options.style) {
+    for(let i in options.style){
+      el.style.setProperty(i, options.style[i]);
+    }
+  }
+
+  if (options.attr) {
+    for(let i in options.attr){
+      el.setAttribute(i, options.attr[i]);
+    }
+  }
+
+  if (options.children.length) {
+    options.children.forEach((option) => {
+      option.parent = options.uuid;
+      if(update) updateElement(findInDom(option.uuid), option);
+      else createElement(option);
+    });
+  }
+
+  if (options.parent) {
+    addTo(el, options.parent);
+  }
+}
+
+const updateElement = (el, options) => {
+  if(!el) return;
+  initElement(el, options, true);
+  return el;
+}
+
+const events = [
+  "click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout",
+  "mousemove", "mouseenter", "mouseleave", "keydown", "keypress", "keyup",
+  "change", "input", "submit", "focus", "blur", "copy", "cut", "paste",
+  "scroll", "wheel", "resize", "contextmenu", "drag", "dragstart", "dragend",
+  "dragenter", "dragleave", "dragover", "drop", "error", "load", "abort"
+];
+const handleListeners = (el) => {
+  events.forEach(event => {
+    el.addEventListener(event, (e) => {
+      sendData({
+        action: 'hook:eventTrigger',
+        data: {
+          rid: 'event_trigger',
+          object: {
+            uuid: el.widgetOptions.uuid,
+            event,
+            data: {
+              mouse: { x: e.clientX, y: e.clientY },
+              key: { code: e.keyCode, key: e.key }
+            }
+          }
+        }
+      });
+    });
+  });
+}
+
+function eventHandlerFunction({ uuid, hookID, event }){
+  return function(e){
+    sendData({
+      action: 'hook:event_'+event,
+      data: {
+        rid: hookID,
+        object: {
+          uuid,
+          event,
+          data: {
+            mouse: { x: e.clientX, y: e.clientY },
+            key: { code: e.keyCode, key: e.key }
+          }
+        }
+      }
+    });
+  }
+}
+
+const createElement = (options) => {
+  const el = document.createElement(options.element);
+  DOM.push(el);
+  initElement(el, options);
+  return el;
+};
+
+const stringifyJSON = (json) => {
+  try {
+    return JSON.stringify(json, null, 4);
+  } catch (e) {
+    return json.toString();
+  }
+};
+
+const log = (...strings) => {
+  window.webkit.messageHandlers.external.postMessage(
+    JSON.stringify({"action": "log", "data": strings
+      .map((r) =>
+        typeof r == "object" ? stringifyJSON(r) : `${r.toString()}`,
+      )
+      // .map((i) => i.replace(/\"/g, '\\\\"').replace(/\n/g, "\\\\n"))
+      .join("\n")}, null, 4)
+  );
+};
+
+const sendData = (data) => {
+  log("RESPONSE::"+stringifyJSON(data));
+}
+
+function process_data(data) {
+  return JSON.parse(data);
+}
+
+window.recieveMessage = (data) => {
+  const edata = data;
+  if(edata.action == 'eventListen') {
+    const el = findInDom(edata.data.uuid);
+    if(el){
+      el.addEventListener(edata.data.event, eventHandlerFunction(edata.data))
+    }
+  } else if (edata.action == "createElement") {
+    const options = edata.data;
+    try {
+      createElement(options);
+    } catch (e) {
+      log(e.toString());
+    }
+  } else if (edata.action == "addStyleSheet") {
+    const style = document.createElement('style');
+    style.textContent = edata.data;
+    document.head.appendChild(style);
+  } else if (edata.action == "updateElement") {
+    const options = edata.data;
+    try {
+      updateElement(findInDom(options.uuid), options);
+    } catch (e) {
+      log(e.toString());
+    }
+  } else if (edata.action == "findElement") {
+    const id = edata.data.id;
+    const rid = edata.data.rid;
+    try {
+      sendData({ action: 'hook:findElement', data: { rid, object: findInDom(id)?.widgetOptions }  });
+    } catch (e) {
+      log(e.toString());
+    }
+  } 
+};
+
+window.addEventListener('load', () => {
+  window.exec(window.execContext);
+  log('SETUP::READY');
+});

package/lib/rew/pkgs/modules/ui/classes.js

@@ -2,7 +2,7 @@ const emitter = require("../../../functions/emitter");
 const { struct } = require("../../../models/struct");
 const { generateRandomID } = require("../../../functions/id");
 
-module.exports.uiClasses = (context, options, svr, send, hook, rmHook) => {
+module.exports.uiClasses = (context, options, send, recieve, hook, rmHook) => {
   const _sanitizeOptions = (options) => {
     return {
       ...options,
@@ -33,7 +33,7 @@ module.exports.uiClasses = (context, options, svr, send, hook, rmHook) => {
       hook(hookID, 'event_'+event, (data) => {
         this.emit(event, data);
       }, false);
-      send(JSON.stringify({ action: 'eventListen', data: { uuid: this.uuid, event, hookID } }))
+      send({ action: 'eventListen', data: { uuid: this.uuid, event, hookID } })
       return this;
     }
     off(event, callback){
@@ -56,7 +56,7 @@ module.exports.uiClasses = (context, options, svr, send, hook, rmHook) => {
     }
 
     init(){
-      send(JSON.stringify({ action: 'createElement', data: _sanitizeOptions(this.options) }))
+      send({ action: 'createElement', data: _sanitizeOptions(this.options) })
     }
 
     parent = null;
@@ -86,7 +86,7 @@ module.exports.uiClasses = (context, options, svr, send, hook, rmHook) => {
     }
 
     update(){
-      send(JSON.stringify({ action: 'updateElement', data: _sanitizeOptions(this.options) }));
+      send({ action: 'updateElement', data: _sanitizeOptions(this.options) });
       return this;
     }
 
@@ -140,7 +140,7 @@ module.exports.uiClasses = (context, options, svr, send, hook, rmHook) => {
 
   class StyleSheet {
     constructor(css = ''){
-      send(JSON.stringify({ action: 'addStyleSheet', data: css }));
+      send({ action: 'addStyleSheet', data: css });
     }
   }
 
@@ -150,7 +150,7 @@ module.exports.uiClasses = (context, options, svr, send, hook, rmHook) => {
       hook(rid, 'findElement', (data) => {
         r(CreatedElements.find(e => e.uuid == data.uuid) || data);
       });
-      send(JSON.stringify({ action: 'findElement', data: { id, rid } }));
+      send({ action: 'findElement', data: { id, rid } });
     });
   }
 

package/lib/rew/pkgs/ui.js

@@ -6,16 +6,22 @@ const fs = require("fs");
 const { uiClasses } = require("./modules/ui/classes");
 const { generateRandomID } = require("../functions/id");
 const { THEME_PATH } = require("../const/files");
+const readline = require('readline');
+const emitter = require("../functions/emitter");
 
-
-const BIN_PATH = path.resolve(__dirname, "../../bin/ui");
+const BIN_PATH = path.resolve(__dirname, "../../../bin/ui");
 const HTML_STRING = fs.readFileSync(
   path.resolve(__dirname, "../html/ui.html"),
   { encoding: "utf-8" },
 );
+const JS_STRING = fs.readFileSync(
+  path.resolve(__dirname, "../html/ui.js"),
+  { encoding: "utf-8" },
+);
+
+const replaceString = (string, options) => string.replace(/\$OPTIONS\(([^)]+)\)/g, (_, n) => n.startsWith('json.') ? JSON.stringify(options[n.split('json.')[1]] || '{}') : options[n] || _);
 
 const defaultOptions = {
-  port: 14473,
   title: "Title",
   onExit: () => process.exit(),
   style: '',
@@ -34,6 +40,7 @@ module.exports = (context) => ({
     const hookedSocketListeners = {};
 
     const runId = generateRandomID();
+    const tmpFile = "/tmp/" + runId + ".ruw.ui.socket";
 
     options.runId = runId;
 
@@ -41,65 +48,95 @@ module.exports = (context) => ({
 
     options.style = ' */\n'+options.style+'\n/* ';
 
-    const svr = http.createServer((req, res) => {
-      res.write(
-        HTML_STRING
-          .replace(/\$OPTIONS\(([^)]+)\)/g, (_, n) => n.startsWith('json.') ? JSON.stringify(options[n.split('json.')[1]] || '{}') : options[n] || _)
-      );
-      res.end();
-    });
+    const HTML = replaceString(HTML_STRING, options);
+    const JS = replaceString(JS_STRING, options);
 
-    const wss = new WebSocket.Server({ server: svr });
-    const sockets = [];
-
-    wss.on("connection", (ws) => {
-      ws.send(JSON.stringify({ action: "init", data: options }));
-      sockets.push(ws);
-      ws.on('message', (event) => {
-        const edata = JSON.parse(event.toString());
-        if(edata.action.startsWith('hook:')){
-          const hook = hookedSocketListeners[edata.data.rid];
-          const type = edata.action.split('hook:')[1];
-          if(hook && hook.type == type) {
-            hookedSocketListeners[edata.data.rid].cb(edata.data.object);
-            if(hook.once) delete hookedSocketListeners[edata.data.rid];
-          }
-        }
-      });
+    const queue = [];
+
+    const send = (data) => {
+      const content = fs.readFileSync(tmpFile, { encoding: 'utf-8' });
+      if(content) {
+        queue.push(data);
+      } else {
+        fs.writeFileSync(tmpFile, typeof data !== "string" ? JSON.stringify(data) : data);
+      }
+    }
+
+    const sendEvent = (data) => {
+      send({ action: 'JS', data: `window.recieveMessage(${JSON.stringify(data)})` })
+    }
+
+    const g_emitter = emitter();
+
+    const recieve = (data) => {
+      g_emitter.emit('recieve', data);
+    }
+
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
     });
 
-    svr.listen(options.port);
+    rl.question('', () => {});
+
+    fs.writeFileSync(tmpFile, '');
+
+    fs.watch(tmpFile, { encoding: 'utf-8' })
+    .on('change', () => {
+      if(queue.length){
+        send(queue.pop());
+      }
+    });
 
-    const url = new URL(`http://localhost:${options.port}`);
+    const p = spawn(BIN_PATH, [runId]);
 
-    const p = spawn(BIN_PATH, [url.toString(), runId]);
+    
 
     p.on("close", (code) => {
+      rl.close();
       options.onExit(code);
     });
 
-    process.on("beforeExit", () => p.kill());
+    process.on("beforeExit", () => {
+      p.kill();
+      fs.unlinkSync(tmpFile);
+    });
+
+    g_emitter.on('recieve', (edata) => {
+      if(edata.action.startsWith('hook:')){
+        const hook = hookedSocketListeners[edata.data.rid];
+        const type = edata.action.split('hook:')[1];
+        if(hook && hook.type == type) {
+          hookedSocketListeners[edata.data.rid].cb(edata.data.object);
+          if(hook.once) delete hookedSocketListeners[edata.data.rid];
+        }
+      }
+    });
 
-    // p.on('message', console.log);
-    // p.on('error', console.log);
-    // exec(BIN_PATH+' '+'http://localhost:' + port, console.log)
     return new Promise((r) => {
       p.stdout.on("data", (data) => {
-        if (data.toString().trim() == "INIT::READY") {
-          r(
-            uiClasses(context, options, svr, (message, cb) => { // Send message
-              sockets.forEach((socket) => socket.send(message, cb));
-            }, (rid, type, cb, once = true) => { // Add hook
-              hookedSocketListeners[rid] = { type, cb, once };
-            }, (rid) => { // Remove hook
-              delete hookedSocketListeners[rid];
-            }),
-          );
+        if (data.toString().startsWith("RESPONSE::")) {
+          const d = data.toString().split("RESPONSE::")[1];
+          const jd = JSON.parse(d);
+          recieve(jd);
+        } else if(data.toString().trim().endsWith('SETUP::READY')) {
+          console.log('READY');
+          r(uiClasses(context, options, sendEvent, (cb) => {
+            g_emitter.on('recieve', cb);
+          }, (rid, type, cb, once = true) => { // Add hook
+            hookedSocketListeners[rid] = { type, cb, once };
+          }, (rid) => { // Remove hook
+            delete hookedSocketListeners[rid];
+          }));
+        } else if(data.toString().endsWith('SETUP::HTML')) {
+          send({action: 'JS2', data: JS, isSetup: true});
+        } else if(data.toString() == 'INIT::READY') {
+          send({action: 'HTML', data: HTML});
         } else {
           console.log(data.toString());
         }
       });
-
+  
       p.stderr.on("data", (data) => {
         console.error(data.toString());
       });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@makano/rew",
-  "version": "1.0.21",
-  "description": "",
+  "version": "1.1.0",
+  "description": "A simple coffescript runtime",
   "main": "lib/rew/main.js",
   "directories": {
     "lib": "lib"
@@ -14,7 +14,8 @@
   },
   "files": [
     "lib/",
-    "bin/"
+    "bin/",
+    "README.md"
   ],
   "bin": {
     "rew": "bin/rew"