@stackbit/dev-common 1.0.40 → 1.0.41

package/src/cms/content-store-adapter.ts

@@ -164,9 +164,9 @@ export class ContentStoreAdapter {
             userLogger: this.userLogger
         });
         this.stackbitConfig = await this.extendStackbitConfigWithContentSources(stackbitConfig);
-        if (this.stackbitConfig?.contentSources || this.stackbitConfig?.connectors) {
+        if (this.csiEnabled || this.stackbitConfig?.contentSources || this.stackbitConfig?.connectors) {
             this.userLogger.info('Using Content Source Interface');
-            const stackbitYamlDir = this.stackbitConfig.dirPath;
+            const stackbitYamlDir = this.stackbitConfig?.dirPath || this.appDir;
             this.contentStore = new ContentStore({
                 logger: this.logger,
                 userLogger: this.userLogger,
@@ -277,7 +277,12 @@ export class ContentStoreAdapter {
             });
             await this.contentStore.init({ stackbitConfig: this.stackbitConfig });
         } else {
-            this.userLogger.info(`Loading from ${this.cmsType || 'git'}...`);
+            this.userLogger.warn(
+                `It looks like your stackbit.config.ts doesn't have any 'contentSources' defined. ` +
+                    'Add at least one content source to enable visual editing. ' +
+                    'For more info please visit https://visual-editor-reference.netlify.com/config'
+            );
+            this.userLogger.info(`Loading from legacy ${this.cmsType || 'git'}...`);
             this.cms = this.createCms();
             await this.cms.run({ spawnRunner: this.userCommandSpawner });
         }
@@ -326,17 +331,32 @@ export class ContentStoreAdapter {
             return config;
         }
 
-        // if CSI enabled, and cmsType is one of the CSI supported content-sources,
-        // create content-sources according to the cmsType
-        const supportedContentSources = ['git', 'contentful', 'sanity'];
-        const forceCSI = (!this.cmsType || supportedContentSources.includes(this.cmsType)) && this.csiEnabled;
-        if (!forceCSI) {
+        // If CSI is not enabled, return unmodified config
+        if (!this.csiEnabled) {
+            return config;
+        }
+
+        const cmsType = this.cmsType || config.cmsName;
+
+        if (!cmsType) {
             return config;
         }
 
+        // If CSI is enabled, and cmsType is one of the supported content-sources,
+        // install and instantiate a content-sources based on the cmsType.
+        const supportedContentSources = ['git', 'contentful', 'sanity'];
+        if (supportedContentSources.includes(cmsType)) {
+            this.userLogger.warn('No content sources defined in stackbit config!');
+            this.userLogger.warn(`Installing and instantiating content source based on the provided CMS type: '${cmsType}'`);
+        }
+
         // for backward compatibility use ContentfulContentSource when stackbit.yaml has cmsType === 'contentful'
-        if (this.cmsType === 'contentful') {
-            const contentfulContentSourceModule = await importContentSourceModule('@stackbit/cms-contentful');
+        if (cmsType === 'contentful') {
+            const contentfulContentSourceModule = await installAndImportContentSourceModule({
+                packageName: '@stackbit/cms-contentful',
+                projectDir: this.projectDir,
+                userLogger: this.userLogger
+            });
             const contentSources = this.contentfulSpaces!.map((space) => {
                 return new (contentfulContentSourceModule.ContentfulContentSource as typeof ContentfulContentSource)({
                     spaceId: space.spaceId,
@@ -351,12 +371,16 @@ export class ContentStoreAdapter {
         }
 
         // for backward compatibility use SanityContentSource when stackbit.yaml has cmsType === 'sanity'
-        if (this.cmsType === 'sanity') {
+        if (cmsType === 'sanity') {
             if (!this.sanityProject) {
                 this.userLogger.error('Cannot create SanityContentSource, missing sanity project data');
                 throw new Error('Cannot create SanityContentSource, missing sanity project data');
             }
-            const sanityContentSourceModule = await importContentSourceModule('@stackbit/cms-sanity');
+            const sanityContentSourceModule = await installAndImportContentSourceModule({
+                packageName: '@stackbit/cms-sanity',
+                projectDir: this.projectDir,
+                userLogger: this.userLogger
+            });
             const contentSources = [
                 new (sanityContentSourceModule.SanityContentSource as typeof SanityContentSource)({
                     token: this.sanityProject.token,
@@ -373,8 +397,12 @@ export class ContentStoreAdapter {
             };
         }
 
-        if (!this.cmsType || this.cmsType === 'git') {
-            const gitContentSourceModule = await importContentSourceModule('@stackbit/cms-git');
+        if (cmsType === 'git') {
+            const gitContentSourceModule = await installAndImportContentSourceModule({
+                packageName: '@stackbit/cms-git',
+                projectDir: this.projectDir,
+                userLogger: this.userLogger
+            });
             const result = await loadConfigWithModelsPresetsAndValidate({
                 dirPath: this.projectDir,
                 isForcedGitCSI: true
@@ -396,11 +424,9 @@ export class ContentStoreAdapter {
             };
         }
 
-        throw new Error(`no default content source for cmsType: ${this.cmsType}`);
-
-        // for backward compatibility use ContentfulContentSource when stackbit.yaml has cmsType === 'git'
-        // const gitContentSourceModule = await importContentSourceModule('@stackbit/cms-git');
-        // return ...
+        // If CSI is enabled, but there is no cmsType, or the cmsType doesn't
+        // match any of the supported content-sources, return unmodified config.
+        return config;
     }
 
     private createCms(): CMSInterface {
@@ -1303,18 +1329,31 @@ export class ContentStoreAdapter {
     }
 }
 
-async function importContentSourceModule(packageName: string) {
+async function installAndImportContentSourceModule({ packageName, projectDir, userLogger }: { packageName: string; projectDir: string; userLogger: Logger }) {
+    try {
+        userLogger.info(`Installing ${packageName}...`);
+        const runCommand = getCommandRunner({ env: process.env });
+        await runCommand('npm', ['install', packageName, '--no-save'], {
+            env: process.env,
+            cwd: projectDir,
+            logger: userLogger
+        });
+    } catch (error: any) {
+        userLogger.error(`Error installing ${packageName}, error: ${error.message}`);
+        throw new Error(`Error installing ${packageName}, please add it as a devDependency to your project by running "npm i ${packageName} --save-dev"`);
+    }
+
     let modulePath;
     try {
         modulePath = require.resolve(packageName);
     } catch (error) {
-        throw new Error(`can not find ${packageName} package, please add it as a devDependency by running "npm i ${packageName} --save-dev"`);
+        throw new Error(`Can not find ${packageName} package, please add it as a devDependency to your project by running "npm i ${packageName} --save-dev"`);
     }
     let module;
     try {
         module = await import(modulePath);
     } catch (error: any) {
-        throw new Error(`could not load ${packageName} module, error: ${error.message}`);
+        throw new Error(`Could not load ${packageName} module, error: ${error.message}`);
     }
     return module;
 }

package/src/services/annotations/annotation-tree-parser.js

@@ -1,7 +1,8 @@
 const _ = require('lodash');
 const chalk = require('chalk');
+const { fieldPathToString } = require('@stackbit/utils');
 const { forEachField } = require('../../utils/code-utils');
-const { fieldPathToString, fieldPathToFieldDataPath, appendOrArray } = require('./annotation-utils');
+const { fieldPathToFieldDataPath, appendOrArray } = require('./annotation-utils');
 const REGEX_ENDS_WITH_TEXT_PATH = /text\(\)(\[\d*\])?$/;
 const ANNOTATION_XPATH_SELF = ['self::node()', '.'];
 const ANNOTATION_ERROR = 'AnnotationError';

package/src/services/annotations/annotation-utils.js

@@ -1,4 +1,5 @@
 const _ = require('lodash');
+const { fieldPathToString } = require('@stackbit/utils');
 
 /**
  * This method translates fieldPath (object.sections[0].title) to fieldDataPath (object.fields.sections.items[0].fields.title)
@@ -71,38 +72,11 @@ function fieldPathToFieldDataPath(objectId, fieldPathStr, getObjectById) {
     return { fieldDataPath, fieldDataPathStr: fieldPathToString(fieldDataPath), fieldDataPathsFromRoot };
 }
 
-/**
- * This converts a fieldPath array to a string, it puts complex strings inside single quotes '', and uses square brackets [] for number keys.
- * @param fieldPath
- * @returns {*}
- */
-function fieldPathToString(fieldPath) {
-    return _.reduce(
-        fieldPath,
-        (accumulator, fieldName, index) => {
-            if (_.isString(fieldName) && /\W/.test(fieldName)) {
-                // field name is a string with non alphanumeric character
-                accumulator += `['${fieldName}']`;
-            } else if (_.isNumber(fieldName)) {
-                accumulator += `[${fieldName}]`;
-            } else {
-                if (index > 0) {
-                    accumulator += '.';
-                }
-                accumulator += fieldName;
-            }
-            return accumulator;
-        },
-        ''
-    );
-}
-
 function appendOrArray(object, path, item) {
     _.set(object, path, [..._.get(object, path, []), item]);
 }
 
 module.exports = {
     fieldPathToFieldDataPath,
-    fieldPathToString,
     appendOrArray
 };