@webstudio-is/react-sdk 0.91.0 → 0.92.0

package/lib/cjs/tree/webstudio-component.js

@@ -1,91 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var webstudio_component_exports = {};
-__export(webstudio_component_exports, {
-  WebstudioComponent: () => WebstudioComponent,
-  collapsedAttribute: () => collapsedAttribute,
-  componentAttribute: () => componentAttribute,
-  idAttribute: () => idAttribute,
-  indexAttribute: () => indexAttribute,
-  renderWebstudioComponentChildren: () => renderWebstudioComponentChildren,
-  selectorIdAttribute: () => selectorIdAttribute,
-  showAttribute: () => showAttribute,
-  splitPropsWithWebstudioAttributes: () => splitPropsWithWebstudioAttributes
-});
-module.exports = __toCommonJS(webstudio_component_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_props = require("../props");
-const renderText = (text) => {
-  const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-    line,
-    index < lines.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
-  ] }, index));
-};
-const renderWebstudioComponentChildren = (children) => {
-  if (children === void 0 || children.length === 0) {
-    return;
-  }
-  return children.map((child) => {
-    return typeof child === "string" ? renderText(child) : child;
-  });
-};
-const WebstudioComponent = (0, import_react.forwardRef)(({ instance, instanceSelector, children, components, ...rest }, ref) => {
-  const { [showAttribute]: show = true, ...instanceProps } = (0, import_props.useInstanceProps)(
-    instance.id
-  );
-  const props = {
-    ...instanceProps,
-    ...rest,
-    [idAttribute]: instance.id,
-    [componentAttribute]: instance.component
-  };
-  if (show === false) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-  }
-  const Component = components.get(instance.component);
-  if (Component === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, ref, children: renderWebstudioComponentChildren(children) });
-});
-const idAttribute = "data-ws-id";
-const selectorIdAttribute = "data-ws-selector";
-const componentAttribute = "data-ws-component";
-const showAttribute = "data-ws-show";
-const indexAttribute = "data-ws-index";
-const collapsedAttribute = "data-ws-collapsed";
-const splitPropsWithWebstudioAttributes = ({
-  [idAttribute]: idAttributeValue,
-  [componentAttribute]: componentAttributeValue,
-  [showAttribute]: showAttributeValue,
-  [collapsedAttribute]: collapsedAttributeValue,
-  [selectorIdAttribute]: parentIdAttributeValue,
-  ...props
-}) => [
-  {
-    [idAttribute]: idAttributeValue,
-    [componentAttribute]: componentAttributeValue,
-    [showAttribute]: showAttributeValue,
-    [collapsedAttribute]: collapsedAttributeValue,
-    [selectorIdAttribute]: parentIdAttributeValue
-  },
-  props
-];

package/src/app/index.ts

@@ -1 +0,0 @@
-export * from "./root";

package/src/app/root.tsx

@@ -1,25 +0,0 @@
-import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
-
-/**
- * We are using Outlet prop from index layout when user renders site from a subdomain.
- */
-export const Root = ({
-  Outlet = DefaultOutlet,
-}: {
-  Outlet: typeof DefaultOutlet;
-}) => {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-        <Meta />
-        <Links />
-      </head>
-
-      <Outlet />
-    </html>
-  );
-};

package/src/component-renderer.tsx

