fix: check for expanded templates when a template is selected from th…

…e cli init flow. (#4107)

fixes #4105 
## Description

This issue fixes picking the default vanilla template in the cli
init-flow. Right now, when a template is selected from the
`PROJECT_TEMPLATES` we are directly sending the value to `build`. But we
need to check for the `expanded` value of the template in order to pick
all the series of templates needed for the build.


## Steps for reproduction
- create a project in the editor.
- Now, create a share-link for the project and copy it.
- Run `webstudio` in your local terminal and then the cli prompts for
the URL, parse the url from the above step.
- Now, pick `Vanilla` as a template from the list of the templates.
- The project should build a vanilla template without any errors.

## Code Review

- [ ] hi @istarkov , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)

packages/cli/src/build-utils.ts

@@ -0,0 +1,24 @@
+import { PROJECT_TEMPLATES, INTERNAL_TEMPLATES } from "./config";
+
+export const mapToTemplatesFromOptions = (values: string[]) => {
+  const templates: string[] = [];
+  for (const value of values) {
+    const template =
+      PROJECT_TEMPLATES.find((item) => item.value === value) ??
+      INTERNAL_TEMPLATES.find((item) => item.value === value);
+
+    if (template == null) {
+      templates.push(value);
+      continue;
+    }
+
+    if ("expand" in template && template.expand != null) {
+      templates.push(...template.expand);
+      continue;
+    }
+
+    templates.push(value);
+  }
+
+  return templates;
+};

packages/cli/src/commands/build.ts

@@ -2,15 +2,12 @@ import { access } from "node:fs/promises";
 import { exit } from "node:process";
 import { log } from "@clack/prompts";
 import { prebuild } from "../prebuild";
-import {
-  INTERNAL_TEMPLATES,
-  LOCAL_DATA_FILE,
-  PROJECT_TEMPLATES,
-} from "../config";
+import { LOCAL_DATA_FILE, PROJECT_TEMPLATES } from "../config";
 import type {
   CommonYargsArgv,
   StrictYargsOptionsToInterface,
 } from "./yargs-types";
+import { mapToTemplatesFromOptions } from "../build-utils";
 
 export const buildOptions = (yargs: CommonYargsArgv) =>
   yargs
@@ -29,28 +26,7 @@ export const buildOptions = (yargs: CommonYargsArgv) =>
       string: true,
       default: [] as string[],
 
-      coerce: (values: string[]) => {
-        const templates = [];
-        for (const value of values) {
-          const template =
-            PROJECT_TEMPLATES.find((item) => item.value === value) ??
-            INTERNAL_TEMPLATES.find((item) => item.value === value);
-
-          if (template == null) {
-            templates.push(value);
-            continue;
-          }
-
-          if ("expand" in template && template.expand != null) {
-            templates.push(...template.expand);
-            continue;
-          }
-
-          templates.push(value);
-        }
-
-        return templates;
-      },
+      coerce: mapToTemplatesFromOptions,
 
       describe: `Template to use for the build [choices: ${PROJECT_TEMPLATES.map(
         (item) => item.value

packages/cli/src/commands/init-flow.ts

@@ -17,6 +17,7 @@ import { link, validateShareLink } from "./link";
 import { sync } from "./sync";
 import { build, buildOptions } from "./build";
 import type { StrictYargsOptionsToInterface } from "./yargs-types";
+import { mapToTemplatesFromOptions } from "../build-utils";
 
 type ProjectTemplates = (typeof PROJECT_TEMPLATES)[number]["value"];
 
@@ -103,7 +104,9 @@ export const initFlow = async (
 
   await build({
     ...options,
-    ...(projectTemplate && { template: [projectTemplate] }),
+    ...(projectTemplate && {
+      template: mapToTemplatesFromOptions([projectTemplate]),
+    }),
   });
 
   if (shouldInstallDeps === true) {