Giacomo Leidi and 1 other boosted
Arne Babenhauserheide
@ArneBab@rollenspiel.social  ·  activity timestamp 3 weeks ago
Load your interface (includes startup time optimizations): #+begin_src js :tangle hoot.js /* file: hoot.js */ var f = window.fetch; window.fetch = (inp, ini) => f(inp, {credentials: 'include', mode: 'no-cors', ...ini}); window.addEventListener("load", () => fetch("hoot.wasm") .then(r => r.arrayBuffer()) .then(bytes => Scheme.load_main(bytes, { user_imports: { // mapped via define-foreign document: { body() { return document.body; }, createTextNode: Document.prototype .createTextNode.bind(document) }, element: { appendChild(parent, child) { return parent.appendChild(child);}}}}))); #+end_src Include =reflect.js= and =hoot.js= from a HTML page: #+begin_src html :tangle hoot.html <!DOCTYPE html> <!-- file: hoot.html --> <html><head><title>Hello Hoot</title> <script type="text/javascript" src="reflect.js"></script> <script type="text/javascript" src="hoot.js"></script> <link rel="preload" as="fetch" href="hoot.wasm"></link> <link rel="preload" as="fetch" href="wtf8.wasm"></link> <link rel="preload" as="fetch" href="reflect.wasm"></link> </head><body><h1>Hoot Test</h1></body></html> #+end_src For local testing, hoot provides a minimal webserver: #+begin_src bash guix shell guile-hoot guile-next -- \ guile -c '((@ (hoot web-server) serve))' #+end_src
Load your interface (includes startup time optimizations): #+begin_src js :tangle hoot.js /* file: hoot.js */ var f = window.fetch; window.fetch = (inp, ini) => f(inp, {credentials: 'include', mode: 'no-cors', ...ini}); window.addEventListener("load", () => fetch("hoot.wasm") .then(r => r.arrayBuffer()) .then(bytes => Scheme.load_main(bytes, { user_imports: { // mapped via define-foreign document: { body() { return document.body; }, createTextNode: Document.prototype .createTextNode.bind(document) }, element: { appendChild(parent, child) { return parent.appendChild(child);}}}}))); #+end_src Include =reflect.js= and =hoot.js= from a HTML page: #+begin_src html :tangle hoot.html <!DOCTYPE html> <!-- file: hoot.html --> <html><head><title>Hello Hoot</title> <script type="text/javascript" src="reflect.js"></script> <script type="text/javascript" src="hoot.js"></script> <link rel="preload" as="fetch" href="hoot.wasm"></link> <link rel="preload" as="fetch" href="wtf8.wasm"></link> <link rel="preload" as="fetch" href="reflect.wasm"></link> </head><body><h1>Hoot Test</h1></body></html> #+end_src For local testing, hoot provides a minimal webserver: #+begin_src bash guix shell guile-hoot guile-next -- \ guile -c '((@ (hoot web-server) serve))' #+end_src
Load your interface (includes startup time optimizations): #+begin_src js :tangle hoot.js /* file: hoot.js */ var f = window.fetch; window.fetch = (inp, ini) => f(inp, {credentials: 'include', mode: 'no-cors', ...ini}); window.addEventListener("load", () => fetch("hoot.wasm") .then(r => r.arrayBuffer()) .then(bytes => Scheme.load_main(bytes, { user_imports: { // mapped via define-foreign document: { body() { return document.body; }, createTextNode: Document.prototype .createTextNode.bind(document) }, element: { appendChild(parent, child) { return parent.appendChild(child);}}}}))); #+end_src Include =reflect.js= and =hoot.js= from a HTML page: #+begin_src html :tangle hoot.html <!DOCTYPE html> <!-- file: hoot.html --> <html><head><title>Hello Hoot</title> <script type="text/javascript" src="reflect.js"></script> <script type="text/javascript" src="hoot.js"></script> <link rel="preload" as="fetch" href="hoot.wasm"></link> <link rel="preload" as="fetch" href="wtf8.wasm"></link> <link rel="preload" as="fetch" href="reflect.wasm"></link> </head><body><h1>Hoot Test</h1></body></html> #+end_src For local testing, hoot provides a minimal webserver: #+begin_src bash guix shell guile-hoot guile-next -- \ guile -c '((@ (hoot web-server) serve))' #+end_src
*Browser again: clientside wasm.* @@html:<a id="deploy-hoot-wasm" name="deploy-hoot-wasm"></a>@@ To run clientside, you can package your project with [[https://spritely.institute/hoot/][Hoot]]: build an interface and compile to wasm: #+begin_src wisp :results output :tangle hoot.w ;; file: hoot.w use-modules : hoot ffi ;; guile specific import ;; the interface define-foreign document-body "document" "body" . -> (ref null extern) define-foreign make-text-node "document" "createTextNode" . (ref string) -> (ref null extern) define-foreign append-child! "element" "appendChild" . (ref null extern) (ref null extern) . -> (ref null extern) ;; your code append-child! : document-body make-text-node "Hello, world!" #+end_src Transpile with =wisp2lisp= and =guild compile-wasm=. If you run Guix: #+begin_src bash guix shell guile guile-wisp -- \ wisp2lisp hoot.w > hoot.scm && \ guix shell guile-hoot guile-next -- \ guild compile-wasm -o hoot.wasm hoot.scm #+end_src Get reflection tools from Guile Hoot (licensed Apache 2.0) with Guix: #+latex: \ThisLLCornerWallPaper{0.26}{programming-scheme-hoot}% #+begin_src bash guix shell guile-hoot guile-next -- bash -c \ 'cp $GUIX_ENVIRONMENT/share/*hoot/*/re*/{*.js,*.wasm} ./' #+end_src
*Browser again: clientside wasm.* @@html:<a id="deploy-hoot-wasm" name="deploy-hoot-wasm"></a>@@ To run clientside, you can package your project with [[https://spritely.institute/hoot/][Hoot]]: build an interface and compile to wasm: #+begin_src wisp :results output :tangle hoot.w ;; file: hoot.w use-modules : hoot ffi ;; guile specific import ;; the interface define-foreign document-body "document" "body" . -> (ref null extern) define-foreign make-text-node "document" "createTextNode" . (ref string) -> (ref null extern) define-foreign append-child! "element" "appendChild" . (ref null extern) (ref null extern) . -> (ref null extern) ;; your code append-child! : document-body make-text-node "Hello, world!" #+end_src Transpile with =wisp2lisp= and =guild compile-wasm=. If you run Guix: #+begin_src bash guix shell guile guile-wisp -- \ wisp2lisp hoot.w > hoot.scm && \ guix shell guile-hoot guile-next -- \ guild compile-wasm -o hoot.wasm hoot.scm #+end_src Get reflection tools from Guile Hoot (licensed Apache 2.0) with Guix: #+latex: \ThisLLCornerWallPaper{0.26}{programming-scheme-hoot}% #+begin_src bash guix shell guile-hoot guile-next -- bash -c \ 'cp $GUIX_ENVIRONMENT/share/*hoot/*/re*/{*.js,*.wasm} ./' #+end_src
*Browser again: clientside wasm.* @@html:<a id="deploy-hoot-wasm" name="deploy-hoot-wasm"></a>@@ To run clientside, you can package your project with [[https://spritely.institute/hoot/][Hoot]]: build an interface and compile to wasm: #+begin_src wisp :results output :tangle hoot.w ;; file: hoot.w use-modules : hoot ffi ;; guile specific import ;; the interface define-foreign document-body "document" "body" . -> (ref null extern) define-foreign make-text-node "document" "createTextNode" . (ref string) -> (ref null extern) define-foreign append-child! "element" "appendChild" . (ref null extern) (ref null extern) . -> (ref null extern) ;; your code append-child! : document-body make-text-node "Hello, world!" #+end_src Transpile with =wisp2lisp= and =guild compile-wasm=. If you run Guix: #+begin_src bash guix shell guile guile-wisp -- \ wisp2lisp hoot.w > hoot.scm && \ guix shell guile-hoot guile-next -- \ guild compile-wasm -o hoot.wasm hoot.scm #+end_src Get reflection tools from Guile Hoot (licensed Apache 2.0) with Guix: #+latex: \ThisLLCornerWallPaper{0.26}{programming-scheme-hoot}% #+begin_src bash guix shell guile-hoot guile-next -- bash -c \ 'cp $GUIX_ENVIRONMENT/share/*hoot/*/re*/{*.js,*.wasm} ./' #+end_src
Arne Babenhauserheide
@ArneBab@rollenspiel.social  ·  activity timestamp 3 weeks ago
Load your interface (includes startup time optimizations): #+begin_src js :tangle hoot.js /* file: hoot.js */ var f = window.fetch; window.fetch = (inp, ini) => f(inp, {credentials: 'include', mode: 'no-cors', ...ini}); window.addEventListener("load", () => fetch("hoot.wasm") .then(r => r.arrayBuffer()) .then(bytes => Scheme.load_main(bytes, { user_imports: { // mapped via define-foreign document: { body() { return document.body; }, createTextNode: Document.prototype .createTextNode.bind(document) }, element: { appendChild(parent, child) { return parent.appendChild(child);}}}}))); #+end_src Include =reflect.js= and =hoot.js= from a HTML page: #+begin_src html :tangle hoot.html <!DOCTYPE html> <!-- file: hoot.html --> <html><head><title>Hello Hoot</title> <script type="text/javascript" src="reflect.js"></script> <script type="text/javascript" src="hoot.js"></script> <link rel="preload" as="fetch" href="hoot.wasm"></link> <link rel="preload" as="fetch" href="wtf8.wasm"></link> <link rel="preload" as="fetch" href="reflect.wasm"></link> </head><body><h1>Hoot Test</h1></body></html> #+end_src For local testing, hoot provides a minimal webserver: #+begin_src bash guix shell guile-hoot guile-next -- \ guile -c '((@ (hoot web-server) serve))' #+end_src
Load your interface (includes startup time optimizations): #+begin_src js :tangle hoot.js /* file: hoot.js */ var f = window.fetch; window.fetch = (inp, ini) => f(inp, {credentials: 'include', mode: 'no-cors', ...ini}); window.addEventListener("load", () => fetch("hoot.wasm") .then(r => r.arrayBuffer()) .then(bytes => Scheme.load_main(bytes, { user_imports: { // mapped via define-foreign document: { body() { return document.body; }, createTextNode: Document.prototype .createTextNode.bind(document) }, element: { appendChild(parent, child) { return parent.appendChild(child);}}}}))); #+end_src Include =reflect.js= and =hoot.js= from a HTML page: #+begin_src html :tangle hoot.html <!DOCTYPE html> <!-- file: hoot.html --> <html><head><title>Hello Hoot</title> <script type="text/javascript" src="reflect.js"></script> <script type="text/javascript" src="hoot.js"></script> <link rel="preload" as="fetch" href="hoot.wasm"></link> <link rel="preload" as="fetch" href="wtf8.wasm"></link> <link rel="preload" as="fetch" href="reflect.wasm"></link> </head><body><h1>Hoot Test</h1></body></html> #+end_src For local testing, hoot provides a minimal webserver: #+begin_src bash guix shell guile-hoot guile-next -- \ guile -c '((@ (hoot web-server) serve))' #+end_src
Load your interface (includes startup time optimizations): #+begin_src js :tangle hoot.js /* file: hoot.js */ var f = window.fetch; window.fetch = (inp, ini) => f(inp, {credentials: 'include', mode: 'no-cors', ...ini}); window.addEventListener("load", () => fetch("hoot.wasm") .then(r => r.arrayBuffer()) .then(bytes => Scheme.load_main(bytes, { user_imports: { // mapped via define-foreign document: { body() { return document.body; }, createTextNode: Document.prototype .createTextNode.bind(document) }, element: { appendChild(parent, child) { return parent.appendChild(child);}}}}))); #+end_src Include =reflect.js= and =hoot.js= from a HTML page: #+begin_src html :tangle hoot.html <!DOCTYPE html> <!-- file: hoot.html --> <html><head><title>Hello Hoot</title> <script type="text/javascript" src="reflect.js"></script> <script type="text/javascript" src="hoot.js"></script> <link rel="preload" as="fetch" href="hoot.wasm"></link> <link rel="preload" as="fetch" href="wtf8.wasm"></link> <link rel="preload" as="fetch" href="reflect.wasm"></link> </head><body><h1>Hoot Test</h1></body></html> #+end_src For local testing, hoot provides a minimal webserver: #+begin_src bash guix shell guile-hoot guile-next -- \ guile -c '((@ (hoot web-server) serve))' #+end_src
*Browser again: clientside wasm.* @@html:<a id="deploy-hoot-wasm" name="deploy-hoot-wasm"></a>@@ To run clientside, you can package your project with [[https://spritely.institute/hoot/][Hoot]]: build an interface and compile to wasm: #+begin_src wisp :results output :tangle hoot.w ;; file: hoot.w use-modules : hoot ffi ;; guile specific import ;; the interface define-foreign document-body "document" "body" . -> (ref null extern) define-foreign make-text-node "document" "createTextNode" . (ref string) -> (ref null extern) define-foreign append-child! "element" "appendChild" . (ref null extern) (ref null extern) . -> (ref null extern) ;; your code append-child! : document-body make-text-node "Hello, world!" #+end_src Transpile with =wisp2lisp= and =guild compile-wasm=. If you run Guix: #+begin_src bash guix shell guile guile-wisp -- \ wisp2lisp hoot.w > hoot.scm && \ guix shell guile-hoot guile-next -- \ guild compile-wasm -o hoot.wasm hoot.scm #+end_src Get reflection tools from Guile Hoot (licensed Apache 2.0) with Guix: #+latex: \ThisLLCornerWallPaper{0.26}{programming-scheme-hoot}% #+begin_src bash guix shell guile-hoot guile-next -- bash -c \ 'cp $GUIX_ENVIRONMENT/share/*hoot/*/re*/{*.js,*.wasm} ./' #+end_src
*Browser again: clientside wasm.* @@html:<a id="deploy-hoot-wasm" name="deploy-hoot-wasm"></a>@@ To run clientside, you can package your project with [[https://spritely.institute/hoot/][Hoot]]: build an interface and compile to wasm: #+begin_src wisp :results output :tangle hoot.w ;; file: hoot.w use-modules : hoot ffi ;; guile specific import ;; the interface define-foreign document-body "document" "body" . -> (ref null extern) define-foreign make-text-node "document" "createTextNode" . (ref string) -> (ref null extern) define-foreign append-child! "element" "appendChild" . (ref null extern) (ref null extern) . -> (ref null extern) ;; your code append-child! : document-body make-text-node "Hello, world!" #+end_src Transpile with =wisp2lisp= and =guild compile-wasm=. If you run Guix: #+begin_src bash guix shell guile guile-wisp -- \ wisp2lisp hoot.w > hoot.scm && \ guix shell guile-hoot guile-next -- \ guild compile-wasm -o hoot.wasm hoot.scm #+end_src Get reflection tools from Guile Hoot (licensed Apache 2.0) with Guix: #+latex: \ThisLLCornerWallPaper{0.26}{programming-scheme-hoot}% #+begin_src bash guix shell guile-hoot guile-next -- bash -c \ 'cp $GUIX_ENVIRONMENT/share/*hoot/*/re*/{*.js,*.wasm} ./' #+end_src
*Browser again: clientside wasm.* @@html:<a id="deploy-hoot-wasm" name="deploy-hoot-wasm"></a>@@ To run clientside, you can package your project with [[https://spritely.institute/hoot/][Hoot]]: build an interface and compile to wasm: #+begin_src wisp :results output :tangle hoot.w ;; file: hoot.w use-modules : hoot ffi ;; guile specific import ;; the interface define-foreign document-body "document" "body" . -> (ref null extern) define-foreign make-text-node "document" "createTextNode" . (ref string) -> (ref null extern) define-foreign append-child! "element" "appendChild" . (ref null extern) (ref null extern) . -> (ref null extern) ;; your code append-child! : document-body make-text-node "Hello, world!" #+end_src Transpile with =wisp2lisp= and =guild compile-wasm=. If you run Guix: #+begin_src bash guix shell guile guile-wisp -- \ wisp2lisp hoot.w > hoot.scm && \ guix shell guile-hoot guile-next -- \ guild compile-wasm -o hoot.wasm hoot.scm #+end_src Get reflection tools from Guile Hoot (licensed Apache 2.0) with Guix: #+latex: \ThisLLCornerWallPaper{0.26}{programming-scheme-hoot}% #+begin_src bash guix shell guile-hoot guile-next -- bash -c \ 'cp $GUIX_ENVIRONMENT/share/*hoot/*/re*/{*.js,*.wasm} ./' #+end_src
GitRoot
@forge@gts.gitroot.dev  ·  activity timestamp 4 weeks ago
GitRoot
@forge@gts.gitroot.dev  ·  activity timestamp 4 weeks ago
jbz
@jbz@indieweb.social  ·  activity timestamp last month
Martin Geisler
@mgeisler@ohai.social  ·  activity timestamp last month
Home Login