Co-authored-by: Johnny Chan <[email protected]>

Author: katherinek123

package-lock.json

@@ -28,6 +28,7 @@
     "@ssthouse/vue3-tree-chart": "^0.2.3",
     "core-js": "^3.21.1",
     "dotenv": "^16.0.0",
+    "electron-deeplink": "^1.0.10",
     "fs-extra": "^10.0.0",
     "http": "^0.0.1-security",
     "https": "^1.0.0",

package.json

@@ -1,5 +1,5 @@
 import { app, BrowserWindow, nativeTheme, dialog, ipcMain } from "electron";
-// import { Deeplink } from "electron-deeplink";
+import { Deeplink } from "electron-deeplink";
 import isDev from "electron-is-dev";
 import path from "path";
 import os from "os";
@@ -19,7 +19,7 @@ try {
       path.join(app.getPath("userData"), "DevTools Extensions")
     );
   }
-} catch (_) {}
+} catch (_) { }
 
 let mainWindow;
 // Added

src-electron/electron-main.js

@@ -1,21 +1,21 @@
 export function useCreateComponent(importObj) {
   const createComponent = (importObj) => {
     let imported = false;
-    if (importObj.hasOwnProperty('componentName')){
+    if (importObj.hasOwnProperty('componentName')) {
       imported = true;
       //Check if state and actions on import exist in the store. If not, add them.
-      for (let i = 0; i < importObj.actions.length; i++){
-        if (!this.userActions.includes(importObj.actions[i])){
+      for (let i = 0; i < importObj.actions.length; i++) {
+        if (!this.userActions.includes(importObj.actions[i])) {
           this.createAction(importObj.actions[i])
         }
       }
-      for (let i = 0; i < importObj.state.length; i++){
-        if (!this.userState.includes(importObj.state[i])){
+      for (let i = 0; i < importObj.state.length; i++) {
+        if (!this.userState.includes(importObj.state[i])) {
           this.createState(importObj.state[i])
         }
       }
-      for (let i = 0; i < importObj.props.length; i++){
-        if (!this.userProps.includes(importObj.props[i])){
+      for (let i = 0; i < importObj.props.length; i++) {
+        if (!this.userProps.includes(importObj.props[i])) {
           this.createProp(importObj.props[i])
         }
       }
@@ -44,22 +44,21 @@ export function useCreateComponent(importObj) {
       idDrag: '',
       idDrop: '',
       color: "#ffffff85",
-      htmlAttributes:{
-        class:"",
-        id:"",
+      htmlAttributes: {
+        class: "",
+        id: ""
       }
     };
 
-    if (imported === true){
+    if (imported === true) {
       component.componentName = importObj.componentName;
       component.htmlList = importObj.htmlList;
       component.actions = importObj.actions;
       component.state = importObj.state;
       component.props = importObj.props;
     } else {
-      component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi,"");
+      component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "");
     }
-    
     if (!this.componentMap[component.componentName]) {
       this.registerComponent(component);
       this.setActiveComponent(component.componentName);

src/components/composables/useCreateComponent.js

@@ -124,7 +124,13 @@ export default {
           } else {
             nestedString += htmlElementMap[child.text][0];
             if (child.class !== "") {
-              nestedString += " " + "class = " + `"${el.class}"`;
+              nestedString += " " + "class = " + `"${child.class}"`;
+            }
+            if (child.binding !== "") {
+              if (child.text !== 'img' || child.text !== 'link') {
+                nestedString += ` v-model = "${child.binding}"`
+
+              }
             }
             if (child.text === "img" || child.text === "input" || child.text === "link") {
               nestedString += "/>";
@@ -157,6 +163,9 @@ export default {
           if (el.class !== "") {
             outputStr += " " + "class = " + `"${el.class}"`;
           }
+          if (el.binding !== "") {
+            outputStr += ` v-model = "${el.binding}"`
+          }
           outputStr += ">";
           if (el.children.length) {
             outputStr += "\n";
@@ -205,7 +214,7 @@ export default {
       children.forEach((name) => {
         childrenComponentNames += `    ${name},\n`;
       });
-
+      console.log("lets look at data", this.componentMap[this.activeComponent])
       // if true add data section and populate with props
       let data = "";
       if (this.componentMap[this.activeComponent].props.length) {
@@ -217,14 +226,30 @@ export default {
         data += "    }\n";
         data += "  },\n";
       }
+      const htmlBinding = this.componentMap[this.activeComponent].htmlList
+      console.log('htmlbinding', htmlBinding.binding)
+      console.log('2', htmlBinding)
+      // if (htmlBinding.forEach) {
+
+      // }
+
+      data += "  data () {\n return {\n"
+      htmlBinding.forEach(el => {
+        if (el.binding !== '') {
+          data += `    "${el.binding}": "PLACEHOLDER FOR VALUE", `
+          data += '\n'
+        }
+      })
+      data += ` \n  }  \n `
+
 
       // if true add computed section and populate with state
       let computed = "";
       if (this.componentMap[this.activeComponent].state.length) {
         computed += "  computed: {";
         computed += "\n    ...mapState([";
         this.componentMap[this.activeComponent].state.forEach((state) => {
-          computed += `\n      "${state}",`;
+          computed += `\n      "${state}", `;
         });
         computed += "\n    ]),\n";
         computed += "  },\n";
@@ -236,7 +261,7 @@ export default {
         methods += "  methods: {";
         methods += "\n    ...mapActions([";
         this.componentMap[this.activeComponent].actions.forEach((action) => {
-          methods += `\n      "${action}",`;
+          methods += `\n      "${action}", `;
         });
         methods += "\n    ]),\n";
         methods += "  },\n";
@@ -246,18 +271,19 @@ export default {
       let styleString = "";
 
       if (this.activeComponentObj.htmlAttributes.class !== "") {
-        styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
-width: ${this.activeComponentObj.w}px;
-height: ${this.activeComponentObj.h}px;
-z-index: ${this.activeComponentObj.z};
-}\n`
+        styleString += `.${this.activeComponentObj.htmlAttributes.class} { \nbackground- color: ${this.activeComponentObj.color};
+      width: ${this.activeComponentObj.w} px;
+      height: ${this.activeComponentObj.h} px;
+      z - index: ${this.activeComponentObj.z};
+    } \n`
       }
 
       for (const html of htmlArray) {
         if (html.class === ' ') styleString = "";
         if (html.class) {
-          styleString += `.${html.class} {\n
-}\n`
+          styleString += `.${html.class} {
+\n
+} \n`
         }
       }
 
@@ -349,17 +375,5 @@ z-index: ${this.activeComponentObj.z};
 .prism-editor__textarea:focus {
   outline: none;
 }
-
-.refreshCode {
-  position: absolute;
-  background-color: black;
-  color: $secondary;
-  bottom: 96%;
-  right: 5%;
-}
-
-.refreshCode:hover {
-  cursor: pointer;
-}
 </style>