From afda74e99ecb8c85471fc8997749ad8f3f46491e Mon Sep 17 00:00:00 2001
From: Miguel Montalvo <montalvomiguelo@users.noreply.github.com>
Date: Sat, 11 Mar 2023 20:45:18 +0000
Subject: [PATCH] Html fix (#64)

---
 examples/vite-shopify-example/.gitignore             |  2 +-
 examples/vite-shopify-example/layout/theme.liquid    | 12 ++++++------
 .../vite-shopify-example/sections/cart-drawer.liquid |  2 +-
 examples/vite-shopify-example/vite.config.ts         |  2 +-
 packages/vite-plugin-shopify/src/html.ts             | 10 ++++++----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/examples/vite-shopify-example/.gitignore b/examples/vite-shopify-example/.gitignore
index 36fa3929..b25ba532 100644
--- a/examples/vite-shopify-example/.gitignore
+++ b/examples/vite-shopify-example/.gitignore
@@ -1,2 +1,2 @@
 /assets
-/snippets/vite-tag.liquid
+/snippets/vite.liquid
diff --git a/examples/vite-shopify-example/layout/theme.liquid b/examples/vite-shopify-example/layout/theme.liquid
index 4cc2faec..2c32d035 100755
--- a/examples/vite-shopify-example/layout/theme.liquid
+++ b/examples/vite-shopify-example/layout/theme.liquid
@@ -12,12 +12,12 @@
   <meta name="description" content="">
 
   {%- liquid
-    render 'vite-tag' with 'theme.scss', preload_stylesheet: true
-    render 'vite-tag' with 'theme.ts'
-    render 'vite-tag' with '@/foo.ts'
-    render 'vite-tag' with '~/bar.ts'
-    render 'vite-tag' with '/resources/js/baz.js'
-    render 'vite-tag' with '@modules/qux.ts'
+    render 'vite' with 'theme.scss', preload_stylesheet: true
+    render 'vite' with 'theme.ts'
+    render 'vite' with '@/foo.ts'
+    render 'vite' with '~/bar.ts'
+    render 'vite' with '/resources/js/baz.js'
+    render 'vite' with '@modules/qux.ts'
   -%}
 
   {{ content_for_header }}
diff --git a/examples/vite-shopify-example/sections/cart-drawer.liquid b/examples/vite-shopify-example/sections/cart-drawer.liquid
index b3c679a8..ca12b524 100644
--- a/examples/vite-shopify-example/sections/cart-drawer.liquid
+++ b/examples/vite-shopify-example/sections/cart-drawer.liquid
@@ -1 +1 @@
-{%- render 'vite-tag' with '@@/cart-drawer.js' -%}
+{%- render 'vite' with '@@/cart-drawer.js' -%}
diff --git a/examples/vite-shopify-example/vite.config.ts b/examples/vite-shopify-example/vite.config.ts
index d539ab71..6574557d 100644
--- a/examples/vite-shopify-example/vite.config.ts
+++ b/examples/vite-shopify-example/vite.config.ts
@@ -19,7 +19,7 @@ export default defineConfig({
   plugins: [
     basicSsl(),
     shopify({
-      snippetFile: 'vite-tag.liquid',
+      snippetFile: 'vite.liquid',
       additionalEntrypoints: [
         'frontend/foo.ts', // relative to sourceCodeDir
         'frontend/bar.ts',
diff --git a/packages/vite-plugin-shopify/src/html.ts b/packages/vite-plugin-shopify/src/html.ts
index 5d72df72..ad595ed6 100644
--- a/packages/vite-plugin-shopify/src/html.ts
+++ b/packages/vite-plugin-shopify/src/html.ts
@@ -15,6 +15,7 @@ export default function shopifyHTML (options: Required<VitePluginShopifyOptions>
   let viteDevServerUrl: DevServerUrl
 
   const viteTagSnippetPath = path.resolve(options.themeRoot, `snippets/${options.snippetFile}`)
+  const viteTagSnippetName = options.snippetFile.replace(/\.[^.]+$/, '')
 
   return {
     name: 'vite-plugin-shopify-html',
@@ -39,7 +40,7 @@ export default function shopifyHTML (options: Required<VitePluginShopifyOptions>
 
           debug({ address, viteDevServerUrl })
 
-          const viteTagSnippetContent = viteTagDisclaimer + viteTagEntryPath(config.resolve.alias, options.entrypointsDir) + viteTagSnippetDev(viteDevServerUrl, options.entrypointsDir)
+          const viteTagSnippetContent = viteTagDisclaimer + viteTagEntryPath(config.resolve.alias, options.entrypointsDir, viteTagSnippetName) + viteTagSnippetDev(viteDevServerUrl, options.entrypointsDir)
 
           // Write vite-tag snippet for development server
           fs.writeFileSync(viteTagSnippetPath, viteTagSnippetContent)
@@ -126,7 +127,7 @@ export default function shopifyHTML (options: Required<VitePluginShopifyOptions>
         }
       })
 
-      const viteTagSnippetContent = viteTagDisclaimer + viteTagEntryPath(config.resolve.alias, options.entrypointsDir) + assetTags.join('\n') + '\n{% endif %}\n'
+      const viteTagSnippetContent = viteTagDisclaimer + viteTagEntryPath(config.resolve.alias, options.entrypointsDir, viteTagSnippetName) + assetTags.join('\n') + '\n{% endif %}\n'
 
       // Write vite-tag snippet for production build
       fs.writeFileSync(viteTagSnippetPath, viteTagSnippetContent)
@@ -139,7 +140,8 @@ const viteTagDisclaimer = '{% comment %}\n  IMPORTANT: This snippet is automatic
 // Generate liquid variable with resolved path by replacing aliases
 const viteTagEntryPath = (
   resolveAlias: Array<{ find: string | RegExp, replacement: string }>,
-  entrypointsDir: string
+  entrypointsDir: string,
+  snippetName: string
 ): string => {
   const replacements: Array<[string, string]> = []
 
@@ -149,7 +151,7 @@ const viteTagEntryPath = (
     }
   })
 
-  return `{% assign path = vite-tag | ${replacements.map(([from, to]) => `replace: '${from}/', '${to}/'`).join(' | ')} %}\n`
+  return `{% assign path = ${snippetName} | ${replacements.map(([from, to]) => `replace: '${from}/', '${to}/'`).join(' | ')} %}\n`
 }
 
 // Generate conditional statement for entry tag