Adapt code to new default project structure

nop33 · nop33 · commit 0ea6cf997aa2 · 2021-05-22T12:09:39.000+02:00
Closes #3
diff --git a/dfx.json b/dfx.json
@@ -9,7 +9,7 @@
         "dfinity_vue"
       ],
       "frontend": {
-        "entrypoint": "src/dfinity_vue_assets/public/index.js"
+        "entrypoint": "src/dfinity_vue_assets/src/index.html"
       },
       "source": [
         "src/dfinity_vue_assets/assets",
diff --git a/package.json b/package.json
@@ -7,12 +7,19 @@
     "build": "webpack"
   },
   "devDependencies": {
-    "@dfinity/agent": "0.6.14",
+    "@dfinity/agent": "0.8.8",
+    "assert": "2.0.0",
+    "buffer": "6.0.3",
+    "events": "3.3.0",
     "terser-webpack-plugin": "2.2.2",
+    "html-webpack-plugin": "5.3.1",
+    "process": "0.11.10",
+    "stream-browserify": "3.0.0",
+    "util": "0.12.3",
     "vue-loader": "^15.9.5",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "4.41.3",
-    "webpack-cli": "3.3.10"
+    "webpack": "5.24.4",
+    "webpack-cli": "4.5.0"
   },
   "dependencies": {
     "vue": "^2.6.12"
diff --git a/src/dfinity_vue_assets/src/App.vue b/src/dfinity_vue_assets/src/App.vue
@@ -5,7 +5,8 @@
 </template>
 
 <script>
-import dfinity_vue from 'ic:canisters/dfinity_vue';
+import { Actor, HttpAgent } from '@dfinity/agent';
+import { idlFactory as dfinity_vue_idl, canisterId as dfinity_vue_id } from 'dfx-generated/dfinity_vue';
 
 export default {
   data: () => {
@@ -14,6 +15,9 @@ export default {
     };
   },
   created() {
+    const agent = new HttpAgent();
+    const dfinity_vue = Actor.createActor(dfinity_vue_idl, { agent, canisterId: dfinity_vue_id });
+
     dfinity_vue.greet(window.prompt("Enter your name:")).then(greeting => {
       this.internetComputerGreeting = greeting
     });
diff --git a/src/dfinity_vue_assets/src/index.html b/src/dfinity_vue_assets/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/src/dfinity_vue_assets/src/index.js b/src/dfinity_vue_assets/src/index.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,10 +1,12 @@
 const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TerserPlugin = require("terser-webpack-plugin");
 const { VueLoaderPlugin } = require("vue-loader");
 const dfxJson = require("./dfx.json");
 
 // List of all aliases for canisters. This creates the module alias for
-// the `import ... from "ic:canisters/xyz"` where xyz is the name of a
+// the `import ... from "@dfinity/ic/canisters/xyz"` where xyz is the name of a
 // canister.
 const aliases = Object.entries(dfxJson.canisters).reduce(
   (acc, [name, _value]) => {
@@ -20,8 +22,7 @@ const aliases = Object.entries(dfxJson.canisters).reduce(
 
     return {
       ...acc,
-      ["ic:canisters/" + name]: path.join(outputRoot, name + ".js"),
-      ["ic:idl/" + name]: path.join(outputRoot, name + ".did.js"),
+      ["dfx-generated/" + name]: path.join(outputRoot, name + ".js"),
     };
   },
   {}
@@ -38,33 +39,46 @@ function generateWebpackConfigForCanister(name, info, env) {
   return {
     mode: env.development ? "development" : "production",
     entry: {
-      index: path.join(__dirname, info.frontend.entrypoint),
+      // The frontend.entrypoint points to the HTML file for this build, so we need
+      // to replace the extension to `.js`.
+      index: path.join(__dirname, info.frontend.entrypoint).replace(/\.html$/, ".js"),
     },
-    devtool: env.development ? "source-map" : "",
+    devtool: env.development ? "inline-source-map" : false,
     optimization: {
       minimize: true,
       minimizer: [new TerserPlugin()],
     },
     resolve: {
       alias: aliases,
+      extensions: [".js", ".ts", ".jsx", ".tsx"],
+      fallback: {
+        "assert": require.resolve("assert/"),
+        "buffer": require.resolve("buffer/"),
+        "events": require.resolve("events/"),
+        "stream": require.resolve("stream-browserify/"),
+        "util": require.resolve("util/"),
+      },
     },
     output: {
       filename: "[name].js",
       path: path.join(__dirname, "dist", name),
     },
-
-    // Depending in the language or framework you are using for
-    // front-end development, add module loaders to the default
-    // webpack configuration. For example, if you are using React
-    // modules and CSS as described in the "Adding a stylesheet"
-    // tutorial, uncomment the following lines:
     module: {
       rules: [
         { test: /\.vue$/, loader: "vue-loader" }
       ]
     },
     plugins: [
-      new VueLoaderPlugin()
+      new VueLoaderPlugin(),
+      new HtmlWebpackPlugin({
+        template: path.join(__dirname, info.frontend.entrypoint),
+        filename: 'index.html',
+        chunks: ['index'],
+      }),
+      new webpack.ProvidePlugin({
+        Buffer: [require.resolve('buffer/'), 'Buffer'],
+        process: require.resolve('process/browser'),
+      }),
     ],
   };
 }
diff --git a/yarn.lock b/yarn.lock
