Implemented MVP for reading URL query params as strings in the root c…

…omponent (#428)
near · May 1, 2024 · 2576206 · 2576206
1 parent ace51a0
commit 2576206
Show file tree

Hide file tree

Showing 18 changed files with 135 additions and 19 deletions.
diff --git a/apps/sandbox/package.json b/apps/sandbox/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@bos-web-engine/common": "workspace:*",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/apps/sandbox/src/hooks/useQueryParams.ts b/apps/sandbox/src/hooks/useQueryParams.ts
@@ -0,0 +1,27 @@
+import { QueryParams } from '@bos-web-engine/common';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export function useQueryParams() {
+  const searchParams = useSearchParams();
+  const [queryParams, setQueryParams] = useState<QueryParams>({});
+
+  useEffect(() => {
+    /*
+      This pattern gives us a more stable reference for queryParams to reduce
+      re-renders. We only update our state when searchParams changes.
+    */
+
+    const params: QueryParams = {};
+
+    searchParams.forEach((value, key) => {
+      params[key] = value;
+    });
+
+    setQueryParams(params);
+  }, [searchParams]);
+
+  return {
+    queryParams,
+  };
+}
diff --git a/apps/sandbox/src/pages/index.tsx b/apps/sandbox/src/pages/index.tsx
@@ -1,11 +1,17 @@
 import { Sandbox } from '@bos-web-engine/sandbox';
 
+import { useQueryParams } from '@/hooks/useQueryParams';
 import s from '@/styles/home.module.css';
 
 export default function Home() {
+  const { queryParams } = useQueryParams();
+
   return (
     <div className={s.wrapper}>
-      <Sandbox height="calc(100vh - var(--gateway-header-height))" />
+      <Sandbox
+        height="calc(100vh - var(--gateway-header-height))"
+        queryParams={queryParams}
+      />
     </div>
   );
 }
diff --git a/apps/web/src/components/WebEngineVariants.tsx b/apps/web/src/components/WebEngineVariants.tsx
@@ -9,6 +9,7 @@ import { useHotReload } from '@bos-web-engine/hot-reload-client';
 import { AccountState } from '@near-wallet-selector/core';
 import { useCallback, useEffect, useState } from 'react';
 
+import { useQueryParams } from '@/hooks/useQueryParams';
 import { useComponentSourcesStore } from '@/stores/component-sources';
 import { useContainerMessagesStore } from '@/stores/container-messages';
 import { LocalFetchStatus, useDevToolsStore } from '@/stores/dev-tools';
@@ -25,6 +26,7 @@ export function WebEngine({
   rootComponentPath,
   flags,
 }: WebEnginePropsVariantProps) {
+  const { queryParams } = useQueryParams();
   const addSource = useComponentSourcesStore((store) => store.addSource);
   const addMessage = useContainerMessagesStore((store) => store.addMessage);
 
@@ -41,6 +43,7 @@ export function WebEngine({
       },
     },
     rootComponentPath,
+    queryParams,
   });
 
   return (
@@ -131,6 +134,7 @@ function PreparedLocalSandbox({
   flags,
   localComponents,
 }: WebEnginePropsVariantProps & { localComponents: any }) {
+  const { queryParams } = useQueryParams();
   const addSource = useComponentSourcesStore((store) => store.addSource);
   const addMessage = useContainerMessagesStore((store) => store.addMessage);
 
@@ -148,6 +152,7 @@ function PreparedLocalSandbox({
     },
     localComponents,
     rootComponentPath,
+    queryParams,
   });
 
   return (

diff --git a/apps/web/src/hooks/useQueryParams.ts b/apps/web/src/hooks/useQueryParams.ts
@@ -0,0 +1,27 @@
+import { QueryParams } from '@bos-web-engine/common';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export function useQueryParams() {
+  const searchParams = useSearchParams();
+  const [queryParams, setQueryParams] = useState<QueryParams>({});
+
+  useEffect(() => {
+    /*
+      This pattern gives us a more stable reference for queryParams to reduce
+      re-renders. We only update our state when searchParams changes.
+    */
+
+    const params: QueryParams = {};
+
+    searchParams.forEach((value, key) => {
+      params[key] = value;
+    });
+
+    setQueryParams(params);
+  }, [searchParams]);
+
+  return {
+    queryParams,
+  };
+}
diff --git a/packages/application/src/components/ComponentTree.tsx b/packages/application/src/components/ComponentTree.tsx
@@ -29,7 +29,14 @@ export default function ComponentTree({
           .map(
             ([
               componentId,
-              { trust, props, componentSource, parentId, moduleImports },
+              {
+                trust,
+                props,
+                componentSource,
+                parentId,
+                moduleImports,
+                queryParams,
+              },
             ]) => (
               /*
                 NOTE: Including currentUserAccountId as part of the key forces the entire tree 
@@ -48,7 +55,7 @@ export default function ComponentTree({
                   id={getIframeId(componentId)}
                   trust={trust}
                   scriptSrc={componentSource}
-                  componentProps={props}
+                  componentProps={{ ...queryParams, ...props }}
                   parentContainerId={parentId}
                   moduleImports={moduleImports}
                 />

diff --git a/packages/application/src/hooks/useComponents.ts b/packages/application/src/hooks/useComponents.ts
@@ -1,5 +1,5 @@
 import type { ComponentCompilerResponse } from '@bos-web-engine/compiler';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { UseComponentsParams } from '../types';
 
@@ -15,6 +15,7 @@ export function useComponents({
   compiler,
   config,
   rootComponentPath,
+  queryParams,
 }: UseComponentsParams) {
   const [components, setComponents] = useState<{ [key: string]: any }>({});
   const [isValidRootComponentPath, setIsValidRootComponentPath] =
@@ -42,8 +43,6 @@ export function useComponents({
     [components]
   );
 
-  const hooks = { ...config?.hooks } || {};
-
   useEffect(() => {
     setIsValidRootComponentPath(
       !!rootComponentPath &&
@@ -53,16 +52,22 @@ export function useComponents({
     );
   }, [rootComponentPath]);
 
-  hooks.componentRendered = (componentId: string) => {
-    config?.hooks?.componentRendered?.(componentId);
-    setComponents((currentComponents) => ({
-      ...currentComponents,
-      [componentId]: {
-        ...currentComponents[componentId],
-        renderCount: currentComponents?.[componentId]?.renderCount + 1 || 0,
-      },
-    }));
-  };
+  const hooks = useMemo(() => {
+    const result = { ...config?.hooks } || {};
+
+    result.componentRendered = (componentId: string) => {
+      config?.hooks?.componentRendered?.(componentId);
+      setComponents((currentComponents) => ({
+        ...currentComponents,
+        [componentId]: {
+          ...currentComponents[componentId],
+          renderCount: currentComponents?.[componentId]?.renderCount + 1 || 0,
+        },
+      }));
+    };
+
+    return result;
+  }, [config?.hooks]);
 
   useEffect(() => {
     if (!rootComponentPath || !isValidRootComponentPath || !compiler) {
@@ -78,6 +83,7 @@ export function useComponents({
         containerStyles,
         error: loadError,
         importedModules,
+        queryParams,
       } = data;
 
       if (loadError) {
@@ -96,6 +102,7 @@ export function useComponents({
         componentId,
         componentSource,
         moduleImports: importedModules,
+        queryParams,
       };
 
       if (!rootComponentSource && componentId === rootComponentPath) {
@@ -108,14 +115,20 @@ export function useComponents({
     compiler.postMessage({
       action: 'execute',
       componentId: rootComponentPath,
+      queryParams,
     });
   }, [
+    addComponent,
+    appendStylesheet,
+    components,
+    hooks,
     compiler,
     rootComponentPath,
     rootComponentSource,
     error,
     isValidRootComponentPath,
     config?.flags?.bosLoaderUrl,
+    queryParams,
   ]);
 
   return {

diff --git a/packages/application/src/hooks/useWebEngine.ts b/packages/application/src/hooks/useWebEngine.ts
@@ -7,6 +7,7 @@ import type { UseWebEngineParams } from '../types';
 export function useWebEngine({
   config,
   rootComponentPath,
+  queryParams,
 }: UseWebEngineParams) {
   const { appendStylesheet } = useCss();
   const compiler = useCompiler({ config });
@@ -16,6 +17,7 @@ export function useWebEngine({
       compiler,
       config,
       rootComponentPath,
+      queryParams,
     });
 
   useComponentTree({

diff --git a/packages/application/src/hooks/useWebEngineSandbox.ts b/packages/application/src/hooks/useWebEngineSandbox.ts
@@ -10,6 +10,7 @@ export function useWebEngineSandbox({
   localComponents,
   config,
   rootComponentPath,
+  queryParams,
 }: UseWebEngineSandboxParams) {
   const [nonce, setNonce] = useState('');
 
@@ -27,6 +28,7 @@ export function useWebEngineSandbox({
     compiler,
     config,
     rootComponentPath,
+    queryParams,
   });
 
   const { domRoots } = useComponentTree({

diff --git a/packages/application/src/types.ts b/packages/application/src/types.ts
@@ -5,6 +5,7 @@ import type {
   ComponentChildMetadata,
   ComponentTrust,
   MessagePayload,
+  QueryParams,
   SerializedArgs,
   SerializedNode,
 } from '@bos-web-engine/common';
@@ -119,6 +120,7 @@ export interface CompilerWorker extends Omit<Worker, 'postMessage'> {
 export interface UseWebEngineParams {
   config?: WebEngineConfiguration;
   rootComponentPath?: string;
+  queryParams?: QueryParams;
 }
 
 export interface UseComponentsParams extends UseWebEngineParams {

diff --git a/packages/common/src/types/index.ts b/packages/common/src/types/index.ts
@@ -6,3 +6,4 @@ export * from './plugins';
 export * from './render';
 export * from './serialization';
 export * from './trust';
+export * from './url';
diff --git a/packages/common/src/types/url.ts b/packages/common/src/types/url.ts
@@ -0,0 +1 @@
+export type QueryParams = Record<string, string | undefined>;
diff --git a/packages/compiler/src/compiler.ts b/packages/compiler/src/compiler.ts
@@ -265,7 +265,7 @@ export class ComponentCompiler {
    * Build the source for a container rooted at the target Component
    * @param componentId ID for the new container's root Component
    */
-  async compileComponent({ componentId }: CompilerExecuteAction) {
+  async compileComponent({ componentId, queryParams }: CompilerExecuteAction) {
     // wait on CSS initialization
     await this.cssParser.init();
 
@@ -299,6 +299,7 @@ export class ComponentCompiler {
           rawSource: moduleEntry.component,
           componentPath,
           importedModules: retrievedData.importedModules,
+          queryParams,
         });
 
         return;
@@ -354,6 +355,7 @@ export class ComponentCompiler {
       rawSource: moduleEntry.component,
       componentPath,
       importedModules,
+      queryParams,
     });
   }
 }
diff --git a/packages/compiler/src/types.ts b/packages/compiler/src/types.ts
@@ -1,4 +1,4 @@
-import type { BOSModule } from '@bos-web-engine/common';
+import type { BOSModule, QueryParams } from '@bos-web-engine/common';
 import type {
   BLOCK_HEIGHT_KEY,
   SOCIAL_COMPONENT_NAMESPACE,
@@ -12,6 +12,7 @@ export type ComponentCompilerRequest =
 export interface CompilerExecuteAction {
   action: 'execute';
   componentId: string;
+  queryParams?: QueryParams;
 }
 
 export type LocalComponentMap = { [path: string]: BOSModule };
@@ -35,6 +36,7 @@ export interface ComponentCompilerResponse {
   componentPath: string;
   error?: Error;
   importedModules: Map<string, string>;
+  queryParams?: QueryParams;
 }
 
 export type SendMessageCallback = (res: ComponentCompilerResponse) => void;

diff --git a/packages/sandbox/src/components/Preview.tsx b/packages/sandbox/src/components/Preview.tsx
@@ -21,6 +21,7 @@ type WebEngineLocalComponents = { [path: string]: BOSModule };
 
 export function Preview() {
   const { account } = useWallet();
+  const queryParams = useSandboxStore((store) => store.queryParams);
   const containerElement = useSandboxStore((store) => store.containerElement);
   const activeFilePath = useSandboxStore((store) => store.activeFilePath);
   const pinnedPreviewFilePath = useSandboxStore(
@@ -43,6 +44,7 @@ export function Preview() {
   const { components, nonce } = useWebEngineSandbox({
     localComponents,
     rootComponentPath,
+    queryParams,
   });
 
   useEffect(() => {

diff --git a/packages/sandbox/src/components/Sandbox.tsx b/packages/sandbox/src/components/Sandbox.tsx
@@ -1,3 +1,4 @@
+import { QueryParams } from '@bos-web-engine/common';
 import { useEffect, useRef, useState } from 'react';
 
 import { Layout } from './Layout';
@@ -8,13 +9,15 @@ import { useSourceAccountReplace } from '../hooks/useSourceAccountReplace';
 
 type Props = {
   height: string;
+  queryParams?: QueryParams;
 };
 
-export function Sandbox({ height }: Props) {
+export function Sandbox({ height, queryParams }: Props) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const setContainerElement = useSandboxStore(
     (store) => store.setContainerElement
   );
+  const setQueryParams = useSandboxStore((store) => store.setQueryParams);
   const [shouldRender, setShouldRender] = useState(false);
 
   usePublishedFilesSync();
@@ -34,6 +37,10 @@ export function Sandbox({ height }: Props) {
     }
   });
 
+  useEffect(() => {
+    setQueryParams(queryParams);
+  }, [setQueryParams, queryParams]);
+
   if (!shouldRender) return null;
 
   return (