Update examples to use new JS backend syntax

examples/canvas2d/Main.hs

@@ -19,9 +19,9 @@ data Action
 main :: IO ()
 main = do
   [sun, moon, earth] <- replicateM 3 newImage
-  setSrc sun "https://mdn.mozillademos.org/files/1456/Canvas_sun.png"
-  setSrc moon "https://mdn.mozillademos.org/files/1443/Canvas_moon.png"
-  setSrc earth "https://mdn.mozillademos.org/files/1429/Canvas_earth.png"
+  setSrc sun "https://7b40c187-5088-4a99-9118-37d20a2f875e.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_sun.png"
+  setSrc moon "https://7b40c187-5088-4a99-9118-37d20a2f875e.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_moon.png"
+  setSrc earth "https://7b40c187-5088-4a99-9118-37d20a2f875e.mdnplay.dev/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_earth.png"
   startApp App { initialAction = GetTime
                , update = updateModel (sun,moon,earth)
                , ..
@@ -70,27 +70,27 @@ updateModel (sun,moon,earth) (SetTime m@(secs,millis)) _ = m <# do
   drawImage sun 0 0 300 300 ctx
   pure GetTime
 
-foreign import javascript unsafe "$1.globalCompositeOperation = 'destination-over';"
+foreign import javascript unsafe "((x) => { x.globalCompositeOperation = 'destination-over'; })"
   setGlobalCompositeOperation :: Context -> IO ()
 
-foreign import javascript unsafe "$4.drawImage($1,$2,$3);"
+foreign import javascript unsafe "((x, y, z, w) => { w.drawImage(x,y,z); })"
   drawImage' :: Image -> Double -> Double -> Context -> IO ()
 
-foreign import javascript unsafe "$r = document.getElementById('canvas').getContext('2d');"
+foreign import javascript unsafe "(() => { return document.getElementById('canvas').getContext('2d'); })"
   getCtx :: IO Context
 
-foreign import javascript unsafe "$r = new Image();"
+foreign import javascript unsafe "(() => { return new Image(); })"
   newImage :: IO Image
 
-foreign import javascript unsafe "$1.src = $2;"
+foreign import javascript unsafe "((x, y) => { x.src = y; })"
   setSrc :: Image -> MisoString -> IO ()
 
-foreign import javascript unsafe "$r = new Date();"
+foreign import javascript unsafe "(() => { return new Date(); })"
   newDate :: IO JSVal
 
-foreign import javascript unsafe "$r = $1.getSeconds();"
+foreign import javascript unsafe "((x) => { return x.getSeconds(); })"
   getSecs :: JSVal -> IO Double
 
-foreign import javascript unsafe "$r = $1.getMilliseconds();"
+foreign import javascript unsafe "((x) => { return x.getMilliseconds(); })"
   getMillis :: JSVal -> IO Double
 

examples/file-reader/Main.hs

@@ -12,7 +12,7 @@ import           Miso.String
 import           Control.Concurrent.MVar
 
 import GHCJS.Types
-import GHCJS.Foreign.Callback
+import GHC.JS.Foreign.Callback
 
 -- | Model
 data Model
@@ -71,17 +71,17 @@ viewModel Model {..} = view
       , div_ [] [ text info ]
       ]
 
-foreign import javascript unsafe "$r = new FileReader();"
+foreign import javascript unsafe "(() => { return new FileReader(); })"
   newReader :: IO JSVal
 
-foreign import javascript unsafe "$r = $1.files[0];"
+foreign import javascript unsafe "((x) => { return x.files[0]; })"
   getFile :: JSVal -> IO JSVal
 
-foreign import javascript unsafe "$1.onload = $2;"
+foreign import javascript unsafe "((x, y) => { x.onload = y; })"
   setOnLoad :: JSVal -> Callback (IO ()) -> IO ()
 
-foreign import javascript unsafe "$r = $1.result;"
+foreign import javascript unsafe "((x) => { return x.result; })"
   getResult :: JSVal -> IO MisoString
 
