webstudio 0.163.0 → 0.168.0

package/README.md

@@ -35,7 +35,7 @@ To get started with the Webstudio CLI:
 1. Download and install the CLI using the following command:
 
    ```bash
-   npm install -g webstudio
+   npm install -g webstudio@latest
    ```
 
 1. Confirm the installation by checking the CLI version:

package/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
 
-import { main } from "./lib/cli.js";
+import { main } from "#cli";
 
 await main();

package/lib/cli.js

@@ -1,5 +1,5 @@
 // src/cli.ts
-import { exit, argv } from "node:process";
+import { exit as exit4, argv } from "node:process";
 import { hideBin } from "yargs/helpers";
 
 // src/config.ts
@@ -94,10 +94,41 @@ var loadJSONFile = async (filePath) => {
 };
 
 // src/commands/link.ts
-import { stdin, stdout, cwd } from "node:process";
+import { cwd, exit } from "node:process";
 import { join as join2 } from "node:path";
-import * as readline from "node:readline/promises";
 import { readFile as readFile2, writeFile as writeFile2 } from "node:fs/promises";
+import { cancel, isCancel, log, text } from "@clack/prompts";
+var parseShareLink = (value) => {
+  const url = new URL(value);
+  const origin = url.origin;
+  const token = url.searchParams.get("authToken");
+  const segments = url.pathname.split("/").slice(1);
+  if (segments.length !== 2 || segments[0] !== "builder") {
+    throw Error("Segments not matching");
+  }
+  const [_builder, projectId] = segments;
+  if (token == null) {
+    throw Error("Token is missing");
+  }
+  return {
+    origin,
+    projectId,
+    token
+  };
+};
+var validateShareLink = (value) => {
+  if (value.length === 0) {
+    return "Share link is required";
+  }
+  if (URL.canParse(value) === false) {
+    return "Share link is invalid";
+  }
+  try {
+    parseShareLink(value);
+  } catch {
+    return "Share link is invalid";
+  }
+};
 var linkOptions = (yargs) => yargs.option("link", {
   alias: "l",
   type: "string",
@@ -108,62 +139,48 @@ var link = async (options) => {
   if (options.link) {
     shareLink = options.link;
   } else {
-    const rl = readline.createInterface({ input: stdin, output: stdout });
-    shareLink = await rl.question(
-      `Please paste a link from the Share Dialog in the builder: `
-    );
-    rl.close();
-  }
-  const shareLinkUrl = new URL(shareLink);
-  const origin = shareLinkUrl.origin;
-  const token = shareLinkUrl.searchParams.get("authToken");
-  const paths = shareLinkUrl.pathname.split("/").slice(1);
-  if (paths[0] !== "builder" || paths.length !== 2) {
-    throw new Error("Invalid share link.");
-  }
-  const projectId = paths[1];
-  if (token == null) {
-    throw new Error("Invalid share link.");
-  }
-  try {
-    const currentConfig = await readFile2(GLOBAL_CONFIG_FILE, "utf-8");
-    const currentConfigJson = jsonToGlobalConfig(JSON.parse(currentConfig));
-    const newConfig = {
-      ...currentConfigJson,
-      [projectId]: {
-        origin,
-        token
-      }
-    };
-    await writeFile2(GLOBAL_CONFIG_FILE, JSON.stringify(newConfig, null, 2));
-    console.info(`Saved credentials for project ${projectId}.
-  You can find your config at ${GLOBAL_CONFIG_FILE}
-        `);
-    const localConfig = {
-      projectId
-    };
-    await createFileIfNotExists(
-      join2(cwd(), LOCAL_CONFIG_FILE),
-      JSON.stringify(localConfig, null, 2)
-    );
-  } catch (error) {
-    if (error instanceof Error && "code" in error && error.code === "ENONET") {
-      throw new Error(`Global config file is not found`);
+    shareLink = await text({
+      message: "Please paste a link from the Share Dialog in the builder",
+      validate: validateShareLink
+    });
+    if (isCancel(shareLink)) {
+      cancel("Project linking is cancelled");
+      exit(1);
     }
-    throw error;
   }
+  const { origin, projectId, token } = parseShareLink(shareLink);
+  const currentConfig = await readFile2(GLOBAL_CONFIG_FILE, "utf-8");
+  const currentConfigJson = jsonToGlobalConfig(JSON.parse(currentConfig));
+  const newConfig = {
+    ...currentConfigJson,
+    [projectId]: {
+      origin,
+      token
+    }
+  };
+  await writeFile2(GLOBAL_CONFIG_FILE, JSON.stringify(newConfig, null, 2));
+  log.info(`Saved credentials for project ${projectId}.
+You can find your config at ${GLOBAL_CONFIG_FILE}`);
+  const localConfig = {
+    projectId
+  };
+  await createFileIfNotExists(
+    join2(cwd(), LOCAL_CONFIG_FILE),
+    JSON.stringify(localConfig, null, 2)
+  );
+  log.step("The project is linked successfully");
 };
 
 // src/commands/sync.ts
 import { readFile as readFile3, writeFile as writeFile3 } from "node:fs/promises";
 import { cwd as cwd2 } from "node:process";
 import { join as join3 } from "node:path";
-import ora from "ora";
+import pc from "picocolors";
+import { spinner } from "@clack/prompts";
 import {
   loadProjectDataByBuildId,
   loadProjectDataById
 } from "@webstudio-is/http-client";
-import pc from "picocolors";
 var syncOptions = (yargs) => yargs.option("buildId", {
   type: "string",
   describe: "[Experimental] Project build id to sync"
@@ -175,15 +192,15 @@ var syncOptions = (yargs) => yargs.option("buildId", {
   describe: "[Experimental] Service token"
 });
 var sync = async (options) => {
-  const spinner = ora("Syncing project data").start();
-  spinner.text = "Loading project data from config file";
+  const syncing = spinner();
+  syncing.start("Synchronizing project data");
   const definedOptionValues = [
     options.buildId,
     options.origin,
     options.authToken
   ].filter(Boolean);
   if (definedOptionValues.length > 0 && definedOptionValues.length < 3) {
-    spinner.fail(`Please provide buildId, origin and authToken`);
+    syncing.stop(`Please provide buildId, origin and authToken`, 2);
     return;
   }
   let project;
@@ -194,17 +211,12 @@ var sync = async (options) => {
       origin: options.origin
     });
   } else {
-    if (await isFileExists(GLOBAL_CONFIG_FILE) === false) {
-      spinner.fail(
-        `Global config file at path ${GLOBAL_CONFIG_FILE} is not found. Please link your project using webstudio link command`
-      );
-      return;
-    }
     const globalConfigText = await readFile3(GLOBAL_CONFIG_FILE, "utf-8");
     const globalConfig = jsonToGlobalConfig(JSON.parse(globalConfigText));
     if (await isFileExists(LOCAL_CONFIG_FILE) === false) {
-      spinner.fail(
-        `Local config file is not found. Please make sure current directory is a webstudio project`
+      syncing.stop(
+        `Local config file is not found. Please make sure current directory is a webstudio project`,
+        2
       );
       return;
     }
@@ -215,29 +227,35 @@ var sync = async (options) => {
     const localConfig = jsonToLocalConfig(JSON.parse(localConfigText));
     const projectConfig = globalConfig[localConfig.projectId];
     if (projectConfig === void 0) {
-      spinner.fail(
-        `Project config is not found, please run ${pc.dim("webstudio link")}`
+      syncing.stop(
+        `Project config is not found, please run ${pc.dim("webstudio link")}`,
+        2
       );
       return;
     }
     const { origin, token } = projectConfig;
-    spinner.text = "Loading project data from webstudio\n";
-    project = await loadProjectDataById({
-      projectId: localConfig.projectId,
-      authToken: token,
-      origin
-    });
+    try {
+      project = await loadProjectDataById({
+        projectId: localConfig.projectId,
+        authToken: token,
+        origin
+      });
+    } catch (error) {
+      syncing.stop(error.message, 2);
+      return;
+    }
   }
   project;
-  spinner.text = "Saving project data to config file";
   const localBuildFilePath = join3(cwd2(), LOCAL_DATA_FILE);
   await createFileIfNotExists(localBuildFilePath);
   await writeFile3(localBuildFilePath, JSON.stringify(project, null, 2), "utf8");
-  spinner.succeed("Project data synced successfully");
+  syncing.stop("Project data synchronized successfully");
 };
 
 // src/commands/build.ts
 import { access as access3 } from "node:fs/promises";
+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";
@@ -252,10 +270,10 @@ import {
   readdir
 } from "node:fs/promises";
 import { pipeline } from "node:stream/promises";
-import { cwd as cwd3 } from "node:process";
+import { cwd as cwd3, exit as exit2 } from "node:process";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import pLimit from "p-limit";
-import ora2 from "ora";
+import { log as log2, spinner as spinner2 } from "@clack/prompts";
 import merge from "deepmerge";
 import {
   generateCss,
@@ -281,6 +299,122 @@ 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 {
+  parseFragment,
+  defaultTreeAdapter
+} from "parse5";
+import { camelCase } from "change-case";
+var BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "contenteditable",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "scoped",
+  "selected",
+  "truespeed"
+]);
+var isBooleanAttr = (name) => BOOLEAN_ATTRIBUTES.has(name.toLowerCase());
+function* walkChildNodes(node) {
+  if (defaultTreeAdapter.isCommentNode(node) || defaultTreeAdapter.isTextNode(node) || defaultTreeAdapter.isDocumentTypeNode(node)) {
+    throw new Error("Unsupported node type");
+  }
+  for (const childNode of node.childNodes) {
+    if (defaultTreeAdapter.isCommentNode(childNode)) {
+      continue;
+    }
+    if (defaultTreeAdapter.isTextNode(childNode)) {
+      yield { type: "text", value: childNode.value };
+      continue;
+    }
+    if (false === defaultTreeAdapter.isElementNode(childNode)) {
+      continue;
+    }
+    const attributes = childNode.attrs.map((attr) => [
+      attr.name,
+      attr.value
+    ]);
+    yield { type: "element-start", tagName: childNode.tagName, attributes };
+    yield* walkChildNodes(childNode);
+    yield { type: "element-end", tagName: childNode.tagName };
+  }
+}
+var convertStyleString = (style) => {
+  const styles = style.split(";").map((style2) => style2.trim()).map((style2) => style2.split(":").map((part) => part.trim()));
+  const res = {};
+  for (const [name, value] of styles) {
+    res[camelCase(name)] = value;
+  }
+  return JSON.stringify(res);
+};
+var escape = (value) => JSON.stringify(value);
+var toAttrString = (name, value) => {
+  const attName = name.toLowerCase();
+  const jsxName = attName === "class" ? "className" : attName;
+  if (value === "" && isBooleanAttr(attName)) {
+    return `${jsxName}`;
+  }
+  if (attName === "style") {
+    return `${jsxName}={${convertStyleString(value)}}`;
+  }
+  return `${jsxName}={${escape(value)}}`;
+};
+var attributesToString = (attributes) => attributes.map(([attName, value]) => ` ${toAttrString(attName, value)}`).join("");
+var convertTagName = (tagName) => {
+  const tag = tagName.toLowerCase();
+  if (tag === "script") {
+    return "Script";
+  }
+  if (tag === "style") {
+    return "Style";
+  }
+  return tag;
+};
+var htmlToJsx = (html) => {
+  const parsedHtml = parseFragment(html, { scriptingEnabled: false });
+  let result = "";
+  for (const walkNode of walkChildNodes(parsedHtml)) {
+    switch (walkNode.type) {
+      case "text": {
+        const escapedValue = escape(walkNode.value);
+        result += escapedValue ? "{" + escapedValue + "}" : "";
+        break;
+      }
+      case "element-start": {
+        const tag = convertTagName(walkNode.tagName);
+        result += `<${tag}${attributesToString(walkNode.attributes)}>`;
+        break;
+      }
+      case "element-end": {
+        result += `</${convertTagName(walkNode.tagName)}>`;
+        break;
+      }
+    }
+  }
+  return result;
+};
+
+// src/prebuild.ts
 var limit = pLimit(10);
 var downloadAsset = async (url, name, assetBaseUrl) => {
   const assetPath = join4("public", assetBaseUrl, name);
@@ -357,12 +491,12 @@ var copyTemplates = async (template = "defaults") => {
   }
 };
 var prebuild = async (options) => {
-  if (options.template === void 0) {
-    throw new Error(
-      `
- Template is not provided 
- Please check webstudio --help for more details`
+  if (options.template.length === 0) {
+    log2.error(
+      `Template is not provided
+Please check webstudio --help for more details`
     );
+    exit2(1);
   }
   for (const template of options.template) {
     if (template === "vanilla") {
@@ -372,22 +506,21 @@ var prebuild = async (options) => {
       continue;
     }
     if (await isCliTemplate(template) === false) {
-      throw Error(
-        `
- Template ${options.template} is not available 
- Please check webstudio --help for more details`
+      log2.error(
+        `Template ${options.template} is not available
+Please check webstudio --help for more details`
       );
+      exit2(1);
     }
   }
-  const spinner = ora2("Scaffolding the project files");
-  spinner.start();
-  spinner.text = "Generating files";
+  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();
+  await writeFile4(join4(cwd3(), ".npmrc"), "force=true");
   for (const template of options.template) {
     if (template === "vanilla") {
       continue;
@@ -544,7 +677,6 @@ var prebuild = async (options) => {
     }
   }
   const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
-  spinner.text = "Generating css file";
   const { cssText, classesMap } = generateCss({
     instances: new Map(siteData.build.instances),
     props: new Map(siteData.build.props),
@@ -558,7 +690,6 @@ var prebuild = async (options) => {
     atomic: siteData.build.pages.compiler?.atomicStyles ?? true
   });
   await createFileIfNotExists(join4(generatedDir, "index.css"), cssText);
-  spinner.text = "Generating routes and pages";
   const routeTemplatesDir = join4(cwd3(), "app/route-templates");
   const routeTemplatePath = normalize(join4(routeTemplatesDir, "html.tsx"));
   const routeXmlTemplatePath = normalize(join4(routeTemplatesDir, "xml.tsx"));
@@ -669,6 +800,9 @@ var prebuild = async (options) => {
     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 */ 
 
@@ -693,6 +827,29 @@ var prebuild = async (options) => {
       export const pageBackgroundImageAssets: ImageAsset[] =
         ${JSON.stringify(pageBackgroundImageAssets)}
 
+      ${remixRoute === "_index" ? `
+            ${projectMeta?.code ? `
+            const Script = ({children, ...props}: Record<string, string | boolean>) => {
+              if (children == null) {
+                return <script {...props} />;
+              }
+
+              return <script {...props} dangerouslySetInnerHTML={{__html: children}} />;
+            };
+            const Style = ({children, ...props}: Record<string, string | boolean>) => {
+              if (children == null) {
+                return <style {...props} />;
+              }
+
+              return <style {...props} dangerouslySetInnerHTML={{__html: children}} />;
+            };
+            ` : ""}
+
+            export const CustomCode = () => {
+              return (<>${projectMeta?.code ? htmlToJsx(projectMeta.code) : ""}</>);
+            }
+          ` : ""}
+
       ${xmlPresentationComponents}
 
       ${pageComponent}
@@ -724,14 +881,7 @@ var prebuild = async (options) => {
       export const projectId = "${siteData.build.projectId}";
 
       export const contactEmail = ${JSON.stringify(contactEmail)};
-
-      export const customCode = ${JSON.stringify(
-      projectMeta?.code?.trim() ?? ""
-    )};
     `;
-    const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
-    const remixRoute = generateRemixRoute(pagePath);
-    const fileName = `${remixRoute}.tsx`;
     const routeFileContent = (documentType === "html" ? routeFileTemplate : routeXmlFileTemplate).replace(
       /".*\/__generated__\/_index"/,
       `"../__generated__/${remixRoute}"`
@@ -762,7 +912,6 @@ var prebuild = async (options) => {
   );
   const redirects = siteData.build.pages?.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
-    spinner.text = "Generating redirects";
     for (const redirect of redirects) {
       const redirectPagePath = generateRemixRoute(redirect.old);
       const redirectFileName = `${redirectPagePath}.ts`;
@@ -775,9 +924,13 @@ var prebuild = async (options) => {
       await createFileIfNotExists(join4(routesDir, redirectFileName), content);
     }
   }
-  spinner.text = "Downloading fonts and images";
-  await Promise.all(assetsToDownload);
-  spinner.succeed("Build finished");
+  if (assetsToDownload.length > 0) {
+    const downloading = spinner2();
+    downloading.start("Downloading fonts and images");
+    await Promise.all(assetsToDownload);
+    downloading.stop("Downloaded fonts and images");
+  }
+  log2.step("Build finished");
 };
 
 // src/commands/build.ts
@@ -792,6 +945,7 @@ var buildOptions = (yargs) => yargs.option("assets", {
 }).option("template", {
   type: "array",
   string: true,
+  default: [],
   describe: `Template to use for the build [choices: ${PROJECT_TEMPALTES.join(
     ", "
   )}]`
@@ -801,9 +955,10 @@ var build = async (options) => {
     await access3(LOCAL_DATA_FILE);
   } catch (error) {
     if (error instanceof Error && "code" in error && error.code === "ENOENT") {
-      throw new Error(
+      log3.error(
         `You need to link a webstudio project before building it. Run \`webstudio link\` to link a project.`
       );
+      exit3(1);
     }
     throw error;
   }
@@ -813,110 +968,99 @@ 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 ora3 from "ora";
-
-// src/prompts.ts
-import prompts from "prompts";
-var prompt = (prompt2) => {
-  return prompts([
-    {
-      ...prompt2,
-      onState: (state) => {
-        if (state.aborted) {
-          process.nextTick(() => {
-            process.exit(0);
-          });
-        }
-      }
-    }
-  ]);
-};
-
-// src/commands/init-flow.ts
 import pc2 from "picocolors";
+import {
+  cancel as cancel2,
+  confirm,
+  isCancel as isCancel2,
+  log as log4,
+  select,
+  spinner as spinner3,
+  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");
+    process.exit(0);
+  }
+  return value;
+};
 var initFlow = async (options) => {
   const isProjectConfigured = await isFileExists(".webstudio/config.json");
   let shouldInstallDeps = false;
   let folderName;
   let projectTemplate = void 0;
   if (isProjectConfigured === false) {
-    const { shouldCreateFolder } = await prompt({
-      type: "confirm",
-      name: "shouldCreateFolder",
-      message: "Would you like to create a project folder? (no to use current folder)",
-      initial: true
-    });
+    const shouldCreateFolder = exitIfCancelled(
+      await confirm({
+        message: "Would you like to create a project folder? (no to use current folder)",
+        initialValue: true
+      })
+    );
     if (shouldCreateFolder === true) {
-      folderName = (await prompt({
-        type: "text",
-        name: "folderName",
-        message: "Please enter a project name"
-      })).folderName;
-      if (folderName === void 0) {
-        throw new Error("Folder name is required");
-      }
+      folderName = exitIfCancelled(
+        await text2({
+          message: "Please enter a project name",
+          validate(value) {
+            if (value.length === 0) {
+              return "Folder name is required";
+            }
+          }
+        })
+      );
       await createFolderIfNotExists(join5(cwd4(), folderName));
       chdir(join5(cwd4(), folderName));
     }
-    const { projectLink } = await prompt({
-      type: "text",
-      name: "projectLink",
-      message: "Please paste a link from the Share dialog in the builder"
-    });
-    if (projectLink === void 0) {
-      throw new Error(`Project Link is required`);
-    }
-    await link({ link: projectLink });
-    const { deployTarget } = await prompt({
-      type: "select",
-      name: "deployTarget",
-      message: "Where would you like to deploy your project?",
-      choices: PROJECT_TEMPALTES.map((template) => {
-        return {
-          title: titleCase(template),
-          value: template
-        };
+    const shareLink = exitIfCancelled(
+      await text2({
+        message: "Please paste a link from the Share Dialog in the builder",
+        validate: validateShareLink
       })
-    });
-    projectTemplate = deployTarget;
-    const { installDeps } = await prompt({
-      type: "confirm",
-      name: "installDeps",
-      message: "Would you like to install dependencies? (recommended)",
-      initial: true
-    });
-    shouldInstallDeps = installDeps;
+    );
+    await link({ link: shareLink });
+    projectTemplate = exitIfCancelled(
+      await select({
+        message: "Where would you like to deploy your project?",
+        options: PROJECT_TEMPALTES.map((template) => ({
+          value: template,
+          label: titleCase(template)
+        }))
+      })
+    );
+    shouldInstallDeps = exitIfCancelled(
+      await confirm({
+        message: "Would you like to install dependencies? (recommended)",
+        initialValue: true
+      })
+    );
   }
-  await sync({ buildId: void 0, origin: void 0, authToken: void 0 });
   if (projectTemplate === void 0) {
-    const { deployTarget } = await prompt({
-      type: "select",
-      name: "deployTarget",
-      message: "Where would you like to deploy your project?",
-      choices: PROJECT_TEMPALTES.map((template) => {
-        return {
-          title: titleCase(template),
-          value: template
-        };
+    projectTemplate = exitIfCancelled(
+      await select({
+        message: "Where would you like to deploy your project?",
+        options: PROJECT_TEMPALTES.map((template) => ({
+          value: template,
+          label: titleCase(template)
+        }))
       })
-    });
-    projectTemplate = deployTarget;
+    );
   }
+  await sync({ buildId: void 0, origin: void 0, authToken: void 0 });
   await build({
     ...options,
     ...projectTemplate && { template: [projectTemplate] }
   });
   if (shouldInstallDeps === true) {
-    const spinner = ora3().start();
-    spinner.text = "Installing dependencies";
+    const install = spinner3();
+    install.start("Installing dependencies");
     await $`npm install`;
-    spinner.succeed("Installed dependencies");
+    install.stop("Installed dependencies");
   }
-  console.info(pc2.bold(pc2.green(`
-Your project was successfully synced \u{1F389}`)));
-  console.info(
+  log4.message();
+  log4.message(pc2.green(pc2.bold(`Your project was successfully synced \u{1F389}`)));
+  log4.message(
     [
       "Now you can:",
       folderName && `Go to your project: ${pc2.dim(`cd ${folderName}`)}`,
@@ -949,7 +1093,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.163.0",
+  version: "0.168.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -958,6 +1102,12 @@ var package_default = {
     "webstudio-cli": "./bin.js",
     webstudio: "./bin.js"
   },
+  imports: {
+    "#cli": {
+      webstudio: "./src/cli.ts",
+      default: "./lib/cli.js"
+    }
+  },
   files: [
     "lib/*",
     "templates/*",
@@ -968,11 +1118,15 @@ var package_default = {
     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"
+    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:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
@@ -980,39 +1134,39 @@ 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.4.4",
     deepmerge: "^4.3.1",
     "env-paths": "^3.0.0",
     execa: "^7.2.0",
-    ora: "^7.0.1",
     "p-limit": "^4.0.0",
-    picocolors: "^1.0.0",
-    prompts: "^2.4.2",
+    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"
   },
   devDependencies: {
-    "@netlify/remix-adapter": "^2.3.1",
-    "@netlify/remix-edge-adapter": "3.2.2",
-    "@remix-run/cloudflare": "^2.9.1",
-    "@remix-run/cloudflare-pages": "^2.9.1",
-    "@remix-run/dev": "^2.9.1",
-    "@remix-run/node": "^2.9.1",
-    "@remix-run/react": "^2.9.1",
-    "@remix-run/server-runtime": "^2.9.1",
+    "@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",
     "@types/node": "^20.12.7",
-    "@types/prompts": "^2.4.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
     "@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",
-    tsx: "^4.7.2",
     typescript: "5.4.5",
-    vite: "^5.2.11",
+    vite: "^5.2.13",
     wrangler: "^3.48.0"
   }
 };
@@ -1056,7 +1210,7 @@ var main = async () => {
     await cmd.parse();
   } catch (error) {
     console.error(error);
-    exit(1);
+    exit4(1);
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.163.0",
+  "version": "0.168.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,6 +9,12 @@
     "webstudio-cli": "./bin.js",
     "webstudio": "./bin.js"
   },
+  "imports": {
+    "#cli": {
+      "webstudio": "./src/cli.ts",
+      "default": "./lib/cli.js"
+    }
+  },
   "files": [
     "lib/*",
     "templates/*",
@@ -16,54 +22,58 @@
     "!*.{test,stories}.*"
   ],
   "license": "AGPL-3.0-or-later",
+  "engines": {
+    "node": ">=20.12"
+  },
   "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "change-case": "^5.4.4",
     "deepmerge": "^4.3.1",
     "env-paths": "^3.0.0",
     "execa": "^7.2.0",
-    "ora": "^7.0.1",
     "p-limit": "^4.0.0",
-    "picocolors": "^1.0.0",
-    "prompts": "^2.4.2",
+    "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",
-    "@webstudio-is/http-client": "0.163.0",
-    "@webstudio-is/react-sdk": "0.163.0",
-    "@webstudio-is/image": "0.163.0",
-    "@webstudio-is/sdk": "0.163.0",
-    "@webstudio-is/sdk-components-react-radix": "0.163.0",
-    "@webstudio-is/sdk-components-react": "0.163.0",
-    "@webstudio-is/sdk-components-react-remix": "0.163.0"
+    "@webstudio-is/image": "0.168.0",
+    "@webstudio-is/react-sdk": "0.168.0",
+    "@webstudio-is/sdk": "0.168.0",
+    "@webstudio-is/http-client": "0.168.0",
+    "@webstudio-is/sdk-components-react": "0.168.0",
+    "@webstudio-is/sdk-components-react-radix": "0.168.0",
+    "@webstudio-is/sdk-components-react-remix": "0.168.0"
   },
   "devDependencies": {
-    "@netlify/remix-adapter": "^2.3.1",
-    "@netlify/remix-edge-adapter": "3.2.2",
-    "@remix-run/cloudflare": "^2.9.1",
-    "@remix-run/cloudflare-pages": "^2.9.1",
-    "@remix-run/dev": "^2.9.1",
-    "@remix-run/node": "^2.9.1",
-    "@remix-run/react": "^2.9.1",
-    "@remix-run/server-runtime": "^2.9.1",
+    "@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",
     "@types/node": "^20.12.7",
-    "@types/prompts": "^2.4.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "tsx": "^4.7.2",
     "typescript": "5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.13",
     "wrangler": "^3.48.0",
-    "@webstudio-is/form-handlers": "0.163.0",
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/form-handlers": "0.168.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "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"
+    "dev": "esbuild src/cli.ts --watch --bundle --format=esm --packages=external --outdir=./lib",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   }
 }

package/templates/cloudflare/package.json

@@ -12,9 +12,9 @@
     "build-cf-types": "wrangler types"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.9.1",
-    "@remix-run/cloudflare-pages": "2.9.1",
-    "isbot": "^4.1.0"
+    "@remix-run/cloudflare": "2.9.2",
+    "@remix-run/cloudflare-pages": "2.9.2",
+    "isbot": "^5.1.8"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240405.0",

package/templates/cloudflare/tsconfig.json

@@ -8,7 +8,7 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": [
       "@remix-run/cloudflare",
       "vite/client",

package/templates/defaults/app/root.tsx

@@ -1,13 +1,31 @@
-import { Links, Meta, Outlet } from "@remix-run/react";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+// @todo think about how to make __generated__ typeable
+// @ts-ignore
+import { CustomCode } from "./__generated__/_index";
 
 const Root = () => {
+  // Get language from matches
+  const matches = useMatches();
+
+  const lastMatchWithLanguage = matches.findLast((match) => {
+    // @ts-ignore
+    const language = match?.data?.pageMeta?.language;
+    return language != null;
+  });
+
+  // @ts-ignore
+  const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
+
   return (
-    <html lang="en">
+    <html lang={lang}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        <CustomCode />
       </head>
       <Outlet />
     </html>

package/templates/defaults/app/route-templates/html.tsx

@@ -81,7 +81,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       status: pageMeta.status,
       headers: {
         "Cache-Control": "public, max-age=600",
-        "x-ws-language": pageMeta.language ?? "en",
       },
     }
   );
@@ -90,7 +89,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
-    "x-ws-language": loaderHeaders.get("x-ws-language") ?? "",
   };
 };
 
@@ -188,24 +186,15 @@ export const links: LinksFunction = () => {
       rel: "icon",
       href: imageLoader({
         src: favIconAsset.name,
-        width: 128,
+        // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
+        width: 144,
+        height: 144,
+        fit: "pad",
         quality: 100,
         format: "auto",
       }),
       type: undefined,
     });
-  } else {
-    result.push({
-      rel: "icon",
-      href: "/favicon.ico",
-      type: "image/x-icon",
-    });
-
-    result.push({
-      rel: "shortcut icon",
-      href: "/favicon.ico",
-      type: "image/x-icon",
-    });
   }
 
   for (const asset of pageFontAssets) {

package/templates/defaults/package.json

@@ -8,26 +8,26 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "2.9.1",
-    "@remix-run/react": "2.9.1",
-    "@remix-run/server-runtime": "2.9.1",
-    "@webstudio-is/react-sdk": "0.163.0",
-    "@webstudio-is/sdk-components-react-radix": "0.163.0",
-    "@webstudio-is/sdk-components-react-remix": "0.163.0",
-    "@webstudio-is/sdk-components-react": "0.163.0",
-    "@webstudio-is/form-handlers": "0.163.0",
-    "@webstudio-is/image": "0.163.0",
-    "@webstudio-is/sdk": "0.163.0",
-    "isbot": "^3.6.8",
+    "@remix-run/node": "2.9.2",
+    "@remix-run/react": "2.9.2",
+    "@remix-run/server-runtime": "2.9.2",
+    "@webstudio-is/react-sdk": "0.168.0",
+    "@webstudio-is/sdk-components-react-radix": "0.168.0",
+    "@webstudio-is/sdk-components-react-remix": "0.168.0",
+    "@webstudio-is/sdk-components-react": "0.168.0",
+    "@webstudio-is/form-handlers": "0.168.0",
+    "@webstudio-is/image": "0.168.0",
+    "@webstudio-is/sdk": "0.168.0",
+    "isbot": "^5.1.8",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.9.1",
+    "@remix-run/dev": "2.9.2",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "typescript": "5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^5.2.13"
   },
   "engines": {
     "node": ">=20.0.0"

package/templates/defaults/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,

package/templates/internal/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,

package/templates/netlify-edge-functions/package.json

@@ -3,7 +3,7 @@
     "start": "netlify serve"
   },
   "dependencies": {
-    "@netlify/edge-functions": "^2.6.0",
-    "@netlify/remix-edge-adapter": "^3.2.2"
+    "@netlify/edge-functions": "^2.8.1",
+    "@netlify/remix-edge-adapter": "^3.3.0"
   }
 }

package/templates/netlify-functions/package.json

@@ -3,7 +3,7 @@
     "start": "netlify serve"
   },
   "dependencies": {
-    "@netlify/functions": "^2.6.0",
-    "@netlify/remix-adapter": "^2.3.1"
+    "@netlify/functions": "^2.7.0",
+    "@netlify/remix-adapter": "^2.4.0"
   }
 }

package/templates/saas-helpers/tsconfig.json

@@ -8,7 +8,7 @@
     "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "types": [
       "@remix-run/cloudflare",
       "vite/client",