 So guys today I'm going to talk about single directory components. In short, this is the film production video of single directory components so that we can explore and so that you get a starting point to what exactly single directory components is and how it's going to make our life easier in the long run. So let's start. So as I mentioned, I've been working with Drupal for last 12 years and there have been a lot of challenges when it comes to the teaming layer of Drupal. Lot hasn't changed there except introduction of company and company into it. So what are the challenges that most Drupal teamers face? Sorry, sorry guys. Often the template style sheet assets are scattered across the team. So if you're working on a component, so for example, if you want to modify a button, you would have to, you don't have a single place where the style sheet exists or the template exists. So it will be scattered across the team. So finding all the assets become slightly difficult. I can show that we often face is there are multiple ways to alter a business logic. For example, if you want to alter a button layout or if you want to alter, say for example, a field, how it's rendered. So there are multiple ways you can do it through to it. You can have a free process in team. So there's no standard way of doing it. I mean, there is a standard way of doing it, but there are multiple entry points wherein you can alter the business logic. Third thing is since assets are scattered, it's challenging to maintain the codebase over a longer period of time. We all must have noticed that as the team and the components start increasing, it becomes challenging to maintain the codebase. Fourth point is like if we have to define a library to be separately and attach it separately in the codebase. So introduction of Drupal libraries since Drupal 8, we have to define a library and assign, for example, say if we want a CSS to be applied. So we need to create a library prompt in library.yaml and then attach it to whichever component or whichever template or whichever rendering array we want that to be applied to. So we have to define the scope for that. So this is another problem. And finally, for a theme without a Drupal background, it would be challenging to troubleshoot the issue in the team layer because there are a lot of practices which are specific to Drupal world. So to address this, what Drupal is doing is it's moving to HDC. So HDC single digital single directory components wherein it's a new approach of feeling where wherein all the files required for a component will be grouped together in a single directory. So I'm going to show you a single directory how it looks like. But before that, let's see what are the other advantages. The second advantage of this HDC is it reduces the steps required to output HTML CSS and CSS in a Drupal page. So if you include a component, so the number of steps will reduce drastically. CSS, CSS scopes to the component and automatically get loaded. So currently, as I mentioned, we need a library to be defined and we need to define what would be the scope and where this library needs to be loaded. But whereas in HDC, we don't need to do this. The scope would be automatically loaded. So as I mentioned in the first point, so all the files are grouped together. So we also have CSS and CSS files. I'll talk about the structure. It will be clear when I discuss the structure with you guys. And finally, any module and theme can provide a component and that can be overridden within your theme. So for example, if you have a button component and it's provided by one of your themes and you want to override it, you can just copy that component in your theme and just make whatever changes and the component will be overridden. Let's talk about more benefits of this approach of overall gaming. First is organization. So grouping all the necessary code into directly makes it really easy. Maintaining your code will be much easier. Automatic library creation as I mentioned. So HDC will automatically look for your component, CSS, and if it exists, it will be automatically loaded and scoped just for that component. Reusability. The next thing is a component can be modular and it can be reused. So you can just take out that component and use it somewhere else. So the next benefit of using HDC is its consistency. By using components, developers can ensure that their applications have a consistent look and feel. Calibarity is another benefit. You can specifically test one component in isolation, whereas currently that is difficult in the current approach. And finally, collaboration is much easier because you have multiple teams of developers working. It becomes much easier to maintain and collaborate. So let's get started. Let me introduce you to how HDC component looks like. So for now, the HDC is introduced in Drupal 10.1.x as an experimental module. You can just enable this module and get started with a component-based approach for the team. So how does a component directly look like? So I had a theme or a liberal theme, so I used that and I created a component folder and I wanted to create a button of component. So what I did was I started by including the tweak file, component.yaml file. Basically, the component.yaml file is the definition of this component and buttons, CSS, JS, and all the assets are grouped together. So you see all of these are tightly held in this folder. So if the CSS JS file exists, you don't need to specify if this needs to be loaded. So they will be automatically loaded for this scope. There is another. So if you want to create a new component, you can make use of component library generator. This is the module, which you can enable. And you can run this brush command, brush generate, theme, scp component. It will ask you a series of questions. Where do you want the component to be generated? Which theme this needs to be there? What would be the name, et cetera, et cetera? And finally, a structure like this would be created by default to start with. I showed you an example of how component.yaml looks like. So this is what it looks like. So you need to define the name of the component. So as I mentioned, if you use this approach, the yaml file will be created on its own. So then you just need to punch in very basic details like what would be the component name, what are the properties. So the properties is basically what you want to pass to this component as an argument. So for my example, I'm using a button. So button text is what I'm passing as a component or property. And you can also specify which are the required properties, library dependency that you need to pass. And that's all. Once you have this component.yaml, you can use the, you can use the attributes that you had passed as an argument like the property which you had passed. You can directly use it as a twig variable. So this is how my button.twig looks like. And finally, you can include this component in any other twig file. So this is how you include it. So first the team name and then the component name. And you have to pass the argument that you need along with it. So this, so basically this is how the, like a component looks like. And that's a small example and a small presentation in short, what I wanted to display. Any questions? Sorry, the module that you mentioned, right? This is the module. Does it come with components or you have to create components on your own? You mean the library generator component? Yeah, this module here. Yeah. The come with like pre-built components or you have to create all of it on your own? No, it's a command line prompt. So once you, like once you run this command, generate a team STC component, it is going to ask you series of questions. For example, where do you want to generate this component? And what would be the name of the component? So for in my case, it was button. So if you follow the steps, so all these files will be created for you. And it can, you can just like modify whatever business logic that you want to do. Yeah. So the component itself, like I saw briefly you showed the yellow file, right? It looks like, it looks like it creates a field. I'm not sure if I understand that part properly, but it creates the button components. So any clickable button and the property that, like the argument that it takes is perfect. So what, what button text you want to be displayed. So just a, just example component that I made. This text component is then used to render the button. And how do you call this from another template? Is this, you just pass, you just include the button component and then pass the text variable. So this can be, you can pass multiple arguments. Okay. I may have a question. So let's, yeah, let's say this is this component is created in a base theme and the theme is being used as a parent theme and the child theme. Okay. And I want to override this particular component there in my, so how, how it can be done on like, is it doable? It is doable. What you can do is you can just copy the, just like how we override a tweak file or any template. Just copy the base component from your base theme to the new theme and make whatever changes. So the new, the component in your current theme, the child theme will be, will be overriding your base theme. Basically, yeah, basically if I only want to override a tweak file in that particular component and so I'll have to copy the whole component that will have redundant files in that case. I haven't really tried doing that, but I believe at least you need to include component.yml and the tweak file. Yeah, you got it. So basically the, the ml file so that the component is defined and then the tweak file, which is, There's a question in the chat to Armei from Damian. What, what do the components look like in the CMS? Or do you always call them from tweak templates? Not necessarily. We only, we don't only call it from the tweak template. There are multiple other ways as well of calling this. So if you check the documentation on Drupal.org, they have provided multiple ways. So I don't have it handy, but let me so it can let me pass it to you guys. So yeah, this is the one. You can, using this in tweak files is like, they've provided it, how to embed a component if given, how, how you can use it using render array that is also provided. There are multiple ways. Also the question is like, Yeah, good. Yeah, I'm saying with the single directory component, there is also a way where you can create your own design storybook. There's a module available with the SDC, SDC server or something where you can create your whole create your storybook. So you can see what exactly the component will look like. And you can extend the component to anywhere. Yes, these are all the modules which are currently in support. This is similar to design system when you are going to create a design system and you want to use like a similar to pattern lab similar to bootstrap. So similar, the SDC module is for you. So if you want to create your own style, style guide on design system, you can utilize this and you can reuse because it's a single component, single directory, you can just copy this to anywhere and you can utilize this. Other other questions for Amé already. Thanks Amé. I'll stop the recording now.