ripe-tech/ripe-sdk

The public Javascript SDK for RIPE Core

ripe-sdk's Issues

Review and improve documentation

Rationale

The RIPE-SDK documentation is lacking in some aspects such as examples and demos that could help an external person to easily dive in and start using it.

Description

Analyze and check what can be improved with the documentation and maybe create some demos and improve the examples on how to use the SDK, namely the configurator and each of the strategies (PRC and CSR)

Unit tests for subscription endpoints

Description

Create the unit tests for #172 , which should be similar to the existing API tests that use a real RIPE Core instance to perform API calls.

RIPE SDK not compatible with Nuxt.js under Vercel

Description

It's not possible to use the RIPE SDK with Nuxt.js when building the application with --standalone, which is done by Vercel. Accessing the page where RIPE SDK is imported results in:

 ERROR  window is not defined                                                                                                                                                                                                                                                            09:18:03

  at Object.<anonymous> (node_modules/ripe-sdk/src/js/base/compat.js:83:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object.<anonymous> (node_modules/ripe-sdk/src/js/base/api.js:11:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object.<anonymous> (node_modules/ripe-sdk/src/js/base/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object.<anonymous> (node_modules/ripe-sdk/src/js/api/account.js:9:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object.<anonymous> (node_modules/ripe-sdk/src/js/api/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)


 ERROR  Cannot read property 'a' of undefined                                                                                                                                                                                                                                            09:18:03

  at Module.ReportHermesLeatherGoods (pages/hermes_leather.js:11360:145)
  at c (node_modules/vue/dist/vue.runtime.common.prod.js:6:0)
  at Tt (node_modules/vue/dist/vue.runtime.common.prod.js:6:0)
  at Function.Cn.t.extend (node_modules/vue/dist/vue.runtime.common.prod.js:6:0)
  at sanitizeComponent (.nuxt/utils.js:74:0)
  at server.js:14522:41
  at async Promise.all (index 0)
  at async getRouteData (.nuxt/utils.js:131:0)
  at async Promise.all (index 0)
  at async setContext (.nuxt/utils.js:214:0)

This is caused by the "environment" detection part not being ready to this use case:

if (
    typeof require !== "undefined" &&
    (typeof window === "undefined" || typeof __webpack_require__ !== "undefined") && // eslint-disable-line camelcase
    typeof XMLHttpRequest === "undefined" // eslint-disable-line no-use-before-define
) {
    var XMLHttpRequest = null;
    if (
        // eslint-disable-next-line camelcase
        typeof __webpack_require__ === "undefined" &&
        (typeof navigator === "undefined" || navigator.product !== "ReactNative")
    ) {
        // this is an hack to work around metro's (react-native bundler)
        // static analysis, needed until it supports optional imports
        // (https://github.com/react-native-community/discussions-and-proposals/issues/120)
        const mixedModuleName = "Xmlhttprequest";
        const correctModuleName = mixedModuleName.toLowerCase();
        XMLHttpRequest = require(correctModuleName).XMLHttpRequest;
    } else {
        XMLHttpRequest = window.XMLHttpRequest;
    }
}

The values at play here are:

• require is defined
• __webpack_require__ is defined
• window is NOT defined
• XMLHttpRequest is NOT defined

Even though require is available and would be able to import XMLHttpRequest, the code is ending up in XMLHttpRequest = window.XMLHttpRequest; which throws an error.

Expected vs. Observed

-	-
Expected	Be able to import RIPE SDK.
Observed	Importing RIPE SDK throws an error.

Repro Steps

1. Using Nuxt.js, import RIPE SDK in one of the components
2. Build the application with nuxt build --standalone
3. Serve the generated files with nuxt start
4. Make a request to the page where RIPE SDK is being imported

Small issue for testing pusposes

Description

This is just a small issue for testing purposes.

Tests are consistently failing and deployment is failing

Description

The npm run test step of the deployment is consistently failing in the same step and is not related to the deployment.

The error log is the following:

  1) ConfigAPI
       #configResolveSku()
         should resolve SKU:
     Uncaught TypeError: Cannot read property 'body' of null
      at /__w/ripe-sdk/ripe-sdk/node_modules/node-fetch/lib/index.js:1519:27
      at IncomingMessage.<anonymous> (node_modules/node-fetch/lib/index.js:1749:6)
      at IncomingMessage.<anonymous> (_http_client.js:389:14)
      at endReadableNT (_stream_readable.js:1241:12)
      at processTicksAndRejections (internal/process/task_queues.js:84:21)

  2) ConfigAPI
       #configResolveSku()
         should resolve SKU:
     Error: done() called multiple times in test <ConfigAPI #configResolveSku() should resolve SKU> of file /__w/ripe-sdk/ripe-sdk/test/js/api/config.js
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)



[12:00:20] 'test' errored after 2.78 min
[12:00:20] Error in plugin "gulp-mocha"

After an in-depth inspection the error is caused because of the race condition to delete the SKU at https://github.com/ripe-tech/ripe-sdk/blob/master/test/js/api/config.js#L199

This implementation of Promise will run after the test block is complete and call done a little bit after the previous requests are also complete which means done() will be called 2 times and thus the error "done() called multiple times".

This is not reproducible locally which means that is impacted by the network and processing speed - because the workflows are run on a low tier container it always reproduces.

Expected vs. Observed

-	-
Expected	The tests pass.
Observed	The tests fail.

Repro Steps

1. Run yarn && yarn build && yarn test
2. See tests failing

IE11 issue with ES6 option

Hi,
we have an issue on IE11.

Steps to reproduce

• Install the SDK using npm install ripe-sdk (latest version 1.2.3).
• Import ./node_modules/ripe-sdk/dist/ripe-min.js.
• The page breaks on IE11.

Analysing the project seems that gulp build task copy the ripe-min from src to dist using uglifyjs with an option for ES6.

ripe-sdk/gulpfile.js

Lines 19 to 32 in 444cafd

	gulp.task("build-js", () => {
	return gulp.src(paths.scripts)
	.pipe(uglifyes({
	mangle: false,
	ecma: 6
	}))
	.pipe(replace("__VERSION__", _package.version))
	.pipe(size())
	.pipe(size({
	gzip: true
	}))
	.pipe(gulp.dest("dist"))
	.pipe(count("## js files copied"));
	});

API masks with the total image size

Description

When the get the compose on white we receive always the image with 1000x1000, but the masks we receive always with the size we on the build.
Example: brand=dior_tmp & model=book_tote the images are 2000x2000 and we get the mask with this size and the compose with 1000x1000

Expected vs. Observed

-	-
Expected	Receive the mask 1000x1000.
Observed	Receive the mask 2000x2000.

Repro Steps

1. Open, ripe-white-sbx https://ripe-white-sbx.platforme.com/?brand=dior_tmp&model=book_tote
2. Open the inspect/ Network and choose images
3. Refresh the page and see the requests mask and compose
4. if you compare the masks images with the compose images you will see that have different sizes

Environment

Key	Value
Device	Desktop
Operating System	Ubuntu 21.04
Browser	Chrome
Instance (URL)	https://ripe-core-sbx.platforme.com/api/mask?brand=dior_tmp&frame=side-0&model=book_tote

Screens

API Mask request:
https://ripe-core-sbx.platforme.com/api/mask?brand=dior_tmp&frame=side-0&model=book_tote
API Compose request:
https://ripe-core-sbx.platforme.com/api/compose?brand=dior_tmp&debug=1&format=webp&frame=side-0&height=1000&model=book_tote&p=body%3Amesh_logo_mizza_dr%3Amizza&p=handle%3Amesh_logo_handle_mizza_dr%3Amizza&p=ribbon%3Across_stich_mizza_dr%3Amizza&p=shadow%3Adefault%3Adefault&width=1000

Spec.json Tag to deactivate mask

Rationale

Now we have an option on SDK to deactivate the masks and should be nice have a tag to be add in the model spec to deactivate it.

Description

Should be possible add a tag example "no_mask" and when this model is on white the masks are deactivated by default.
example:

getLogoUrl

Description

Create getLogo, getLogoP and getLogoUrl functions (similarly to getMeshX) that will rely on RIPE Core's /api/brands/<str:brand>/logo.<str:format>.

No masks options disable highlighting but masks are still loaded

Description

Through the use of noMasks or useMasks one can control whether the masks are used. However, even when not using them, the SDK still loads them and these represent a significant amount of network requests. We should not load masks if they are not going to be used.

Expected vs. Observed

-	-
Expected	The masks are show and not loaded i.e. no network requests for masks are made.
Observed	The masks are not shown but are loaded and you can see it in the network requests.

Repro Steps

1. Initialize our RIPE in this repo
2. Set useMasks: false or noMasks: true in the bindConfigurator method
3. Build the SDK, launch the demo, go to localhost:8080/simple network tab

Screens

Version should be 1.2.0

The version property inside package.json should be 1.2.0.

https://github.com/ripe-tech/ripe-sdk/blob/1.2.0/package.json#L3

"lossless" image format is not lossless

Description

When using lossless as an image format, it's expected to be served images which are lossless, but that's not the case for webp with the default options.

• RIPE SDK translates lossless to webp when possible:

  ripe-sdk/src/js/base/ripe.js

  Line 695 in b0b5300

  this.format = this._supportsWebp() ? "webp" : "png";

• ripe-compose by default applies lossful compression when using webp: https://github.com/ripe-tech/ripe-compose/blob/0ffa265a375e39dceaa2ab853e25e19cf59546f0/src/ripe_compose/util/configurator.py#L84

Example:

• png: https://ripe-core-stage.platforme.com/api/compose?brand=hermes&model=h003572sv01&initials=MARTA&initials_profile=jungle_love,black,zoom&p=body:silk:01&p=shadow:default:default&size=850
• webp: https://ripe-core-stage.platforme.com/api/compose?brand=hermes&model=h003572sv01&initials=MARTA&initials_profile=jungle_love,black,zoom&p=body:silk:01&p=shadow:default:default&size=850&format=webp

Failling to load meshes that use Draco

Description

An error is being thrown when trying to load meshes that were compressed using Draco.

Expected vs. Observed

-	-
Expected	Mesh being loaded without error
Observed	Errors are thrown and the mesh isn't loaded

Repro Steps

1. Add a Draco compressed mesh to the build
2. Open the CSR configurator
3. Check that the configurator isn't loading and errors where thrown

Screens

CSR in mobile devices

Rationale

The CSR strategy should work in mobile devices without any issues. There may be oportunity for improvements and/or compatibility issues and problems that aren't still detected. Some investigation should be done to check what's the state of the CSR solution in mobile devices.

Description

Test and investigate the mobile experience of the CSR strategy. The idea is to have a robust mobile experience that works as well as the desktop experience.

Improve CSR deinitialization process

Test and improve RIPE SDK's CSR Configurator deinitialization logic as might not be completelly freeing all resources and handlers after a few integration tests with RIPE White

Method for order image URL

Rationale

As there isn't a method in ripe-sdk to get the order image URL so currenlty we manually build the order image URL. Examples: ripe-pulse, ripe-robin-revamp, ripe-util-vue, ripe-copper, etc

Having a method to handle this will make the situation less error prone and ensure that compatiblity is maintained everywhere.

Description

Add a method in ripe-sdk to build and return an order image URL.

Implementation

Add a method called _getOrderImageURL here. The approach would be similar to, for example, _getOrderReportPNGURL

Reference

https://github.com/ripe-tech/products/issues/38 was created because inconsistencies were found between order image URL for build and buildless types.

Estimation

Discipline	Estimation
Software Development	0.5 days

createAttachmentOrder with meta

Rationale

The creation of order attachments expects a file and a meta dictionary (see https://github.com/ripe-tech/ripe-core/blob/ba23882efa65acb165e924c6f836c6933646604f/src/ripe_core/controllers/api/order.py#L97).

However, the current SDK implementation of the endpoint doesn't support meta (see

ripe-sdk/src/js/api/order.js

Line 201 in c9e7b8a

dataM: {

).

Description

The implementation of the rationale above could probably be similar to:

    options = Object.assign(options, {
        url: url,
        method: "POST",
        dataM: {
            file: file,
            meta: JSON.stringify(meta)
        },
        auth: true
    });

But unless I'm missing something obvious, ripe-sdk doesn't support strings as values when using a multipart payload dataM (see

ripe-sdk/src/js/base/api.js

Line 1238 in c9e7b8a

ripe.Ripe.prototype._encodeMultipart = function(fields, mime = null, doseq = false) {

).

Trying to use them results in RangeError: offset is out of bounds because the string is not being encoded, resulting in this:

Related: https://github.com/ripe-tech/ripe-core/pull/4564

CSR performance optimizations

Rationale

There are some performance gains to be made in the CSR strategy, some of which quick wins others that can come from the addition of new features/settings or from a more calmly review of the code.

Description

Review and improve the CSR performance. This may be by, when possible and if applicable, using parallelization, reusing resources, avoiding unnecessary remote calls, avoiding unnecessary usage/loading of resources, etc.

• Use compressed textures
• Run initials renderer in parallel if possible
• Check the possibility of using workers
  ... maybe more???

Configurator ignoring size

Describe the bug
The configurator ignores the width and height passed onto it.

Impact
This prevents the user from changing the default size of the images being rendered.

Update Three.js version

Rationale

The Three.js version ripe-sdk is using is not the most recent one thus it's missing some fixes and performance improvements as well as some new features. This exercise should also be done from time to time to gain the beneficts of an update and ensure compatibility with it's evolution.

Description

Update Three.js version to the latest version and migrate what needs to be migrated in order for everything to work properly. The latest version uses ES Modules thus RIPE-SDK needs to be updated to support that.

References

https://threejs.org/docs/index.html#manual/en/introduction/Installation
https://github.com/mrdoob/three.js/wiki/Migration-Guide
https://github.com/mrdoob/three.js/milestones

Environment files

Rationale

Environment mapping is a solution to provide greater realism to the scene illumination. For that it uses a image that will have it's pixels detail lighting information from a certain direction. Being that they are not specific to scenes and are just generic files that can be imported to improve a scene, they can be shared and reused by other scenes thus, not bounded to any context.

Description

Find a way to store an retrieve environment files. They should be able to be accessed by any context as there is no need to have file redundancy.

• Support HDRI
• Support other formats
  ... maybe support upload of own environment file???

Client-Side Rendering (CSR)

Sponsors

• João Magalhães - [email protected]
• João Conde - [email protected]
• Nuno Silva - [email protected]

Rationale

Pre-Render & Compose (PRC) offers maximum quality but low interactivity for customers. Client-Side Rendering allows for maximum interactivity at the cost of some quality. Additionally, CSR is critical in order to provide state-of-the-art rendering strategies.

We're aiming at using this new CSR approach as a tool to strengthen our relationship with our biggest client (Dior).

Description

Extend RIPE SDK to provide a real 3D configurator making use of WebGL technology and using our 3DBs as data source.

Implementation

Software development

• Define a spec for the 3D information to be stored in the 3DB
• Extend RIPE SDK with a new configurator
• Implement the current SDK API, and extend if need be

Estimation

Discipline	Estimation
Software Development	60 days

Improve textures parameterization

Rationale

Applying textures to the CSR initials is a painful and long process as in some instances there can be up to 5 different texture types just to have the visual result expected. This means that when a user wants to tweak the textures, they need to make the change in all 5 textures, upload them, make a build, deploy it and just then it's possible to visualize the result.This makes things like fine tuning extremely hard and requires the user to know how to use image editing tools when there is no need to.

There are ways to greatly improve this, one of which is supporting the parameterization of the textutes. Doing this allows the user to just specify the texture properties and the rendering will be done respecting those rules. There are no cons and the benefits would be for faster iteration on the creation of builds and allowing the fine tunning of the CSR initials via the spec.

Description

Support texture parametrization. This should be a feature that can be optionally used and the user should be able to set those properties via the config.

Implementation

Add support in CSR initials logic to load and apply textures properties and ripe-docs with documentation about the new properties supported in the config.

References

https://threejs.org/docs/#api/en/textures/Texture

ripe-sdk doesn't work with RequireJS

ripe-sdk seems doesn't work on projects that use RequireJS.
We are upgrading ripe-sdk from 1.2.4 to latest version (1.6.25), but we encounter this issue:

I notice that between 1.2.4 and latest version the if statement has been changed.
I tried putting back the old one

if (typeof window === "undefined" && typeof require !== "undefined") {
  ...

and it works.

Could you check this?
Thanks

Report URLs methods not accepting params

Description

The methods _getOrderReportURL, _getOrderReportPDFURL and _getOrderReportPNGURL aren't correctly handling params as they are being ignored and not properly added to the URL.
The methods sould be fixed and the tests updated to catch those cases.

Expected vs. Observed

-	-
Expected	Calling _getOrderReportPNGURL(1234, "secret-key", { params: { size: 100 } }); should return orders/1234/report.png?key=secret-key&size=100
Observed	Calling _getOrderReportPNGURL(1234, "secret-key", { params: { size: 100 } }); returns orders/1234/report.png?key=secret-key

Repro Steps

1. Use one of those methods with params passed to options
2. Check that the params are ignored

Environment

Key	Value
Device	Any
Operating System	Any
Browser	Any

SDK slow response when doing setInitialsExtra

Description

SDK takes too long to update images when calling for several setInitialsExtra.

In practice ripe-white takes much longer - more than 2x the amount of time - than RIPE API to render an image after user initials requests.

I believe this has to do with SDK's implementation to cancel old requests - it's not working as expected.

Please watch the videos below.

Expected vs. Observed

-	-
Expected	The image should render what it's typed on white right away, not the first character and then the whole word.
Observed	The observed state at the end of the repro steps.

Repro Steps

1. Open ripe-white https://ripe-white-now.platforme.com/?context=saint_laurent_hoodie
2. Write something in initials input with more than 1 character like "1234"
3. Watch the image first render an image with the first character "1" and only then "1234" no matter how fast it's typed

Videos

From RIPE White

Peek.2022-02-18.11-27.mp4

From YSL's Website

2022-02-14_15h20_05.mp4

Static analysis of XMLHttpRequest package import causes problems on `watch`

Description

The conditional import of the xmlhttprequest package in SDK causes an error:

ERROR in ../ripe-commons-pluginus/node_modules/xmlhttprequest/lib/XMLHttpRequest.js Module not found: Error: Can't resolve 'child_process' in '/Users/margarida/Documents/ripe-commons-pluginus/node_modules/xmlhttprequest/lib'.

By bug was introduced in the commit ebc58a3, where the import of the xmlhttprequest package was directly imported instead of using a variable. With the use of a variable, the problem does not occur, however a warning appears Critical dependency: the request of a dependency is an expression.

Due to this, webpack static analysis may be the cause of the problem.

Similar problems found in the wild:
asvd/jailed#22
cytoscape/cytoscape.js#998

Expected vs. Observed

-	-
Expected	No errors launched when linking to ripe-sdk.
Observed	Errors linking to more recent versions of ripe-sdk.

Repro Steps

1. Run npm link and npm run watch in ripe-sdk
2. Link ripe-sdk in ripe-commons-pluginus or ripe-sdk-components-vue with the command npm link ripe-sdk
3. Link ripe-commons-pluginus to ripe-white or just run ripe-sdk-components-vue.

Environment

Key	Value
Device	iMac
Operating System	MacOS Catalina
Browser	Firefox
Instance (URL)	https://localhost:3000

Screens