# Code Effects Rule Editor (npm)

Code Effects is a free web-based, zero-dependency **business rules editor** for authoring human-readable business rules that your .NET applications evaluate with the [Code Effects](https://codeeffects.com/decision-automation) Rule Engine.  

Version **6.4.121** unifies the product and simplifies implementation while keeping the editor fast, intuitive, and framework-friendly (React, Angular, Vue, plain JS).

> This package ships the **client-side functionality** of the Rule Editor:  
> `codeeffects.editor.js`, `codeeffects.common.css` (core), and `codeeffects.light.css` (Light theme).  
> The **Dark** theme will be introduced in a later version.

---

## Contents

- `codeeffects.editor.js` – the main editor script (ES module).
- `codeeffects.common.css` – core editor styles (required).
- `codeeffects.light.css` – Light theme (optional but recommended).

> **Do not rename** the CSS classes in the core CSS; you may override them in your app/theme styles if needed.

---

## Installation

```sh
npm install codeeffects
```

---

## Referencing

```html
<link rel="stylesheet" href="/node_modules/codeeffects/codeeffects.common.css">
<link rel="stylesheet" href="/node_modules/codeeffects/codeeffects.light.css">

<script type="module" src="/node_modules/codeeffects/codeeffects.editor.js"></script>

<script>
	//See implementation article for details: https://codeeffects.com/decision-automation/business-rule-implementation
</script>
```

> If you prefer a version-agnostic path in production, keep the exact filenames in your build pipeline and symlink or copy them to unversioned names during deployment.

---

## Using with Bundlers / Frameworks

### React

```tsx
// App.tsx
import { useEffect, useRef } from 'react';
import '../../node_modules/codeeffects/codeeffects.common.css';
import '../../node_modules/codeeffects/codeeffects.light.css';
import { $rule, $ce } from 'codeeffects';

//See Code Effects demo projects for implementation details at https://codeeffects.com/decision-automation/business-rule-demo-project
```

### Angular

```ts
// app.component.ts
import { Component, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
import '../../node_modules/codeeffects/codeeffects.common.css';
import '../../node_modules/codeeffects/codeeffects.light.css';
import { $rule, $ce } from 'codeeffects';

//See Code Effects demo projects for implementation details at https://codeeffects.com/decision-automation/business-rule-demo-project
```

---

## Styles & Themes

1. **Always include** `codeeffects.common.css`.  
2. Include one theme: `codeeffects.light.css` (Dark coming soon).  
3. To customize, add your overrides **after** the core and theme imports.

---

## What’s New in 6.x (Editor highlights)

Read the [documentation article](https://codeeffects.com/decision-automation/new-features-version-6-business-rules-engine) for this version for details on the new features, bug fixes, and performance enhancements introduced in version 6.4.121.

---

## Migrating from previous versions

- The editor script is now an **ES module**. Replace legacy `<script>` includes with `type="module"` or import it in your bundler.  
- CSS split into **core** and **theme**. Include both.  

> For detailed migration instructions see: https://codeeffects.com/version/version-6-final-release/603.

---

## TypeScript

Type definitions are shipped inline with the module where applicable. If your project uses strict TS and you need additional types for editor options or callbacks, declare an ambient module augmentation in your app until full typings are published for your scenario.

---

## Browser Support

- Modern evergreen browsers (Chromium, Firefox, Safari) with ES module support.  
- For legacy browsers, transpile in your build and ensure `type="module"` is supported or use your bundler’s legacy build output.

---

## Documentation & Demos

- Documentation: `https://codeeffects.com/decision-automation`  
- Business Rule Editor implementation guide: `https://codeeffects.com/decision-automation/business-rules-editor-implementation`  
- Live demo: `https://codeeffects.com/business-rules-engine-demo`

---

## Support

Contact: `https://codeeffects.com/support`

---

## Security Notes

- Treat rule content as user input; apply standard XSS/CSRF protections in your app.  
- Host the assets from your own origin (recommended) to keep CSP simple.  
- Keep editor/engine versions compatible in your deployments.

---

© 2025 Code Effects Software, LLC. All rights reserved.