@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/lib/user-props/use-user-props-asset.js

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { useAllUserProps } from "./all-user-props";
+const useUserPropsAsset = (instanceId, propName) => {
+  const [allUserProps] = useAllUserProps();
+  const propsData = allUserProps[instanceId];
+  const asset = useMemo(() => {
+    if (propsData == null)
+      return void 0;
+    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    if (prop == null)
+      return void 0;
+    if (prop.type === "asset") {
+      return prop.value;
+    }
+    return void 0;
+  }, [propName, propsData]);
+  return asset;
+};
+export {
+  useUserPropsAsset
+};

package/lib/user-props/use-user-props.js

@@ -1,29 +1,21 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
-/**
- * User props mapped in prop:value format,
- * up to date with props panel.
- */
-export const useUserProps = (instanceId) => {
-    const [allUserProps] = useAllUserProps();
-    const propsData = allUserProps[instanceId];
-    const initialUserProps = useMemo(() => {
-        if (propsData === undefined)
-            return {};
-        return propsData.props.reduce((props, { prop, value }) => {
-            props[prop] = value;
-            return props;
-        }, {});
-    }, [propsData]);
-    const [props, setProps] = useState(initialUserProps);
-    useEffect(() => {
-        if (propsData == undefined)
-            return;
-        const nextProps = {};
-        for (const prop of propsData.props) {
-            nextProps[prop.prop] = prop.value;
-        }
-        setProps(nextProps);
-    }, [propsData]);
-    return props;
+const useUserProps = (instanceId) => {
+  const [allUserProps] = useAllUserProps();
+  const propsData = allUserProps[instanceId];
+  const props = useMemo(() => {
+    if (propsData == null)
+      return {};
+    const result = {};
+    for (const userProp of propsData.props) {
+      if (userProp.type !== "asset") {
+        result[userProp.prop] = userProp.value;
+      }
+    }
+    return result;
+  }, [propsData]);
+  return props;
+};
+export {
+  useUserProps
 };

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "yarn build:lib",
-    "build:args": "tsx ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
+    "dev": "build-package --watch",
+    "build": "build-package",
+    "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
     "typecheck": "tsc --noEmit",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
-    "build:lib": "rm -fr lib tsconfig.tsbuildinfo && tsc && yarn build:cjs",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "yarn typecheck && yarn lint && yarn test",
-    "prepublishOnly": "yarn checks && yarn build:lib",
+    "prepublishOnly": "yarn checks && yarn build",
     "storybook:run": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
     "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
@@ -33,18 +31,17 @@
     "@storybook/manager-webpack4": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.11",
-    "@types/fs-extra": "^9.0.13",
     "@types/node": "^17.0.21",
+    "@webstudio-is/generate-arg-types": "*",
     "@webstudio-is/jest-config": "*",
-    "@webstudio-is/prisma-client": "*",
+    "@webstudio-is/scripts": "*",
+    "@webstudio-is/design-tokens": "*",
     "babel-loader": "^8.2.5",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
     "react": "^17.0.2",
-    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
-    "tsup": "^6.1.3",
     "tsx": "^3.9.0",
     "typescript": "4.7.4",
     "zod": "^3.19.1"
@@ -59,12 +56,12 @@
     "zod": "^3.19.1"
   },
   "dependencies": {
-    "detect-font": "^0.1.5",
     "@webstudio-is/asset-uploader": "^*",
     "@webstudio-is/css-data": "*",
-    "@webstudio-is/fonts": "*",
     "@webstudio-is/icons": "*",
-    "@webstudio-is/jest-config": "*",
+    "@webstudio-is/image": "*",
+    "@webstudio-is/prisma-client": "*",
+    "detect-font": "^0.1.5",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",
@@ -74,20 +71,13 @@
     "import": "./lib/index.js",
     "require": "./lib/cjs/index.cjs"
   },
