Rust Webassembly + Laravel 5, DOM操作する例 #Rust #Webassembly #javascript #php #Laravel

■ 概要:

前の Rust Webassembly (下記 wasm) 関係になり
Laravel5.8 でCRUD実装の、一部表示機能をwasm で実装する例となります。
実装部分は、expressと似ている内容となります。

■ 前の関連ページ, express版

https://note.com/knaka0209/n/n311677aa156a

■ 環境

Rust
rustc 1.46.0
cargo 1.46.0
wasm-pack
Laravel 5.8

■ プロジェクト作成、ビルド

cargo generate --git https://github.com/rustwasm/wasm-pack-template

wasm-pack build --target=web

■ 実装など

・Cargo.toml

[package]
name = "wasm-crud-1"
version = "0.1.0"
authors = ["naka"]
edition = "2018"

[lib]
crate-type = ["cdylib", "rlib"]

[features]
default = ["console_error_panic_hook"]

[dependencies]
wasm-bindgen = "0.2.63"
js-sys = "0.3.44"

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.6", optional = true }

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.5", optional = true }


[dependencies.web-sys]
version = "0.3.4"
features = [
 'console',
 'Document',
 'Element',
 'HtmlElement',
 'Node',
 'Window',
]

[dev-dependencies]
wasm-bindgen-test = "0.3.13"

[profile.release]
# Tell `rustc` to optimize for small code size.
opt-level = "s"

・Rust ,  lib.rs
id指定し、DOM追加します。

#[wasm_bindgen]
pub fn task_row(id_name: &str, title: &str, id_val: &str) -> Result<(), JsValue>{
   let document = web_sys::window().unwrap().document().unwrap();
   let entry_point = document.get_element_by_id(id_name).unwrap();
   let val = document.create_element("li")?;
   let s_title = format!("<h3 class='h3_title'>{}</h3>", title ); 
   let a_title = format!("<a href='/wasm_tasks/{}'>{}</a>", id_val, s_title ); 
   let s_id = format!("<span>ID :{}</span>", id_val ); 
   let btn_edit = format!("<a href='/wasm_tasks/{}/edit'> [ edit ] </a>", id_val ); 
   let s_elm = format!("<div class='div_post_wrap'>{}{}{}<hr /></div>", a_title, s_id ,btn_edit ); 
//console::log_1(&JsValue::from_str( &s_elm ));
   val.set_inner_html(&s_elm );
   entry_point.append_child(&val)?;

   Ok(())
}

■ Laravel, blade

CRUDリストの画面
resources/views/wasm/tasks/index.blade.php

JS配列から、wasm でDOM追加します。

<script type="module">
import init, * as wasm from '/pkg/wasm_crud_1.js';
var task_items = [];

var TaskIndex = {
   get_items: async function(){
       await axios.get("/api/apitasks/get_tasks").then(res =>  {
           task_items = res.data
       })
       this.dispRow();
   },
   dispRow: async function(){
       await init();
       if(task_items instanceof Array){
//            console.log(task_items );
           task_items.map(function(object, index){
               wasm.task_row("ul_post_wrap", String(object.title), String(object.id));
           })
       }
   },
}
//
$(function(){
   TaskIndex.get_items();
});
</script>

・ルーティング、 web.php

Route::resource('wasm_tasks', 'WasmTaskController');

■ 参考のコード

・Rust コード

kuc-arc-f/wasm-crud-1

・Laravel

kuc-arc-f/lara58a_11wasm_tasks