From 52bb0df55727533cef4ee1d743a8d6476f7d4094 Mon Sep 17 00:00:00 2001
From: Felipe Guizar Diaz <felipegaiacharly@gmail.com>
Date: Tue, 27 Aug 2019 23:12:41 -0500
Subject: [PATCH] Add renderInPlaceholder function

---
 package.json | 13 ++++++++-----
 src/index.js | 24 ++++++++++++++++++------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 17f5fd5..c49e041 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hypernova-svelte",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Svelte Bindings for Hypernova",
   "main": "lib/index.js",
   "author": "Felipe Guizar Diaz <felipegaiacharly@gmail.com>",
@@ -20,12 +20,15 @@
     "lint": "eslint src",
     "build": "babel src -d lib"
   },
-  "peerDependencies": {
-    "hypernova": "^2.5.0"
+  "dependencies": {
+    "hypernova": "^2.5.0",
+    "nova-helpers": "^1.0.1-alpha.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-preset-airbnb": "^2.5.3",
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
+    "babel-preset-airbnb": "^4.0.1",
     "eslint": "^5.14.1",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.16.0"
diff --git a/src/index.js b/src/index.js
index ea335e5..e3ae930 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,22 @@
 import hypernova, { serialize, load } from 'hypernova';
+import { findNode, getData } from 'nova-helpers';
 
-export const something = {};
+const mountComponent = (Component, node, data) => {
+  return new Component({
+    target: node,
+    props: data,
+    hydrate: true,
+  });
+};
+
+export const renderInPlaceholder = (name, Component, id) => {
+  const node = findNode(name, id);
+  const data = getData(name, id);
+
+  if (node && data) {
+    mountComponent(Component, node, data);
+  }
+};
 
 export const renderSvelte = (name, Component) => hypernova({
   server() {
@@ -17,11 +33,7 @@ export const renderSvelte = (name, Component) => hypernova({
       payloads.forEach((payload) => {
         const { node, data: propsData } = payload;
 
-        return new Component({
-          target: node,
-          props: propsData,
-          hydrate: true,
-        });
+        return mountComponent(Component, node, propsData);
       });
     }