Initial commit

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer",
+    "angular.ng-template"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

README.md

@@ -0,0 +1,25 @@
+# proto-creator
+
+A protobuf message GUI editor. This allows protobuf messages (including JSON formatted messages) stored on disk to be created and edited based on `.proto` definnition files.
+
+## Contributing
+
+### Requirements
+
+Rust and Node must be installed at a minimum.
+
+### Build
+
+To build an installer, run `bun run tauri build`, or whatever whatever the equivalent binary is for your node runtime.
+
+### Code Formatting
+
+Use rust-analyzer and you won't need to worry about rust formatting, please use prettier for formatting front-end/angular related files.
+
+### Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) + [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template).
+
+### Troubleshooting
+
+If building in VS Code on macOS, and you get a message `Error failed to bundle project: error running bundle_dmg.sh`, run the build in a terminal outside of VS Code. This error is occurring as VS Code doesn't have the required file permissions.

angular.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "cli": {
+    "analytics": false
+  },
+  "projects": {
+    "proto-creator": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/proto-creator",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "assets": ["src/assets"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "port": 1420
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "proto-creator:build:production"
+            },
+            "development": {
+              "buildTarget": "proto-creator:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "proto-creator",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "tauri": "tauri"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "~18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@tauri-apps/api": "^1",
+    "protobufjs": "~7.3.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular/build": "^18.0.1",
+    "@angular/cli": "^18.0.1",
+    "@angular/compiler-cli": "^18.0.0",
+    "@tauri-apps/cli": "^1",
+    "@types/jasmine": "~5.1.0",
+    "@types/protobufjs": "^6.0.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.4.5"
+  }
+}

src-tauri/.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas

src-tauri/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "proto-creator"
+version = "0.0.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[build-dependencies]
+tauri-build = { version = "1", features = [] }
+
+[dependencies]
+tauri = { version = "1", features = [ "fs-remove-dir", "dialog-open", "fs-read-dir", "fs-read-file", "dialog-confirm", "fs-create-dir", "dialog-message", "fs-remove-file", "dialog-ask", "fs-write-file", "shell-open"] }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+
+[features]
+# This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
+custom-protocol = ["tauri/custom-protocol"]

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/src/main.rs

@@ -0,0 +1,8 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    tauri::Builder::default()
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,64 @@
+{
+  "build": {
+    "beforeDevCommand": "bun run start",
+    "beforeBuildCommand": "bun run build",
+    "devPath": "http://localhost:1420",
+    "distDir": "../dist/proto-creator/browser"
+  },
+  "package": {
+    "productName": "Piv's Buf",
+    "version": "0.0.0"
+  },
+  "tauri": {
+    "allowlist": {
+      "all": false,
+      "dialog": {
+        "all": false,
+        "ask": true,
+        "confirm": true,
+        "message": true,
+        "open": true,
+        "save": false
+      },
+      "fs": {
+        "all": false,
+        "copyFile": false,
+        "createDir": true,
+        "exists": false,
+        "readDir": true,
+        "readFile": true,
+        "removeDir": true,
+        "removeFile": true,
+        "renameFile": false,
+        "scope": [],
+        "writeFile": true
+      },
+      "shell": {
+        "all": false,
+        "open": true
+      }
+    },
+    "windows": [
+      {
+        "title": "Piv's Buf",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    },
+    "bundle": {
+      "active": true,
+      "targets": "all",
+      "identifier": "dev.michaelpivato",
+      "icon": [
+        "icons/32x32.png",
+        "icons/128x128.png",
+        "icons/128x128@2x.png",
+        "icons/icon.icns",
+        "icons/icon.ico"
+      ]
+    }
+  }
+}

src/app/app.component.html

@@ -0,0 +1,12 @@
+<mat-toolbar><span>BufPiv</span></mat-toolbar>
+<mat-sidenav-container>
+  <mat-sidenav>
+    <app-file-tree [files]="files()"></app-file-tree>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    @if (!selectedDirectory) {
+    <button mat-button (click)="selectDirectory()">Open Folder</button>
+    }@else { }
+  </mat-sidenav-content>
+  <!-- TODO: Proto selector (add/remove proto definitinos, select definition for current file) on right side -->
+</mat-sidenav-container>

src/app/app.component.ts

@@ -0,0 +1,59 @@
+import { CommonModule } from "@angular/common";
+import { Component, signal } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { RouterOutlet } from "@angular/router";
+import { message, open } from "@tauri-apps/api/dialog";
+import { FileEntry, readDir } from "@tauri-apps/api/fs";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatTreeModule } from "@angular/material/tree";
+import {
+  FileOrFolder,
+  FileTreeComponent,
+} from "./file-tree/file-tree.component";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  templateUrl: "./app.component.html",
+  styleUrl: "./app.component.css",
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    MatSidenavModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatTreeModule,
+    FileTreeComponent,
+  ],
+})
+export class AppComponent {
+  protected selectedDirectory: string | null = null;
+  protected files = signal<FileOrFolder[]>([]);
+
+  async selectDirectory() {
+    const selectedDirectory = await open({
+      directory: true,
+      multiple: false,
+    });
+    if (Array.isArray(selectedDirectory)) {
+      message("Only a single folder can be selected at a time");
+    } else {
+      this.selectedDirectory = selectedDirectory;
+    }
+    if (this.selectedDirectory) {
+      const entries = await readDir(this.selectedDirectory, {
+        recursive: true,
+      });
+      this.files.set(entries.map((entry) => this.mapEntry(entry)));
+    }
+  }
+
+  private mapEntry(entry: FileEntry): FileOrFolder {
+    return {
+      isDirectory: entry.children != null,
+      name: entry.name || "",
+      children: entry.children?.map((entry) => this.mapEntry(entry)),
+    };
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from "@angular/core";
+import { provideRouter } from "@angular/router";
+import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
+import { routes } from "./app.routes";
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes), provideAnimationsAsync()],
+};