@@ -1,146 +0,0 @@
-import type { ExoticComponent } from "react";
-import type { Instance } from "@webstudio-is/project-build";
-import { getStyleDeclKey } from "@webstudio-is/project-build";
-import type { WsComponentMeta } from "./components/component-meta";
-import {
-  WsEmbedTemplate,
-  generateDataFromEmbedTemplate,
-} from "./embed-template";
-import { generateCssText } from "./css";
-import { InstanceRoot, WebstudioComponent } from "./tree";
-import {
-  decodeVariablesMap,
-  encodeDataSourceVariable,
-  encodeVariablesMap,
-  executeComputingExpressions,
-  executeEffectfulExpression,
-} from "./expression";
-import { getIndexesWithinAncestors } from "./instance-utils";
-
-export const renderComponentTemplate = ({
-  name,
-  metas: metasRecord,
-  components,
-  props,
-}: {
-  name: Instance["component"];
-  metas: Record<string, WsComponentMeta>;
-  props?: Record<string, unknown>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  components: Record<string, ExoticComponent<any>>;
-}) => {
-  const metas = new Map(Object.entries(metasRecord));
-
-  const template: WsEmbedTemplate = metas.get(name)?.template ?? [
-    {
-      type: "instance",
-      component: name,
-      children: [],
-    },
-  ];
-
-  if (template[0].type === "instance" && props !== undefined) {
-    template[0].props = Object.entries(props).map(([prop, value]) => {
-      if (typeof value === "string") {
-        return { type: "string", name: prop, value: value };
-      }
-
-      if (typeof value === "number") {
-        return { type: "number", name: prop, value: value };
-      }
-
-      if (typeof value === "boolean") {
-        return { type: "boolean", name: prop, value: value };
-      }
-      throw new Error(`Unsupported prop ${props} with value ${value}`);
-    });
-  }
-
-  const data = generateDataFromEmbedTemplate(template, metas, "base");
-
-  const instances: [Instance["id"], Instance][] = [
-    [
-      "root",
-      {
-        type: "instance",
-        id: "root",
-        component: "Box",
-        children: data.children,
-      },
-    ],
-    ...data.instances.map(
-      (instance) => [instance.id, instance] satisfies [Instance["id"], Instance]
-    ),
-  ];
-
-  return (
-    <>
-      <style>
-        {generateCssText(
-          {
-            assets: [],
-            breakpoints: [["base", { id: "base", label: "base" }]],
-            styles: data.styles.map((item) => [getStyleDeclKey(item), item]),
-            styleSourceSelections: data.styleSourceSelections.map((item) => [
-              item.instanceId,
-              item,
-            ]),
-            componentMetas: metas,
-          },
-          { assetBaseUrl: "/" }
-        )}
-      </style>
-      <InstanceRoot
-        data={{
-          page: {
-            path: "",
-            id: "",
-            name: "",
-            title: "",
-            meta: {},
-            rootInstanceId: "root",
-          },
-          pages: [],
-          assets: [],
-          build: {
-            instances,
-            props: data.props.map((prop) => [prop.id, prop]),
-            dataSources: data.dataSources.map((dataSource) => [
-              dataSource.id,
-              dataSource,
-            ]),
-          },
-        }}
-        utils={{
-          indexesWithinAncestors: getIndexesWithinAncestors(
-            metas,
-            new Map(instances),
-            ["root"]
-          ),
-          executeComputingExpressions: (values) => {
-            const expressions = new Map<string, string>();
-            for (const dataSource of data.dataSources) {
-              const name = encodeDataSourceVariable(dataSource.id);
-              if (dataSource.type === "expression") {
-                expressions.set(name, dataSource.code);
-              }
-            }
-            return decodeVariablesMap(
-              executeComputingExpressions(
-                expressions,
-                encodeVariablesMap(values)
-              )
-            );
-          },
-          executeEffectfulExpression: (code, args, values) => {
-            return decodeVariablesMap(
-              executeEffectfulExpression(code, args, encodeVariablesMap(values))
-            );
-          },
-        }}
-        Component={WebstudioComponent}
-        components={new Map(Object.entries(components))}
-      />
-    </>
-  );
-};

package/src/components/component-meta.ts

@@ -1,86 +0,0 @@
-import { z } from "zod";
-import { PropMeta } from "@webstudio-is/generate-arg-types";
-import type { htmlTags as HtmlTags } from "html-tags";
-import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
-
-export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<
-  Record<Tag, EmbedTemplateStyleDecl[]>
->;
-
-// props are separated from the rest of the meta
-// so they can be exported separately and potentially tree-shaken
-const WsComponentPropsMeta = z.object({
-  props: z.record(PropMeta),
-  // Props that will be always visible in properties panel.
-  initialProps: z.array(z.string()).optional(),
-});
-
-export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-
-export const componentCategories = [
-  "general",
-  "text",
-  "media",
-  "forms",
-  "radix",
-  "hidden",
-] as const;
-
-export const stateCategories = ["states", "component-states"] as const;
-
-export const ComponentState = z.object({
-  category: z.enum(stateCategories).optional(),
-  selector: z.string(),
-  label: z.string(),
-});
-
-export type ComponentState = z.infer<typeof ComponentState>;
-
-const ComponentToken = z.object({
-  variant: z.optional(z.string()),
-  styles: z.array(EmbedTemplateStyleDecl),
-});
-
-export const defaultStates: ComponentState[] = [
-  { selector: ":hover", label: "Hover" },
-  { selector: ":active", label: "Active" },
-  { selector: ":focus", label: "Focus" },
-  { selector: ":focus-visible", label: "Focus Visible" },
-  { selector: ":focus-within", label: "Focus Within" },
-];
-
-const WsComponentMeta = z.object({
-  category: z.enum(componentCategories).optional(),
-  // container - can accept other components with dnd or be edited as text
-  // control - usually form controls like inputs, without children
-  // embed - images, videos or other embeddable components, without children
-  // rich-text-child - formatted text fragment, not listed in components list
-  type: z.enum(["container", "control", "embed", "rich-text-child"]),
-  requiredAncestors: z.optional(z.array(z.string())),
-  invalidAncestors: z.optional(z.array(z.string())),
-  // when this field is specified component receives
-  // prop with index of same components withiin specified ancestor
-  // important to automatically enumerate collections without
-  // naming every item manually
-  indexWithinAncestor: z.optional(z.string()),
-  stylable: z.optional(z.boolean()),
-  // specifies whether the instance can be deleted,
-  // copied or dragged out of its parent instance
-  // true by default
-  detachable: z.optional(z.boolean()),
-  label: z.optional(z.string()),
-  description: z.string().optional(),
-  icon: z.string(),
-  presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
-  presetTokens: z.optional(z.record(z.string(), ComponentToken)),
-  states: z.optional(z.array(ComponentState)),
-  template: z.optional(WsEmbedTemplate),
-  order: z.number().optional(),
-});
-
-export type WsComponentMeta = Omit<
-  z.infer<typeof WsComponentMeta>,
-  "presetStyle"
-> & {
-  presetStyle?: PresetStyle;
-};

