Importing Multiple ColdFusion Custom Tag Directories Using The Same Prefix

One of the nice things you can do with ColdFusion custom tags is import a given directory of custom tags into a "prefix". This allows custom tags to be aliased in the CFML markup; which is a technique that I use quite heavily in my Domain Specific Language (DSL) for generating Emails. One additional feature that I just learned about this prefixing functionality is that you can import multiple directories under the same prefix.

As I try to decide if I'm going to start my next project in Hotwire or Angular, one idea that I'm playing with is creating a design system using ColdFusion custom tags. Essentially, I want to be able to take some of the UI (User Interface) encapsulation techniques that I learned in Angular and apply them to Hotwire.

In Angular, I have my design system organized into different folders so that I don't end up with a hundred files in one place. Hoping to do the same thing with my ColdFusion design system, I wanted to see if I could aggregate different custom tags under the same prefix.

For example, I have a "Checkbox" custom tag at:

./design-system/checkbox/Checkbox.cfm

<div>
	<mark>[Checkbox]</mark>
</div>

And, I have a "Radio Button" custom tag at:

./design-system/radio/Radio.cfm

<div>
	<mark>[Radio]</mark>
</div>

Now, what I want to do is be able to import both of those custom tags under the same prefix (ui:):

<!--- Notice that are are grouping MULTIPLE PATHS under the SAME PREFIX (ui). --->
<cfimport prefix="ui" taglib="./design-system/checkbox/" />
<cfimport prefix="ui" taglib="./design-system/radio/" />

<p>
	Product: <cfoutput>#server.coldfusion.productName#</cfoutput>
</p>

<!---
		These are two different ColdFusion custom tags, pulled from two different
		directories, but referenced under the same prefix (ui:).
--->
<ui:Checkbox>
<ui:Radio>

As you can see, I have two CFImport tags, one for each of the custom tags that I want to use in my view rendering. And, each of these tags is targeting the ui: prefix. Now, if I run this is in both Lucee CFML and Adobe ColdFusion, I get the following output:

As you can see, both the Checkbox.cfm custom tag and the Radio.cfm custom tag - which live in separate directories - were both imported and consumed under the ui: prefix. This CFML feature is super convenient for related custom tags that work together but aren't necessarily collocated in the same place.

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/4460