@bravostudioai/react 0.1.0

package/src/cli/index.ts

@@ -0,0 +1,35 @@
+
+import { runDownload } from "./commands/download";
+import { runGenerate } from "./commands/generate";
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
+    console.log(`
+Usage: encore-lib <command> [options]
+
+Commands:
+  download <appId> <pageId> <targetPath>   Download Encore page data
+  generate <appId> [pageId] <outputPath>   Generate React wrapper components
+`);
+    process.exit(0);
+  }
+
+  const command = args[0];
+  const commandArgs = args.slice(1);
+
+  switch (command) {
+    case "download":
+      await runDownload(commandArgs);
+      break;
+    case "generate":
+      await runGenerate(commandArgs);
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      process.exit(1);
+  }
+}
+
+main();

package/src/components/DynamicComponent.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo, Suspense } from "react";
+
+type Props = {
+  name: string;
+  children: unknown;
+  componentId?: string;
+  fallback?: React.ReactNode;
+  reloadKey?: string | number;
+  componentCode?: string;
+};
+
+const DynamicComponent: React.FC<Props> = ({
+  name,
+  children,
+  fallback,
+  reloadKey,
+  componentCode,
+  ...props
+}) => {
+  const Component = useMemo(() => {
+    return React.lazy(async () => {
+      if (componentCode) {
+        // Use provided code instead of fetching
+        const { loadAMDModule } = await import("../lib/dynamicModules");
+        return await loadAMDModule(name, componentCode);
+      }
+      const { fetchDep } = await import("../lib/dynamicModules");
+      const r = (await fetchDep(name)) as any;
+      return r;
+    });
+  }, [name, reloadKey, componentCode]); // Include componentCode and reloadKey to force reload when they change
+  const thisFallback = fallback || <div>Loading...</div>;
+  return (
+    <Suspense fallback={thisFallback}>
+      <Component {...props}>{children}</Component>
+    </Suspense>
+  );
+};
+
+export default React.memo(DynamicComponent);