@webstudio-is/react-sdk 0.56.0 → 0.57.0

package/lib/app/custom-components/image.js

@@ -17,14 +17,14 @@ const Image = forwardRef(
         return null;
       }
       if (asset.location === "REMOTE") {
-        return loaders.cloudflareImageLoader(params);
+        return loaders.cloudflareImageLoader({
+          resizeOrigin: params.resizeOrigin,
+          cdnUrl: params.assetBaseUrl
+        });
       }
-      return loaders.localImageLoader(params);
+      return loaders.localImageLoader({ publicPath: params.assetBaseUrl });
     }, [asset, params]);
-    let src = props.src;
-    if (asset != null) {
-      src = asset.path;
-    }
+    const src = asset?.name ?? props.src;
     if (asset == null || loader == null) {
       return /* @__PURE__ */ jsx(SdkImage, { ...props, src, ref }, src);
     }

package/lib/app/custom-components/shared/remix-link.js

@@ -5,10 +5,10 @@ import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 const wrapLinkComponent = (BaseLink) => {
   const Component = forwardRef((props, ref) => {
     const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-    if (typeof href === "string" || href === void 0) {
-      return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
+    if (href?.type === "page") {
+      return /* @__PURE__ */ jsx(RemixLink, { ...props, to: href.page.path, ref });
     }
-    return /* @__PURE__ */ jsx(RemixLink, { ...props, to: href.path, ref });
+    return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/app/params.js

@@ -1,5 +1,7 @@
-let params = {};
-const emptyParams = {};
+let params;
+const emptyParams = {
+  assetBaseUrl: "/"
+};
 const getParams = () => params ?? emptyParams;
 const setParams = (newParams) => {
   params = newParams;

package/lib/cjs/app/custom-components/image.js

@@ -37,14 +37,14 @@ const Image = (0, import_react.forwardRef)(
         return null;
       }
       if (asset.location === "REMOTE") {
-        return import_image.loaders.cloudflareImageLoader(params);
+        return import_image.loaders.cloudflareImageLoader({
+          resizeOrigin: params.resizeOrigin,
+          cdnUrl: params.assetBaseUrl
+        });
       }
-      return import_image.loaders.localImageLoader(params);
+      return import_image.loaders.localImageLoader({ publicPath: params.assetBaseUrl });
     }, [asset, params]);
-    let src = props.src;
-    if (asset != null) {
-      src = asset.path;
-    }
+    const src = asset?.name ?? props.src;
     if (asset == null || loader == null) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, { ...props, src, ref }, src);
     }

package/lib/cjs/app/custom-components/shared/remix-link.js

@@ -28,10 +28,10 @@ var import_props = require("../../../props");
 const wrapLinkComponent = (BaseLink) => {
   const Component = (0, import_react2.forwardRef)((props, ref) => {
     const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
-    if (typeof href === "string" || href === void 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
+    if (href?.type === "page") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href.page.path, ref });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href.path, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/cjs/app/params.js

@@ -22,8 +22,10 @@ __export(params_exports, {
   setParams: () => setParams
 });
 module.exports = __toCommonJS(params_exports);
-let params = {};
-const emptyParams = {};
+let params;
+const emptyParams = {
+  assetBaseUrl: "/"
+};
 const getParams = () => params ?? emptyParams;
 const setParams = (newParams) => {
   params = newParams;

package/lib/cjs/components/link.js

@@ -25,16 +25,22 @@ module.exports = __toCommonJS(link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_props = require("../props");
+var import_params = require("../app/params");
 const defaultTag = "a";
 const Link = (0, import_react.forwardRef)((props, ref) => {
   const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "a",
-    {
-      ...props,
-      href: typeof href === "string" ? href : href?.path,
-      ref
-    }
-  );
+  const { assetBaseUrl } = (0, import_params.getParams)();
+  let url;
+  switch (href?.type) {
+    case "page":
+      url = href.page.path;
+      break;
+    case "asset":
+      url = `${assetBaseUrl}${href.asset.name}`;
+      break;
+    case "string":
+      url = href.url;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href: url, ref });
 });
 Link.displayName = "Link";

package/lib/cjs/css/css.js

@@ -34,8 +34,8 @@ const createImageValueTransformer = (assets, options) => (styleValue) => {
     if (asset === void 0) {
       return { type: "keyword", value: "none" };
     }
-    const { publicPath = "/" } = options;
-    const url = asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+    const { assetBaseUrl } = options;
+    const url = `${assetBaseUrl}${asset.name}`;
     return {
       type: "image",
       value: {
@@ -54,7 +54,10 @@ const generateCssText = (data, options) => {
   const styles = new Map(data.styles);
   const styleSourceSelections = new Map(data.styleSourceSelections);
   const engine = (0, import_css_engine.createCssEngine)({ name: "ssr" });
-  (0, import_global_rules.addGlobalRules)(engine, { assets });
+  (0, import_global_rules.addGlobalRules)(engine, {
+    assets,
+    assetBaseUrl: options.assetBaseUrl
+  });
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
@@ -73,9 +76,9 @@ const generateCssText = (data, options) => {
     }
   }
   const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, style } of styleRules) {
+  for (const { breakpointId, instanceId, state, style } of styleRules) {
     engine.addStyleRule(
-      `[${import_tree.idAttribute}="${instanceId}"]`,
+      `[${import_tree.idAttribute}="${instanceId}"]${state ?? ""}`,
       {
         breakpoint: breakpointId,
         style

package/lib/cjs/css/global-rules.js

@@ -22,15 +22,15 @@ __export(global_rules_exports, {
 });
 module.exports = __toCommonJS(global_rules_exports);
 var import_fonts = require("@webstudio-is/fonts");
-const addGlobalRules = (engine, { assets }) => {
+const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
   engine.addPlaintextRule("html {margin: 0; height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
-    if (asset && import_fonts.FONT_FORMATS.has(asset.format)) {
+    if (asset?.type === "font") {
       fontAssets.push(asset);
     }
   }
-  const fontFaces = (0, import_fonts.getFontFaces)(fontAssets);
+  const fontFaces = (0, import_fonts.getFontFaces)(fontAssets, { assetBaseUrl });
   for (const fontFace of fontFaces) {
     engine.addFontFaceRule(fontFace);
   }

package/lib/cjs/css/style-rules.js

@@ -43,15 +43,22 @@ const getStyleRules = (styles, styleSourceSelections) => {
       if (styleSourceStyles === void 0) {
         continue;
       }
-      for (const { breakpointId, property, value } of styleSourceStyles) {
-        let styleRule = styleRuleByBreakpointId.get(breakpointId);
+      for (const {
+        breakpointId,
+        state,
+        property,
+        value
+      } of styleSourceStyles) {
+        const key = `${breakpointId}:${state ?? ""}`;
+        let styleRule = styleRuleByBreakpointId.get(key);
         if (styleRule === void 0) {
           styleRule = {
             instanceId,
             breakpointId,
+            state,
             style: {}
           };
-          styleRuleByBreakpointId.set(breakpointId, styleRule);
+          styleRuleByBreakpointId.set(key, styleRule);
         }
         styleRule.style[property] = value;
       }

package/lib/cjs/props.js

@@ -79,8 +79,12 @@ const usePropAsset = (instanceId, name) => {
   const asset = (0, import_react2.useStore)(assetStore);
   return asset;
 };
-const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
-  const instanceProps = propsByInstanceId.get(instanceId);
+const resolveUrlProp = (instanceId, name, {
+  props,
+  pages,
+  assets
+}) => {
+  const instanceProps = props.get(instanceId);
   if (instanceProps === void 0) {
     return;
   }
@@ -89,27 +93,32 @@ const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
       continue;
     }
     if (prop.type === "page") {
-      return pages.get(prop.value);
+      const page = pages.get(prop.value);
+      return page && { type: "page", page };
     }
     if (prop.type === "string") {
       for (const page of pages.values()) {
         if (page.path === prop.value) {
-          return page;
+          return { type: "page", page };
         }
       }
-      return prop.value;
+      return { type: "string", url: prop.value };
+    }
+    if (prop.type === "asset") {
+      const asset = assets.get(prop.value);
+      return asset && { type: "asset", asset };
     }
     return;
   }
 };
 const usePropUrl = (instanceId, name) => {
-  const { propsByInstanceIdStore, pagesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const { propsByInstanceIdStore, pagesStore, assetsStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
   const pageStore = (0, import_react.useMemo)(
     () => (0, import_nanostores.computed)(
-      [propsByInstanceIdStore, pagesStore],
-      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+      [propsByInstanceIdStore, pagesStore, assetsStore],
+      (props, pages, assets) => resolveUrlProp(instanceId, name, { props, pages, assets })
     ),
-    [propsByInstanceIdStore, pagesStore, instanceId, name]
+    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
   );
   return (0, import_react2.useStore)(pageStore);
 };

package/lib/cjs/pubsub/raf-queue.js

@@ -21,15 +21,12 @@ __export(raf_queue_exports, {
   batchUpdate: () => batchUpdate
 });
 module.exports = __toCommonJS(raf_queue_exports);
-var import_react_dom = require("react-dom");
 let handle;
 let updateQueue = [];
 const processUpdates = (updates) => {
-  (0, import_react_dom.unstable_batchedUpdates)(() => {
-    for (const update of updates) {
-      update();
-    }
-  });
+  for (const update of updates) {
+    update();
+  }
 };
 const batchUpdate = (update) => {
   updateQueue.push(update);

package/lib/cjs/tree/root.js

@@ -34,7 +34,7 @@ const InstanceRoot = ({
   customComponents = import_custom_components.customComponents,
   getComponent
 }) => {
-  (0, import_params.setParams)(data.params ?? null);
+  (0, import_params.setParams)(data.params);
   (0, import_components.registerComponents)(customComponents);
   return (0, import_create_elements_tree.createElementsTree)({
     instances: new Map(data.build.instances),

package/lib/components/link.js

@@ -1,17 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+import { getParams } from "../app/params";
 const defaultTag = "a";
 const Link = forwardRef((props, ref) => {
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  return /* @__PURE__ */ jsx(
-    "a",
-    {
-      ...props,
-      href: typeof href === "string" ? href : href?.path,
-      ref
-    }
-  );
+  const { assetBaseUrl } = getParams();
+  let url;
+  switch (href?.type) {
+    case "page":
+      url = href.page.path;
+      break;
+    case "asset":
+      url = `${assetBaseUrl}${href.asset.name}`;
+      break;
+    case "string":
+      url = href.url;
+  }
+  return /* @__PURE__ */ jsx("a", { ...props, href: url, ref });
 });
 Link.displayName = "Link";
 export {

package/lib/css/css.js

@@ -10,8 +10,8 @@ const createImageValueTransformer = (assets, options) => (styleValue) => {
     if (asset === void 0) {
       return { type: "keyword", value: "none" };
     }
-    const { publicPath = "/" } = options;
-    const url = asset.location === "REMOTE" ? asset.path : `${publicPath}${asset.name}`;
+    const { assetBaseUrl } = options;
+    const url = `${assetBaseUrl}${asset.name}`;
     return {
       type: "image",
       value: {
@@ -30,7 +30,10 @@ const generateCssText = (data, options) => {
   const styles = new Map(data.styles);
   const styleSourceSelections = new Map(data.styleSourceSelections);
   const engine = createCssEngine({ name: "ssr" });
-  addGlobalRules(engine, { assets });
+  addGlobalRules(engine, {
+    assets,
+    assetBaseUrl: options.assetBaseUrl
+  });
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
@@ -49,9 +52,9 @@ const generateCssText = (data, options) => {
     }
   }
   const styleRules = getStyleRules(styles, styleSourceSelections);
-  for (const { breakpointId, instanceId, style } of styleRules) {
+  for (const { breakpointId, instanceId, state, style } of styleRules) {
     engine.addStyleRule(
-      `[${idAttribute}="${instanceId}"]`,
+      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
       {
         breakpoint: breakpointId,
         style

package/lib/css/global-rules.js

@@ -1,16 +1,13 @@
-import {
-  FONT_FORMATS,
-  getFontFaces
-} from "@webstudio-is/fonts";
-const addGlobalRules = (engine, { assets }) => {
+import { getFontFaces } from "@webstudio-is/fonts";
+const addGlobalRules = (engine, { assets, assetBaseUrl }) => {
   engine.addPlaintextRule("html {margin: 0; height: 100%}");
   const fontAssets = [];
   for (const asset of assets.values()) {
-    if (asset && FONT_FORMATS.has(asset.format)) {
+    if (asset?.type === "font") {
       fontAssets.push(asset);
     }
   }
-  const fontFaces = getFontFaces(fontAssets);
+  const fontFaces = getFontFaces(fontAssets, { assetBaseUrl });
   for (const fontFace of fontFaces) {
     engine.addFontFaceRule(fontFace);
   }

package/lib/css/style-rules.js

@@ -20,15 +20,22 @@ const getStyleRules = (styles, styleSourceSelections) => {
       if (styleSourceStyles === void 0) {
         continue;
       }
-      for (const { breakpointId, property, value } of styleSourceStyles) {
-        let styleRule = styleRuleByBreakpointId.get(breakpointId);
+      for (const {
+        breakpointId,
+        state,
+        property,
+        value
+      } of styleSourceStyles) {
+        const key = `${breakpointId}:${state ?? ""}`;
+        let styleRule = styleRuleByBreakpointId.get(key);
         if (styleRule === void 0) {
           styleRule = {
             instanceId,
             breakpointId,
+            state,
             style: {}
           };
-          styleRuleByBreakpointId.set(breakpointId, styleRule);
+          styleRuleByBreakpointId.set(key, styleRule);
         }
         styleRule.style[property] = value;
       }

package/lib/props.js

@@ -51,8 +51,12 @@ const usePropAsset = (instanceId, name) => {
   const asset = useStore(assetStore);
   return asset;
 };
-const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
-  const instanceProps = propsByInstanceId.get(instanceId);
+const resolveUrlProp = (instanceId, name, {
+  props,
+  pages,
+  assets
+}) => {
+  const instanceProps = props.get(instanceId);
   if (instanceProps === void 0) {
     return;
   }
@@ -61,27 +65,32 @@ const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
       continue;
     }
     if (prop.type === "page") {
-      return pages.get(prop.value);
+      const page = pages.get(prop.value);
+      return page && { type: "page", page };
     }
     if (prop.type === "string") {
       for (const page of pages.values()) {
         if (page.path === prop.value) {
-          return page;
+          return { type: "page", page };
         }
       }
-      return prop.value;
+      return { type: "string", url: prop.value };
+    }
+    if (prop.type === "asset") {
+      const asset = assets.get(prop.value);
+      return asset && { type: "asset", asset };
     }
     return;
   }
 };
 const usePropUrl = (instanceId, name) => {
-  const { propsByInstanceIdStore, pagesStore } = useContext(ReactSdkContext);
+  const { propsByInstanceIdStore, pagesStore, assetsStore } = useContext(ReactSdkContext);
   const pageStore = useMemo(
     () => computed(
-      [propsByInstanceIdStore, pagesStore],
-      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+      [propsByInstanceIdStore, pagesStore, assetsStore],
+      (props, pages, assets) => resolveUrlProp(instanceId, name, { props, pages, assets })
     ),
-    [propsByInstanceIdStore, pagesStore, instanceId, name]
+    [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
   );
   return useStore(pageStore);
 };

package/lib/pubsub/raf-queue.js

@@ -1,12 +1,9 @@
-import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
 let handle;
 let updateQueue = [];
 const processUpdates = (updates) => {
-  batchedUpdates(() => {
-    for (const update of updates) {
-      update();
-    }
-  });
+  for (const update of updates) {
+    update();
+  }
 };
 const batchUpdate = (update) => {
   updateQueue.push(update);

package/lib/tree/root.js

@@ -11,7 +11,7 @@ const InstanceRoot = ({
   customComponents = defaultCustomComponents,
   getComponent
 }) => {
-  setParams(data.params ?? null);
+  setParams(data.params);
   registerComponents(customComponents);
   return createElementsTree({
     instances: new Map(data.build.instances),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -13,23 +13,23 @@
     "@remix-run/server-runtime": "1.15.0",
     "@storybook/react": "^6.5.16",
     "@types/node": "^18.11.18",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.35",
+    "@types/react-dom": "^18.0.11",
     "jest": "^29.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "5.0.3",
     "zod": "^3.19.1",
-    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/jest-config": "^1.0.4",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.4"
   },
   "peerDependencies": {
     "@remix-run/react": "1.9.0",
     "@remix-run/server-runtime": "1.9.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
@@ -38,16 +38,16 @@
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.56.0",
-    "@webstudio-is/css-data": "^0.56.0",
-    "@webstudio-is/css-engine": "^0.56.0",
-    "@webstudio-is/css-vars": "^0.56.0",
-    "@webstudio-is/fonts": "^0.56.0",
-    "@webstudio-is/generate-arg-types": "^0.56.0",
-    "@webstudio-is/icons": "^0.56.0",
-    "@webstudio-is/image": "^0.56.0",
-    "@webstudio-is/prisma-client": "^0.56.0",
-    "@webstudio-is/project-build": "^0.56.0"
+    "@webstudio-is/asset-uploader": "^0.57.0",
+    "@webstudio-is/css-data": "^0.57.0",
+    "@webstudio-is/css-engine": "^0.57.0",
+    "@webstudio-is/css-vars": "^0.57.0",
+    "@webstudio-is/fonts": "^0.57.0",
+    "@webstudio-is/generate-arg-types": "^0.57.0",
+    "@webstudio-is/icons": "^0.57.0",
+    "@webstudio-is/prisma-client": "^0.57.0",
+    "@webstudio-is/image": "^0.57.0",
+    "@webstudio-is/project-build": "^0.57.0"
   },
   "exports": {
     ".": {
@@ -69,8 +69,8 @@
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
-    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
-    "typecheck": "tsc --noEmit",
+    "dts": "tsc",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "pnpm typecheck && pnpm lint && pnpm test",

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

@@ -23,16 +23,15 @@ export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
         return null;
       }
       if (asset.location === "REMOTE") {
-        return loaders.cloudflareImageLoader(params);
+        return loaders.cloudflareImageLoader({
+          resizeOrigin: params.resizeOrigin,
+          cdnUrl: params.assetBaseUrl,
+        });
       }
-      return loaders.localImageLoader(params);
+      return loaders.localImageLoader({ publicPath: params.assetBaseUrl });
     }, [asset, params]);
 
-    let src = props.src;
-
-    if (asset != null) {
-      src = asset.path;
-    }
+    const src = asset?.name ?? props.src;
 
     if (asset == null || loader == null) {
       return <SdkImage key={src} {...props} src={src} ref={ref} />;

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

@@ -11,11 +11,11 @@ export const wrapLinkComponent = (BaseLink: LinkComponent) => {
   const Component: LinkComponent = forwardRef((props: LinkProps, ref) => {
     const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
 
-    if (typeof href === "string" || href === undefined) {
-      return <BaseLink {...props} ref={ref} />;
+    if (href?.type === "page") {
+      return <RemixLink {...props} to={href.page.path} ref={ref} />;
     }
 
-    return <RemixLink {...props} to={href.path} ref={ref} />;
+    return <BaseLink {...props} ref={ref} />;
   });
 
   Component.displayName = BaseLink.displayName;

package/src/app/params.ts

@@ -1,14 +1,16 @@
 export type Params = {
   resizeOrigin?: string;
-  publicPath?: string;
+  assetBaseUrl: string;
 };
 
-let params: Params | null = {};
+let params: undefined | Params;
 
-const emptyParams: Params = {};
+const emptyParams: Params = {
+  assetBaseUrl: "/",
+};
 
 export const getParams = (): Params => params ?? emptyParams;
 
-export const setParams = (newParams: Params | null) => {
+export const setParams = (newParams: undefined | Params) => {
   params = newParams;
 };