AEM - Htl - Builder

The goal of this project is to automize the process of translating the html file into sightly
and generating AEM components. This project is being developed as a part of the IT Graduation project.

Please feel free to leave any feedback or remarks about the project on the github discussion page.

License

This project is licensed under the MIT License - see the LICENSE.txt file for details.

Installation

$3

Make sure to install as well node.js and npm

Node.js :
1. Project version: 18.12.1
2. Installation guide: https://nodejs.org/en/download

Npm:
1. Project version: 8.19.2
2. Installation guide: https://docs.npmjs.com/cli/v8/commands/npm-install

$3

Install aem-htl-builder with npm

``

bash

  npm i aem-htl-builder





$3

If you cloned this repository instead of installing it via npm, to run the scripts go to 

package.json file and run the scripts from there.





Configuration

After installing the module, you need to set up a configuration file.

Run the following command to create an empty configuration file.

bash

  npx aem-htl-builder configure

 

Now that the file has been created you need to configure it.

Here is an example of valid configuration file:

json

{

  "project": {

    "aemProjectPath": "/Users/username/projects/mysite",

    "rootPackage": "com.mysite.core",

    "componentGroup": "MySite - Content",

    "appName" : "mysite"

  },

  "html": {

    "useSingleFile": true,

    "singleFilePath": "/Users/username/html-files/test.html",

    "directoryPath": "/Users/username/html-files"

  }

}





And below is the  detailed description of what each field does:

1. To configure the project object:

- aemProjectPath: Specify the absolute path to your local AEM project.

- rootPackage: Specify the directory holding AEM Sling models. You can find it at

aemProjectName/core/src/main/java/



- componentGroup: Specify the component group to which the components will be added. 

- appName: The appName field represents the name of the root folder within the

aemProjectName/ui.apps/src/main/content/jcr_root/apps/

 directory in your AEM project. This folder contains your project-specific components, templates, and other resources.

2. To configure the html object:

- useSingleFile: If set to true, the module will read and use the HTML file from the

singleFilePath field. If set to false, the module will prompt the user to select an HTML file via the terminal from directoryPath

.

- singleFilePath : Specify the path to an existing HTML file.

- directoryPath : Specify the path to an existing directory containing HTML files which you will use do build AEM component.



$3

You can also set-up configuration by simply running the script with already specified parameters (example below):

bash

aem-htl-builder configure \

--aemProjectPath="/Users/username/projects/mysite" \

--rootPackage="com.mysite.core" \

--componentGroup="MySite - Content" \

--appName="mysite" \

--useSingleFile=true \

--singleFilePath="/Users/username/html-files/test.html" \

--directoryPath="/Users/username/html-files"





Syntax

This section provides a detailed guide on how to prepare your HTML for processing by this module. 

It covers the necessary attribute HTML syntax for each AEM component field type.



Here is a list of all the attributes that are currently supported by the module:

- textfield-[VarName]

- textarea-[VarName]

- checkbox-[VarName]

- link-[VarName]

- img-[VarName]

- select-[VarName]

- description

- i18n-[VarName]

- list-[VarName]



The [VarName] placeholder represents the variable name you choose for the field and should be replaced by the actual name in your HTML.

$3

To add a textfield to your component, you need to follow these steps:



Add the textfield-[VarName] attribute to your paragraph tag, replacing [VarName] with your chosen field name.

- HTML Original:

html

 Component Title



- What module expects:

html

 Component Title





$3

To add a textarea to your component, you need to follow these steps:



Add the textarea-[VarName] attribute to your paragraph tag, replacing [VarName] with your chosen field name.

- HTML Original:

html

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.





- What module expects:

html

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.





$3

- HTML Original:

html



    Species: Human



- What module expects:

html



    Species: Human



$3

To add a link to your component, you need to follow these steps:



Add the link-[VarName] attribute to your paragraph tag, replacing [VarName] with your chosen field name.

- HTML Original:

html



    Click Here





- What module expects:

html



    Click Here



$3

To add an image to your component, you need to follow these steps:



Add the img-[VarName] attribute to your html tag, replacing [VarName] with your chosen field name.



- HTML Original:

html



- What module expects:

html



$3

- ~~HTML:~~

html





$3

If you have an element in your html which will be used for i18n you will need to:



Add the i18n-[VarName] attribute to your html tag, replacing [VarName] with your chosen field name.

- HTML Original:

html



    Location

    Contact





- What module expects:

html



    Location

    Contact





After running

