Content presets #9

davbree · 2021-10-03T09:40:46Z

Add support for content presets

smnh · 2021-10-03T10:14:08Z

__tests__/presets-loader.js

+        }));
+        expect(result.config.presets).toMatchObject(expect.objectContaining({
+            '.stackbit/presets/model1.json:presets[1]': expect.objectContaining({
+                thumbnail: '/images/preset-thumbnail2.png'


The resolved thumbnails paths should be relative to project root, and without / prefix. See comments below for more info.
This is also because if we run path.resolve(projDir, thumbnail) it should return correct path. And path.resolve method will always ignore the projDir if thumbnail starts with /.

smnh · 2021-10-03T10:16:38Z

__tests__/presets-loader.js

+        }));
+        expect(result.config.presets).toMatchObject(expect.objectContaining({
+            '.stackbit/presets/model1.json:presets[1]': expect.objectContaining({
+                thumbnail: '/images/preset-thumbnail2.png'


this is the same test as one above it, maybe you meant model1_other?

smnh · 2021-10-03T10:24:05Z

src/config/config-types.ts

@@ -126,6 +127,7 @@ export interface YamlBaseModel {
    groups?: string[];
    fieldGroups?: FieldGroupItem[];
    fields?: Field[];
+    presets?: any;


Do we need presets on YamlBaseModel?
YamlBaseModel defines the structure of the actual yaml model file definition.
The Config interface defines the structure of the config object returned by the SDK with resolved presets.
From the code below, I see that you add presets to the variable of Config type only.

A model will have presets as well (preset id's), right?
Would BaseModel be better?

oh oh, sorry I confused some stuff myself...

So, the final Config type has presets which is a map of all the presets to their IDs:

stackbit-sdk/src/config/config-types.ts

Lines 4 to 7 in cbec020

export interface Config extends BaseConfig {

models: Model[];

presets?: any;

}

👍

Then, every loaded model returned by SDK also has presets which is the array of preset IDs of a specific model.
You defined it inside YamlBaseModel:

stackbit-sdk/src/config/config-types.ts

Lines 115 to 131 in cbec020

export interface YamlBaseModel {

type: 'object' | 'data' | 'page' | 'config';

__metadata?: {

filePath?: string;

invalid?: boolean;

};

label: string;

description?: string;

thumbnail?: string;

extends?: string | string[];

labelField?: string;

variantField?: string;

groups?: string[];

fieldGroups?: FieldGroupItem[];

fields?: Field[];

presets?: any;

}

This is OK and will not cause any problems, it is just it is not strict.

In any case, FYI...

There are two main Model types:

YamlModel - type of models as they should be defined in model files (and used to type Joi schemas)

stackbit-sdk/src/config/config-types.ts

Line 113 in cbec020

export type YamlModel = StricterUnion<YamlObjectModel | YamlDataModel | YamlPageModel | YamlConfigModel>;

Model - type of models as returned by loadConfig()

stackbit-sdk/src/config/config-types.ts

Line 100 in cbec020

export type Model = StricterUnion<ObjectModel | DataModel | PageModel | ConfigModel>;

The "Model" basically extends the "YamlModel" plus adds the "name" field (in that "BaseModel" interface you noted). Although technically speaking, it is not true anymore :). Because separate model files do have name field, but we normalize the loaded files before validating them and convert all models into a map as if all models were defined in stackbit.yaml with model names as keys
But the "presets" are always added to the final result, so yeah, the ideal place for them will be the "BaseModel".

smnh · 2021-10-03T10:25:29Z

src/config/presets-loader.ts

+}
+
+export interface PresetsLoaderResult {
+    config: Config | null;


The result probably can't have null for config because it always receives a non null Config.

smnh · 2021-10-03T10:30:18Z

src/config/presets-loader.ts

+        const presetsRelDir = path.dirname(presetFile);
+        const presetPath = path.join(dirPath, presetFile);
+        const presetData = await parseFile(presetPath);
+        for (const [i, preset] of presetData.presets.entries()) {


don't assume presetData.presets will be an array or that it will even exists, use:

_.forEach(_.get(presetData, 'presets', {}), (preset, i) => { ... });

or any other defensive coding

later we can return user facing errors, but the code should not throw.

smnh · 2021-10-03T10:34:28Z

src/config/presets-loader.ts

+
+function resolveThumbnailPath(thumbnail: string, dir: string) {
+    if (thumbnail.startsWith('/')) {
+        return thumbnail;


Lets make it to work the same way other thumbnails work.

remove the / prefix if it starts with one

if / is used inside component library it should resolve to component library's root

stackbit-sdk/src/config/config-loader.ts

Lines 398 to 408 in 58694ea

function resolveThumbnailPath(thumbnail: string, modelDirPath: string) {

if (thumbnail.startsWith('/')) {

if (modelDirPath.endsWith('@stackbit/components/models')) {

modelDirPath = modelDirPath.replace(/\/models$/, '');

} else {

modelDirPath = '';

}

thumbnail = thumbnail.replace(/^\//, '');

}

return path.join(modelDirPath, thumbnail);

}

smnh · 2021-10-03T10:45:45Z

__tests__/fixtures/model-files/node_modules/@stackbit/components/presets/model1.json

+    "presets": [
+        {
+            "label": "ext - my preset 1",
+            "thumbnail": "path/to/ext-preset-thumbnail1.png",
+            "data": {
+                "enum_field": "thumbnail_1"
+            }
+        }
+    ]


suggest adding another test that resolved absolutes path inside component library like we do with regular thumbnails:

test:

stackbit-sdk/__tests__/fixtures/model-files/node_modules/@stackbit/components/models/model_components_5.yaml

Line 13 in 58694ea

thumbnail: /abs/path/thumbnail.png

result - note, the models folder was removed due to use of /:

stackbit-sdk/__tests__/config-loader.js

Lines 179 to 182 in 58694ea

{

name: 'model_components_5',

thumbnail: 'node_modules/@stackbit/components/abs/path/thumbnail.png',

fields: [

The function that maps thumbnails

stackbit-sdk/src/config/config-loader.ts

Lines 398 to 408 in 58694ea

function resolveThumbnailPath(thumbnail: string, modelDirPath: string) {

if (thumbnail.startsWith('/')) {

if (modelDirPath.endsWith('@stackbit/components/models')) {

modelDirPath = modelDirPath.replace(/\/models$/, '');

} else {

modelDirPath = '';

}

thumbnail = thumbnail.replace(/^\//, '');

}

return path.join(modelDirPath, thumbnail);

}

smnh · 2021-10-03T10:49:09Z

src/config/presets-loader.ts

+            if (!presetsByModel[presetData.model]) {
+                presetsByModel[presetData.model] = [];
+            }
+            presetsByModel[presetData.model].push(presetId);


FYI, we have neat append util, not critical tho

import { append } from '@stackbit/utils'; append(presetsByModel, presetData.model, presetId);

davbree added 3 commits October 3, 2021 12:36

Initial work

4db7717

fix test

e32756a

Merge branch 'master' into content-presets

4554796

davbree requested a review from smnh October 3, 2021 09:40

smnh requested changes Oct 3, 2021

View reviewed changes

PR comments

cbec020

davbree requested a review from smnh October 3, 2021 11:49

smnh approved these changes Oct 3, 2021

View reviewed changes

Move presets into BaseModel

6c4a1a8

davbree merged commit 1cf6c1a into master Oct 4, 2021

davbree deleted the content-presets branch October 4, 2021 10:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content presets #9

Content presets #9

davbree commented Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021

davbree Oct 3, 2021

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021

davbree Oct 3, 2021

	export interface Config extends BaseConfig {
	models: Model[];
	presets?: any;
	}

	export interface YamlBaseModel {
	type: 'object' \| 'data' \| 'page' \| 'config';
	__metadata?: {
	filePath?: string;
	invalid?: boolean;
	};
	label: string;
	description?: string;
	thumbnail?: string;
	extends?: string \| string[];
	labelField?: string;
	variantField?: string;
	groups?: string[];
	fieldGroups?: FieldGroupItem[];
	fields?: Field[];
	presets?: any;
	}

	function resolveThumbnailPath(thumbnail: string, modelDirPath: string) {
	if (thumbnail.startsWith('/')) {
	if (modelDirPath.endsWith('@stackbit/components/models')) {
	modelDirPath = modelDirPath.replace(/\/models$/, '');
	} else {
	modelDirPath = '';
	}
	thumbnail = thumbnail.replace(/^\//, '');
	}
	return path.join(modelDirPath, thumbnail);
	}

	{
	name: 'model_components_5',
	thumbnail: 'node_modules/@stackbit/components/abs/path/thumbnail.png',
	fields: [

Content presets #9

Content presets #9

Conversation

davbree commented Oct 3, 2021 • edited Loading

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021

Choose a reason for hiding this comment

davbree Oct 3, 2021

Choose a reason for hiding this comment

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021 • edited Loading

Choose a reason for hiding this comment

smnh Oct 3, 2021

Choose a reason for hiding this comment

davbree Oct 3, 2021

Choose a reason for hiding this comment

davbree commented Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading

smnh Oct 3, 2021 •

edited

Loading