webstudio 0.105.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "webstudio",
+  "version": "0.105.0",
+  "description": "Webstudio CLI",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "type": "module",
+  "bin": {
+    "webstudio-cli": "./bin.js",
+    "webstudio": "./bin.js"
+  },
+  "files": [
+    "lib/*",
+    "templates/*",
+    "bin.js",
+    "!*.{test,stories}.*"
+  ],
+  "license": "AGPL-3.0-or-later",
+  "dependencies": {
+    "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",
+    "strip-indent": "^4.0.0",
+    "title-case": "^4.1.0",
+    "yargs": "^17.7.2",
+    "zod": "^3.21.4",
+    "@webstudio-is/http-client": "0.105.0",
+    "@webstudio-is/image": "0.105.0",
+    "@webstudio-is/react-sdk": "0.105.0",
+    "@webstudio-is/sdk": "0.105.0",
+    "@webstudio-is/sdk-components-react": "0.105.0",
+    "@webstudio-is/sdk-components-react-radix": "0.105.0",
+    "@webstudio-is/sdk-components-react-remix": "0.105.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.17.1",
+    "@types/prompts": "^2.4.5",
+    "tsx": "^3.12.8",
+    "typescript": "5.2.2",
+    "@webstudio-is/form-handlers": "0.105.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"
+  }
+}

package/templates/defaults/app/constants.mjs

@@ -0,0 +1,13 @@
+/**
+ * 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 = ({ src }) => {
+  return imageBaseUrl + src;
+};

package/templates/defaults/app/root.tsx

@@ -0,0 +1 @@
+export { Root as default } from "@webstudio-is/react-sdk";

package/templates/defaults/package.json

@@ -0,0 +1,34 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/react": "^1.19.2",
+    "@remix-run/server-runtime": "^1.19.2",
+    "@remix-run/node": "^1.19.2",
+    "@webstudio-is/react-sdk": "^0.105.0",
+    "@webstudio-is/sdk-components-react-radix": "^0.105.0",
+    "@webstudio-is/sdk-components-react-remix": "^0.105.0",
+    "@webstudio-is/sdk-components-react": "^0.105.0",
+    "@webstudio-is/form-handlers": "^0.105.0",
+    "@webstudio-is/image": "^0.105.0",
+    "@webstudio-is/sdk": "^0.105.0",
+    "isbot": "^3.6.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/serve": "^1.19.2",
+    "@remix-run/dev": "^1.19.2",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "5.2.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/defaults/remix.config.js

@@ -0,0 +1,18 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  serverModuleFormat: "cjs",
+  serverDependenciesToBundle: [
+    /@webstudio-is\//,
+    "nanoid",
+    "@jsep-plugin/assignment",
+  ],
+  future: {
+    v2_errorBoundary: true,
+    v2_headers: true,
+    v2_meta: true,
+    v2_normalizeFormMethod: true,
+    v2_routeConvention: true,
+    v2_dev: true,
+  },
+};

package/templates/defaults/remix.env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />

package/templates/defaults/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "customConditions": ["webstudio"],
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true,
+    "skipLibCheck": true
+  }
+}

package/templates/netlify-edge-functions/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

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

@@ -0,0 +1,7 @@
+[build]
+command = "npm run build"
+publish = "public"
+
+[dev]
+command = "npm run dev"
+targetPort = 3000

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

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "predev": "node -e \"fs.rmSync('./public/_redirects', { recursive: true, force: true })\"",
+    "start": "netlify serve"
+  },
+  "dependencies": {
+    "@netlify/functions": "^1.3.0",
+    "@netlify/edge-functions": "^2.0.0",
+    "@netlify/remix-edge-adapter": "1.2.0"
+  }
+}

package/templates/netlify-edge-functions/remix.config.js

@@ -0,0 +1,27 @@
+const { config } = require("@netlify/remix-edge-adapter");
+const baseConfig =
+  process.env.NODE_ENV === "production"
+    ? config
+    : {
+        ignoredRouteFiles: ["**/.*"],
+        serverModuleFormat: "cjs",
+        serverDependenciesToBundle: [
+          /@webstudio-is\//,
+          "nanoid",
+          "@jsep-plugin/assignment",
+        ],
+      };
+
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  ...baseConfig,
+  future: {
+    v2_errorBoundary: true,
+    v2_headers: true,
+    v2_meta: true,
+    v2_normalizeFormMethod: true,
+    v2_routeConvention: true,
+    v2_dev: true,
+  },
+};