-foreign import javascript unsafe "$1.readAsText($2);"
+foreign import javascript unsafe "((x, y) => { x.readAsText(y); })"
   readText :: JSVal -> JSVal -> IO ()

examples/three/Main.hs

@@ -97,56 +97,56 @@ updateModel ref GetTime m = m <# do
 updateModel _ (SetTime m) _ =
   m <# pure GetTime
 
-foreign import javascript unsafe "$r = new Stats();"
+foreign import javascript unsafe "(() => { return new Stats(); })"
   newStats :: IO JSVal
 
-foreign import javascript unsafe "$1.begin();"
+foreign import javascript unsafe "((x) => { x.begin(); })"
   statsBegin :: JSVal -> IO ()
 
-foreign import javascript unsafe "$1.end();"
+foreign import javascript unsafe "((x) => { x.end(); })"
   statsEnd :: JSVal -> IO ()
 
-foreign import javascript unsafe "$1.showPanel(0);"
+foreign import javascript unsafe "((x) => { x.showPanel(0); })"
   showPanel :: JSVal -> IO ()
 
-foreign import javascript unsafe "$r = new THREE.Scene();"
+foreign import javascript unsafe "(() => { return new THREE.Scene();})"
   newScene :: IO JSVal
 
-foreign import javascript unsafe "$r = new THREE.BoxGeometry( $1, $2, $3 );"
+foreign import javascript unsafe "((x,y,z) => { return new THREE.BoxGeometry(x,y,z); })"
   newBoxGeometry :: Int -> Int -> Int -> IO JSVal
 
-foreign import javascript unsafe "$r = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );"
+foreign import javascript unsafe "(() => { return new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); })"
   newCamera :: IO JSVal
 
-foreign import javascript unsafe "$r = new THREE.Mesh( $1, $2 );"
+foreign import javascript unsafe "((x,y) => { return new THREE.Mesh( x, y ); })"
   newMesh :: JSVal -> JSVal -> IO JSVal
 
-foreign import javascript unsafe "$r = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );"
+foreign import javascript unsafe "(() => { return new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); })"
   newMeshBasicMaterial :: IO JSVal
 
-foreign import javascript unsafe "$r = new THREE.WebGLRenderer({canvas:$1, antialias : true});"
+foreign import javascript unsafe "((x) => { return new THREE.WebGLRenderer({canvas:x, antialias : true}); })"
   newRenderer :: JSVal -> IO JSVal
 
-foreign import javascript unsafe "$1.setSize( window.innerWidth, window.innerHeight );"
+foreign import javascript unsafe "((x) => { x.setSize( window.innerWidth, window.innerHeight ); })"
   setSize :: JSVal -> IO ()
 
-foreign import javascript unsafe "$1.add($2);"
+foreign import javascript unsafe "((x, y) => { x.add(y); })"
   addToScene :: JSVal -> JSVal -> IO ()
 
-foreign import javascript unsafe "$1.position.z = $2;"
+foreign import javascript unsafe "((x, y) => { x.position.z = y; })"
   cameraZ :: JSVal -> Int -> IO ()
 
-foreign import javascript unsafe "$1.rotation.x += $2;"
+foreign import javascript unsafe "((a, y) => { a.rotation.x += y; })"
   rotateX :: JSVal -> Double -> IO ()
 
-foreign import javascript unsafe "$1.rotation.y += $2;"
+foreign import javascript unsafe "((x, a) => { x.rotation.y += a; })"
   rotateY :: JSVal -> Double -> IO ()
 
-foreign import javascript unsafe "$1.render($2, $3);"
+foreign import javascript unsafe "((x, y, z) => { x.render(y, z); })"
   render :: JSVal -> JSVal -> JSVal -> IO ()
 
-foreign import javascript unsafe "$1.position.z = $2;"
+foreign import javascript unsafe "((x, y) => { x.position.z = y; })"
   positionCamera :: JSVal -> Double -> IO ()
 
-foreign import javascript unsafe "$1.appendChild( $2.domElement );"
+foreign import javascript unsafe "((x, y) => { x.appendChild( y.domElement ); })"
   addStatsToDOM :: JSVal -> JSVal -> IO ()