@craftercms/utils

Contains various utilities useful when developing with Crafter CMS

Usage

All of Crafter CMS packages can be used either via npm or in plain html/javascript via regular script imports.

Via npm

• yarn add @craftercms/utils or npm install @craftercms/utils
• import or require the functions you wish.

Via html script imports

• Download the bundle and import them in your page.
• The bundles declare a global variable named craftercms. You can access all craftercms' packages and functions under this root.
• The utils package depends on rxjs, make sure to import rxjs too before the utils script.

Tip: Once you've imported the scripts, type craftercms on your browser's dev tools console to inspect the package(s)

Vanilla html/js example

<div id="myFeature"></div>
<script src="https://unpkg.com/rxjs"></script>
<script src="https://unpkg.com/@craftercms/utils"></script>
<script>
 (function ({ utils }) {

   const people = [
     { id: 1, name: 'Mary' }
   ]

   const myLookup = utils.createLookupTable(people);
   console.log(myLookup); // => { 1: { id: 1, name: 'Mary' } }

 })(craftercms);
</script>

Package Index

The examples below assume usage in the style of using via npm. If you're using the bundles, directly importing as a script in the browser, these functions will be under the global variable named craftercms.utils (i.e. window.craftercms.utils).

createLookupTable

Creates a lookup table based on an array of items (of a type) and the items id identifier.

Example

• Create a lookup table of items:

import { Item, LookupTable } from "@craftercms/models";
import { createLookupTable } from "@craftercms/utils";

const items: Item[] = [/* ... */];
const itemsLookupTable: LookupTable<Item> = createLookupTable<Item>(items, 'url');

The lookupTable will look like this:

  {
    "/site/website/index.xml": {
      "name": "index.xml",
      "url": "/site/website/index.xml",
      "descriptorUrl": "/site/website/index.xml",
      "descriptorDom": { /* ... */ },
      "folder": false
    }
  }