webstudio 0.167.0 → 0.173.0

package/lib/cli.js

@@ -45,10 +45,11 @@ var jsonToGlobalConfig = (json) => {
   return zGlobalConfig.parse(json);
 };
 var PROJECT_TEMPALTES = [
-  "vanilla",
-  "vercel",
-  "netlify-functions",
-  "netlify-edge-functions"
+  { value: "vanilla", label: "Vanilla" },
+  { value: "vercel", label: "Vercel" },
+  { value: "netlify-functions", label: "Netlify Functions" },
+  { value: "netlify-edge-functions", label: "Netlify Edge Functions" },
+  { value: "ssg", label: "Static Site Generation (SSG)" }
 ];
 
 // src/fs-utils.ts
@@ -258,14 +259,14 @@ import { exit as exit3 } from "node:process";
 import { log as log3 } from "@clack/prompts";
 
 // src/prebuild.ts
-import { basename, dirname as dirname2, join as join4, normalize } from "node:path";
-import { createWriteStream } from "node:fs";
+import { basename, dirname as dirname2, join as join6, normalize, relative } from "node:path";
+import { createWriteStream, existsSync } from "node:fs";
 import {
-  rm,
+  rm as rm3,
   access as access2,
   rename,
   cp,
-  readFile as readFile4,
+  readFile as readFile6,
   writeFile as writeFile4,
   readdir
 } from "node:fs/promises";
@@ -279,9 +280,8 @@ import {
   generateCss,
   generateWebstudioComponent,
   getIndexesWithinAncestors,
-  namespaceMeta,
   normalizeProps,
-  generateRemixRoute,
+  generateRemixRoute as generateRemixRoute2,
   generateRemixParams,
   isCoreComponent
 } from "@webstudio-is/react-sdk";
@@ -290,15 +290,12 @@ import {
   findTreeInstanceIds,
   getPagePath,
   parseComponentName,
-  generateFormsProperties,
-  generateResourcesLoader,
+  generateResources,
   generatePageMeta,
-  getStaticSiteMapXml
+  getStaticSiteMapXml,
+  replaceFormActionsWithResources
 } from "@webstudio-is/sdk";
 import { createImageLoader } from "@webstudio-is/image";
-import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
-import * as remixComponentMetas from "@webstudio-is/sdk-components-react-remix/metas";
-import * as radixComponentMetas from "@webstudio-is/sdk-components-react-radix/metas";
 
 // src/html-to-jsx.ts
 import {
@@ -367,6 +364,7 @@ var convertStyleString = (style) => {
   }
   return JSON.stringify(res);
 };
