From 3ce2300e2fae4c42509802969e24f88396a721f9 Mon Sep 17 00:00:00 2001
From: Kari Ikonen <mr.kari.ikonen@gmail.com>
Date: Sun, 10 Nov 2019 22:45:30 +0200
Subject: [PATCH] FIX more advanced test

---
 app/javascript/app.svelte            |  3 ++-
 app/javascript/packs/hello_svelte.js | 19 ++++++++++---------
 app/views/svelte_test/hello.haml     |  8 +++++++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/javascript/app.svelte b/app/javascript/app.svelte
index ad47e12..b27e119 100644
--- a/app/javascript/app.svelte
+++ b/app/javascript/app.svelte
@@ -1,5 +1,6 @@
 <script>
   export let name;
+  export let message;
 </script>
 
 <style>
@@ -8,4 +9,4 @@
   }
 </style>
 
-<h1>Hello {name}!</h1>
\ No newline at end of file
+<h1>Hello me too {name} via {message}!</h1>
diff --git a/app/javascript/packs/hello_svelte.js b/app/javascript/packs/hello_svelte.js
index a914a9d..2cba813 100644
--- a/app/javascript/packs/hello_svelte.js
+++ b/app/javascript/packs/hello_svelte.js
@@ -8,13 +8,14 @@
 import App from '../app.svelte'
 
 document.addEventListener('DOMContentLoaded', () => {
-  const app = new App({
-    target: document.body,
-    props: {
-      name: 'Svelte'
-    }
+  _.each(document.querySelectorAll('.svelte-hello'), function(el) {
+    const app = new App({
+      target: el,
+      props: {
+        name: 'Svelte',
+        message: el.dataset.msg
+      }
+    });
+    //  window.app = app;
   });
-
-  window.app = app;
-})
-
+});
diff --git a/app/views/svelte_test/hello.haml b/app/views/svelte_test/hello.haml
index 4147ab7..568f8a6 100644
--- a/app/views/svelte_test/hello.haml
+++ b/app/views/svelte_test/hello.haml
@@ -1,4 +1,10 @@
 = javascript_pack_tag 'hello_svelte'
 = stylesheet_pack_tag 'hello_svelte'
 
-hello
+<h1>hello</h2>
+
+Svelte hello appears here
+.svelte-hello{ data: { msg: 'hello 1' } }
+
+and this is below it
+.svelte-hello{ data: { msg: 'hello 2' } }