package/src/components/components-utils.ts

@@ -1,13 +0,0 @@
-import { componentAttribute, idAttribute } from "../tree";
-
-export type AnyComponent = React.ForwardRefExoticComponent<
-  Omit<
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
-    "ref"
-  > & {
-    [componentAttribute]: string;
-    [idAttribute]: string;
-  } & React.RefAttributes<HTMLElement>
->;
-
-export type Components = Map<string, AnyComponent>;

package/src/context.tsx

@@ -1,73 +0,0 @@
-import { type ReadableAtom, atom } from "nanostores";
-import { createContext } from "react";
-import type { Assets } from "@webstudio-is/asset-uploader";
-import type { DataSource, Instance, Prop } from "@webstudio-is/project-build";
-import type { Pages, PropsByInstanceId } from "./props";
-import type { IndexesWithinAncestors } from "./instance-utils";
-
-export type Params = {
-  renderer?: "canvas" | "preview";
-  /**
-   * Base url ir base path for images with ending slash.
-   * Used for configuring image with different sizes.
-   * Concatinated with "name?width=&quality=&format=".
-   *
-   * For example
-   * /asset/image/ used by default in builder
-   * https://image-transform.wstd.io/cdn-cgi/image/
-   * https://webstudio.is/cdn-cgi/image/
-   */
-  imageBaseUrl: string;
-  /**
-   * Base url or base path for any asset with ending slash.
-   * Used to load assets like fonts or images in styles
-   * Concatinated with "name".
-   *
-   * For example
-   * /s/uploads/
-   * /asset/file/
-   * https://assets-dev.webstudio.is/
-   * https://assets.webstudio.is/
-   */
-  assetBaseUrl: string;
-};
-
-export type DataSourceValues = Map<DataSource["id"], unknown>;
-
-export const ReactSdkContext = createContext<
-  Params & {
-    propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
-    assetsStore: ReadableAtom<Assets>;
-    pagesStore: ReadableAtom<Pages>;
-    dataSourceValuesStore: ReadableAtom<DataSourceValues>;
-    executeEffectfulExpression: (
-      expression: string,
-      args: DataSourceValues,
-      values: DataSourceValues
-    ) => DataSourceValues;
-    setDataSourceValues: (newValues: DataSourceValues) => void;
-    setBoundDataSourceValue: (
-      instanceId: Instance["id"],
-      prop: Prop["name"],
-      value: unknown
-    ) => void;
-    indexesWithinAncestors: IndexesWithinAncestors;
-  }
->({
-  imageBaseUrl: "/",
-  assetBaseUrl: "/",
-  propsByInstanceIdStore: atom(new Map()),
-  assetsStore: atom(new Map()),
-  pagesStore: atom(new Map()),
-  dataSourceValuesStore: atom(new Map()),
-  executeEffectfulExpression: () => {
-    throw Error("React SDK executeEffectfulExpression is not implemented");
-  },
-  setDataSourceValues: () => {
-    throw Error("React SDK setBoundDataSourceValue is not implemented");
-  },
-  setBoundDataSourceValue: () => {
-    throw Error("React SDK setBoundDataSourceValue is not implemented");
-  },
-  indexesWithinAncestors: new Map(),
-});

package/src/css/css.ts