package/templates/netlify-edge-functions/server.js

@@ -0,0 +1,19 @@
+// Import path interpreted by the Remix compiler
+import * as build from "@remix-run/dev/server-build";
+import { createRequestHandler } from "@netlify/remix-edge-adapter";
+
+export default createRequestHandler({
+  build,
+  // process.env.NODE_ENV is provided by Remix at compile time
+  mode: process.env.NODE_ENV,
+});
+
+export const config = {
+  cache: "manual",
+  path: "/*",
+  // Let the CDN handle requests for static assets, i.e. ^/_assets/*$
+  //
+  // Add other exclusions here, e.g. "^/api/*$" for custom Netlify functions or
+  // custom Netlify Edge Functions
+  excluded_patterns: ["^/_assets/*$"],
+};

package/templates/netlify-functions/_app_redirects

@@ -0,0 +1,7 @@
+# This template uses this file instead of the typicial Netlify _redirects file.
+# For more information about redirects and rewrites, see https://docs.netlify.com/routing/redirects/.
+
+# Do not remove the line below. This is required to serve the site when deployed.
+/* /.netlify/functions/server 200
+
+# Add other redirects and rewrites here and/or in your netlify.toml

package/templates/netlify-functions/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

package/templates/netlify-functions/netlify.toml

@@ -0,0 +1,14 @@
+[build]
+command = "remix build && cp _app_redirects public/_redirects"
+publish = "public"
+
+[dev]
+command = "npm run dev"
+targetPort = 3000
+
+[[headers]]
+for = "/build/*"
+
+[headers.values]
+# Set to 60 seconds as an example. You can also add cache headers via Remix. See the documentation on [headers](https://remix.run/docs/en/v1/route/headers) in Remix.
+"Cache-Control" = "public, max-age=60, s-maxage=60"

package/templates/netlify-functions/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "predev": "node -e \"fs.rmSync('./public/_redirects', { recursive: true, force: true })\"",
+    "start": "netlify serve"
+  },
+  "dependencies": {
+    "@netlify/functions": "^1.3.0",
+    "@netlify/remix-adapter": "^1.0.0"
+  }
+}

package/templates/netlify-functions/remix.config.js

@@ -0,0 +1,29 @@
+const baseConfig =
+  process.env.NODE_ENV === "production"
+    ? // when running the Netify CLI or building on Netlify, we want to use
+      {
+        server: "./server.js",
+        serverBuildPath: ".netlify/functions-internal/server.js",
+      }
+    : // otherwise support running remix dev, i.e. no custom server
+      undefined;
+
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ...baseConfig,
+  ignoredRouteFiles: ["**/.*"],
+  serverModuleFormat: "cjs",
+  serverDependenciesToBundle: [
+    /@webstudio-is\//,
+    "nanoid",
+    "@jsep-plugin/assignment",
+  ],
+  future: {
+    v2_errorBoundary: true,
+    v2_headers: true,
+    v2_meta: true,
+    v2_normalizeFormMethod: true,
+    v2_routeConvention: true,
+    v2_dev: true,
+  },
+};

package/templates/netlify-functions/server.js

@@ -0,0 +1,7 @@
+import { createRequestHandler } from "@netlify/remix-adapter";
+import * as build from "@remix-run/dev/server-build";
+
+export const handler = createRequestHandler({
+  build,
+  mode: process.env.NODE_ENV,
+});

package/templates/route-template.tsx

