fix: Support using include tag for snippets

Author: t-kelly

package-lock.json

@@ -7,7 +7,7 @@ import { LiquidNode } from './types.js'
 
 const LIQUID_BLOCK_REGEX = /{%-?.*?-?%}/gs
 const LIQUID_COMMENTS_REGEX = /{%-?\s*comment\s*-?%}[\S\s]*?{%-?\s*endcomment\s*-?%}/gi
-const LIQUID_RENDER_REGEX = /\srender\s+'([^']+)'/gs
+const LIQUID_RENDER_REGEX = /\s(?:render|include)\s+'([^']+)'/gs
 const ASSET_URL_REGEX = /{{\s*'([^']+\.js)'\s*\|\s*asset_url\s*}}/g
 const SCRIPT_TAG_REGEX = /<script[^>]*>[\S\s]*?<\/script>/g
 const SCRIPT_IMPORT_REGEX = /import\s+["']([^"']+)["']/g
@@ -119,10 +119,27 @@ export async function getCollectionNodes(collectionDir: string): Promise<LiquidN
   return Promise.all([...collectionSnippets, ...collectionComponents, ...collectionAssets, ...collectionScripts, ...collectionSetup])
 }
 
+function findThemeFolder(file: string, themeDir: string): LiquidNode['themeFolder'] {
+  const themeFolders = new Set<LiquidNode['themeFolder']>(['layout', 'sections', 'blocks', 'templates'])
+  let currentDir = path.dirname(file)
+  
+  while (currentDir !== themeDir && currentDir !== path.dirname(themeDir)) {
+    const folderName = path.basename(currentDir)
+    if (themeFolders.has(folderName as LiquidNode['themeFolder'])) {
+      return folderName as LiquidNode['themeFolder']
+    }
+
+    currentDir = path.dirname(currentDir)
+  }
+  
+  // Fallback to the immediate parent directory if no theme folder is found
+  return path.basename(path.dirname(file)) as LiquidNode['themeFolder']
+}
+
 export async function getThemeNodes(themeDir: string): Promise<LiquidNode[]> {
   const entryNodes = globSync(path.join(themeDir, '{layout,sections,blocks,templates}', '**/*.liquid'), { absolute: true })
     .map(file => { 
-      const parentFolderName = path.basename(path.dirname(file)) as LiquidNode['themeFolder']
+      const parentFolderName = findThemeFolder(file, themeDir)
       return generateLiquidNode(file, 'entry', parentFolderName)
     })
   const themeSnippets = globSync(path.join(themeDir, 'snippets', '**/*.liquid'), { absolute: true })

src/utilities/nodes.ts

@@ -64,14 +64,16 @@ describe('theme component map', () => {
     expect(beforeData.files.assets['missing.css']).to.be.undefined
     expect(beforeData.files.snippets['missing.liquid']).to.be.undefined
     expect(beforeData.files.snippets['missing-subfolder.liquid']).to.be.undefined
+    expect(beforeData.files.snippets['include-tag.liquid']).to.be.undefined
 
     await runCommand(['theme', 'component', 'map', testThemePath])
 
     // Check that missing entries are present in map
     const data = JSON.parse(fs.readFileSync(path.join(testThemePath, 'component.manifest.json'), 'utf8'))
-    expect(data.files.assets['missing.css']).to.equal('@theme')
-    expect(data.files.snippets['missing.liquid']).to.equal('@theme')
-    expect(data.files.snippets['missing-subfolder.liquid']).to.equal('@theme')
+    expect(data.files.assets['missing.css']).to.equal('@theme') // Should work with assets
+    expect(data.files.snippets['missing.liquid']).to.equal('@theme') // Should work with render tag
+    expect(data.files.snippets['missing-subfolder.liquid']).to.equal('@theme') // Should work with subfolders
+    expect(data.files.snippets['include-tag.liquid']).to.equal('@theme') // Should work with include tag
   })
 
   it('adds entries for newly referenced components from current collection', async () => {

test/commands/theme/component/map.test.ts

@@ -0,0 +1 @@
+{% include 'include-tag' %}

test/fixtures/theme/sections/include-tag.liquid

@@ -0,0 +1 @@
+{% comment %} This snippet is included using the include tag instead of render {% endcomment %}