@webstudio-is/react-sdk 0.9.0 → 0.10.1

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "yarn build:lib",
+    "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"
@@ -34,15 +32,16 @@
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.11",
     "@types/node": "^17.0.21",
-    "@webstudio-is/jest-config": "*",
     "@webstudio-is/generate-arg-types": "*",
+    "@webstudio-is/jest-config": "*",
+    "@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-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"
@@ -57,12 +56,12 @@
     "zod": "^3.19.1"
   },
   "dependencies": {
-    "detect-font": "^0.1.5",
     "@webstudio-is/asset-uploader": "^*",
     "@webstudio-is/css-data": "*",
     "@webstudio-is/icons": "*",
     "@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",
@@ -72,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,65 @@
+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/app/index.d.ts → src/app/index.ts}

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

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>
+  );
+};