webstudio 0.120.0 → 0.122.0

package/lib/cli.js

@@ -45,6 +45,7 @@ var jsonToGlobalConfig = (json) => {
   return zGlobalConfig.parse(json);
 };
 var PROJECT_TEMPALTES = [
+  "vanilla",
   "vercel",
   "netlify-functions",
   "netlify-edge-functions"
@@ -244,7 +245,6 @@ import { createWriteStream } from "node:fs";
 import {
   rm,
   access as access2,
-  mkdtemp,
   rename,
   cp,
   readFile as readFile4,
@@ -252,7 +252,6 @@ import {
   readdir
 } from "node:fs/promises";
 import { pipeline } from "node:stream/promises";
-import { tmpdir } from "node:os";
 import { cwd as cwd3 } from "node:process";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import pLimit from "p-limit";
@@ -276,12 +275,13 @@ 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 limit = pLimit(10);
-var downloadAsset = async (url, name, assetBaseUrl, temporaryDir) => {
+var downloadAsset = async (url, name, assetBaseUrl) => {
   const assetPath = join4("public", assetBaseUrl, name);
-  const tempAssetPath = join4(temporaryDir, name);
+  const tempAssetPath = `${assetPath}.tmp`;
   try {
     await access2(assetPath);
   } catch {
+    await ensureFolderExists(dirname2(assetPath));
     try {
       const response = await fetch(url);
       if (!response.ok) {
@@ -292,7 +292,6 @@ var downloadAsset = async (url, name, assetBaseUrl, temporaryDir) => {
         response.body,
         writableStream
       );
-      await ensureFolderExists(dirname2(assetPath));
       await rename(tempAssetPath, assetPath);
     } catch (error) {
       console.error(`Error in downloading file ${name} 
@@ -347,7 +346,14 @@ var copyTemplates = async (template = "defaults") => {
   }
 };
 var prebuild = async (options) => {
-  if (options.template !== void 0 && await isCliTemplate(options.template) === false && options.template.startsWith(".") === false) {
+  if (options.template === void 0) {
+    throw new Error(
+      `
+ Template is not provided 
+ Please check webstudio --help for more details`
+    );
+  }
+  if (options.template !== "vanilla" && await isCliTemplate(options.template) === false && options.template.startsWith(".") === false) {
     throw Error(
       `
  Template ${options.template} is not available 
@@ -363,7 +369,7 @@ var prebuild = async (options) => {
   const routesDir = join4(appRoot, "routes");
   await rm(routesDir, { recursive: true, force: true });
   await copyTemplates();
-  if (options.template !== void 0) {
+  if (options.template !== "vanilla") {
     await copyTemplates(options.template);
   }
   const constants2 = await import(pathToFileURL(join4(cwd3(), "app/constants.mjs")).href);
@@ -469,7 +475,6 @@ var prebuild = async (options) => {
   }
   const appDomain = options.preview ? "wstd.work" : "wstd.io";
   const assetBuildUrl = `https://${domain}.${appDomain}/cgi/asset/`;
-  const temporaryDir = await mkdtemp(join4(tmpdir(), "webstudio-"));
   const imageLoader = createImageLoader({
     imageBaseUrl: assetBuildUrl
   });
@@ -481,9 +486,7 @@ var prebuild = async (options) => {
           format: "raw"
         });
         assetsToDownload.push(
-          limit(
-            () => downloadAsset(imageSrc, asset.name, assetBaseUrl, temporaryDir)
-          )
+          limit(() => downloadAsset(imageSrc, asset.name, assetBaseUrl))
         );
       }
       if (asset.type === "font") {
@@ -492,8 +495,7 @@ var prebuild = async (options) => {
             () => downloadAsset(
               `${assetBuildUrl}${asset.name}`,
               asset.name,
-              assetBaseUrl,
-              temporaryDir
+              assetBaseUrl
             )
           )
         );
@@ -658,8 +660,9 @@ var buildOptions = (yargs) => yargs.option("assets", {
   describe: "[Experimental] Use preview version of the project"
 }).option("template", {
   type: "string",
-  default: "vercel",
-  describe: `[Experimental] Template to use for the build [choices: ${PROJECT_TEMPALTES.toString()}]`
+  describe: `Template to use for the build [choices: ${PROJECT_TEMPALTES.join(
+    ", "
+  )}]`
 });
 var build = async (options) => {
   try {
@@ -734,26 +737,18 @@ var initFlow = async (options) => {
       throw new Error(`Project Link is required`);
     }
     await link({ link: projectLink });
-    const { shouldSetupDeployTarget } = await prompt({
-      type: "confirm",
-      name: "shouldSetupDeployTarget",
-      message: "Would you like to setup a deploy target?",
-      initial: false
+    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
+        };
+      })
     });
-    if (shouldSetupDeployTarget === true) {
-      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 = deployTarget;
-    }
+    projectTemplate = deployTarget;
     const { installDeps } = await prompt({
       type: "confirm",
       name: "installDeps",
@@ -763,6 +758,20 @@ var initFlow = async (options) => {
     shouldInstallDeps = installDeps;
   }
   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 = deployTarget;
+  }
   await build({
     ...options,
     ...projectTemplate && { template: projectTemplate }
@@ -806,7 +815,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.120.0",
+  version: "0.122.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -881,7 +890,17 @@ var main = async () => {
       `Webstudio CLI (${package_default.version}) allows you to setup, sync, build and preview your project.`
     );
     cmd.version(package_default.version).alias("v", "version");
-    cmd.command(["build"], "Build the project", buildOptions, build);
+    cmd.command(
+      ["build"],
+      "Build the project",
+      (yargs) => {
+        return buildOptions(yargs).demandOption(
+          "template",
+          "Please specify a template to use for the build"
+        );
+      },
+      build
+    );
     cmd.command(["link"], "Link the project with the cloud", linkOptions, link);
     cmd.command(["sync"], "Sync your project", syncOptions, sync);
     cmd.command(["$0", "init"], "Setup the project", buildOptions, initFlow);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.120.0",
+  "version": "0.122.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,21 +28,21 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.21.4",
-    "@webstudio-is/image": "0.120.0",
-    "@webstudio-is/react-sdk": "0.120.0",
-    "@webstudio-is/sdk": "0.120.0",
-    "@webstudio-is/sdk-components-react": "0.120.0",
-    "@webstudio-is/http-client": "0.120.0",
-    "@webstudio-is/sdk-components-react-remix": "0.120.0",
-    "@webstudio-is/sdk-components-react-radix": "0.120.0"
+    "@webstudio-is/image": "0.122.0",
+    "@webstudio-is/http-client": "0.122.0",
+    "@webstudio-is/react-sdk": "0.122.0",
+    "@webstudio-is/sdk": "0.122.0",
+    "@webstudio-is/sdk-components-react": "0.122.0",
+    "@webstudio-is/sdk-components-react-radix": "0.122.0",
+    "@webstudio-is/sdk-components-react-remix": "0.122.0"
   },
   "devDependencies": {
     "@types/node": "^18.17.1",
     "@types/prompts": "^2.4.5",
     "tsx": "^3.12.8",
     "typescript": "5.2.2",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/form-handlers": "0.120.0"
+    "@webstudio-is/form-handlers": "0.122.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "typecheck": "tsc",

package/templates/defaults/package.json

@@ -10,13 +10,13 @@
     "@remix-run/react": "^1.19.2",
     "@remix-run/server-runtime": "^1.19.2",
     "@remix-run/node": "^1.19.2",
-    "@webstudio-is/react-sdk": "0.120.0",
-    "@webstudio-is/sdk-components-react-radix": "0.120.0",
-    "@webstudio-is/sdk-components-react-remix": "0.120.0",
-    "@webstudio-is/sdk-components-react": "0.120.0",
-    "@webstudio-is/form-handlers": "0.120.0",
-    "@webstudio-is/image": "0.120.0",
-    "@webstudio-is/sdk": "0.120.0",
+    "@webstudio-is/react-sdk": "0.122.0",
+    "@webstudio-is/sdk-components-react-radix": "0.122.0",
+    "@webstudio-is/sdk-components-react-remix": "0.122.0",
+    "@webstudio-is/sdk-components-react": "0.122.0",
+    "@webstudio-is/form-handlers": "0.122.0",
+    "@webstudio-is/image": "0.122.0",
+    "@webstudio-is/sdk": "0.122.0",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/templates/netlify-edge-functions/app/constants.mjs

@@ -0,0 +1,29 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+export const imageBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    return imageBaseUrl + props.src;
+  }
+
+  if (props.format === "raw") {
+    return imageBaseUrl + props.src;
+  }
+
+  // https://docs.netlify.com/image-cdn/overview/
+  return (
+    "/.netlify/images?url=" +
+    encodeURIComponent(imageBaseUrl + props.src) +
+    "&w=" +
+    props.width +
+    "&q=" +
+    props.quality
+  );
+};

package/templates/netlify-functions/app/constants.mjs

@@ -0,0 +1,29 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+export const imageBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = (props) => {
+  if (process.env.NODE_ENV !== "production") {
+    return imageBaseUrl + props.src;
+  }
+
+  if (props.format === "raw") {
+    return imageBaseUrl + props.src;
+  }
+
+  // https://docs.netlify.com/image-cdn/overview/
+  return (
+    "/.netlify/images?url=" +
+    encodeURIComponent(imageBaseUrl + props.src) +
+    "&w=" +
+    props.width +
+    "&q=" +
+    props.quality
+  );
+};