Merge pull request #21 from vtex/fix/cors

CHK-192: Add query string to request in order to avoid CORS issue

Author: lucasecdb

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+rollup.config.js
+lib

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "vtex",
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "rules": {
+    "no-console": "off",
+    "@typescript-eslint/no-namespace": "off"
+  }
+}

.prettierrc

@@ -1,6 +1 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "jsxBracketSameLine": true
-}
+"@vtex/prettier-config"

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.2] - 2020-08-06
+### Fixed
+- Include origin to requests in order to bypass cache and avoid CORS issue.
+
 ## [0.2.1] - 2020-06-23
 ### Fixed
 - Add global `__RUNTIME__` data local `runtime`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/render-extension-loader",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "VTEX IO Render Extension Loader",
   "main": "lib/render-extension-loader.js",
   "browser": "lib/render-extension-loader.js",
@@ -9,7 +9,7 @@
     "serve": "serve",
     "build": "rollup -c",
     "watch": "rollup -c -w",
-    "lint": "tsc --noEmit && tslint src/**/*.ts",
+    "lint": "tsc --noEmit && eslint .",
     "prepublishOnly": "run-s lint build",
     "prereleasy": "npm run lint",
     "postreleasy": "npm publish --access public"
@@ -25,14 +25,17 @@
   "homepage": "https://github.com/vtex/render-extension-loader#readme",
   "dependencies": {},
   "devDependencies": {
-    "@types/node": "^7.0.5",
+    "@types/jquery": "^3.5.1",
+    "@types/node": "^14.0.27",
+    "@vtex/prettier-config": "^0.3.1",
+    "eslint": "^7.6.0",
+    "eslint-config-vtex": "^12.8.2",
     "npm-run-all": "^4.1.2",
+    "prettier": "^2.0.5",
     "rollup": "^0.58.1",
     "rollup-plugin-typescript2": "^0.13.0",
     "rollup-plugin-uglify": "^3.0.0",
     "serve": "^6.5.5",
-    "tslint": "^5.2.0",
-    "tslint-config-vtex": "^2.0.0",
-    "typescript": "^2.4.2"
+    "typescript": "^3.9.7"
   }
 }

src/render-extension-loader.ts

@@ -3,9 +3,16 @@ declare global {
     __RENDER_6_RUNTIME__: any
     __RENDER_7_RUNTIME__: any
     __RUNTIME__: any
-    $: any
+    $: typeof import('jquery')
     RenderExtensionLoader: any
   }
+
+  namespace JQuery {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    interface jqXHR<TResolve> {
+      retry: (opts: { timeout?: number; times?: number }) => TResolve
+    }
+  }
 }
 
 class RenderExtensionLoader {
@@ -43,26 +50,27 @@ class RenderExtensionLoader {
         ? 'myvtexdev.com'
         : 'myvtex.com')
     this.get = window.$
-      ? url =>
+      ? (url: string) =>
           window.$.ajax({ url, timeout: this.timeout }).retry({
             timeout: 2000,
             times: 2,
           })
       : window.fetch
-      ? url =>
+      ? (url: string) =>
           new Promise((resolve, reject) => {
             const fetchTimeout = setTimeout(() => {
               reject({ error: 'timeout' })
             }, this.timeout)
 
             window
               .fetch(url)
-              .then(res => {
+              .then((res) => {
                 clearTimeout(fetchTimeout)
+
                 return res
               })
-              .then(res => res.json())
-              .then(res => resolve(res))
+              .then((res) => res.json())
+              .then((res) => resolve(res))
           })
       : null
 
@@ -106,7 +114,7 @@ class RenderExtensionLoader {
     return this.runtime
   }
 
-  public update = runtimeOrUpdateFn => {
+  public update = (runtimeOrUpdateFn) => {
     if (typeof runtimeOrUpdateFn === 'function') {
       this.runtime = runtimeOrUpdateFn(this.runtime)
     } else {
@@ -129,6 +137,7 @@ class RenderExtensionLoader {
 
     this.time('render-extension-loader:render')
     const runtime = window[`__RENDER_${this.renderMajor}_RUNTIME__`]
+
     runtime.render(extension, this.runtime, element)
     this.timeEnd('render-extension-loader:render')
 
@@ -138,17 +147,22 @@ class RenderExtensionLoader {
   private loadExtensionPointsContext = async () => {
     this.time('render-extension-loader:json')
     const { runtime, styles, scripts } = await this.get(
-      `https://${this.workspace}--${this.account}.${this.publicEndpoint}/legacy-extensions${this.path}?__disableSSR&locale=${this.locale}&v=3`
+      `https://${this.workspace}--${this.account}.${this.publicEndpoint}/legacy-extensions${this.path}?__disableSSR&locale=${this.locale}&v=3&origin=${window.location.hostname}`
     )
+
     this.timeEnd('render-extension-loader:json')
 
     for (const key in window.__RUNTIME__ || {}) {
-      if (window.__RUNTIME__.hasOwnProperty(key) && runtime[key] === undefined) {
+      if (
+        Object.prototype.hasOwnProperty.call(window.__RUNTIME__, key) &&
+        runtime[key] === undefined
+      ) {
         runtime[key] = window.__RUNTIME__[key]
       }
     }
 
     this.setGlobalContext({ runtime, styles, scripts })
+
     return { runtime, styles, scripts }
   }
 
@@ -164,23 +178,26 @@ class RenderExtensionLoader {
 
   private getExistingScriptSrcs = () => {
     const paths = []
+
     for (let i = 0; i < document.scripts.length; i++) {
       paths.push(document.scripts.item(i).src)
     }
+
     return paths
   }
 
-  private scriptOnPage = path => {
-    return this.getExistingScriptSrcs().some(src => src.indexOf(path) !== -1)
+  private scriptOnPage = (path) => {
+    return this.getExistingScriptSrcs().some((src) => src.indexOf(path) !== -1)
   }
 
-  private addScriptToPage = src => {
+  private addScriptToPage = (src) => {
     return new Promise((resolve, reject) => {
       if (this.scriptOnPage(src)) {
         return resolve()
       }
 
       const script = document.createElement('script')
+
       script.crossOrigin = 'anonymous'
       script.onload = () => resolve()
       script.onerror = () => reject()
@@ -190,21 +207,22 @@ class RenderExtensionLoader {
     })
   }
 
-  private addStyleToPage = href => {
+  private addStyleToPage = (href) => {
     const link = document.createElement('link')
+
     link.href = href
     link.type = 'text/css'
     link.rel = 'stylesheet'
     document.head.appendChild(link)
   }
 
-  private time = label => {
+  private time = (label) => {
     if (this.verbose) {
       console.time(label)
     }
   }
 
-  private timeEnd = label => {
+  private timeEnd = (label) => {
     if (this.verbose) {
       console.timeEnd(label)
     }