Can't call functions from the host.jsx or Console.jsx. WHY?

[GuyMicciche]

Hi, please I thank you for your time.

I have an issue with my newly created project. I am in Tab2.vue, or App.vue. I am trying to call code in one of the host files, for example PHXS > host.jsx, or universal > Console.jsx. I have a simple function like this

var console = {
  log: function(data) {
    JSXEvent(data, "console");
  },
  alert: function(message)
  {
    alert("Alert from universal Console: " + message.toString());
  }
};

Now in the .vue file, I try to call that function like this:

universalAlert(message) {
      message = "Called from Tab2.vue";
      this.app.csInterface.evalScript(`console.alert("${message}")`);
    }

But the alert is not happening. HOWEVER, when I switch to production mode, it works. But this is not idea because I need the hot reload for easy programming and testing purposes.

MY QUESTION: Am I missing something, or doing this the wrong way? Or is this a bug?

Thank you!

Guy M.

[vonnnassau]

Hi Guy, I will try to help you.

To call a function with variables in a .jsx this works for me in both development and production:

in script.vue:

<script>
import { evalScript } from "brutalism";
</script>

methods: {

    callFunc(someValue, antotherValue){

        let message = {firstValue: someValue, secondValue: this.anotherValue};

        var result = evalScript(
        `myJSXfunc('${JSON.stringify(message)}')`
        );
    }
}

in host.jsx:

function myJSXfunc(params){

    this.console.log('host - openSVG()');

    var params = this.JSON.parse(params);
    var someValue = params.firstValue;
    var anotherValue = params.anotherValue;

    alert('someValue: '+someValue+'\n anotherValue: '+anotherValue);
    // do things here

}

Does it help?

Best, Jochem

[GuyMicciche]

I forgot to mention I am using Quasar-Cli, and my project doesn't have "brutalism".

[GuyMicciche]

if I run this.app.csInterface.evalScript(alert("${message}")); it works. But if I make reference to a host.jsx function, it doesn't work.

[GuyMicciche]

I started a new bombino project from scratch and it started working.

What made everything work for me as I wanted it to was this:

1. In App.vue I changed csInterface: null, to csInterface: new CSInterface,

2. I updated CSInterface.js to CEP_11.x

3. Changed the <CEFCommandLine> in manifest.xml:

   <CEFCommandLine>
   <Parameter>--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure,NetworkService</Parameter>
   <Parameter>--disable-site-isolation-trials</Parameter>
   <Parameter>--enable-nodejs</Parameter>
   <Parameter>--mixed-context</Parameter>
   </CEFCommandLine>

4. This is my code for Tab2.vue:

   <script>
   export default {
   computed: {
   app() {
     return this.$root.$children[0];
   }
   },
   methods: {
   vueAlert(message) {
     message = "Hello from vueAlert!";
     this.app.csInterface.evalScript(`PHXS.passData("${message}")`, (result) =>
     {
       alert(result);
     });
   }
   }
   };
   </script>

5. This is my code in host.jsx:

   
   console.log('Host is online');

var PHXS = { alert: function(message) { alert("This message comes from " + app.name + ": " + message.toString()); }, passData: function(passedData) { alert(passedData); return passedData; } }

Now, as expected, I call the function in host.jsx from Tab2.vue, and the call-back works as well. So what I get is 2 alerts. 1 being invoked in Tab2.vue but called in host.jsx, and the other call-back alert with data being passed from host.jsx to Tab2.vue. Communication works as I expected it to. Thanks!