@@ -1,88 +0,0 @@
-import { createCssEngine, type TransformValue } from "@webstudio-is/css-engine";
-import type { Asset, Assets } from "@webstudio-is/asset-uploader";
-import type { Build } from "@webstudio-is/project-build";
-import type { WsComponentMeta } from "../components/component-meta";
-import { idAttribute } from "../tree";
-import { addGlobalRules } from "./global-rules";
-import { getPresetStyleRules, getStyleRules } from "./style-rules";
-
-type Data = {
-  assets: Asset[];
-  breakpoints?: Build["breakpoints"];
-  styles?: Build["styles"];
-  styleSourceSelections?: Build["styleSourceSelections"];
-  componentMetas: Map<string, WsComponentMeta>;
-};
-
-type CssOptions = {
-  assetBaseUrl: string;
-};
-
-export const createImageValueTransformer =
-  (assets: Assets, options: CssOptions): TransformValue =>
-  (styleValue) => {
-    if (styleValue.type === "image" && styleValue.value.type === "asset") {
-      const asset = assets.get(styleValue.value.value);
-      if (asset === undefined) {
-        return { type: "keyword", value: "none" };
-      }
-
-      // @todo reuse image loaders and generate image-set
-      const { assetBaseUrl } = options;
-      const url = `${assetBaseUrl}${asset.name}`;
-
-      return {
-        type: "image",
-        value: {
-          type: "url",
-          url,
-        },
-        hidden: styleValue.hidden,
-      };
-    }
-  };
-
-export const generateCssText = (data: Data, options: CssOptions) => {
-  const assets = new Map<Asset["id"], Asset>(
-    data.assets.map((asset) => [asset.id, asset])
-  );
-  const breakpoints = new Map(data.breakpoints);
-  const styles = new Map(data.styles);
-  const styleSourceSelections = new Map(data.styleSourceSelections);
-
-  const engine = createCssEngine({ name: "ssr" });
-
-  addGlobalRules(engine, {
-    assets,
-    assetBaseUrl: options.assetBaseUrl,
-  });
-
-  for (const breakpoint of breakpoints.values()) {
-    engine.addMediaRule(breakpoint.id, breakpoint);
-  }
-
-  for (const [component, meta] of data.componentMetas) {
-    const presetStyle = meta.presetStyle;
-    if (presetStyle === undefined) {
-      continue;
-    }
-    const rules = getPresetStyleRules(component, presetStyle);
-    for (const [selector, style] of rules) {
-      engine.addStyleRule(selector, { style });
-    }
-  }
-
-  const styleRules = getStyleRules(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, state, style } of styleRules) {
-    engine.addStyleRule(
-      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
-      {
-        breakpoint: breakpointId,
-        style,
-      },
-      createImageValueTransformer(assets, options)
-    );
-  }
-
-  return engine.cssText;
-};

package/src/css/global-rules.ts

@@ -1,26 +0,0 @@
-import type { CssEngine } from "@webstudio-is/css-engine";
-import type { Assets, FontAsset } from "@webstudio-is/asset-uploader";
-import { getFontFaces } from "@webstudio-is/fonts";
-
-export const addGlobalRules = (
-  engine: CssEngine,
-  { assets, assetBaseUrl }: { assets: Assets; assetBaseUrl: string }
-) => {
-  // @todo we need to figure out all global resets while keeping
-  // the engine aware of all of them.
-  // Ideally, the user is somehow aware and in control of the reset
-  // Layout source https://twitter.com/ChallengesCss/status/1471128244720181258
-  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
-
-  const fontAssets: FontAsset[] = [];
-  for (const asset of assets.values()) {
-    if (asset?.type === "font") {
-      fontAssets.push(asset);
-    }
-  }
-
-  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
-  for (const fontFace of fontFaces) {
-    engine.addFontFaceRule(fontFace);
-  }
-};

package/src/css/index.ts

@@ -1,3 +0,0 @@
-export * from "./global-rules";
-export * from "./style-rules";
-export * from "./css";

package/src/css/normalize-type-check.ts

@@ -1,13 +0,0 @@
-import * as normalize from "./normalize";
-import type { htmlTags as HtmlTags } from "html-tags";
-import type { Style } from "@webstudio-is/css-data";
-
-// no way I found to check exports https://github.com/microsoft/TypeScript/issues/38511
-// we can check here that all exports represents a valid html tag
-const normalizeWithKeyof = { ...normalize };
-
-type ExportedTags = keyof typeof normalizeWithKeyof;
-
-type ValidTags = ExportedTags extends HtmlTags ? ExportedTags : false;
-
-normalizeWithKeyof satisfies Record<ValidTags, Style>;