I'm trying to learn web assembly. I'm able to compile wasm from C code. However I'm having a lot of difficulty trying to get my code to run in Firefox. My code is very basic:
hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
<script async type="text/javascript" src="hello.js"></script>
</html>
hello.js
"use strict";
const imports = {
env: {
"abort": function() {},
"memoryBase": 0,
"tableBase": 0,
"memory": new WebAssembly.Memory({ initial: 4 }),
"table": new WebAssembly.Table({ initial: 0, element: 'anyfunc' }),
}
}
WebAssembly.instantiateStreaming(fetch('hello.wasm'), imports)
.then(obj => console.log(obj.instance.exports._add(1, 2)))
.catch(error => console.log(error));
hello.c
#include <emscripten.h>
EMSCRIPTEN_KEEPALIVE int add(x, y) { return x + y; }
I compile my code like this:
emcc hello.c -O1 -g4 -s WASM=1 -s SIDE_MODULE=1 -o hello.wasm --source-map-base http://localhost:8080/ --emrun
and I use emrun to serve my files
emrun --no_browser --port 8080 .
The Problem
Initially, Firefox was complaining with LinkError: "import object field 'abort' is not a Function". Inspecting hello.wast, generated during compilation, it looks like an abort function is indeed required (I'm guessing abort() is an expected part of the C runtime). So, I added the "abort": function() {}, line to the env section of imports.
But now I get a LinkError: "imported Table with incompatible size". I'm at a loss at to what this error is trying to indicate. How can I get my wasm code to run?
I'm trying to debug with Firefox Developer Edition 63.0b8 (64-bit).
emcc is 1.38.11.
I am an idiot. Change the 0 here to any other number. For example:
"table": new WebAssembly.Table({ initial: 0, element: 'anyfunc' }),
|
v
"table": new WebAssembly.Table({ initial: 2, element: 'anyfunc' }),
This hello.js file should work.
"use strict";
const imports = {
env: {
"abort": function() {},
"memoryBase": 0,
"tableBase": 0,
"memory": new WebAssembly.Memory({ initial: 4 }),
"table": new WebAssembly.Table({ initial: 4, element: 'anyfunc' }),
}
}
WebAssembly.instantiateStreaming(fetch('hello.wasm'), imports)
.then(obj => console.log(obj.instance.exports._add(1, 2)))
.catch(error => console.log(error));
Related
I've learned that createLocalVue no longer exists in Vue test utils, making this documentation outdated.
Here are the specs for my project:
Laravel 9 (w/ Vite)
Vue 3
Inertia.js
JavaScript
Vuetify 3
Testing
Vitest
Vue Test Utils
Here is what my vite.config.js looks like.
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import DefineOptions from 'unplugin-vue-define-options/vite'
import vue from '#vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify'
export default defineConfig({
build: {
sourcemap: true,
},
test: {
globals: true,
environment: 'jsdom',
deps: {
inline: ["vuetify"],
},
},
plugins: [
laravel({
input: [
'resources/js/app.js'
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directory as expected.
includeAbsolute: false,
},
},
}),
vuetify({
autoImport: true
}),
DefineOptions(),
],
});
And here is the sample code for one of my tests.
import {describe, expect, test} from 'vitest';
import Home from "../Pages/Home.vue";
import {mount} from '#vue/test-utils'
describe('Home.vue', () => {
test("invoice pagination", () => {
const wrapper = mount(Home, {
props: {
invoicePagination: {
total: 0,
per_page: 5,
current_page: 1,
last_page: 1,
first_page_url: "https://127.0.0.1:8000/invoices?page=1",
last_page_url: "https://127.0.0.1:8000/invoices?page=1",
prev_page_url: null,
next_page_url: null,
path: "http://127.0.0.1:8000/invoices",
from: 1,
to: 1,
data: [],
}
},
});
expect(2 + 2 === 4);
})
})
I get this output in the terminal when running vitest.
[Vue warn]: injection "Symbol(vuetify:display)" not found.
at <Home invoicePagination= {
total: 0,
per_page: 5,
current_page: 1,
last_page: 1,
first_page_url: 'https://127.0.0.1:8000/invoices?page=1',
last_page_url: 'https://127.0.0.1:8000/invoices?page=1',
prev_page_url: null,
next_page_url: null,
path: 'http://127.0.0.1:8000/invoices',
from: 1,
to: 1,
data: []
} ref="VTU_COMPONENT" >
at <VTUROOT>
[Vue warn]: Invalid vnode type when creating vnode: undefined.
at <Home invoicePagination= {
total: 0,
per_page: 5,
current_page: 1,
last_page: 1,
first_page_url: 'https://127.0.0.1:8000/invoices?page=1',
last_page_url: 'https://127.0.0.1:8000/invoices?page=1',
prev_page_url: null,
next_page_url: null,
path: 'http://127.0.0.1:8000/invoices',
from: 1,
to: 1,
data: []
} ref="VTU_COMPONENT" >
at <VTUROOT>
❯ resources/js/Tests/Home.spec.js (1)
❯ Home.vue (1)
× invoice pagination
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL resources/js/Tests/Home.spec.js > Home.vue > invoice pagination
TypeError: Cannot read properties of undefined (reading 'total')
❯ Proxy._sfc_render resources/js/Pages/Home.vue:61:54
59| </v-col>
60| </v-row>
61| <v-row id="empty-result" v-if="invoicePagination.total === 0">
| ^
62| <v-col>
63| <NoInvoicesPicture v-if="!smAndDown"></NoInvoicesPicture>
❯ renderComponentRoot node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:891:44
❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5570:57
❯ ReactiveEffect.run node_modules/#vue/reactivity/dist/reactivity.cjs.js:191:25
❯ instance.update node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5684:56
❯ setupRenderEffect node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5698:9
❯ mountComponent node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5480:9
❯ processComponent node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5438:17
❯ patch node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5042:21
❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5577:21
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
Test Files 1 failed (1)
Tests 1 failed (1)
Start at 09:26:11
Duration 4.12s (transform 2.03s, setup 0ms, collect 2.37s, tests 34ms)
FAIL Tests failed. Watching for file changes...
press h to show help, press q to quit
I'm concerned about "injection "Symbol(vuetify:display)" not found." I believe it's causing my test to fail.
Without accurate docs, I don't know how to employ Vuetify with my configuration.
I'm not able to import files in my fusebox project and keep seeing the following error:
GET http://localhost:4444/hello.ts 404 (Not Found)
I've set my import statements correctly and don't understand what's causing the error. My project structure looks like this:
The config file:
Sparky.task("config", () => {
fuse = FuseBox.init({
homeDir: "src",
output: "dist/$name.js",
hash: isProduction,
sourceMaps: !isProduction,
plugins: [
[SassPlugin(), CSSPlugin()],
CSSPlugin(),
WebIndexPlugin({
target: "index.html",
template: "src/index.html"
}),
WebIndexPlugin({
target: "login.html",
template: "src/login.html"
}),
isProduction && UglifyJSPlugin()
],
});
// vendor should come first
vendor = fuse.bundle("vendor")
.instructions("~ js/indexView.ts");
// out main bundle
app = fuse.bundle("app")
.instructions(`!> js/indexView.ts`);
if (!isProduction) {
fuse.dev();
}
});
Hello.ts:
export function hello(name: string) {
return `Hello ${name}`;
}
IndexView.ts:
import {hello} from "./hello.ts";
const message: string = `This is the index page`;
console.log(hello(message));
You can also find this project here on Github.
I am trying to compile bootstrap with Brunch in Phoenix. I have deployed a simple collapse nav to heroku, but the nav button doesn't activate on resize: https://hidden-wildwood-14271.herokuapp.com/test
If you look at the <head> in the source code, you'll see this:
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">-->
<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>-->
When these links/scripts are uncommented, this nav bar works just fine (assuming you're doing this from a local/non-https, like heroku in production). Instead I have to use the Brunch-compiled css/app.css and js/app.jsat the top. Those file contain exactly the same code as the referenced files in comments (bootstrap css, jquery/bootstrap js).
I'm also getting this error in the console, and have no idea what it means:
Uncaught Error: Cannot find module 'web/static/js/app' from '/'
Also, this is what my brunch-config looks like (very little difference from default configuration):
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// "js/app.js": /^(web\/static\/js)/,
// "js/vendor.js": /^(web\/static\/vendor)|(deps)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// "web/static/vendor/js/jquery-2.1.1.js",
// "web/static/vendor/js/bootstrap.min.js"
// ]
// }
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js",
order: {
before: ["web/static/js/app.js"]
}
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
sass: {
options: {
// Use includePaths to allow sass to load files outside your tree
// For example, from node_modules
//includePaths: ['app/css']
}
},
postcss: {
processors: [
require('autoprefixer')(['last 8 versions'])
]
},
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true
}
};
I am trying to run grunt on an existing project on a windows 8 machine.
I've installed grunt-cli globally,by running:
npm install -g grunt-cli
However when trying to run the project with:
grunt develop
I get this error:
Warning: Unable to write "preview.html" file <Error code: EPERM>. Use --force to continue.
Aborted due to warnings.
Then when running
grunt develop --force
I get this error:
Running "less:css/main.css" <less> task
Fatal error: Unable to write "css/main.css" file <Error code: EPERM>.
Any help you could provide on this would be most helpful,
thanks.
Update 1:
This is my Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
watch: {
less: {
files: ['**/*.less', '!less/_compiled-main.less'],
tasks: 'less'
},
html: {
files: ['preview-template.html', 'js/**/*.js', 'less/**/*.less', '!less/_compiled-main.less'],
tasks: ['includeSource', 'add-dont-edit-prefix-to-preview-html']
},
wysiwyg: {
files: ['less/wysiwyg.less'],
tasks: 'generate-wysiwyg-styles-js'
}
},
less: {
'css/main.css': 'less/_compiled-main.less',
'css/wysiwyg.css': 'less/wysiwyg.less',
options: {
dumpLineNumbers: 'comments'
}
},
includeSource: {
options: {
templates: {
},
},
dev: {
files: {
'preview.html': 'preview-template.html',
'less/_compiled-main.less': 'less/main.less'
}
}
},
connect: {
server: {
options: {
base: '.',
port: 8000
}
}
}
});
// Css preprocessor
grunt.loadNpmTasks('grunt-contrib-less');
// Watch for file changes and run other grunt tasks on change
grunt.loadNpmTasks('grunt-contrib-watch');
// Includes all js files in preview-template.html and saves as preview.html.
// Includes all less files in main.less and saves as _compiled-main.less
grunt.loadNpmTasks('grunt-include-source');
// Static http server
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('generate-wysiwyg-styles-js', function(){
var css = grunt.file.read('css/wysiwyg.css');
css = css.replace(/\n/g, '')
var js = '// This file is generated automatically based on wysiwyg.less - don\' edit it directly!\n';
js += '// It needs to exist in JS form so we can include the CSS in the downloaded saved notes file';
js += "\napp.value('wysiwygStyles', '" + css + "');";
grunt.file.write('js/app/wysiwyg-styles.js', js)
})
grunt.registerTask('add-dont-edit-prefix-to-preview-html', function(){
var file = grunt.file.read('preview.html');
var prefix = '<!-- \n\n\n\n Don\'t edit this file, edit preview-template.html instead.' + new Array(20).join('\n') + ' -->';
file = file.replace('<!doctype html>', '<!doctype html>' + prefix)
grunt.file.write('preview.html', file);
});
grunt.registerTask('build-develop', [
'includeSource',
'less',
'generate-wysiwyg-styles-js',
'add-dont-edit-prefix-to-preview-html'
])
grunt.registerTask('develop', [
'build-develop',
'connect:server',
'watch'
]);
}
Try something like this maybe?
less: {
files: {
'css/main.css': 'less/_compiled-main.less',
'css/wysiwyg.css': 'less/wysiwyg.less'
},
options: {
dumpLineNumbers: 'comments'
}
}
Notice the files addition to the less array after grunt.initConfig
Let me know if it works.
My question, while at first somewhat similar to this one, seems to be a more basic question - and might be signaling a bug in the build system. I've created a custom build for my dojo application. I only build one layer right now, here's what the profile script/object looks like:
dependencies = {
stripConsole: "all",
action: "release",
optimize: "shrinksafe",
releaseName: "myProject",
// list of locales we want to expose
localeList: "en-gb,en-us,de-de",
layers: [
{
// Name: a relative path from the dojo.js in the desination directory.
name: "../../myProject.js",
dependencies: [
"myPackage.MyDataStore",
// MyWidget depends on a few other widgets, and has its own
// translation files.
"myPackage.MyWidget"
]
}
],
prefixes: [
// These paths are relative to the location of dojo.js
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "myPackage", "../../../src/myPackage" ]
]
}
When I run a build with that description it outputs files in the following directory structure:
release/
release/myProject/
release/myProject/dijit/
... dijit ...
release/myProject/dojo/
... dojo ...
release/myProject/dojox/
... dojox ...
release/myProject/myPackage/
... my custom package ...
release/nls/
myProject_en-us.js
myProject_de.js
etc..
../myproject.js
../myProject.js.uncompressed.js
Finally, in my test HTML page - I've got the following:
<script type="text/javascript">
var djConfig = {
debug: true,
parseOnLoad: false,
modulePaths: { // paths to directories in relation to dojo's location.... hurr.
'myPackage': '../myPackage',
'dojox': '../dojox',
'dijit': '../dijit'
}
};
</script>
<script type="text/javascript" src="./release/myProject/dojo/dojo.js.uncompressed.js"></script>
<script type="text/javascript" src="./release/myProject.js.uncompressed.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.require('myPackage.MyDataStore');
dojo.require('myPackage.MyWidget');
var store = new myPackage.MyDataStore();
var widget = new myPackage.MyWidget({
store: store
}, dojo.byId('testWidget'));
widget.startup();
});
</script>
But unfortunately, Firebug spits this out at me:
Bundle not found: MyWidget in myPackage , locale=en-us
What I Think is Happening
I've traced through some of the code leading up to the above error and it seems like the dojo.i18n._preloadLocalizations() call at the end of the file doesn't actually load in the correct nls file from ./release/nls.
Any idea how to fix this without resorting to manually including the nls files with <script> tags?
It's a bug of dojo, you should not use '..' in your layers name in case it will generate a NLS package.
please refer to http://bugs.dojotoolkit.org/ticket/5225