Merge pull request #63 from contentstack/feature/live-preview

Feature/live preview

Author: uttamukkoji

.gitignore

@@ -1,6 +1,5 @@
 *.DS_Store
-examples/*
-node_modules/*
+**/node_modules/*
 .idea/*
 reports/*
 apidocs-templates/*
@@ -10,4 +9,5 @@ test/sync_config.js/*
 test/report.json/*
 tap-html.html
 *html-report
-coverage
+coverage
+.env

CHANGELOG.md

@@ -1,4 +1,8 @@
 ## Change log
+### Version: 3.14.0
+#### Date: Oct-19-2021
+#####  New Features:
+ - Live preview feature support added
 
 ### Version: 3.13.2
 #### Date: May-26-2021

index.d.ts

@@ -61,14 +61,25 @@ export interface StackConfig {
 
 // ContentTypeCollection
 export interface ContentTypeCollection{
-    contentTypes: Array<any>
+    content_types: Array<any>
     count?: number
 }
 
+export interface LivePreview {
+    host: string
+    authorization: string
+    enable: boolean
+}
+
+export interface LivePreviewQuery {
+    hash: string
+    content_type_uid: string
+}
+
 // Stack 
 export class Stack {
     constructor(config: Config);
-    constructor(api_key: string, delivery_token: string, environment_name: string, region?: Region, fetchOptions?: any);
+    constructor(api_key: string, delivery_token: string, environment_name: string, region?: Region, fetchOptions?: any, live_preview?: LivePreview);
 
     environment: string;
     cachePolicy: CachePolicy;
@@ -84,6 +95,7 @@ export class Stack {
     setHost(host: string): Stack;
     setCachePolicy(policy: CachePolicy): Stack;
     setCacheProvider(provider: object): Stack;
+    livePreviewQuery(query: LivePreviewQuery): void;
     clearByQuery(): Stack;
     clearByContentType(): Stack;
     clearAll(): Stack;
@@ -219,4 +231,4 @@ export class Query extends Entry {
 
     find(fetchOptions?: object): Promise<any>;
     findOne(): Promise<any>;
-}
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "contentstack",
-  "version": "3.13.3",
+  "version": "3.14.0",
   "description": "Contentstack Javascript SDK",
   "homepage": "https://www.contentstack.com/",
   "author": {
@@ -10,14 +10,14 @@
   "main": "dist/node/contentstack.js",
   "browser": "dist/web/contentstack.js",
   "types": "./index.d.ts",
-  "_id": "contentstack@3.13.2",
+  "_id": "contentstack@3.14.0",
   "scripts": {
     "test": "npm run test:e2e && npm run test:typescript",
     "test:e2e": "istanbul cover tape test/index.js | tap-html --out ./tap-html.html",
     "test:typescript": "jest --testPathPattern=test/typescript",
     "automate": "node test.js",
     "build:node": "webpack --config webpack/webpack.node.js",
-    "build:web": "webpack -p --config webpack/webpack.web.js",
+    "build:web": "webpack --config webpack/webpack.web.js",
     "build:react-native": "webpack --config webpack/webpack.react-native.js",
     "build:native-script": "webpack --config webpack/webpack.nativescript.js",
     "build": "NODE_ENV=production && npm run build:node && npm run build:web && npm run build:react-native && npm run build:native-script",
@@ -54,14 +54,14 @@
   ],
   "dist": {
     "shasum": "a328ed07240476a26b31a23261355dc929e1da63",
-    "tarball": "https://registry.npmjs.org/contentstack/-/contentstack-3.13.2.tgz"
+    "tarball": "https://registry.npmjs.org/contentstack/-/contentstack-3.14.0.tgz"
   },
   "license": "MIT",
   "directories": {},
-  "_resolved": "https://registry.npmjs.org/contentstack/-/contentstack-3.13.2.tgz",
+  "_resolved": "https://registry.npmjs.org/contentstack/-/contentstack-3.14.0.tgz",
   "_npmOperationalInternal": {
     "host": "packages-18-east.internal.npmjs.com",
-    "tmp": "tmp/contentstack-3.13.2.tgz_1477830884275_0.9869455888401717"
+    "tmp": "tmp/contentstack-3.14.0.tgz_1477830884275_0.9869455888401717"
   },
   "devDependencies": {
     "@types/jest": "^26.0.24",
@@ -73,33 +73,34 @@
     "babel-preset-es2016": "6.24.1",
     "babel-preset-stage-1": "6.24.1",
     "babel-runtime": "6.26.0",
+    "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "1.0.1",
     "es3ify-loader": "0.2.0",
     "fetch-mock-jest": "^1.3.0",
     "http-proxy-agent": "^3.0.0",
     "istanbul": "^0.4.5",
-    "jest": "^26.4.2",
+    "jest": "^27.2.5",
     "jest-html-reporters": "^2.1.6",
     "jsdoc": "^3.6.7",
-    "jshint": "^2.13.0",
-    "nodemailer": "^6.6.3",
+    "jshint": "^2.13.1",
+    "nodemailer": "^6.6.5",
     "request": "^2.88.2",
     "string-replace-loader": "1.3.0",
     "string-replace-webpack-plugin": "0.1.3",
     "tap-html": "^1.0.1",
     "tap-json": "1.0.0",
     "tape": "4.8.0",
     "ts-jest": "^26.5.6",
-    "typescript": "^4.3.5",
+    "typescript": "^4.4.3",
     "uglify-js": "2.8.29",
-    "webpack": "^5.44.0",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.56.1",
+    "webpack-cli": "^4.9.0",
     "webpack-md5-hash": "0.0.5",
     "webpack-merge": "4.1.0"
   },
   "dependencies": {
     "@contentstack/utils": "^1.0.2",
-    "es6-promise": "4.1.1",
+    "es6-promise": "^4.1.1",
     "isomorphic-fetch": "^3.0.0",
     "localStorage": "1.0.3"
   }

package.json

@@ -43,11 +43,11 @@ export default function Request(options, fetchOptions) {
 
         return fetchRetry(url + '?' + queryParams, 
                             headers, 
-                            fetchOptions.retryDelay, 
-                            fetchOptions.retryLimit, 
                             fetchOptions, 
                             resolve, 
-                            reject)
+                            reject, 
+                            fetchOptions.retryDelay, 
+                            fetchOptions.retryLimit)
 
     });
 }
@@ -57,10 +57,8 @@ function wait(retryDelay) {
         setTimeout(resolve, retryDelay)
     });
 }
-async function safeParseJSON(response) {
-    const body = await response.text();
-}
-function fetchRetry(url, headers, retryDelay = 300, retryLimit = 5, fetchOptions, resolve, reject) {
+
+function fetchRetry(url, headers, fetchOptions, resolve, reject, retryDelay = 300, retryLimit = 5) {
     var option = Utils.mergeDeep({ 
         method: 'GET',
         headers: headers,

src/core/lib/request.js

@@ -1,6 +1,6 @@
 import Request from './request';
 import Result from '../modules/result';
-import config from '../../../config';
+
 /**
  * @method addSpread
  * @description method to add the spread.
@@ -175,21 +175,6 @@ export function resultWrapper(result) {
     return result;
 };
 
-// // spread the result object
-// export function spreadResult(result) {
-//     let _results = [];
-//     if (result && Object.keys(result).length) {
-//         if (typeof result.entries !== 'undefined') _results.push(result.entries);
-//         if (typeof result.assets !== 'undefined') _results.push(result.assets);
-//         if (typeof result.content_type !== 'undefined' || typeof result.schema !== 'undefined') _results.push(result.content_type || result.schema);
-//         if (typeof result.count !== 'undefined') _results.push(result.count);
-//         if (typeof result.entry !== 'undefined') _results = result.entry;
-//         if (typeof result.asset !== 'undefined') _results = result.asset;
-//         if (typeof result.items !== 'undefined') _results.push(result);
-//     }
-//     return _results;
-// };
-
 // spread the result object
 export function spreadResult(result) {
     let _results = [];
@@ -233,7 +218,6 @@ export function sendRequest(queryObject, options) {
     }
 
     let self = queryObject;
-    let continueFlag = false;
     let cachePolicy = (typeof self.queryCachePolicy !== 'undefined') ? self.queryCachePolicy : self.cachePolicy;
     let tojson = (typeof self.tojson !== 'undefined') ? self.tojson : false;
     let isSingle = (self.entry_uid || self.singleEntry || self.asset_uid) ? true : false;
@@ -249,14 +233,29 @@ export function sendRequest(queryObject, options) {
         }
         delete queryObject.requestParams.body.query;
         queryObject.requestParams.body = merge(queryObject.requestParams.body, cloneQueryObj);
-    }
 
+        if (queryObject.live_preview && queryObject.live_preview.enable === true && queryObject.live_preview.hash && queryObject.live_preview.hash !== "init") {
+            if(queryObject.live_preview.content_type_uid === queryObject.content_type_uid) {
+                queryObject.requestParams.body = merge(queryObject.requestParams.body, {live_preview: queryObject.live_preview.hash || "init"});
+                cachePolicy = 2; // network else cache
+                if(queryObject.requestParams.body['environment']) {
+                    delete queryObject.requestParams.body['environment'];
+                }
+                if(queryObject.requestParams.headers['access_token']) 
+                    delete queryObject.requestParams.headers['access_token'];
+                
+                queryObject.requestParams.headers['authorization'] = queryObject.live_preview.management_token
+            } else if(queryObject.live_preview.hash) {
+                cachePolicy = 1; // cache then network
+            }
+        }
+    }
 
     let getCacheCallback = function() {
         return function(err, entries) {
             return new Promise(function(resolve, reject) {
                 try {
-                    if (err) throw err;
+                    if (err) reject(err);
                     if (!tojson) entries = resultWrapper(entries);
                     resolve(spreadResult(entries));
                 } catch (e) {
@@ -288,10 +287,10 @@ export function sendRequest(queryObject, options) {
                             } else {
                                 if (cachePolicy === 2 && self.provider !== null) {
                                     self.provider.get(hashQuery, getCacheCallback());
+                                    return
                                 } else {
                                     return reject({ error_code: 141, error_message: 'The requested entry doesn\'t exist.' });
                                 }
-                                return;
                             }
                         } 
                         else if(data.items) {
@@ -308,7 +307,7 @@ export function sendRequest(queryObject, options) {
                         if (cachePolicy !== -1 && self.provider !== null) {
                             self.provider.set(hashQuery, entries, function(err) {
                                 try {
-                                    if (err) throw err;
+                                    if (err) reject(err);
                                     if (!tojson) entries = resultWrapper(entries);
                                     return resolve(spreadResult(entries));
                                 } catch (e) {
@@ -362,7 +361,6 @@ export function sendRequest(queryObject, options) {
                 }
 
             });
-            break;
         case 2:
         case 0:
         case undefined:
@@ -380,7 +378,6 @@ export function sendRequest(queryObject, options) {
                         try {
                             if (err || !_data) {
                                  reject(err);
-                                //reject(Error("It broke"));
                             } else {
                                 if (!tojson) _data = resultWrapper(_data);
                                  resolve(spreadResult(_data));
@@ -393,14 +390,13 @@ export function sendRequest(queryObject, options) {
             });
 
         return promise.then(function() {
-            return new Promise(function(resolve, reject) {
+                return new Promise(function(resolve, reject) {
                     callback(true, resolve, reject);
                 });
               }).catch((error) => {
-            return new Promise(function(resolve, reject) {
+                return new Promise(function(resolve, reject) {
                     callback(true, resolve, reject);
                 });
-                  console.error(error)
               })
     }
 };

src/core/lib/utils.js

@@ -1,6 +1,4 @@
 import * as Utils from '../lib/utils';
-import Stack from '../stack';
-import Query from './query';
 
 /**
  * @class 

src/core/modules/assets.js

@@ -331,11 +331,15 @@ export default class Entry {
      * @instance
      */
     fetch(fetchOptions) {
+        var host = this.config.host + ':' + this.config.port
+        if(this.live_preview && this.live_preview.enable === true && this.live_preview.content_type_uid === this.content_type_uid ) {
+            host = this.live_preview.host
+        }
         if (this.entry_uid) {
             this.requestParams = {
                 method: 'POST',
                 headers: this.headers,
-                url: this.config.protocol + "://" + this.config.host + ':' + this.config.port + '/' + this.config.version + this.config.urls.content_types + this.content_type_uid + this.config.urls.entries + this.entry_uid,
+                url: this.config.protocol + "://" + host + '/' + this.config.version + this.config.urls.content_types + this.content_type_uid + this.config.urls.entries + this.entry_uid,
                 body: {
                     _method: 'GET',
                     query: this._query

src/core/modules/entry.js

@@ -777,8 +777,12 @@ export default class Query extends Entry {
      * @instance
      */
     findOne() {
-        const host = this.config.protocol + "://" + this.config.host + ':' + this.config.port + '/' + this.config.version,
-            url = (this.type && this.type === 'asset') ? host + this.config.urls.assets : host + this.config.urls.content_types + this.content_type_uid + this.config.urls.entries;
+        let host = this.config.protocol + "://" + this.config.host + ':' + this.config.port + '/' + this.config.version
+        if(this.type && this.type !== 'asset' && this.live_preview && this.live_preview.enable === true && this.live_preview.content_type_uid === this.content_type_uid ) {
+            host = this.config.protocol + "://" + this.live_preview.host + '/' + this.config.version
+        }
+        const url = (this.type && this.type === 'asset') ? host + this.config.urls.assets : host + this.config.urls.content_types + this.content_type_uid + this.config.urls.entries;
+        
         this.singleEntry = true;
         this._query.limit = 1;
         this.requestParams = {