Commit 2356e31c authored by Kai Brandes's avatar Kai Brandes

wasm and react in integration

parent 9eb0ff8d
{
"presets": ["@babel/env", "@babel/preset-react"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
\ No newline at end of file
// 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 * as wasm from "adventofcode_2017";
wasm.greet();
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,11 +2,6 @@
"name": "adventofcode-2017",
"version": "0.1.0",
"description": "my solutions for adventofcode-2017 brought to you by webassembly and rust",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://gitlab.codecentric.de/kai.brandes/adventofcode-2017"
......@@ -18,11 +13,34 @@
"webpack"
],
"author": "Kai Brandes <kai.brandes@codecentric.de>",
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-hot-loader": "^4.3.11",
"wasm-loader": "^1.3.0"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --config webpack.config.js"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"hello-wasm-pack": "^0.1.0",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"copy-webpack-plugin": "^4.5.2"
"copy-webpack-plugin": "^4.5.2",
"@babel/cli": "^7.1.0",
"@babel/core": "^7.1.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"style-loader": "^0.23.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.8"
}
}
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>Hello wasm-pack!</title>
</head>
<body>
<script src="./bootstrap.js"></script>
</body>
</head>
<body>
<script src="./dist/bundle.js"></script>
<section>
<h1>Day 1</h1>
<div id="day1"></div>
</section>
</body>
</html>
import React from "react";
import * as wasm from "adventofcode_2017";
export class Day1 extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null
};
this.onInput = this.onInput.bind(this);
}
onInput(event) {
this.setState({value: wasm.result_1a(event.target.value)});
}
render() {
return (
<div>
<h1>Hallo</h1>
<input type="text" onInput={this.onInput} />
Result: {this.state.value}
</div>
);
}
}
\ No newline at end of file
import("./loader.js")
.then(module => module.render())
.catch(e => console.error("Error importing `loader.js`:", e));
import {Day1} from './day1';
import React from "react";
import ReactDOM from "react-dom";
export function render() {
ReactDOM.render(React.createElement(Day1), document.querySelector('#day1'));
}
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./bootstrap.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js",
},
mode: "development",
plugins: [
new CopyWebpackPlugin(['index.html'])
],
};
entry: "./src/index.js",
mode: "development",
plugins: [
new CopyWebpackPlugin(['./public/index.html'])
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx", ".wasm"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment