Split element into components for WRAP action instead of whole component

examples/flit.toml

@@ -5,10 +5,17 @@ template ='''
 	<button id="start_game">Start Game</button>
 </div>
 <script>
-let content = `{{{}}}`;
 document.addEventListener('DOMContentLoaded', () => {
   	document.getElementById('start_game').addEventListener('click', function() {
-  		this.innerHTML = content
+  		let element = document.createElement('{{{TAG}}}');
+  		let attr_string = `{{{ATTR}}}`
+  		attr_string.split(' ').forEach(function(attr) {
+  			let attr_array = attr.split('=');
+  			element.setAttribute(attr_array[0], attr_array[1].slice(1, -1));
+  		});
+  		element.innerHTML = `{{{CONTENT}}}`;
+  		document.body.appendChild(element);
+
   	});
 });
 </script>'''
\ No newline at end of file

src/main.rs

@@ -2,9 +2,12 @@ use clap::Parser;
 use lol_html::html_content::ContentType;
 use lol_html::{element, rewrite_str, text, RewriteStrSettings};
 use serde::{Deserialize, Serialize};
+use std::borrow::{Borrow, BorrowMut};
+use std::cell::RefCell;
 use std::collections::HashMap;
 use std::fs::File;
 use std::io::{Read, Write};
+use std::rc::Rc;
 use std::sync::{Arc, Mutex};
 use thiserror::Error;
 
@@ -78,12 +81,14 @@ fn main() -> AppResult<()> {
 				.into_iter()
 				.flat_map(|(selector, op)| match op {
 					ConfigEntry::Wrap { template } => {
-						let el_buffer = Arc::new(Mutex::new(String::new()));
-						let txt_buffer = el_buffer.clone();
+						let mut tag_name = Arc::new(Mutex::new(String::new()));
+						let mut attributes = Arc::new(Mutex::new(String::new()));
+						let mut content = Arc::new(Mutex::new(String::new()));
 
+						let el_content = content.clone();
 						vec![
 							element!(selector, move |e| {
-								el_buffer.lock().unwrap().clear();
+								tag_name.lock().unwrap().push_str(&e.tag_name());
 
 								let attr_list = e
 									.attributes()
@@ -92,27 +97,27 @@ fn main() -> AppResult<()> {
 									.collect::<Vec<String>>()
 									.join(" ");
 
-								el_buffer.lock().unwrap().push_str(&format!(
-									"<{} {}>",
-									e.tag_name(),
-									attr_list
-								));
-
+								attributes.lock().unwrap().push_str(&attr_list);
 								e.remove();
-								let inner_buffer = el_buffer.clone();
+
 								let inner_template = template.clone();
+								let inner_tag_name = tag_name.clone();
+								let inner_attr = attributes.clone();
+								let inner_content = el_content.clone();
 								e.on_end_tag(move |end_tag| {
-									inner_buffer
-										.lock()
-										.unwrap()
-										.push_str(&format!("</{}>", end_tag.name()));
-									end_tag.after(
-										&inner_template.replace(
-											"{{{}}}",
-											inner_buffer.lock().unwrap().as_str(),
-										),
-										ContentType::Html,
+									let mut value = inner_template.replace(
+										"{{{TAG}}}",
+										inner_tag_name.clone().lock().unwrap().as_str(),
+									);
+									let mut value = value
+										.replace("{{{ATTR}}}", inner_attr.lock().unwrap().as_str());
+									let mut value = value.replace(
+										"{{{CONTENT}}}",
+										inner_content.lock().unwrap().as_str(),
 									);
+
+									end_tag.after(&value, ContentType::Html);
+
 									end_tag.remove();
 									Ok(())
 								})
@@ -120,7 +125,7 @@ fn main() -> AppResult<()> {
 								Ok(())
 							}),
 							text!(selector, move |t| {
-								txt_buffer.lock().unwrap().push_str(t.as_str());
+								content.lock().unwrap().push_str(t.as_str());
 								t.remove();
 								Ok(())
 							}),