search

bigskysoftware / _hyperscript

a small scripting language for the web
BSD 2-Clause "Simplified" License
3.14k stars 149 forks source link

Hyperscript debugger UI form error on being element scoped in set Feature #hdb #breakpoint #set #feature #539

Open charles-prof opened 5 months ago

charles-prof commented 5 months ago

Calling breakpoint causes this error whether inline or on a hyperscript function (def)

My code and script order 


<body>
        <h1>Hyperscript Playground</h1>
        <main _="init fetch /home.html then stopAndReveal(it) put it into me"></main>
        <script type="text/hyperscript">
            def stopAndReveal(it)
              set :x to it
              log :x
              breakpoint
              return it
            end
        </script>
        <script src="_hyperscript.js"></script>
        <script src="hdb.js"></script>
    </body>

The original error message 


hyperscript errors were found on the following element: 
<form id="console-form" data-hist="0" _="on submit\n\t\t\t\tsend …to #console-input.value"> 

 variables declared at the feature level must be element scoped.

                halt default
     ^^

 raiseParseError@http://localhost:8080/_hyperscript.js:1288:25
raiseParseError@http://localhost:8080/_hyperscript.js:1298:20
hyperscriptCoreGrammar/<@http://localhost:8080/_hyperscript.js:4657:28
featureDefinitionWrapper@http://localhost:8080/_hyperscript.js:1234:48
Parser/<@http://localhost:8080/_hyperscript.js:1011:28
parseElement@http://localhost:8080/_hyperscript.js:1153:53
requireElement@http://localhost:8080/_hyperscript.js:1175:31
hyperscriptCoreGrammar/<@http://localhost:8080/_hyperscript.js:4123:42
parseElement@http://localhost:8080/_hyperscript.js:1153:53
parseHyperScript@http://localhost:8080/_hyperscript.js:1306:31
initElement@http://localhost:8080/_hyperscript.js:1958:50
processNode/<@http://localhost:8080/_hyperscript.js:1936:26
forEach@http://localhost:8080/_hyperscript.js:1535:25
processNode@http://localhost:8080/_hyperscript.js:1935:22
HDB.prototype.ui@http://localhost:8080/hdb.js:527:17
HDB.prototype.break@http://localhost:8080/hdb.js:40:9
op@http://localhost:8080/hdb.js:31:18
unifiedEval@http://localhost:8080/_hyperscript.js:1730:40
unifiedExec@http://localhost:8080/_hyperscript.js:1604:37
addCommand/commandDefinitionWrapper/commandElement.execute@http://localhost:8080/_hyperscript.js:1216:40
func@http://localhost:8080/_hyperscript.js:4627:31
op@http://localhost:8080/_hyperscript.js:3362:42
unifiedEval@http://localhost:8080/_hyperscript.js:1730:40
evaluate@http://localhost:8080/_hyperscript.js:3366:40
unifiedEval@http://localhost:8080/_hyperscript.js:1693:46
unifiedExec@http://localhost:8080/_hyperscript.js:1604:37
unifiedExec/<@http://localhost:8080/_hyperscript.js:1627:30
promise callback*unifiedExec@http://localhost:8080/_hyperscript.js:1626:26
addCommand/commandDefinitionWrapper/commandElement.execute@http://localhost:8080/_hyperscript.js:1216:40
handler@http://localhost:8080/_hyperscript.js:4680:40
setTimeout handler*install@http://localhost:8080/_hyperscript.js:4685:35
apply@http://localhost:8080/_hyperscript.js:4134:33
initElement@http://localhost:8080/_hyperscript.js:1960:37
processNode/<@http://localhost:8080/_hyperscript.js:1936:26
forEach@http://localhost:8080/_hyperscript.js:1535:25
processNode@http://localhost:8080/_hyperscript.js:1935:22
browserInit/</<@http://localhost:8080/_hyperscript.js:7577:22
EventListener.handleEvent*ready@http://localhost:8080/_hyperscript.js:7587:26
browserInit/<@http://localhost:8080/_hyperscript.js:7575:26
promise callback*browserInit@http://localhost:8080/_hyperscript.js:7575:10
@http://localhost:8080/_hyperscript.js:12:54
@http://localhost:8080/_hyperscript.js:14:3
_hyperscript.js:1970:33
    initElement http://localhost:8080/_hyperscript.js:1970
    processNode http://localhost:8080/_hyperscript.js:1936
    forEach http://localhost:8080/_hyperscript.js:1535
    processNode http://localhost:8080/_hyperscript.js:1935
    ui http://localhost:8080/hdb.js:527
    break http://localhost:8080/hdb.js:40
    op http://localhost:8080/hdb.js:31
    unifiedEval http://localhost:8080/_hyperscript.js:1730
    unifiedExec http://localhost:8080/_hyperscript.js:1604
    execute http://localhost:8080/_hyperscript.js:1216
    func http://localhost:8080/_hyperscript.js:4627
    op http://localhost:8080/_hyperscript.js:3362
    unifiedEval http://localhost:8080/_hyperscript.js:1730
    evaluate http://localhost:8080/_hyperscript.js:3366
    unifiedEval http://localhost:8080/_hyperscript.js:1693
    unifiedExec http://localhost:8080/_hyperscript.js:1604
    unifiedExec http://localhost:8080/_hyperscript.js:1627
    (Async: promise callback)
    unifiedExec http://localhost:8080/_hyperscript.js:1626
    execute http://localhost:8080/_hyperscript.js:1216
    handler http://localhost:8080/_hyperscript.js:4680
    (Async: setTimeout handler)
    install http://localhost:8080/_hyperscript.js:4685
    apply http://localhost:8080/_hyperscript.js:4134
    initElement http://localhost:8080/_hyperscript.js:1960
    processNode http://localhost:8080/_hyperscript.js:1936
    forEach http://localhost:8080/_hyperscript.js:1535
    processNode http://localhost:8080/_hyperscript.js:1935
    browserInit http://localhost:8080/_hyperscript.js:7577
    (Async: EventListener.handleEvent)
    ready http://localhost:8080/_hyperscript.js:7587
    browserInit http://localhost:8080/_hyperscript.js:7575
    (Async: promise callback)
    browserInit http://localhost:8080/_hyperscript.js:7575
    <anonymous> http://localhost:8080/_hyperscript.js:12
    <anonymous> http://localhost:8080/_hyperscript.js:14
