Add web3js-vue-dapp-min Template (#10)

* Add web3js-vue-dapp-min Template

* Fix Test Workflow

Author: danforbes

.github/workflows/web3js-vue-dapp-min.yml

@@ -0,0 +1,22 @@
+name: web3js-vue-dapp-min Build & Test
+on:
+    push:
+        branches: [ main ]
+    pull_request:
+        branches: [ main ]
+        types: [ opened, reopened, synchronize ]
+jobs:
+    build:
+        name: Build & Test
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: templates/min/web3js-vue-dapp-min
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                node-version: 20
+            - run: npm i
+            - run: npm run build
+            - run: npm run test:unit

README.md

@@ -13,7 +13,7 @@ for their selection.
 Usage: npx create-web3js-dapp [options]
 
 Options:
-  -f, --framework <name>  front-end framework (choices: "angular", "react")
+  -f, --framework <name>  front-end framework (choices: "angular", "react", "vue")
   -t, --template <type>   template type (choices: "demonstration", "minimal")
   -h, --help              display help for command
 ```
@@ -32,3 +32,4 @@ This utility supports the following front-end frameworks:
 
 - [Angular](https://angular.dev/) (only available as a minimal template)
 - [React](https://react.dev/)
+- [Vue](https://vuejs.org/) (only available as a minimal template)

src/index.ts

@@ -16,6 +16,7 @@ program
     new Option("-f, --framework <name>", "front-end framework").choices([
       "angular",
       "react",
+      "vue",
     ]),
   )
   .addOption(
@@ -71,6 +72,10 @@ async function inquire(cliOpts: OptionValues): Promise<Options> {
           name: "React",
           value: Framework.React,
         },
+        {
+          name: "Vue",
+          value: Framework.Vue,
+        },
       ],
     });
   }

src/lib.spec.ts

@@ -111,3 +111,49 @@ test("getSelectedOption(react, demonstration)", () => {
     "unexpected project location",
   );
 });
+
+test("getSelectedOption(vue, minimal)", () => {
+  const opts: Options = {
+    framework: Framework.Vue,
+    template: TemplateType.Minimal,
+  };
+  const result: SelectedOption = getSelectedOption(opts);
+
+  const expectedName: string = "web3js-vue-dapp-min";
+  assert.strictEqual(
+    result.projectName,
+    expectedName,
+    "unexpected project name",
+  );
+
+  const expectedLocation: string = join(
+    __dirname,
+    "..",
+    "templates",
+    "min",
+    expectedName,
+  );
+  assert.strictEqual(
+    result.projectLocation,
+    expectedLocation,
+    "unexpected project location",
+  );
+});
+
+test("getSelectedOption(vue, demonstration)", () => {
+  const opts: Options = {
+    framework: Framework.Vue,
+    template: TemplateType.Demonstration,
+  };
+  try {
+    const result: SelectedOption = getSelectedOption(opts);
+  } catch (e) {
+    assert.strictEqual(
+      e.toString(),
+      "Error: Vue demonstration dApp has not yet been implemented.",
+    );
+    return;
+  }
+
+  assert.strictEqual(true, false);
+});

src/lib.ts

@@ -40,5 +40,22 @@ export function getSelectedOption(opts: Options): SelectedOption {
       );
       return { projectName, projectLocation };
     }
+    case Framework.Vue: {
+      if (opts.template === TemplateType.Demonstration) {
+        throw new Error(
+          "Vue demonstration dApp has not yet been implemented.",
+        );
+      }
+
+      const projectName: string = "web3js-vue-dapp-min";
+      const projectLocation: string = join(
+        __dirname,
+        "..",
+        "templates",
+        "min",
+        projectName,
+      );
+      return { projectName, projectLocation };
+    }
   }
 }

src/types.ts

@@ -1,6 +1,7 @@
 export enum Framework {
   Angular = "angular",
   React = "react",
+  Vue = "vue",
 }
 
 export enum TemplateType {

templates/min/web3js-vue-dapp-min/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

templates/min/web3js-vue-dapp-min/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

templates/min/web3js-vue-dapp-min/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

templates/min/web3js-vue-dapp-min/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 web3js-react-dapp-min
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

templates/min/web3js-vue-dapp-min/README.md

@@ -0,0 +1,28 @@
+# Web3.js + Vue Minimal dApp Template
+
+This project is a minimal template for using [Web3.js](https://web3js.org/) with
+[Vue](https://vuejs.org/).
+
+- [Web3.js Docs](https://docs.web3js.org/)
+- [React Docs](https://vuejs.org/guide/introduction.html)
+
+This project was bootstrapped with
+[`create-vue`](https://github.com/vuejs/create-vue).
+
+## Getting Started
+
+Install the project dependencies with a dependency manager like npm or Yarn. Use
+`npm run dev` to start a local development server and navigate to
+http://localhost:5173/ to view the dApp.
+
+## Project Design
+
+This project defines a service in
+[./src/web3/web3-service.ts](./src/web3/web3-service.ts) that exposes an
+instance of the [`Web3` class](https://docs.web3js.org/api/web3/class/Web3) and
+an [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) provider, if present. If
+the provider is present, it's used by the `Web3` instance to communicate with
+the network and the service registers a
+[`chainChanged` handler](https://docs.metamask.io/wallet/reference/provider-api/#chainchanged)
+that reloads the page. Refer to [./src/App.vue](./src/App.vue) for an example of
+using the service.

templates/min/web3js-vue-dapp-min/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+import type { EIP1193Provider, Web3APISpec } from 'web3';
+
+declare global {
+  interface Window {
+    ethereum?: EIP1193Provider<Web3APISpec>;
+  }
+}

templates/min/web3js-vue-dapp-min/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web3.js + Vue Minimal dApp Template</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>