From d71f326d881024ac3216e8c5edde709848a947b6 Mon Sep 17 00:00:00 2001 From: Hans Dijkema Date: Mon, 1 Jun 2026 20:18:21 +0200 Subject: [PATCH] js-maker integration part 1 --- racket-webview.rkt | 305 +++++++++++++++++++++++++++++++-------------- 1 file changed, 211 insertions(+), 94 deletions(-) diff --git a/racket-webview.rkt b/racket-webview.rkt index b4cade4..8872415 100644 --- a/racket-webview.rkt +++ b/racket-webview.rkt @@ -398,10 +398,15 @@ (define-syntax with-id->el - (syntax-rules () + (syntax-rules (<-) + ((_ <- id el e1 ...) + (js/expression (let ((el (send document getElementById (inject id)))) + e1 ...))) ((_ id el e1 ...) - (js (let ((el (send document getElementById (eval id)))) - e1 ...))))) + (js (let ((el (send document getElementById (inject id)))) + e1 ...))) + ) + ) (define-syntax with-id (syntax-rules () @@ -427,9 +432,13 @@ (define-syntax with-selector (syntax-rules () ((_ selector func) - (format "return window.rkt_with_selector('~a', ~a)" - (esc-quote selector) - func)))) + (js + (return (send window rkt_with_selector (inject selector) func)))) + ) + ) +; (format "return window.rkt_with_selector('~a', ~a)" +; (esc-quote selector) +; func)))) (define (make-exts-filter list-of-pe) (define (mef pe) @@ -794,7 +803,7 @@ (-> wv-win? symbol? (or/c string? xexpr?) symbol?) (if (string? html) (let ((r (webview-call-js wv - (with-id->el id el + (with-id->el <- id el (set! (js-dot el innerHTML) (eval html)) #t)))) ;(with-id id el @@ -808,7 +817,27 @@ (define/contract (webview-set-value! wv id val) (-> wv-win? symbol? (or/c symbol? string? number? boolean? g:date? g:time? g:datetime? rgba?) symbol?) (webview-run-js wv - (with-id id el + (with-id->el id el + (if (or + (= (js-dot el type) "checkbox") + (= (js-dot el type) "radio")) + (set! (js-dot el checked) + (inject + (if (eq? val #f) #f #t))) + (set! (js-dot el value) + (inject + (cond + ((g:date? val) (date->string val)) + ((g:time? val) (time->string val)) + ((g:datetime? val) (datetime->string val)) + ((rgba? val) (rgba->hex val)) + (else val))))) + ) + ) + ) + +#| +(with-id id el ((string-append "if (el.type == 'checkbox' || el.type == 'radio') {\n" " el.checked = ~a;\n" @@ -831,19 +860,25 @@ ) ) ) +|# (define/contract (webview-value wv id) (-> wv-win? symbol? (or/c string? boolean?)) (let ((v (webview-call-js wv - (with-id id el - ((string-append "let f = function() {\n" - " if (el.type == 'checkbox' || el.type == 'radio') {\n" - " return '' + el.checked;\n" - " } else {\n" - " return el.value;\n" - " }\n" - "};\n")) - -> "f()")))) + (with-id->el <- id el + (if (or (= (js-dot el type) "checkbox") + (= (js-dot el type) "radio")) + (js-dot el checked) + (js-dot el value)))))) + ;(with-id id el + ; ((string-append "let f = function() {\n" + ; " if (el.type == 'checkbox' || el.type == 'radio') {\n" + ; " return '' + el.checked;\n" + ; " } else {\n" + ; " return el.value;\n" + ; " }\n" + ; "};\n")) + ; -> "f()")))) (if (eq? v #f) #f v))) @@ -875,94 +910,151 @@ (let ((sel (if (symbol? id-or-selector) (format "#~a" id-or-selector) id-or-selector)) - (cl (mk-js-array class)) + ;(cl (mk-js-array class)) + (cl (if (list? class) class (list class))) ) (webview-call-js wv (with-selector sel - (format - (js-code - "function(id, el) {" - " let cl = ~a;" - " cl.forEach(function(c) {" - " el.classList.add(c);" - " });" - " return id;" - "}") cl))) + (λ (id el) + (let ((cl (inject cl))) + (send cl forEach + (λ (c) + (send (js-dot el classList) add c) + ) + ) + id))) + ) ) ) + + +; (format +; (js-code +; "function(id, el) {" +; " let cl = ~a;" +; " cl.forEach(function(c) {" +; " el.classList.add(c);" +; " });" +; " return id;" +; "}") cl))) +; ) +; ) (define/contract (webview-remove-class! wv id-or-selector class) (-> wv-win? (or/c symbol? string?) (or/c symbol? string? list?) (or/c hash? boolean?)) (let ((sel (if (symbol? id-or-selector) (format "#~a" id-or-selector) id-or-selector)) - (cl (mk-js-array class)) + (cl (if (list? class) class (list class))) ) (webview-call-js wv (with-selector sel - (format - (js-code - "function(id, el) {" - " let cl = ~a;" - " cl.forEach(function(c) {" - " el.classList.remove(c);" - " });" - " return id;" - "}") cl)) - ) + (λ (id el) + (let ((cl (inject cl))) + (send cl forEach + (λ (c) + (send (js-dot el classList) remove c)))) + id))) ) ) + +; (with-selector sel +; (format +;; (js-code +; "function(id, el) {" +; " let cl = ~a;" +; " cl.forEach(function(c) {" +; " el.classList.remove(c);" +; " });" +; " return id;" +; "}") cl)) +; ) +; ) +; ) (define/contract (webview-set-style! wv selector style-entries) (-> wv-win? (or/c symbol? string?) (or/c kv? list-of-kv?) (or/c hash? boolean?)) (let ((sel (if (symbol? selector) (format "#~a" selector) selector)) - (cl (mk-js-array (if (kv? style-entries) - (list style-entries) - style-entries))) + ;(cl (mk-js-array (if (kv? style-entries) + ; (list style-entries) + ; style-entries))) + (cl (if (kv? style-entries) + (list style-entries) + style-entries)) ) (webview-call-js wv (with-selector sel - (format - (js-code - "function(id, el) {" - " let cl = ~a;" - " cl.forEach(function(st) {" - " el.style[st[0]] = st[1];" - " });" - " return id;" - "}") cl)) + (λ (id el) + (let ((cl (inject cl))) + (send cl forEach + (λ (st) + (set! (js-ref + (js-dot el style) + (js-ref st 0)) + (js-ref st 1)))) + id))) ) ) ) +; (format +; (js-code +; "function(id, el) {" +; " let cl = ~a;" +; " cl.forEach(function(st) {" +; " el.style[st[0]] = st[1];" +; " });" +; " return id;" +; "}") cl)) +; ) +; ) +; ) (define/contract (webview-get-style wv selector styles) (-> wv-win? (or/c symbol? string?) (or/c symbol? list-of-symbol?) (or/c list? hash?)) (let ((sel (if (symbol? selector) (format "#~a" selector) selector)) - (cl (mk-js-array (if (symbol? styles) - (list styles) - styles))) + (cl (if (symbol? styles) + (list styles) + styles)) + ;(cl (mk-js-array (if (symbol? styles) + ; (list styles) + ; styles))) ) (let ((r (webview-call-js wv (with-selector sel - (format - (js-code - "function(id, el) {" - " let cl = ~a;" - " let r = {};" - " cl.forEach(function(st) {" - " let stl = window.getComputedStyle(el);" - " r[st] = stl[st];" - " });" - " return { id: id, style: r };" - "}") cl)) - ))) + (λ (id el) + (let ((cl (inject cl)) + (r (make-hash))) + (send cl forEach + (λ (st) + (let ((stl (send window getComputedStyle el))) + (set! (js-ref r st) (js-ref stl st))))) + (make-hash (list + (list 'id id) + (list 'style r)))))) + ) + )) +; (format +; (js-code +; "function(id, el) {" +; " let cl = ~a;" +; " let r = {};" +; " cl.forEach(function(st) {" +; " let stl = window.getComputedStyle(el);" +; " r[st] = stl[st];" +; " });" +; " return { id: id, style: r };" +; "}") cl)) +; ))) (if (eq? r #f) #f (let ((h (hash-ref r 'with-ids))) - (let ((l (map (λ (e) (cons (string->symbol (hash-ref e 'id)) (hash-ref e 'style))) h))) + (let ((l (map (λ (e) + (cons + (string->symbol (hash-ref e 'id)) + (hash-ref e 'style))) h))) (if (symbol? selector) (cdr (car l)) l)))) @@ -976,25 +1068,35 @@ (let ((sel (if (symbol? selector) (format "#~a" selector) selector)) - (cl (mk-js-array (if (symbol? style-entries) - (list style-entries) - style-entries))) + (cl (if (symbol? style-entries) + (list style-entries) + style-entries)) ) (webview-call-js wv (with-selector sel - (format - (js-code - "function(id, el) {" - " let cl = ~a;" - " cl.forEach(function(st) {" - " el.style[st] = '';" - " });" - " return id;" - "}") cl) - ) - ) + (λ (id el) + (let ((cl (inject cl))) + (send cl forEach + (λ (st) + (set! (js-ref + (js-dot el style) + st) ""))) + id)))) ) ) +; (format +; (js-code +; "function(id, el) {" +; " let cl = ~a;" +; " cl.forEach(function(st) {" +; " el.style[st] = '';" +; " });" +; " return id;" +; "}") cl) +; ) +; ) +; ) +; ) (define/contract (webview-set-attr! wv selector attr-entries) (-> wv-win? (or/c symbol? string?) @@ -1013,29 +1115,44 @@ ([rgba? v] (rgba->hex v)) (else (format "~a" v)))) )) ae*)) - (cl (mk-js-array ae**)) + ;(cl (mk-js-array ae**)) + (cl ae**) ) + (display cl) (webview-call-js wv (with-selector sel - (format - (js-code - "function(id, el) {" - " let cl = ~a;" - " cl.forEach(function(av) {" - " el.setAttribute(av[0], av[1]);" - " });" - " return id;" - "}") cl)) - ) + (λ (id el) + (let ((cl (inject cl))) + (send cl forEach + (λ (av) + (send el setAttribute (js-ref av 0) + (js-ref av 1)))) + id)))) ) ) +; (with-selector sel +; (format +; (js-code +; "function(id, el) {" +; " let cl = ~a;" +; " cl.forEach(function(av) {" +; " el.setAttribute(av[0], av[1]);" +; " });" +; " return id;" +; "}") cl)) +; ) +; ) +; ) + (define/contract (webview-attr wv id attr) (-> wv-win? symbol? (or/c symbol? string?) (or/c string? boolean?)) (let ((v (webview-call-js wv - (with-id id el - -> (format "el.getAttribute('~a');" attr)) - ))) + (with-id->el <- id el + (send el getAttribute (eval attr)))))) + ;(with-id id el + ; -> (format "el.getAttribute('~a');" attr)) + ;))) (if (eq? v 'null) #f v)