aem-htl-builder convert

 command following will be added to:

- en.json:

json

{

    "Location": "Location",

    "Contact": "Contact"

}





#### Note

If there is already in en.json file the key with the same name e.g. 'Location' this example would override

its value with new one.



$3

The

description

 requires the presence of another attribute from the list.

- HTML Original:

html

 Component Title



- What module expects:

html

 Component Title

textfield-title serves as an example and it can be as well e.g. img-varName , link-varName

 etc.

$3

If you want to add a list to your component, you need to follow these steps:



Add the list-[VarName] attribute to

 tag, replacing [VarName] with your chosen list name.



- HTML Original:

html



    

        

            Margherita

        

        10.99 €

    

    

        

            Pepperoni

        

        Click the link here!

        13.99 €



- What module expects:

html



    

        

            Margherita

        

        10.99 €

    

    

        

            Pepperoni

        

        Click the link here!

        13.99 €



Notice that since this is a list you need to add attributes only to elements which you want to include in the list (multifield) only once.



After running

 command following code will be added to component dialog:

xml

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

        fieldLabel="pizzasModel"

        composite="{Boolean}true">

               sling:resourceType="granite/ui/components/coral/foundation/container"

           name="./pizzasModel">

        

                                jcr:primaryType="nt:unstructured"
<br />                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
<br />                    fieldLabel="title"
<br />                    name="./title"/>
<br />            <price
<br />                    jcr:primaryType="nt:unstructured"
<br />                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
<br />                    fieldLabel="price"
<br />                    name="./price"/>
<br />            <pizzaLinkContainer
<br />                    jcr:primaryType="nt:unstructured"
<br />                    jcr:title="pizzaLink Container"
<br />                    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
<br />                <items jcr:primaryType="nt:unstructured">
<br />                    <pizzaLinkCheckbox
<br />                            jcr:primaryType="nt:unstructured"
<br />                            sling:resourceType="granite/ui/components/foundation/form/checkbox"
<br />                            text="Open link in another tab."
<br />                            name="./pizzaLinkCheckbox"
<br />                            value="true"/>
<br />                    <pizzaLink
<br />                            jcr:primaryType="nt:unstructured"
<br />                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
<br />                            fieldLabel="pizzaLink"
<br />                            name="./pizzaLink"
<br />                            required="{Boolean}false"
<br />                            rootPath="/content"/>
<br />                </items>
<br />            </pizzaLinkContainer>
<br />        </items>
<br />    </field>
<br /></pizzasModelList>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><em>The module will as well add the original HTML list as a comment under the newly converted list.</em>
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Convert HTML to Sightly</h2>
<br />After successfully setting up configuration, and adding custom attributes to original HTML file
<br />run the following command to create AEM component
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash
<br />  npx aem-htl-builder convert
<br /></code>``
<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div><!--/$--></main></div><!--$?--><!--/$--><!--/$--><!--$--><!--/$--><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"aem-htl-builder\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"aem-htl-builder\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"aem-htl-builder - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Module for Adobe Experience Manager (AEM) to automate the conversion of HTML code into Sightly, as well as generate the associated Java Sling Models and XML dialogs, aiming to streamline the development process of AEM components.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>aem-htl-builder - npm explorer
aem-htl-builder
v1.0.8
Module for Adobe Experience Manager (AEM) to automate the conversion of HTML code into Sightly, as well as generate the associated Java Sling Models and XML dialogs, aiming to streamline the development process of AEM components.
AEMHTLHTMLSightlyConverterComponent
3/weekUpdated 2 years agoISCUnpacked: 198.9 KB
Published by markdept
npm install aem-htl-builder
RepositoryHomepagenpm
AEM - Htl - Builder

The goal of this project is to automize the process of translating the html file into sightly

and generating AEM components. This project is being developed as a part of the IT Graduation project.



Please feel free to leave any feedback or remarks about the project on the github discussion page.



License

This project is licensed under the MIT License - see the LICENSE.txt file for details.



Installation

$3

Make sure to install as well node.js and npm



Node.js :

1. Project version: 18.12.1

2. Installation guide: https://nodejs.org/en/download



Npm:

1. Project version: 8.19.2

2. Installation guide: https://docs.npmjs.com/cli/v8/commands/npm-install



$3

Install aem-htl-builder with npm



``bash

  npm i aem-htl-builder