+var escape = (value) => JSON.stringify(value);
 var toAttrString = (name, value) => {
   const attName = name.toLowerCase();
   const jsxName = attName === "class" ? "className" : attName;
@@ -376,7 +374,7 @@ var toAttrString = (name, value) => {
   if (attName === "style") {
     return `${jsxName}={${convertStyleString(value)}}`;
   }
-  return `${jsxName}="${value}"`;
+  return `${jsxName}={${escape(value)}}`;
 };
 var attributesToString = (attributes) => attributes.map(([attName, value]) => ` ${toAttrString(attName, value)}`).join("");
 var convertTagName = (tagName) => {
@@ -389,15 +387,14 @@ var convertTagName = (tagName) => {
   }
   return tag;
 };
-var escapeValue = (value) => value.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$").replace(/\r/g, "\\r").replace(/\n/g, "\\n");
 var htmlToJsx = (html) => {
   const parsedHtml = parseFragment(html, { scriptingEnabled: false });
   let result = "";
   for (const walkNode of walkChildNodes(parsedHtml)) {
     switch (walkNode.type) {
       case "text": {
-        const escapedValue = escapeValue(walkNode.value);
-        result += escapedValue ? "{`" + escapedValue + "`}" : "";
+        const escapedValue = escape(walkNode.value);
+        result += escapedValue ? "{" + escapedValue + "}" : "";
         break;
       }
       case "element-start": {
@@ -414,10 +411,161 @@ var htmlToJsx = (html) => {
   return result;
 };
 
+// src/framework-remix.ts
+import { join as join4 } from "node:path";
+import { readFile as readFile4, rm } from "node:fs/promises";
+import {
+  generateRemixRoute,
+  namespaceMeta
+} from "@webstudio-is/react-sdk";
+import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
+import * as remixComponentMetas from "@webstudio-is/sdk-components-react-remix/metas";
+import * as radixComponentMetas from "@webstudio-is/sdk-components-react-radix/metas";
+var createFramework = async () => {
+  const routeTemplatesDir = join4("app", "route-templates");
+  const htmlTemplate = await readFile4(
+    join4(routeTemplatesDir, "html.tsx"),
+    "utf8"
+  );
+  const xmlTemplate = await readFile4(
+    join4(routeTemplatesDir, "xml.tsx"),
+    "utf8"
+  );
+  const defaultSitemapTemplate = await readFile4(
+    join4(routeTemplatesDir, "default-sitemap.tsx"),
+    "utf8"
+  );
+  const redirectTemplate = await readFile4(
+    join4(routeTemplatesDir, "redirect.tsx"),
+    "utf8"
+  );
+  await rm(routeTemplatesDir, { recursive: true, force: true });
+  const radixComponentNamespacedMetas = {};
+  for (const [name, meta] of Object.entries(radixComponentMetas)) {
+    const namespace = "@webstudio-is/sdk-components-react-radix";
+    radixComponentNamespacedMetas[`${namespace}:${name}`] = namespaceMeta(
+      meta,
+      namespace,
+      new Set(Object.keys(radixComponentMetas))
+    );
+  }
+  return {
+    components: [
+      {
+        source: "@webstudio-is/sdk-components-react",
+        metas: baseComponentMetas
+      },
+      {
+        source: "@webstudio-is/sdk-components-react-radix",
+        metas: radixComponentNamespacedMetas
+      },
+      {
+        source: "@webstudio-is/sdk-components-react-remix",
+        metas: remixComponentMetas
+      }
+    ],
+    html: ({ pagePath }) => [
+      {
+        file: join4("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: htmlTemplate
+      }
+    ],
+    xml: ({ pagePath }) => [
+      {
+        file: join4("app", "routes", `${generateRemixRoute(pagePath)}.tsx`),
+        template: xmlTemplate
+      }
+    ],
+    redirect: ({ pagePath }) => [
+      {
+        file: join4("app", "routes", `${generateRemixRoute(pagePath)}.ts`),
+        template: redirectTemplate
+      }
+    ],
+    defaultSitemap: () => [
+      {
+        file: join4(
+          "app",
+          "routes",
+          `${generateRemixRoute("/sitemap.xml")}.tsx`
+        ),
+        template: defaultSitemapTemplate
+      }
+    ]
+  };
+};
+
+// src/framework-vike-ssg.ts
+import { join as join5 } from "node:path";
+import { readFile as readFile5, rm as rm2 } from "node:fs/promises";
+import { namespaceMeta as namespaceMeta2 } from "@webstudio-is/react-sdk";
+import * as baseComponentMetas2 from "@webstudio-is/sdk-components-react/metas";
+import * as radixComponentMetas2 from "@webstudio-is/sdk-components-react-radix/metas";
+var generateVikeRoute = (pagePath) => {
+  if (pagePath === "/") {
+    return "index";
+  }
+  return pagePath;
+};
+var createFramework2 = async () => {
+  const routeTemplatesDir = join5("app", "route-templates");
+  const htmlPageTemplate = await readFile5(
+    join5(routeTemplatesDir, "html", "+Page.tsx"),
+    "utf8"
+  );
+  const htmlHeadTemplate = await readFile5(
+    join5(routeTemplatesDir, "html", "+Head.tsx"),
+    "utf8"
+  );
+  const htmlDataTemplate = await readFile5(
+    join5(routeTemplatesDir, "html", "+data.ts"),
+    "utf8"
+  );
+  await rm2(routeTemplatesDir, { recursive: true, force: true });
+  const radixComponentNamespacedMetas = {};
+  for (const [name, meta] of Object.entries(radixComponentMetas2)) {
+    const namespace = "@webstudio-is/sdk-components-react-radix";
+    radixComponentNamespacedMetas[`${namespace}:${name}`] = namespaceMeta2(
+      meta,
+      namespace,
+      new Set(Object.keys(radixComponentMetas2))
+    );
+  }
+  return {
+    components: [
+      {
+        source: "@webstudio-is/sdk-components-react",
+        metas: baseComponentMetas2
+      },
+      {
+        source: "@webstudio-is/sdk-components-react-radix",
+        metas: radixComponentNamespacedMetas
+      }
+    ],
+    html: ({ pagePath }) => [
+      {
+        file: join5("pages", generateVikeRoute(pagePath), "+Page.tsx"),
+        template: htmlPageTemplate
+      },
+      {
+        file: join5("pages", generateVikeRoute(pagePath), "+Head.tsx"),
+        template: htmlHeadTemplate
+      },
+      {
+        file: join5("pages", generateVikeRoute(pagePath), "+data.ts"),
+        template: htmlDataTemplate
+      }
+    ],
+    xml: () => [],
+    redirect: () => [],
+    defaultSitemap: () => []
+  };
+};
+
 // src/prebuild.ts
 var limit = pLimit(10);
 var downloadAsset = async (url, name, assetBaseUrl) => {
-  const assetPath = join4("public", assetBaseUrl, name);
+  const assetPath = join6("public", assetBaseUrl, name);
   const tempAssetPath = `${assetPath}.tmp`;
   try {
     await access2(assetPath);
@@ -441,8 +589,8 @@ var downloadAsset = async (url, name, assetBaseUrl) => {
   }
 };
 var mergeJsonInto = async (sourcePath, destinationPath) => {
-  const sourceJson = await readFile4(sourcePath, "utf8");
-  const destinationJson = await readFile4(destinationPath, "utf8").catch(
+  const sourceJson = await readFile6(sourcePath, "utf8");
+  const destinationJson = await readFile6(destinationPath, "utf8").catch(
     (error) => {
       if (error instanceof Error && "code" in error && error.code === "ENOENT") {
         return "{}";
@@ -451,7 +599,9 @@ var mergeJsonInto = async (sourcePath, destinationPath) => {
     }
   );
   const content = JSON.stringify(
-    merge(JSON.parse(destinationJson), JSON.parse(sourceJson)),
+    merge(JSON.parse(destinationJson), JSON.parse(sourceJson), {
+      arrayMerge: (_target, source) => source
+    }),
     null,
     "  "
   );
@@ -460,7 +610,7 @@ var mergeJsonInto = async (sourcePath, destinationPath) => {
 var isCliTemplate = async (template) => {
   const currentPath = fileURLToPath(new URL(import.meta.url));
   const templatesPath = normalize(
-    join4(dirname2(currentPath), "..", "templates")
+    join6(dirname2(currentPath), "..", "templates")
   );
   const dirents = await readdir(templatesPath, { withFileTypes: true });
   for (const dirent of dirents) {
@@ -472,24 +622,34 @@ var isCliTemplate = async (template) => {
 };
 var getTemplatePath = async (template) => {
   const currentPath = fileURLToPath(new URL(import.meta.url));
-  const templatePath = await isCliTemplate(template) ? normalize(join4(dirname2(currentPath), "..", "templates", template)) : template;
+  const templatePath = await isCliTemplate(template) ? normalize(join6(dirname2(currentPath), "..", "templates", template)) : template;
   return templatePath;
 };
-var copyTemplates = async (template = "defaults") => {
+var copyTemplates = async (template) => {
   const templatePath = await getTemplatePath(template);
   await cp(templatePath, cwd3(), {
     recursive: true,
     filter: (source) => {
-      return basename(source) !== "package.json";
+      const name = basename(source);
+      return name !== "package.json" && name !== "tsconfig.json";
     }
   });
-  if (await isFileExists(join4(templatePath, "package.json")) === true) {
+  if (existsSync(join6(templatePath, "package.json"))) {
+    await mergeJsonInto(
+      join6(templatePath, "package.json"),
+      join6(cwd3(), "package.json")
+    );
+  }
+  if (existsSync(join6(templatePath, "tsconfig.json"))) {
     await mergeJsonInto(
-      join4(templatePath, "package.json"),
-      join4(cwd3(), "package.json")
+      join6(templatePath, "tsconfig.json"),
+      join6(cwd3(), "tsconfig.json")
     );
   }
 };
+var importFrom = (importee, importer) => {
+  return relative(dirname2(importer), importee).replaceAll("\\", "/");
+};
 var prebuild = async (options) => {
   if (options.template.length === 0) {
     log2.error(
@@ -499,7 +659,7 @@ Please check webstudio --help for more details`
     exit2(1);
   }
   for (const template of options.template) {
-    if (template === "vanilla") {
+    if (template === "vanilla" || template === "ssg") {
       continue;
     }
     if (template.startsWith(".") || template.startsWith("/")) {
@@ -515,18 +675,25 @@ Please check webstudio --help for more details`
   }
   log2.step("Scaffolding the project files");
   const appRoot = "app";
-  const generatedDir = join4(appRoot, "__generated__");
-  await rm(generatedDir, { recursive: true, force: true });
-  const routesDir = join4(appRoot, "routes");
-  await rm(routesDir, { recursive: true, force: true });
-  await copyTemplates();
+  const generatedDir = join6(appRoot, "__generated__");
+  await rm3(generatedDir, { recursive: true, force: true });
+  const routesDir = join6(appRoot, "routes");
+  await rm3(routesDir, { recursive: true, force: true });
+  await copyTemplates(options.template.includes("ssg") ? "ssg" : "defaults");
+  await writeFile4(join6(cwd3(), ".npmrc"), "force=true");
   for (const template of options.template) {
-    if (template === "vanilla") {
+    if (template === "vanilla" || template === "ssg") {
       continue;
     }
     await copyTemplates(template);
   }
-  const constants2 = await import(pathToFileURL(join4(cwd3(), "app/constants.mjs")).href);
+  let framework;
+  if (options.template.includes("ssg")) {
+    framework = await createFramework2();
+  } else {
+    framework = await createFramework();
+  }
+  const constants2 = await import(pathToFileURL(join6(cwd3(), "app/constants.mjs")).href);
   const { assetBaseUrl } = constants2;
   const siteData = await loadJSONFile(LOCAL_DATA_FILE);
   if (siteData === null) {
@@ -538,27 +705,14 @@ Please check webstudio --help for more details`
   if (domain === void 0) {
     throw new Error(`Project domain is missing from the project data`);
   }
-  const radixComponentNamespacedMetas = Object.entries(
-    radixComponentMetas
-  ).reduce(
-    (r, [name, meta]) => {
-      const namespace = "@webstudio-is/sdk-components-react-radix";
-      r[`${namespace}:${name}`] = namespaceMeta(
-        meta,
-        namespace,
-        new Set(Object.keys(radixComponentMetas))
-      );
-      return r;
-    },
-    {}
-  );
-  const metas = new Map(
-    Object.entries({
-      ...baseComponentMetas,
-      ...radixComponentNamespacedMetas,
-      ...remixComponentMetas
-    })
-  );
+  const metas = /* @__PURE__ */ new Map();
+  const componentSources = /* @__PURE__ */ new Map();
+  for (const entry of framework.components) {
+    for (const [componentName, meta] of Object.entries(entry.metas)) {
+      metas.set(componentName, meta);
+      componentSources.set(componentName, entry.source);
+    }
+  }
   const projectMetas = /* @__PURE__ */ new Map();
   const componentsByPage = {};
   const siteDataByPage = {};
@@ -576,7 +730,9 @@ Please check webstudio --help for more details`
       props: siteData.build.props.map(([_id, prop]) => prop),
       assetBaseUrl,
       assets: new Map(siteData.assets.map((asset) => [asset.id, asset])),
-      pages: siteData.build.pages
+      uploadingImageAssets: [],
+      pages: siteData.build.pages,
+      source: "prebuild"
     });
     const props = [];
     for (const prop of normalizedProps) {
@@ -676,7 +832,7 @@ Please check webstudio --help for more details`
     }
   }
   const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
-  const { cssText, classesMap } = generateCss({
+  const { cssText, classes } = generateCss({
     instances: new Map(siteData.build.instances),
     props: new Map(siteData.build.props),
     assets,
@@ -688,17 +844,7 @@ Please check webstudio --help for more details`
     assetBaseUrl,
     atomic: siteData.build.pages.compiler?.atomicStyles ?? true
   });
-  await createFileIfNotExists(join4(generatedDir, "index.css"), cssText);
-  const routeTemplatesDir = join4(cwd3(), "app/route-templates");
-  const routeTemplatePath = normalize(join4(routeTemplatesDir, "html.tsx"));
-  const routeXmlTemplatePath = normalize(join4(routeTemplatesDir, "xml.tsx"));
-  const defaultSiteMapXmlPath = normalize(
-    join4(routeTemplatesDir, "default-sitemap.tsx")
-  );
-  const routeFileTemplate = await readFile4(routeTemplatePath, "utf8");
-  const routeXmlFileTemplate = await readFile4(routeXmlTemplatePath, "utf8");
-  const defaultSiteMapTemplate = await readFile4(defaultSiteMapXmlPath, "utf8");
-  await rm(routeTemplatesDir, { recursive: true, force: true });
+  await createFileIfNotExists(join6(generatedDir, "index.css"), cssText);
   for (const [pageId, pageComponents] of Object.entries(componentsByPage)) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
@@ -709,18 +855,10 @@ Please check webstudio --help for more details`
       "_props"
     ]);
     const namespaces = /* @__PURE__ */ new Map();
-    const BASE_NAMESPACE = "@webstudio-is/sdk-components-react";
-    const REMIX_NAMESPACE = "@webstudio-is/sdk-components-react-remix";
     for (const component of pageComponents) {
-      const parsed = parseComponentName(component);
-      let [namespace] = parsed;
-      const [_namespace, shortName] = parsed;
+      const namespace = componentSources.get(component);
       if (namespace === void 0) {
-        if (shortName in remixComponentMetas) {
-          namespace = REMIX_NAMESPACE;
-        } else {
-          namespace = BASE_NAMESPACE;
-        }
+        continue;
       }
       if (namespaces.has(namespace) === false) {
         namespaces.set(
@@ -728,6 +866,7 @@ Please check webstudio --help for more details`
           /* @__PURE__ */ new Set()
         );
       }
+      const [_namespace, shortName] = parseComponentName(component);
       namespaces.get(namespace)?.add([shortName, component]);
     }
     let componentImports = "";
@@ -768,6 +907,11 @@ Please check webstudio --help for more details`
     const props = new Map(pageData.build.props);
     const dataSources = new Map(pageData.build.dataSources);
     const resources = new Map(pageData.build.resources);
+    replaceFormActionsWithResources({
+      instances,
+      resources,
+      props
+    });
     const pageComponent = generateWebstudioComponent({
       scope,
       name: "Page",
@@ -784,7 +928,7 @@ Please check webstudio --help for more details`
       instances,
       props,
       dataSources,
-      classesMap,
+      classesMap: classes,
       indexesWithinAncestors: getIndexesWithinAncestors(
         projectMetas,
         instances,
@@ -796,12 +940,8 @@ Please check webstudio --help for more details`
       // fallback to user email when contact email is empty string
       projectMeta?.contactEmail || siteData.user?.email || void 0
     );
-    const pageMeta = pageData.page.meta;
     const favIconAsset = assets.get(projectMeta?.faviconAssetId ?? "");
-    const socialImageAsset = assets.get(pageMeta.socialImageAssetId ?? "");
     const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
-    const remixRoute = generateRemixRoute(pagePath);
-    const fileName = `${remixRoute}.tsx`;
     const pageExports = `/* eslint-disable */
       /* This is a auto generated file for building the project */ 
 
@@ -816,9 +956,6 @@ Please check webstudio --help for more details`
       export const favIconAsset: ImageAsset | undefined =
         ${JSON.stringify(favIconAsset)};
 
-      export const socialImageAsset: ImageAsset | undefined =
-        ${JSON.stringify(socialImageAsset)};
-
       // Font assets on current page (can be preloaded)
       export const pageFontAssets: FontAsset[] =
         ${JSON.stringify(pageFontAssets)}
@@ -826,7 +963,7 @@ Please check webstudio --help for more details`
       export const pageBackgroundImageAssets: ImageAsset[] =
         ${JSON.stringify(pageBackgroundImageAssets)}
 
-      ${remixRoute === "_index" ? `
+      ${pagePath === "/" ? `
             ${projectMeta?.code ? `
             const Script = ({children, ...props}: Record<string, string | boolean>) => {
               if (children == null) {
@@ -860,47 +997,59 @@ Please check webstudio --help for more details`
 
 
       import type { PageMeta } from "@webstudio-is/sdk";
-      ${generateResourcesLoader({
+      ${generateResources({
       scope,
       page: pageData.page,
       dataSources,
+      props,
       resources
     })}
 
       ${generatePageMeta({
       globalScope: scope,
       page: pageData.page,
-      dataSources
+      dataSources,
+      assets
     })}
 
-      ${generateFormsProperties(props)}
-
       ${generateRemixParams(pageData.page.path)}
 
       export const projectId = "${siteData.build.projectId}";
 
       export const contactEmail = ${JSON.stringify(contactEmail)};
     `;
-    const routeFileContent = (documentType === "html" ? routeFileTemplate : routeXmlFileTemplate).replace(
-      /".*\/__generated__\/_index"/,
-      `"../__generated__/${remixRoute}"`
-    ).replace(
-      /".*\/__generated__\/_index.server"/,
-      `"../__generated__/${remixRoute}.server"`
-    );
-    await createFileIfNotExists(join4(routesDir, fileName), routeFileContent);
-    await createFileIfNotExists(join4(generatedDir, fileName), pageExports);
-    await createFileIfNotExists(
-      join4(generatedDir, `${remixRoute}.server.tsx`),
-      serverExports
+    const generatedBasename = generateRemixRoute2(pagePath);
+    const clientFile = join6(generatedDir, `${generatedBasename}.tsx`);
+    await createFileIfNotExists(clientFile, pageExports);
+    const serverFile = join6(generatedDir, `${generatedBasename}.server.tsx`);
+    await createFileIfNotExists(serverFile, serverExports);
+    const getTemplates = documentType === "html" ? framework.html : framework.xml;
+    for (const { file, template } of getTemplates({ pagePath })) {
+      const content = template.replaceAll("__CONSTANTS__", importFrom("./app/constants.mjs", file)).replaceAll(
+        "__SITEMAP__",
+        importFrom(`./app/__generated__/$resources.sitemap.xml`, file)
+      ).replaceAll(
+        "__CLIENT__",
+        importFrom(`./app/__generated__/${generatedBasename}`, file)
+      ).replaceAll(
+        "__SERVER__",
+        importFrom(`./app/__generated__/${generatedBasename}.server`, file)
+      ).replaceAll(
+        "__CSS__",
+        importFrom(`./app/__generated__/index.css`, file)
+      );
+      await createFileIfNotExists(file, content);
+    }
+  }
+  for (const { file, template } of framework.defaultSitemap()) {
+    const content = template.replaceAll(
+      "__SITEMAP__",
+      importFrom(`./app/__generated__/$resources.sitemap.xml`, file)
     );
+    await createFileIfNotExists(file, content);
   }
   await createFileIfNotExists(
-    join4(routesDir, "[sitemap.xml]._index.tsx"),
-    defaultSiteMapTemplate.replace(/".*\/__generated__\//, `"../__generated__/`)
-  );
-  await createFileIfNotExists(
-    join4(generatedDir, "$resources.sitemap.xml.ts"),
+    join6(generatedDir, "$resources.sitemap.xml.ts"),
     `
       export const sitemap = ${JSON.stringify(
       getStaticSiteMapXml(siteData.build.pages, siteData.build.updatedAt),
@@ -912,15 +1061,23 @@ Please check webstudio --help for more details`
   const redirects = siteData.build.pages?.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
     for (const redirect of redirects) {
-      const redirectPagePath = generateRemixRoute(redirect.old);
-      const redirectFileName = `${redirectPagePath}.ts`;
-      const content = `import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
-
-      export const loader = (arg: LoaderFunctionArgs) => {
-      return redirect("${redirect.new}", ${redirect.status ?? 301});
-      };
-      `;
-      await createFileIfNotExists(join4(routesDir, redirectFileName), content);
+      const generatedBasename = generateRemixRoute2(redirect.old);
+      await createFileIfNotExists(
+        join6(generatedDir, `${generatedBasename}.ts`),
+        `
+        export const url = "${redirect.new}";
+        export const status = ${redirect.status ?? 301};
+        `
+      );
+      for (const { file, template } of framework.redirect({
+        pagePath: redirect.old
+      })) {
+        const content = template.replaceAll(
+          "__REDIRECT__",
+          importFrom(`./app/__generated__/${generatedBasename}`, file)
+        );
+        await createFileIfNotExists(file, content);
+      }
     }
   }
   if (assetsToDownload.length > 0) {
@@ -945,9 +1102,9 @@ var buildOptions = (yargs) => yargs.option("assets", {
   type: "array",
   string: true,
   default: [],
-  describe: `Template to use for the build [choices: ${PROJECT_TEMPALTES.join(
-    ", "
-  )}]`
+  describe: `Template to use for the build [choices: ${PROJECT_TEMPALTES.map(
+    (item) => item.value
+  ).join(", ")}]`
 });
 var build = async (options) => {
   try {
@@ -966,7 +1123,7 @@ var build = async (options) => {
 
 // src/commands/init-flow.ts
 import { chdir, cwd as cwd4 } from "node:process";
-import { join as join5 } from "node:path";
+import { join as join7 } from "node:path";
 import pc2 from "picocolors";
 import {
   cancel as cancel2,
@@ -978,7 +1135,6 @@ import {
   text as text2
 } from "@clack/prompts";
 import { $ } from "execa";
-import { titleCase } from "title-case";
 var exitIfCancelled = (value) => {
   if (isCancel2(value)) {
     cancel2("Project initialization is cancelled");
@@ -1009,8 +1165,8 @@ var initFlow = async (options) => {
           }
         })
       );
-      await createFolderIfNotExists(join5(cwd4(), folderName));
-      chdir(join5(cwd4(), folderName));
+      await createFolderIfNotExists(join7(cwd4(), folderName));
+      chdir(join7(cwd4(), folderName));
     }
     const shareLink = exitIfCancelled(
       await text2({
@@ -1022,10 +1178,7 @@ var initFlow = async (options) => {
     projectTemplate = exitIfCancelled(
       await select({
         message: "Where would you like to deploy your project?",
-        options: PROJECT_TEMPALTES.map((template) => ({
-          value: template,
-          label: titleCase(template)
-        }))
+        options: PROJECT_TEMPALTES
       })
     );
     shouldInstallDeps = exitIfCancelled(
@@ -1039,10 +1192,7 @@ var initFlow = async (options) => {
     projectTemplate = exitIfCancelled(
       await select({
         message: "Where would you like to deploy your project?",
-        options: PROJECT_TEMPALTES.map((template) => ({
-          value: template,
-          label: titleCase(template)
-        }))
+        options: PROJECT_TEMPALTES
       })
     );
   }
@@ -1092,7 +1242,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.167.0",
+  version: "0.173.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -1101,6 +1251,12 @@ var package_default = {
     "webstudio-cli": "./bin.js",
     webstudio: "./bin.js"
   },
+  imports: {
+    "#cli": {
+      webstudio: "./src/cli.ts",
+      default: "./lib/cli.js"
+    }
+  },
   files: [
     "lib/*",
     "templates/*",
@@ -1109,13 +1265,13 @@ var package_default = {
   ],
   scripts: {
     typecheck: "tsc",
-    checks: "pnpm typecheck",
     build: "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
-    "local-run": "tsx --no-warnings ./src/bin.ts",
-    dev: "esbuild src/cli.ts --watch --bundle --format=esm --packages=external --outdir=./lib",
     test: "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   license: "AGPL-3.0-or-later",
+  engines: {
+    node: ">=20.12"
+  },
   dependencies: {
     "@clack/prompts": "^0.7.0",
     "@webstudio-is/http-client": "workspace:*",
@@ -1125,15 +1281,14 @@ var package_default = {
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
     "@webstudio-is/sdk-components-react-remix": "workspace:*",
-    "change-case": "^5.0.2",
+    "change-case": "^5.4.4",
     deepmerge: "^4.3.1",
     "env-paths": "^3.0.0",
     execa: "^7.2.0",
-    parse5: "7.1.2",
     "p-limit": "^4.0.0",
+    parse5: "7.1.2",
     picocolors: "^1.0.1",
     "strip-indent": "^4.0.0",
-    "title-case": "^4.1.0",
     yargs: "^17.7.2",
     zod: "^3.22.4"
   },
@@ -1141,24 +1296,26 @@ var package_default = {
     "@jest/globals": "^29.7.0",
     "@netlify/remix-adapter": "^2.4.0",
     "@netlify/remix-edge-adapter": "3.3.0",
-    "@remix-run/cloudflare": "^2.9.2",
-    "@remix-run/cloudflare-pages": "^2.9.2",
-    "@remix-run/dev": "^2.9.2",
-    "@remix-run/node": "^2.9.2",
-    "@remix-run/react": "^2.9.2",
-    "@remix-run/server-runtime": "^2.9.2",
+    "@remix-run/cloudflare": "^2.10.3",
+    "@remix-run/cloudflare-pages": "^2.10.3",
+    "@remix-run/dev": "^2.10.3",
+    "@remix-run/node": "^2.10.3",
+    "@remix-run/react": "^2.10.3",
+    "@remix-run/server-runtime": "^2.10.3",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
+    "@vitejs/plugin-react": "^4.3.1",
     "@webstudio-is/form-handlers": "workspace:*",
     "@webstudio-is/jest-config": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     react: "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    typescript: "5.4.5",
-    vite: "^5.2.12",
-    wrangler: "^3.48.0"
+    typescript: "5.5.2",
+    vike: "^0.4.180",
+    vite: "^5.3.4",
+    wrangler: "^3.63.2"
   }
 };