Skip to content

Commit

Permalink
updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
pdallmer committed Sep 4, 2024
1 parent 1473675 commit 68d29c8
Show file tree
Hide file tree
Showing 10 changed files with 184 additions and 85 deletions.
41 changes: 32 additions & 9 deletions documentation/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,51 @@ parent: Documentation
You can configure the project in `/ssjs.config.js`.
### output
This is the name of the output file.
**default: "main.js"**

**default: "main.js"**

### package
Setting `package: true` will create a Package for the SFMC package manager. The package contains a Cloudpage Collection and a single JSON Code Resource or landingpage (if html loader was used). This option is useful for deployments, after the code has been tested.\
**default: false**

**default: false**

### html
Setting `html: true` will wrap the transpiled js in a sfmc compatible html.
**default: true**

**default: true**

### removeRawJS
Setting `removeRawJS: true` will remove the raw js file.
**default: false**

**default: false**

### htmlName
This option sets the output name of the html file (if html is set to true).
**default: index.html**

**default: index.html**

### packageName
This option sets the output name of the package file file (if package is set to true).
**default: ssjs-package**

**default: ssjs-package**

### cloudpageCollectionName
This option sets the output name of the cloudpage collection file file (if package is set to true).
**default: ssjs-cloudpage-collection**

**default: ssjs-cloudpage-collection**

### codeResourceName
This option sets the output name of the code resource file file (if package is set to true).
**default: ssjs-code-resource**

**default: ssjs-code-resource**

### dynamicPolyfills
This option defines if dynamic polyfills are used. This is currently only available in alpha releases.
**default: false**

**default: false**

### minify
This option defines if the output code should be minified. This is currently only available in alpha releases.

**default: false**

37 changes: 23 additions & 14 deletions documentation/dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,29 @@ nav_order: 1
parent: Documentation
---

### importing dependencies
You can import local js and ampscript (with ampScript loader) files as dependencies into you index.js. Node modules are also possible, although they have to be compatible with ssjs. It is recommended to single default exports, e.g. `export default(...)` and named imports, e.g. `import foo from 'bar'`.
#### Example:
create a new file `/src/lib/foo.js`:
```
export default({
foo: () => {
return 'bar';
}
});
### Importing Dependencies
Use ES6 module syntax to handle dependencies. Check the [webpack documentation](https://webpack.js.org/api/module-methods/) for more details.

**import** \
Statically import the exports of another module.
```js
import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';
import './my-polyfills.js';
```
in `/src/index.js`:

**export**\
Export anything as a default or named export.
```js
// Named exports
export var Count = 5;
export function Multiply(a, b) {
return a * b;
}

// Default export
export default {
// Some data...
};
```
import foo from './src/lib/foo.js'

Write(foo());
```
50 changes: 27 additions & 23 deletions documentation/dynamicPolyfills.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ This is an experimental feature. To use it, install the alpha version by running

Dynamic Polyfills enable you to use modern JS functions without importing the polyfills. Instead the polyfills will be added from the plugin if the functions are detected. the dynamic polyfills also don't break the core library, as they will transform the functions to prevent updating the prototype.

**example:**
**Example:**

input:
```javascript
[1,2,3].map(e => e * 2);
Expand Down Expand Up @@ -40,27 +41,30 @@ function arrayMap(callbackFn) {

**available polyfills:**
* array
* every
* filter
* find
* forEach
* includes
* indexOf
* isArray
* lastIndexOf
* map
* reduce
* reduceRight
* some
* every
* filter
* find
* forEach
* from
* includes
* indexOf
* isArray
* lastIndexOf
* map
* reduce
* reduceRight
* some
* splice
* object
* create
* defineProperty
* defineProperties
* keys
* values
* create
* defineProperties
* keys
* values
* string
* endsWith
* startsWith
* trim


* codePointAt
* endsWith
* padStart
* padEnd
* repeat
* startsWith
* trim
12 changes: 9 additions & 3 deletions documentation/env.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,19 @@ nav_order: 4
parent: Documentation
---

### environment variables
Example:
### Environment Variables
Increase portability of your projects by using environment variables to manage configuration settings across different environments without changing the code.\
The framework uses [dotenv](https://github.com/mrsteele/dotenv-webpack) for environment variables.
#### Example:
create a new file `/.env`:
```
FOO=BAR
```
in `/src/index.js`:
```
Write(Stringify(process.env.FOO));
```
```

{: .note }
**Recommended**\
Add .env to your .gitignore file.
6 changes: 3 additions & 3 deletions documentation/html.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ External HTML files can be imported and displayed. This can be useful if you are


