search

kbrsh / moon

🌙 The minimal & fast library for functional user interfaces
https://moonjs.org
MIT License
6k stars 200 forks source link

Just trying example - syntax error #271

Closed nottledim closed 4 years ago

nottledim commented 4 years ago

Using minimal snippet from example:

 <html> 
 <body>
     <div id="root"></div>
 </body>
 <script src="https://unpkg.com/moon"></script>
 <script src="https://unpkg.com/moon-browser"></script>
 <!-- As an inline script -->
 <script type="text/moon">
    <!-- Sets view and data drivers -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!-- Runs the app -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
 </script>
  </html>

Results in:

Uncaught SyntaxError: Unexpected token ':'
    at t (moon-browser.min.js:7)
    at HTMLDocument.<anonymous> (moon-browser.min.js:7)
HaxSam commented 4 years ago

Hey you forgot to define viewTodos

const viewTodos = ({ data }) => 
  <ul children=(data.todos.map(todo => 
    <li>{todo}</li> 
  ))/>;

Also you have to say witch elements do you want to use with

const { ul, li } = Moon.view.m

But for the next time rtfm

nottledim commented 4 years ago

Yes, but I still get a syntax error with the full code (or your additions).

But for the next time rtfm

I'm trying

Thanks for your help.

kbrsh commented 4 years ago

In Moon, self closing tags must be specified with a closing />. Also, arrow functions need parentheses around the return value if it's an object (this is a JS syntax thing, not moon).

Try this:

Moon.use({
   data: Moon.data.driver,
   view: Moon.view.driver("#root")
});

Moon.run(() => ({
   data: [],
   view: <viewTodos data=[]/>
}));
nottledim commented 4 years ago

It probably was that closing tag, I didn't see that. It was code copied from a example in a blog. When I replaced it with the similar code on the moon website it worked. I misread the browser error message as an error with the library ;-) Live and learn. I'm sorry to have wasted your time.

kbrsh commented 4 years ago

@nottledim Don't worry about it! It took me a while to see the error too, the object return syntax always gets me. As for Moon, better syntax errors are coming in the next beta. Hope you enjoyed trying it out! :)