Pass input parameters to fetch function (#4)

Lukas Jenicek · lukasjenicek · web-flow · commit c3115c081881 · 2023-01-03T16:15:30.000+01:00
* Pass input parameters to fetch function

* Revert formatting of index.html file

Co-authored-by: lukasjenicek &lt;you@example.com&gt;
diff --git a/_examples/hello-webrpc/webapp/client.gen.js b/_examples/hello-webrpc/webapp/client.gen.js
@@ -79,7 +79,7 @@ class ExampleService {
   constructor(hostname, fetch) {
     this.path = '/rpc/ExampleService/'
     this.hostname = hostname
-    this.fetch = () => fetch
+    this.fetch = (input, init) => fetch(input, init)
   }
 
   url(name) {
diff --git a/_examples/hello-webrpc/webapp/index.html b/_examples/hello-webrpc/webapp/index.html
@@ -1,72 +1,55 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
-  <head>
-    <meta charset="utf-8" />
-    <title>hello webrpc (js)</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="" />
-    <script
-      charset="utf-8"
-      src="./client.gen.js"
-      type="text/javascript"
-    ></script>
-    <style></style>
-  </head>
-  <body>
-    <div id="app">
-      <h1>hello webrpc, simple JS app -- open your console</h1>
-    </div>
+<head>
+  <meta charset="utf-8">
+  <title>hello webrpc (js)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="" />
+  <script charset="utf-8" src="./client.gen.js" type="text/javascript"></script>
+  <style>
+  </style>
+</head>
+<body>
 
-    <script>
-      let svc = new ExampleService("http://127.0.0.1:4242", fetch);
+<div id="app">
+  <h1>hello webrpc, simple JS app -- open your console</h1>
+</div>
 
-      // Expecting "true"
-      console.log("[A] webrpc -- calling Ping() rpc method (expecting true):");
+<script>
+  let svc = new ExampleService('http://127.0.0.1:4242', fetch)
 
-      svc
-        .ping()
-        .then((resp) => {
-          console.log("[A]", { resp });
-        })
-        .catch((err) => {
-          console.log("[A]", { err });
-        });
+  // Expecting "true"
+  console.log('[A] webrpc -- calling Ping() rpc method (expecting true):')
 
-      // Expecting an error
-      console.log(
-        "[B] webrpc -- calling GetUser() rpc method of an unknown user (expecting a 404):"
-      );
+  svc.ping().then(resp => {
+    console.log('[A]', {resp})
+  }).catch(err => {
+    console.log('[A]', {err})
+  })
 
-      svc
-        .getUser({ userID: 911 })
-        .then((resp) => {
-          console.log("[B]", resp.user);
-        })
-        .catch((err) => {
-          console.log("[B]", { err });
-        });
+  // Expecting an error
+  console.log('[B] webrpc -- calling GetUser() rpc method of an unknown user (expecting a 404):')
 
-      // Expecting some user data
-      console.log(
-        "[C] webrpc -- calling GetUser() rpc method (expecting User object):"
-      );
+  svc.getUser({userID: 911}).then(resp => {
+    console.log('[B]', resp.user)
+  }).catch(err => {
+    console.log('[B]', {err})
+  })
 
-      // svc.GetUser({userID: 966}).then(({ user }) => {
-      svc
-        .getUser({ userID: 966 })
-        .then((resp) => {
-          const user = resp.user;
-          console.log("[C]", { user });
-          console.log(
-            "[C] welcome user ID",
-            user.id,
-            "with username",
-            user.USERNAME
-          );
-        })
-        .catch((err) => {
-          console.log("[C]", { err });
-        });
-    </script>
-  </body>
+  // Expecting some user data
+  console.log('[C] webrpc -- calling GetUser() rpc method (expecting User object):')
+
+  // svc.GetUser({userID: 966}).then(({ user }) => {
+  svc.getUser({userID: 966}).then(resp => {
+    const user = resp.user
+    console.log('[C]', {user})
+    console.log('[C] welcome user ID', user.id, 'with username', user.USERNAME)
+  }).catch(err => {
+    console.log('[C]', {err})
+  })
+
+
+</script>
+
+</body>
 </html>
diff --git a/client.go.tmpl b/client.go.tmpl
@@ -11,7 +11,7 @@
   constructor(hostname, fetch) {
     this.path = '/rpc/{{.Name}}/'
     this.hostname = hostname
-    this.fetch = () => fetch
+    this.fetch = (input, init) => fetch(input, init)
   }
 
   url(name) {
@@ -41,4 +41,4 @@
 }
 {{end -}}
 {{end -}}
-{{end}}
+{{end}}

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ class ExampleService {`
`79`	`79`	`constructor(hostname, fetch) {`
`80`	`80`	`this.path = '/rpc/ExampleService/'`
`81`	`81`	`this.hostname = hostname`
`82`		`- this.fetch = () => fetch`
	`82`	`+ this.fetch = (input, init) => fetch(input, init)`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`url(name) {`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`constructor(hostname, fetch) {`
`12`	`12`	`this.path = '/rpc/{{.Name}}/'`
`13`	`13`	`this.hostname = hostname`
`14`		`- this.fetch = () => fetch`
	`14`	`+ this.fetch = (input, init) => fetch(input, init)`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`url(name) {`
`@@ -41,4 +41,4 @@`
`41`	`41`	`}`
`42`	`42`	`{{end -}}`
`43`	`43`	`{{end -}}`
`44`		`-{{end}}`
	`44`	`+{{end}}`