npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bannerwise-packages/compiler

v1.1.1-664

Published

[![deploy to npm](https://github.com/Bannerwise/packages/actions/workflows/compiler.yaml/badge.svg?branch=production)](https://github.com/Bannerwise/packages/actions/workflows/compiler.yaml)

Downloads

254

Readme

Compiler Library

deploy to npm

Input Params:

  • data (required)
  • context (optional | default = 'editor' | options: editor, preview, publish, host)
  • transform (optional | default = true) | options: true or false

Output Params:

  • html (generated html)
  • output (any information that need to be added to database)

Sample Data


How to use the js version

Initializiation

const sampleData = <sample-data>; // (1)

Working with raw data

const superCompiler = new BannerwiseCompiler.CompilerBuilder(SAMPLE_DATA) // (2)
   .setTransform(true) // default value: true - optional
   .setInjectBaseCss(true) // default value: true - optional
   .setIsStatic(false) // default value: false - optional
   .setContext('editor') // default value: editor - optional
   .build();

Working with element

const superCompiler = new BannerwiseCompiler.CompilerBuilder(SAMPLE_DATA)
   .setContext('element') // default value: editor - optional
   .build();

Compiling Stuff

const [html, output] = superCompiler.compile();

Working with BannerUtils

const bannerUtils = ne BannerwiseCompiler.BannerUtils('.element');
// for invalidate element
bannerUtils.invalidate();

How to use the NPM Package Version

Install the NPM Package

npm install @bannerwise-packages/compiler --save

Import the Package

import { CompilerBuilder } from '@bannerwise-packages/compiler';

Compiling Stuff

const compiler = new BannerwiseCompiler.CompilerBuilder(SAMPLE_DATA)
   .setTransform(true) // default value: true - optional
   .setInjectBaseCss(true) // default value: true - optional
   .setIsStatic(false) // default value: false - optional
   .setContext('editor') // default value: editor - optional
   .build();

const [html, output]  = compiler.compile();

Setup Development Environment

Since the compiler is a library it needs a server to run on.

The following repository contains several projects:

Packages Repository

For compiler development we care about two folder:

  • compiler (library itself)
  • server (place to test the npm package)

Setting the compiler project

inside compiler folder

  1. Install dependencies
    • npm install
  2. Build the NPM Package
    • npm run build-npm
  3. Link the Package to Local Node
    • npm link

** Everytime you need to test a change you need to run (it automatically update the lib in the server):

npm run build-npm

Generate JS Dist Files the javascript file generated will be available in the "dist/js" folder

Generate NPM Package Files the javascript and types files generated will be available in the "lib" folder

npm run build-js
npm run build-js-production

Setting the server project

inside server folder

  1. Install dependencies
    • npm install
  2. Link Compiler Package
    • npm link @bannerwise-packages/compiler
  3. Run the Server in Watch Mode
    • npm run start:dev

Filter Condition

data is a object

const filtered = BannerwiseCompiler.ConditionEvaluator.filter(data, {"$or":[{"price":{"$eq":"199.99"}},{"price":{"$gt":"99"}}]});

Sample

const data = {
	"_id": "6229ed470d54a800113c6a03",
	"updatedAt": "2022-03-10T12:29:01.259Z",
	"feed": {
			"_id": "61ddb3354855cd001349a0ef",
			"demo": false,
			"accountIds": [
					"60215a814b6e3300107d1825"
			],
			"bannerSetIds": [],
			"originalBannerSetIds": [
					"6229ed470d54a800113c6a03"
			],
			"sync": false,
			"updating": false,
			"timezone": "Europe/Amsterdam",
			"name": "gads-retail",
			"networkId": "5bbb60d36cf710000f8b76fd",
			"currencyFormatId": {
					"_id": "6195021428a89c53c4edd4ef",
					"currencySign": "left",
					"currencySignSpace": true,
					"thousandSeparator": "singlequote",
					"decimalSeparator": "point",
					"decimalAlignment": "inline",
					"fullAmounts": "zero",
					"accountId": null,
					"__v": 0
			},
			"metadata": {
					"syncTime": "1",
					"syncRepeat": "day",
					"type": "Retail",
					"url": "https://bannerwise-assets.s3.eu-central-1.amazonaws.com/feed/!testFeeds/!googleAds/googleAdsMaster.csv",
					"source": "https://bannerwise-assets.s3.eu-central-1.amazonaws.com/feed/!testFeeds/!googleAds/googleAdsMaster.csv",
					"mapping": {
							"ID": "no_import",
							"Item title": "no_import",
							"Final URL": "no_import",
							"Title": "text",
							"description": "text",
							"link": "click",
							"image_link": "image",
							"Listing ID": "no_import",
							"Listing name": "no_import",
							"Deal ID": "no_import",
							"Deal name": "no_import",
							"Job ID": "no_import",
							"Property ID": "no_import",
							"Property name": "no_import",
							"Destination ID": "no_import",
							"Flight description": "no_import",
							"Program ID": "no_import",
							"Program name": "no_import",
							"id": "no_import"
					},
					"format": "csv",
					"delimiter": ",",
					"quote": null
			},
			"createdAt": "2022-01-11T16:41:25.644Z",
			"updatedAt": "2022-01-11T16:41:25.650Z",
			"__v": 0,
			"lastSync": "2022-01-29T00:11:14.627Z"
	},
	"kind": "display_dynamic",
	"dynamic": true,
	"network": "5bbb60d36cf710000f8b76fd",
	"originalLanguage": "5d5fac208435de97c57a8b0f",
	"createdBy": "60215a81f2dba00010fbe7b7",
	"lastEditedBy": "60215a81f2dba00010fbe7b7",
	"migrated": true,
	"createdAt": "2022-03-10T12:21:27.976Z",
	"deleted": false,
	"publishing": false,
	"publishCounter": 0,
	"sync": false,
	"disclaimerFontSize": 12,
	"customerIds": [
			"60215a824b6e3300107d1828"
	],
	"conditions": [],
	"accountIds": [
			"60215a814b6e3300107d1825"
	],
	"resources": [
			"575ea20f772e47f517563c39",
			"575ea20f772e47f517563c34",
			"6229ee130d54a800113c6a1e",
			"5c4735ae45dbb98201d15a56",
			"6229eecd96c72e0011dfc28f"
	],
	"languages": [
			{
					"_id": "5d5fac208435de97c57a8b0f",
					"code": "EN",
					"__v": 0,
					"hyphenationCode": "en-gb",
					"hyphenationWord": "Supercalifragilisticexpialidocious",
					"logo": "EN.png",
					"name": "English (UK)",
					"rightToLeftText": false
			}
	],
	"versions": [
			{
					"_id": "6229ed480d54a800113c6a04",
					"updatedAt": "2022-03-10T12:21:28.009Z",
					"language": "5d5fac208435de97c57a8b0f",
					"createdAt": "2022-03-10T12:21:28.008Z",
					"banners": [
							"6229ed470d54a800113c6a01"
					],
					"name": "Default",
					"__v": 0
			}
	],
	"formats": [
			"574c86ff34d32eae13045e5e"
	],
	"banners": [
			{
					"_id": "6229ed470d54a800113c6a01",
					"updatedAt": "2022-03-10T12:29:01.238Z",
					"adaptiveLanguageId": "6229ed470d54a800113c6a02",
					"language": "5d5fac208435de97c57a8b0f",
					"format": "574c86ff34d32eae13045e5e",
					"height": 250,
					"width": 300,
					"createdAt": "2022-03-10T12:21:27.925Z",
					"landingPage": "http://www.google.com",
					"deleted": false,
					"userIds": [],
					"accountIds": [
							"60215a814b6e3300107d1825"
					],
					"slides": [
							{
									"_id": "6229ed470d54a800113c69ff",
									"updatedAt": "2022-03-10T12:29:01.240Z",
									"adaptiveLanguageId": "6229ed470d54a800113c6a00",
									"createdAt": "2022-03-10T12:21:27.924Z",
									"deleted": false,
									"elements": [
											{
													"_id": "6229eed20d54a800113c6a46",
													"updatedAt": "2022-03-10T12:29:01.255Z",
													"css": {
															"height": 56,
															"width": 102,
															"paddingBottom": 0,
															"paddingRight": 0,
															"paddingTop": 0,
															"paddingLeft": 0,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "#000000",
															"borderColor": "transparent",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "left",
															"color": "#000000",
															"fontSize": 20,
															"fontStyle": "normal",
															"fontFamily": "Arial",
															"zIndex": 7,
															"opacity": 1,
															"scaleY": 1,
															"scaleX": 1,
															"left": 179,
															"top": 10,
															"rotation": 0
													},
													"props": {
															"thumbnailName": "frik_t.jpeg",
															"sourceUrl": "https://ads.bannerwise.io/ibv/60215a814b6e3300107d1825/6229eecd96c72e0011dfc28f.mp4",
															"replay": true,
															"loopBanner": false,
															"loop": false,
															"controls": true,
															"autoplay": false
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "95c3d4c9-2437-c21b-153d-0a71e2c41d8e",
													"text": "",
													"inline": false,
													"quality": 81,
													"dynamic": false,
													"cropBounds": null,
													"animations": null,
													"name": "Video",
													"type": "video",
													"aspectRatio": true,
													"resourceId": "6229eecd96c72e0011dfc28f",
													"cloudinaryId": "images/izecvtlae5a2b0ctdrkx",
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"adaptiveLanguageId": "6229eed20d54a800113c6a45",
													"createdAt": "2022-03-10T12:28:02.445Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"frame": {
															"origin": {
																	"y": 10,
																	"x": 179
															},
															"size": {
																	"height": 56,
																	"width": 102
															}
													}
											},
											{
													"_id": "6229ee9396c72e0011dfc28b",
													"updatedAt": "2022-03-10T12:29:01.252Z",
													"css": {
															"borderWidth": "1",
															"borderRadius": 15,
															"height": 43,
															"width": 81,
															"paddingBottom": 10,
															"paddingRight": 15,
															"paddingTop": 10,
															"paddingLeft": 15,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "#2B90D9",
															"borderColor": "#1E6ECD",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "center",
															"color": "#FFFFFF",
															"fontSize": 16,
															"fontStyle": "normal",
															"fontFamily": "Arial",
															"zIndex": 6,
															"opacity": 1,
															"scaleY": 1,
															"scaleX": 1,
															"left": 204,
															"top": 186,
															"rotation": 0
													},
													"props": {
															"autoSize": {
																	"constraints": {
																			"maxHeight": 40,
																			"minHeight": 20,
																			"maxWidth": 150,
																			"minWidth": 75
																	},
																	"lineBreak": false,
																	"direction": "left-right",
																	"status": false,
																	"type": "width"
															},
															"rightToLeft": false,
															"verticalAlign": "vertical-align-middle"
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "ae413451-93b9-a884-b09b-a17ff33bd5c4",
													"text": "!",
													"inline": false,
													"quality": 81,
													"dynamic": false,
													"cropBounds": null,
													"animations": {
															"exit": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Exit",
																	"id": "3a407f8a-95ce-aae0-0d13-65bc7fa7fa01",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 4,
																	"duration": 1,
																	"direction": "Center"
															},
															"emphasis": {
																	"repeats": 3,
																	"speed": 0.5,
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Emphasis",
																	"id": "b1043d35-4e6b-8209-3a7c-5b0bb2ac35df",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": false,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 2,
																	"duration": 1,
																	"direction": "Center"
															},
															"entrance": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Entrance",
																	"id": "b1de36c2-a3a7-e875-1dd8-e696ff26efa3",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 0,
																	"duration": 1,
																	"direction": "Center"
															}
													},
													"type": "button",
													"aspectRatio": false,
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"style": "b-medium-shadow",
													"adaptiveLanguageId": "6229ee9396c72e0011dfc28a",
													"createdAt": "2022-03-10T12:26:59.806Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"frame": {
															"origin": {
																	"y": 186,
																	"x": 204
															},
															"size": {
																	"height": 43,
																	"width": 81
															}
													},
													"hover": {
															"backgroundColor": "#D2D4D6",
															"color": "#C9C9C9"
													}
											},
											{
													"_id": "6229ed6996c72e0011dfc248",
													"updatedAt": "2022-03-10T12:29:01.244Z",
													"css": {
															"height": 85,
															"width": 266,
															"paddingBottom": 0,
															"paddingRight": 0,
															"paddingTop": 0,
															"paddingLeft": 0,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "#2BD9C2",
															"borderColor": "transparent",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "left",
															"color": "#000000",
															"fontSize": 20,
															"fontStyle": "normal",
															"fontFamily": "Arial",
															"zIndex": 5,
															"opacity": 0.4,
															"scaleY": 1,
															"scaleX": 1,
															"left": 15,
															"top": 78,
															"rotation": 0
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "5a24b332-ac9e-2900-3454-bb8772038f59",
													"text": "",
													"inline": false,
													"quality": 81,
													"dynamic": true,
													"cropBounds": null,
													"animations": null,
													"name": "link 1",
													"type": "click",
													"clickUrl": "https://bannerwise.io",
													"aspectRatio": false,
													"dynamicSettings": {
															"label": "link",
															"index": "1"
													},
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"adaptiveLanguageId": "6229ed6996c72e0011dfc247",
													"createdAt": "2022-03-10T12:22:01.358Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"frame": {
															"origin": {
																	"y": 78,
																	"x": 15
															},
															"size": {
																	"height": 85,
																	"width": 266
															}
													}
											},

											{
													"_id": "6229ee170d54a800113c6a22",
													"updatedAt": "2022-03-10T12:29:01.251Z",
													"css": {
															"height": 86,
															"width": 152,
															"paddingBottom": 0,
															"paddingRight": 0,
															"paddingTop": 0,
															"paddingLeft": 0,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "transparent",
															"borderColor": "transparent",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "left",
															"color": "#000000",
															"fontSize": 20,
															"fontStyle": "normal",
															"fontFamily": "Arial",
															"zIndex": 4,
															"opacity": 1,
															"scaleY": 1,
															"scaleX": 1,
															"left": 69,
															"top": 77,
															"rotation": 0
													},
													"props": {
															"image": {
																	"height": 86,
																	"width": 152,
																	"left": 0,
																	"top": 0
															},
															"originalHeight": 270,
															"originalWidth": 480,
															"backgroundSize": "stretch"
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "38619a4d-6788-150e-14d6-e14e34992b34",
													"text": "",
													"inline": false,
													"quality": 81,
													"dynamic": false,
													"cropBounds": null,
													"animations": {
															"exit": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Exit",
																	"id": "a6fdfa95-ad3c-ab27-0da8-8f0198a4d2bd",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 4,
																	"duration": 1,
																	"direction": "Center"
															},
															"emphasis": {
																	"repeats": 3,
																	"speed": 0.5,
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Emphasis",
																	"id": "c221014e-6f4f-adc1-cfd9-bdde2d25f491",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": false,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 2,
																	"duration": 1,
																	"direction": "Center"
															},
															"entrance": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Entrance",
																	"id": "5ce534ee-9fbb-8986-5a88-2e084be28ff3",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 0,
																	"duration": 1,
																	"direction": "Center"
															}
													},
													"name": "borat.gif",
													"type": "image",
													"format": "gif",
													"aspectRatio": true,
													"resourceId": "6229ee130d54a800113c6a1e",
													"cloudinaryId": "images/cisw4kvx8c38kgafklnp",
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"adaptiveLanguageId": "6229ee170d54a800113c6a21",
													"createdAt": "2022-03-10T12:24:55.903Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"frame": {
															"origin": {
																	"y": 77,
																	"x": 69
															},
															"size": {
																	"height": 86,
																	"width": 152
															}
													}
											},
											{
													"_id": "6229edc00d54a800113c6a1b",
													"updatedAt": "2022-03-10T12:29:01.249Z",
													"css": {
															"height": 52,
															"width": 139,
															"paddingBottom": 0,
															"paddingRight": 0,
															"paddingTop": 0,
															"paddingLeft": 0,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "transparent",
															"borderColor": "transparent",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "left",
															"color": "#000000",
															"fontSize": 20,
															"fontStyle": "normal",
															"fontFamily": "Arial",
															"zIndex": 3,
															"opacity": 1,
															"scaleY": 1,
															"scaleX": 1,
															"left": 15,
															"top": 10,
															"rotation": 0
													},
													"props": {
															"image": {
																	"height": 52,
																	"width": 139,
																	"left": 0,
																	"top": 0
															},
															"backgroundSize": "contain",
															"originalHeight": 46,
															"originalWidth": 300
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "222141fd-bbf8-3543-a9a1-ccaac30b1095",
													"text": "",
													"inline": false,
													"quality": 81,
													"dynamic": true,
													"cropBounds": null,
													"animations": {
															"exit": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Exit",
																	"id": "a0c3c257-1bea-d488-fac8-f8ba81bac795",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 4,
																	"duration": 1,
																	"direction": "Center"
															},
															"emphasis": {
																	"repeats": 3,
																	"speed": 0.5,
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Emphasis",
																	"id": "c5d326d2-2007-a3c3-07ce-c2472f308f4d",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": false,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 2,
																	"duration": 1,
																	"direction": "Center"
															},
															"entrance": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Entrance",
																	"id": "161d1376-a7e9-5278-934a-cabbb09c84ed",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 0,
																	"duration": 1,
																	"direction": "Center"
															}
													},
													"name": "image_link 1",
													"type": "image",
													"aspectRatio": false,
													"dynamicSettings": {
															"label": "image_link",
															"index": "1"
													},
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"adaptiveLanguageId": "6229edc00d54a800113c6a1a",
													"createdAt": "2022-03-10T12:23:28.596Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"frame": {
															"origin": {
																	"y": 10,
																	"x": 15
															},
															"size": {
																	"height": 52,
																	"width": 139
															}
													}
											},
											{
													"_id": "6229ed610d54a800113c6a0c",
													"updatedAt": "2022-03-10T12:29:01.242Z",
													"css": {
															"borderRadius": 0,
															"borderWidth": "0",
															"height": 26,
															"width": 120,
															"paddingBottom": 0,
															"paddingRight": 0,
															"paddingTop": 0,
															"paddingLeft": 0,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "transparent",
															"borderColor": "transparent",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "left",
															"color": "#F2F2F2",
															"fontSize": 15,
															"fontStyle": "normal",
															"fontFamily": "Advent Pro",
															"zIndex": 2,
															"opacity": 1,
															"scaleY": 1,
															"scaleX": 1,
															"left": 15,
															"top": 206,
															"rotation": 0
													},
													"props": {
															"verticalAlign": "vertical-align-middle",
															"maxFontSize": 15,
															"minFontSize": 8,
															"rightToLeft": false,
															"scaleToFit": true
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "75569ecb-e4e7-0ff6-f928-ceb9a683d643",
													"text": "",
													"inline": false,
													"quality": 81,
													"dynamic": true,
													"cropBounds": null,
													"animations": {
															"exit": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Exit",
																	"id": "3847b99d-4460-fda2-f73a-0923e9c0b17d",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 4,
																	"duration": 1,
																	"direction": "Center"
															},
															"emphasis": {
																	"repeats": 3,
																	"speed": 0.5,
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Emphasis",
																	"id": "50fc5e5d-ae48-bbc7-7ef5-beeaae269ad5",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": false,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 2,
																	"duration": 1,
																	"direction": "Center"
															},
															"entrance": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Entrance",
																	"id": "2e7c7ae2-01b2-652b-b431-8b1d6a29bb55",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 0,
																	"duration": 1,
																	"direction": "Center"
															}
													},
													"name": "description 1",
													"type": "text",
													"aspectRatio": false,
													"dynamicSettings": {
															"label": "description",
															"index": "1"
													},
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"adaptiveLanguageId": "6229ed610d54a800113c6a0b",
													"createdAt": "2022-03-10T12:21:53.355Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [
															"100",
															"200",
															"300",
															"regular",
															"500",
															"600",
															"700"
													],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"fontId": "575ea20f772e47f517563c39",
													"frame": {
															"origin": {
																	"y": 206,
																	"x": 15
															},
															"size": {
																	"height": 26,
																	"width": 120
															}
													}
											},
											{
													"_id": "6229ed5a0d54a800113c6a08",
													"updatedAt": "2022-03-10T12:29:01.245Z",
													"css": {
															"borderRadius": 0,
															"borderWidth": "0",
															"height": 26,
															"width": 54,
															"paddingBottom": 0,
															"paddingRight": 0,
															"paddingTop": 0,
															"paddingLeft": 0,
															"padding": 0,
															"backgroundSize": "contain",
															"backgroundColor": "transparent",
															"borderColor": "transparent",
															"letterSpacing": 0,
															"lineHeight": 1.2,
															"_rotation": 0,
															"_msTransform": [],
															"_webkitTransform": [],
															"_mozTransform": [],
															"_transforms": [],
															"whiteSpace": "normal",
															"fill": "#000000",
															"textShadow": "none",
															"fontWeight": "normal",
															"textTransform": "none",
															"textDecoration": "none",
															"justifyContent": "center",
															"textAlign": "left",
															"color": "#FAFAFA",
															"fontSize": 15,
															"fontStyle": "normal",
															"fontFamily": "Abril Fatface",
															"zIndex": 1,
															"opacity": 1,
															"scaleY": 1,
															"scaleX": 1,
															"left": 15,
															"top": 180,
															"rotation": 0
													},
													"props": {
															"verticalAlign": "vertical-align-middle",
															"maxFontSize": 15,
															"minFontSize": 4,
															"rightToLeft": false,
															"scaleToFit": true
													},
													"country": "NL",
													"disabled": false,
													"adaptiveId": "6e668821-ece1-8c34-6a49-4d236d605b11",
													"text": "",
													"inline": false,
													"quality": 81,
													"dynamic": true,
													"cropBounds": null,
													"animations": {
															"exit": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Exit",
																	"id": "4d27b9e9-d225-6614-2b87-41fece5d8f43",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 4,
																	"duration": 1,
																	"direction": "Center"
															},
															"emphasis": {
																	"repeats": 3,
																	"speed": 0.5,
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Emphasis",
																	"id": "e37c8593-811e-f00b-3b02-65b160bfdf10",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": false,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 2,
																	"duration": 1,
																	"direction": "Center"
															},
															"entrance": {
																	"css": {
																			"width": 0,
																			"left": 0
																	},
																	"type": "Entrance",
																	"id": "383df710-4679-d2d7-26c3-9d89c50aee98",
																	"animationMove": {
																			"_rotation": 0,
																			"_msTransform": [],
																			"_webkitTransform": [],
																			"_mozTransform": [],
																			"_transforms": [],
																			"active": false,
																			"height": 0,
																			"width": 0,
																			"left": 0,
																			"top": 0
																	},
																	"active": true,
																	"styles": {
																			"widgetHyundai": false,
																			"flipVer": false,
																			"flipHor": false,
																			"move": false,
																			"shake": false,
																			"fade": false,
																			"big": false,
																			"small": false,
																			"fly": true,
																			"rotate": false
																	},
																	"ease": {
																			"animation": "0,0,1,1",
																			"value": null,
																			"bwLabel": "None",
																			"label": "Power0.easeNone"
																	},
																	"delay": 0,
																	"duration": 1,
																	"direction": "Center"
															}
													},
													"name": "Title 1",
													"type": "text",
													"aspectRatio": false,
													"dynamicSettings": {
															"label": "Title",
															"index": "1"
													},
													"slide": "6229ed470d54a800113c69ff",
													"banner": "6229ed470d54a800113c6a01",
													"adaptiveLanguageId": "6229ed5a0d54a800113c6a07",
													"createdAt": "2022-03-10T12:21:46.600Z",
													"deleted": false,
													"textLines": [],
													"fill": {
															"color": null
													},
													"variants": [
															"regular"
													],
													"customerIds": [],
													"accountIds": [],
													"__v": 1,
													"fontId": "575ea20f772e47f517563c34",
													"frame": {
															"origin": {
																	"y": 180,
																	"x": 15
															},
															"size": {
																	"height": 26,
																	"width": 54
															}
													}
											}
									],
									"duration": 5,
									"__v": 1
							}
					],
					"__v": 1,
					"setId": "6229ed470d54a800113c6a03",
					"version": {
							"_id": "6229ed480d54a800113c6a04",
							"updatedAt": "2022-03-10T12:21:28.009Z",
							"language": "5d5fac208435de97c57a8b0f",
							"createdAt": "2022-03-10T12:21:28.008Z",
							"banners": [
									"6229ed470d54a800113c6a01"
							],
							"name": "Default",
							"__v": 0
					},
					"background": {
							"color": "#051F3D",
							"solid": {
									"color": "#051F3D"
							}
					},
					"empty": false,
					"video": true
			}
	],
	"demo": false,
	"type": "banner",
	"name": "dynamicGoogleAds",
	"__v": 10,
	"folder": null,
	"video": true
}

var compiler = new BannerwiseCompiler.CompilerBuilder(data).setTransform().setInjectBaseCss().setIsSettingsEnabled().setContext('preview').build();
var [ html, output ] = compiler.compile();
document.querySelector('html').innerHTML = html;
compiler.execute();