Replies: 18 comments 36 replies
-
|
This is what the Parcel transformer side would look like: const { default: ThrowableDiagnostic } = require("@parcel/diagnostic");
const { Transformer } = require("@parcel/plugin");
module.exports = new Transformer({
async transform({ asset, logger, inputFs }) {
let {
jsResult,
wasmResult,
error,
invalidateOnFileChange,
invalidateOnFileCreate,
invalidateOnEnvChange,
} = await something({
filePath: asset.filePath,
inputCode: await asset.getCode(),
readFile: (...args) => fs.readFile(...args),
});
/*
jsResult should be something like
```js
const wasmURL = new URL("asc-wasm-module", import.meta.url);
export async function instantiate(imports = {}) {
const { exports } = await WebAssembly.instantiateStreaming(fetch(wasmURL), imports);
// AssemblyScript probably has more code in here for bindings
return exports;
}
```
wasmResult should be a binary buffer containing the compiled Wasm
*/
if (error) {
throw new ThrowableDiagnostic({
diagnostic: {
message: error.message,
codeFrames: [
{
language: "asc",
filePath: error.filePath,
codeHighlights: [
{
message: error.detailedMessage,
start: { line: error.start.line, column: error.start.column },
end: { line: error.end.line, column: error.end.column },
},
],
},
],
},
});
}
for (let file of invalidateOnFileChange) {
asset.invalidateOnFileChange(file);
}
for (let file of invalidateOnFileCreate) {
asset.invalidateOnFileCreate({ filePath: file });
}
for (let envvar of invalidateOnEnvChange) {
asset.invalidateOnEnvChange(envvar);
}
asset.type = "js";
asset.setCode(result);
return [
asset,
// uniqueKey is however the Wasm module was imported on the JS side.
{ type: "wasm", content: wasmResult, uniqueKey: "asc-wasm-module" },
];
},
});What you need to figure out is the function I can help you if you have that Here is a repo of a working transformer (as a template): https://github.com/mischnic/parcel-transformer-wat/
Have you seen https://parceljs.org/plugin-system/transformer/ ? |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mischnic, thanks a lot for your detailed answer, I highly appreciate it! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , I hope you are well. |
Beta Was this translation helpful? Give feedback.
-
|
Yes. But one thing that might happen is that a build error occurs and the terminal is cleared (which also removes logs), on Linux/macOS you can do something like |
Beta Was this translation helpful? Give feedback.
-
|
I was thinking of building and running parcel-transformer-wat locally to have a working point of reference. However, Do you have any quick tips to work around the problem? (if not, it's totally okay :) ) Click to see an excerpt from the error printout``` gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ] make: Entering directory '/parcel-transformer-wat/node_modules/msgpackr-extract/build' CXX(target) Release/obj.target/msgpackr-extract/src/extract.o In file included from ../../nan/nan.h:178, from ../src/extract.cpp:11: ../../nan/nan_callbacks.h:55:23: error: ‘AccessorSignature’ is not a member of ‘v8’ 55 | typedef v8::Local Sig; | ^~~~~~~~~~~~~~~~~ ../../nan/nan_callbacks.h:55:40: error: template argument 1 is invalid 55 | typedef v8::Local Sig; | ^ In file included from ../src/extract.cpp:11: ../../nan/nan.h: In function ‘void Nan::SetAccessor(v8::Local, v8::Local, Nan::GetterCallback, Nan::SetterCallback, v8::Local, v8::AccessControl, v8::PropertyAttribute, Nan::imp::Sig)’: ../../nan/nan.h:2551:16: error: no matching function for call to ‘v8::ObjectTemplate::SetAccessor(v8::Local&, void (*&)(v8::Local, const v8::PropertyCallbackInfo&), void (*&)(v8::Local, v8::Local, const v8::PropertyCallbackInfo&), v8::Local&, v8::AccessControl&, v8::PropertyAttribute&, Nan::imp::Sig&)’ 2551 | , signature); | ^ In file included from /.cache/node-gyp/19.3.0/include/node/v8-function.h:15, from /.cache/node-gyp/19.3.0/include/node/v8.h:33, from ../src/extract.cpp:8: /.cache/node-gyp/19.3.0/include/node/v8-template.h:807:8: note: candidate: ‘void v8::ObjectTemplate::SetAccessor(v8::Local, v8::AccessorGetterCallback, v8::AccessorSetterCallback, v8::Local, v8::AccessControl, v8::PropertyAttribute, v8::SideEffectType, v8::SideEffectType)’ 807 | void SetAccessor( | ^~~~~~~~~~~ /.cache/node-gyp/19.3.0/include/node/v8-template.h:812:22: note: no known conversion for argument 7 from ‘Nan::imp::Sig’ {aka ‘int’} to ‘v8::SideEffectType’ 812 | SideEffectType getter_side_effect_type = SideEffectType::kHasSideEffect, ``` |
Beta Was this translation helpful? Give feedback.
-
|
That native module was apparently incompatible with recent Node versions. I've updated the lockfile, now it works for me with Node 18 |
Beta Was this translation helpful? Give feedback.
-
|
Lovely! It's working now. Thank you 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mischnic , yet another question. Update: Please see my latest comment(s) , this question is probably irrelevant.It appears as if my |
Beta Was this translation helpful? Give feedback.
-
|
Oh yes, I also tried using just |
Beta Was this translation helpful? Give feedback.
-
|
Please never mind! I tried copying my configuration to your project and added the corresponding files. The I surely get an error since the WAT transformer won't understand AssemblyScript 😆 but at least it shows the right line where it stumbles upon "the incorrect" code. I must have simply missed something in my set-up. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mischnic, I believe I have all the essentials operational now and I can finally work on the logic of the transformer. Thanks a lot for your support, time and patience! I highly appreciate that 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , I hope you are well. It took me some time, but I have some results. I bumped into a problem and I don't seem to find a solution quickly. If you have some time, could you point me in the right direction? Thanks in advance! Good news:
So-so news:
I tried to guess some settings in My poor guesses in config that did not work: Here is the log with some debug output, statistics, and the error message: |
Beta Was this translation helpful? Give feedback.
-
|
It looks like the file So at the very least it looks like I need to rename |
Beta Was this translation helpful? Give feedback.
-
|
I have a whole bunch of questions, to be honest. 1. How can I detect whether it's a debug or a production build Parcel-wise?I'd like to instruct asc to use the corresponding section of its config. Here's an oversimplified example of 2. asc generates 5 artifactsHere they are: It would be nice if we could dump the source maps to the location where the web is served from. Also, the TS declaration file would be super helpful for calling WASM-functions from TypeScript. The 3. Custom transformer configurationIs there a way to pass some custom configuration (key/value pairs?) from Thank you for your time. |
Beta Was this translation helpful? Give feedback.
-
I think this is because that Can you share your current code?
You can return the sourcemaps to Parcel (though nothing so far used Wasm source maps, so not sure if that works) asset.type = "js";
asset.setCode(result);
asset.setMap(SOMETHING);
return [
asset,
// uniqueKey is however the Wasm module was imported on the JS side.
{ type: "wasm", content: wasmResult, uniqueKey: "asc-wasm-module", map: SOMETHING },
];
That is kind of outside the responsibilities/possibilities of Parcel. You have to write this to disk if you want tsc to see it.
Yes and no: the indented way is to have a separate AS-specific config file, like this: parcel/packages/transformers/vue/src/VueTransformer.js Lines 24 to 57 in 049ee1d |
Beta Was this translation helpful? Give feedback.
-
I tried setting
Indeed. It's a little messy since I'm still prototyping. Once the bare minimum implementation starts working (i.e. the WASM module can be loaded and executed on the web page), I'm planning to migrate the transformer to TypeScript and perform some refactoring and improve all the documentation.
Thanks for answering my questions, I'll implement a few things based on your answers right after we make the WASM module work on the web page (and maybe in Node too).
I will try doing that once WASM module can be loaded and executed. The source maps are super useful in debugging AssemblyScript code. For example, here's my WASM demo running in debug mode with some breakpoints:
|
Beta Was this translation helpful? Give feedback.
-
|
So the reasons are more complicated than I thought. A regular diff --git example/.parcelrc example/.parcelrc
index 8143df2..5203515 100644
--- example/.parcelrc
+++ example/.parcelrc
@@ -2,5 +2,6 @@
"extends": "@parcel/config-default",
"transformers": {
"*.as.ts": ["parcel-transformer-assemblyscript-codument"],
+ "*.wasm": ["@parcel/transformer-raw"]
}
}
diff --git parcel-transformer-assemblyscript-codument/index.js parcel-transformer-assemblyscript-codument/index.js
index 40607bf..8cfb89b 100644
--- parcel-transformer-assemblyscript-codument/index.js
+++ parcel-transformer-assemblyscript-codument/index.js
@@ -87,8 +87,8 @@ async function compileAssemblyScript(asset) {
[
/* Command line options */
absolutePath,
- // "--outFile",
- // "resultingFile.wasm",
+ "--outFile",
+ "output.wasm",
"--debug", // FIXME: Find out how to enable/disable debug mode depending on the Parcel mode: "development" or "production".
// "--optimize",
// "--sourceMap",
@@ -256,15 +256,10 @@ module.exports = new Transformer({
return [
asset,
// TODO: uniqueKey needs to be the Wasm module was imported on the JS side.
{
type: "wasm",
content: compiledResult[ArtifactFileType.WASM],
- // uniqueKey: "asc-wasm-module", // FIXME: neither of the hardcoded options worked :/
- // uniqueKey: "./assembly/index.as.ts", // FIXME: neither of the hardcoded options worked :/
- // uniqueKey: "./build/release.wasm", // FIXME: neither of the hardcoded options worked :/
- uniqueKey: "release.wasm", // FIXME: neither of the hardcoded options worked :/
- // uniqueKey: "index.as.ts", // FIXME: neither of the hardcoded options worked :/
+ uniqueKey: "output.wasm",
},
];
},I've also noticed one big problem: AssemblyScript uses top level await, which Parcel unfortunately still doesn't support. export const {
memory,
add,
} = await (async url => instantiate(
await (async () => {
try { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }
catch { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }
})(), {
}
))(new URL("release.wasm", import.meta.url));it has to be something like this export default async function() {
const {
memory,
add,
} = await (async url => instantiate(
await (async () => {
try { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }
catch { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }
})(), {
}
))(new URL("release.wasm", import.meta.url));
return {memory, add};
};and then the consumer can do // @ts-ignore
import init from "./assembly/index.as";
init().then((wasm: typeof import("./assembly/index.as")) => {
console.log("index.ts, compiled");
wasm.add(2, 44);
}); |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , thanks for your comments! To expand the context a little, there's a setting in Anyway, below are those two kinds of glue per different value of "esm"
{
/// Omitted
"options": {
"bindings": "esm"
}
}results in: async function instantiate(module, imports = {}) {
const adaptedImports = {
env: Object.assign(Object.create(globalThis), imports.env || {}, {
abort(message, fileName, lineNumber, columnNumber) {
// ~lib/builtins/abort(~lib/string/String | null?, ~lib/string/String | null?, u32?, u32?) => void
message = __liftString(message >>> 0);
fileName = __liftString(fileName >>> 0);
lineNumber = lineNumber >>> 0;
columnNumber = columnNumber >>> 0;
(() => {
// @external.js
throw Error(`${message} in ${fileName}:${lineNumber}:${columnNumber}`);
})();
},
"console.log"(text) {
// ~lib/bindings/dom/console.log(~lib/string/String) => void
text = __liftString(text >>> 0);
console.log(text);
},
}),
};
const { exports } = await WebAssembly.instantiate(module, adaptedImports);
const memory = exports.memory || imports.env.memory;
function __liftString(pointer) {
if (!pointer) return null;
const
end = pointer + new Uint32Array(memory.buffer)[pointer - 4 >>> 2] >>> 1,
memoryU16 = new Uint16Array(memory.buffer);
let
start = pointer >>> 1,
string = "";
while (end - start > 1024) string += String.fromCharCode(...memoryU16.subarray(start, start += 1024));
return string + String.fromCharCode(...memoryU16.subarray(start, end));
}
return exports;
}
export const {
memory,
add,
} = await (async url => instantiate(
await (async () => {
try { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }
catch { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }
})(), {
}
))(new URL("output.wasm", import.meta.url));"raw"
{
/// Omitted
"options": {
"bindings": "raw"
}
}results in export async function instantiate(module, imports = {}) {
const adaptedImports = {
env: Object.assign(Object.create(globalThis), imports.env || {}, {
abort(message, fileName, lineNumber, columnNumber) {
// ~lib/builtins/abort(~lib/string/String | null?, ~lib/string/String | null?, u32?, u32?) => void
message = __liftString(message >>> 0);
fileName = __liftString(fileName >>> 0);
lineNumber = lineNumber >>> 0;
columnNumber = columnNumber >>> 0;
(() => {
// @external.js
throw Error(`${message} in ${fileName}:${lineNumber}:${columnNumber}`);
})();
},
"console.log"(text) {
// ~lib/bindings/dom/console.log(~lib/string/String) => void
text = __liftString(text >>> 0);
console.log(text);
},
}),
};
const { exports } = await WebAssembly.instantiate(module, adaptedImports);
const memory = exports.memory || imports.env.memory;
function __liftString(pointer) {
if (!pointer) return null;
const
end = pointer + new Uint32Array(memory.buffer)[pointer - 4 >>> 2] >>> 1,
memoryU16 = new Uint16Array(memory.buffer);
let
start = pointer >>> 1,
string = "";
while (end - start > 1024) string += String.fromCharCode(...memoryU16.subarray(start, start += 1024));
return string + String.fromCharCode(...memoryU16.subarray(start, end));
}
return exports;
}By all means, we need I spent some time trying to make it all work, but so far to no avail. I am expecting a very busy week ahead, so I might not have time to work on this further in the upcoming days, but I am definitely planning to get back to it as soon as I have a chance to. |
Beta Was this translation helpful? Give feedback.
-
|
Then we should just need asset.setCode(
// compiledResult was compiled with `bindings: "raw"` and `--outFile output.wasm`
compiledResult[ArtifactFileType.JS] +
`let instance = null;
export default async function () {
if (instance == null) {
let url = new URL("release.wasm", import.meta.url);
instance = await instantiate(
await ${
asset.env.isNode
? `WebAssembly.compile(await (await import("node:fs/promises")).readFile(url))`
: `WebAssembly.compileStreaming(fetch(url))`
},
{}
);
}
return instance;
}`
);(And to clarify: the problem isn't |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , I hope you are well. I finally had the time to try your latest suggestion. I have a working POC, it's in master
See the screenshots below:
The solution is still super hairy and needs to be refactored quite a bit. I hope I'll have the time for it sometime soon. Would you recommend keeping the transformer in JS or is it a better practice to use TS? If you have any feedback or suggestions for improvements, please let me know! That would be highly appreciated. Kind regards. |
Beta Was this translation helpful? Give feedback.
-
Depends on your personal preference, but I think autocompletion (and errors if you use a unknown API) are pretty helpful.
Yes and no: it's actually using Flow, so it is type-checked. |
Beta Was this translation helpful? Give feedback.
-
|
Right, I discovered that many JS files in Parcel all begin with |
Beta Was this translation helpful? Give feedback.
-
|
I still need to work on populating |
Beta Was this translation helpful? Give feedback.
-
|
Here are the descriptions for |
Beta Was this translation helpful? Give feedback.
-
|
Inside the transformer function logger.log(">>> log");
logger.info(">>> info");
logger.warn(">>> warn");
logger.error(">>> error");From the calls above only What am I missing, please? I was planning to print the outputs and statistics from ASC to the terminal window using |
Beta Was this translation helpful? Give feedback.
-
|
The logger doesn't aceppt a string but a parcel/packages/core/diagnostic/src/diagnostic.js Lines 49 to 75 in 7b79c6d |
Beta Was this translation helpful? Give feedback.
-
|
Aha! Thanks for pointing this out. I should have spent a few more minutes on that, figure it out by myself and not bother you with something that minor. So I tried printing one line out using the logger: console.log(
`${PREF} Compiled WASM module size: ${
compiledResult?.[ArtifactFileType.WASM]?.length
}`
);
logger.info({
origin: "[ASC]",
name: "n/a",
message: `# Compiled WASM module size: ${
compiledResult?.[ArtifactFileType.WASM]?.length
}`,
});I was expecting
|
Beta Was this translation helpful? Give feedback.
-
|
Generally, most plugins don't print anything on successful builds. You could potentially print the stats on
No. |
Beta Was this translation helpful? Give feedback.
-
|
I was trying to make the source maps work but to no avail so far. Judging by the look of the maps file, I assumed that ASC generates VLQ-maps. That, however, did not help me either. You can find a map generated by my example project here. If you have any ideas on how to make the maps work, please push me in the right direction. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot for the PR. I merged it. And yes, just as you mentioned, the source maps still don't work in the browser.
Thank you so much! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
#9009 has the fixes for that |
Beta Was this translation helpful? Give feedback.
-
|
Hi mischnic, I hope you're well. Thanks a lot for looking into that! I caught a bad cold/flu and was totally knocked out for the past 4 days, so getting to all the Parcel-related matters only now. I'll wait for #9009 to be reviewed and merged, in the meantime I'll look into other sub-tasks I have in the transformer. |
Beta Was this translation helpful? Give feedback.
-
|
No worries, get well soon! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I am trying to get well, as much as possible :) |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mischnic , I've been improving the quality of my TS code and bumped into a need to make these types manually. Is there maybe some package with TS-types already? Maybe there exists an automation with jscodeshift or something along those lines? If not, it's okay, I can live with a bunch of manually converted types :) |
Beta Was this translation helpful? Give feedback.
-
|
These types simply don't exist in the public parcel API, you seem to have copied over some types from the internals. I would do this, reusing most types that are available: dipdowel/parcel-transformer-assemblyscript-codument#3 Your error handling is also still a bit odd, sometimes it returns an |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mischnic , I hope you're doing well. Thank you for showing where to find the types and thanks a lot for another PR! I highly appreciate that. I merged your PR.
It is still super hairy, I haven't had the time to improve it just yet. I'm definitely planning to get to it soon. Thanks for bringing this up! I appreciate all the feedback 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
As a side note: was |
Beta Was this translation helpful? Give feedback.
-
|
https://parceljs.org/plugin-system/transformer/ has quite a lot about tarnsformers, including many complete code samples. |
Beta Was this translation helpful? Give feedback.
-
|
There does not seem to be an easy way to populate the fields below while handling an error from ASC: codeHighlights: [
{
message: "My message",
start: { line: 12, 12 },
end: { line: 12, column: 19 },
},
],ASC sends a pretty error message to
A developer can see what exactly and where went wrong in the AssemblyScript code, so it should be good enough for now. If I ever find a way to get the compilation error details as an object, then I'll rework this solution in the proper Parcel way. |
Beta Was this translation helpful? Give feedback.
-
|
There is a way: --- parcel-transformer-assemblyscript-codument/src/compile.ts
+++ parcel-transformer-assemblyscript-codument/src/compile.ts
@@ -98,20 +98,24 @@ export async function compile(asset: {
filename: string,
contents: string | Buffer | Uint8Array /*Uint8Array*/,
baseDir: string
) =>
write(
compilationArtifacts as CompilationArtifacts,
filename,
contents,
baseDir
),
+ reportDiagnostic: (diagnostic) => {
+ console.log(diagnostic);
+ },
}
);
let error, stdout, stderr, stats;Results in {
message: "'const' declarations must be initialized.",
code: 1155,
category: 3,
range: { start: 299, end: 300, source: { normalizedPath: 'index.as.ts' } },
relatedRange: null
}for this error: You'll need to convert the byte-offset of |
Beta Was this translation helpful? Give feedback.
-
|
Nice catch! 👍 I'll add this to my TODO list. Will pick it up eventually. |
Beta Was this translation helpful? Give feedback.
-
|
@mischnic , hi again. There's a problem which I don't yet understand but I am suspecting Parcel. Happens in the same branch we looked into earlier today. Once I run On NodeJS v19.3.0 and v19.8.1 that looks like this: or like this: Just in case I also tried it on NodeJS v18.15.0 (LTS). There it's even better: Just in case I tried it with the Transformer in pure JS (checked out the last commit before I migrated to TypeScript) but the problem persisted. It's likely to be about this line. Do you by chance have any thoughts on what's wrong? Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
After googling around a little, I saw people complaining about similar problems and everyone is pointing to a bug in V8. Not sure though whether it's the same problem. |
Beta Was this translation helpful? Give feedback.
-
|
It doesn't happen for me with just That case will be fixed in the next release by #8990. You could use nightly versions until then |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , your recommendation worked perfectly! Thanks again! All the latest changes are now in
While waiting for the source maps fix to be merged, I'll keep on working on my TODO list, it's still pretty long (more refactoring and improvements, custom config for the Transformer, proper READMEs, unit tests, etc). |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , I hope you are well. Could you tell whether this line in the user's configuration file will need to stay and always be used to make the AssemblyScript transformer work? Or was it a temporary work-around and a proper solution will follow? Also, could you tell if you know when the next release of Parcel might happen? I am looking forward to having #8990 and hopefully #9009 available in a regular release version (i.e. not a nightly build). I understand it can depend on many things, but if you have any general indication, I'd highly appreciate that. Thank you. |
Beta Was this translation helpful? Give feedback.
-
{
"transformers": {
"*.as.ts": ["parcel-transformer-assemblyscript-codument"],
"*.wasm": ["@parcel/transformer-raw"]
}
}Then the user just has to do {
"extends": [
"parcel-config-assemblyscript-codument",
"@parcel/config-default"
]
}I tested that in: https://github.com/mischnic/parcel-transformer-assemblyscript-codument/commit/910f948c091bef986daed9df5b1aa49f400e6249
2.9.0 was released today including the |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mischnic , I hope you are doing well. Thank you for your answers, they really helped! I published parcel-transformer-assemblyscript-codument and created a template project to speed up things for the users. If I have time I'll see if I can work on a scaffolding tool to spare developers the need to download the template manually. Anyway, this is how things are at the moment. If you have time to check how it works, you're very welcome to do so. If not, it's also totally fine 🙂 Thanks once again for all your time and efforts! I don't know why https://www.npmjs.com/package/parcel-transformer-assemblyscript-codument shows just me as a collaborator, while github page shows you as a contributor. Anyway, I mentioned your role in the README under Contributors, I hope you don't mind. And as always, I am always open to any feedback should you happen to have any. |
Beta Was this translation helpful? Give feedback.
-
|
Nice! Only thing I noticed is that it's hard to find the Github repo from the npm page, you should add a repository field to the package json: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#repository |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , I hope you are doing fine.
Great point! Thanks a lot for noticing and mentioning it. I also found a problem that looks quite critical to me. Files imported in Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mischnic , I hope you are well. Could you tell whether there is a chance to get PR #9009 merged any time soon? Or was there maybe an alternative solution implemented? Thank you in advance. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Dear fellow developers,
May I humbly propose an idea that could benefit the community of TypeScript and AssemblyScript developers and WebAssembly enthusiast? It's about a plugin that would allow integration of AssemblyScript code into web projects using Parcel.
Some background info and my motivation
I experienced that firsthandedly: AssemblyScript can be a a very smooth and natural way for a TypeScript developer to step into the world of WebAssembly.
As they say on assemblyscript.org:
That definitely worked for me. In 2022 I managed to develop a WASM demo (as in the Demoscene) using AssemblyScript, there were some challenges along the way, but the familiar TS-like syntax and style of development helped greatly! If you have a couple of spare minutes, please feel free to see the demo (it contains some flashing images and music): https://wasm-demo.codument.com
I made my own build system for that project using
esbuild,asc(the AssemblyScript compiler) and good old shell scripts. I simply could not find an existing building solution that would suit my needs back then. But well, my build system is not too portable and it is suitable only for a small project, so I believe that a Parcel plugin could be a game changer for TS/AS/WASM developers like myself.Why I want it in Parcel?
Parcel already supports WebAssembly modules, having an "AssemblyScript to WebAssembly" compilation step added would make it just fantastic! I'd love to be able to start working on a new web project with AssemblyScript just by
yarn add-ing Parcel and maybe a plugin or two.What I tried
Unfortunately, I could not find any tutorials on how to write plugins for Parcel 2. I tried looking at the source code of some other plugins, that gave me some idea but as @hirasso mentioned in their post:
I am feeling the same, being a complete newbie to Parcel I have no idea where to start
What I'm looking for here
I believe I know my way around the AssemblyScript compiler, its options and some not-so-obvious details on how to build WASM modules with it, so I can cover that part. I am hoping that someone with experience in writing plugins for Parcel 2 could lend me a hand in getting this project off the ground.
Thank you for your time, patience, and consideration. I look forward to reading your thoughts here.
Kind regards,
Leo
Beta Was this translation helpful? Give feedback.
All reactions