1+ //modules
2+ import type {
3+ ServerConfigProps ,
4+ ServerPageProps
5+ } from 'stackpress/view/client' ;
6+ import { useLanguage } from 'stackpress/view/client' ;
7+ //docs
8+ import { H1 , H2 , P , H } from '../../../components/index.js' ;
9+ import { Nav , Code , Layout } from '../../../components/index.js' ;
10+
11+ const examples = [
12+ //0-------------------------------------------------------------------//
13+ `import { map } from 'stackpress/lib'
14+ const data = map()
15+ const data = map([['foo', 'bar'], ['bar', 'foo']])
16+ const data = map<string, string>()` ,
17+ //1-------------------------------------------------------------------//
18+ ] ;
19+
20+ export function Head ( props : ServerPageProps < ServerConfigProps > ) {
21+ //props
22+ const { request, styles = [ ] } = props ;
23+ //hooks
24+ const { _ } = useLanguage ( ) ;
25+ //variables
26+ const title = _ ( 'Callable Map - Data - Stackpress Documentation' ) ;
27+ const description = _ (
28+ 'A callable map is a type of callable class. In this case it\'s '
29+ + 'a Map() class that can be called as a function.'
30+ ) ;
31+ return (
32+ < >
33+ < title > { title } </ title >
34+ < meta name = "description" content = { description } />
35+ < meta property = "og:title" content = { title } />
36+ < meta property = "og:image" content = "/images/icon.png" />
37+ < meta property = "og:url" content = { request . url . pathname } />
38+ < meta property = "og:type" content = "website" />
39+ < meta name = "twitter:card" content = "summary" />
40+ < meta name = "twitter:title" content = { title } />
41+ < meta name = "twitter:image" content = "/images/icon.png" />
42+
43+ < link rel = "icon" type = "image/x-icon" href = "/favicon.ico" />
44+ < link rel = "stylesheet" type = "text/css" href = "/styles/global.css" />
45+ { styles . map ( ( href , index ) => (
46+ < link key = { index } rel = "stylesheet" type = "text/css" href = { href } />
47+ ) ) }
48+ </ >
49+ )
50+ }
51+
52+ export function Right ( ) {
53+ const { _ } = useLanguage ( ) ;
54+ return (
55+ < menu className = "px-m-0 px-px-10 px-py-20 px-h-100-40 overflow-auto" >
56+ < h6 className = "theme-muted px-fs-14 px-mb-0 px-mt-0 px-pb-10 uppercase" >
57+ { _ ( 'Properties' ) }
58+ </ h6 >
59+ < nav className = "px-fs-14 px-lh-32" >
60+ < a className = "theme-tx0 block" href = "#size" >
61+ { _ ( 'size' ) }
62+ </ a >
63+ </ nav >
64+
65+ < h6 className = "theme-muted px-fs-14 px-mb-0 px-mt-40 px-pb-10 uppercase" >
66+ { _ ( 'Methods' ) }
67+ </ h6 >
68+ < nav className = "px-fs-14 px-lh-32" >
69+ < a className = "theme-tx0 block" href = "#clear" >
70+ { _ ( 'clear()' ) }
71+ </ a >
72+ < a className = "theme-tx0 block" href = "#delete" >
73+ { _ ( 'delete()' ) }
74+ </ a >
75+ < a className = "theme-tx0 block" href = "#entries" >
76+ { _ ( 'entries()' ) }
77+ </ a >
78+ < a className = "theme-tx0 block" href = "#for-each" >
79+ { _ ( 'forEach()' ) }
80+ </ a >
81+ < a className = "theme-tx0 block" href = "#get" >
82+ { _ ( 'get()' ) }
83+ </ a >
84+ < a className = "theme-tx0 block" href = "#has" >
85+ { _ ( 'has()' ) }
86+ </ a >
87+ < a className = "theme-tx0 block" href = "#keys" >
88+ { _ ( 'keys()' ) }
89+ </ a >
90+ < a className = "theme-tx0 block" href = "#set" >
91+ { _ ( 'set()' ) }
92+ </ a >
93+ < a className = "theme-tx0 block" href = "#values" >
94+ { _ ( 'values()' ) }
95+ </ a >
96+ </ nav >
97+ </ menu >
98+ ) ;
99+ }
100+
101+ export function Body ( ) {
102+ return (
103+ < article className = "px-h-100-0 overflow-auto px-px-20 px-pb-20 px-fs-15" >
104+ < H1 > Callable Map</ H1 >
105+
106+ < P >
107+ A callable map is a type of callable class. In this case it's
108+ a < H > Map()</ H > class that can be called as a function. It
109+ can be created in the following ways.
110+ </ P >
111+
112+ < Code > { examples [ 0 ] } </ Code >
113+
114+ < P >
115+ Once created you can use it as a function. The callable map
116+ will return the value of the key passed as an argument. If
117+ the key does not exist in the map, it will
118+ return < H > undefined</ H > .
119+ </ P >
120+
121+ < Code > { `data('foo')` } </ Code >
122+
123+ { /*------------------------------------------------------------*/ }
124+
125+ < a id = "size" > </ a >
126+ < H2 > size</ H2 >
127+
128+ < section >
129+ < P >
130+ Returns the number of key/value pairs in the map. This is
131+ the same as the < H > length</ H > property for arrays.
132+ </ P >
133+
134+ < Code > { `data.size` } </ Code >
135+ </ section >
136+
137+ { /*------------------------------------------------------------*/ }
138+
139+ < a id = "clear" > </ a >
140+ < H2 > clear()</ H2 >
141+
142+ < section >
143+ < P >
144+ Clears the map. This will remove all the keys and values
145+ from the map.
146+ </ P >
147+
148+ < Code > { `data.clear()` } </ Code >
149+ </ section >
150+
151+ { /*------------------------------------------------------------*/ }
152+
153+ < a id = "delete" > </ a >
154+ < H2 > delete()</ H2 >
155+
156+ < section >
157+ < P >
158+ Deletes the key/value pair from the map. If the key does
159+ not exist in the map, it will do nothing.
160+ </ P >
161+
162+ < Code > { `data.delete('foo')` } </ Code >
163+ </ section >
164+
165+ { /*------------------------------------------------------------*/ }
166+
167+ < a id = "entries" > </ a >
168+ < H2 > entries()</ H2 >
169+
170+ < section >
171+ < P >
172+ Returns an iterator object that contains the key/value
173+ pairs for each element in the map.
174+ </ P >
175+
176+ < Code > { `for (const [ key, value ] of data.entries()) {...}` } </ Code >
177+ </ section >
178+
179+ { /*------------------------------------------------------------*/ }
180+
181+ < a id = "for-each" > </ a >
182+ < H2 > forEach()</ H2 >
183+
184+ < section >
185+ < P >
186+ Calls a function for each key/value pair in the map. The
187+ function is called with the value, key and the map itself
188+ as arguments.
189+ </ P >
190+
191+ < Code > { `data.forEach((value, key, map) => {...})` } </ Code >
192+ </ section >
193+
194+ { /*------------------------------------------------------------*/ }
195+
196+ < a id = "get" > </ a >
197+ < H2 > get()</ H2 >
198+
199+ < section >
200+ < P >
201+ Returns the value associated with the key. If the key
202+ does not exist in the map, it will return < H > undefined</ H > .
203+ </ P >
204+
205+ < Code > { `data.get('foo')` } </ Code >
206+ </ section >
207+
208+ { /*------------------------------------------------------------*/ }
209+
210+ < a id = "has" > </ a >
211+ < H2 > has()</ H2 >
212+
213+ < section >
214+ < P >
215+ Returns < H > true</ H > if the key exists in the map,
216+ otherwise it will return < H > false</ H > .
217+ </ P >
218+
219+ < Code > { `data.has('foo')` } </ Code >
220+ </ section >
221+
222+ { /*------------------------------------------------------------*/ }
223+
224+ < a id = "keys" > </ a >
225+ < H2 > keys()</ H2 >
226+
227+ < section >
228+ < P >
229+ Returns an iterator object that contains the keys for
230+ each element in the map.
231+ </ P >
232+
233+ < Code > { `for (const key of data.keys()) {...}` } </ Code >
234+ </ section >
235+
236+ { /*------------------------------------------------------------*/ }
237+
238+ < a id = "set" > </ a >
239+ < H2 > set()</ H2 >
240+
241+ < section >
242+ < P >
243+ Returns an iterator object that contains the keys for
244+ each element in the map.
245+ </ P >
246+
247+ < Code > { `data.set('foo', 'bar')` } </ Code >
248+ </ section >
249+
250+ { /*------------------------------------------------------------*/ }
251+
252+ < a id = "values" > </ a >
253+ < H2 > values()</ H2 >
254+
255+ < section >
256+ < P >
257+ Returns an iterator object that contains the values for
258+ each element in the map.
259+ </ P >
260+
261+ < Code > { `for (const value of data.values()) {...}` } </ Code >
262+ </ section >
263+
264+ < Nav
265+ next = { {
266+ text : 'Callable Nest' ,
267+ href : '/docs/references/data/callable-nest'
268+ } }
269+ />
270+ </ article >
271+ ) ;
272+ }
273+
274+ export default function Page ( props : ServerPageProps < ServerConfigProps > ) {
275+ const { data, session, request, response } = props ;
276+ return (
277+ < Layout
278+ data = { data }
279+ session = { session }
280+ request = { request }
281+ response = { response }
282+ right = { < Right /> }
283+ >
284+ < Body />
285+ </ Layout >
286+ ) ;
287+ }
0 commit comments