add watch

7 files changed, 160 insertions, 27 deletions

diff --git a/gleam.toml b/gleam.toml
index e73c1b0..fdd4e7b 100644
--- a/gleam.toml
+++ b/gleam.toml
@@ -19,6 +19,7 @@ gleam_javascript = ">= 0.11.0 and < 1.0.0"
 filepath = ">= 1.0.0 and < 2.0.0"
 gleamyshell = ">= 2.0.1 and < 3.0.0"
 wechat = { path = "../wechat" }
+envoy = ">= 1.0.1 and < 2.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"
diff --git a/manifest.toml b/manifest.toml
index a4e00a7..4686694 100644
--- a/manifest.toml
+++ b/manifest.toml
@@ -2,6 +2,7 @@
 # You typically do not need to edit this file
 
 packages = [
+  { name = "envoy", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "envoy", source = "hex", outer_checksum = "CFAACCCFC47654F7E8B75E614746ED924C65BD08B1DE21101548AC314A8B6A41" },
   { name = "filepath", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "EFB6FF65C98B2A16378ABC3EE2B14124168C0CE5201553DE652E2644DCFDB594" },
   { name = "gleam_javascript", version = "0.11.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "483631D3001FCE8EB12ADEAD5E1B808440038E96F93DA7A32D326C82F480C0B2" },
   { name = "gleam_json", version = "2.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "CB10B0E7BF44282FB25162F1A24C1A025F6B93E777CCF238C4017E4EEF2CDE97" },
@@ -13,6 +14,7 @@ packages = [
 ]
 
 [requirements]
+envoy = { version = ">= 1.0.1 and < 2.0.0"}
 filepath = { version = ">= 1.0.0 and < 2.0.0" }
 gleam_javascript = { version = ">= 0.11.0 and < 1.0.0" }
 gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
diff --git a/package.json b/package.json
index 5f818b6..b4e34e6 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "build wechat miniprogram with gleam",
   "scripts": {
     "build": "gleam run -m build",
+    "watch": "WECHAT_BUILD_WATCH=1 gleam run -m build",
     "clean": "rm -rf dist/*"
   },
   "author": "Kai WU",
diff --git a/src/app/app.json b/src/app/app.json
index 0967ef4..f9ca764 100644
--- a/src/app/app.json
+++ b/src/app/app.json
@@ -1 +1,13 @@
-{}
+{
+  "pages":[
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#000",
+    "backgroundColor": "#fff",
+    "backgroundColorTop": "#000",
+    "navigationBarTitleText": "Gleam",
+    "navigationBarTextStyle":"white"
+  }
+}
diff --git a/src/app/pages/index/index.json b/src/app/pages/index/index.json
index 0967ef4..d6e25c7 100644
--- a/src/app/pages/index/index.json
+++ b/src/app/pages/index/index.json
@@ -1 +1,6 @@
-{}
+{
+  "usingComponents": {
+    "basic": "/components/basic/index"
+  }
+}
+
diff --git a/src/build.gleam b/src/build.gleam
index e85f13a..1de9015 100644
--- a/src/build.gleam
+++ b/src/build.gleam
@@ -3,6 +3,7 @@ import gleam/list
 import gleam/string
 import gleam/result
 import gleam/javascript/promise.{type Promise}
+import envoy
 import bundle
 
 @external(javascript, "./build_ffi.mjs", "bundle_build")
@@ -17,6 +18,18 @@ pub fn copy_build(json f: String, outfile o: String) -> Promise(Result(Nil, Stri
 @external(javascript, "./build_ffi.mjs", "less_build")
 pub fn less_build(less f: String, outfile o: String) -> Promise(Result(Nil, String))
 
+@external(javascript, "./build_ffi.mjs", "bundle_watch")
+pub fn bundle_watch(entry f: String, outfile o: String) -> Promise(Result(Nil, String))
+
+@external(javascript, "./build_ffi.mjs", "js_watch")
+pub fn js_watch(content c: String, outfile o: String) -> Promise(Result(Nil, String))
+
+@external(javascript, "./build_ffi.mjs", "copy_watch")
+pub fn copy_watch(json f: String, outfile o: String) -> Promise(Result(Nil, String))
+
+@external(javascript, "./build_ffi.mjs", "less_watch")
+pub fn less_watch(less f: String, outfile o: String) -> Promise(Result(Nil, String))
+
 const entry = "./build/dev/javascript/wechat_dev_tools/bundle.mjs"
 const app_content = "import { app } from './bundle.mjs'; app()"
 const dist = "./dist/"
@@ -52,40 +65,60 @@ fn component_content(p: String) -> String {
   ])
 }
 
-fn bundle_asset() -> List(Asset) {
-  [ Asset(entry, dist <> "bundle.mjs", bundle_build) ]
+fn bundle_asset(watch: Bool) -> List(Asset) {
+  case watch {
+    True -> [ Asset(entry, dist <> "bundle.mjs", bundle_watch) ]
+    False -> [ Asset(entry, dist <> "bundle.mjs", bundle_build) ]
+  }
 }
 
-fn app_assets() -> List(Asset) {
-  [ Asset(app_content, dist <> "app.js", js_build),
-    Asset(src <> "app.json", dist <> "app.json", copy_build),
-    Asset(src <> "app.less", dist <> "app.wxss", less_build) ]
+fn app_assets(watch: Bool) -> List(Asset) {
+  case watch {
+    True  -> [ Asset(app_content, dist <> "app.js", js_watch),
+               Asset(src <> "app.json", dist <> "app.json", copy_watch),
+               Asset(src <> "app.less", dist <> "app.wxss", less_watch) ]
+    False -> [ Asset(app_content, dist <> "app.js", js_build),
+               Asset(src <> "app.json", dist <> "app.json", copy_build),
+               Asset(src <> "app.less", dist <> "app.wxss", less_build) ]
+  }
 }
 
-fn page_assets(p: String) -> List(Asset) {
-  [ Asset(page_content(p), file_path(dist <> "/pages/", p, "js"), js_build),
-    Asset(file_path(src <> "/pages/", p, "json"), file_path(dist <> "/pages/", p, "json"), copy_build),
-    Asset(file_path(src <> "/pages/", p, "wxml"), file_path(dist <> "/pages/", p, "wxml"), copy_build),
-    Asset(file_path(src <> "/pages/", p, "less"), file_path(dist <> "/pages/", p, "wxss"), less_build) ]
+fn page_assets(p: String, watch: Bool) -> List(Asset) {
+  case watch {
+    True  -> [ Asset(page_content(p), file_path(dist <> "/pages/", p, "js"), js_watch),
+               Asset(file_path(src <> "pages/", p, "json"), file_path(dist <> "/pages/", p, "json"), copy_watch),
+               Asset(file_path(src <> "pages/", p, "wxml"), file_path(dist <> "/pages/", p, "wxml"), copy_watch),
+               Asset(file_path(src <> "pages/", p, "less"), file_path(dist <> "/pages/", p, "wxss"), less_watch) ]
+    False -> [ Asset(page_content(p), file_path(dist <> "/pages/", p, "js"), js_build),
+               Asset(file_path(src <> "pages/", p, "json"), file_path(dist <> "/pages/", p, "json"), copy_build),
+               Asset(file_path(src <> "pages/", p, "wxml"), file_path(dist <> "/pages/", p, "wxml"), copy_build),
+               Asset(file_path(src <> "pages/", p, "less"), file_path(dist <> "/pages/", p, "wxss"), less_build) ]
+  }
 }
 
-fn pages_assets() -> List(Asset) {
+fn pages_assets(watch: Bool) -> List(Asset) {
   bundle.pages()
   |> list.map(fn(p) { p.0 })
-  |> list.flat_map(fn(p) { page_assets(p) })
+  |> list.flat_map(fn(p) { page_assets(p, watch) })
 }
 
-fn component_assets(p: String) -> List(Asset) {
-  [ Asset(component_content(p), index_path(dist <> "/components/", p, "js"), js_build),
-    Asset(file_path(src <> "/components/", p, "json"), index_path(dist <> "/components/", p, "json"), copy_build),
-    Asset(file_path(src <> "/components/", p, "wxml"), index_path(dist <> "/components/", p, "wxml"), copy_build),
-    Asset(file_path(src <> "/components/", p, "less"), index_path(dist <> "/components/", p, "wxss"), less_build) ]
+fn component_assets(p: String, watch: Bool) -> List(Asset) {
+  case watch {
+    True  -> [ Asset(component_content(p), index_path(dist <> "/components/", p, "js"), js_watch),
+               Asset(file_path(src <> "components/", p, "json"), index_path(dist <> "/components/", p, "json"), copy_watch),
+               Asset(file_path(src <> "components/", p, "wxml"), index_path(dist <> "/components/", p, "wxml"), copy_watch),
+               Asset(file_path(src <> "components/", p, "less"), index_path(dist <> "/components/", p, "wxss"), less_watch) ]
+    False -> [ Asset(component_content(p), index_path(dist <> "/components/", p, "js"), js_build),
+               Asset(file_path(src <> "components/", p, "json"), index_path(dist <> "/components/", p, "json"), copy_build),
+               Asset(file_path(src <> "components/", p, "wxml"), index_path(dist <> "/components/", p, "wxml"), copy_build),
+               Asset(file_path(src <> "components/", p, "less"), index_path(dist <> "/components/", p, "wxss"), less_build) ]
+  }
 }
 
-fn components_assets() -> List(Asset) {
+fn components_assets(watch: Bool) -> List(Asset) {
   bundle.components()
   |> list.map(fn(p) { p.0 })
-  |> list.flat_map(fn(p) { component_assets(p) })
+  |> list.flat_map(fn(p) { component_assets(p, watch) })
 }
 
 fn fold_result(r0: Result(Nil, String), r: Result(Nil, String)) -> Result(Nil, String) {
@@ -108,10 +141,13 @@ fn build(ass: List(Asset)) -> Promise(Result(Nil, String)) {
 }
 
 pub fn main() {
-  use r0 <- promise.await(build(bundle_asset()))
-  use r1 <- promise.await(build(app_assets()))
-  use r2 <- promise.await(build(pages_assets()))
-  use r3 <- promise.await(build(components_assets()))
+  let watch = envoy.get("WECHAT_BUILD_WATCH")
+              |> result.is_ok
+              
+  use r0 <- promise.await(build(bundle_asset(watch)))
+  use r1 <- promise.await(build(app_assets(watch)))
+  use r2 <- promise.await(build(pages_assets(watch)))
+  use r3 <- promise.await(build(components_assets(watch)))
 
   [r0, r1, r2, r3]
   |> list.fold(Ok(Nil), fold_result)
diff --git a/src/build_ffi.mjs b/src/build_ffi.mjs
index eff03bf..df15223 100644
--- a/src/build_ffi.mjs
+++ b/src/build_ffi.mjs
@@ -1,4 +1,4 @@
-import { build } from 'esbuild'
+import { build, context } from 'esbuild'
 import { Ok, Error } from "./gleam.mjs"
 import { lessLoader } from 'esbuild-plugin-less';
 
@@ -65,3 +65,79 @@ export function less_build(css, out) {
       })
   })
 }
+
+export function bundle_watch(entry, out) {
+  return new Promise(resolve => {
+      context({
+        entryPoints: [entry],
+        bundle: true,
+        minify: true,
+        format: 'esm',
+        outfile: out,
+      }).then(function(ctx){
+        ctx.watch()
+        console.log("watching bundle...")
+      }).then(function(){
+        resolve(new Ok(undefined))
+      }).catch(function(e){
+        resolve(new Error(JSON.stringify(e)))
+      })
+  })
+}
+
+export function js_watch(js, out) {
+  return new Promise(resolve => {
+      context({
+        stdin: {
+          contents: js,
+          loader: 'js',
+        },
+        bundle: false,
+        minify: false,
+        format: 'esm',
+        outfile: out,
+      }).then(function(ctx){
+        ctx.watch()
+        console.log("watching js...")
+      }).then(function(){
+        resolve(new Ok(undefined))
+      }).catch(function(e){
+        resolve(new Error(JSON.stringify(e)))
+      })
+  })
+}
+
+export function copy_watch(src, out) {
+  return new Promise(resolve => {
+      context({
+        entryPoints: [src],
+        loader: {'.wxml': 'copy', '.json': 'copy'},
+        outfile: out,
+      }).then(function(ctx){
+        ctx.watch()
+        console.log(`watching json/wxml ${src}...`)
+      }).then(function(){
+        resolve(new Ok(undefined))
+      }).catch(function(e){
+        resolve(new Error(JSON.stringify(e)))
+      })
+  })
+}
+
+export function less_watch(css, out) {
+  return new Promise(resolve => {
+      context({
+        entryPoints: [css],
+        plugins: [lessLoader()],
+        loader: {'.less': 'css'},
+        outfile: out,
+      }).then(function(ctx){
+        ctx.watch()
+        console.log(`watching css ${css}...`)
+      }).then(function(){
+        resolve(new Ok(undefined))
+      }).catch(function(e){
+        resolve(new Error(JSON.stringify(e)))
+      })
+  })
+}