Example:
create a new file `/templates/index.html`:
```
create a new file `/src/templates/index.html`:
```html
<html>
<head>
<title>Hello World!</title>
Expand All @@ -22,7 +22,7 @@ create a new file `/templates/index.html`:
</html>
```
in `/src/index.js`:
```
```js
import index from 'templates/index.html';
index.display();

Expand Down
22 changes: 20 additions & 2 deletions documentation/modernJs.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,23 @@ nav_order: 3
parent: Documentation
---

### modern js syntax
The source files will be transpiled to ECMA-3 compatible js, so you can use modern js syntax like arrow functions, const, let or template literals.
### Modern JS Syntax
The framework uses babel loader to transpile your source files to ES3 compatible scripts.

#### Example
```js
//input
const val = 1;
//output
var val = 1;

//input
[1, 2, 3].map(n => n + 1);
//output
[1, 2, 3].map(function(n) {
return n + 1;
});
```

{: .note }
this will only transform syntax features, but not add additional functionality to your code. The second example transforms the arrow function but is not aware, that `array.prototype.map` is not a function in SSJS. To use the map function you have to include the [polyfill]({{ site.baseurl }}{% link documentation/polyfills.md %}).
55 changes: 31 additions & 24 deletions documentation/polyfills.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,38 @@ parent: Documentation
---

### polyfills
Its possible to import all polyfills with a single import statement: `import polyfills`, or only the required polyfills, e.g. `import polyfills/array`, or `import polyfills/array/map`.
Its possible to import all polyfills with a single import statement: `import polyfills`, or only the required polyfills, e.g. `import polyfills/array`, or `import polyfills/array/map`.\
This refers to the polyfills that are included in the framework. You can of course create your own polyfills, or use alternative implementations.

{: .warning }
Using Polyfills breaks the core library and potentially other features. You can use WsProxy and Platform functinos as an alternative.

**available polyfills:**
* array
* every
* filter
* find
* forEach
* includes
* indexOf
* isArray
* lastIndexOf
* map
* reduce
* reduceRight
* some
* every
* filter
* find
* forEach
* from
* includes
* indexOf
* isArray
* lastIndexOf
* map
* reduce
* reduceRight
* some
* splice
* object
* create
* defineProperty
* defineProperties
* keys
* values
* create
* defineProperties
* keys
* values
* string
* endsWith
* startsWith
* trim

{: .warning }
Using Polyfills breaks the core library and potentially other features. You can use WsProxy and Pltform functinos as an alternative.
* codePointAt
* endsWith
* padStart
* padEnd
* repeat
* startsWith
* trim
2 changes: 1 addition & 1 deletion documentation/ts.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ parent: Documentation
---

### Typescript Loader
import TypeScript into your js files, or use TypeScript exclusively.
Import TypeScript into your js files, or use TypeScript exclusively.
Example:
create a new file `/src/add.ts`:
```
Expand Down
29 changes: 23 additions & 6 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,32 @@ layout: home
nav_order: 1
---
# The SSJS Framework
Framework that creates a sfmc compatible script from modern Javascript.
### Features
* importing dependencies for node_modules (if ssjs compatible) and local files.
* polyfills
* array functions (map, reduce, forEach)
* Object functions (keys)
The SSJS Framework creates sfmc compatible SSJS from modern Javascript. \
It helps to manage your dependencies seamlessly by organizing them into distinct modules and
enables code sharing across projects with reusable components.\
Create your own modules and also check out the list of available [packages]({{ site.baseurl }}{% link packages.md %}).
## Features
* importing dependencies from node_modules (if ssjs compatible) and local files.
* [polyfills]({{ site.baseurl }}{% link documentation/polyfills.md %})
* modern JS syntax
* environment variables
* ampScriptLoader
* htmlLoader
* TypesScriptLoader
## Example:
create a new file `/src/lib/foo.js`:

```js
export default({
foo: () => {
return 'bar';
}
});
```
in `/src/index.js`:

```js
import foo from './src/lib/foo.js'

Write(foo());
```
15 changes: 15 additions & 0 deletions packages.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Packages
layout: default
nav_order: 5
---
## Packages

* [e360-ssjs-lib](https://www.npmjs.com/package/e360-ssjs-lib)
* A packaged version of the [Email360 ssjs-lib](https://github.com/email360/ssjs-lib)
* [ssjs-fetch](https://www.npmjs.com/package/ssjs-fetch)
* A Simplified interface for Script.Util.HttpRequest
* [ssjs-date-time](https://www.npmjs.com/package/ssjs-date-time)
* A Package to simplify date and time manipulation
* [sfmc-rest-client](https://www.npmjs.com/package/sfmc-rest-client)
* A Generic Rest Client for Salesforce Marketing Cloud

0 comments on commit 68d29c8

Please sign in to comment.