Unable to set variables or log to console from <script> tag

This issue has been tracked since 2022-07-26.

Hi, I am trying to use HyperScript to construct a JSON object based on some input fields. But I am not able to get the simple example from the docs working. I have this in my HTML:

<head>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
    <script type="text/hyperscript">
        set x to {name : "Joe", age: 35}
        log x.name
        log x['name']
    </script>
</body

But console shows the following error:

[email protected]:1 hyperscript errors were found on the following element: script 

 variables declared at the feature level must be element scoped.

    log x.name
     ^^
 Error: variables declared at the feature level must be element scoped.

    log x.name
     ^^
    at a.raiseParseError (https://unpkg.com/[email protected]:1:11785)
    at a.raiseParseError (https://unpkg.com/[email protected]:1:11843)
    at https://unpkg.com/[email protected]:1:55181
    at n (https://unpkg.com/[email protected]:1:11188)
    at https://unpkg.com/[email protected]:1:8747
    at a.parseElement (https://unpkg.com/[email protected]:1:10515)
    at a.requireElement (https://unpkg.com/[email protected]:1:10706)
    at https://unpkg.com/[email protected]:1:47578
    at a.parseElement (https://unpkg.com/[email protected]:1:10515)
    at a.parseHyperScript (https://unpkg.com/[email protected]:1:11895)

Since this is all contained within the <script> tag, is the x variable scoped locally or at the element level? Either way, the issue persists if I try to declare the variable at the element or global levels.

(I'm not sure if log should use :x or just x, but I tried it both ways, same for global $x)

<script type="text/hyperscript">
    set :x to {name : "Joe", age: 35}
    log :x.name
    log :x['name']
</script>
<script type="text/hyperscript">
    set $x to {name : "Joe", age: 35}
    log $x.name
    log $x['name']
</script>

And just to sanity check, I confirmed HyperScript is working. This triggers an alert prompt:

<div _="on click call alert('You clicked me!')">
  Click Me!
</div>

Am I doing something wrong, or is this a bug?

rozek wrote this answer on 2022-08-18

Well,

I'm new to _hyperscript myself, but I've also already run across the limitation, that all elements of the kind <script type="text/hyperscript"> must be placed before the <script> element which loads _hyperscript or parsing will fail.

This limitation is mentioned in the docs but surprises me as well - particularly as "mutation observers" are even part of the language itself and, thus, could also be used in its implementation...

kartzke wrote this answer on 2022-08-18

Thanks for the quick suggestion. I tried putting the inline script above the CDN reference, like below. I tried moving this to the <head> and the <body>, but I still get the same errors in both places. Also tried log $x.name... no dice.

   <script type="text/hyperscript">
        set $x to {name : "Joe", age: 35}
        log x.name
    </script>
    
    <script src="https://unpkg.com/hypersc[email protected]"></script>
rozek wrote this answer on 2022-08-18

But that's simple. Just change your code to

  init
    set $x to {name : "Joe", age: 35}
    log $x.name
  end

and don't forget $ in front of the second x

With greetings from Germany,

Andreas Rozek

rozek wrote this answer on 2022-08-18

By the way,

I just checked if <script type="text/hyperscript"> elements really have to be placed before <script src="https://unpkg.com/[email protected]"></script> - and they have not!

That means: its fine to append <script type="text/hyperscript"> elements to the end of a document body!

kartzke wrote this answer on 2022-08-18

Awesome, it works now! Thanks for the help with this. 🍻

More Details About Repo
Owner Name bigskysoftware
Repo Name _hyperscript
Full Name bigskysoftware/_hyperscript
Language JavaScript
Created Date 2020-05-27
Updated Date 2022-11-25
Star Count 1265
Watcher Count 18
Fork Count 75
Issue Count 86

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date