roll-right 0.0.2 → 0.1.3
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 +242 -0
- package/bin/breakup.js +56 -0
- package/lib/phase1.js +7 -3
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -34,6 +34,248 @@ roll-right --phase 2 <website-identifier> <directory including config>
|
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
|
|
37
|
+
## reverse it
|
|
38
|
+
|
|
39
|
+
It can help, when developing, to split up a file that has been composed by **roll-right**. Later versions of **roll-right** will put in file separators when files are appended together to form a single file artifact for a web page or module. The command line tool, **roll-right-breakup**, will output a directory of all the files between the separators. There are times that it may be useful to use compare tools with the output of **roll-right-breakup** and the source files.
|
|
40
|
+
|
|
41
|
+
Here is how to call it:
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
roll-right-breakup <path to file> <optional output directory>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
**roll-right-breakup** will create a directory in the calling directory named **rr-breakup** or within the optional directory if it is on the command line.
|
|
49
|
+
|
|
50
|
+
## HTML Generation Steps
|
|
51
|
+
|
|
52
|
+
1. For generation of HTML, a project should begin first with a pre-template. The developer will either make one of these, or use one from a repository of them. A pre-template contains some HTML, usually the header; and, the header may **variable forms** in it. The ouline of the body may be available. But, somewhere in the pre-template will be **link forms** that indicate where files may be included. **May be included**... The pre-template usually lists more files than a project may want. But, the next step,
|
|
53
|
+
2. The developer needs to make a cofiguration file. The configuration file is read by the **roll-right**, enabling **roll-right** to find the pre-tempalte and the set of files that will be use to replace **link forms**. The configuration file has its own set of variables. Every configuration file contains a JSON object with two fields **alpha** and **beta**. The **alpha** field contains the phase 1 configuration, while the **beta** field contains the phase 2 configuration. It is more likely that different projects will use the same alpha field and different beta fields.
|
|
54
|
+
3.
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
## An example - human page
|
|
61
|
+
|
|
62
|
+
For humans of this world, we have created the of-this.world collection of subdomains. Each subdomain has a main access page, which is a dashboard owned by a particular user. The dashboard prominently displays a set of `<iframes>` that host other applications that make requests through it.
|
|
63
|
+
|
|
64
|
+
Each dashboard owner, a human, will have the page generated for him/her containing some name and identity information, the public part. Other processes make user that private information is stored in the user's browser under the user's URL. Each page is generated from a template used by the **of-this.world** server. And, the template is generated by an application of **roll-right**.
|
|
65
|
+
|
|
66
|
+
In order to generate the template, a pre-template is required. Here is the pre-template for the human page (some code is removed for the sake of brevity):
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
<!doctype html>
|
|
70
|
+
<html>
|
|
71
|
+
<head>
|
|
72
|
+
<meta charset="utf-8">
|
|
73
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
74
|
+
<meta name="author" content="{{who_am_I}}" />
|
|
75
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
76
|
+
<meta id="theme-color" name="theme-color" content="{{user-theme-color}}">
|
|
77
|
+
|
|
78
|
+
<link rel="canonical" href="{{canonical}}">
|
|
79
|
+
|
|
80
|
+
<title>{{who_am_I}}</title>
|
|
81
|
+
<meta name="description" content="{{pageDescription}}">
|
|
82
|
+
<style>
|
|
83
|
+
/*csslint important:false*/
|
|
84
|
+
.super-header {
|
|
85
|
+
border: solid 1px rgb(223, 89, 11);
|
|
86
|
+
padding: 2px;
|
|
87
|
+
font-size: smaller;
|
|
88
|
+
font-weight: 700;
|
|
89
|
+
background-color: rgb(255, 254, 248);
|
|
90
|
+
color: rgb(74, 83, 55);
|
|
91
|
+
max-height:32px;
|
|
92
|
+
width: 100%;
|
|
93
|
+
}
|
|
94
|
+
.content-container {
|
|
95
|
+
border: solid 1px rgb(0, 6, 85);
|
|
96
|
+
padding: 2px;
|
|
97
|
+
padding-left: 1px;
|
|
98
|
+
background-color: white;
|
|
99
|
+
position: absolute;
|
|
100
|
+
top: 34px;
|
|
101
|
+
bottom: 0;
|
|
102
|
+
width : calc(100vw - 4px);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
... etc ...
|
|
106
|
+
</style>
|
|
107
|
+
</head>
|
|
108
|
+
<body>
|
|
109
|
+
<div id="super-header" class="super-header" style="white-space: nowrap;overflow-x: scroll;" >
|
|
110
|
+
<span class="owner_name">{{who_am_I}}</span>
|
|
111
|
+
<div id="open-controls" style="display:inline-block;">
|
|
112
|
+
<button onclick="show_controls()">>></button>
|
|
113
|
+
</div>
|
|
114
|
+
<div id="user-controls" style="display:none;">
|
|
115
|
+
:: control page ::
|
|
116
|
+
<button id="db_container-btn" onclick="show_local_data()">local data</button>
|
|
117
|
+
<button id="manager_container-btn" onclick="show_id_manager()">identity manager</button>
|
|
118
|
+
<button id="wallet_container-btn" onclick="show_wallet_manager()">wallet manager</button>
|
|
119
|
+
<button id="application_container-btn" onclick="show_application()" class="selected-frame">application</button>
|
|
120
|
+
<button onclick="hide_controls()"><<</button>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div id="application_container" class="content-container" >
|
|
125
|
+
<iframe id="content-frame" src="" class="super-container" >
|
|
126
|
+
Source will open here
|
|
127
|
+
</iframe>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div id="manager_container" class="content-container" >
|
|
131
|
+
<iframe id="id-manager-frame" src="https://www.of-this.world/manager" class="super-container" onload="info_to_manager_container()">
|
|
132
|
+
manager frame
|
|
133
|
+
</iframe>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
<!-- ... ETC. ... -->
|
|
138
|
+
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
</body>
|
|
142
|
+
<script>
|
|
143
|
+
|
|
144
|
+
$$script::pc_location.js<<
|
|
145
|
+
$$script::crypto-global.js<<
|
|
146
|
+
$$script::base64.js<<
|
|
147
|
+
$$script::crypto-hash.js<<
|
|
148
|
+
$$script::crypto-wraps.js<<
|
|
149
|
+
$$script::common.js<<
|
|
150
|
+
$$script::https_checks.js<<
|
|
151
|
+
$$script::post_fetch.js<<
|
|
152
|
+
$$script::file_ops.js<<
|
|
153
|
+
$$script::one_table_db.js<<
|
|
154
|
+
$$script::app-dir/user_db.js<<
|
|
155
|
+
$$script::for-humans/shared_constants.js<<
|
|
156
|
+
$$script::for-humans/human_frame_client.js<<
|
|
157
|
+
$$script::for-humans/frame_page_tab_com.js<<
|
|
158
|
+
$$script::app-dir/window_app.js<<
|
|
159
|
+
|
|
160
|
+
</script>
|
|
161
|
+
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
In the above code, one can see the **variable forms** such as `{{canonical}}`, while for this project all the **link forms**
|
|
166
|
+
are in the script section. This project does no use more HTML than provided in the file.
|
|
167
|
+
|
|
168
|
+
But, it does bring in scripts. It does not necessarily bring in all the scripts or even all of each script. The *alpha* field of a configuration object determines how much of the listed scripts to include.
|
|
169
|
+
|
|
170
|
+
Here is a configuration file for the human frame.
|
|
171
|
+
|
|
172
|
+
```
|
|
173
|
+
{
|
|
174
|
+
"alpha" : {
|
|
175
|
+
"pre_template" : "[alpha-copious]/pre-template/human_page.html",
|
|
176
|
+
"business_url" : "copious.world",
|
|
177
|
+
"out_dir" : "./templates",
|
|
178
|
+
"key_values" : {
|
|
179
|
+
"$$AUTHOR" : "Richard Leddy",
|
|
180
|
+
"INSERT" : ""
|
|
181
|
+
},
|
|
182
|
+
"path_abreviations" : {
|
|
183
|
+
"[alpha-copious]" : "[github]/alphas/alpha-copious",
|
|
184
|
+
"[github]" : "~/Documents/GitHub",
|
|
185
|
+
"[app-local]" : "[github]/alphas/of-this-world"
|
|
186
|
+
|
|
187
|
+
},
|
|
188
|
+
"ext_default_dir" : {
|
|
189
|
+
".html" : "[alpha-copious]/html",
|
|
190
|
+
".js" : "[alpha-copious]/client",
|
|
191
|
+
".svg" : "[alpha-copious]/icons"
|
|
192
|
+
},
|
|
193
|
+
"top_dir_location" : {
|
|
194
|
+
"script" : "[alpha-copious]/script",
|
|
195
|
+
"for-humans" : "[alpha-copious]/for-humans",
|
|
196
|
+
"html" : "[alpha-copious]/html",
|
|
197
|
+
"app-dir" : "[app-local]/scripts"
|
|
198
|
+
},
|
|
199
|
+
"files" : {
|
|
200
|
+
"index.html" : {
|
|
201
|
+
"footer_A.html" : 6,
|
|
202
|
+
"name::about_box" : {
|
|
203
|
+
"file" : "fadable_box.html",
|
|
204
|
+
"key_values" : {
|
|
205
|
+
"Z_INDEX" : 102,
|
|
206
|
+
"BOX_NAME" : ">name"
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
"intergalactic-explain.html" : "1",
|
|
210
|
+
"script" : {
|
|
211
|
+
"pc_location.js" : 1,
|
|
212
|
+
"crypto-global.js" : 1,
|
|
213
|
+
"base64.js" : 1,
|
|
214
|
+
"crypto-wraps.js" : 1,
|
|
215
|
+
"crypto-hash.js" : 1,
|
|
216
|
+
"common.js" : 2,
|
|
217
|
+
"field_checks.js" : 3,
|
|
218
|
+
"https_checks.js" : 4,
|
|
219
|
+
"post_fetch.js" : {
|
|
220
|
+
"order" : 14,
|
|
221
|
+
"include" : ["postData"],
|
|
222
|
+
"exclude" : false
|
|
223
|
+
},
|
|
224
|
+
"uploader_class.js" : 6,
|
|
225
|
+
"file_ops.js" : 1,
|
|
226
|
+
"one_table_db.js" : 1,
|
|
227
|
+
"script/flexy_items_A-animation.js" : 12,
|
|
228
|
+
"for-humans/human_frame_client.js" : 1,
|
|
229
|
+
"for-humans/external-id-intake.js" : 13,
|
|
230
|
+
"for-humans/frame_page_opener.js" : 1,
|
|
231
|
+
"for-humans/frame_page_tab_com.js" : 1,
|
|
232
|
+
"app-dir/user_db.js" : 2,
|
|
233
|
+
"for-humans/shared_constants.js" : 1,
|
|
234
|
+
"app-dir/window_app.js" : 2
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
This project only makes a template and leaves a later process to fill it out. So, there is no **beta** field. But, there is an **alpha** field.
|
|
244
|
+
|
|
245
|
+
Notice that the **alpha** field begins with the field **pre_template**. That is the file above. Look at the **[alpha-copious]** form in the directory path. This is a path abbreviation. The path form substitution rules are listed in the **alpha** object under the fields **path_abreviations** and **top_dir_location**. The expand bottom up.
|
|
246
|
+
|
|
247
|
+
Under the **files** field, are fields whose keys are the names of files being generated. This configuration will generate **index.html**. Some HTML files are lists under **index.html**. But, these files are not mentioned in the pre-template being used, so they will be ignored. This example is only concerned with the inclusion of JavaScript.
|
|
248
|
+
|
|
249
|
+
In the `<script>` section, all the files that might go into the pre-template are given. There are a few that won't be used by the pre-template. In general, the file has to be listed by both the pre-template and the configuration to be included. The only assurance is that file depencies are included. So, a file that is not listed in either the pre-template or the configuration but that a file being included requires to operate, that file will be included as well.
|
|
250
|
+
|
|
251
|
+
Notice the **post_fetch** inclusion:
|
|
252
|
+
|
|
253
|
+
```
|
|
254
|
+
"post_fetch.js" : {
|
|
255
|
+
"order" : 14,
|
|
256
|
+
"include" : ["postData"],
|
|
257
|
+
"exclude" : false
|
|
258
|
+
},
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
This inclusion shows just one function, **postData**, being included in the project. The source of post_fetch lists the set of functions it exports. And, the "post_fetch.js" field value is a selector of the method. Other methods will not be included from the file unless there are dependencies.
|
|
262
|
+
|
|
263
|
+
Some of the files listed in the field names are file paths. For example, `for-humans/human_frame_client.js` seems to indicate that a directory "for-humans" will be used. But, in fact, the directory is defined by the top-dir fields and the abbreviations as such:
|
|
264
|
+
|
|
265
|
+
```
|
|
266
|
+
"for-humans" : "[alpha-copious]/for-humans",
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
This form is expanded further until an absolute path is determined.
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
This example did not use the file form. Here is an example of that:
|
|
273
|
+
|
|
274
|
+
```
|
|
275
|
+
$$files::nav_bar_A.html<<
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
The file version of the **link form** uses the **ext_default_dir** field to establish the location of the file based on the extension. In the file form example, **roll-right** will look for `nav_bar_A.html` in the directory `[alpha-copious]/html` once the path variable `[alpha-copious]` is expanded.
|
|
37
279
|
|
|
38
280
|
## How it Helps
|
|
39
281
|
|
package/bin/breakup.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const fs = require('fs')
|
|
4
|
+
const {FileOperations} = require('extra-file-class')
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
let fosc = new FileOperations(false)
|
|
8
|
+
|
|
9
|
+
async function process_file(file_name,deposit_dir) {
|
|
10
|
+
let is_file = await fosc.exists(file_name)
|
|
11
|
+
if ( is_file ) {
|
|
12
|
+
if ( await fosc.ensure_directories(deposit_dir) ) {
|
|
13
|
+
let file_txt = await fosc.load_data_at_path(file_name)
|
|
14
|
+
if ( file_txt ) {
|
|
15
|
+
let parts = file_txt.split('// ---->>>')
|
|
16
|
+
console.log(`# of parts: ${parts.length}`)
|
|
17
|
+
if ( parts.length > 0 ) {
|
|
18
|
+
parts.pop()
|
|
19
|
+
let count = 0
|
|
20
|
+
let ext = ".html"
|
|
21
|
+
for ( let part of parts ) {
|
|
22
|
+
count++
|
|
23
|
+
await fosc.output_string(`${deposit_dir}/part_${count}.${ext}`,parts[count-1])
|
|
24
|
+
ext = "js"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
} else {
|
|
28
|
+
console.log(`Could not read ${file_name}`)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
} else {
|
|
32
|
+
console.log(`can't find file ${file_name}`)
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
let deposit_dir = "rr-breakup"
|
|
38
|
+
let holding_dir = process.argv[3]
|
|
39
|
+
if ( holding_dir !== undefined ) {
|
|
40
|
+
if ( holding_dir[holding_dir.length-1] !== '/' ) {
|
|
41
|
+
holding_dir += '/'
|
|
42
|
+
}
|
|
43
|
+
deposit_dir = holding_dir + deposit_dir
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
let file = process.argv[2]
|
|
48
|
+
//
|
|
49
|
+
if ( file === undefined ) {
|
|
50
|
+
console.log("roll-right-breakup is expecting at least one command line parameter: name of file to be processed")
|
|
51
|
+
} else {
|
|
52
|
+
console.log(file)
|
|
53
|
+
process_file(file,deposit_dir)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
package/lib/phase1.js
CHANGED
|
@@ -409,7 +409,7 @@ console.dir(found_sub)
|
|
|
409
409
|
}
|
|
410
410
|
}
|
|
411
411
|
//
|
|
412
|
-
let sdata = results.join('\n')
|
|
412
|
+
let sdata = results.join('\n// ---->>>\n')
|
|
413
413
|
|
|
414
414
|
let output_file = conf.out_dir + '/' + this._target + '/' + current_file_key
|
|
415
415
|
console.log("WRITING OUTPUT: ",output_file)
|
|
@@ -427,9 +427,13 @@ console.dir(found_sub)
|
|
|
427
427
|
run() {
|
|
428
428
|
//
|
|
429
429
|
console.log("ENSURE: ",this.tconf.out_dir)
|
|
430
|
-
console.log("TARGET:",this._target)
|
|
431
430
|
//
|
|
432
|
-
|
|
431
|
+
let outfile_dir = translate_marker(this.tconf.out_dir,this.tconf)
|
|
432
|
+
this.tconf.out_dir = outfile_dir
|
|
433
|
+
console.log("ENSURE: ",this.tconf.out_dir)
|
|
434
|
+
//
|
|
435
|
+
this.ensure_directory(outfile_dir,this._target)
|
|
436
|
+
//
|
|
433
437
|
for ( let file in this.tconf.files ) {
|
|
434
438
|
this.config(this.tconf,file)
|
|
435
439
|
}
|
package/package.json
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "roll-right",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "A helper utilty for gather browser artifacts from node modules, code repositories, etc.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"directories": {
|
|
7
7
|
"example": "examples"
|
|
8
8
|
},
|
|
9
9
|
"bin": {
|
|
10
|
-
"roll-right": "./bin/index.js"
|
|
10
|
+
"roll-right": "./bin/index.js",
|
|
11
|
+
"roll-right-breakup": "./bin/breakup.js"
|
|
11
12
|
},
|
|
12
13
|
"scripts": {
|
|
13
14
|
"test": "node tests/index.js"
|
|
14
15
|
},
|
|
15
16
|
"dependencies": {
|
|
16
17
|
"byte-base64": "^1.1.0",
|
|
18
|
+
"extra-file-class": "^0.9.12",
|
|
17
19
|
"fs-extra": "^10.0.1",
|
|
18
20
|
"handlebars": "^4.7.7",
|
|
19
21
|
"minimist": "^1.2.5",
|