chore(web): fix unsafe builtin widget logic to work well on published…

… page (#845)
reearth · Nov 30, 2023 · 1b1e83d · 1b1e83d
1 parent c250a27
commit 1b1e83d
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 14 deletions.
diff --git a/web/src/beta/lib/core/Crust/Infobox/Block/builtin/index.ts b/web/src/beta/lib/core/Crust/Infobox/Block/builtin/index.ts
@@ -1,5 +1,7 @@
 import { merge } from "lodash-es";
 
+import { config } from "@reearth/services/config";
+
 import type { Component } from "..";
 
 import DataList from "./DataList";
@@ -38,10 +40,20 @@ const reearthBuiltin: BuiltinBlocks<Component> = {
   [HTML_BUILTIN_BLOCK_ID]: HTML,
 };
 
-const builtin = merge({}, reearthBuiltin, unsafeBuiltinBlocks);
+let cachedBuiltin: (ReEarthBuiltinBlocks<Component> & UnsafeBuiltinBlocks<Component>) | undefined =
+  undefined;
+const builtin = () => {
+  if (cachedBuiltin) return cachedBuiltin;
+  if (config()) {
+    cachedBuiltin = merge({}, reearthBuiltin, unsafeBuiltinBlocks());
+    return cachedBuiltin;
+  } else {
+    return reearthBuiltin;
+  }
+};
 
 export const isBuiltinBlock = (id: string): id is keyof BuiltinBlocks => {
-  return !!builtin[id as keyof BuiltinBlocks];
+  return !!builtin()[id as keyof BuiltinBlocks];
 };
 
 export default builtin;
diff --git a/web/src/beta/lib/core/Crust/Infobox/Block/builtin/unsafeBlocks.ts b/web/src/beta/lib/core/Crust/Infobox/Block/builtin/unsafeBlocks.ts
@@ -7,7 +7,7 @@ import { Component } from "..";
 
 export type UnsafeBuiltinBlocks<T = unknown> = Record<string, T>;
 
-export const unsafeBuiltinBlocks = processUnsafeBuiltinBlocks(config()?.unsafeBuiltinPlugins);
+export const unsafeBuiltinBlocks = () => processUnsafeBuiltinBlocks(config()?.unsafeBuiltinPlugins);
 
 function processUnsafeBuiltinBlocks(plugin?: UnsafeBuiltinPlugin[]) {
   if (!plugin) return;

diff --git a/web/src/beta/lib/core/Crust/Infobox/Block/index.tsx b/web/src/beta/lib/core/Crust/Infobox/Block/index.tsx
@@ -38,7 +38,7 @@ export default function BlockComponent<P = any>({
   ...props
 }: Props<P>): JSX.Element | null {
   const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
-  const Builtin = isBuiltinBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
+  const Builtin = isBuiltinBlock(builtinBlockId) ? builtin()[builtinBlockId] : undefined;
 
   return Builtin ? (
     <Builtin {...props} />

diff --git a/web/src/beta/lib/core/Crust/Widgets/Widget/builtin/index.ts b/web/src/beta/lib/core/Crust/Widgets/Widget/builtin/index.ts
@@ -4,6 +4,7 @@ import {
   BUTTON_BUILTIN_WIDGET_ID,
   NAVIGATOR_BUILTIN_WIDGET_ID,
 } from "@reearth/services/api/widgetsApi/utils";
+import { config } from "@reearth/services/config";
 
 import Button from "./Button";
 import Navigator from "./Navigator";
@@ -32,23 +33,34 @@ const REEARTH_BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
 const BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> =
   REEARTH_BUILTIN_WIDGET_OPTIONS;
 
-Object.keys(unsafeBuiltinWidgets ?? {}).map(uw => {
-  BUILTIN_WIDGET_OPTIONS[uw] = {};
-});
-
 const reearthBuiltin: BuiltinWidgets<Component> = {
   [BUTTON_BUILTIN_WIDGET_ID]: Button,
   // [TIMELINE_BUILTIN_WIDGET_ID]: Timeline,
   [NAVIGATOR_BUILTIN_WIDGET_ID]: Navigator,
 };
 
-const builtin = merge({}, reearthBuiltin, unsafeBuiltinWidgets);
+let cachedBuiltin:
+  | (ReEarthBuiltinWidgets<Component> & UnsafeBuiltinWidgets<Component>)
+  | undefined = undefined;
+const builtin = () => {
+  if (cachedBuiltin) return cachedBuiltin;
+  if (config()) {
+    cachedBuiltin = merge({}, reearthBuiltin, unsafeBuiltinWidgets());
+    return cachedBuiltin;
+  } else {
+    return reearthBuiltin;
+  }
+};
 
-export const getBuiltinWidgetOptions = (id: string) =>
-  BUILTIN_WIDGET_OPTIONS[id as keyof BuiltinWidgets];
+export const getBuiltinWidgetOptions = (id: string) => {
+  Object.keys(unsafeBuiltinWidgets() ?? {}).map(uw => {
+    BUILTIN_WIDGET_OPTIONS[uw] = {};
+  });
+  return BUILTIN_WIDGET_OPTIONS[id as keyof BuiltinWidgets];
+};
 
 export const isBuiltinWidget = (id: string): id is keyof BuiltinWidgets => {
-  return !!builtin[id as keyof BuiltinWidgets];
+  return !!builtin()[id as keyof BuiltinWidgets];
 };
 
 export default builtin;
diff --git a/web/src/beta/lib/core/Crust/Widgets/Widget/builtin/unsafeWidgets.ts b/web/src/beta/lib/core/Crust/Widgets/Widget/builtin/unsafeWidgets.ts
@@ -9,7 +9,8 @@ export type { Component } from "..";
 
 export type UnsafeBuiltinWidgets<T = unknown> = Record<string, T>;
 
-export const unsafeBuiltinWidgets = processUnsafeBuiltinWidgets(config()?.unsafeBuiltinPlugins);
+export const unsafeBuiltinWidgets = () =>
+  processUnsafeBuiltinWidgets(config()?.unsafeBuiltinPlugins);
 
 function processUnsafeBuiltinWidgets(plugin?: UnsafeBuiltinPlugin[]) {
   if (!plugin) return;

diff --git a/web/src/beta/lib/core/Crust/Widgets/Widget/index.tsx b/web/src/beta/lib/core/Crust/Widgets/Widget/index.tsx
@@ -100,7 +100,7 @@ export default function WidgetComponent({
   if (!w) return null;
 
   const builtinWidgetId = `${w.pluginId}/${w.extensionId}`;
-  const Builtin = isBuiltinWidget(builtinWidgetId) ? builtin[builtinWidgetId] : undefined;
+  const Builtin = isBuiltinWidget(builtinWidgetId) ? builtin()[builtinWidgetId] : undefined;
 
   return Builtin ? (
     <div

diff --git a/web/src/published.tsx b/web/src/published.tsx
@@ -1,11 +1,16 @@
 // import "./wdyr"; // should be the first import
 
+import React from "react";
+import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 
 import App from "./publishedapp";
 import loadConfig from "./services/config";
 import "./wdyr";
 
+window.React = React;
+window.ReactDOM = ReactDOM;
+
 loadConfig().finally(() => {
   const element = document.getElementById("root");
   if (!element) throw new Error("root element is not found");