lbguilherme/crystal-web

Getting this running on M2 Mac

Opened this issue · 0 comments

Hey, so I was curious to see how this works, and running in to some issues. I have a fresh Macbook Air M2

❯ crystal -v
Crystal 1.6.0 (2022-10-06)

LLVM: 14.0.6
Default target: aarch64-apple-darwin21.6.0

I started by just running the build.sh in the lib (which seemed to work?)

❯ ./lib/js/scripts/build.sh src/main.cr 
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
100 1710k  100 1710k    0     0  1289k      0  0:00:01  0:00:01 --:--:-- 5594k
❯ php -S localhost:3001
[Sun Nov  6 15:13:34 2022] PHP 8.1.11 Development Server (http://localhost:3001) started
[Sun Nov  6 15:13:39 2022] [::1]:60077 Accepted
[Sun Nov  6 15:13:39 2022] [::1]:60077 [200]: GET /
[Sun Nov  6 15:13:39 2022] [::1]:60077 Closing
[Sun Nov  6 15:13:39 2022] [::1]:60078 Accepted
[Sun Nov  6 15:13:39 2022] [::1]:60078 [200]: GET /main.js
[Sun Nov  6 15:13:39 2022] [::1]:60078 Closing
[Sun Nov  6 15:13:39 2022] [::1]:60079 Accepted
[Sun Nov  6 15:13:39 2022] [::1]:60079 [200]: GET /main.wasm

When loading the index.html I get this error

Screen Shot 2022-11-06 at 3 28 13 PM

I wasn't sure if I missed a step, so I went back and ran shards build which gives me this:

❯ shards build          
Dependencies are satisfied
Building: main
Error target main failed to compile:
Undefined symbols for architecture arm64:
  "___wasm_call_ctors", referenced from:
      __start in _main.o
  "__js1", referenced from:
      _*Web::Window@JS::Reference#finalize:Nil in W-eb5858W-indow.o
      _*JS::Console@JS::Reference#finalize:Nil in J-S-5858C-onsole.o
      _*Web::HTMLDocument@JS::Reference#finalize:Nil in W-eb5858H-T-M-L-D-ocument.o
      _*Web::HTMLCanvasElement@JS::Reference#finalize:Nil in W-eb5858H-T-M-L-C-anvasE-lement.o
      _*Web::HTMLBodyElement@JS::Reference#finalize:Nil in W-eb5858H-T-M-L-B-odyE-lement.o
      _*Web::CanvasContext@JS::Reference#finalize:Nil in W-eb5858C-anvasC-ontext.o
  "__js55", referenced from:
      _*JS::Console#log<String>:Nil in J-S-5858C-onsole.o
  "__js56", referenced from:
      _*Web::get_window:Web::Window in W-eb.o
  "__js59", referenced from:
      _*Web::HTMLBodyElement@Web::Node#append_child<Web::HTMLCanvasElement>:Nil in W-eb5858H-T-M-L-B-odyE-lement.o
  "__js65", referenced from:
      _*Web::CanvasContext#internal_setter_font<String>:Nil in W-eb5858C-anvasC-ontext.o
  "__js66", referenced from:
      _*Web::CanvasContext#fill_text<String, Int32, Int32>:Nil in W-eb5858C-anvasC-ontext.o
  "__js68", referenced from:
      _*Web::HTMLCanvasElement#get_context<String>:Web::CanvasContext in W-eb5858H-T-M-L-C-anvasE-lement.o
  "__js70", referenced from:
      _*Web::HTMLDocument#create_element<String>:Web::HTMLCanvasElement in W-eb5858H-T-M-L-D-ocument.o
  "__js71", referenced from:
      _*Web::HTMLDocument#body:Web::HTMLBodyElement in W-eb5858H-T-M-L-D-ocument.o
  "__js73", referenced from:
      _*Web::Window#console:JS::Console in W-eb5858W-indow.o
  "__js74", referenced from:
      _*Web::Window#document:Web::HTMLDocument in W-eb5858W-indow.o
  "__js75", referenced from:
      _*Web::Window#inner_width:Int32 in W-eb5858W-indow.o
  "__js76", referenced from:
      _*Web::Window#inner_height:Int32 in W-eb5858W-indow.o
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
Error: execution of command failed with code: 1: `cc "${@}" -o /Users/jeremy/Development/crystal/crystal-wasm/bin/main  -rdynamic -L/opt/homebrew/Cellar/crystal/1.6.0/libexec/../../../../lib -lgc -L/opt/homebrew/Cellar/libevent/2.1.12/lib -levent -liconv`

Then I tried adding the --release flag to the script and got

❯ ./lib/js/scripts/build.sh src/main.cr --release
Please install wasm-opt

so, I'm not sure what I'm doing 😂

<!-- index.html -->
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
  </body>
</html>
# src/main.cr
require "web"

window = Web.window
console = window.console
document = window.document

console.log "Width: #{window.inner_width}"
console.log "Height: #{window.inner_height}"

canvas = document.create_element("canvas")
document.body.append_child(canvas)
ctx = canvas.get_context("2d")
ctx.font = "30px Arial"
ctx.fill_text("Hello World!", 10, 30)