fix(plugin): layers would not be marshalled correctly (#126)

* fix(plugin): layers would not be marshalled correctly * improve type
reearth · Nov 9, 2021 · 886302f · 886302f
1 parent 7c65d0c
commit 886302f
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 5 deletions.
diff --git a/src/components/atoms/Plugin/hooks.ts b/src/components/atoms/Plugin/hooks.ts
@@ -22,7 +22,7 @@ export type Options = {
 };
 
 // restrict any classes
-const defaultIsMarshalable = (obj: any): boolean => {
+export const defaultIsMarshalable = (obj: any): boolean => {
   return (
     ((typeof obj !== "object" || obj === null) && typeof obj !== "function") ||
     Array.isArray(obj) ||

diff --git a/src/components/atoms/Plugin/index.tsx b/src/components/atoms/Plugin/index.tsx
@@ -1,9 +1,10 @@
 import React, { IframeHTMLAttributes, ReactNode } from "react";
 
-import useHook, { IFrameAPI as IFrameAPIType } from "./hooks";
+import useHook, { IFrameAPI } from "./hooks";
 import IFrame from "./IFrame";
 
-export type IFrameAPI = IFrameAPIType;
+export { defaultIsMarshalable } from "./hooks";
+export type { IFrameAPI } from "./hooks";
 
 export type Props = {
   className?: string;

diff --git a/src/components/molecules/Visualizer/Layers/store.ts b/src/components/molecules/Visualizer/Layers/store.ts
@@ -65,6 +65,10 @@ export class LayerStore {
     return l;
   }
 
+  isLayer = (obj: any): obj is PluginLayer => {
+    return typeof obj === "object" && Object.getPrototypeOf(obj) === this.#prototype;
+  };
+
   findById = (id: string): PluginLayer | undefined => {
     return this.#pmap.get(id);
   };

diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -166,6 +166,9 @@ export function commonReearth({
       get overrideProperty() {
         return overrideLayerProperty;
       },
+      get isLayer() {
+        return layers().isLayer;
+      },
       get layers() {
         return layers().root.children ?? [];
       },

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -1,7 +1,8 @@
 import { Options } from "quickjs-emscripten-sync";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
-import { IFrameAPI } from "@reearth/components/atoms/Plugin";
+import type { IFrameAPI } from "@reearth/components/atoms/Plugin";
+import { defaultIsMarshalable } from "@reearth/components/atoms/Plugin";
 import events, { EventEmitter, Events, mergeEvents } from "@reearth/util/event";
 
 import { exposed } from "./api";
@@ -119,6 +120,18 @@ export function useAPI({
     event.current?.[1]("message", msg);
   }, []);
 
+  const isMarshalable = useCallback(
+    (target: any) => {
+      if (defaultIsMarshalable(target)) return true;
+      if (ctx?.reearth.layers.isLayer(target)) return true;
+      if (typeof ctx?.engine.isMarshalable === "function") {
+        return ctx.engine.isMarshalable(target);
+      }
+      return ctx?.engine.isMarshalable || false;
+    },
+    [ctx?.engine, ctx?.reearth.layers],
+  );
+
   const staticExposed = useMemo((): ((api: IFrameAPI) => GlobalThis) | undefined => {
     if (!ctx?.reearth) return;
     return ({ postMessage, render }: IFrameAPI) => {
@@ -157,7 +170,7 @@ export function useAPI({
 
   return {
     staticExposed,
-    isMarshalable: ctx?.engine.isMarshalable,
+    isMarshalable,
     onMessage,
     onPreInit,
     onDispose,

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -68,6 +68,7 @@ export type Layers = {
   readonly walk: <T>(
     fn: (layer: Layer, index: number, parents: Layer[]) => T | void,
   ) => T | undefined;
+  readonly isLayer: (obj: any) => obj is Layer;
   readonly overrideProperty: (id: string, property: any) => void;
 };