Merge pull request #13 from easyops-cn/steve/async

fix(): support resource as context value

Author: weareoutman

apps/test/src/Pages/About.tsx

@@ -1,5 +1,6 @@
 import {
   callApi,
+  createContext,
   handleHttpError,
   useContext,
   useRef,
@@ -8,17 +9,19 @@ import {
 } from "@next-tsx/core";
 import { LayoutContext } from "../Contexts/LayoutContext";
 
+const AboutContext = createContext();
+
 export default function About() {
   const { handleClick } = useContext(LayoutContext);
   const params = useSearchParams();
-  const [res, refetch] = useResource(
+  const [aboutInfo, refetch] = useResource(
     () => callApi("my.api@getAboutInfo:1.0.0", { id: params.get("id") }),
     { async: true, fallback: null }
   );
   const modalRef = useRef();
 
   return (
-    <>
+    <AboutContext.Provider value={{ aboutInfo, refetch }}>
       <div
         onMount={handleClick}
         onClick={() => {
@@ -31,10 +34,10 @@ export default function About() {
           );
         }}
       >
-        About {params.get("id")} {res}
+        About {params.get("id")} {aboutInfo}
       </div>
-      <div>{res ? <span slot="a">1</span> : <span slot="b">2</span>}</div>
+      <div>{aboutInfo ? <span slot="a">1</span> : <span slot="b">2</span>}</div>
       <eo-modal ref={modalRef} />
-    </>
+    </AboutContext.Provider>
   );
 }

packages/builder/bin/builder.js

@@ -65,7 +65,7 @@ async function buildApp(watchMode) {
     for (const err of app.errors) {
       console.error(`[${err.severity}] ${err.message}`);
       console.error(
-        `  at ${err.filePath}:${err.node?.loc?.start.line}:${err.node?.loc?.start.column}`
+        `  at ${srcDir}${err.filePath}${err.node ? `:${err.node.loc.start.line}:${err.node.loc.start.column}` : ""}`
       );
       if (
         !shouldBailout &&

packages/parser/src/modules/parseContextProvider.ts

@@ -95,6 +95,7 @@ export function parseContextProvider(
   const properties = expression.get("properties");
   const stateSetters = new Map<string, string>();
   const stateGetters = new Map<string, string>();
+  const refetchList = new Map<string, string>();
   const eventCallbacks = new Map<string, BindingInfo>();
   for (const prop of properties) {
     if (!prop.isObjectProperty()) {
@@ -140,8 +141,12 @@ export function parseContextProvider(
         stateSetters.set(value.node.name, binding.id.name);
         break;
       case "state":
+      case "resource":
         stateGetters.set(value.node.name, binding.id.name);
         break;
+      case "refetch":
+        refetchList.set(value.node.name, binding.resourceId!.name);
+        break;
       case "eventCallback": {
         const params = binding.callback!.get("params");
         if (params.length > 0) {
@@ -168,6 +173,7 @@ export function parseContextProvider(
   if (
     stateSetters.size === 0 &&
     stateGetters.size === 0 &&
+    refetchList.size === 0 &&
     eventCallbacks.size === 0
   ) {
     return elements;
@@ -200,6 +206,21 @@ export function parseContextProvider(
                 },
               })
             ),
+            ...[...refetchList].map<EventHandler>(
+              ([refetchName, stateName]) => ({
+                action: "conditional",
+                payload: {
+                  test: `<% EVENT.detail.name === ${JSON.stringify(refetchName)} %>`,
+                  consequent: {
+                    action: "refresh_data_source",
+                    payload: {
+                      name: stateName,
+                    },
+                  },
+                  alternate: null,
+                },
+              })
+            ),
             ...[...eventCallbacks].map<EventHandler>(
               ([callbackName, binding]) => ({
                 action: "conditional",