From 140b29822c807767c1373d14f53db0c3e2aa8b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20K=C3=B6ppel?= <marco.koeppel@googlemail.com>
Date: Tue, 21 Feb 2023 11:23:19 +0100
Subject: [PATCH] feat: introduces default asset path to jsDelivr

---
 src/liquid/utils/assetPath.ts | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/liquid/utils/assetPath.ts b/src/liquid/utils/assetPath.ts
index 1106b22e35..2196b7f82c 100644
--- a/src/liquid/utils/assetPath.ts
+++ b/src/liquid/utils/assetPath.ts
@@ -1,4 +1,7 @@
 import { Build } from '@stencil/core'
+import { version } from '../../../package.json'
+
+let missingAssetPathWarningDisplayed = false
 
 /**
  * Reads components asset path config from meta tag or global variable.
@@ -7,12 +10,32 @@ import { Build } from '@stencil/core'
  * https://github.com/ionic-team/stencil-ds-output-targets/issues/186
  */
 export const getAssetPath = (path: string) => {
+  // Get asset path from meta tag if available
+  const metaLdAssetPath = document.head.querySelector<HTMLMetaElement>(
+    'meta[data-ld-asset-path]'
+  )?.dataset.ldAssetPath
+  // Get asset path from window if available
+  const windowLdAssetPath = window.__LD_ASSET_PATH__
+  // Uses CDN as fallback if no asset path is set
+  const cdnAssetPath = `https://cdn.jsdelivr.net/npm/@emdgroup-liquid/liquid${
+    version ? '@' + version : ''
+  }/dist/liquid/`
+
   const assetBasePath = Build.isTesting
     ? '/dist/liquid'
-    : document.head.querySelector<HTMLMetaElement>('meta[data-ld-asset-path]')
-        ?.dataset.ldAssetPath ||
-      window.__LD_ASSET_PATH__ ||
-      '/'
+    : metaLdAssetPath || windowLdAssetPath || cdnAssetPath || '/'
+
+  // Display warning if assets are fetched from CDN. This is only displayed once.
+  if (
+    assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') &&
+    !missingAssetPathWarningDisplayed
+  ) {
+    missingAssetPathWarningDisplayed = true
+    console.warn(
+      `Fetching Liquid Oxygen assets from jsDelivr CDN.\n\nWe recommend bundling Liquid Oxygen assets with your application and setting the asset path accordingly.\n\nFor more information see the documentation:\nhttps://liquid.merck.design/liquid/guides/component-assets/`
+    )
+  }
+
   let assetPath = path
 
   if (path.startsWith('./')) {