@salla.sa/twilight 2.0.277 → 2.0.279

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight",
-  "version": "2.0.277",
+  "version": "2.0.279",
   "description": "Salla Theme Toolkit, Webcomponents, Events, Requests, Utils",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,9 @@
     "lang.js": "^1.1.14",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "dotenv": "^16.0.1",
+    "websocket": "^1.0.34"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",

package/types/event/product.d.ts

@@ -13,6 +13,6 @@ export default interface ProductEvent {
     onSearchFailed: RequestErrorEventWithData</*query*/string|undefined>;
 
     onOfferExisted: (callback: (offer: OfferSummary) => void) => void;
-    ondOffersFetched: (callback: (response: ProductResponse.offers) => void) => void;
+    onOffersFetched: (callback: (response: ProductResponse.offers) => void) => void;
     onFetchOffersFailed: RequestErrorEvent;
 }

package/watcher.js

@@ -2,6 +2,10 @@ const path = require('path');
 const glob = require("glob");
 const color = {normal: "\x1b[0m", red: "\x1b[31m", green: "\x1b[32m", yellow: "\x1b[33m", cyan: "\x1b[36m",}
 const {execSync} = require("child_process");
+const fs = require("fs");
+const env = require("dotenv");
+const WebSocketClient = require('websocket').client;
+
 //const webpack = require("webpack");
 /**
  * @callback HookCallback
@@ -48,8 +52,24 @@ const {execSync} = require("child_process");
  * @property {boolean} isWin
  */
 class WatcherPlugin {
-    constructor(sallaCli = 'salla') {
-        this.sallaCli = sallaCli;
+    constructor({port = 8000,sallaCli = "salla",theme_id}) {
+      
+      this.sallaCli = sallaCli;
+      this.theme_id = theme_id;
+
+      let client = new WebSocketClient();
+
+      client.on('connectFailed', function(error) {
+          console.error('[x] Oops! Hot reload is currently not working. Check the error message for details: ',error.toString());
+      });
+
+      client.on('connect', (connection)=> {
+          this.connection = connection;
+          console.log(color.green, `✓ Performing hot reload on port ws://localhost:${port}`, color.normal);
+      });
+
+      client.connect(`ws://localhost:${port}`, 'echo-protocol');
+    
     }
 
     /**
@@ -76,8 +96,13 @@ class WatcherPlugin {
                 let files = this.isWebpack5
                     ? Array.from(compiler_.modifiedFiles || [])
                     : Object.keys(compiler_.watchFileSystem.watcher.mtimes);
-                files.filter(file => file.toLowerCase().endsWith('.twig'))
-                    .forEach(file => execSync(`${this.sallaCli} theme sync -f "${file}" -t ${this.draftId}`, {stdio: 'inherit'}));
+
+                files.map((file)=>{
+                    if(file.toLowerCase().endsWith('.twig'))
+                        execSync(`${this.sallaCli} theme sync -f "${file}" -id ${this.theme_id}`, {stdio: 'inherit'});
+
+                    if(this.connection) this.connection.sendUTF(JSON.stringify({msg:"reload"}));
+                });
             }
         );
     }
@@ -103,20 +128,12 @@ class WatcherPlugin {
      * @param {{mode:'development'|'none'|'production', watch:boolean, ...}} options - @see https://webpack.js.org/configuration
      * @return {boolean}
      */
-    canWatch(options) {
+     canWatch(options) {
         if (options.mode !== 'development' || !options.watch) {
             console.log(color.green, `✓ Skipping Watching Theme files in production.`, color.normal);
             return false;
         }
-        //if theme id not existed go out
-        try {
-            this.draftId = require(path.resolve(process.cwd(), 'theme.json')).draft_id
-            return !!this.draftId;
-        } catch (e) {
-            let command = color.cyan + this.sallaCli + ' theme watch' + color.red
-            console.log(color.red, `X Theme files won't sync! if you want to sync them, run: ${command}`, color.normal);
-            return false;
-        }
+        return true;
     }
 }