# @easterngraphics/wcf

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

Latest version **11.0.0** (published 2026-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @easterngraphics/wcf
pnpm add @easterngraphics/wcf
yarn add @easterngraphics/wcf
bun add @easterngraphics/wcf
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 11.0.0 |
| Published | 2026-10-20 |
| First published | 2023-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=20.0.0 |
| Dependencies | 0 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | szabel, ankimt |

## Links

- npm: https://www.npmjs.com/package/@easterngraphics/wcf
- npm.io page: https://npm.io/package/@easterngraphics/wcf

## Recent versions

- 11.0.0 (latest) — 2026-10-20
- 11.1.0-alpha.1 (next) — 2026-11-02
- 11.0.0-rc.2 — 2026-09-18
- 11.0.0-rc.1 — 2026-08-26
- 11.0.0-alpha.3 — 2026-08-07
- 11.0.0-alpha.2 — 2026-06-05
- 11.0.0-alpha.1 — 2026-05-08
- 10.3.0 — 2026-04-21
- 10.3.0-rc.3 — 2026-04-02
- 10.3.0-rc.2 — 2026-04-01
- 10.3.0-rc.1 — 2026-03-17
- 10.2.2 — 2026-02-26
- 10.3.0-beta.1 — 2026-02-24
- 10.3.0-alpha.3 — 2026-01-30
- 10.3.0-alpha.2 — 2026-01-23
- … 65 more at https://npm.io/package/@easterngraphics/wcf/versions

## README

# 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:

```javascript
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:

```javascript
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.

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

Additionally you need to add `core-js` to the dependencies in your package.json.
```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.

```javascript
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.

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

Additionally you need to add `@xmldom/xmldom` to the dependencies in your package.json.
```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.

---
_Source: https://npm.io/package/@easterngraphics/wcf · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._