Skip to content

Commit e081d24

Browse files
mythzmythz
committed
integrate more v5.9 docs
1 parent ef91ab6 commit e081d24

9 files changed

Lines changed: 204 additions & 13 deletions

File tree

‎src/wwwroot/docs/default-scripts.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@ <h4 id="as-bindings">Methods as bindings</h4>
1919
Script Methods with no arguments can be used in-place of an argument binding, <em>now</em> and <em>utcNow</em> are some examples of this:
2020
</p>
2121

22-
{{ 'live-template' |> partial({ template: "now: {{ now |> dateFormat }}
23-
UTC now: {{ utcNow |> dateFormat('o') }}" }) }}
22+
{{ 'live-template' |> partial({ rows: 4, template: "now: {{ now |> dateFormat }}
23+
UTC now: {{ utcNow |> dateFormat('o') }}
24+
UTC DateTimeOffset {{ utcNowOffset }},
25+
nguid: {{ nguid }}" }) }}
2426

2527
<p>
2628
Many methods have an implicit default format which can be overridden in the ScriptContext's <em>Args</em>, e.g

‎src/wwwroot/docs/partials.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,14 @@ <h5>Cascading resolution</h5>
107107

108108
<pre class="cs"><code>{{ pass: 'dir/subdir/my-partial' |> partial }}</code></pre>
109109

110+
<h4>ownProps</h4>
111+
112+
<p>
113+
Use <em>ownProps</em> to iterate all user-defined arguments specified for a partial, e.g:
114+
</p>
115+
116+
{{ 'live-template' |> partial({ rows:2, template: `{{#partial test}} {{ it.ownProps() |> map => it.Key |> dump }} {{/partial}}
117+
{{ 'test' |> partial({ A:1, B:2, C:3 }) }}` }) }}
118+
119+
110120
{{ "doc-links" |> partial({ order }) }}

‎src/wwwroot/docs/syntax.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,51 @@ <h4 id="javascript-literals">JavaScript literal notation</h4>
8787
{{ var obj = { bar } }}
8888
{{ obj['bar'] }}" }) }}
8989

90+
<h4>Local Variables</h4>
91+
92+
<p>
93+
Like JavaScript you can declare a locally scoped variable with <em>var</em>:
94+
</p>
95+
96+
<pre><code>var sliders = dirFiles('img/sliders')</code></pre>
97+
98+
<p>
99+
Like JS you can use either <em>var</em>, <em>let</em> or <em>const</em> but they all behave like let and assign a locally scoped variable
100+
at the time the expression is executed. Also like JS the semicolon is optional and you can assign multiple variables in a single expression:
101+
</p>
102+
103+
<pre><code>let a = 1 + 2, b = 3 * 4, c, d = 'D';</code></pre>
104+
105+
<h4>Global Variables</h4>
106+
107+
<p>
108+
Global Variables in <em>#Script</em> are maintained in the <em>PageResult.Args</em> dictionary which you could previously assign to using the
109+
<em>toGlobal</em> script method where it’s accessible to all scripts rendered within that <em>PageResult</em>.
110+
</p>
111+
112+
<p>
113+
<em>#Script</em> now mimics JS's behavior to allow assignment expressions to assign global variables where **Assignment Expressions** on
114+
undeclared variables (i.e. where no locally scoped variable exists) will assign a global variable:
115+
</p>
116+
117+
<pre><code>a = 1</code></pre>
118+
119+
<p>
120+
A more descriptive syntax available to declare a global variable is to assign it to the <em>global</em> object (inspired by node’s global)
121+
which is an alias to the <em>PageResult.Args</em> dictionary:
122+
</p>
123+
124+
<pre><code>global.a = 1</code></pre>
125+
126+
<h4>Assignment Expressions</h4>
127+
128+
<p>
129+
In addition to declaring and assigning variables, there’s also support for using assignment expressions to assign and mutate Collections and
130+
Type Properties using either Member Expression or Index expression syntax, e.g:
131+
</p>
132+
133+
{{ 'gfm/syntax/11.md' |> githubMarkdown }}
134+
90135
<h4>Quotes</h4>
91136

92137
<p>

‎src/wwwroot/gfm/sharp-pages/10.html‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span class="pl-s"><span class="pl-pds">"</span>Created<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-v">VARCHAR</span></span>(<span class="pl-e"><span class="pl-v">8000</span></span>) <span class="pl-e"><span class="pl-v">NOT</span></span> <span class="pl-e"><span class="pl-v">NULL</span></span>,
88
<span class="pl-s"><span class="pl-pds">"</span>Modified<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-v">VARCHAR</span></span>(<span class="pl-e"><span class="pl-v">8000</span></span>) <span class="pl-e"><span class="pl-v">NOT</span></span> <span class="pl-e"><span class="pl-v">NULL</span></span>
99
);`
10-
| <span class="pl-e"><span class="pl-v">dbExec</span></span>
10+
|&gt; <span class="pl-e"><span class="pl-v">dbExec</span></span>
1111
<span class="pl-c1">}}</span>
1212

1313
<span class="pl-c1">{{</span> <span class="pl-v">dbScalar</span>(`<span class="pl-e"><span class="pl-v">SELECT</span></span> <span class="pl-e"><span class="pl-v">COUNT</span></span>(*) <span class="pl-e"><span class="pl-v">FROM</span></span> <span class="pl-e"><span class="pl-v">Post</span></span>`) |&gt; <span class="pl-e"><span class="pl-v">to</span></span> =&gt; <span class="pl-e"><span class="pl-v">postsCount</span></span> <span class="pl-c1">}}</span>
@@ -23,13 +23,47 @@
2323
<span class="pl-c1">{{</span><span class="pl-c1">/if</span>}
2424

2525
{{ htmlError <span class="pl-c1">}}</span></pre></div>
26+
<p>If there was an Exception with any of the SQL Statements it will be displayed in the <code>{{ htmlError }}</code> filter which can be
27+
later viewed in the <a href="http://blog.web-app.io/log" rel="nofollow">/log</a> page above.</p>
2628
<p>The output of the <code>_init</code> page is captured in the <code>initout</code> argument which can be later inspected as a normal template argument as seen in
2729
<a href="https://github.com/sharp-apps/blog/blob/master/log.html">log.html</a>:</p>
28-
<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span>&gt;
30+
<div class="highlight highlight-text-html-basic"><pre><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
2931
Output from init.html:
32+
<span class="pl-kos">&lt;</span><span class="pl-ent">pre</span><span class="pl-kos">&gt;</span>{{initout |<span class="pl-kos">&gt;</span> raw}}<span class="pl-kos">&lt;/</span><span class="pl-ent">pre</span><span class="pl-kos">&gt;</span>
33+
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
34+
<p>A good idea to view Script <strong>Init</strong> &amp; <strong>Page</strong> Errors is to include both <code>initError</code> and <code>htmlError</code> in your <strong>_layout.html</strong> as done in
35+
<a href="https://github.com/NetCoreApps/SharpData/blob/master/wwwroot/_layout.html">/SharpData/wwwroot/_layout.html</a>:</p>
36+
<div class="highlight highlight-text-html-handlebars"><pre><span class="pl-c1">{{</span><span class="pl-v">initError</span> |&gt; <span class="pl-e"><span class="pl-v">htmlError</span></span><span class="pl-c1">}}</span>
37+
<span class="pl-c1">{{</span><span class="pl-v">htmlError</span><span class="pl-c1">}}</span></pre></div>
38+
<h3>
39+
<a id="initss" class="anchor" href="#initss" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>init.ss</h3>
40+
<p>Instead of <code>init.html</code> you can also use <a href="https://github.com/NetCoreApps/SharpData/blob/master/wwwroot/_init.ss">_init.ss</a> which is used in
41+
Apps like <a href="https://github.com/NetCoreApps/SharpData">SharpData</a> to construct a ServiceStack App's <a href="https://docs.servicestack.net/svg" rel="nofollow">SVG stylesheet bundle</a>
42+
from a user-defined list of embedded <code>*.svg</code> resources and inline SVG declarations, e.g:</p>
43+
<div class="highlight highlight-text-html-handlebars"><pre><span class="pl-c1">{{</span>
44+
<span class="pl-e"><span class="pl-v">var</span></span> <span class="pl-e"><span class="pl-v">AppSvgs</span></span> = {
45+
<span class="pl-s"><span class="pl-pds">'</span>action/home.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>home<span class="pl-pds">'</span></span>,
46+
<span class="pl-s"><span class="pl-pds">'</span>device/storage.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>db<span class="pl-pds">'</span></span>,
47+
<span class="pl-s"><span class="pl-pds">'</span>action/list.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>table<span class="pl-pds">'</span></span>,
48+
<span class="pl-s"><span class="pl-pds">'</span>navigation/first_page.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>chevron-first<span class="pl-pds">'</span></span>,
49+
<span class="pl-s"><span class="pl-pds">'</span>navigation/last_page.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>chevron-last<span class="pl-pds">'</span></span>,
50+
<span class="pl-s"><span class="pl-pds">'</span>navigation/expand_more.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>chevron-down<span class="pl-pds">'</span></span>,
51+
<span class="pl-s"><span class="pl-pds">'</span>navigation/chevron_left.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>chevron-left<span class="pl-pds">'</span></span>,
52+
<span class="pl-s"><span class="pl-pds">'</span>navigation/chevron_right.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>chevron-right<span class="pl-pds">'</span></span>,
53+
<span class="pl-s"><span class="pl-pds">'</span>navigation/expand_less.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>chevron-up<span class="pl-pds">'</span></span>,
54+
<span class="pl-s"><span class="pl-pds">'</span>content/clear.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>clear<span class="pl-pds">'</span></span>,
55+
<span class="pl-s"><span class="pl-pds">'</span>content/filter_list.svg<span class="pl-pds">'</span></span>: <span class="pl-s"><span class="pl-pds">'</span>filter<span class="pl-pds">'</span></span>,
56+
}
57+
<span class="pl-c1">}}</span>
3058

31-
&lt;<span class="pl-ent">pre</span>&gt;{{initout |> raw}}&lt;/<span class="pl-ent">pre</span>&gt;
32-
&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
33-
<p>If there was an Exception with any of the SQL Statements it will be displayed in the <code>{{ htmlError }}</code> filter which can be
34-
later viewed in the <a href="http://blog.web-app.io/log" rel="nofollow">/log</a> page above.</p>
59+
<span class="pl-c1">{{</span><span class="pl-c1">#each</span> <span class="pl-v">AppSvgs</span><span class="pl-c1">}}</span>
60+
<span class="pl-c1">{{</span>`<span class="pl-e"><span class="pl-v">/lib/svg/material</span></span>/${<span class="pl-e"><span class="pl-v">it.Key</span></span>}` |&gt; <span class="pl-e"><span class="pl-v">svgAddFile</span></span>(<span class="pl-e"><span class="pl-v">it.Value</span></span>,<span class="pl-s"><span class="pl-pds">'</span>app<span class="pl-pds">'</span></span>)<span class="pl-c1">}}</span>
61+
<span class="pl-c1">{{</span><span class="pl-c1">/each</span><span class="pl-c1">}}</span>
62+
63+
<span class="pl-c1">{{</span><span class="pl-c1">#svg</span> <span class="pl-v">fields</span> <span class="pl-c1">app}}</span>
64+
&lt;<span class="pl-ent">svg</span> <span class="pl-e"><span class="pl-e">xmlns</span>=</span><span class="pl-s"><span class="pl-pds">"</span>http://www.w3.org/2000/svg<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-e">viewBox</span>=</span><span class="pl-s"><span class="pl-pds">"</span>0 0 24 24<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-e">fill</span>=</span><span class="pl-s"><span class="pl-pds">"</span>black<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-e">width</span>=</span><span class="pl-s"><span class="pl-pds">"</span>48px<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-e">height</span>=</span><span class="pl-s"><span class="pl-pds">"</span>48px<span class="pl-pds">"</span></span>&gt;
65+
&lt;<span class="pl-ent">path</span> <span class="pl-e"><span class="pl-e">d</span>=</span><span class="pl-s"><span class="pl-pds">"</span>M0 0h24v24H0V0z<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-e">fill</span>=</span><span class="pl-s"><span class="pl-pds">"</span>none<span class="pl-pds">"</span></span>/&gt;
66+
&lt;<span class="pl-ent">path</span> <span class="pl-e"><span class="pl-e">d</span>=</span><span class="pl-s"><span class="pl-pds">"</span>M4 5v13h17V5H4zm10 2v9h-3V7h3zM6 7h3v9H6V7zm13 9h-3V7h3v9z<span class="pl-pds">"</span></span> <span class="pl-e"><span class="pl-e">fill</span>=</span><span class="pl-s"><span class="pl-pds">"</span>#ffffff<span class="pl-pds">"</span></span>/&gt;
67+
&lt;/<span class="pl-ent">svg</span>&gt;
68+
<span class="pl-c1">{{</span><span class="pl-c1">/svg</span><span class="pl-c1">}}</span></pre></div>
3569
</div>

‎src/wwwroot/gfm/sharp-pages/10.md‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,58 @@
2626
{{ htmlError }}
2727
```
2828

29+
If there was an Exception with any of the SQL Statements it will be displayed in the `{{ htmlError }}` filter which can be
30+
later viewed in the [/log](http://blog.web-app.io/log) page above.
31+
2932
The output of the `_init` page is captured in the `initout` argument which can be later inspected as a normal template argument as seen in
3033
[log.html](https://github.com/sharp-apps/blog/blob/master/log.html):
3134

3235
```html
3336
<div>
3437
Output from init.html:
35-
3638
<pre>{{initout |> raw}}</pre>
3739
</div>
3840
```
3941

40-
If there was an Exception with any of the SQL Statements it will be displayed in the `{{ htmlError }}` filter which can be
41-
later viewed in the [/log](http://blog.web-app.io/log) page above.
42+
A good idea to view Script **Init** & **Page** Errors is to include both `initError` and `htmlError` in your **_layout.html** as done in
43+
[/SharpData/wwwroot/_layout.html](https://github.com/NetCoreApps/SharpData/blob/master/wwwroot/_layout.html):
44+
45+
```hbs
46+
{{initError |> htmlError}}
47+
{{htmlError}}
48+
```
49+
50+
### init.ss
51+
52+
Instead of `init.html` you can also use [_init.ss](https://github.com/NetCoreApps/SharpData/blob/master/wwwroot/_init.ss) which is used in
53+
Apps like [SharpData](https://github.com/NetCoreApps/SharpData) to construct a ServiceStack App's [SVG stylesheet bundle](https://docs.servicestack.net/svg)
54+
from a user-defined list of embedded `*.svg` resources and inline SVG declarations, e.g:
55+
56+
```hbs
57+
{{
58+
var AppSvgs = {
59+
'action/home.svg': 'home',
60+
'device/storage.svg': 'db',
61+
'action/list.svg': 'table',
62+
'navigation/first_page.svg': 'chevron-first',
63+
'navigation/last_page.svg': 'chevron-last',
64+
'navigation/expand_more.svg': 'chevron-down',
65+
'navigation/chevron_left.svg': 'chevron-left',
66+
'navigation/chevron_right.svg': 'chevron-right',
67+
'navigation/expand_less.svg': 'chevron-up',
68+
'content/clear.svg': 'clear',
69+
'content/filter_list.svg': 'filter',
70+
}
71+
}}
72+
73+
{{#each AppSvgs}}
74+
{{`/lib/svg/material/${it.Key}` |> svgAddFile(it.Value,'app')}}
75+
{{/each}}
76+
77+
{{#svg fields app}}
78+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px">
79+
<path d="M0 0h24v24H0V0z" fill="none"/>
80+
<path d="M4 5v13h17V5H4zm10 2v9h-3V7h3zM6 7h3v9H6V7zm13 9h-3V7h3v9z" fill="#ffffff"/>
81+
</svg>
82+
{{/svg}}
83+
```

‎src/wwwroot/gfm/syntax/11.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="gfm"><div class="highlight highlight-source-js"><pre><span class="pl-s1">intList</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">10</span>
2+
<span class="pl-s1">stringArray</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s">"foo"</span>
3+
<span class="pl-s1">stringMap</span><span class="pl-kos">[</span><span class="pl-s">"foo"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s">"bar"</span>
4+
<span class="pl-s1">person</span><span class="pl-kos">.</span><span class="pl-c1">Age</span> <span class="pl-c1">=</span> <span class="pl-c1">27</span>
5+
<span class="pl-s1">objectMap</span><span class="pl-kos">.</span><span class="pl-c1">Person</span><span class="pl-kos">.</span><span class="pl-c1">Name</span> <span class="pl-c1">=</span> <span class="pl-s">"kurt"</span>
6+
<span class="pl-s1">objectMap</span><span class="pl-kos">[</span><span class="pl-s">'Per'</span> <span class="pl-c1">+</span> <span class="pl-s">'son'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">Name</span> <span class="pl-c1">=</span> <span class="pl-s">"kurt"</span>
7+
<span class="pl-s1">intList</span><span class="pl-kos">[</span><span class="pl-c1">1.</span><span class="pl-en">isOdd</span><span class="pl-kos">(</span><span class="pl-kos">)</span> ? <span class="pl-c1">2</span> : <span class="pl-c1">3</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">30</span></pre></div>
8+
<h3>
9+
<a id="dynamically-resolve-args" class="anchor" href="#dynamically-resolve-args" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Dynamically resolve args</h3>
10+
<p>The <code>resolve*</code> APIs let you resolve a variable named with the result of an expression, e.g:</p>
11+
<div class="highlight highlight-source-ts"><pre><span class="pl-k">var</span> <span class="pl-s1">tableNames</span> <span class="pl-c1">=</span> <span class="pl-en">resolveGlobal</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">db</span><span class="pl-kos">}</span></span>_tables`</span><span class="pl-kos">)</span></pre></div>
12+
<p>Equivalent to:</p>
13+
<div class="highlight highlight-source-ts"><pre><span class="pl-k">var</span> <span class="pl-s1">tableNames</span> <span class="pl-c1">=</span> <span class="pl-s1">global</span><span class="pl-kos">[</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">db</span><span class="pl-kos">}</span></span>_tables`</span><span class="pl-kos">]</span></pre></div>
14+
<p>Whereas <code>resolveArg</code> lets you resolve a variable using locally scope resolution hierarchy:</p>
15+
<div class="highlight highlight-source-ts"><pre><span class="pl-k">var</span> <span class="pl-s1">tableNames</span> <span class="pl-c1">=</span> <span class="pl-en">resolveArg</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">db</span><span class="pl-kos">}</span></span>_tables`</span><span class="pl-kos">)</span></pre></div>
16+
</div>

‎src/wwwroot/gfm/syntax/11.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```js
2+
intList[1] = 10
3+
stringArray[1] = "foo"
4+
stringMap["foo"] = "bar"
5+
person.Age = 27
6+
objectMap.Person.Name = "kurt"
7+
objectMap['Per' + 'son'].Name = "kurt"
8+
intList[1.isOdd() ? 2 : 3] = 30
9+
```
10+
11+
### Dynamically resolve args
12+
13+
The `resolve*` APIs let you resolve a variable named with the result of an expression, e.g:
14+
15+
```ts
16+
var tableNames = resolveGlobal(`${db}_tables`)
17+
```
18+
19+
Equivalent to:
20+
21+
```ts
22+
var tableNames = global[`${db}_tables`]
23+
```
24+
25+
Whereas `resolveArg` lets you resolve a variable using locally scope resolution hierarchy:
26+
27+
```ts
28+
var tableNames = resolveArg(`${db}_tables`)
29+
```

0 commit comments

Comments
 (0)