-  "types": "lib/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "lib/*",
-    "README.md",
+    "src/*",
     "!*.test.*"
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false,
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "format": "esm",
-    "outDir": "lib"
-  }
+  "sideEffects": false
 }

package/src/app/custom-components/image.tsx

@@ -0,0 +1,62 @@
+import {
+  forwardRef,
+  useMemo,
+  type ComponentProps,
+  type ElementRef,
+} from "react";
+import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
+import { Image as SdkImage } from "../../components/image";
+import { useUserPropsAsset } from "../../user-props/use-user-props-asset";
+import { idAttribute } from "../../tree/wrapper-component";
+import { getParams } from "../params";
+
+const defaultTag = "img";
+
+type Props = ComponentProps<typeof WebstudioImage> & { [idAttribute]: string };
+
+export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const componentId = props[idAttribute] as string;
+
+    const asset = useUserPropsAsset(componentId, "src");
+    const params = getParams();
+
+    const loader = useMemo(() => {
+      if (asset == null) return null;
+      if (asset.location === "REMOTE")
+        return loaders.cloudflareImageLoader(params);
+      return loaders.localImageLoader();
+    }, [asset, params]);
+
+    let src = props.src;
+
+    if (asset != null) {
+      src = asset.path;
+    }
+
+    if (asset == null || loader == null) {
+      return <SdkImage key={src} {...props} src={src} ref={ref} />;
+    }
+
+    return (
+      <WebstudioImage
+        /**
+         * `key` is needed to recreate the image in case of asset change in designer,
+         * this gives immediate feedback when an asset is changed.
+         * Also, it visually fixes image distortion when another asset has a seriously different  aspectRatio
+         * (we change aspectRatio CSS prop on asset change)
+         *
+         * In non-designer mode, key on images are usually also a good idea,
+         * prevents showing outdated images on route change.
+         **/
+        key={src}
+        {...props}
+        loader={loader}
+        src={src}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Image.displayName = "Image";

package/src/app/custom-components/index.ts

@@ -0,0 +1,17 @@
+import { Image } from "./image";
+import { Link } from "./link";
+import { RichTextLink } from "./rich-text-link";
+import { imageProps } from "@webstudio-is/image";
+import type { MetaProps } from "../../components/component-type";
+
+export const customComponents = {
+  Image,
+  Link,
+  RichTextLink,
+};
+
+export const customComponentsMeta = {
+  Image: {
+    props: imageProps as MetaProps,
+  },
+};

package/src/app/custom-components/link.tsx

@@ -0,0 +1,4 @@
+import { Link as BaseLink } from "../../components/link";
+import { wrapLinkComponent } from "./shared/remix-link";
+
+export const Link = wrapLinkComponent(BaseLink);

package/src/app/custom-components/rich-text-link.tsx

@@ -0,0 +1,4 @@
+import { RichTextLink as BaseLink } from "../../components/rich-text-link";
+import { wrapLinkComponent } from "./shared/remix-link";
+
+export const RichTextLink = wrapLinkComponent(BaseLink);

package/src/app/custom-components/shared/remix-link.tsx

@@ -0,0 +1,40 @@
+import { Link } from "@remix-run/react";
+import type {
+  ElementRef,
+  ComponentProps,
+  RefAttributes,
+  ForwardRefExoticComponent,
+} from "react";
+import { forwardRef } from "react";
+
+const isAbsoluteUrl = (href: string) => {
+  try {
+    new URL(href);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+
+type Ref = ElementRef<"a">;
+
+export const wrapLinkComponent = (
+  BaseLink: ForwardRefExoticComponent<Props & RefAttributes<Ref>>
+) => {
+  // We're not actually wrapping BaseLink (no way to wrap with Remix's Link),
+  // but this is still useful because we're making sure that props/ref types are compatible
+  const Component = forwardRef<Ref, Props>(({ href = "", ...props }, ref) =>
+    isAbsoluteUrl(href) ? (
+      <a {...props} href={href} ref={ref} />
+    ) : (
+      <Link {...props} to={href} ref={ref} />
+    )
+  );
+
+  // This is the only part that we use from BaseLink at runtime
+  Component.displayName = BaseLink.displayName;
+
+  return Component;
+};

package/src/app/handle-request.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "@remix-run/react";
+import type { EntryContext } from "@remix-run/node";
+
+export const 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}`, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+};

package/{lib/cjs/remix/index.d.ts → src/app/index.ts}

@@ -1,3 +1,3 @@
 export * from "./root";
 export * from "./handle-request.server";
-//# sourceMappingURL=index.d.ts.map
+export * from "./params";

package/src/app/params.ts

@@ -0,0 +1,13 @@
+export type Params = {
+  resizeOrigin?: string;
+};
+
+let params: Params | null = {};
+
+const emptyParams: Params = {};
+
+export const getParams = (): Params => params ?? emptyParams;
+
+export const setParams = (newParams: Params | null) => {
+  params = newParams;
+};

package/src/app/root.tsx

@@ -0,0 +1,27 @@
+import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
+import { DynamicLinks } from "remix-utils";
+
+/**
+ * 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 />
+        <DynamicLinks />
+        <Links />
+      </head>
+
+      <Outlet />
+    </html>
+  );
+};