Sorry I mean you need to be able to import the Module object into your vuejs environment.
On Sat, Dec 28, 2019, 15:10 Mehdi Sabwat <[email protected]> wrote: > > https://forum.vuejs.org/t/wasm-how-to-correctly-call-a-webassembly-method-in-vue-js/83422/16 > > I see you also posted there, but yeah ccall is a Module object method. So > you need to be able to export a module from vuejs. > > On Sat, Dec 28, 2019, 14:57 Marco Ippolito <[email protected]> > wrote: > >> Just to check how to correctly import javascript files into vue files, I >> imported this jsFunct.js : >> >> export function Add(x, y) { >> var z = x + y; >> return z; >> } >> >> into Result2.vue : >> >> <template> >> <div> >> <p button @click="callAdd">Add!</p> >> <p>Result: {{ result }}</p> >> </div> >> </template> >> >> <script> >> import * as jsFunct from './jsFunct' >> export default { >> data () { >> return { >> result: 0 >> } >> }, >> methods: { >> callAdd() { >> const result = jsFunct.Add(1, 2); >> this.result = result; >> } >> } >> } >> </script> >> >> And it works fine: >> >> So.. I tried to do the same with emscripten's generated js_plumbing.js >> file but got errors: >> >> <template> >> <div> >> <p button @click="callAdd">Add!</p> >> <p>Result: {{ result }}</p> >> </div> >> </template> >> >> <script> >> import * as js_plumbing from './js_plumbing' >> export default { >> data () { >> return { >> result: null >> } >> }, >> methods: { >> callAdd() { >> const result = js_plumbing.Add(1,2); >> this.result = result; >> } >> } >> } >> </script> >> >> >> This could mean that we have to pass through Module to load and use Add() >> function. >> But how? >> >> >> >> On Saturday, 28 December 2019 12:45:59 UTC+1, Mehdi Sabwat wrote: >>> >>> If I were you I'd try to load a handmade js file with vuejs, before >>> trying this. Maybe something is missing in your vuejs setup? >>> >>> On Sat, Dec 28, 2019, 12:33 Marco Ippolito <[email protected]> wrote: >>> >>>> I do not grasp if it is vue.js-related problem, an emscripten-related >>>> problem, or a problem related to the interface between vue.-js and >>>> emscripten. >>>> >>>> I compiled the add.c file with this command: >>>> >>>> emcc add.c -o js_plumbing.js -s >>>> EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap'] -s >>>> ENVIRONMENT='web,worker' >>>> >>>> and this is the content of add.c file : >>>> >>>> #include <stdlib.h> >>>> #include <emscripten.h> >>>> >>>> // If this is an Emscripten (WebAssembly) build then... >>>> #ifdef __EMSCRIPTEN__ >>>> #include <emscripten.h> >>>> #endif >>>> >>>> #ifdef __cplusplus >>>> extern "C" { // So that the C++ compiler does not rename our function >>>> names >>>> #endif >>>> >>>> EMSCRIPTEN_KEEPALIVE >>>> int Add(int value1, int value2) >>>> { >>>> return (value1 + value2); >>>> } >>>> >>>> #ifdef __cplusplus >>>> } >>>> #endif >>>> >>>> >>>> so, the Add function and the Module function, as far as I know, should >>>> be exported. >>>> >>>> The very first lines of the js_plumbing.js file are the following: >>>> >>>> // Copyright 2010 The Emscripten Authors. All rights reserved. >>>> // Emscripten is available under two separate licenses, the MIT license >>>> and the >>>> // University of Illinois/NCSA Open Source License. Both these >>>> licenses can be >>>> // found in the LICENSE file. >>>> >>>> // The Module object: Our interface to the outside world. We import >>>> // and export values on it. There are various ways Module can be used: >>>> // 1. Not defined. We create it here >>>> // 2. A function parameter, function(Module) { ..generated code.. } >>>> // 3. pre-run appended it, var Module = {}; ..generated code.. >>>> // 4. External script tag defines var Module. >>>> // We need to check if Module already exists (e.g. case 3 above). >>>> // Substitution will be replaced with actual code on later stage of the >>>> build, >>>> // this way Closure Compiler will not mangle it (e.g. case 4. above). >>>> // Note that if you want to run closure, and also to use Module >>>> // after the generated code, you will need to define var Module = {}; >>>> // before the code. Then that object will be used in the code, and you >>>> // can continue to use Module afterwards as well. >>>> var Module = typeof Module !== 'undefined' ? Module : {}; >>>> >>>> // --pre-jses are emitted after the Module integration code, so that >>>> they can >>>> // refer to Module (if they choose; they can also define Module) >>>> // {{PRE_JSES}} >>>> >>>> // Sometimes an existing Module object exists with properties >>>> // meant to overwrite the default module functionality. Here >>>> // we collect those properties and reapply _after_ we configure >>>> // the current environment's defaults to avoid having to be so >>>> // defensive during initialization. >>>> var moduleOverrides = {}; >>>> var key; >>>> for (key in Module) { >>>> if (Module.hasOwnProperty(key)) { >>>> moduleOverrides[key] = Module[key]; >>>> } >>>> } >>>> >>>> So, it seems that the Module is object is indeed exported in >>>> js_plumbing.js file. >>>> Why isn't it imported in Result.vue file in callAdd() function ? >>>> >>>> methods: { >>>> callAdd() { >>>> const result = js_plumbing.Module.ccall('Add', >>>> 'number', >>>> ['number', 'number'], >>>> [1, 2]); >>>> console.log('Result: ${result}'); >>>> console.log(result); >>>> } >>>> } >>>> >>>> >>>> On Saturday, 28 December 2019 12:19:06 UTC+1, Mehdi Sabwat wrote: >>>>> >>>>> Weird, it seems the Module object does not get exported. Sorry it >>>>> seems vue.js related and I know nothing about it. >>>>> >>>>> >>>>> On Sat, Dec 28, 2019, 11:07 Marco Ippolito <[email protected]> >>>>> wrote: >>>>> >>>>>> I’m trying to transpose to vue.js this html page which works fine: >>>>>> >>>>>> <!DOCTYPE html> >>>>>> <html> >>>>>> <head> >>>>>> <meta charset="utf-8"/> >>>>>> </head> >>>>>> <body> >>>>>> <input type="button" value="Add" onclick="callAdd()" /> >>>>>> >>>>>> <script> >>>>>> function callAdd() { >>>>>> const result = Module.ccall('Add', >>>>>> 'number', >>>>>> ['number', 'number'], >>>>>> [1, 2]); >>>>>> console.log(`Result: ${result}`); >>>>>> } >>>>>> </script> >>>>>> <script src="js_plumbing.js"></script> >>>>>> </body> >>>>>> </html> >>>>>> >>>>>> >>>>>> According to the emscripten documentation: >>>>>> https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap >>>>>> we can use ccall and cwrap functions >>>>>> >>>>>> >>>>>> This is the Result.vue file: >>>>>> >>>>>> >>>>>> <template> >>>>>> <div> >>>>>> <p button @click="callAdd">Add!</p> >>>>>> <p>Result: {{ result }}</p> >>>>>> </div> >>>>>> </template> >>>>>> >>>>>> <script> >>>>>> import * as js_plumbing from './js_plumbing' >>>>>> export default { >>>>>> data () { >>>>>> return { >>>>>> result: null >>>>>> } >>>>>> }, >>>>>> methods: { >>>>>> callAdd() { >>>>>> const result = js_plumbing.Module.ccall('Add', >>>>>> 'number', >>>>>> ['number', 'number'], >>>>>> [1, 2]); >>>>>> console.log('Result: ${result}'); >>>>>> console.log(result); >>>>>> } >>>>>> } >>>>>> } >>>>>> </script> >>>>>> >>>>>> >>>>>> But when executing npm run dev >>>>>> >>>>>> >>>>>> npm run dev >>>>>> >>>>>> > [email protected] dev >>>>>> /home/marco/cpp/WebAssemblyinAction/Appendix_B/B.1_ccall/startingV >>>>>> > cross-env NODE_ENV=development webpack-dev-server --open --hot >>>>>> >>>>>> >>>>>> I get this error: Cannot read property 'ccall' of undefined" >>>>>> >>>>>> >>>>>> How to solve it? >>>>>> >>>>>> Looking forward to your kind help. >>>>>> >>>>>> Marco >>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "emscripten-discuss" group. >>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>> send an email to [email protected]. >>>>>> To view this discussion on the web visit >>>>>> https://groups.google.com/d/msgid/emscripten-discuss/650b07f7-efc8-4132-94de-e556320b01ed%40googlegroups.com >>>>>> <https://groups.google.com/d/msgid/emscripten-discuss/650b07f7-efc8-4132-94de-e556320b01ed%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>> . >>>>>> >>>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "emscripten-discuss" group. >>>> To unsubscribe from this group and stop receiving emails from it, send >>>> an email to [email protected]. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msgid/emscripten-discuss/2b7fb9b9-7d4e-42e5-ac66-f9539b920fd6%40googlegroups.com >>>> <https://groups.google.com/d/msgid/emscripten-discuss/2b7fb9b9-7d4e-42e5-ac66-f9539b920fd6%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>> -- >> You received this message because you are subscribed to the Google Groups >> "emscripten-discuss" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/emscripten-discuss/6c34513a-d675-46c0-b39c-f87891115b28%40googlegroups.com >> <https://groups.google.com/d/msgid/emscripten-discuss/6c34513a-d675-46c0-b39c-f87891115b28%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > -- You received this message because you are subscribed to the Google Groups "emscripten-discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/CANLCaykrL%3DA%2B7qF7Fpr4fth0weQ-93ZXy_96n%2BGmvC%2BfL12Dzg%40mail.gmail.com.
