@webqit/webflo 0.11.17 → 0.11.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -298,7 +298,7 @@ export default function(event, context, next) {
|
|
|
298
298
|
<details>
|
|
299
299
|
<summary>How it works...</summary>
|
|
300
300
|
|
|
301
|
-
> The above function is built as part of your application's
|
|
301
|
+
> The above function is built as part of your application's client-side script from the `npm run generate` command. It is typically bundled to the file `./public/bundle.js`. And the `--auto-embed` flag in that command gets it automatically embedded on your `./public/index.html` page as `<script type="module" src="/bundle.js"></script>`. Then it responds from right in the browser on visiting http://localhost:3000.
|
|
302
302
|
</details>
|
|
303
303
|
|
|
304
304
|
For *browser-based* applications that want to support offline usage via Service-Workers (e.g Progressive Web Apps), Webflo allows us to define equivalent handlers for requests hitting the Service Worker. These worker-based handlers go into a directory named `worker`.
|
|
@@ -319,7 +319,7 @@ export default function(event, context, next) {
|
|
|
319
319
|
<details>
|
|
320
320
|
<summary>How it works...</summary>
|
|
321
321
|
|
|
322
|
-
> The above function is built as part of your application's Service Worker
|
|
322
|
+
> The above function is built as part of your application's Service Worker script from the `npm run generate` command. It is typically bundled to the file `./public/worker.js`, and the main application bundle automatically connects to it. Then it responds from within the Service Worker on visiting http://localhost:3000. (More details [ahead](#service-workers).)
|
|
323
323
|
</details>
|
|
324
324
|
|
|
325
325
|
So, depending on what's being built, an application's handler functions may take the following form (in part or in whole):
|
|
@@ -478,12 +478,18 @@ export default function(event, context, next) {
|
|
|
478
478
|
<details>
|
|
479
479
|
<summary>More details...</summary>
|
|
480
480
|
|
|
481
|
-
> Every handler function has
|
|
481
|
+
> Every handler function has the following contextual properties:
|
|
482
|
+
> + `this.stepname` - The exact name of the current step in the URL path.
|
|
483
|
+
> + `this.pathname` - The pathname to the current step in the URL path.
|
|
484
|
+
> + `next.stepname` - The exact name of the next step in the URL path.
|
|
485
|
+
> + `next.pathname` - The pathname for the rest of the steps in the URL path.
|
|
486
|
+
> Server-side handlers have the following in addition:
|
|
487
|
+
> + `this.dirname` - The filesystem pathname to the current step in the URL path.
|
|
482
488
|
</details>
|
|
483
489
|
|
|
484
490
|
Additionally, workflows may be designed with as many or as few step functions as necessary; the flow control parameters `next.stepname` and `next.pathname` can be used at any point to handle the rest of an URL that have no corresponding step functions.
|
|
485
491
|
|
|
486
|
-
|
|
492
|
+
This means that it is even possible to handle all URLs from the root handler alone.
|
|
487
493
|
|
|
488
494
|
```js
|
|
489
495
|
/**
|
|
@@ -513,7 +519,7 @@ export default function(event, context, next) {
|
|
|
513
519
|
|
|
514
520
|
Webflo takes a *default action* when `next()` is called at the *edge* of the workflow - the point where there are no more child steps - as in the `return next()` statement above!
|
|
515
521
|
|
|
516
|
-
For workflows in
|
|
522
|
+
**For workflows in the `/server` directory**, the *default action* of `next()`ing at the edge is to go match and return a static file in the `public` directory.
|
|
517
523
|
|
|
518
524
|
So, above, should our handler receive static file requests like `http://localhost:3000/logo.png`, the statement `return next()` would get Webflo to match and return the logo at `public/logo.png`, if any; a `404` response otherwise.
|
|
519
525
|
|
|
@@ -526,7 +532,7 @@ my-app
|
|
|
526
532
|
> **Note**
|
|
527
533
|
> <br>The root handler effectively becomes the single point of entry to the application - being that it sees even requests for static files!
|
|
528
534
|
|
|
529
|
-
|
|
535
|
+
**For workflows in the `/worker` directory**, the *default action* of `next()`ing at the edge is to send the request through the network to the server. (But Webflo will know to attempt resolving the request from the application's caching system built into the Service Worker.)
|
|
530
536
|
|
|
531
537
|
So, above, if we defined handler functions in the `/worker` directory, we could decide to either handle the received requests or just `next()` them to the server.
|
|
532
538
|
|
|
@@ -565,10 +571,13 @@ my-app
|
|
|
565
571
|
└── public/logo.png ------------------------- http://localhost:3000/logo.png
|
|
566
572
|
```
|
|
567
573
|
|
|
568
|
-
>
|
|
569
|
-
>
|
|
574
|
+
<details>
|
|
575
|
+
<summary>More details...</summary>
|
|
576
|
+
|
|
577
|
+
> Handlers in the `/worker` directory are only designed to see Same-Origin requests since Cross-Origin URLs like `https://auth.example.com/oauth` do not belong in the application's layout! These external URLs, however, benefit from the application's caching system built into the Service Worker.
|
|
578
|
+
</details>
|
|
570
579
|
|
|
571
|
-
For workflows in
|
|
580
|
+
**For workflows in the `/client` directory**, the *default action* of `next()`ing at the edge is to send the request through the network to the server. But where there is a Service Worker layer, then that becomes the next destination.
|
|
572
581
|
|
|
573
582
|
So, above, if we defined handler functions in the `/client` directory, we could decide to either handle the navigation requests in-browser or just `next()` them, this time, to the Service Worker layer.
|
|
574
583
|
|
|
@@ -651,8 +660,12 @@ But, we can also access the route in a way that gets the data rendered into the
|
|
|
651
660
|
<summary>How it works...</summary>
|
|
652
661
|
|
|
653
662
|
> The `Accept` header hint is already how browsers make requests on every page load. So, it just works!
|
|
663
|
+
</details>
|
|
664
|
+
|
|
665
|
+
<details>
|
|
666
|
+
<summary>More details...</summary>
|
|
654
667
|
|
|
655
|
-
>
|
|
668
|
+
> This automatic pairing of an `index.html` file with a route works the same for nested routes! But top-level `index.html` files are implicitly inherited down the hierarchy.)
|
|
656
669
|
</details>
|
|
657
670
|
|
|
658
671
|
Now, for Single Page Applications, subsequent navigations, after the initial page load, just ask for the data on destination URLs and perform [Client-Side Rendering](#client-and-server-side-rendering) on the same running document. Navigation is sleek and instant!
|
|
@@ -660,7 +673,7 @@ Now, for Single Page Applications, subsequent navigations, after the initial pag
|
|
|
660
673
|
<details>
|
|
661
674
|
<summary>How it works...</summary>
|
|
662
675
|
|
|
663
|
-
> Unless disabled, [SPA Routing](#spa-routing) is automatically built into your
|
|
676
|
+
> Unless disabled, [SPA Routing](#spa-routing) is automatically built into your application's client-side script from the `npm run generate` command. So, it just works!
|
|
664
677
|
</details>
|
|
665
678
|
|
|
666
679
|
With no extra work, your application can function as either a *Multi Page App (MPA)* or a *Single Page App (SPA)*!
|
|
@@ -873,11 +886,7 @@ my-app
|
|
|
873
886
|
└── footer.html ------------------------------ <footer></footer> <!-- To appear at bottom of each document root -->
|
|
874
887
|
```
|
|
875
888
|
|
|
876
|
-
|
|
877
|
-
<summary>How it works...</summary>
|
|
878
|
-
|
|
879
|
-
> The above gives us three document roots: `/index.html`, `/about/index.html`, `/prodcuts/index.html`. The `/prodcuts` route doubles as a Single Page Application such that visiting the `/prodcuts` route loads the document root `/prodcuts/index.html` and lets Webflo SPA routing determine which of `/prodcuts/main.html`, `/prodcuts/free/main.html`, `/prodcuts/paid/main.html` is imported on a given URL.
|
|
880
|
-
</details>
|
|
889
|
+
The above gives us three document roots: `/index.html`, `/about/index.html`, `/prodcuts/index.html`. The `/prodcuts` route doubles as a Single Page Application such that visiting the `/prodcuts` route loads the document root `/prodcuts/index.html` and lets Webflo SPA routing determine which of `/prodcuts/main.html`, `/prodcuts/free/main.html`, `/prodcuts/paid/main.html` is imported on a given URL.
|
|
881
890
|
|
|
882
891
|
Webflo ensures that only the amount of JavaScript for a document root is actually loaded! So, above, a common JavaScript build is shared across the three document roots alongside an often tiny root-specific build.
|
|
883
892
|
|
|
@@ -929,7 +938,11 @@ public
|
|
|
929
938
|
</html>
|
|
930
939
|
```
|
|
931
940
|
|
|
932
|
-
|
|
941
|
+
<details>
|
|
942
|
+
<summary>How it works...</summary>
|
|
943
|
+
|
|
944
|
+
> The Webflo `generate` command automatically figures out a given architecture and generates the appropriate scripts for the application! It also factors into the generated scripts the location of each document root so that [all navigations to these roots are handled as a regular page load](#spa-navigation).
|
|
945
|
+
</details>
|
|
933
946
|
|
|
934
947
|
#### Bundling
|
|
935
948
|
|
|
@@ -1376,7 +1389,7 @@ In just a few concepts, Webflo comes ready for any type of application!
|
|
|
1376
1389
|
|
|
1377
1390
|
#### Client-Side Applications
|
|
1378
1391
|
|
|
1379
|
-
Web pages that embed the Webflo client JS
|
|
1392
|
+
Web pages that embed the Webflo client JS deliver a great user experience. It's simple: the `npm run generate` command does both the building and embedding of the script (or scripts), for the document root (or document roots - in a [Multi Page](#in-a-multi-page-layout) / [Multi SPA](#in-a-multi-spa-layout) layout)!
|
|
1380
1393
|
|
|
1381
1394
|
On being loaded, the state of the application is initialized, or is restored through hydration - where [Server-Side Rendering](#client-and-server-side-rendering) was involved to optimize for first paint, and an app-like experience kicks in! For [Single-Page Applications](#in-a-single-page-layout), [Client-Side Rendering](#client-and-server-side-rendering) is performed on each navigation.
|
|
1382
1395
|
|
|
@@ -1968,7 +1981,7 @@ Webflo applications are often built on/with the following technologies.
|
|
|
1968
1981
|
|
|
1969
1982
|
[OOHTML](https://github.com/webqit/oohtml) is a proposed set of new features for HTML that makes it fun to hand-author your HTML documents! Within OOHTML are [HTML Modules](https://github.com/webqit/oohtml#html-modules) and [HTML Imports](https://github.com/webqit/oohtml#html-imports), [Reactive Scripts](https://github.com/webqit/oohtml#subscript) and more!
|
|
1970
1983
|
|
|
1971
|
-
Webflo natively supports OOHTML in full! But it is also possible to switch this to none, or to partial support - when specific features aren't needed anywhere in your application. Server-side and client-side support for OOHTML exist independently. This is good when, for example, your application places more importance on SSR, and less on CSR, in which case a reduced support for OOHTML can reduce the overall client JS
|
|
1984
|
+
Webflo natively supports OOHTML in full! But it is also possible to switch this to none, or to partial support - when specific features aren't needed anywhere in your application. Server-side and client-side support for OOHTML exist independently. This is good when, for example, your application places more importance on SSR, and less on CSR, in which case a reduced support for OOHTML can reduce the overall client JS size.
|
|
1972
1985
|
|
|
1973
1986
|
<details>
|
|
1974
1987
|
<summary>Config (Default)</summary>
|