feat: add openblocks sdk

Author: QIQI03

client/packages/openblocks-cli/client.d.ts

@@ -35,3 +35,4 @@ declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;
 declare var REACT_APP_IMPORT_MAP: string;
 declare var REACT_APP_SERVER_IPS: string;
+declare var REACT_APP_BUNDLE_TYPE: "sdk" | "app";

client/packages/openblocks-cli/config/vite.config.js

@@ -11,14 +11,13 @@ buildVars.forEach(({ name, defaultValue }) => {
 });
 
 export default defineConfig({
-  define,
+  define: {
+    ...define,
+    __OPENBLOCKS_DEV__: JSON.stringify({}),
+  },
   assetsInclude: ["**/*.md"],
   resolve: {
     extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
-    alias: {
-      "__user-dev-comps__": paths.compsIndexJs,
-      "__user-pkg-json__": paths.appPackageJson,
-    },
   },
   build: {
     target: "chrome69",

client/packages/openblocks-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "openblocks-cli",
   "description": "CLI tool used to start build publish openblocks components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "bin": "./index.js",
   "type": "module",
   "exports": {

client/packages/openblocks-core/lib/index.js

@@ -1006,7 +1006,7 @@ var blacklist = new Set([
     "MutationObserver",
 ]);
 var proxyTargetIdentity = Symbol("proxy_target_identity");
-var globalVarNames = new Set(["window", "globalThis", "self"]);
+var globalVarNames = new Set(["window", "globalThis", "self", "global"]);
 /**
  * return an immutable object.
  * @remarks
@@ -1087,7 +1087,7 @@ function createBlackHole() {
     });
 }
 function createMockWindow() {
-    return new Proxy({}, {
+    var win = new Proxy({}, {
         has: function () {
             return true;
         },
@@ -1098,6 +1098,9 @@ function createMockWindow() {
             if (p in target) {
                 return Reflect.get(target, p);
             }
+            if (globalVarNames.has(p)) {
+                return win;
+            }
             if (typeof p === "string" && blacklist.has(p)) {
                 log.log("[Sandbox] access ".concat(String(p), " on mock window, return mock object"));
                 return createBlackHole();
@@ -1113,6 +1116,7 @@ function createMockWindow() {
             return ret;
         },
     });
+    return win;
 }
 var mockWindow = createMockWindow();
 function clearMockWindow() {

client/packages/openblocks-core/src/eval/utils/evalScript.test.tsx

@@ -38,6 +38,9 @@ describe("evalScript", () => {
     expect(evalScript("a[0]", { a: [] })).toBe(undefined);
 
     expect(evalScript("abc", {})).toBeUndefined();
+    expect(evalScript("window.window === window", {})).toBe(true);
+    expect(evalScript("window.window", {})).not.toBe(window);
+    expect(evalScript("window.global", {})).not.toBe(window);
     expect(evalScript("setTimeout in window", {})).toBe(true);
     expect(evalScript("WebSocket in window", {})).toBe(true);
     expect(evalScript("anything in window", {})).toBe(true);

client/packages/openblocks-core/src/eval/utils/evalScript.tsx

@@ -21,7 +21,7 @@ const blacklist = new Set<PropertyKey>([
 
 const proxyTargetIdentity = Symbol("proxy_target_identity");
 
-const globalVarNames = new Set<PropertyKey>(["window", "globalThis", "self"]);
+const globalVarNames = new Set<PropertyKey>(["window", "globalThis", "self", "global"]);
 
 /**
  * return an immutable object.
@@ -108,7 +108,7 @@ export function createBlackHole(): any {
 }
 
 function createMockWindow() {
-  return new Proxy(
+  const win: any = new Proxy(
     {},
     {
       has() {
@@ -121,6 +121,9 @@ function createMockWindow() {
         if (p in target) {
           return Reflect.get(target, p);
         }
+        if (globalVarNames.has(p)) {
+          return win;
+        }
         if (typeof p === "string" && blacklist.has(p)) {
           log.log(`[Sandbox] access ${String(p)} on mock window, return mock object`);
           return createBlackHole();
@@ -137,6 +140,7 @@ function createMockWindow() {
       },
     }
   );
+  return win;
 }
 
 let mockWindow: any = createMockWindow();

client/packages/openblocks-design/src/components/Trees.tsx

@@ -9,7 +9,6 @@ export const Treediv = styled.div<{ $height?: number }>`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  overflow: hidden;
 
   &::before {
     content: "";

client/packages/openblocks-design/src/components/form.tsx

@@ -137,7 +137,7 @@ export const FormInputItem = (props: FormProps & InputProps) => (
       hasFeedback={true}
     >
       <FormInput
-        autoFocus={props.autoFocus}
+        {...props}
         autoComplete={"off"}
         disabled={props.disabled}
         placeholder={props.placeholder}

client/packages/openblocks-dev-utils/buildVars.js

@@ -39,4 +39,8 @@ export const buildVars = [
     name: "REACT_APP_SERVER_IPS",
     defaultValue: "",
   },
+  {
+    name: "REACT_APP_BUNDLE_TYPE",
+    defaultValue: "app",
+  },
 ];

client/packages/openblocks-sdk/index.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+export type OutputChangeHandler<O> = (output: O) => void;
+
+export type EventTriggerHandler = (eventName: string) => void;
+
+type Off = () => void;
+
+interface EventHandlerMap<O = any> {
+  moduleOutputChange: OutputChangeHandler<O>;
+  moduleEventTriggered: EventTriggerHandler;
+}
+
+export interface AppViewInstanceOptions<I = any> {
+  moduleInputs?: I;
+}
+
+export interface OpenblocksAppViewProps<I, O> extends AppViewInstanceOptions<I> {
+  appId: string;
+  className?: string;
+  onModuleOutputChange?: OutputChangeHandler<O>;
+  onModuleEventTriggered?: EventTriggerHandler;
+}
+
+export interface AppViewInstance<I, O> {
+  on<K extends keyof EventHandlerMap<O>>(event: K, handler?: EventHandlerMap<O>[K]): Off;
+  setModuleInputs(inputs: I): void;
+  invokeMethod(methodName: string): void;
+}
+
+export declare const OpenblocksAppView: React.ForwardRefExoticComponent<
+  OpenblocksAppViewProps<unknown, unknown> &
+    React.RefAttributes<AppViewInstance<unknown, unknown> | undefined>
+>;
+
+export declare function bootstrapAppAt<I = any, O = any>(
+  appId: string,
+  node: Element | null,
+  options: AppViewInstanceOptions<I>
+): Promise<AppViewInstance<I, O>>;