search

liferay / senna.js

:seedling: A blazing-fast Single Page Application engine
http://sennajs.com
Other
1.72k stars 171 forks source link

there are no examples of the configuration via meta attributes using "senna-route" #139

Closed rotty3000 closed 3 years ago

rotty3000 commented 8 years ago

Expected behaviour

I'm interested in understanding the configuration of the following:

<link rel="senna-route" href="regex:\w+\.html(#\w+)?" type="FooScreen" />

Actual behaviour

There's no documentation to explain the relevance of the attributes or the syntax supported by them.

eduardolundgren commented 8 years ago

When starting senna from JavaScript, routes can be added by calling app.addRoutes(...) directly.

Another way to initialize senna is from data attributes, data-senna. In this case, you can use <link rel="senna-route" href="regex:\w+\.html(#\w+)?" type="FooScreen" /> elements to add routes from markup instead.

It basically scans those elements and add routes with information extract from them: https://github.com/liferay/senna.js/blob/master/src/app/AppDataAttributeHandler.js#L134

We definitely need docs docs to it.

rotty3000 commented 8 years ago

Thanks Eduardo, given the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="senna-route" href="regex:.*" type="FooScreen" />
  <script src="senna-min.js"></script>
</head>
<body data-senna data-senna-surface>
  <a href="1.html">Page 1</a> / <a href="2.html">Page 2</a> / <a href="3.html">Page 3</a>
  <br />
  <a href="1.html#f1">Fragment 1</a> / <a href="1.html#f2">Fragment 2</a> / <a href="1.html#f3">Fragment 3</a>
  <h3 id="f1" style="margin-bottom: 20em;background-color:red;">Section 1</h3>
  <h3 id="f2" style="margin-bottom: 20em;background-color:green;">Section 2</h3>
  <h3 id="f3" style="margin-bottom: 20em;background-color:blue;">Section 3</h3>
</body>
</html>

when the fragment urls are used the router complains: No route for .../1.html#f1

eduardolundgren commented 8 years ago

Senna supports fragment navigation in routed paths, although it handles it as regular fragments, not as regular request-able pages (as the native browser behavior for fragments).

On your example, senna wasn't able to find FooScreen reference, then it was failing to register the routes, therefore you've got the No route for ....

Since you are using html pages you can simply change the screen mapped on the annotation to senna.HtmlScreen, e.g.

<link rel="senna-route" href="regex:.*" type="senna.HtmlScreen" />

To try this example, download this zip http://cl.ly/3d0c2K0R0e3K/fragment.zip and paste inside examples/ folder of your senna downloaded bundle.

Another reference is this scroll example, it has fragments: https://github.com/liferay/senna.js/blob/master/examples/scroll/index.html#L33.

rotty3000 commented 8 years ago

:+1: Ok, cool! so I had tried to use type="HtmlScreen" also but that had caused similar errors.. This should also be included in the documentation!

eduardolundgren commented 8 years ago

Yeah, we are discussing right now the new site/docs for the 1.0.0 version. Thanks for reporting them.

rotty3000 commented 8 years ago

Is it possible that there is an issue only caused by the fact that I am using file system urls?

When I change to type="senna.HtmlScreen it seems to register the route now file:

Senna initialized from data attribute. senna-min.js:7967:7
Senna scanned route /.*/ senna-min.js:8065:7

However when I navigate through a fragment url I get the log:

No route for /home/rotty/MY-SHARE/DEV/SENNA-DEMO/1.html#f1

Is this just a badly placed log output?

rotty3000 commented 8 years ago

I believe the issue is with this block: https://github.com/liferay/senna.js/blob/master/src/app/App.js#L272-L275

This is a misleading log message. What really happened is the path was rejected because of the same page. The path was returned as null. I think this case should be logged to indicate as such so that people don't get confused.

rotty3000 commented 8 years ago

Re: https://github.com/liferay/senna.js/blob/master/src/app/App.js#L415-L418

eduardolundgren commented 8 years ago

Yeah, that's correct. This is because senna "lets" the fragments navigation to the same page to go natively and then the log is misleading. I will leave this issue open to keep this suggestion registered.

jbalsas commented 3 years ago

Closing since this is a pretty old conversation. Not sure if there's still some action needed here, but you all know where to find me 😉