From 6212d1a600a356f7a2ad401f7f1cfabf58c829a7 Mon Sep 17 00:00:00 2001 From: Julian Early Date: Sat, 4 May 2024 07:37:58 -0700 Subject: [PATCH] tried async import and am running into issues with imports, attempting to make static imports work --- src/app/layout.tsx | 17 ++--- .../fidgets/[fidgetName]/FidgetViewer.tsx | 32 --------- src/app/sandbox/fidgets/[fidgetName]/page.tsx | 16 ++++- src/common/fidgets/FidgetViewer.tsx | 40 ++++++++++++ src/common/fidgets/FidgetWrapper.tsx | 5 +- src/common/fidgets/FidgetWrapperEditMode.tsx | 2 +- src/common/fidgets/LazyFidgetViewer.tsx | 65 +++++++++++++++++++ .../fidgets/makeFidget.tsx} | 22 ++++--- src/common/fidgets/useLazyFidget.ts | 45 +++++++++++++ .../ui/components/CommandPalette/index.tsx | 1 + src/common/ui/templates/home/index.tsx | 1 + src/fidgets/example/ExampleFidget.tsx | 14 ---- src/fidgets/example/index.ts | 19 ------ src/fidgets/example/index.tsx | 30 +++++++++ src/fidgets/index.ts | 6 ++ 15 files changed, 223 insertions(+), 92 deletions(-) delete mode 100644 src/app/sandbox/fidgets/[fidgetName]/FidgetViewer.tsx create mode 100644 src/common/fidgets/FidgetViewer.tsx create mode 100644 src/common/fidgets/LazyFidgetViewer.tsx rename src/{fidgets/index.tsx => common/fidgets/makeFidget.tsx} (50%) create mode 100644 src/common/fidgets/useLazyFidget.ts delete mode 100644 src/fidgets/example/ExampleFidget.tsx delete mode 100644 src/fidgets/example/index.ts create mode 100644 src/fidgets/example/index.tsx create mode 100644 src/fidgets/index.ts diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6d6e196f..13c0d0ad 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,7 +5,7 @@ import { rainbowKitTheme, config } from "@/common/ui/templates/rainboxkit"; import { RainbowKitProvider } from "@rainbow-me/rainbowkit"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { PostHogProvider } from "posthog-js/react"; -import React from "react" +import React, { Suspense } from "react" import { WagmiProvider } from "wagmi"; export const metadata = { @@ -54,18 +54,9 @@ export default function RootLayout({ return ( - - - - - - - { children } - - - - - + + { children } + ); diff --git a/src/app/sandbox/fidgets/[fidgetName]/FidgetViewer.tsx b/src/app/sandbox/fidgets/[fidgetName]/FidgetViewer.tsx deleted file mode 100644 index 7c94bc7f..00000000 --- a/src/app/sandbox/fidgets/[fidgetName]/FidgetViewer.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { use, useState } from "react"; -import { FidgetConfig, FidgetModule, FidgetSettings, importFidget } from "@/fidgets"; -import { chain } from "lodash"; -import { FidgetWrapper, FidgetWrapperConfig } from "@/common/fidgets/FidgetWrapper"; - - -export default function FidgetViewer({ fidget, fieldConfig }: FidgetModule) { - const defaultConfig: FidgetWrapperConfig = { - editConfig: fieldConfig, - fidgetConfig: { - editable: true, - size: [1, 2], - settings: chain(fieldConfig).keyBy("fieldName").mapValues("default").value() - }, - }; - const [config, setConfig] = useState(defaultConfig); - const saveConifg = async (conf: FidgetConfig) => { - setConfig({ - editConfig: fieldConfig, - fidgetConfig: conf, - }); - return true; - }; - - return ( - - ); -} \ No newline at end of file diff --git a/src/app/sandbox/fidgets/[fidgetName]/page.tsx b/src/app/sandbox/fidgets/[fidgetName]/page.tsx index 1ca0c832..61b5f654 100644 --- a/src/app/sandbox/fidgets/[fidgetName]/page.tsx +++ b/src/app/sandbox/fidgets/[fidgetName]/page.tsx @@ -1,5 +1,7 @@ -import { importFidget } from "@/fidgets"; -import React, { use } from "react"; +import React from "react"; +import FidgetViewer from "@/common/fidgets/FidgetViewer"; +import CompleteFidgets from "@/fidgets"; +import { GenericFidget } from "@/common/fidgets/makeFidget"; type PageParams = { params: { @@ -8,5 +10,13 @@ type PageParams = { }; export default function Page({ params }: PageParams) { - const { fidget, fieldConfig } = use(importFidget(params.fidgetName)); + const fidget = CompleteFidgets[params.fidgetName] as GenericFidget; + + return ( + <> + { + fidget ? :
Error Loading Fidget
+ } + + ); } \ No newline at end of file diff --git a/src/common/fidgets/FidgetViewer.tsx b/src/common/fidgets/FidgetViewer.tsx new file mode 100644 index 00000000..b96ba652 --- /dev/null +++ b/src/common/fidgets/FidgetViewer.tsx @@ -0,0 +1,40 @@ +"use client" +import React, { useState } from "react"; +import { FidgetConfig, FidgetSettings, GenericFidget } from "@/common/fidgets/makeFidget"; +import { reduce } from "lodash"; +import { FidgetWrapper, FidgetWrapperConfig } from "@/common/fidgets/FidgetWrapper"; + + +export default function LazyFidgetViewer({ fidget }: { fidget: GenericFidget }) { + const defaultConfig: FidgetWrapperConfig = { + editConfig: fidget.fieldConfig, + fidgetConfig: { + editable: true, + size: [1, 2], + settings: reduce( + fidget.fieldConfig.fields, + (acc, f) => ({ + ...acc, + [f.fieldName]: f.default || null, + }), + {}, + ) + }, + }; + const [config, setConfig] = useState(defaultConfig); + const saveConifg = async (conf: FidgetConfig) => { + setConfig({ + editConfig: config.editConfig, + fidgetConfig: conf, + }); + return true; + }; + + return ( + + ); +} \ No newline at end of file diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx index 28368432..d68fee46 100644 --- a/src/common/fidgets/FidgetWrapper.tsx +++ b/src/common/fidgets/FidgetWrapper.tsx @@ -1,11 +1,11 @@ +"use client" import React, { useState } from "react"; -import { FidgetConfig, FidgetEditConfig, FidgetSettings } from "@/fidgets"; +import { FidgetConfig, FidgetEditConfig, FidgetSettings } from "@/common/fidgets/makeFidget"; import { Card, CardContent, CardHeader } from "../ui/atoms/card"; import { Button } from "../ui/atoms/button"; import FidgetWrapperEditMode from "./FidgetWrapperEditMode"; import { toast } from "sonner"; - export type FidgetWrapperConfig = { fidgetConfig: FidgetConfig; readonly editConfig: FidgetEditConfig; @@ -18,6 +18,7 @@ type FidgetWrapperProps = { }; export function FidgetWrapper({ fidget, config, saveConfig }: FidgetWrapperProps) { + console.log(fidget); const [saving, setSaving] = useState(false); const [editing, setEditing] = useState(false); const [viewEditor, setViewEditor] = useState(false); diff --git a/src/common/fidgets/FidgetWrapperEditMode.tsx b/src/common/fidgets/FidgetWrapperEditMode.tsx index d1962738..786f31c2 100644 --- a/src/common/fidgets/FidgetWrapperEditMode.tsx +++ b/src/common/fidgets/FidgetWrapperEditMode.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { FidgetEditConfig, FidgetSettings } from "@/fidgets"; +import { FidgetEditConfig, FidgetSettings } from "@/common/fidgets/makeFidget"; type FidgetWrapperSettingsEditorProps = { readonly editConfig: FidgetEditConfig; diff --git a/src/common/fidgets/LazyFidgetViewer.tsx b/src/common/fidgets/LazyFidgetViewer.tsx new file mode 100644 index 00000000..a8536020 --- /dev/null +++ b/src/common/fidgets/LazyFidgetViewer.tsx @@ -0,0 +1,65 @@ +"use client" +import React, { useEffect, useState } from "react"; +import { FidgetConfig, FidgetSettings, Fidget } from "@/common/fidgets/makeFidget"; +import { reduce } from "lodash"; +import { FidgetWrapper, FidgetWrapperConfig } from "@/common/fidgets/FidgetWrapper"; +import { useLazyFidget } from "./useLazyFidget"; + + +export default function LazyFidgetViewer({ fidgetPath }: { fidgetPath: string }) { + // This doesn't work if the FidgetPath is relative + // Building a separate Fidget's package might solve the issue + // But that will take testing + const lazyFidget = useLazyFidget(fidgetPath); + const [config, setConfig] = useState({ + editConfig: { fields: [] }, + fidgetConfig: { editable: true, size: [1,1], settings: {} } + }); + const saveConifg = async (conf: FidgetConfig) => { + setConfig({ + editConfig: config.editConfig, + fidgetConfig: conf, + }); + return true; + }; + + useEffect(() => { + if (lazyFidget.status === "Success") { + const fidget = lazyFidget.result; + const defaultConfig: FidgetWrapperConfig = { + editConfig: fidget.fieldConfig, + fidgetConfig: { + editable: true, + size: [1, 2], + settings: reduce( + fidget.fieldConfig.fields, + (acc, f) => ({ + ...acc, + [f.fieldName]: f.default || null, + }), + {}, + ) + }, + }; + setConfig(defaultConfig); + } + }, [lazyFidget]); + + return ( + <> + { + lazyFidget.status === "Loading" ? +
Loading...
+ : ( + lazyFidget.status === "Success" ? + + :
Error!
+ ) + } + + ); +} \ No newline at end of file diff --git a/src/fidgets/index.tsx b/src/common/fidgets/makeFidget.tsx similarity index 50% rename from src/fidgets/index.tsx rename to src/common/fidgets/makeFidget.tsx index 0ebc9824..a01be152 100644 --- a/src/fidgets/index.tsx +++ b/src/common/fidgets/makeFidget.tsx @@ -1,7 +1,10 @@ +import React from "react"; + export interface FidgetSettings { + // TO DO: infer values here backed off the related config file } -export type FidgetConfig = { +export type FidgetConfig = { editable: boolean; size: [number, number]; settings: S; @@ -19,12 +22,15 @@ export type FidgetFieldConfig = { export type FidgetEditConfig = { fields: FidgetFieldConfig[]; }; - -export type FidgetModule

= { - fidget: React.FC

; + +export interface Fidget

extends React.FC

{ fieldConfig: FidgetEditConfig; -}; - -export async function importFidget(fidgetName) { - return await import(`./${fidgetName}`) as FidgetModule; } + +export type GenericFidget = Fidget; + +export function makeFidget(component: React.FC, fieldConfig: FidgetEditConfig): Fidget { + const componentAny: any = component; + componentAny.fieldConfig = fieldConfig; + return componentAny; +} \ No newline at end of file diff --git a/src/common/fidgets/useLazyFidget.ts b/src/common/fidgets/useLazyFidget.ts new file mode 100644 index 00000000..d00be003 --- /dev/null +++ b/src/common/fidgets/useLazyFidget.ts @@ -0,0 +1,45 @@ +import { useState, useEffect } from "react"; +import { GenericFidget } from "@/common/fidgets/makeFidget"; + +type LazyFidgetResult = T | Error | null; +type LazyFidgetStatus = "Loading" | "Error" | "Success"; + +type LazyFidgetPending = { + status: "Loading", + result: null, +} + +type LazyFidgetError = { + status: "Error", + result: Error, +} + +type LazyFidgetLoaded = { + status: "Success", + result: T, +} + +export type LazyFidget = LazyFidgetError | LazyFidgetPending | LazyFidgetLoaded; + +export function useLazyFidget(fidgetPath: string): LazyFidget { + const [result, setResult] = useState>(null); + const [status, setStatus] = useState("Loading"); + + useEffect(() => { + import(fidgetPath).then( + moduleData => { + setResult(moduleData.default); + setStatus("Success"); + }, + error => { + setResult(error); + setStatus("Error"); + console.log(error); + } + ); + }, []); + + return { + status, result + } as LazyFidget; +} \ No newline at end of file diff --git a/src/common/ui/components/CommandPalette/index.tsx b/src/common/ui/components/CommandPalette/index.tsx index cfd3befb..82f679ba 100644 --- a/src/common/ui/components/CommandPalette/index.tsx +++ b/src/common/ui/components/CommandPalette/index.tsx @@ -1,3 +1,4 @@ +"use client" import React, { Fragment, useState } from 'react'; import { CommandType } from "@/constants/commands"; import { classNames } from "@/styles/utils/css"; diff --git a/src/common/ui/templates/home/index.tsx b/src/common/ui/templates/home/index.tsx index 30736b83..de9b601c 100644 --- a/src/common/ui/templates/home/index.tsx +++ b/src/common/ui/templates/home/index.tsx @@ -1,3 +1,4 @@ +"use client" import React from "react"; import { Fragment, useState } from "react"; import { Dialog, Transition } from "@headlessui/react"; diff --git a/src/fidgets/example/ExampleFidget.tsx b/src/fidgets/example/ExampleFidget.tsx deleted file mode 100644 index 4c1f854c..00000000 --- a/src/fidgets/example/ExampleFidget.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import { FidgetSettings } from ".."; - -export interface ExampleFidgetSettings extends FidgetSettings { - text: string, -} - -export const ExampleFidget: React.FC = ({ - text -}: ExampleFidgetSettings) => { - return ( -

{ text }

- ); -}; diff --git a/src/fidgets/example/index.ts b/src/fidgets/example/index.ts deleted file mode 100644 index fb27ebe6..00000000 --- a/src/fidgets/example/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { FidgetEditConfig, FidgetModule } from ".."; -import { ExampleFidget, ExampleFidgetSettings} from "./ExampleFidget"; -import TextInput from "@/common/ui/molecules/TextInput"; - -const exampleConfig: FidgetEditConfig = { - fields: [ - { - fieldName: "displayText", - default: "Hello World!", - required: true, - inputSelector: TextInput, - } - ], -}; - -export default { - fidget: ExampleFidget, - fieldConfig: exampleConfig, -} as FidgetModule; \ No newline at end of file diff --git a/src/fidgets/example/index.tsx b/src/fidgets/example/index.tsx new file mode 100644 index 00000000..6da475d7 --- /dev/null +++ b/src/fidgets/example/index.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { FidgetEditConfig, makeFidget } from "../../common/fidgets/makeFidget"; +import TextInput from "@/common/ui/molecules/TextInput"; + +export type ExampleFidgetSettings = { + text: string, +} + +const exampleConfig: FidgetEditConfig = { + fields: [ + { + fieldName: "displayText", + default: "Hello World!", + required: true, + inputSelector: TextInput, + } + ], +}; + +const Example: React.FC = ({ text }: ExampleFidgetSettings) => { + return ( +
+ { text } +
+ ); +}; + +const ExampleFidget = makeFidget(Example, exampleConfig); + +export default ExampleFidget; \ No newline at end of file diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts new file mode 100644 index 00000000..2c45ec76 --- /dev/null +++ b/src/fidgets/index.ts @@ -0,0 +1,6 @@ +// TO DO: Figure out how to do this importing dynamically +import ExampleFidget from "./example"; + +export default { + example: ExampleFidget, +}; \ No newline at end of file