Foo.html
31 | - Foo.js
32 | - Foo_Bar.js
33 | - Foo_bazbuz.js
34 | - Foo.css
35 |
36 | Provide a single module, "Foo", with several internal modules. In Foo.js, you might import some of them at the top of your file:
37 |
38 | // This is a global skit library.
39 | var net = skit.platform.net;
40 |
41 | // This is a class from another skit module we wrote.
42 | var MyLibraryClass = library.things.MyLibraryClass;
43 |
44 | var Bar = __module__.Bar;
45 | // This is a Handlebars compiled template.
46 | var html = __module__.html;
47 |
48 | CSS modules are not accessible this way:
49 |
50 | // this will not work:
51 | var css = __module__.css;
52 |
53 |
54 | Module conventions
55 | ------------------
56 |
57 | 1. Files whose exports are a class are CapitalizedLikeAClass, eg. Controller.js
58 | 2. Files whose exports are a module arelikethis -- no spaces
59 | 3. Internal modules, eg. SomeModule_someinternalthing.js follow the same convention -- "someinternalthing" in this case is not a class, whereas SomeModule_InternalThing.js is a class
60 | 4. \_\_things\_like\_this\_\_ are generally _special_ skit API things.
61 | 5. Imports are grouped: first global, then project, then internal imports.
62 | 6. Imports can only be at the top of the file -- imports below the first non-import are ignored.
63 |
64 |
65 | skit.browser
66 | ------------
67 |
68 | The browser module contains things that depend on "window", eg. client-side event listeners, DOM lookups and DOM layout measuring functionality.
69 |
70 | skit.platform
71 | -------------
72 |
73 | The platform module is intended for use in both places: server and client-side. It contains several modules that work transparently on the server and in the browser:
74 |
75 | - *cookies* - Wraps cookie setting/reading.
76 | - *net* - Wraps XHR on the client and _request_ on the server to provide the ability to call HTTP endpoints from either place transparently.
77 | - *navigation* - Provides information about the current URL globally, and allows the server side to perform redirects using navigation.navigate() and issue 404s with navigation.notFound().
78 |
79 |
--------------------------------------------------------------------------------
/example/helloworld/library/BaseController.css:
--------------------------------------------------------------------------------
1 |
2 | body {
3 | font-family: arial, sans-serif;
4 | font-size: 14px;
5 | }
6 |
7 | #content {
8 | max-width: 640px;
9 | margin: 20px auto;
10 | }
--------------------------------------------------------------------------------
/example/helloworld/library/BaseController.html:
--------------------------------------------------------------------------------
1 |
2 | {{{ childHtml }}}
3 |
--------------------------------------------------------------------------------
/example/helloworld/library/BaseController.js:
--------------------------------------------------------------------------------
1 | var Controller = skit.platform.Controller;
2 | var template = __module__.html;
3 | module.exports = Controller.create({
4 | __title__: function(childTitle) {
5 | // Parents get the title generated by children as an argument.
6 | return childTitle + ' | Hello World';
7 | },
8 | __body__: function(childHtml) {
9 | // Parents get the HTML generated by children as an argument.
10 | return template({childHtml: childHtml});
11 | },
12 | __ready__: function() {
13 | // Parents also get __preload__, __load__ and __ready__ calls.
14 | }
15 | });
--------------------------------------------------------------------------------
/example/helloworld/library/GitHubAPIClient.js:
--------------------------------------------------------------------------------
1 |
2 | var net = skit.platform.net;
3 |
4 | var GITHUB_BASE_URL = 'https://api.github.com/gists/';
5 |
6 | var logError = function(response) {
7 | console.log('Error loading:', response.code,
8 | 'body:', response.body);
9 | };
10 |
11 | module.exports = {
12 | loadGists: function(apiCallback, context) {
13 | var gists = [];
14 | var done = function() {
15 | apiCallback.call(context, gists);
16 | };
17 | net.send(GITHUB_BASE_URL + 'public', {
18 | success: function(response) {
19 | gists = response.body;
20 | },
21 | error: logError,
22 | complete: done
23 | });
24 | },
25 |
26 | loadGist: function(gistId, apiCallback, context) {
27 | var gist = null;
28 | var done = function() {
29 | apiCallback.call(context, gist);
30 | };
31 | net.send(GITHUB_BASE_URL + encodeURIComponent(gistId), {
32 | success: function(response) {
33 | gist = response.body;
34 | },
35 | error: logError,
36 | complete: done
37 | })
38 | }
39 | };
--------------------------------------------------------------------------------
/example/helloworld/public/Home.html:
--------------------------------------------------------------------------------
1 | 2 | Hello, world! I’m a template. 3 | 4 |
5 | 6 |-
7 | {{#each gists }}
8 | {{> __module__.item.html }}
9 | {{/each}}
10 |
Gist by {{ gistOwner }}
4 | 5 |Gist description
6 |{{ gist.description }}
7 | 8 | 9 | {{#each gist.files }} 10 |{{@key}}
11 |{{ size }} bytes, {{ type }} ({{ language }})
12 |{{ content }}
13 | {{/each}}
14 |
--------------------------------------------------------------------------------
/example/helloworld/public/gist/Gist.js:
--------------------------------------------------------------------------------
1 | var Controller = skit.platform.Controller;
2 | var string = skit.platform.string;
3 | var navigation = skit.platform.navigation;
4 | var BaseController = library.BaseController;
5 | var GitHubAPIClient = library.GitHubAPIClient;
6 | var template = __module__.html;
7 | module.exports = Controller.create(BaseController, {
8 | __preload__: function(loaded) {
9 | var query = navigation.query();
10 | GitHubAPIClient.loadGist(query['id'], function(gist) {
11 | if (!gist) {
12 | navigation.notFound();
13 | } else {
14 | this.gist = gist;
15 | }
16 |
17 | loaded();
18 | }, this);
19 | },
20 | __title__: function() {
21 | return 'Gist by ' + string.escapeHtml(this.gistOwner());
22 | },
23 | __body__: function() {
24 | return template({gist: this.gist, gistOwner: this.gistOwner()});
25 | },
26 | gistOwner: function() {
27 | if (this.gist['owner']) {
28 | return this.gist['owner']['login'];
29 | }
30 | return 'anonymous';
31 | }
32 | });
--------------------------------------------------------------------------------
/example/rottentomatoes/demo/library/BaseController.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body {
7 | font-family: "Helvetica Neue", hevetica, arial, sans-serif;
8 | font-size: 16px;
9 | line-height: 1.4em;
10 |
11 | width: 640px;
12 | margin: 20px auto;
13 | }
14 |
15 | h1, h2, p, hr, ul, ol {
16 | margin-bottom: 20px;
17 | }
18 |
19 | li {
20 | list-style-type: square;
21 | }
22 |
23 | a {
24 | color: blue;
25 | text-decoration: none;
26 | cursor: pointer;
27 | }
28 |
29 | .poster {
30 | float: left;
31 | width: 80px;
32 | margin: 10px;
33 | margin-top: 0;
34 | margin-left: 0;
35 | }
--------------------------------------------------------------------------------
/example/rottentomatoes/demo/library/BaseController.js:
--------------------------------------------------------------------------------
1 |
2 | var Controller = skit.platform.Controller;
3 | var string = skit.platform.string;
4 | var Handlebars = skit.thirdparty.handlebars;
5 |
6 | Handlebars.registerHelper('slugify', function(arg) {
7 | return string.trim(arg).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
8 | });
9 |
10 | return Controller.create({});
11 |
--------------------------------------------------------------------------------
/example/rottentomatoes/demo/public/Home.css:
--------------------------------------------------------------------------------
1 |
2 | .movie-row {
3 | overflow: hidden;
4 | }
5 | .movie-row .poster {
6 | width: 20px;
7 | }
--------------------------------------------------------------------------------
/example/rottentomatoes/demo/public/Home.html:
--------------------------------------------------------------------------------
1 | Home
2 |This is a template. It is rendered using Handlebars.
3 | 4 |5 | Navigation in skit (for now) is dictated by the 6 | directory structure of the “public” package. WTF? I know, it’s crazy. 7 |
8 | 9 |Now the crazy part.
10 | 11 |12 | We fetched and rendered the movies data (below) on the server side. 13 | Clicking another list ("Change list") will make a client-side request 14 | in the same re-instantiated class, and could re-render the list or something 15 | with the same exact templates. 16 |
17 | 18 |19 | 20 |
Movies
21 | 22 |23 | Change list: 24 |
-
25 | {{#each lists}}
26 |
- {{name}} 27 | {{/each}} 28 |
{{ listName }}
32 |-
33 | {{#movies}}
34 |
35 | {{> __module__.movie.html }}
36 | {{else}}
37 |
- No results. Terrible demo! (Start over) 38 | {{/movies}} 39 |
Detail page
2 | 3 |4 | Regex paths are supported by directories with special names. 5 | In main.js we register regular expressions for these paths. 6 |
7 | 8 |9 | 10 |
{{ title }} ({{ year }})
11 | 12 |13 | Tomatometer: {{ ratings.critics_score }}% (critics); {{ ratings.audience_score }}% (audience) 14 | — 15 | Rating: {{ mpaa_rating }} 16 |
17 | 18 |Synopsis
19 |
20 |
21 | {{ synopsis }}
22 |
Cast
25 |-
26 | {{#each abridged_cast }}
27 |
- {{ name }} {{#if characters}}— {{#each characters }}{{this}}{{/each}}{{/if}} 28 | {{/each}} 29 |
2 | {{{ childHtml }}}
3 |
--------------------------------------------------------------------------------
/example/skeleton/library/BaseController.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var reset = skit.browser.reset;
4 | var Controller = skit.platform.Controller;
5 |
6 | // This loads Base.html from this directory.
7 | var html = __module__.html;
8 |
9 |
10 | return Controller.create({
11 | __title__: function(childTitle) {
12 | // Parent controllers can frame the title content of child controllers.
13 | return childTitle + ' | Skit';
14 | },
15 |
16 | __body__: function(childHtml) {
17 | // Parent controllers can frame the body content of child controllers.
18 | return html({
19 | childHtml: childHtml
20 | });
21 | }
22 | });
--------------------------------------------------------------------------------
/example/skeleton/public/Home.css:
--------------------------------------------------------------------------------
1 |
2 | /* This is automatically included and should contain homepage-specific styles. */
3 |
--------------------------------------------------------------------------------
/example/skeleton/public/Home.html:
--------------------------------------------------------------------------------
1 | Home
2 | 3 |
4 |
6 |
7 | Visit a subpage: About
5 |Dynamic preloaded content
8 |
9 |
15 | 10 | This is dynamic content loaded from a remote location. 11 | This is a trivial example because the remote location is a hosted JSON file, 12 | but in a real application this would be data from an API of some kind. 13 |
14 |-
16 | {{#each items }}
17 | {{> __module__.item.html }}
18 | {{/each}}
19 |
See also
22 |
23 |
--------------------------------------------------------------------------------
/example/skeleton/public/Home.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var Controller = skit.platform.Controller;
4 | var net = skit.platform.net;
5 |
6 | // This is the base controller located in our "library" module.
7 | var BaseController = library.BaseController;
8 |
9 | // This loads Home.html so we can render the main content for the page.
10 | var html = __module__.html;
11 |
12 |
13 | // Specifying BaseController here makes BaseController the parent Controller:
14 | // It modify our body HTML, title, etc. See that module for more information.
15 | return Controller.create(BaseController, {
16 | __preload__: function(onLoaded) {
17 | // This is where you load any data necessary for the initial page render.
18 | // net.send() works from the client and server, exactly the same way.
19 |
20 | net.send('https://cluster-static.s3.amazonaws.com/skit/example.json', {
21 | success: function(response) {
22 | this.items = response.body['items'];
23 | },
24 | error: function() {
25 | this.items = [{title: 'Oops!', description: 'Could not load the example data.'}];
26 | },
27 | complete: function() {
28 | onLoaded();
29 | },
30 | context: this
31 | })
32 | },
33 |
34 | __load__: function() {
35 | // This is called on the server and client in order to setup the Controller
36 | // object after the preload has completed.
37 | },
38 |
39 | __title__: function() {
40 | return 'Home';
41 | },
42 |
43 | __body__: function() {
44 | return html({
45 | items: this.items
46 | });
47 | },
48 |
49 | __ready__: function(container) {
50 | // This is where the client lifecycle begins; we hook up event listeners,
51 | // format things in the browser if necessary, etc.
52 |
53 | // var $link = dom.get('a.foo');
54 | // events.bind($link, 'click', this.onClickLink, this);
55 | }
56 | });
--------------------------------------------------------------------------------
/example/skeleton/public/Home_item.html:
--------------------------------------------------------------------------------
1 | 24 | Check out the skit project on Github 25 | to see the full documentation. 26 |
27 |About
2 | 3 |
4 |
9 |
10 | 5 | Navigation is based on the directory structure of “public”. 6 | Pretty wacky, but there’s no routes file to worry about. 7 |
8 |Nam commodo dignissim mauris in mattis. Aenean congue justo id odio volutpat porttitor. Curabitur sed laoreet risus, eu sollicitudin arcu.
11 | 12 |Proin tincidunt metus non eros euismod, eget porta lectus aliquam. Duis eu nunc ac orci interdum mollis. Phasellus sed mollis risus, eu tempor quam. Morbi at interdum mi, vel porta lacus.
13 | 14 | -------------------------------------------------------------------------------- /example/skeleton/public/about/About.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Controller = skit.platform.Controller; 4 | 5 | var BaseController = library.BaseController; 6 | 7 | // This loads About.html from this directory. 8 | var html = __module__.html; 9 | 10 | 11 | return Controller.create(BaseController, { 12 | // This controller doesn't preload anything. 13 | __title__: function() { 14 | return 'About'; 15 | }, 16 | 17 | __body__: function() { 18 | return html(); 19 | } 20 | }); -------------------------------------------------------------------------------- /example/skitjs.com/__static__/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taylorhughes/skit/69a0c848ab8c9a6d1cb3c00d567f725b4d3cb5ff/example/skitjs.com/__static__/favicon.ico -------------------------------------------------------------------------------- /example/skitjs.com/__static__/skitrequest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taylorhughes/skit/69a0c848ab8c9a6d1cb3c00d567f725b4d3cb5ff/example/skitjs.com/__static__/skitrequest.png -------------------------------------------------------------------------------- /example/skitjs.com/__static__/viewlayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taylorhughes/skit/69a0c848ab8c9a6d1cb3c00d567f725b4d3cb5ff/example/skitjs.com/__static__/viewlayer.png -------------------------------------------------------------------------------- /example/skitjs.com/library/BaseController.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var reset = skit.browser.reset; 4 | var Controller = skit.platform.Controller; 5 | var urls = skit.platform.urls; 6 | var util = skit.platform.util; 7 | 8 | 9 | return Controller.create({ 10 | __title__: function(childTitle) { 11 | return childTitle ? 'skit: ' + childTitle : 'skit'; 12 | }, 13 | 14 | __ready__: function() { 15 | setTimeout(function() { 16 | var parsed = urls.parse(window.location.href); 17 | if (parsed.port && parsed.port != 80 && parsed.port != 443) { 18 | return; 19 | } 20 | 21 | var GA_TRACKING_ID = 'UA-61684202-1'; 22 | 23 | var _gaq = window._gaq = window._gaq || []; 24 | _gaq.push(['_setAccount', GA_TRACKING_ID]); 25 | _gaq.push(['_trackPageview']); 26 | 27 | var ga = document.createElement('script'); 28 | ga.type = 'text/javascript'; 29 | ga.async = true; 30 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 31 | document.getElementsByTagName('head')[0].appendChild(ga); 32 | }, 100); 33 | } 34 | }); -------------------------------------------------------------------------------- /example/skitjs.com/library/BaseController_buttons.css: -------------------------------------------------------------------------------- 1 | /* BUTTONS */ 2 | 3 | .button, 4 | button, 5 | input[type="submit"] { 6 | display: inline-block; 7 | color: white; 8 | -webkit-border-radius: 3px; 9 | -moz-border-radius: 3px; 10 | border-radius: 3px; 11 | border: none; 12 | background: #3da5f0; 13 | padding: 15px 30px; 14 | font-size: 16px; 15 | font-weight: 300; 16 | font-family: inherit; 17 | text-align: center; 18 | cursor: pointer; 19 | } 20 | .button:hover, 21 | button:hover, 22 | input[type="submit"]:hover { 23 | background: #1470b2; 24 | text-decoration: none; 25 | } 26 | .button:active, 27 | button:active, 28 | input[type="submit"]:active, 29 | .button:focus, 30 | button:focus, 31 | input[type="submit"]:focus { 32 | background: #1470b2; 33 | } 34 | button::-moz-focus-inner { 35 | border: 0; 36 | } 37 | 38 | .button:disabled, 39 | button:disabled, 40 | input[type="submit"]:disabled, 41 | .button:disabled:hover, 42 | button:disabled:hover, 43 | input[type="submit"]:disabled:hover { 44 | background: #999; 45 | cursor: default; 46 | } 47 | 48 | button.wide, 49 | .button.wide { 50 | width: 100%; 51 | padding-left: 0; 52 | padding-right: 0; 53 | } 54 | 55 | .button.secondary, 56 | button.secondary, 57 | input[type="submit"].secondary { 58 | background: #ccc; 59 | color: #333; 60 | } 61 | .button.secondary:hover, 62 | button.secondary:hover, 63 | input[type="submit"].secondary:hover { 64 | background: #ddd; 65 | } 66 | .button.secondary:active, 67 | button.secondary:active, 68 | input[type="submit"].secondary:active, 69 | .button.secondary:focus, 70 | button.secondary:focus, 71 | input[type="submit"].secondary:focus { 72 | background: #bbb; 73 | } 74 | -------------------------------------------------------------------------------- /example/skitjs.com/library/BaseController_layout.css: -------------------------------------------------------------------------------- 1 | 2 | .content { 3 | max-width: 640px; 4 | padding: 0 25px; 5 | margin: 100px auto; 6 | } 7 | .content .wide-image-container { 8 | margin: 30px 0; 9 | text-align: center; 10 | } 11 | .content .wide-image-container img { 12 | max-width: 100%; 13 | } 14 | 15 | 16 | .content ul > li { 17 | list-style-type: square; 18 | } 19 | .content ol > li { 20 | list-style-type: decimal; 21 | } 22 | 23 | 24 | #header { 25 | background: #222; 26 | background: linear-gradient(#333, #111); 27 | color: #fff; 28 | overflow: hidden; 29 | } 30 | #header .content { 31 | padding-top: 80px; 32 | padding-bottom: 80px; 33 | } 34 | 35 | @media screen and (max-width: 959px) { 36 | #header .content { 37 | padding-top: 40px; 38 | padding-bottom: 40px; 39 | } 40 | } 41 | 42 | #header h2, 43 | #header p { 44 | font-weight: 100; 45 | font-size: 150%; 46 | } 47 | #header h2 { 48 | margin-bottom: 20px; 49 | } 50 | 51 | #header a { 52 | color: #fff; 53 | text-decoration: underline; 54 | } 55 | 56 | 57 | #body h1 { 58 | font-size: 150%; 59 | color: #666; 60 | text-transform: uppercase; 61 | border-bottom: 1px solid #ccc; 62 | margin: 80px 0 40px 0; 63 | } 64 | 65 | #body .section { 66 | margin-bottom: 30px; 67 | } 68 | 69 | 70 | #body h3 { 71 | text-transform: uppercase; 72 | color: #666; 73 | margin-top: 20px; 74 | } 75 | 76 | 77 | 78 | #github-banner { 79 | position: fixed; 80 | top: 0; 81 | left: 0; 82 | } 83 | 84 | @media screen and (max-width: 480px) { 85 | #github-banner { 86 | position: absolute; 87 | } 88 | } 89 | 90 | 91 | #body .wide-example-container h3 { 92 | text-transform: none; 93 | } 94 | 95 | @media screen and (min-width: 960px) { 96 | 97 | .wide-example-container { 98 | width: 960px; 99 | margin-left: -160px; 100 | overflow: hidden; 101 | } 102 | 103 | .wide-example-container .half { 104 | float: left; 105 | width: 47%; 106 | margin-left: 3%; 107 | } 108 | .wide-example-container .half:first-child { 109 | margin-left: 0; 110 | } 111 | 112 | } -------------------------------------------------------------------------------- /example/skitjs.com/library/BaseController_style.css: -------------------------------------------------------------------------------- 1 | 2 | body, p { 3 | font-family: Helvetica, arial, sans-serif; 4 | font-size: 16px; 5 | line-height: 1.6; 6 | } 7 | 8 | h1, h2, h3, h4 { 9 | font-weight: bold; 10 | } 11 | 12 | h1 { 13 | font-size: 300%; 14 | } 15 | h2 { 16 | font-size: 150%; 17 | } 18 | 19 | a { 20 | color: #069; 21 | text-decoration: none; 22 | } 23 | a:hover { 24 | text-decoration: underline; 25 | } 26 | 27 | h1, h2, h3, h4, p, li { 28 | margin-bottom: 10px; 29 | } 30 | 31 | pre, code { 32 | font-family: Consolas, Courier, monospace; 33 | font-size: 14px; 34 | background: #eee; 35 | } 36 | pre { 37 | border: 1px solid #aaa; 38 | border-radius: 3px; 39 | padding: 10px; 40 | margin: 0; 41 | margin-bottom: 10px; 42 | overflow-x: auto; 43 | } 44 | 45 | pre .no-select { 46 | color: #999; 47 | -moz-user-select: none; 48 | -khtml-user-select: none; 49 | -webkit-user-select: none; 50 | -o-user-select: none; 51 | user-select: none; 52 | } 53 | pre ins { 54 | text-decoration: none; 55 | color: #096; 56 | } 57 | 58 | li li { 59 | margin-left: 25px; 60 | } 61 | li li li { 62 | margin-left: 50px; 63 | } 64 | -------------------------------------------------------------------------------- /example/skitjs.com/public/Home.css: -------------------------------------------------------------------------------- 1 | 2 | /* What is skit? Diagram */ 3 | 4 | #controller-example, 5 | #load-cycle { 6 | margin: 10px 0; 7 | } 8 | 9 | #controller-example { 10 | text-align: left; 11 | font-size: 13px; 12 | display: inline-block; 13 | } 14 | #controller-example .code { 15 | font-weight: bold; 16 | background: #F8F7D2; 17 | margin: -5px -10px; 18 | padding: 5px 10px; 19 | margin-left: -5px; 20 | padding-left: 5px; 21 | } 22 | 23 | #load-cycle { 24 | display: block; 25 | padding: 5px; 26 | white-space: nowrap; 27 | } 28 | #load-cycle .code { 29 | display: inline-block; 30 | padding: 5px 10px; 31 | font-weight: bold; 32 | background: #F8F7D2; 33 | font-family: Consolas, Courier, monospace; 34 | font-size: 13px; 35 | } 36 | 37 | #load-cycle .title { 38 | font-weight: bold; 39 | text-transform: uppercase; 40 | font-size: 13px; 41 | display: block; 42 | line-height: 12px; 43 | margin-bottom: 6px; 44 | } 45 | #load-cycle .server, 46 | #load-cycle .client { 47 | display: inline-block; 48 | padding: 10px 20px; 49 | border: 1px solid #ccc; 50 | } 51 | #load-cycle .server { 52 | background: #D6E9FC; 53 | border-right: none; 54 | padding-right: 7px; 55 | } 56 | #load-cycle .client { 57 | background: #B7D1EC; 58 | border-left: none; 59 | padding-left: 13px; 60 | } 61 | #load-cycle .crossover { 62 | display: inline-block; 63 | width: 0; 64 | z-index: 1000; 65 | position: relative; 66 | } 67 | 68 | 69 | /* Skit controller lifecycle detailed */ 70 | 71 | #body .skit-lifecycle { 72 | padding: 5px 10px; 73 | background: #efefef; 74 | border: 1px solid #ccc; 75 | border-radius: 3px; 76 | overflow: hidden; 77 | } 78 | #body .skit-lifecycle-divider { 79 | margin: 10px 0; 80 | text-align: center; 81 | } 82 | #body .skit-lifecycle-divider em { 83 | margin: 0 20px; 84 | } 85 | 86 | #body .skit-lifecycle ol, 87 | #body .skit-lifecycle li { 88 | margin: 5px 0; 89 | } 90 | #body .skit-lifecycle li { 91 | margin-left: 30px; 92 | } 93 | 94 | #body .skit-lifecycle h2 { 95 | display: inline-block; 96 | font-size: inherit; 97 | text-transform: uppercase; 98 | color: #fff; 99 | padding: 5px 10px; 100 | line-height: 1.4; 101 | background: #a00; 102 | margin: 5px 0; 103 | border-radius: 4px; 104 | } 105 | 106 | #body .skit-lifecycle .your-code { 107 | padding: 5px 10px; 108 | background: #D6E9FC; 109 | border: 1px solid #ccc; 110 | border-radius: 3px; 111 | overflow: hidden; 112 | margin: 10px 0; 113 | } 114 | 115 | #body .skit-lifecycle .your-code h3 { 116 | margin: 0; 117 | margin-bottom: 10px; 118 | } 119 | 120 | #body .skit-lifecycle .your-code code { 121 | background: #F8F7D2; 122 | display: inline-block; 123 | padding: 2px 8px; 124 | border-radius: 4px; 125 | } 126 | 127 | 128 | -------------------------------------------------------------------------------- /example/skitjs.com/public/Home.html: -------------------------------------------------------------------------------- 1 |
2 |
13 |
14 |
3 |
12 | skit
4 |A pure JavaScript frontend for building better web clients.
5 |6 | Featuring nearly 100% shared server and client-side code, 7 | zero configuration, 8 | automatic static resource bundling, 9 | and built-in server-side rendering. 10 |
11 |
15 |
310 |
311 | Overview
16 | 17 |
18 |
52 |
53 | What is skit?
19 |Skit is a JavaScript framework for building web pages with this controller lifecycle:
20 |Controller.create({
21 | preload: function(done) {
22 | MyAPIClient.getThing(function(thing) {
23 | this.thing = thing;
24 | done();
25 | }, this);
26 | },
27 | render: function() {
28 | return template(this.thing);
29 | },
30 | ready: function() {
31 | events.listen(dom.get('.thing'), 'click', function() {
32 | this.thing.clicked = true;
33 | this.rerender();
34 | }, this);
35 | }
36 | });
37 |
38 | … that execute like this:
39 |
40 |
41 | Server
42 | preload() → render()
43 | →
44 |
45 | Browser
46 | ready()
47 |
48 |
49 |
50 | … automatically, without having to configure anything.
51 |
54 |
72 |
73 | What’s skit made of?
55 |-
56 |
- 57 | A webserver that runs your controllers on the server, then 58 | sets them up in the browser with the same-ish state 59 | automatically. 60 | 61 |
- 62 | A module system for building components that consist of templates, 63 | stylesheets and JavaScript together. 64 | 65 |
- 66 | A set of lightweight libraries that facilitate issuing HTTP requests, 67 | managing cookies, and handling navigation on the server and client side 68 | transparently. 69 | 70 |
74 |
89 |
90 |
91 | What’s it for?
75 |76 | Skit is good for building web apps on existing HTTP-based APIs, 77 | like the one you probably already built for your mobile app. 78 |
79 |
80 | 
81 |
82 |
81 | 83 | Skit is not a full-stack framework, 84 | or even a “Node.js framework” in the typical sense — 85 | it’s more like a client-side framework that also runs 86 | on the server side. 87 |
88 |Features
92 | 93 |
94 |
118 |
119 | Share client- and server-side code without thinking
95 |-
96 |
- 97 | Write a single JavaScript codebase 98 | for your web app. No more client-side app bootstrapping hackery 99 | or configuring static asset pipelines. 100 | 101 |
- 102 | Everything from URL routing to HTTP redirects to “DOMReady” 103 | is handled by the same JavaScript controller classes. 104 | 105 |
- 106 | Skit platform libraries are built to work on the client and server. 107 | 108 |
- 109 | Build a single HTTP API client for your backend in JavaScript. 110 | 111 |
- 112 | “Nearly 100%” — 113 | if you want, keep cookie/API secrets on the server side only by proxying 114 | API requests through skit. 115 | 116 |
120 |
128 |
129 | Zero configuration
121 |-
122 |
- No configuration files. 123 |
- Directory structure dictates URL routes for skit controllers. (!) 124 |
- Automatic resource grouping and minification in production mode. 125 |
- Awesome, unobfuscated development mode for the best development. 126 |
130 |
150 |
151 | The best modules ever
131 |-
132 |
- 133 | Build complete JavaScript/CSS/HTML modules. 134 | No need to configure the module loader, just start adding files. 135 | 136 |
- 137 | Modules are based on a common filename prefix, so you don’t 138 | have to add a bunch of boilerplate code to make a new one. 139 | 140 |
- 141 | Once your modules are defined, they are loaded on the server and 142 | client automatically. 143 | 144 |
- 145 | In production, resources are bundled, versioned and optimized 146 | automatically. 147 | 148 |
152 |
166 |
167 | SEO the Natural Way™
153 |-
154 |
- 155 | Render content on the server side, then use the same templates to render 156 | supplemental content on the client side as users interact with your app. 157 | 158 |
- 159 | Quit returning empty responses with a loading spinner. Seriously, cut that out. 160 | 161 |
- 162 | Robots should like you for you, don’t you think? 163 | 164 |
How it works
168 | 169 |
170 |
219 |
220 |
171 | 
172 |
173 |
174 |
172 | Skit request lifecycle
175 |176 | The skit lifecycle starts on the server side, where the server loads 177 | the current page’s controller module and renders a response. 178 | Then, in the browser, the controller module is reconstructed and 179 | the execution continues. 180 |
181 | 182 |
183 |
200 |
201 | Server side
184 |-
185 |
- Skit parses the URL structure to find the current skit controller 186 |
- Skit instantiates your controller module 187 |
-
188 |
Your controller: Example.js
189 |-
190 |
preload()— Loads data from the backend API
191 | load()— Sets up state after data is loaded
192 | render()— Generate <title> text and <body> HTML for the resulting page
193 |
195 | - Skit stores the state loaded in
preload
196 | - Skit outputs the HTML rendered during
render
197 | - Skit outputs a bunch of extra JavaScript to take over in the client 198 |
↓ HTTP transport ↓
202 | 203 |
204 |
218 | Client side
205 |-
206 |
- Skit reloads the same server-side modules in the client 207 |
- Skit restores the state loaded in
preload, serialized as JSON
208 | -
209 |
Your controller: Example.js
210 |-
211 |
load()— Sets up state after data is loaded (now in the client)
212 | ready()— Sets up client-side event handlers for clicks, scrolling, etc.
213 | - … whatever else your client does in the browser. 214 |
216 |
221 |
238 |
239 | Default configuration
222 |-
223 |
- 224 | Templates are rendered with Handlebars. 225 | There exists a facility to roll your own and use your own template 226 | compiler here, but this is not documented yet. 227 | 228 |
- 229 | CSS is just plain CSS. CSS files defined in modules are always 230 | included when the module is required. 231 | 232 |
- 233 | JavaScript is plain JavaScript. There is support for inserting your own 234 | compiler step here (eg. CoffeeScript), but it is not documented yet. 235 | 236 |
240 |
250 |
251 | Try it
241 |Install skit and run an example project to get a feel for it:
242 |$ npm install skit 243 | $ ./node_modules/.bin/skit skeleton skit-example 244 | $ ./node_modules/.bin/skit run skit-example --debug245 |
246 | Also check out Getting Started for a more 247 | comprehensive walkthrough. 248 |
249 |
252 |
258 |
259 | See skit in action
253 |254 | Visit https://launchkit.io/ and log in to see 255 | skit in action. Inspect the source returned from the server to find bits of skit magic. 256 |
257 |
260 |
309 | FAQ
261 |-
262 |
-
263 |
264 | You seriously made another module loader? 265 |
266 |267 | Yeah. There are several reasons why: 268 |
269 |-
270 |
- 271 | To create a new-feeling environment that is clearly not node, because 272 | you’re writing code that runs in node and IE9 and 273 | Chrome etc. It shouldn’t feel like any old node.js module. 274 | 275 |
- 276 | In order to automatically include stylesheets and template partials 277 | used by other templates. 278 | 279 |
- 280 | To add a notion of internal-module-only includes. Internal includes, usually 281 | partials and secondary stylesheets and sometimes internal classes, can’t 282 | be loaded by other modules. 283 | 284 |
286 | -
287 |
288 | Can I use this with
290 |<my favorite framework>? 289 |291 | Maybe! It won’t help too much if your existing client-side 292 | framework of choice depends on DOM manipulation for rendering, however. 293 |
294 |295 | I have successfully integrated React (and automagic .jsx compilation) 296 | in this example project; 297 | I’m no React expert, but it seems pretty cool. 298 |
299 |
300 | -
301 |
Did you know “skit” means “shit” in Swedish?!
302 |303 | Now I do! 304 | Tusen tack! Var är toaletten? 305 |
306 |
307 |
312 |
313 | 
314 |
315 |
--------------------------------------------------------------------------------
/example/skitjs.com/public/Home.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var Controller = skit.platform.Controller;
4 |
5 | var BaseController = library.BaseController;
6 |
7 | var html = __module__.html;
8 |
9 |
10 | return Controller.create(BaseController, {
11 | __title__: function() {
12 | return 'JavaScript web application environment for first-class web clients';
13 | },
14 |
15 | __body__: function() {
16 | return html();
17 | }
18 | });
--------------------------------------------------------------------------------
/example/skitjs.com/public/getting-started/GettingStarted.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var Controller = skit.platform.Controller;
4 |
5 | var BaseController = library.BaseController;
6 |
7 | var html = __module__.html;
8 |
9 |
10 | return Controller.create(BaseController, {
11 | __title__: function() {
12 | return 'Getting Started';
13 | },
14 |
15 | __body__: function() {
16 | return html();
17 | }
18 | });
--------------------------------------------------------------------------------
/lib/ControllerRenderer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @license
5 | * (c) 2014 Cluster Labs, Inc. https://cluster.co/
6 | * License: MIT
7 | */
8 |
9 | var events = require('events');
10 | var fs = require('fs');
11 | var util = require('util');
12 |
13 | var Handlebars = require('handlebars');
14 |
15 | var scriptresource = require('./loader/scriptresource');
16 | var skitutil = require('./skitutil');
17 |
18 |
19 | var TargetEnvironment = scriptresource.TargetEnvironment;
20 |
21 | Handlebars.registerHelper('json', function(arg, opt_pretty) {
22 | try {
23 | return new Handlebars.SafeString(skitutil.safeJSONStringify(arg, opt_pretty));
24 | } catch (e) {
25 | var err = new Error('Could not JSON-encode object: ' + arg);
26 | err.originalError = e;
27 | throw err;
28 | }
29 | });
30 |
31 | var BOOTSTRAP_TEMPLATE = (function() {
32 | var templateSource = fs.readFileSync(__dirname + '/bootstrap.html').toString();
33 | return Handlebars.compile(templateSource);
34 | })();
35 |
36 | var NET_SERVER_MODULE = 'skit.platform.net:server';
37 | var ENV_SERVER_MODULE = 'skit.platform.env:server';
38 | var COOKIES_SERVER_MODULE = 'skit.platform.cookies:server';
39 | var NAVIGATION_MODULE = 'skit.platform.navigation:server';
40 | var PROXY_MODULE = 'skit.platform.netproxy';
41 | var PROXY_RESOURCE = PROXY_MODULE + ':js';
42 |
43 |
44 | function ControllerRenderer(moduleScope, bundles, server, request) {
45 | events.EventEmitter.apply(this);
46 |
47 | this.moduleScope = moduleScope;
48 | this.bundles = bundles;
49 | this.server = server;
50 | this.request = request;
51 |
52 | this.setupProxies_();
53 | this.setupNet_();
54 | this.setupCookies_();
55 | this.setupEnv_();
56 | }
57 | util.inherits(ControllerRenderer, events.EventEmitter);
58 |
59 |
60 | ControllerRenderer.ERROR = 'rendererror';
61 | ControllerRenderer.NOT_FOUND = 'notfound';
62 | ControllerRenderer.REDIRECT = 'redirect';
63 | ControllerRenderer.WRITE_HTML = 'html';
64 | ControllerRenderer.DONE_WRITING = 'done';
65 |
66 |
67 | ControllerRenderer.prototype.setupProxies_ = function() {
68 | var netproxy = this.moduleScope.getObjectByModulePath(PROXY_MODULE);
69 | if (!netproxy) {
70 | return;
71 | }
72 |
73 | this.server.eachProxy(function(name, proxy) {
74 | var reqWrap = {
75 | headers: this.request.headers,
76 | getCookie: this.request.getCookie,
77 | connection: this.request.connection,
78 | };
79 | var resWrap = {
80 | getCookie: this.request.getCookie,
81 | setCookie: this.request.setCookie,
82 | };
83 |
84 | var apiRequest;
85 | netproxy.__register__(name, {
86 | modifyRequestInternal: (function(apiRequest_) {
87 | apiRequest = apiRequest_;
88 | try {
89 | proxy.modifyRequest(reqWrap, apiRequest);
90 | } catch(e) {
91 | this.emit(ControllerRenderer.ERROR, e);
92 | }
93 | }).bind(this),
94 | modifyResponseInternal: (function(apiResponse) {
95 | try {
96 | proxy.modifyResponse(apiRequest, apiResponse, resWrap);
97 | } catch(e) {
98 | this.emit(ControllerRenderer.ERROR, e);
99 | }
100 | }).bind(this)
101 | }, this);
102 | }, this);
103 | };
104 |
105 |
106 | ControllerRenderer.prototype.setupNet_ = function() {
107 | var net = this.moduleScope.getObjectByResourcePath(NET_SERVER_MODULE);
108 | if (!net) {
109 | return;
110 | }
111 |
112 | net.__setErrorHandler__((function(e) {
113 | this.emit(ControllerRenderer.ERROR, e);
114 | }).bind(this));
115 | };
116 |
117 |
118 | ControllerRenderer.prototype.setupCookies_ = function() {
119 | var cookies = this.moduleScope.getObjectByResourcePath(COOKIES_SERVER_MODULE);
120 | if (!cookies) {
121 | return;
122 | }
123 |
124 | cookies.__setGetSet__(this.request.getCookie, this.request.setCookie);
125 | };
126 |
127 |
128 | ControllerRenderer.prototype.setupEnv_ = function() {
129 | var env = this.moduleScope.getObjectByResourcePath(ENV_SERVER_MODULE);
130 | if (!env) {
131 | return;
132 | }
133 |
134 | env.__setEnv__(this.server.env);
135 | };
136 |
137 |
138 | ControllerRenderer.prototype.serve = function() {
139 | var ControllerKlass = this.moduleScope.mainObject;
140 | if (!ControllerKlass || !ControllerKlass.__controller__) {
141 | // Only controller modules should exist inside "public".
142 | var err = new Error('Module at this path is not a controller.');
143 | this.emit(ControllerRenderer.ERROR, err);
144 | return;
145 | }
146 |
147 | this.controller = new ControllerKlass(this.request.params);
148 |
149 | var initialControllerProperties = {};
150 | for (var k in this.controller) {
151 | if (this.controller.hasOwnProperty(k)) {
152 | initialControllerProperties[k] = this.controller[k];
153 | }
154 | }
155 |
156 | var controllersToLoadInOrder = [];
157 | var CurrentControllerKlass = ControllerKlass;
158 | while (CurrentControllerKlass) {
159 | controllersToLoadInOrder.unshift(CurrentControllerKlass);
160 | CurrentControllerKlass = CurrentControllerKlass.__parent__;
161 | }
162 |
163 | var i = 0;
164 | var preloadNext = (function() {
165 | var CurrentControllerKlass = controllersToLoadInOrder[i++];
166 | if (!CurrentControllerKlass) {
167 | loadAndRender();
168 | return;
169 | }
170 |
171 | this.preloadController(CurrentControllerKlass, preloadNext);
172 | }).bind(this);
173 |
174 | var loadAndRender = (function() {
175 | var controllerProperties = {};
176 | for (var k in this.controller) {
177 | if (this.controller.hasOwnProperty(k) && initialControllerProperties[k] != this.controller[k]) {
178 | controllerProperties[k] = this.controller[k];
179 | }
180 | }
181 |
182 | this.controller.recursiveLoad();
183 |
184 | this.render(controllerProperties);
185 | }).bind(this);
186 |
187 | preloadNext();
188 | };
189 |
190 |
191 | ControllerRenderer.prototype.preloadController = function(ControllerKlass, onComplete) {
192 | var scheme = this.request.headers['x-forwarded-proto'] || 'http';
193 | var schemeAndHost = scheme + '://' + this.request.headers['host'];
194 |
195 | var navigation = this.moduleScope.getObjectByResourcePath(NAVIGATION_MODULE);
196 | if (navigation) {
197 | var fullUrl = schemeAndHost + this.request.url;
198 | navigation.__reset__(fullUrl, this.request.headers['user-agent'], this.request.headers['referer']);
199 | }
200 |
201 | var hasPreload = ControllerKlass.prototype.hasOwnProperty('__preload__');
202 | var preload = ControllerKlass.prototype.__preload__;
203 | if (!hasPreload) {
204 | preload = function defaultPreload(f) { f(); };
205 | }
206 |
207 | var preloadComplete = (function(var_args) {
208 | if (navigation) {
209 | if (navigation.__notfound__()) {
210 | this.emit(ControllerRenderer.NOT_FOUND);
211 | return;
212 | }
213 |
214 | var redirects = navigation.__redirects__();
215 | if (redirects && redirects.length) {
216 | var lastRedirect = redirects[redirects.length - 1];
217 | var redirectUrl = lastRedirect.url;
218 | if (redirectUrl.indexOf(schemeAndHost) == 0) {
219 | redirectUrl = redirectUrl.replace(schemeAndHost, '');
220 | }
221 | this.emit(ControllerRenderer.REDIRECT, redirectUrl, !!lastRedirect.permanent);
222 | return;
223 | }
224 | }
225 |
226 | onComplete();
227 | }).bind(this);
228 |
229 | try {
230 | preload.call(this.controller, preloadComplete);
231 | } catch (e) {
232 | this.emit(ControllerRenderer.ERROR, e);
233 | }
234 | };
235 |
236 |
237 | ControllerRenderer.prototype.render = function(controllerProperties) {
238 | try {
239 | var title = this.controller.getFullTitle();
240 | var meta = this.controller.getFullMeta();
241 | var body = this.controller.renderFullBody();
242 | } catch (e) {
243 | this.emit(ControllerRenderer.ERROR, e);
244 | return;
245 | }
246 |
247 | var cssUrls = {};
248 | var jsUrls = {};
249 |
250 | var cssBundleUrls = [];
251 | var jsBundleUrls = [];
252 |
253 | this.bundles.forEach(function(bundle) {
254 | bundle.allStyles().forEach(function(resource) {
255 | var css = this.server.getResourceUrl(resource);
256 | var cssUrl = css.path || css;
257 | var integrity = css.integrity || null;
258 | if (!(cssUrl in cssUrls)) {
259 | cssUrls[cssUrl] = 1;
260 | cssBundleUrls.push({
261 | bundle: bundle.name,
262 | url: cssUrl,
263 | integrity: integrity,
264 | });
265 | }
266 | }, this);
267 |
268 | bundle.allScripts().forEach(function(resource) {
269 | if (resource.includeInEnvironment(TargetEnvironment.BROWSER)) {
270 | var js = this.server.getResourceUrl(resource);
271 | var jsUrl = js.path || js;
272 | var integrity = js.integrity || null;
273 | if (!(jsUrl in jsUrls)) {
274 | jsUrls[jsUrl] = 1;
275 | jsBundleUrls.push({
276 | bundle: bundle.name,
277 | url: jsUrl,
278 | integrity: integrity,
279 | });
280 | }
281 | }
282 | }, this);
283 | }, this);
284 |
285 | var clientProxyObjects = [];
286 | this.server.eachProxy(function(name, proxy) {
287 | clientProxyObjects.push({
288 | name: name,
289 | csrfToken: proxy.generateCSRF(this.request)
290 | });
291 | }, this);
292 |
293 | var html = BOOTSTRAP_TEMPLATE({
294 | title: title,
295 | meta: meta,
296 | body: body,
297 | currentUrlAfterRedirect: this.request.originalUrl !== this.request.url ? this.request.url : null,
298 |
299 | env: this.server.env,
300 |
301 | cssUrls: cssBundleUrls,
302 | jsUrls: jsBundleUrls,
303 |
304 | netproxyModulePath: PROXY_RESOURCE,
305 | clientProxyObjects: clientProxyObjects,
306 |
307 | params: this.request.params,
308 | controllerModulePath: this.moduleScope.mainObjectResourcePath,
309 | controllerProperties: controllerProperties,
310 | });
311 |
312 | // TODO(taylor): Render CSS before the preload is done.
313 | this.emit(ControllerRenderer.WRITE_HTML, html);
314 | this.emit(ControllerRenderer.DONE_WRITING);
315 | };
316 |
317 |
318 | module.exports = ControllerRenderer;
319 |
--------------------------------------------------------------------------------
/lib/SkitProxy.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @license
5 | * (c) 2014 Cluster Labs, Inc. https://cluster.co/
6 | * License: MIT
7 | */
8 |
9 | var crypto = require('crypto');
10 |
11 | var CSRF_COOKIE_PREFIX = 'csrf_';
12 |
13 | var X_FORWARDED_FOR = 'x-forwarded-for';
14 | var X_FORWARDED_PROTO = 'x-forwarded-proto';
15 |
16 |
17 | function SkitProxy(name, modifyRequest, modifyResponse) {
18 | this.name = name;
19 | this.modifyRequest_ = modifyRequest;
20 | this.modifyResponse_ = modifyResponse;
21 | }
22 |
23 | SkitProxy.prototype.modifyRequest = function(proxyRequest, apiRequest) {
24 | // Include the original remote IP and add our own to the forwarded list.
25 | var xForwardedFor = proxyRequest.headers[X_FORWARDED_FOR];
26 | var remoteIp = proxyRequest.connection.remoteAddress;
27 | if (xForwardedFor) {
28 | xForwardedFor += ', ' + remoteIp;
29 | } else {
30 | xForwardedFor = remoteIp;
31 | }
32 | apiRequest.headers[X_FORWARDED_FOR] = xForwardedFor;
33 |
34 | // Include whether the request was originally initiated over https.
35 | if (proxyRequest.headers[X_FORWARDED_PROTO]) {
36 | apiRequest.headers[X_FORWARDED_PROTO] = proxyRequest.headers[X_FORWARDED_PROTO];
37 | } else if (proxyRequest.connection.encrypted) {
38 | apiRequest.headers[X_FORWARDED_PROTO] = 'https';
39 | }
40 |
41 | this.modifyRequest_(proxyRequest, apiRequest);
42 | };
43 |
44 | SkitProxy.prototype.modifyResponse = function(apiRequest, apiResponse, proxyResponse) {
45 | this.modifyResponse_(apiRequest, apiResponse, proxyResponse);
46 | };
47 |
48 | SkitProxy.prototype.cookieName_ = function() {
49 | return CSRF_COOKIE_PREFIX + this.name;
50 | };
51 |
52 | SkitProxy.prototype.verifyCSRF = function(req, token) {
53 | var cookieValue = req.getCookie(this.cookieName_());
54 | if (token == cookieValue) {
55 | return true;
56 | }
57 |
58 | console.log('Invalid CSRF token:', token, typeof token, 'expected:', cookieValue, typeof cookieValue,
59 | req.headers['x-forwarded-for']);
60 |
61 | return false;
62 | };
63 |
64 | SkitProxy.prototype.generateCSRF = function(req) {
65 | var cookieValue = req.getCookie(this.cookieName_());
66 | if (!cookieValue) {
67 | cookieValue = crypto.randomBytes(16).toString('base64');
68 | req.setCookie(this.cookieName_(), cookieValue, {httpOnly: true});
69 | }
70 | return cookieValue;
71 | };
72 |
73 | module.exports = SkitProxy;
--------------------------------------------------------------------------------
/lib/bootstrap.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
314 |
315 | {{{ body }}}
20 |
50 | {{#each jsUrls}}
51 |
52 | {{/each}}
53 |
75 |
--------------------------------------------------------------------------------
/lib/error.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
67 |
83 |
92 |
96 |
--------------------------------------------------------------------------------
/lib/errors.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @license
5 | * (c) 2014 Cluster Labs, Inc. https://cluster.co/
6 | * License: MIT
7 | */
8 |
9 | var fs = require('fs');
10 |
11 | var Handlebars = require('handlebars');
12 |
13 | var skitutil = require('./skitutil');
14 |
15 |
16 | var ERROR_TEMPLATE = (function() {
17 | var templateSource = fs.readFileSync(__dirname + '/error.html').toString();
18 | return Handlebars.compile(templateSource);
19 | })();
20 |
21 |
22 | function renderError(req, res, error) {
23 | var message = error.message || 'Error processing request';
24 |
25 | console.log('Rendering error response for:', req.url, 'stack:', error.stack);
26 |
27 | var fileName, lineNumber;
28 | if (error.fileName) {
29 | fileName = error.fileName;
30 | lineNumber = error.lineNumber;
31 | } else if (error.stack) {
32 | var firstLine = error.stack.split(/\n/)[1];
33 | var fileAndLineNumber = firstLine.match(/\((\/.+):(\d+):\d+\)$/);
34 | if (fileAndLineNumber) {
35 | fileName = fileAndLineNumber[1];
36 | lineNumber = +(fileAndLineNumber[2]);
37 | }
38 | }
39 |
40 | var excerptHtml;
41 | if (fileName && lineNumber) {
42 | var fileContent = '68 | {{#if code }} 69 | [{{code}}] 70 | {{/if}} 71 | Error processing request 72 |
73 |74 | {{#if error }} 75 | {{error}} 76 | {{else}} 77 | {{message}} 78 | {{/if}} 79 |
80 | 81 | {{#if fileName }} 82 |83 |
Location
84 |{{ fileName }}:{{ lineNumber }}
{{{ excerptHtml }}}
87 | {{/if}}
88 | {{/if}}
89 |
90 | {{#if error.stack }}
91 | 92 |
Original stack
93 |{{error.stack}}
94 | {{/if}}
95 |