W-CF

W-CF stands for Web Configuration Framework and is a JavaScript framework for 3D product configuration. It consists of several ES6 JavaScript modules.

1. Modules

The modules are categorized and structured into several folders. They can be found in the modules folder of the W-CF distribution. These are the main module folders:

• bsk: wrapper for the EAIWS basket functionality to manage an article list
• cf: tools and functions for OFML article configuration using the EAIWS
• core: core functionality for the W-CF framework (e.g. the 3D view, tools, commands)
• eaiws: JavaScript wrapper for the SOAP-Api of the EAIWS
• pl: tools and functions for space planning
• polyfill: optional browser polyfills
• utils: a collection of utility functions and classes for the W-CF framework

1.1 Installing and using the modules

To use the modules you have to install them using npm. For correct installation of all dependencies version 7+ of npm is required. Please use the following command for the installation: npm i @easterngraphics/wcf After the installation the modules can be imported from @easterngraphics/wcf/modules/.... Example:

import { EaiwsSession } from "@easterngraphics/wcf/modules/eaiws";

It is also recommended to setup a build task to copy the W-CF resources (styles, data) from node_modules/@easterngraphics/wcf/ to your distribution directory.

2. Using wcfConfig to configure W-CF

wcfConfig is a global object which is used to configure different parts of W-CF. To support loading of resources on demand the dataPath has to be defined at the start of the application. Example:

import { wcfConfig } from "@easterngraphics/wcf/modules/utils";
wcfConfig.dataPath = "wcf/data/";

3. Polyfills

W-CF provides polyfills for certain web standards which should be loaded depending on your target runtime environment. The polyfills are located in the @easterngraphics/wcf/modules/polyfill.

3.1 Core-js

core-js is a polyfill for stable ES and web standards. The version provided by W-CF contains polyfills for the last 3 browser versions. If your build environment (e.g. Babel) does not already provide polyfills it is recommended to import it as your first import in your application to get the best compatibility with different browsers and versions.

import "@easterngraphics/wcf/modules/polyfill/core-js/index.js";

Additionally you need to add core-js to the dependencies in your package.json.

{
  ...
  "dependencies": {
    ...
    "core-js": "~3.39.0"
  }
}

3.2 DomException

domexception is a polyfill for the DOMException class. If your environment (e.g. React Native) does not support the DOMException you have to import the polyfill as one of the first imports of your application.

import "@easterngraphics/wcf/modules/polyfill/domexception/index.js";

3.3 Xmldom

xmldom is a polyfill for DOMParser. If your environment (e.g. NodeJs) does not support the DOMParser you have to import the polyfill as one of the first imports of your application.

import "@easterngraphics/wcf/modules/polyfill/xmldom/index.js";

Additionally you need to add @xmldom/xmldom to the dependencies in your package.json.

{
  ...
  "dependencies": {
    ...
    "@xmldom/xmldom": "~0.9.6"
  }
}

4 Bundle size

If you want to have a minimal bundle size and you are importing classes from BabylonJs there some rules:

• Do not import from the root index of BabylonJs. If you do this you will end up with all BabylonJs modules in your bundle. Instead import as close as possible from the desired module itself. Wrong: import { Vector3 } from "@babylonjs/core"; Correct: import { Vector3 } from "@babylonjs/core/Maths/math.vector";
• Avoid using the MeshBuilder class. Using this class will bundle all "builders" to your code. You should import only the functions you need from @babylonjs/core/Meshes/Builders. e.g.: import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder";

More information about this topic can be found here: https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#tree-shaking

5 Troubleshooting

• If you get the error Type 'Timeout' is not assignable to type 'number'. you are perhaps importing jszip in your project. JSZip is globally loading the node types and this generates a conflict with the setTimeout() function. To solve this issue you should call window.setTimeout() instead of just setTimeout().

Legal remarks

© EasternGraphics GmbH | Albert-Einstein-Straße 1 | 98693 Ilmenau | GERMANY

This work (whether as text, file, book or in other form) is copyright. All rights are reserved by EasternGraphics GmbH. Translation, reproduction or distribution of the whole or parts thereof is permitted only with the prior agreement in writing of EasternGraphics GmbH.

EasternGraphics GmbH accepts no liability for the completeness, freedom from errors, topicality or continuity of this work or for its suitability to the intended purposes of the user. All liability except in the case of malicious intent, gross negligence or harm to life and limb is excluded.

All names or descriptions contained in this work may be the trademarks of the relevant copyright owner and as such legally protected. The fact that such trademarks appear in this work entitles no-one to assume that they are for the free use of all and sundry.