Drupal "component" module: part 1: JS apps as Blocks

drupal's component module is a module that lets you create your applications as javascript and html applications but then embed them into drupal as if they were just blocks not only that it allows you to provide parameters and configuration parameters to your blocks which are passed on to your javascript application drupal is as you know my favorite content management system and swelt is my favorite javascript ui framework so why not combine the two so that's what i'm going to do today but for that we need to first learn the basics of the component module component module as i said allows you to embed your javascript applications as drupal blocks and supply parameters so let's get started first thing we should do is download and install the component module so i have a drupal site right here on the left let me close others yep it's a very simple uh almost empty drupal site um do i have component in there no i don't have components so let's let me get myself the component i say i'm using docker of course docker compose exit php if you're not using trocker you can ignore this prefix of docker compose at quick php the rest of it will be same for you so we use composer require and then we get ourselves drupal from in the from drupal namespace or repository we get the component project so this will download the component project okay done now if i refresh my extend page and look for component there it is the component let me just make this a little bigger so this is the component module and i just enabled it once you enable the component module oops sorry let's enable the component module what you have to do is you have to create a new module which in my case will be web this is my this is my drupal route this is my web root and within that i look for modules and i create a new file and folder so i'll create custom folder in which i will create a marginal component underscore demo and in that i have to create component underscore demo dot info.yml this is standard for all drupal modules now if you don't know drupal at all don't be afraid because this is the minimal amount of yaml you won't be seeing any php code and you'll be seeing very little uh eml file eml syntax so you give it a name the name is going to be component demo right description you can give is a demo module to show how to use component you know how to okay component my module okay you have to give it a type the type is going to be module and you have to give it a core version requirement this just memorize this because we wanted to make it compatible with 8 as well as 9 so this is how we write it okay so this is it only one thing we will add is let's add a dependency and make it dependent on component project and within that the component module okay so if we do this this gives us if i now refresh my left hand side i get this component demo you see so i will enable it in a second but before i enable that at this point we have an empty module we can now start putting components into it the way we do that is we create a folder and a file so we create this component folder components that's plural and in that you can start adding component eml files but we will put them in sub folders so let's say comp let's call it comp underscore demo one and in there we create com let's go demo one dot component dot yamo all right so i hope you got the basics of this first we created the info yml file for the module and that was in my modules custom component demo component underscore demo.info.yml and this is what this contains and then we created this folder called components in which we are creating another subfolder called comp underscore demo1 and then we create components called demo1 dot um let me just yeah comp mo1 dot component dot yml all right so now that i have these things let's create the component you give it a name i'll call it uh demo component one give it a description if you want although it's not absolutely needed some description of um demo one all right then you have to give it you can give it type which defaults to block and the other option is library but i'll give neither and it defaults to block at this point um let's let's be done with this yeah save it and enable this component demo so i enabled it at this point if i go to my site of course there is no evidence of anything really but i can add this component in block layout if i go to block layout and place block under content and if i say look for demo there it is demo under demo component one this is the name that i have okay um i will place block i could display title or i may choose not to but let's say yes once we do that and go back to site you got this demo component one at this point this block and this component doesn't do much so first thing you should know is that you can create an index.html file now i don't like this so here let me show you so you create you can create an index.html file if i create a new file called index.html but i absolutely hate uh this kind of a naming convention where you call it index.htm i'm going to call it index.html so since i decided to call it my own name i do have to go back into the component descriptor and give it a template directive so template index.html if i wanted to omit the template i would have to play template directories then i would have to call this index.htm which is a very bad name so i choose not to do that now here whatever html you put will become the body of your component so let's do that so we say hey h3 this is um whatever demo component one and we could just create ul 3li let's say so one two three so right there i was using the mx syntax which vs code nicely supports now if i refresh nothing happens in order to actually see the effect i have to flush all caches and now when i flush the cache it picked up the template this is the temp component one this is the h3 for that and this is one two and three the ullis so so this is what we are getting with component now you may say okay well you got some html uh that's nice but that's not really what makes a component components need to be dynamic that's right so these one thing you have to remember is components are dynamic but they are client-side these are meant to be javascript applications so let's create a javascript file uh i will right-click and say new file say script dot js and in here let me just put a log statement i am script dot js okay save it and this doesn't add it to the component just yet what you have to do is you have to create a js section under which you give the key as script.js and the value can be empty object now there are other options that you could put under it but right now we'll just start with this once you do this and of course your clear cache which i will do here uh let me clear cache using rush cr once i do that and i go into inspect element i want to see what happens on my uh oops looks like something is oh okay let me talk this to the left side yeah so why is this still not docking properly i'll just uh resize this some reason it's not doesn't want to resize okay all right so if i go to console and reload now this is imscript.js so the script has been added as part of this component but what you should further understand is that you can also give this thing has a specific selector so let me sel inspect and in here you see this is my index.html but outside that there's the block id demo component one more importantly there is a inside that there is this let me inspect it again yes so this con div class content has a child this div with this funny id and the class comp underscore demo one this is the div that wraps index.html so what we are going to do is we are going to target this div because this div is going to receive configuration now you might ask what do you mean by configuration the answer is you can provide configuration let's provide some configuration you can provide static configuration so you can do this and under static configuration you can just give key value pairs so conf one valve one maybe con two is is an array let's say and this will be one two three these are config values which you will see where they end up let me clear cache and reload now this once again let me inspect it and when you inspect it the div class content its child this particular one with the class comp underscore demo one it gets a few new attributes data dash conf 1 and then data dash conf 2. as you can see conf1 has a valve 1 which corresponds to this and con 2 data com2 has a value that is a json array which corresponds with this so whenever you have a simple value string integer etc it will be direct value of the data attribute while whenever you have a complex value such as a an array or an object then it will be turned into a json array so now we have the json so now you may say okay this is uh okay i guess but is it that useful but it can get much more useful if you convert the static configuration into form configuration let's turn this into form configuration and at this point you can have enough more configuration values like country but these are form these are if you know the drupal forms api these can be turned into form elements with type equal to let's say text field title equal to you know conf 3 if you save this and clear cache at this point if i refresh and configure block by the way just so you know there is conf 1 and con 2 there is no config 3 at this point but if i go into configure block let me configure oh there it is there it is conf 3 so i could give it a value 3 or something like that save block i come back here inspect it and you will see that there is data con 3 value 3. this is what makes the component module so powerful you have your javascript app which is this one right and this app can now get these values now how will it get the values that's that's a little bit of a challenge let's find out what we will do is we will try to get target this particular div and the div you can obtain by targeting class block component comp demo1 this class so get to this div and then from there get to the content here and from there get to this class confirm demo so you can get all of those things by saying oh let's do it here first you could say document query selector uh block component com dash demo one this is the first class i think but of course i have to verify it's block component com demo one this let's copy this i want to make any mistakes okay next within that look for content within that look for comp underscore demo one if you get this object on this object there is a special property called data set and that data set let me close this this is blocking how do i get rid of it okay yes so this data set contains the config values that we want conf 1 count 2 count 3 okay so that's that's the selector we are looking for let's copy this and we go back in here so let's get the the element that we are interested in that's the element and then config is equal to element sorry let me spell this correctly element.dataset and we can console.log it config config okay let's save this and see if this works now we'll have to keep clearing the cache so let's uh help ourselves by going to development performance and uncheck aggregation of css and js files once we do that i think things will be better let's go back to site inspect and in console we see an error cannot read property data set of null well why should that be the case when we do this we see the value the reason is unfortunately the reason is this module called big pipe big pipe module which is enabled by default in drupal is causing this trouble uh it brings the the content of the blocks asynchronously it's not there in the very beginning and that's why all this happens so we have to we have to disable big pipe which we can do we're going to extend look for big pipe there it is let's uninstall it we can do it here uninstall big pipe uninstall of course i can do this with with the brush also and that's another way of doing it but now when we go back to site and we inspect go to console we do see the configuration yes but configuration is coming as dom string map if you want it as a regular object what you should do is you just do spread operator and now when you reload it no longer is a dom string map it's a regular object but as you can see conf 2 which is an array is not really narrates the json of json representation of an array so you would have to actually say config dot conf 2 is equal to json dot parse config.2 this is how you would have to parse out the array now when you reload your second one is actually an array not a json representation of an error real array so this is the beginnings of so keep in mind once the again module lets you embed javascript applications like their blocks and there is a big pipe module that gets in the way a little bit so you have to disable the big pipe module and now you can use your index.html as the body of your content and and you can attach your script.js let me show you again this is your script dot js which you have to obviously specify in the component yaml file and this script can uh so here is the script.js this script has access to all of this static configuration as well as configuration form and this form can be as complicated as you like for example let me add a comment four and this could be type check boxes and you can give it title choices choices and then options can be you know sunday oops oh yeah let's give it a value like um sunday monday etc right let's start with fundamental tuesday tuesday if you do this come back here go to the configuration configure block and let's flush all caches now we have send them under tuesday as our check boxes so if you check these check boxes and save block then back in here in your console you will have this sentiment tuesday as again a json array obviously this json area needs to be converted to a regular javascript array so you would have to do conf 4 you'll have to parse it out okay this is the so you do this and back in here oops reload and this time your con4 is no longer a json representation of an array it's a real array sunmon 2 like that if i go and configure block and uncheck monday right then this time monday will not be in there see as you can see so this can be used this can be very useful now the biggest power of this is in the next one next episode of this what we will do is we will use our own my comp okay our we will invent our own web component our own tag custom element so that's next see you in a bit

Channel: SpinSpire

Views: 630

Rating: 5 out of 5

Keywords: drupal, svelte, javascript, web-component

Id: SWA8d83j__I

Length: 25min 40sec (1540 seconds)

Published: Sun Dec 27 2020