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]
> <javascript:>> 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] <javascript:>.
>> 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.
