Feature/wasm pack

.github/workflows/rust.yml

@@ -2,10 +2,11 @@ name: Rust
 
 on:
   push:
-    branches: [main]
+    branches: [feature/wasm-pack]
     tags:
       - 'v*'
       - 'cli-v*'
+      - 'wasm-v*'
   pull_request:
     branches: [main]
 
@@ -61,6 +62,32 @@ jobs:
           cd cli/src
           cargo clippy -- -D warnings
 
+  build-wasm:
+    runs-on: ubuntu-latest
+    needs: build-library
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          toolchain: stable
+          override: true
+      - name: Build WASM
+        run: |
+          cd wasm
+          cargo build --verbose
+      - name: Run CLI Tests
+        run: |
+          cd wasm
+          cargo test --verbose
+      - name: Lint CLI with Clippy
+        run: |
+          rustup component add clippy
+          cd wasm
+          cargo clippy -- -D warnings
+
+
   publish-library:
     needs: build-library
     runs-on: ubuntu-latest
@@ -82,7 +109,7 @@ jobs:
   publish-cli:
     needs: build-cli
     runs-on: ubuntu-latest
-    if: startsWith(github.ref_name, 'cli-v')
+    if: startsWith(github.ref, 'refs/tags/cli-v')
     steps:
       - uses: actions/checkout@v2
       - name: Set up Rust
@@ -95,3 +122,42 @@ jobs:
         run: |
           cd cli/src
           cargo publish --token ${{ secrets.CRATESTOKEN }}
+
+
+  publish-wasm:
+    needs: build-wasm
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+    if: startsWith(github.ref, 'refs/tags/wasm-v')
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+          profile: minimal
+          override: true
+      - name: Install wasm-pack
+        run: cargo install wasm-pack
+      - name: Build wasm package
+        run: |
+          cd wasm
+          wasm-pack build --target bundler
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+          token: ${{ secrets.NPM_TOKEN }}
+      - name: Install npm dependencies
+        run: |
+          cd wasm/pkg
+          npm install
+          npm ci
+      - name: Publish to npm
+        run: | 
+          cd wasm/pkg
+          npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Cargo.toml

@@ -28,15 +28,20 @@ bindgen = "0.69.4"
 [features]
 std = []
 plaintext-before-extension = []
+serde = ["dep:serde", "std", "arrayvec/serde", "bitflags/serde"]
 
 [profile.release]
 opt-level = 'z'   # Optimize for size
 lto = true        # Enable Link Time Optimization
 codegen-units = 1 # Reduce codegen units to improve optimizations
 
+[profile.release.package."m-bus-parser-wasm-pack"]
+opt-level = "s"
+
 [dependencies]
+serde = { version = "1.0", features = ["derive"], optional = true }
 bitflags = "2.4.2"
-arrayvec = "0.7.4"
+arrayvec = { version = "0.7.4", optional = false, default-features = true }
 
 [workspace]
-members = ["cli"]
+members = ["cli", "wasm"]

README.md

@@ -20,6 +20,22 @@ Furthermore, the Open Metering System (OMS) Group has published a specification
  such as a no longer maitained [ m-bus encoder and decoder by rscada](https://github.com/rscada/libmbus) written in **c**, [jMbus](https://github.com/qvest-digital/jmbus) written in **java**,[Valley.Net.Protocols.MeterBus](https://github.com/sympthom/Valley.Net.Protocols.MeterBus/) written in **C#**, [tmbus](https://dev-lab.github.io/tmbus/) written in javascript or [pyMeterBus](https://github.com/ganehag/pyMeterBus) written in python.
 
 
+## Dependants and Deployments
+
+### NPM Wasm Package
+![npm](https://img.shields.io/npm/dm/m-bus-parser-wasm-pack.svg) ![npm](https://img.shields.io/npm/v/m-bus-parser-wasm-pack.svg)
+
+The parser has been published as an npm package and can be used in the browser. An example of this can be seen under the url www.maebli.github.io/m-bus-parser/ [https://maebli.github.io/m-bus-parser/](https://maebli.github.io/m-bus-parser/).
+
+The source is in the wasm folder in this repos 
+
+
+### CLI rust crate
+[![Crates.io](https://img.shields.io/crates/v/m-bus-parser-cli.svg)](https://crates.io/crates/m-bus-parser-cli) [![Downloads](https://img.shields.io/crates/d/m-bus-parser-cli.svg)](https://crates.io/crates/m-bus-parser-cli)
+
+There is a cli, the source is in the sub folder "cli" and is published on crates.io [https://crates.io/crates/m-bus-parser-cli](https://crates.io/crates/m-bus-parser-cli).
+
+
 ### Visualization of Library Function
 
 Do not get confused about the different types of frame types. The most important one to understand at first is the `LongFrame` which is the most common frame type. The others are for example for searching for a slave or for setting the primary address of a slave. This is not of primary intrest for most users. Visualization was made with the help of the tool [excalidraw](https://excalidraw.com/).

cli/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "m-bus-parser-cli"
-version = "0.0.4"
+version = "0.0.3"
 edition = "2021"
 description = "A cli to use the library for parsing M-Bus frames"
 license = "MIT"

docs/index.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Wired M-Bus Parser</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/languages/json.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #ffffff;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+
+        .header img {
+            margin-right: 10px;
+        }
+
+        h1 {
+            color: #333;
+            margin: 0;
+        }
+
+        form {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+        }
+
+        textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+            margin-bottom: 10px;
+            font-family: monospace;
+        }
+
+        input[type="button"] {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        input[type="button"]:hover {
+            background-color: #45a049;
+        }
+
+        pre {
+            background: #f0f0f0;
+            padding: 10px;
+            border-radius: 4px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        #output {
+            margin-top: 20px;
+            max-width: 600px;
+            margin: 20px auto 0;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="header">
+        <img id="banner" src="meter.png" alt="Meter Banner">
+        <h1>Wired M-Bus Parser with WASM</h1>
+    </div>
+    <form>
+        <label for="inputstring">Input String:</label>
+        <textarea rows="5" cols="80" id="inputstring"></textarea>
+        <input id="m_bus_parse" type="button" value="Parse JSON" />
+    </form>
+    <pre id="output"></pre>
+    <script type="module">
+        import init, { m_bus_parse } from "./m_bus_parser_wasm_pack.js";
+
+        async function setup() {
+            await init(); // Ensure the WASM module is initialized
+
+            document.getElementById('m_bus_parse').addEventListener('click', () => {
+                const inputString = document.getElementById('inputstring').value;
+                const result = m_bus_parse(inputString);
+                const formattedResult = JSON.stringify(JSON.parse(result), null, 2); // Pretty-print the JSON
+                const outputElement = document.getElementById("output");
+                outputElement.textContent = formattedResult;
+                hljs.highlightElement(outputElement); // Apply syntax highlighting
+            });
+        }
+
+        setup(); // Set up the event listeners after the page is loaded
+    </script>
+</body>
+
+</html>