assemblyscript-typescript-loader
Loader for webpack to compile typescript with AssemblyScript and bundle it to wasm or btyes string
Install
npm i assemblyscript-typescript-loader --save
Usage
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.ts?$/,
loader: 'assemblyscript-typescript-loader',
include:/assemblyscript/,//to avoid a conflict with other ts file who use 'ts-load',so you can division them with prop 'include'
options: {
limit: 1000,
name: `static/assembly/[name].[hash:8].wasm`
}
}
]
}
}
**assemblyscript/moduleEntry.ts**
```ts
var w: u32, // width
h: u32, // height
s: u32; // total size
/** Initializes width and height. */
export function init(w_: u32, h_: u32): void {
w = w_;
h = h_;
s = w * h;
}
/** Performs one step. */
export function step(): void {
var hm1 = h - 1,
wm1 = w - 1;
for (var y: u32 = 0; y < h; ++y) {
var ym1 = select<u32>(hm1, y - 1, y == 0),
yp1 = select<u32>(0, y + 1, y == hm1);
for (var x: u32 = 0; x < w; ++x) {
var xm1 = select<u32>(wm1, x - 1, x == 0),
xp1 = select<u32>(0, x + 1, x == wm1);
var n = (
load<u8>(ym1 * w + xm1) + load<u8>(ym1 * w + x) + load<u8>(ym1 * w + xp1) +
load<u8>(y * w + xm1) + load<u8>(y * w + xp1) +
load<u8>(yp1 * w + xm1) + load<u8>(yp1 * w + x) + load<u8>(yp1 * w + xp1)
);
if (load<u8>(y * w + x)) {
if (n < 2 || n > 3)
store<u8>(s + y * w + x, 0);
} else if (n == 3)
store<u8>(s + y * w + x, 1);
}
}
}
file.js
import asmPromise from "./assemblyscript/moduleEntry.ts";
asmPromise().then(function(asmModule){
// here you can use the wasm.exports
asmModule.step();
})
Options
Name | Type | Default | Description |
---|---|---|---|
name |
{String|Function} |
[hash].[ext] |
Configure a custom filename template for your file |
limit |
{Int} |
undefined |
Byte limit to the wasm file,if the size is smaller then limit value ,the wasm will bundled into js ,or the wasm file will build into dist ,well runtime , bundled js will fetch it and return the Promise object; |
publicPath |
{String|Function} |
__webpack_public_path__ |
Configure a custom public path for your file |
outputPath |
{String|Function} |
'undefined' |
Configure a custom output path for your file |
{name}
You can configure a custom filename template for your file using the query parameter name
. For instance, to copy a file from your context
directory into the output directory retaining the full directory structure, you might use
{String}
webpack.config.js
{
loader: 'assemblyscript-typescript-loader',
options: {
name: '[path][name].wasm'
}
}
{Function}
webpack.config.js
{
loader: 'assemblyscript-typescript-loader',
options: {
name (file) {
if (env === 'development') {
return '[path][name].wasm'
}
return '[hash].wasm'
}
}
}
placeholders
Name | Type | Default | Description |
---|---|---|---|
[ext] |
{String} |
file.extname |
The extension of the resource |
[name] |
{String} |
file.basename |
The basename of the resource |
[path] |
{String} |
file.dirname |
The path of the resource relative to the context
|
[hash] |
{String} |
md5 |
The hash of the content, hashes below for more info |
[N] |
{String} |
`` | The n-th match obtained from matching the current file name against the regExp
|
hashes
[<hashType>:hash:<digestType>:<length>]
optionally you can configure
Name | Type | Default | Description |
---|---|---|---|
hashType |
{String} |
md5 |
sha1 , md5 , sha256 , sha512
|
digestType |
{String} |
hex |
hex , base26 , base32 , base36 , base49 , base52 , base58 , base62 , base64
|
length |
{Number} |
9999 |
The length in chars |
By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file.
publicPath
webpack.config.js
{
loader: 'assemblyscript-typescript-loader',
options: {
name: '[path][name].wasm',
publicPath: 'assembly/'
}
}
outputPath
webpack.config.js
{
loader: 'assemblyscript-typescript-loader',
options: {
name: '[path][name].wasm',
outputPath: 'assembly/'
}
}