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/CANLCaymi3ujEEvV-0NEzpauOpEoVEieDwbJx3AiDo7-p%2B2DSQg%40mail.gmail.com.
