Contentment 6 using Custom Web Component

Questions
1

This question is most appropriate for @leekelleher, however, putting it out in the wild for the community.

We just upgraded from Umbraco 13 to Umbraco 17 and with that we brought Contentment to version 6.

I have written a custom Lit Component which is used inside the list editor with a “Custom Component List” option like so:

image
image842×327 16.9 KB

This component defines each item respectively and does what we need.

However, inside the Lit Element we utilize

image
image857×103 27.8 KB

Where the ../contentment/… is our own folder. I have had to pull the ContentmentListItem and ContentmentDataListItemUiElement across into our own types as trying to find a direct reference from Contentment was harder than anticipated

Is there a way to directly reference these types from Contentment so that you don’t need to include them directly?

Best,

Kyle

1 Like
2

Hi Kyle,

I don’t know of a way that the TypeScript definitions can be referenced from the NuGet package itself.

My assumption is that I’ll need to release a separate NPM package for the TypeScript definitions. BUT! I’ve never done this before, so it’ll be a learning curve for me. :grimacing:

If anyone has any suggestions or guides I can read up on… or better yet, contribute to the repository, that would be hugely appreciated. Otherwise I’ll figure it out over the upcoming weeks (months). :sweat_smile:

3

Lee,

Not a problem - I wasn’t sure if you exposed the types in another package elsewhere we could consume.

I’d imagine something like a Contentment.Client package might be one way to go about it.

Thanks for the confirmation! Hope all is well

4

I was looked at this as well via bundle manifest.

import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
import { manifests as contentmentExtensions } from "./contentment/manifests.js";

export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
  ...contentmentExtensions,
];

contentment folder:

import { manifests as dataListItemUis } from './data-list-item-ui/manifests.js';
import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';

export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
	...dataListItemUis,
];

data-list-item-ui folder:

import { manifest as colorSwatch } from './color-swatch/manifest.js';

export const manifests: Array<UmbExtensionManifest> = [colorSwatch];

and color-swatch folder:

import type { ContentmentDataListItemUiExtentionManifestType } from './../../data-list-item-ui.extension.js';

export const manifest: ContentmentDataListItemUiExtentionManifestType = {
    type: 'contentmentDataListItemUi',
    alias: 'Umb.Contentment.DataListItemUi.ColorSwatch',
    name: 'Color Swatch',
    element: () => import('./color-swatch.element.js'),
    meta: {
		label: 'Color Swatch',
		icon: 'icon-paintbrush',
	},
};

Maybe I am missing something obvious, but I couldn’t made it pick up the extension of contentmentDataListItemUi :see_no_evil_monkey:

image
image2140×353 17.7 KB

5

It seems to work if I used this instead:

import { manifests as dataListItemUis } from './data-list-item-ui/manifests.js';
//import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';

export const manifests: Array<UmbExtensionManifest> = [
	...dataListItemUis,
];

import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';

import { manifests as contentmentExtensions } from "./contentment/manifests.js";

// Job of the bundle is to collate all the manifests from different parts of the extension and load other manifests
// We load this bundle from umbraco-package.json
export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
  ...contentmentExtensions,
];

It seems it caused issue having UmbExtensionManifestKind included in Array<UmbExtensionManifest>.