src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from "@angular/router";
+
+export const routes: Routes = [];

src/app/editor/editor.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/app/editor/editor.component.html

@@ -0,0 +1 @@
+<textarea [(ngModel)]="fileContents" disabled></textarea>

src/app/editor/editor.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { readTextFile } from "@tauri-apps/api/fs";
+import { load, parse } from "protobufjs";
+
+@Component({
+  selector: "app-editor",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: "./editor.component.html",
+  styleUrl: "./editor.component.css",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditorComponent {
+  fileContents = input<string>();
+  selectedProtoPath = input<string>();
+
+  async loadProtoDefinition() {
+    try {
+      const protoPath = this.selectedProtoPath();
+      if (protoPath) {
+        const protoContents = await readTextFile(protoPath);
+        const definition = await parse(protoContents);
+        console.log(definition);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}

src/app/file-tree/file-tree.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/app/file-tree/file-tree.component.ts

@@ -0,0 +1,95 @@
+import { DataSource } from "@angular/cdk/collections";
+import { FlatTreeControl } from "@angular/cdk/tree";
+import { CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Signal,
+  computed,
+  input,
+  output,
+} from "@angular/core";
+import {
+  MatTreeFlatDataSource,
+  MatTreeFlattener,
+  MatTreeModule,
+} from "@angular/material/tree";
+import { MatIconModule } from "@angular/material/icon";
+
+export interface FileOrFolder {
+  isDirectory: boolean;
+  name: string;
+  children?: FileOrFolder[];
+}
+
+interface FileNode {
+  file: FileOrFolder;
+  expandable: boolean;
+  level: number;
+}
+
+@Component({
+  selector: "app-file-tree",
+  standalone: true,
+  imports: [CommonModule, MatTreeModule, MatIconModule],
+  template: `<mat-tree [dataSource]="dataSource()" [treeControl]="treeControl">
+    <mat-tree-node
+      *matTreeNodeDef="let node"
+      matTreeNodePadding
+      (click)="fileSelected.emit(node.file)"
+    >
+      <button mat-icon-button disabled></button>
+      {{ node.file.name }}
+    </mat-tree-node>
+    <mat-tree-node *matTreeNodeDef="let node; when: hasChild">
+      <button
+        mat-icon-button
+        matTreeNodePadding
+        [attr.aria-label]="'Toggle ' + node.file.name"
+      >
+        <mat-icon class="mat-icon-rtl-mirror">
+          @if (treeControl.isExpanded(node)) { expand_more } @else {
+          chevron_right }
+        </mat-icon>
+      </button>
+      {{ node.name }}
+    </mat-tree-node>
+  </mat-tree>`,
+  styleUrl: "./file-tree.component.css",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileTreeComponent {
+  files = input<FileOrFolder[]>([]);
+
+  fileSelected = output<FileOrFolder>();
+
+  protected hasChild = (_: number, node: FileNode) => node.expandable;
+
+  private _transformer = (node: FileOrFolder, level: number) => ({
+    expandable: !!node.children && node.children.length > 0,
+    file: node,
+    level: level,
+  });
+
+  protected treeControl = new FlatTreeControl<FileNode>(
+    (node) => node.level,
+    (node) => node.expandable
+  );
+
+  private treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    (node) => node.level,
+    (node) => node.expandable,
+    (node) => node.children
+  );
+
+  // Use computed signals to create datasource
+  protected dataSource = computed(() => {
+    const dataSource = new MatTreeFlatDataSource(
+      this.treeControl,
+      this.treeFlattener
+    );
+    dataSource.data = this.files();
+    return dataSource;
+  });
+}

src/app/message.model.ts

@@ -0,0 +1,11 @@
+import { Field as FieldDescriptor } from "protobufjs";
+
+interface Field<T> {
+  fieldDescriptor: FieldDescriptor;
+  value?: T;
+}
+
+interface Message {
+  // messageDescriptor:
+  fields: Field<any>[];
+}

src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Tauri + Angular</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

src/main.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from "@angular/platform-browser";
+import { appConfig } from "./app/app.config";
+import { AppComponent } from "./app/app.component";
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);

tsconfig.app.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

tsconfig.json

@@ -0,0 +1,30 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}