cubetiq/wasmweb-sample
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Typescript support for running web

Browse Source
This commit is contained in:
Sambo Chea 2020-08-20 11:42:43 +07:00
parent 2b78d0051d
commit 2e007a3bae
8 changed files with 110 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
www/README.md
View File

@ -41,7 +41,7 @@ npm init wasm-app
- `LICENSE-APACHE` and `LICENSE-MIT`: most Rust projects are licensed this way, so these are included for you - `LICENSE-APACHE` and `LICENSE-MIT`: most Rust projects are licensed this way, so these are included for you
- `README.md`: the file you are reading now! - `README.md`: the file you are reading now!
- `index.html`: a bare bones html document that includes the webpack bundle - `index.html`: a bare bones html document that includes the webpack bundle
- `index.js`: example js file with a comment showing how to import and use a wasm pkg - `index.ts`: example js file with a comment showing how to import and use a wasm pkg
- `package.json` and `package-lock.json`: - `package.json` and `package-lock.json`:
- pulls in devDependencies for using webpack: - pulls in devDependencies for using webpack:
- [`webpack`](https://www.npmjs.com/package/webpack) - [`webpack`](https://www.npmjs.com/package/webpack)

6
www/bootstrap.js → www/bootstrap.ts
View File

@ -1,5 +1,7 @@
// A dependency graph that contains any wasm must all be imported // A dependency graph that contains any wasm must all be imported
// asynchronously. This `bootstrap.js` file does the single async import, so // asynchronously. This `bootstrap.js` file does the single async import, so
// that no one else needs to worry about it again. // that no one else needs to worry about it again.
import("./index.js") // import("./index")
.catch(e => console.error("Error importing `index.js`:", e)); // .catch(e => console.error("Error importing `index.ts`:", e));
import * as _ from "./index"

7
www/index.html
View File

@ -1,11 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello wasm-pack!</title> <title>Hey, CUBETIQ Solution!</title>
</head> </head>
<body> <body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script> <div id="root">Loading...</div>
<script src="bundle.js"></script>
</body> </body>
</html> </html>

2
www/index.js → www/index.ts
View File

@ -1,4 +1,4 @@
// import * as wasm from "hello-wasm-pack"; // import * as wasm from "hello-wasm-pack";
import * as wasm from "./../pkg/wasmweb_sample" import * as wasm from "./../pkg/wasmweb_sample"
wasm.greet(); wasm.greet()

73
www/package-lock.json generated
View File

@ -4018,8 +4018,7 @@
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
"dev": true, "dev": true
"optional": true
}, },
"pify": { "pify": {
"version": "3.0.0", "version": "3.0.0",
@ -5245,6 +5244,70 @@
"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==", "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
"dev": true "dev": true
}, },
"ts-loader": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-8.0.2.tgz",
"integrity": "sha512-oYT7wOTUawYXQ8XIDsRhziyW0KUEV38jISYlE+9adP6tDtG+O5GkRe4QKQXrHVH4mJJ88DysvEtvGP65wMLlhg==",
"dev": true,
"requires": {
"chalk": "^2.3.0",
"enhanced-resolve": "^4.0.0",
"loader-utils": "^1.0.2",
"micromatch": "^4.0.0",
"semver": "^6.0.0"
},
"dependencies": {
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"requires": {
"fill-range": "^7.0.1"
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"requires": {
"to-regex-range": "^5.0.1"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
},
"micromatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
"integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
"dev": true,
"requires": {
"braces": "^3.0.1",
"picomatch": "^2.0.5"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"requires": {
"is-number": "^7.0.0"
}
}
}
},
"tslib": { "tslib": {
"version": "1.11.1", "version": "1.11.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
@ -5273,6 +5336,12 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true "dev": true
}, },
"typescript": {
"version": "3.9.7",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz",
"integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
"dev": true
},
"union-value": { "union-value": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",

4
www/package.json
View File

@ -2,7 +2,7 @@
"name": "create-wasm-app", "name": "create-wasm-app",
"version": "0.1.0", "version": "0.1.0",
"description": "create an app to consume rust-generated wasm packages", "description": "create an app to consume rust-generated wasm packages",
"main": "index.js", "main": "index.ts",
"bin": { "bin": {
"create-wasm-app": ".bin/create-wasm-app.js" "create-wasm-app": ".bin/create-wasm-app.js"
}, },
@ -28,6 +28,8 @@
"homepage": "https://github.com/rustwasm/create-wasm-app#readme", "homepage": "https://github.com/rustwasm/create-wasm-app#readme",
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^5.0.0", "copy-webpack-plugin": "^5.0.0",
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.29.3", "webpack": "^4.29.3",
"webpack-cli": "^3.1.0", "webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5" "webpack-dev-server": "^3.1.5"

11
www/tsconfig.json Normal file
View File

@ -0,0 +1,11 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"sourceMap": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}

17
www/webpack.config.js
View File

@ -2,10 +2,23 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
entry: "./bootstrap.js", entry: "./bootstrap.ts",
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: { output: {
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js", filename: 'bundle.js',
}, },
mode: "development", mode: "development",
plugins: [ plugins: [