# codeSchmiede A/B Testing Toolkit <!-- omit in toc -->

- [Getting started](#getting-started)
  - [Install](#install)
  - [Usage Example](#usage-example)
  - [Inline HTML CLI](#inline-html-cli)
- [Helper](#helper)
  - [waitFor](#waitfor)
  - [waitForSync](#waitforsync)
  - [ready](#ready)
- [Wrapper](#wrapper)
  - [qs](#qs)
  - [qsa](#qsa)
  - [addClass](#addClass)
  - [removeClass](#removeClass)
- [Utils](#utils)
  - [isMobile](#ismobile)
  - [getWidth](#getwidth)
  - [getCookie](#getcookie)
  - [setCookie](#setcookie)
- [License](#license)

# Getting started
This toolkit is designed to help you creating A/B tests. Have fun using it!

**Questions or feedback?**
<br/>
team@codeschmiede.de

## Install

```sh
$ npm install codeschmiede-toolkit
```

```sh
$ yarn add codeschmiede-toolkit
```

## Usage Example
```js
import { waitFor } from 'codeschmiede-toolkit';

waitFor('#example', (example) => {
    // do something...
});
```

## Inline HTML CLI

Use the CLI in a local A/B test project to rewrite multiline template strings in `src/**/*.js` in place:

```sh
$ npm run inlinehtml
```

Example:

```js
const test = `<div>
    <h1>Test Value</h1>
    <p>${value}</p>
</div>`;
```

becomes:

```js
const test = '<div>' +
    '<h1>Test Value</h1>' +
    `<p>${value}</p>` +
    '</div>';
```

Rules:

- only untagged multiline template strings are transformed
- empty boundary lines are removed
- each remaining line is left-trimmed
- lines without `${...}` become `'...'`
- lines with `${...}` stay template literals as `` `...` ``
- files are only written if the output changed

# Helper

## waitFor

The `waitFor` function is using [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) internally.


```js
waitFor('.example', (example) => {
    // do something...
});
```

`waitFor` is also working with a function as a selector. 

```js
waitFor(
    () => return window.example === true, 
    () => {
        // do something...
    }
);
```

## waitForSync

```js
(async () => {

    const body = await waitForSync("body");
    // do something...
})();
```

## ready

The `ready` function is using the [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) Event. 

```js
ready(() => {
    // do something...
});
```

# Wrapper

## qs

The `qs` function is just a wrapper for [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).

> An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

```js
const node = qs('#example');

// do something...
node.textContent = 'My new text...';
```

## qsa

The `qsa` function is just a wrapper for [document.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll).

> A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.

```js
const nodeList = qsa('.example');

// do something...
[...nodeList].forEach(item => { ... });
```

## addClass

The `addClass` function is just a wrapper for [element.classList.add](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).


```js
addClass(element, 'classNameToAdd');
```

## removeClass

The `removeClass` function is just a wrapper for [element.classList.remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).

```js
removeClass(element, 'classNameToRemove');
```

# Utils

## isMobile

```js
const isMobileDevice = isMobile();

if(isMobileDevice){
    // do something for mobile traffic...
} else {
    // do something for desktop traffic...
}
```
## getWidth

```js
const browserWidth = getWidth();
// do something...
```
## getCookie

[JavaScript Cookies](https://www.w3schools.com/js/js_cookies.asp)

```js
const myCookkie = getCookie('myCookie');
// do something...
```

## setCookie

[JavaScript Cookies](https://www.w3schools.com/js/js_cookies.asp)

```js
setCookie ('myCookie', 'myValue', 90);
// do something...
```

# License
Copyright (c) 2024 **codeSchmiede GmbH & Co. KG**.

Licensed under The [MIT License](./LICENSE.md) (MIT).

[**codeSchmiede GmbH & Co. KG**](https://www.codeschmiede.de/)