fix(react): add alternative approach for setting the asset path

Co-authored-by: Boris Diakur <borisdiakur@gmail.com>

globals.d.ts

@@ -1,8 +1,13 @@
 declare global {
   namespace jest {
     interface Matchers<R> {
-      toHaveNoPa11yViolations(): R
+      toHaveNoAccessibilityIssues(): R
     }
   }
+
+  interface Window {
+    __LD_ASSET_PATH__?: string
+  }
 }
+
 export {}

src/docs/pages/component-assets.md

@@ -47,6 +47,8 @@ import { setAssetPath } from '@emdgroup-liquid/liquid/dist/components'
 setAssetPath(window.location.origin)
 ```
 
+> `setAssetPath` does not work for React bindings. Please take a look at the [React bindings docs](introduction/react-bindings#setting-the-asset-path) for an alternative approach.
+
 For more examples check out our [sandbox apps](introduction/sandbox-applications/).
 
-<docs-page-nav prev-href="introduction/css-vs-web-components/" next-title="Type checking and intellisense" next-href="introduction/type-checking-and-intellisense/"></docs-page-nav>
+<docs-page-nav prev-href="introduction/css-vs-web-components/" next-title="Type checking and intellisense" next-href="introduction/type-checking-and-intellisense/"></docs-page-nav>

src/docs/pages/react-bindings.md

@@ -31,4 +31,16 @@ A positive side-effect of using React bindings is, that you do not need to call
 
 For more details on React integration read the [Stencil documentation](https://stenciljs.com/docs/react).
 
+## Setting the asset path
+
+When using React bindings, you do not need to use the `setAssetPath` function to define the asset path for components like `ld-icon`. All you need to do is define a global variable on the `window` object to "tell" the Liquid components where they have to load their assets from:
+
+```js
+  // if-clause only required when your code might also be executed
+  // on the server-side like with Next.js
+  if (typeof window !== "undefined") {
+    window.__LD_ASSET_PATH__ = window.location.origin + '/path/to/your/assets/';
+  }
+```
+
 <docs-page-nav prev-href="introduction/server-side-rendering/" next-title="Tailwind CSS integration" next-href="introduction/tailwindcss-integration/"></docs-page-nav>

src/docs/pages/type-checking-and-intellisense.md

@@ -35,6 +35,11 @@ declare global {
   namespace JSX {
     interface IntrinsicElements extends LiquidElements<LocalJSX.IntrinsicElements> {}
   }
+
+  // Required only when using React bindings
+  interface Window {
+    __LD_ASSET_PATH__?: string
+  }
 }
 ```
 

src/liquid/components/ld-bg-cells/ld-bg-cells.tsx

@@ -1,5 +1,6 @@
-import { Component, getAssetPath, h, Host, Prop } from '@stencil/core'
+import { Component, h, Host, Prop } from '@stencil/core'
 import { getClassNames } from '../../utils/getClassNames'
+import { getLdAssetPath } from '../../utils/getLdAssetPath'
 import '../../components' // type definitions for type checks and intelliSense
 
 export type CellType =
@@ -30,7 +31,7 @@ export class LdBgCells {
   @Prop() type: CellType = 'safc'
 
   render() {
-    const assetPath = getAssetPath(`./assets/${this.type}-cell.svg`)
+    const assetPath = getLdAssetPath(`./assets/${this.type}-cell.svg`)
 
     return (
       <Host class={getClassNames(['ld-bg-cells', `ld-bg-cells--${this.type}`])}>

src/liquid/components/ld-icon/fetchIcon.ts

@@ -1,4 +1,4 @@
-import { getAssetPath } from '@stencil/core'
+import { getLdAssetPath } from '../../utils/getLdAssetPath'
 
 const iconCache = {}
 const requestCache = {}
@@ -8,7 +8,7 @@ export async function fetchIcon(icon: string): Promise<string> {
     return iconCache[icon]
   }
   if (!requestCache[icon]) {
-    requestCache[icon] = fetch(getAssetPath(`./assets/${icon}.svg`))
+    requestCache[icon] = fetch(getLdAssetPath(`./assets/${icon}.svg`))
       .then((resp) => resp.text())
       .catch((err) => {
         console.error(`"${icon}" is not a valid name`, err)

src/liquid/components/ld-icon/ld-icon.tsx

@@ -1,5 +1,5 @@
 import { Build, Component, Host, h, Prop, Watch, Element } from '@stencil/core'
-import { getClassNames } from 'src/liquid/utils/getClassNames'
+import { getClassNames } from '../../utils/getClassNames'
 import { fetchIcon } from './fetchIcon'
 
 /**

src/liquid/utils/e2e-tests.ts

@@ -134,15 +134,6 @@ function getInvalidRuleInfo(rule) {
   } nodes\r\n${rule.nodes.map(getInvalidNodeInfo).join('\n')}`
 }
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace jest {
-    interface Matchers<R> {
-      toHaveNoAccessibilityIssues(): R
-    }
-  }
-}
-
 // Add a new method to expect assertions with a very detailed error report
 expect.extend({
   toHaveNoAccessibilityIssues(accessibilityReport, options) {

src/liquid/utils/getLdAssetPath.ts

@@ -0,0 +1,26 @@
+import { getAssetPath } from '@stencil/core'
+
+/**
+ * Reads asset path config from a global variable, if available,
+ * and uses this instead of Stencil's getAssetPath function.
+ *
+ * This is a workaround until the following issue is resolved:
+ * https://github.com/ionic-team/stencil-ds-output-targets/issues/186
+ */
+export const getLdAssetPath = (path: string) => {
+  if (typeof window !== 'undefined' && window.__LD_ASSET_PATH__) {
+    let finalPath = path
+
+    if (path.startsWith('./')) {
+      finalPath = path.substring(2)
+    }
+
+    if (!window.__LD_ASSET_PATH__.endsWith('/')) {
+      finalPath = '/' + finalPath
+    }
+
+    return window.__LD_ASSET_PATH__ + finalPath
+  }
+
+  return getAssetPath(path)
+}

tsconfig.docs.json

@@ -1,5 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["src"],
+  "include": ["src", "./globals.d.ts"],
   "exclude": ["node_modules"]
 }

tsconfig.json

@@ -24,6 +24,6 @@
       "module": "CommonJS"
     }
   },
-  "include": ["./src/liquid", "./src/types"],
+  "include": ["./src/liquid", "./src/types", "./globals.d.ts"],
   "exclude": ["node_modules", "bin", "./src/liquid/**/*.a11y.ts"]
 }