Add support for Storyblok SDK

package.json

@@ -30,7 +30,8 @@
     "test": "jest -c jest.config.js --coverage",
     "validate": "tsc --noEmit",
     "build": "tsup",
-    "graphql-codegen": "graphql-codegen --config codegen.ts"
+    "graphql-codegen": "graphql-codegen --config codegen.ts",
+    "postinstall": "graphql-codegen"
   },
   "dependencies": {
     "@babel/core": "^7.28.5",

src/application/project/code/transformation/javascript/storyblokInitCodemod.ts

@@ -0,0 +1,97 @@
+/* eslint-disable no-param-reassign -- False positives */
+import * as t from '@babel/types';
+import {traverse} from '@babel/core';
+import {Codemod, CodemodOptions, ResultCode} from '@/application/project/code/transformation/codemod';
+import {addImport} from '@/application/project/code/transformation/javascript/utils/addImport';
+import {getImportLocalName} from '@/application/project/code/transformation/javascript/utils/getImportLocalName';
+
+export type StoryblokInitCodemodOptions = CodemodOptions & {
+    name: string,
+    module: string,
+};
+
+export class StoryblokInitCodemod implements Codemod<t.File, StoryblokInitCodemodOptions> {
+    public apply(input: t.File, options?: StoryblokInitCodemodOptions): Promise<ResultCode<t.File>> {
+        if (options === undefined) {
+            return Promise.resolve({
+                modified: false,
+                result: input,
+            });
+        }
+
+        const localName = getImportLocalName(input, {
+            moduleName: /@storyblok\/(js|react)/,
+            importName: /storyblokInit|\*/,
+        });
+
+        if (localName === null) {
+            return Promise.resolve({
+                modified: false,
+                result: input,
+            });
+        }
+
+        const importLocalName = options.module !== undefined
+            ? getImportLocalName(input, {
+                importName: options.name,
+                moduleName: options.module,
+            })
+            : null;
+
+        const wrapperName = importLocalName ?? options.name;
+        let modified = false;
+
+        traverse(input, {
+            CallExpression: path => {
+                const {callee} = path.node;
+
+                // Match direct function calls: targetFunction(...)
+                if (t.isIdentifier(callee) && callee.name === 'storyblokInit') {
+                    path.node.arguments = [
+                        t.callExpression(
+                            t.identifier(wrapperName),
+                            path.node.arguments,
+                        ),
+                    ];
+
+                    modified = true;
+                }
+
+                // Match member expression calls: obj.targetFunction(...)
+                if (
+                    t.isMemberExpression(callee)
+                    && t.isIdentifier(callee.property)
+                    && callee.property.name === 'storyblokInit'
+                ) {
+                    path.node.arguments = [
+                        t.callExpression(
+                            t.identifier(wrapperName),
+                            path.node.arguments,
+                        ),
+                    ];
+
+                    modified = true;
+                }
+            },
+        });
+
+        if (modified && importLocalName === null) {
+            const {body} = input.program;
+
+            if (!t.isImportDeclaration(body[0])) {
+                body.unshift(t.emptyStatement());
+            }
+
+            addImport(input, {
+                type: 'value',
+                moduleName: options.module,
+                importName: options.name,
+            });
+        }
+
+        return Promise.resolve({
+            modified: modified,
+            result: input,
+        });
+    }
+}

src/application/project/code/transformation/javascript/utils/getImportLocalName.ts

@@ -33,6 +33,14 @@ export function getImportLocalName(source: string | t.File, matcher: ImportMatch
                     continue;
                 }
 
+                if (t.isImportNamespaceSpecifier(specifier)) {
+                    if (matches('*', matcher.importName)) {
+                        localName = specifier.local.name;
+                    }
+
+                    continue;
+                }
+
                 if (t.isImportSpecifier(specifier) && matches(specifier.imported, matcher.importName)) {
                     localName = specifier.local.name;
 

src/application/project/sdk/javasScriptSdk.ts

@@ -36,6 +36,7 @@ export type Configuration = {
     formatter: CodeFormatter,
     fileSystem: FileSystem,
     tsConfigLoader: TsConfigLoader,
+    plugins?: JavaScriptSdkPlugin[],
 };
 
 type VersionedContent = {
@@ -49,6 +50,19 @@ type ContentOptions = BaseContentOptions & {
     notifier?: TaskNotifier,
 };
 
+export type JavaScriptPluginContext = {
+    packageManager: PackageManager,
+    projectDirectory: WorkingDirectory,
+    fileSystem: FileSystem,
+};
+
+export type JavaScriptSdkPlugin = {
+    getInstallationPlan(
+        installation: Installation,
+        context: JavaScriptPluginContext
+    ): Promise<Partial<InstallationPlan>>,
+};
+
 export abstract class JavaScriptSdk implements Sdk {
     protected static readonly CONTENT_PACKAGE = '@croct/content';
 
@@ -64,13 +78,16 @@ export abstract class JavaScriptSdk implements Sdk {
 
     private readonly importConfigLoader: TsConfigLoader;
 
+    private readonly plugins: JavaScriptSdkPlugin[];
+
     protected constructor(configuration: Configuration) {
         this.projectDirectory = configuration.projectDirectory;
         this.packageManager = configuration.packageManager;
         this.workspaceApi = configuration.workspaceApi;
         this.formatter = configuration.formatter;
         this.fileSystem = configuration.fileSystem;
         this.importConfigLoader = configuration.tsConfigLoader;
+        this.plugins = configuration.plugins ?? [];
     }
 
     public async generateSlotExample(slot: Slot, installation: Installation): Promise<void> {
@@ -99,7 +116,7 @@ export abstract class JavaScriptSdk implements Sdk {
     public async setup(installation: Installation): Promise<ProjectConfiguration> {
         const {input, output} = installation;
 
-        const plan = await this.getInstallationPlan(installation);
+        const plan = await this.resolveInstallationPlan(installation);
 
         const configuration: ProjectConfiguration = {
             ...plan.configuration,
@@ -279,6 +296,32 @@ export abstract class JavaScriptSdk implements Sdk {
         return defaultPath;
     }
 
+    private resolveInstallationPlan(installation: Installation): Promise<InstallationPlan> {
+        let promise = this.getInstallationPlan(installation);
+        const context: JavaScriptPluginContext = {
+            packageManager: this.packageManager,
+            projectDirectory: this.projectDirectory,
+            fileSystem: this.fileSystem,
+        };
+
+        for (const plugin of this.plugins) {
+            promise = promise.then(async plan => {
+                const hookPlan = await plugin.getInstallationPlan(installation, context);
+
+                return {
+                    tasks: [...plan.tasks, ...(hookPlan.tasks ?? [])],
+                    dependencies: [...plan.dependencies, ...(hookPlan.dependencies ?? [])],
+                    configuration: {
+                        ...plan.configuration,
+                        ...hookPlan.configuration,
+                    },
+                };
+            });
+        }
+
+        return promise;
+    }
+
     protected abstract getInstallationPlan(installation: Installation): Promise<InstallationPlan>;
 
     public async update(installation: Installation, options: UpdateOptions = {}): Promise<void> {

src/application/project/sdk/storyblokPlugin.ts

@@ -0,0 +1,109 @@
+import {extname} from 'path';
+import {InstallationPlan, JavaScriptSdkPlugin, JavaScriptPluginContext} from '@/application/project/sdk/javasScriptSdk';
+import {Task} from '@/application/cli/io/output';
+import {HelpfulError} from '@/application/error';
+import {Codemod} from '@/application/project/code/transformation/codemod';
+import {Installation} from '@/application/project/sdk/sdk';
+import {ScanFilter} from '@/application/fs/fileSystem';
+
+export type Configuration = {
+    scanFilter: ScanFilter,
+    codemod: Codemod<string>,
+};
+
+export class StoryblokPlugin implements JavaScriptSdkPlugin {
+    private readonly codemod: Codemod<string>;
+
+    private readonly scanFilter: ScanFilter;
+
+    public constructor(configuration: Configuration) {
+        this.codemod = configuration.codemod;
+        this.scanFilter = configuration.scanFilter;
+    }
+
+    public async getInstallationPlan(
+        _: Installation,
+        context: JavaScriptPluginContext,
+    ): Promise<Partial<InstallationPlan>> {
+        if (!await context.packageManager.hasDependency('@storyblok/js')) {
+            return {};
+        }
+
+        const tasks: Task[] = [];
+
+        tasks.push({
+            title: 'Configure Storyblok integration',
+            task: async notifier => {
+                notifier.update('Configuring Storyblok integration');
+
+                try {
+                    await this.configureStoryblok(context);
+
+                    notifier.confirm('Storyblok configured');
+                } catch (error) {
+                    notifier.alert('Failed to configure Storyblok', HelpfulError.formatMessage(error));
+                }
+            },
+        });
+
+        return {
+            tasks: tasks,
+            dependencies: ['@croct/plug-storyblok'],
+        };
+    }
+
+    private async configureStoryblok(scope: JavaScriptPluginContext): Promise<void> {
+        const initializationFiles = await this.findStoryblokInitializationFiles(scope);
+
+        if (initializationFiles.length === 0) {
+            throw new HelpfulError('Could not find any file containing Storyblok initialization.');
+        }
+
+        const results = initializationFiles.map(
+            file => this.codemod
+                .apply(file)
+                .then(result => result.modified),
+        );
+
+        if (!(await Promise.all(results)).some(modified => modified)) {
+            throw new HelpfulError('Could not find any Storyblok initialization to configure.');
+        }
+    }
+
+    private async findStoryblokInitializationFiles(scope: JavaScriptPluginContext): Promise<string[]> {
+        const {fileSystem, projectDirectory} = scope;
+
+        const directory = projectDirectory.get();
+        const iterator = fileSystem.list(directory, async (path, depth) => {
+            if (!await this.scanFilter(path, depth) || depth > 20) {
+                return false;
+            }
+
+            const extension = extname(path).toLowerCase();
+
+            // Allow directories (no extension) and JS/TS files
+            return extension === ''
+                || extension === '.js'
+                || extension === '.ts'
+                || extension === '.jsx'
+                || extension === '.tsx';
+        });
+
+        const files: string[] = [];
+
+        for await (const entry of iterator) {
+            if (entry.type !== 'file') {
+                continue;
+            }
+
+            const path = fileSystem.joinPaths(directory, entry.name);
+            const content = await fileSystem.readTextFile(path);
+
+            if (content.includes('storyblokInit')) {
+                files.push(path);
+            }
+        }
+
+        return files;
+    }
+}