@@ -0,0 +1,178 @@
+/* eslint-disable camelcase */
+import {
+  type V2_ServerRuntimeMetaFunction,
+  type LinksFunction,
+  type LinkDescriptor,
+  type ActionArgs,
+  json,
+} from "@remix-run/server-runtime";
+import type { Page as PageType } from "@webstudio-is/sdk";
+import { ReactSdkContext } from "@webstudio-is/react-sdk";
+import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
+import { Scripts, ScrollRestoration } from "@remix-run/react";
+import {
+  fontAssets,
+  pageData,
+  user,
+  projectId,
+  pagesPaths,
+  formsProperties,
+  Page,
+} from "../__generated__/index";
+import css from "../__generated__/index.css";
+import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
+
+export type PageData = {
+  page: PageType;
+};
+
+export const meta: V2_ServerRuntimeMetaFunction = () => {
+  const { page } = pageData;
+  const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [
+    { title: page?.title || "Webstudio" },
+  ];
+  for (const [name, value] of Object.entries(page?.meta ?? {})) {
+    if (name.startsWith("og:")) {
+      metas.push({
+        property: name,
+        content: value,
+      });
+      continue;
+    }
+
+    metas.push({
+      name,
+      content: value,
+    });
+  }
+
+  return metas;
+};
+
+export const links: LinksFunction = () => {
+  const result: LinkDescriptor[] = [];
+
+  result.push({
+    rel: "stylesheet",
+    href: css,
+  });
+
+  for (const asset of fontAssets) {
+    if (asset.type === "font") {
+      result.push({
+        rel: "preload",
+        href: assetBaseUrl + asset.name,
+        as: "font",
+        crossOrigin: "anonymous",
+        // @todo add mimeType
+        // type: asset.mimeType,
+      });
+    }
+  }
+
+  return result;
+};
+
+const getRequestHost = (request: Request): string =>
+  request.headers.get("x-forwarded-host") || request.headers.get("host") || "";
+
+const getMethod = (value: string | undefined) => {
+  if (value === undefined) {
+    return "post";
+  }
+
+  switch (value.toLowerCase()) {
+    case "get":
+      return "get";
+    default:
+      return "post";
+  }
+};
+
+export const action = async ({ request, context }: ActionArgs) => {
+  const formData = await request.formData();
+
+  const formId = getFormId(formData);
+  if (formId === undefined) {
+    // We're throwing rather than returning { success: false }
+    // because this isn't supposed to happen normally: bug or malicious user
+    throw json("Form not found", { status: 404 });
+  }
+
+  const formProperties = formsProperties.get(formId);
+
+  // form properties are not defined when defaults are used
+  const { action, method } = formProperties ?? {};
+
+  const email = user?.email;
+
+  if (email == null) {
+    return { success: false };
+  }
+
+  // wrapped in try/catch just in cases new URL() throws
+  // (should not happen)
+  let pageUrl: URL;
+  try {
+    pageUrl = new URL(request.url);
+    pageUrl.host = getRequestHost(request);
+  } catch {
+    return { success: false };
+  }
+
+  if (action !== undefined) {
+    try {
+      // Test that action is full URL
+      new URL(action);
+    } catch {
+      return json(
+        {
+          success: false,
+          error: "Invalid action URL, must be valid http/https protocol",
+        },
+        { status: 200 }
+      );
+    }
+  }
+
+  const formInfo = {
+    formData,
+    projectId,
+    action: action ?? null,
+    method: getMethod(method),
+    pageUrl: pageUrl.toString(),
+    toEmail: email,
+    fromEmail: pageUrl.hostname + "@webstudio.email",
+  } as const;
+
+  const result = await n8nHandler({
+    formInfo,
+    hookUrl: context.N8N_FORM_EMAIL_HOOK as string,
+  });
+
+  return result;
+};
+
+const Outlet = () => {
+  return (
+    <ReactSdkContext.Provider
+      value={{
+        imageLoader,
+        assetBaseUrl,
+        imageBaseUrl,
+        pagesPaths,
+      }}
+    >
+      <Page
+        scripts={
+          <>
+            <Scripts />
+            <ScrollRestoration />
+          </>
+        }
+      />
+    </ReactSdkContext.Provider>
+  );
+};
+
+export default Outlet;

package/templates/vercel/.vercelignore

@@ -0,0 +1,8 @@
+node_modules
+
+.cache
+.env
+.vercel
+.webstudio
+build
+public/build

package/templates/vercel/app/constants.mjs

@@ -0,0 +1,25 @@
+/**
+ * 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 = ({ quality, src, width }) => {
+  if (process.env.NODE_ENV !== "production") {
+    return imageBaseUrl + src;
+  }
+
+  // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
+  return (
+    "/_vercel/image?url=" +
+    encodeURIComponent(imageBaseUrl + src) +
+    "&w=" +
+    width +
+    "&q=" +
+    quality
+  );
+};

package/templates/vercel/package.json

@@ -0,0 +1,5 @@
+{
+  "scripts": {
+    "start": "remix-serve build"
+  }
+}

package/templates/vercel/vercel.json

@@ -0,0 +1,11 @@
+{
+  "images": {
+    "domains": [],
+    "sizes": [
+      16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048,
+      3840
+    ],
+    "minimumCacheTTL": 60,
+    "formats": ["image/webp", "image/avif"]
+  }
+}