From 2c5c996b3f3aa65a13e6a6ed721916fbd4a54141 Mon Sep 17 00:00:00 2001
From: Amigo <49749100+aamigo@users.noreply.github.com>
Date: Tue, 18 Jun 2019 17:08:25 +0200
Subject: [PATCH] Updated 031 Automatic import of custom code during
 compilation in JCB (markdown)

---
 ...f-custom-code-during-compilation-in-JCB.md | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md b/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md
index 8ea2a37..2a95203 100644
--- a/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md
+++ b/031-Automatic-import-of-custom-code-during-compilation-in-JCB.md
@@ -13,5 +13,32 @@ I'm going to compile the demo component. Since most of you might already have th
 Here in the editor you can see this is the root directory of the website. I'm going to do something on the back end of the components. I'll open administrator, components. There is the demo component. Let's just go to it's main index page. I'm going to add some custom scripting, just for the demonstration. [00:03:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m04s) Now the way to add custom scripting, there are some conventions and some regulations. 
 
 ### Conventions Used(Insert Code - Replace code)
-???
-Let me first show you the conventions. To insert custom scripting you will use a tag like so(see video). You will use asterisks instead of The X s that are in the code so the code has the X s in it but the actual They would be with the Asterix So that will be to insert new code you use that that place holder and the beginning of the Area then after a new line You will insert your code and then at the end of the code you will insert this one to close the code [00:03:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) Ok Then there are obviously two ways Of adding code, one is to insert code and one is to replace existing code So inserting code would simply at the same line insert that code into the existing code Where is replacing code will literally remove the old code and add the new code in its place So these are the two conventions Once component builder adds the code back The tag will change inserted Insert will change to inserted And will have this new number at the end this number is actually referencing the ID of the [00:04:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s) Code in the system Now don't ever change this number or component Builder with think that it doesn't have one And it needs to be created So it will be an error it won't work so don't take this Number out Then It will add this at the end Now on other after compiling it and adding this string in it won't Compile it again because of these Opening and closing [00:04:56](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m56s) Brackets not being there Greater and Lesser than signs They they are the ones that activate it and makes makes it Basically be parsed again So when component builder places the code back it looks like this When you then later come and want to change it again you would add this diamond in there And it will then update the existing Code in the database With the changes that you've made [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s) That's basically it. There are a few limitations you cannot add Code Closer to each other than I would say 6 lines So if there are gonna be code Close to each other and it ends and starts within the parameter of 6 lines You end up with a problem So especially at the end I will demonstrate that somehow in our Actual doing of of this but the reason is Component Builder doesn't only use the line In which this is found to remember where to place it But actually creates a sort of a fingerprint of the code above the insertion and the code [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) Below this insertion to Accurately insert it in the future So that code changes and then Component Builder will give you a notice and will not insert the code This is because of the nature of JCB It actually is constantly improving it's constantly being improved and that therefore it's code is obviously moving Around quite a lot Now There was no other way for us to try and automate this [00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) Because if we use the line it could possibly cause an accident by overwriting code you You never intended it to overwrite So the only way we could solve this was creating what we call a fingerprint Few lines above the insertion or the replacement and a few lines below there that replacement Now I'll demonstrate this in our in our demonstration in a moment Just a heads up about that So just quickly a recap To insert new code you will use this To replace new code or for the first time you would use that [00:07:25](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) Obviously at the end of the code you would add these Corresponding placeholders I'll put these this little block Into the comments of this tutorial So that if any of you need to copy it down you could just copy it from there Ok and so when Component builder adds it back It will look like this for the inserted and this for the replaced and if you then come back Obviously all you need to do is just add that diamond in there For it to be updated in the database [00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s) So let's see this in action So here we have that demo components Main Document Open So I'm gonna add some replacement tags here So there we go I'm basically not making any changes but I could I could add a few lines here Maybe another comment hi it worked And No space there [00:08:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) Let's do Echo Hi it Worked And that should do it so now this is just gonna replace this area So let's go to the compiler and compile the component See what happens So in the compiler I'm simply gonna compile a component again Ok it successfully compiled Now before I install it I could do a check to see whether it actually did get the code from the component [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) The way I'll do that is I'm just gonna open custom codes in a new tab And low and behold there is says component demo and the path in which the change was made And did it was it was a replacement so we can open that And there is the code that we want replaced Right And there is the hashtag For the start The fingerprint and the hashtag for the end The lines it's in a replacement and everything seems quite great so I will we need to do on this Area is actually click install [00:10:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Then that'll be the compiled version Now let's go back To the code So as you can see It actually inserted the code in the correct place it moved the other code down enough lines And it changed it from replace to replaced And it added the ID After it That sort of targets it so I could go and say ok I don't actually want this in here like that Click save [00:10:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) And then go back to the compiler compile it again Here we go Install it again Go back here refresh this Oeps it didn't change let me quickly go see why I forgot to add in the diamond right You want to change the code you need to ensure that you add this back in Otherwise it will not even look for it So we at that back in Let's try again [00:11:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m18s) Ok now it worked it updated the code in the database So let's install it And it updated in the code So that's how easy it is to replace a certain section now let's look at inserting Now remember as I said Don't put code close to each other within at least eight lines So 1 2 3 4 5 6 7 8 I could actually from this line insert another set of either insert or replace Another section of code [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is because the fingerprint that it creates Above the insertion It's sometimes up to 8 lines long Now It could happen that it actually uses from there And that could Possibly be an error when you make a change here It will think that this code is also been affected and it won't find it So that is one of the limitations that these code insertions that you do either by replacing or inserting as Chunk of text script can only be inserted up to eight lines apart [00:12:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m34s) From each other So let's do an insertion over here Ok so we got that inserted there I did put a comment And let's save that And now let's compile Ok before we install it we can just again go check Whether everything was done as expected and yes the insertion was grabbed it was Added to the database and it is there Ok [00:14:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) It has hash target obviously with insertion we only need where it starts not where it ends And so We can close that Now simply install that component Let's go look at the code Ok so this added the replacement Script Change it from replace to replaced It's added the inserted script From insert to inserted it [00:14:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m34s) Now if you want to make a change to it we're again Just add these diamonds here Make our change Save the file of course and then Then let's compile Let's check whether the work was updated Great it's updated the work in the database So let's install the component Ok let's go look at the code again Wonderful it's added it back All seems well [00:15:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m18s) Now We are working on another part of this implementation that for if so for some reason this code above it Changes It will give you a notice On compilation That there is been a change to the fingerprint and it could not find the insertion area It will still add the code on the line number But it will be escaped So that it doesn't change or hurt any of the code that still there The same goes with replacement code [00:15:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m50s) Since it is replacing code It is a little bit more tricky So we'll still add it into the line but we will not remove the old code Anyway I'm still going to be working a bit on that it needs some fine tuning I would like your feedback if you think There's a better way I'm always open for ideas Reality is We are very happy to announce that component builder can now Automatically extract custom code from your Component while In development [00:16:21](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m21s) Will add a switch that when your ready to distribute your component You could simply say you know that it's no longer in production And then when you compile it will actually not add these placeholders Anymore Ok well thanks for watching Please give me your comments at Github There is actually an issue open there Called Automatic import of custom code during compilation And [00:16:51](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m51s) You'll see that Yeah there's quite a few been said you can simply add your your comments and feedback to this ticket Or to this issue it's issue 37 Since the tutorial be on YouTube possibly by the time you view it closed but You're still welcome to go and make any comments on the closed issue if you like Anyway thanks for watching goodbye
+
+Let me first show you the conventions. To insert custom scripting you will use a tag like so(see video). You will use asterisks(*) instead of the X's that are in the code. The code has the X's in it but the actual way would be with the asterisks(*). So that will be to insert a new code. You use that place holder/***[INSERT<>$$$$]***/ in the beginning of the area, then after a new line, you will insert your code, and then at the end of the code, you will insert this one/***[/INSERT<>$$$$]***/, to close the code. [00:03:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m50s) Then there are two ways of adding code. One is to insert code and one is to replace existing code. So inserting code would simply at the same line insert that code into the existing code, where is replacing code will literally remove the old code and add the new code in its place, So these are the two conventions. Once component builder adds the code back, the tag will change to inserted, and will have this new number at the end. This number is referencing the id of the [00:04:28](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m28s) code in the system. Now don't ever change this number or component builder would think that it doesn't have one, and it needs to be created. It will be an error. It won't work, so don't take this number out. It will add this at the end. After compiling it and adding this string in, it won't compile it again, because of these opening and closing [00:04:56](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m56s) brackets not being there and the greater and lesser than signs. They are the ones that activate it and makes it be parsed again. When component builder places the code back, it looks like this/***[INSERT<>$$$$]***/. When you then later come and want to change it again you would add this diamond(<>) in there, and it will then update the existing code in the database with the changes that you've made. [00:05:30](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m30s) 
+
+### Limitations For Inserting And Updating
+
+There are a few limitations. You cannot add code close to each other than I would say 6 lines. So if there are going to be code close to each other and it ends and starts within the parameter of 6 lines, you end up with a problem, especially at the end. I will demonstrate that somehow in our actual doing of this. The reason is Component Builder doesn't only use the line in which this is found to remember where to place it, but actually creates a fingerprint of the code above this insertion and the code [00:06:14](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m14s) below this insertion, to accurately insert it in the future. So that code changes and then Component Builder will give you a notice and will not insert the code. This is because of the nature of JCB. It is constantly being improved and that therefore it's code is moving around quite a lot. There was no other way for us to try and automate this, [00:06:48](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m48s) because if we use the line it could possibly cause an accident by overwriting code you never intended it to overwrite. So the only way we could solve this was creating what we call a fingerprint. A few lines above the insertion or the replacement and a few lines below the replacement. I'll demonstrate this in our demonstration in a moment. Just a heads up about that. To insert new code you will use this/***[INSERT<>$$$$]***/. To replace new code or for the first time you would use that/***[REPLACE<>$$$$]***/ [00:07:25](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m25s) At the end of the code you would add these corresponding placeholders/***[INSERT<>$$$$]***/ and /***[REPLACE<>$$$$]***/. I'll put these this little block(see video) into the comments of this tutorial. If any of you need to copy it down you could just copy it from there. When component builder adds it back, it will look like this/***[INSERT<>$$$$]***///23 for the inserted and this/***[INSERT<>$$$$]***///25 for the replaced. If you then come back all you need to do is just add that diamond(<>) in there for it to be updated in the database. [00:08:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m00s) 
+
+* ### Showing Example With Replace(see video)
+
+Let's see this in action. So here we have that demo components main document open. I'm going to add some replacement tags here. I'm not making any changes but I could add a few lines here - ///. Maybe another comment - 'hi it worked', [00:08:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) let's do - echo 'hi it worked' and that should do it. This is going to replace this area. 
+
+### Recompiling The Demo Component With Replace
+
+Let's go to the compiler and compile the component. See what happens. So in the compiler I'm going to compile a component again. It successfully compiled. Now before I install it I could do a check to see whether it actually did get the code from the component. [00:09:24](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) 
+
+### Checking The Custom Code Tab Before Installing
+
+The way I'll do that is I'm just going to open custom codes in a new tab. And low and behold there is says component demo and the path in which the change was made, and it was a replacement. We can open that and there is the code that we want replaced. And there is the hashtag for the start, the fingerprint and the hashtag for the end. The lines it's in a replacement and everything seems quite great. All we will need to do on this area is click install. [00:10:00](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m00s) Then that'll be the compiled version. 
+
+### Looking at The Replaced Code In Editor
+
+Now let's go back to the code. It actually inserted the code in the correct place, it moved the other code down enough lines, and it changed it from replace to replaced. It added the id after it. That targets it. I could go and say I don't actually want this in here, like that, click save, [00:10:32](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m32s) and then go back to the compiler, compile it again. Here we go, install it again. Go back here, refresh this. Oeps it didn't change let me quickly go see why. I forgot to add in the diamond. You want to change the code you need to ensure that you add this back in, otherwise it will not even look for it. So we add that back in. Let's try again. [00:11:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m18s) It worked it updated the code in the database. Let's install it. It updated in the code. So that's how easy it is to replace a certain section. 
+
+### Inserting Custom Code Via Editor
+
+Let's look at inserting. Remember as I said, don't put code close to each other within at least eight lines. So 1, 2, 3, 4, 5, 6, 7, 8. I could actually from this line insert, another set or either insert or replace another section of code. [00:11:58](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m58s) The reason is because the fingerprint that it creates above the insertion, is sometimes up to 8 lines long. It could happen that it actually uses from there(see video). And that could possibly be an error when you make a change here. It will think that this code is also been affected and it won't find it. So that is one of the limitations that these code insertions that you do either by replacing or inserting as chunk of text script, can only be inserted up to eight lines apart [00:12:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m34s) From each other. Let's do an insertion over here(see video). We got that inserted there. I did put a comment. 
+
+????
+Let's save that And now let's compile Ok before we install it we can just again go check Whether everything was done as expected and yes the insertion was grabbed it was Added to the database and it is there Ok [00:14:04](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m04s) It has hash target obviously with insertion we only need where it starts not where it ends And so We can close that Now simply install that component Let's go look at the code Ok so this added the replacement Script Change it from replace to replaced It's added the inserted script From insert to inserted it [00:14:34](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m34s) Now if you want to make a change to it we're again Just add these diamonds here Make our change Save the file of course and then Then let's compile Let's check whether the work was updated Great it's updated the work in the database So let's install the component Ok let's go look at the code again Wonderful it's added it back All seems well [00:15:18](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m18s) Now We are working on another part of this implementation that for if so for some reason this code above it Changes It will give you a notice On compilation That there is been a change to the fingerprint and it could not find the insertion area It will still add the code on the line number But it will be escaped So that it doesn't change or hurt any of the code that still there The same goes with replacement code [00:15:50](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m50s) Since it is replacing code It is a little bit more tricky So we'll still add it into the line but we will not remove the old code Anyway I'm still going to be working a bit on that it needs some fine tuning I would like your feedback if you think There's a better way I'm always open for ideas Reality is We are very happy to announce that component builder can now Automatically extract custom code from your Component while In development [00:16:21](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m21s) Will add a switch that when your ready to distribute your component You could simply say you know that it's no longer in production And then when you compile it will actually not add these placeholders Anymore Ok well thanks for watching Please give me your comments at Github There is actually an issue open there Called Automatic import of custom code during compilation And [00:16:51](https://www.youtube.com/watch?v=DFMfIl-VkSk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m51s) You'll see that Yeah there's quite a few been said you can simply add your your comments and feedback to this ticket Or to this issue it's issue 37 Since the tutorial be on YouTube possibly by the time you view it closed but You're still welcome to go and make any comments on the closed issue if you like Anyway thanks for watching goodbye