`



$3

If you cloned this repository instead of installing it via npm, to run the scripts go to 

package.json file and run the scripts from there.





Configuration

After installing the module, you need to set up a configuration file.

Run the following command to create an empty configuration file.

`bash

  npx aem-htl-builder configure

` 

Now that the file has been created you need to configure it.

Here is an example of valid configuration file:



`json

{

  "project": {

    "aemProjectPath": "/Users/username/projects/mysite",

    "rootPackage": "com.mysite.core",

    "componentGroup": "MySite - Content",

    "appName" : "mysite"

  },

  "html": {

    "useSingleFile": true,

    "singleFilePath": "/Users/username/html-files/test.html",

    "directoryPath": "/Users/username/html-files"

  }

}

`



And below is the  detailed description of what each field does:

1. To configure the project object:

- aemProjectPath: Specify the absolute path to your local AEM project.

- rootPackage: Specify the directory holding AEM Sling models. You can find it at aemProjectName/core/src/main/java/

- componentGroup: Specify the component group to which the components will be added. 

- appName: The appName field represents the name of the root folder within the aemProjectName/ui.apps/src/main/content/jcr_root/apps/ directory in your AEM project. This folder contains your project-specific components, templates, and other resources.

2. To configure the html object:

- useSingleFile: If set to true, the module will read and use the HTML file from the singleFilePath field. If set to false, the module will prompt the user to select an HTML file via the terminal from directoryPath.

- singleFilePath : Specify the path to an existing HTML file.

- directoryPath : Specify the path to an existing directory containing HTML files which you will use do build AEM component.



$3

You can also set-up configuration by simply running the script with already specified parameters (example below):

`bash

aem-htl-builder configure \

--aemProjectPath="/Users/username/projects/mysite" \

--rootPackage="com.mysite.core" \

--componentGroup="MySite - Content" \

--appName="mysite" \

--useSingleFile=true \

--singleFilePath="/Users/username/html-files/test.html" \

--directoryPath="/Users/username/html-files"

`



Syntax

This section provides a detailed guide on how to prepare your HTML for processing by this module. 

It covers the necessary attribute HTML syntax for each AEM component field type.



Here is a list of all the attributes that are currently supported by the module:

- textfield-[VarName]

- textarea-[VarName]

- checkbox-[VarName]

- link-[VarName]

- img-[VarName]

- select-[VarName]

- description

- i18n-[VarName]

- list-[VarName]



The [VarName] placeholder represents the variable name you choose for the field and should be replaced by the actual name in your HTML.

$3

To add a textfield to your component, you need to follow these steps:



Add the textfield-[VarName] attribute to your paragraph tag, replacing [VarName] with your chosen field name.

- HTML Original:

`html

 Component Title 

`

- What module expects:

`html

 Component Title 

`



$3

To add a textarea to your component, you need to follow these steps:



Add the textarea-[VarName] attribute to your paragraph tag, replacing [VarName] with your chosen field name.

- HTML Original:

`html

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

`



- What module expects:

`html

 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

`



$3

- HTML Original:

`html



    Species: Human



`

- What module expects:

`html



    Species: Human



`

$3

To add a link to your component, you need to follow these steps:



Add the link-[VarName] attribute to your paragraph tag, replacing [VarName] with your chosen field name.

- HTML Original:

`html



    Click Here



`



- What module expects:

`html



    Click Here



`

$3

To add an image to your component, you need to follow these steps:



Add the img-[VarName] attribute to your html tag, replacing [VarName] with your chosen field name.



- HTML Original:

`html



`

- What module expects:

`html



`

$3

- ~~HTML:~~

`html



`



$3

If you have an element in your html which will be used for i18n you will need to:



Add the i18n-[VarName] attribute to your html tag, replacing [VarName] with your chosen field name.

- HTML Original:

`html



    Location

    Contact



`



- What module expects:

`html



    Location

    Contact



`



After running aem-htl-builder convert command following will be added to:

- en.json:

`json

{

    "Location": "Location",

    "Contact": "Contact"

}

`



#### Note

If there is already in en.json file the key with the same name e.g. 'Location' this example would override

its value with new one.



$3

The description requires the presence of another attribute from the list.

- HTML Original:

`html

 Component Title 

`

- What module expects:

`html

 Component Title 

`

textfield-title serves as an example and it can be as well e.g. img-varName , link-varName etc.

$3

If you want to add a list to your component, you need to follow these steps:



Add the list-[VarName] attribute to  tag, replacing [VarName] with your chosen list name.



- HTML Original:

`html



    

        

            Margherita

        

        10.99 €

    

    

        

            Pepperoni

        

        Click the link here!

        13.99 €

    



