Add "vos-pass" commponent boilerplate

virto-network · Aug 19, 2024 · 3029264 · 3029264
1 parent 231e0df
commit 3029264
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 0 deletions.
diff --git a/vos-pass/.gitignore b/vos-pass/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/vos-pass/Cargo.toml b/vos-pass/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "vos-pass"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+wasm-bindgen = { version = "0.2.92", default-features = false }
+wasm-bindgen-futures = "0.4.42"
+
+[dependencies.web-sys]
+version = "0.3.69"
+features = []
+
+[lib]
+crate-type = ["cdylib"]
diff --git a/vos-pass/index.html b/vos-pass/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Pass component</title>
+  <script async src="dist/pass.js" type="module"></script>
+  <style>
+    html,
+    body {
+      all: initial;
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  </style>
+</head>
+
+<body>
+  <vos-pass>
+    <button onclick="this.parentElement.connect()">Connect</button>
+  </vos-pass>
+</body>
+
+</html>
diff --git a/vos-pass/justfile b/vos-pass/justfile
@@ -0,0 +1,6 @@
+build:
+    @mkdir -p dist
+    cargo build --release --target wasm32-unknown-unknown
+    @cp ./target/wasm32-unknown-unknown/release/vos_pass.wasm dist/
+    wasm-bindgen --out-dir dist --target web --no-typescript --remove-name-section dist/vos_pass.wasm
+    @cp src/pass.js dist/
diff --git a/vos-pass/src/lib.rs b/vos-pass/src/lib.rs
@@ -0,0 +1,14 @@
+pub fn add(left: u64, right: u64) -> u64 {
+    left + right
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn it_works() {
+        let result = add(2, 2);
+        assert_eq!(result, 4);
+    }
+}
diff --git a/vos-pass/src/pass.js b/vos-pass/src/pass.js
@@ -0,0 +1,53 @@
+// utilities
+const tagFn = fn => (strings, ...parts) => fn(parts
+	.reduce((tpl, value, i) => `${tpl}${strings[i]}${value}`, '')
+	.concat(strings[parts.length]))
+const html = tagFn(s => new DOMParser()
+	.parseFromString(`<template>${s}</template>`, 'text/html')
+	.querySelector('template'))
+const css = tagFn(s => {
+	let style = new CSSStyleSheet()
+	style.replaceSync(s)
+	return style
+})
+
+const template = html`
+<slot></slot>
+<dialog>
+  <input id="username" placeholder="foo" />
+  <button>submit</button>
+</dialog>
+`
+const style = css`
+:host {
+  
+}
+`
+
+/*
+ * Pass connects you to the VirtoOS
+ */
+export class Pass extends HTMLElement { 
+  static tag = 'vos-pass'
+
+  #vos = null
+  #$modal
+
+  constructor() {
+    super()
+    let shadow = this.attachShadow({mode: 'closed'})
+    shadow.append(template.content.cloneNode(true))
+    shadow.adoptedStyleSheets = [style]
+    this.#$modal = shadow.querySelector('dialog')
+  }
+
+  connectedCallback() {
+    console.log('init')
+    this.#vos = new Worker('./vos_pass.js', { type: 'module' })
+  }
+
+  connect() {
+    this.#$modal.openModal()
+  }
+}
+customElements.define(Pass.tag, Pass)