y2kbugger commented 5 months ago

Getting this as well on. Tested on versions 0.9.{10,11,12} in the latest chrome and firefox.

This causes the expression evaluation not to work, and the page reloads when hitting enter.

Hitting this the first time trying HBD today, without this issue I would have continued thinking I was doing something wrong with the installation etc.

charles-prof commented 5 months ago

My intuition "set is ambiguous"

set is implemented as a command and also a feature.

How to differentiate when calling ?

This is being set is called on top level (I think) as a feature

(I tried to use put for temporary workaround - I failed in getting it to work)

y2kbugger commented 5 months ago

I'm left wondering how no one else noticed this. Surely we are doing something different than others?

Not sure what you mean about the set vs put (unless you are talking about in the HDB implementation. I even hit it on this, when there is no set.

<a href="#" _="on click breakpoint">Click Me</a>
charles-prof commented 5 months ago

Sorry I mean the set used in the source of the UI (hdb.js)

செவ்., 21 மே, 2024, 01:11க்கு, Zak Kohler @.***> எழுதியது:

I'm left wondering how no one else noticed this. Surely we are doing something different than others?

Not sure what you mean about the set vs put (unless you are talking about in the HDB implementation. I even hit it on this, when there is no set.

Click Me

— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/_hyperscript/issues/539#issuecomment-2121084500, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQK2QCJF3IOSJMP25OJX5PLZDJGW3AVCNFSM6AAAAABH7CMITCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRRGA4DINJQGA . You are receiving this because you authored the thread.Message ID: @.***>

y2kbugger commented 5 months ago

image

https://github.com/bigskysoftware/_hyperscript/blob/1e65fb101e2953f680ce958f7de31c266356ad87/src/hdb.js#L342

Ok you were close on the setCommand vs setFeature thing. An extra end was pushing the set to be parsed as feature.

But how was this mistake committed 2 years ago and only noticed today, by two people within 11 hours? Doesn't anyone use the expression eval feature of hdb?

charles-prof commented 5 months ago

I think hdb is only needed when someone writes their own hyperscript behaviours/functions.

My journey to this....

I was struggling with hyperscript events with my htmx/_hyperscript/shoelace project (just for learning)

Shoelace's <sl-include> web component fetches html content and triggers sl-load custom event.

Htmx captures it with hx-on:sl-load =

But hyperscript gave an error with _ ="on sl-load log me"

So I (found the right way to do it) wrapped with single quotes like this _ ="on 'sl-load' log me"

(Request: This little detail can be added in the hyperscript about event name convention)

  1. In the process I used devtools first and set breakpoints in the hyperscript.js source lines

  2. I never needed hdb for debugging honestly (for simple coding needs)

  3. The struggling with events started when I started to fetch content with all the three (shoelace's, hx-on/hx-trigger, _ = on)

  4. That struggle made me look into the source code (parallely reading the docs again and again)

  5. That struggle taught me about the htmx.process (in docs), _hyperscript.processNode (only refered on the put command as far as I know)

(Request: add a note about _hyperscript.processNode for contents loaded after the browserInit (dynamic/ajax content) with strong suggestion to call processNode manually in such scenario)

[Last note

I just started using both htmx and hyperscript in the past two days

I know early about htmx - top ranked in the best of js but now only I had chance to use it (I kind of bookmarked it for the future as I liked inline ajax and its concise syntax)

]

Finally,

is there any (user or community maintained ) library of hyperscript functions/behaviours available ??

செவ்., 21 மே, 2024, 01:46க்கு, Zak Kohler @.***> எழுதியது:

image.png (view on web) https://github.com/bigskysoftware/_hyperscript/assets/6101677/9724c1a2-f4ba-4ea7-80b2-abd3bad1bf39

https://github.com/bigskysoftware/_hyperscript/blob/1e65fb101e2953f680ce958f7de31c266356ad87/src/hdb.js#L342

Ok you were close on the setCommand vs setFeature thing. An extra end was pushing the set to be parsed as feature.

But how was this mistake committed 2 years ago and only noticed today, by two people within 11 hours? Doesn't anyone use the expression eval feature of hdb?

— Reply to this email directly, view it on GitHub https://github.com/bigskysoftware/_hyperscript/issues/539#issuecomment-2121138813, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQK2QCPCHLTTDDAVWP7MQT3ZDJKZBAVCNFSM6AAAAABH7CMITCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRRGEZTQOBRGM . You are receiving this because you authored the thread.Message ID: @.***>