refactor: add sdk runtime (#4417)

TrySound · web-flow · commit f75a837c9e31 · 2024-11-13T17:20:42.000+04:00
Similar to react-sdk/runtime added another entry point to sdk package
which includes all the stuff imported on published sites to reduce js
size.

./fixtures/webstudio-remix-netlify-functions/build/client: 392kB
(-176kB)
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -84,7 +84,7 @@ jobs:
             }
             const results = [
               await assertSize('./fixtures/ssg/dist/client', 308),
-              await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 568),
+              await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 396),
             ]
             for (const result of results) {
               if (result.passed) {
diff --git a/apps/builder/app/builder/features/settings-panel/resource-panel.tsx b/apps/builder/app/builder/features/settings-panel/resource-panel.tsx
@@ -17,8 +17,8 @@ import {
   generateObjectExpression,
   isLiteralExpression,
   parseObjectExpression,
-  sitemapResourceUrl,
 } from "@webstudio-is/sdk";
+import { sitemapResourceUrl } from "@webstudio-is/sdk/runtime";
 import {
   Box,
   Button,
diff --git a/apps/builder/app/routes/rest.resources-loader.ts b/apps/builder/app/routes/rest.resources-loader.ts
@@ -1,10 +1,7 @@
 import { z } from "zod";
 import { json, type ActionFunctionArgs } from "@remix-run/server-runtime";
-import {
-  loadResource,
-  isLocalResource,
-  ResourceRequest,
-} from "@webstudio-is/sdk";
+import { ResourceRequest } from "@webstudio-is/sdk";
+import { isLocalResource, loadResource } from "@webstudio-is/sdk/runtime";
 import { loader as siteMapLoader } from "../shared/$resources/sitemap.xml.server";
 import { preventCrossOriginCookie } from "~/services/no-cross-origin-cookie";
 import { checkCsrf } from "~/services/csrf-session.server";
diff --git a/apps/builder/app/shared/nano-states/props.ts b/apps/builder/app/shared/nano-states/props.ts
@@ -9,12 +9,14 @@ import type {
   ImageAsset,
 } from "@webstudio-is/sdk";
 import {
-  createJsonStringifyProxy,
   decodeDataSourceVariable,
   encodeDataSourceVariable,
-  isPlainObject,
   transpileExpression,
 } from "@webstudio-is/sdk";
+import {
+  createJsonStringifyProxy,
+  isPlainObject,
+} from "@webstudio-is/sdk/runtime";
 import {
   collectionComponent,
   normalizeProps,
diff --git a/fixtures/ssg-netlify-by-project-id/pages/index/+data.ts b/fixtures/ssg-netlify-by-project-id/pages/index/+data.ts
@@ -1,6 +1,6 @@
 import type { PageContextServer } from "vike/types";
 import { redirect } from "vike/abort";
-import { loadResources } from "@webstudio-is/sdk";
+import { loadResources } from "@webstudio-is/sdk/runtime";
 import {
   getPageMeta,
   getResources,
diff --git a/fixtures/ssg/pages/another-page/+data.ts b/fixtures/ssg/pages/another-page/+data.ts
@@ -1,6 +1,6 @@
 import type { PageContextServer } from "vike/types";
 import { redirect } from "vike/abort";
-import { loadResources } from "@webstudio-is/sdk";
+import { loadResources } from "@webstudio-is/sdk/runtime";
 import {
   getPageMeta,
   getResources,
diff --git a/fixtures/ssg/pages/index/+data.ts b/fixtures/ssg/pages/index/+data.ts
@@ -1,6 +1,6 @@
 import type { PageContextServer } from "vike/types";
 import { redirect } from "vike/abort";
-import { loadResources } from "@webstudio-is/sdk";
+import { loadResources } from "@webstudio-is/sdk/runtime";
 import {
   getPageMeta,
   getResources,
diff --git a/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/[another-page]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[sitemap.xml]._index.tsx
@@ -1,6 +1,6 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Page } from "../__generated__/[sitemap.xml]._index";
 import {
diff --git a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-custom-template/app/routes/_index.tsx b/fixtures/webstudio-custom-template/app/routes/_index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/[another-page]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/routes/_index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/[another-page]._index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/[another-page]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx b/fixtures/webstudio-remix-netlify-functions/app/routes/_index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[expressions]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[sitemap.xml]._index.tsx
@@ -1,6 +1,6 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Page } from "../__generated__/[sitemap.xml]._index";
 import {
diff --git a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx b/fixtures/webstudio-remix-vercel/app/routes/_index.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/packages/cli/templates/defaults/app/route-templates/html.tsx b/packages/cli/templates/defaults/app/route-templates/html.tsx
@@ -15,7 +15,7 @@ import {
   loadResources,
   formIdFieldName,
   formBotFieldName,
-} from "@webstudio-is/sdk";
+} from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
diff --git a/packages/cli/templates/defaults/app/route-templates/xml.tsx b/packages/cli/templates/defaults/app/route-templates/xml.tsx
@@ -1,6 +1,6 @@
 import { renderToString } from "react-dom/server";
 import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
-import { isLocalResource, loadResources } from "@webstudio-is/sdk";
+import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Page } from "__CLIENT__";
 import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
diff --git a/packages/cli/templates/ssg/app/route-templates/html/+data.ts b/packages/cli/templates/ssg/app/route-templates/html/+data.ts
@@ -1,6 +1,6 @@
 import type { PageContextServer } from "vike/types";
 import { redirect } from "vike/abort";
-import { loadResources } from "@webstudio-is/sdk";
+import { loadResources } from "@webstudio-is/sdk/runtime";
 import { getPageMeta, getResources } from "__SERVER__";
 
 export const data = async (pageContext: PageContextServer) => {
diff --git a/packages/react-sdk/src/context.tsx b/packages/react-sdk/src/context.tsx
@@ -1,6 +1,9 @@
 import { createContext, useContext, useMemo } from "react";
 import type { ImageLoader } from "@webstudio-is/image";
-import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
+import {
+  createJsonStringifyProxy,
+  isPlainObject,
+} from "@webstudio-is/sdk/runtime";
 
 export type Params = {
   /**
diff --git a/packages/react-sdk/src/variable-state.tsx b/packages/react-sdk/src/variable-state.tsx
@@ -1,5 +1,8 @@
-import { createJsonStringifyProxy, isPlainObject } from "@webstudio-is/sdk";
 import { useState, useMemo, type Dispatch, type SetStateAction } from "react";
+import {
+  createJsonStringifyProxy,
+  isPlainObject,
+} from "@webstudio-is/sdk/runtime";
 
 export const useVariableState = <S,>(
   initialState: S | (() => S)
diff --git a/packages/sdk-components-react-remix/src/webhook-form.tsx b/packages/sdk-components-react-remix/src/webhook-form.tsx
@@ -6,7 +6,7 @@ import {
   useEffect,
 } from "react";
 import { useFetcher, type Fetcher, type FormProps } from "@remix-run/react";
-import { formIdFieldName, formBotFieldName } from "@webstudio-is/sdk";
+import { formIdFieldName, formBotFieldName } from "@webstudio-is/sdk/runtime";
 
 export const defaultTag = "form";
 
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -12,6 +12,11 @@
       "types": "./lib/types/index.d.ts",
       "import": "./lib/index.js"
     },
+    "./runtime": {
+      "webstudio": "./src/runtime.ts",
+      "types": "./lib/types/runtime.d.ts",
+      "import": "./lib/runtime.js"
+    },
     "./normalize.css": {
       "webstudio": "./src/__generated__/normalize.css.ts",
       "types": "./lib/types/__generated__/normalize.css.d.ts",
@@ -30,7 +35,7 @@
     "typecheck": "tsc",
     "test": "vitest run",
     "build:normalize.css": "tsx --conditions=webstudio ./scripts/normalize.css.ts && prettier --write src/__generated__/normalize.css.ts",
-    "build": "rm -rf lib && esbuild src/index.ts src/__generated__/normalize.css.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "rm -rf lib && esbuild src/index.ts src/runtime.ts src/__generated__/normalize.css.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json"
   },
   "dependencies": {
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
@@ -14,10 +14,7 @@ export * from "./schema/webstudio";
 export * from "./instances-utils";
 export * from "./page-utils";
 export * from "./scope";
-export * from "./resource-loader";
 export * from "./expression";
 export * from "./resources-generator";
 export * from "./page-meta-generator";
 export * from "./url-pattern";
-export * from "./form-fields";
-export * from "./to-string";
diff --git a/packages/sdk/src/resource-loader.ts b/packages/sdk/src/resource-loader.ts
@@ -1,5 +1,22 @@
 import type { ResourceRequest } from "./schema/resources";
 
+const LOCAL_RESOURCE_PREFIX = "$resources";
+
+/**
+ * Prevents fetch cycles by prefixing local resources.
+ */
+export const isLocalResource = (pathname: string, resourceName?: string) => {
+  const segments = pathname.split("/").filter(Boolean);
+
+  if (resourceName === undefined) {
+    return segments[0] === LOCAL_RESOURCE_PREFIX;
+  }
+
+  return segments.join("/") === `${LOCAL_RESOURCE_PREFIX}/${resourceName}`;
+};
+
+export const sitemapResourceUrl = `/${LOCAL_RESOURCE_PREFIX}/sitemap.xml`;
+
 export const loadResource = async (
   customFetch: typeof fetch,
   resourceRequest: ResourceRequest
diff --git a/packages/sdk/src/runtime.ts b/packages/sdk/src/runtime.ts
@@ -0,0 +1,3 @@
+export * from "./resource-loader";
+export * from "./to-string";
+export * from "./form-fields";
diff --git a/packages/sdk/src/schema/resources.ts b/packages/sdk/src/schema/resources.ts
@@ -44,20 +44,3 @@ export type ResourceRequest = z.infer<typeof ResourceRequest>;
 export const Resources = z.map(ResourceId, Resource);
 
 export type Resources = z.infer<typeof Resources>;
-
-const LOCAL_RESOURCE_PREFIX = "$resources";
-
-/**
- * Prevents fetch cycles by prefixing local resources.
- */
-export const isLocalResource = (pathname: string, resourceName?: string) => {
-  const segments = pathname.split("/").filter(Boolean);
-
-  if (resourceName === undefined) {
-    return segments[0] === LOCAL_RESOURCE_PREFIX;
-  }
-
-  return segments.join("/") === `${LOCAL_RESOURCE_PREFIX}/${resourceName}`;
-};
-
-export const sitemapResourceUrl = `/${LOCAL_RESOURCE_PREFIX}/sitemap.xml`;

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ jobs:`
`84`	`84`	`}`
`85`	`85`	`const results = [`
`86`	`86`	`await assertSize('./fixtures/ssg/dist/client', 308),`
`87`		`- await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 568),`
	`87`	`+ await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 396),`
`88`	`88`	`]`
`89`	`89`	`for (const result of results) {`
`90`	`90`	`if (result.passed) {`