`

- What module expects:

`html



    

        

            Margherita

        

        10.99 €

    

    

        

            Pepperoni

        

        Click the link here!

        13.99 €

    



`

Notice that since this is a list you need to add attributes only to elements which you want to include in the list (multifield) only once.



After running aem-htl-builder convert command following code will be added to component dialog:



`xml

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"

        fieldLabel="pizzasModel"

        composite="{Boolean}true">

               sling:resourceType="granite/ui/components/coral/foundation/container"

           name="./pizzasModel">

        

                                jcr:primaryType="nt:unstructured"
<br />                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
<br />                    fieldLabel="title"
<br />                    name="./title"/>
<br />            <price
<br />                    jcr:primaryType="nt:unstructured"
<br />                    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
<br />                    fieldLabel="price"
<br />                    name="./price"/>
<br />            <pizzaLinkContainer
<br />                    jcr:primaryType="nt:unstructured"
<br />                    jcr:title="pizzaLink Container"
<br />                    sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
<br />                <items jcr:primaryType="nt:unstructured">
<br />                    <pizzaLinkCheckbox
<br />                            jcr:primaryType="nt:unstructured"
<br />                            sling:resourceType="granite/ui/components/foundation/form/checkbox"
<br />                            text="Open link in another tab."
<br />                            name="./pizzaLinkCheckbox"
<br />                            value="true"/>
<br />                    <pizzaLink
<br />                            jcr:primaryType="nt:unstructured"
<br />                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
<br />                            fieldLabel="pizzaLink"
<br />                            name="./pizzaLink"
<br />                            required="{Boolean}false"
<br />                            rootPath="/content"/>
<br />                </items>
<br />            </pizzaLinkContainer>
<br />        </items>
<br />    </field>
<br /></pizzasModelList>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /><em>The module will as well add the original HTML list as a comment under the newly converted list.</em>
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Convert HTML to Sightly</h2>
<br />After successfully setting up configuration, and adding custom attributes to original HTML file
<br />run the following command to create AEM component
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash
<br />  npx aem-htl-builder convert
<br /></code>``
<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"27:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n28:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0-rc.12\"}]\n29:[\"$\",\"$L5\",\"commander\",{\"href\":\"/package/commander\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"commander\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^10.0.0\"}]]}]\n2a:[\"$\",\"$L5\",\"ejs\",{\"href\":\"/package/ejs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ejs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.1.8\"}]]}]\n2b:[\"$\",\"$L5\",\"fs-extra\",{\"href\":\"/package/fs-extra\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"fs-extra\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.1.1\"}]]}]\n2c:[\"$\",\"$L5\",\"inquirer\",{\"href\":\"/package/inquirer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"inquirer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.1.4\"}]]}]\n2d:[\"$\",\"$L5\",\"inquirer-directory\",{\"href\":\"/package/inquirer-directory\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 tra"])</script><script>self.__next_f.push([1,"nsition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"inquirer-directory\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]]}]\n2e:[\"$\",\"$L5\",\"inquirer-file-tree-selection-prompt\",{\"href\":\"/package/inquirer-file-tree-selection-prompt\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"inquirer-file-tree-selection-prompt\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.5\"}]]}]\n2f:[\"$\",\"$L5\",\"joi\",{\"href\":\"/package/joi\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"joi\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^17.9.1\"}]]}]\n30:[\"$\",\"$L5\",\"jquery\",{\"href\":\"/package/jquery\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jquery\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.7.0\"}]]}]\n31:[\"$\",\"$L5\",\"jsdom\",{\"href\":\"/package/jsdom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jsdom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^22.1.0\"}]]}]\n32:[\"$\",\"$L5\",\"nanospinner\",{\"href\":\"/package/nanospinner\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,"])</script><script>self.__next_f.push([1,"\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"nanospinner\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.0\"}]]}]\n33:[\"$\",\"$L5\",\"process\",{\"href\":\"/package/process\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"process\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.11.10\"}]]}]\n34:[\"$\",\"$L5\",\"translate\",{\"href\":\"/package/translate\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"translate\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.4.1\"}]]}]\n"])</script><script>self.__next_f.push([1,"35:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"java-parser\",{\"href\":\"/package/java-parser\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"java-parser\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.3\"}]]}],[\"$\",\"$L5\",\"jest\",{\"href\":\"/package/jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^29.5.0\"}]]}]]}]}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>