Skip to content

SharepointPlus v6.0 Announcement

Aymeric edited this page Dec 26, 2019 · 7 revisions

Code Rewrite

It was already possible to use sharepointplus as a Node module, however it was just an adaptation of the browser's version.

Because I'm developing within a Node environment, using Webpack and other tools, I thought it was about time to update sharepointplus code to benefit from the modern JavaScript functionalities!

The code of sharepointplus has been split to have one function per file. I also leverage the ES6 features like await and arrow functions to come up with a more readable code.

Test Suite

I created a new test suite, adding more tests to the existing functions, and expanding it to Sharepoint Online.

sharepointplus is officially fully compatible with Sharepoint Online.

Tree-Shaking / Selective Imports

One great thing with Webpack is the ability to do tree-shaking: "Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax."

By splitting my code to small files, we're now able to only import the code that is really needed, cutting down the dead-code. This allows you to have smaller bundles.

How it works

To use this new feature, you could manually import all the modules/files, but it doesn't look simple enough for me, so I created a Webpack plugin loader called sharepointplus-loader that will do all the hard work for you.

You have 2 different options to import sharepointplus in your project:

1) Manual Selective Imports

One solution is to manually select the files you'll use.

Let's suppose you only need these functions in your web project: $SP().list().get(), $SP().list().remove() and $SP().toSPDate().

import spInit from 'sharepointplus/es5/init.js'
import list from 'sharepointplus/es5/lists/list.js'
import get from 'sharepointplus/es5/lists/get.js'
import remove from 'sharepointplus/es5/lists/remove.js'
import toSPDate from 'sharepointplus/es5/utils/toSPDate.js'
const $SP = spInit({'list':list, 'get':get, 'remove':remove, 'toSPDate':toSPDate});

// next you can use $SP as you always did:
$SP().list("My List").get(...)

This option is not recommended because it's too much effort and manual.

2) Automatic Selective Imports (Best solution)

The best option is to use the Webpack plugin loader called sharepointplus-loader.

In each file where you use $SP, you'll only call sharepointplus, just like you use to do:

import $SP from 'sharepointplus'

Then sharepointplus-loader will automatically convert that line to call the necessary code. Using the same example from option 1, your code will be transformed to:

// #### The below code is automatically generated by the plugin
import spInit from 'sharepointplus/es5/init.js'
import list from 'sharepointplus/es5/lists/list.js'
import get from 'sharepointplus/es5/lists/get.js'
import remove from 'sharepointplus/es5/lists/remove.js'
import toSPDate from 'sharepointplus/es5/utils/toSPDate.js'
const $SP = spInit({'list':list, 'get':get, 'remove':remove, 'toSPDate':toSPDate});

If you don't use sharepointplus-loader, then all the files/modules will be imported, causing a bigger bundle size.

Browser's bundle

Because not everyone is using Node environment, a dedicated bundle for browsers is available. This bundle will contain all the functions as well as all the required polyfills to make it work on IE11 and modern browsers.

Plugins deprecated

sharepointplus used to have a few plugins. One of them was dedicated to deal with forms' fields. However I'm not using them anymore, and I'm not even sure anyone was using them. I decided to remove them altogether.

Documentation Updated

Because Node environment is now a big thing with sharepointplus, the documentation homepage has been reviewed to provide more information about this environment.

And more...

Read the changelog to find all the changes.