From 2e007a3bae9e9559858bfb1c2f5adca19919537f Mon Sep 17 00:00:00 2001 From: Sambo Chea Date: Thu, 20 Aug 2020 11:42:43 +0700 Subject: [PATCH] Typescript support for running web --- www/README.md | 2 +- www/{bootstrap.js => bootstrap.ts} | 6 ++- www/index.html | 7 +-- www/{index.js => index.ts} | 2 +- www/package-lock.json | 73 +++++++++++++++++++++++++++++- www/package.json | 4 +- www/tsconfig.json | 11 +++++ www/webpack.config.js | 17 ++++++- 8 files changed, 110 insertions(+), 12 deletions(-) rename www/{bootstrap.js => bootstrap.ts} (62%) rename www/{index.js => index.ts} (86%) create mode 100644 www/tsconfig.json diff --git a/www/README.md b/www/README.md index d658bb1..d31f90c 100644 --- a/www/README.md +++ b/www/README.md @@ -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 - `README.md`: the file you are reading now! - `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`: - pulls in devDependencies for using webpack: - [`webpack`](https://www.npmjs.com/package/webpack) diff --git a/www/bootstrap.js b/www/bootstrap.ts similarity index 62% rename from www/bootstrap.js rename to www/bootstrap.ts index 7934d62..b39ed23 100644 --- a/www/bootstrap.js +++ b/www/bootstrap.ts @@ -1,5 +1,7 @@ // A dependency graph that contains any wasm must all be imported // asynchronously. This `bootstrap.js` file does the single async import, so // that no one else needs to worry about it again. -import("./index.js") - .catch(e => console.error("Error importing `index.js`:", e)); +// import("./index") +// .catch(e => console.error("Error importing `index.ts`:", e)); + +import * as _ from "./index" \ No newline at end of file diff --git a/www/index.html b/www/index.html index ca5615c..2b43d12 100644 --- a/www/index.html +++ b/www/index.html @@ -1,11 +1,12 @@ - + - Hello wasm-pack! + Hey, CUBETIQ Solution! - +
Loading...
+ diff --git a/www/index.js b/www/index.ts similarity index 86% rename from www/index.js rename to www/index.ts index 8a6b364..f60e8b3 100644 --- a/www/index.js +++ b/www/index.ts @@ -1,4 +1,4 @@ // import * as wasm from "hello-wasm-pack"; import * as wasm from "./../pkg/wasmweb_sample" -wasm.greet(); +wasm.greet() diff --git a/www/package-lock.json b/www/package-lock.json index 9794f08..5c4f499 100644 --- a/www/package-lock.json +++ b/www/package-lock.json @@ -4018,8 +4018,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", - "dev": true, - "optional": true + "dev": true }, "pify": { "version": "3.0.0", @@ -5245,6 +5244,70 @@ "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==", "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": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz", @@ -5273,6 +5336,12 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "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": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", diff --git a/www/package.json b/www/package.json index 0e1a4f2..712828d 100644 --- a/www/package.json +++ b/www/package.json @@ -2,7 +2,7 @@ "name": "create-wasm-app", "version": "0.1.0", "description": "create an app to consume rust-generated wasm packages", - "main": "index.js", + "main": "index.ts", "bin": { "create-wasm-app": ".bin/create-wasm-app.js" }, @@ -28,6 +28,8 @@ "homepage": "https://github.com/rustwasm/create-wasm-app#readme", "devDependencies": { "copy-webpack-plugin": "^5.0.0", + "ts-loader": "^8.0.2", + "typescript": "^3.9.7", "webpack": "^4.29.3", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.5" diff --git a/www/tsconfig.json b/www/tsconfig.json new file mode 100644 index 0000000..a9c9092 --- /dev/null +++ b/www/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "noImplicitAny": true, + "sourceMap": true, + "module": "es6", + "target": "es5", + "jsx": "react", + "allowJs": true + } +} \ No newline at end of file diff --git a/www/webpack.config.js b/www/webpack.config.js index 80ad814..c175190 100644 --- a/www/webpack.config.js +++ b/www/webpack.config.js @@ -2,10 +2,23 @@ const CopyWebpackPlugin = require("copy-webpack-plugin"); const path = require('path'); 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: { path: path.resolve(__dirname, "dist"), - filename: "bootstrap.js", + filename: 'bundle.js', }, mode: "development", plugins: [