Skip to content

Commit e3bfdc5

Browse files
KooiIncKooiInc
committed
updates (from codeberg)
1 parent 207742e commit e3bfdc5

File tree

10 files changed

+450
-197
lines changed

10 files changed

+450
-197
lines changed

‎Demo/codebergicon.ico

5.3 KB
Binary file not shown.

‎Demo/index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<html>
1+
<html lang="en">
22
<head>
3+
<title>JS-Interpolate Demo</title>
34
<meta charset="UTF-8">
4-
<link rel="icon" href="./githubicon.png" />
5+
<link rel="icon" href="./codebergicon.ico" />
56
<link href="./prism.min.css" rel="stylesheet">
67
<script src="./prism.min.js"></script>
7-
<script src="script.js" type="module"></script>
8+
<script src="./script.js" type="module"></script>
89
</head>
910
<body>
1011
</body>
11-
</html>
12+
</html>

‎Demo/script.js

Lines changed: 101 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
// gist @https://gist.github.com/KooiInc/5ce3520c54f19e27351ec9081318dff4
21
// $ etc. @https://github.com/KooiInc/SBHelpers
32
// 20240612
43
// -----------------------------------------------------------------------
5-
import {default as interpolate, interpolateFactory} from "../Interpolate.module.js";
4+
const { $, logFactory, } =
5+
await import("https://cdn.jsdelivr.net/gh/KooiInc/SBHelpers/index.browser.bundled.js");
6+
checkCBPage();
7+
import {default as interpolate, interpolateFactory} from "../index.js";
68
const tokenize = Symbol.for("interpolate");
79
const tokenize$ = Symbol.for("interpolate$");
810
// try out in developer screen
911
window.tokenize = tokenize;
1012
window.interpolate = interpolate;
11-
const { $, logFactory, } =
12-
await import("https://cdn.jsdelivr.net/gh/KooiInc/SBHelpers/index.browser.bundled.js");
1313
const { log } = logFactory();
1414
const insert = interpolateFactory("¡no value!");
1515
const demoText = demoTexts();
@@ -22,33 +22,52 @@ function demo() {
2222
const tableTemplatesCode = demoText.tableTemplatesCode;
2323

2424
// let's create a table
25-
const tableTemplate = `<table><caption>{caption}</caption><thead><tr><th>#</th><th>prename</th><th>surname</th></tr></thead><tbody>{rows}</tbody></table>`;
26-
const tableRowTemplate = `<tr><td>{index}</td><td>{pre}</td><td>{last}</td></tr>`;
25+
const tableTemplate = `
26+
<table>
27+
<caption>{caption}</caption>
28+
<thead>
29+
<tr>
30+
<th>#</th>
31+
<th>prename</th>
32+
<th>surname</th>
33+
</tr>
34+
</thead>
35+
<tbody>{rows}</tbody>
36+
</table>`;
37+
const tableRowTemplate = `
38+
<tr>
39+
<td>{index}</td>
40+
<td>{pre}</td>
41+
<td>{last}</td>
42+
</tr>`;
2743
// the replacements (for tableRowTemplate);
2844
const theNames = getNamesObj();
2945

3046
setStyling();
3147
const theNamesClear = theNames.map(row =>
32-
!/ignored/i.test(row.pre) && row.pre?.startsWith(`<b`)
33-
? {...row, pre: `<b class="notifyHeader">Cleared values</b>`} : row);
48+
!/ignored/i.test(row.pre) && /Invalid\/missing/.test(row.pre)
49+
? {...row, pre: `<b class="notifyHeader">Invalid/missing token keys/values are cleared</b>`} : row);
3450
const theNamesTokensAsArrays = {
35-
pre: `Mary,Muhammed,Missy,Hillary,Foo,Bar,小平,Володимир,zero (0),Row,,missing value =>`
51+
pre: `Mary,Muhammed,Missy,Hillary,Foo,Bar,小平,Володимир,zero (0),Row,,missing value <span class="point right"></span>`
3652
.split(`,`).map(v => !v.length ? undefined : v),
37-
last: `Peterson,Ali,Johnson,Clinton,Bar,Foo,邓,Зеленський,0,10,<= missing value,`
53+
last: `Peterson,Ali,Johnson,Clinton,Bar,Foo,邓,Зеленський,0,10,<span class="point left"></span> missing value,`
3854
.split(`,`).map(v => !v.length ? null : v)
3955
}
40-
56+
4157
// show me the money!
4258
const table1 = tableTemplate[tokenize]({
4359
caption: `<code>tableRowTemplate[tokenize]</code> using <code>theNames</code>`,
44-
rows: tableRowTemplate[tokenize](...theNames) } );
60+
rows: tableRowTemplate[tokenize](...theNames)
61+
});
4562
const table2 = tableTemplate[tokenize]({
4663
caption: `<code>tableRowTemplate[tokenize$]</code> (empty/invalid values => empty string)`,
47-
rows: tableRowTemplate[tokenize$](...theNamesClear) } );
64+
rows: tableRowTemplate[tokenize$](...theNamesClear)
65+
});
4866
const table3 = tableTemplate[tokenize]({
4967
caption: `<code>tableRowTemplate[tokenize]</code> token values are arrays`,
50-
rows: tableRowTemplate[tokenize](theNamesTokensAsArrays) } );
51-
log(`!!${tableTemplatesCode}`, `!!${table1}`, `!!${table2}`, `!!${code4Array}`, `!!${table3}` );
68+
rows: tableRowTemplate[tokenize](theNamesTokensAsArrays)
69+
});
70+
log(`!!${tableTemplatesCode}`, `!!${table1}`, `!!${table2}`, `!!${code4Array}`, `!!${table3}`);
5271
Prism.highlightAll();
5372
createContent();
5473
}
@@ -69,14 +88,15 @@ function setStyling() {
6988
border-collapse: collapse;
7089
vertical-align: top;
7190
min-width: 500px;
91+
max-width: 700px;
7292
7393
td, th {
7494
padding: 2px 4px;
7595
font-size: 14px;
7696
height: 18px;
7797
}
7898
79-
td:nth-child(2n), th:nth-child(2n) { width: 200px; }
99+
/*td:nth-child(2n), th:nth-child(2n) { width: 200px; }*/
80100
81101
th {
82102
font-weight: bold;
@@ -88,8 +108,7 @@ function setStyling() {
88108
89109
td:first-child, th:first-child {
90110
text-align: right; padding-right: 5px;
91-
min-width: 12px;
92-
max-width: 36px;
111+
width: 24px;
93112
}
94113
caption {
95114
border: 1px solid #ccc;
@@ -102,7 +121,17 @@ function setStyling() {
102121
}`,
103122
`.largeArrowDown:before{
104123
content: '${repeat(`⬇`, 3)}';
105-
color:green; }`,
124+
color: red; }`,
125+
`span.point:before {
126+
font-weight: bold;
127+
color: red;
128+
content: '➜';
129+
vertical-align: middle;
130+
}`,
131+
`span.point.left:before {
132+
display: inline-block;
133+
transform: rotate(-180deg);
134+
}`,
106135
`b.notifyHeader { color: green; }`,
107136
`li.head {margin-left: -2rem !important;}`,
108137
`li.head table {margin-top: 1.2rem;}`,
@@ -111,6 +140,18 @@ function setStyling() {
111140
`a:hover { text-decoration:underline; }`,
112141
`a[target]:before { color:rgba(0,0,238,0.7);font-size: 1.1rem;vertical-align:bottom }`,
113142
`a[target="_blank"]:before {content: '\\2197'' '; }`,
143+
`a[target].cbBacklink {
144+
&:before {
145+
content: url(./codebergicon.ico)' ';
146+
vertical-align: middle;
147+
}
148+
}`,
149+
`a[target].ghBacklink {
150+
&:before {
151+
content: url(./githubicon.png)' ';
152+
vertical-align: middle;
153+
}
154+
}`,
114155
`a[target="_top"]:before {content: '\\21BA'' '; }`,
115156
`ul#log2screen { margin: 0 auto; max-width: 40vw; }`,
116157
`#log2screen pre.syntax {
@@ -153,30 +194,33 @@ function getNamesObj() {
153194
{pre: `zero (0)`, last: 0},
154195
{pre: `Row`, last: 10},
155196
{pre: `replacement-is-empty-string`, last: ''}, // ᐊ Empty string value IS replaced
156-
{pre: `<b class="notifyHeader">Not replaced</b>`, last: `<span class="largeArrowDown"></span>`},
197+
{
198+
pre: `<b class="notifyHeader">Invalid/missing token keys/values are kept</b>`,
199+
last: `<span class="largeArrowDown"></span>`
200+
},
157201
// if !defaultReplacer ...
158-
{pre: `replacement-Is-array`, last: [1,2,3]}, // ᐊ Array value IS NOT replaced/
202+
{pre: `replacement-Is-array`, last: [1, 2, 3]}, // ᐊ Array value IS NOT replaced/
159203
{pre: `replacement-Is-null`, last: null}, // ᐊ null value IS NOT replaced
160-
{pre: `replacement-Is-object`, last: {} }, // ᐊ Object value IS NOT replaced
204+
{pre: `replacement-Is-object`, last: {}}, // ᐊ Object value IS NOT replaced
161205
{pre: `replacement-Is-undefined`, last: undefined}, // ᐊ undefined value IS NOT replaced
162-
{pre: `<b class="notifyHeader">Ignored</b>`, last: `<span class="largeArrowDown"></span>`},
163206
{last: `key-pre-does-not-exist`}, // ᐊ undefined value IS NOT replaced
164207
{pre: `key-last-does-not-exist`}, // ᐊ incomplete object, what exists is replaced
165-
{some: `nothing-to-replace`, name: `nothing`}, // ᐊ non relevant keys, tokens ignored
208+
{some: `nothing-to-replace`, name: `nothing`}, // ᐊ non existing keys, tokens ignored
166209
{}, // ᐊ empty object, tokens ignored
167210
[`nothing`, `nada`, `zip`, `没有什么`, // ᐊ replacement not an Object, tokens ignored
168-
`niente`, `rien`, `ничего`]
211+
`niente`, `rien`, `ничего`]
169212
];
170213
}
171214

172215
function demoTexts() {
173-
const isStackblitz = /stackblitz/i.test(location.href);
216+
const isGithub = /github/i.test(location.href);
217+
const back2repo = `(back to) repository`;
218+
const isLocal = /localhost/.test(location.href);
174219
const links = [
175-
isStackblitz ? `!!<a target="_top" href="https://stackblitz.com/@KooiInc">All Stackblitz projects</a>` : `!!`,
176-
`!!<a target="${isStackblitz ? `_blank` : `_top`}" href="https://github.com/KooiInc/StringInterpolator"
177-
>Github Repository</a>`,
178-
`!!<a target="_blank" href="https://github.com/KooiInc/es-string-fiddler">Used by es-string-fiddler (Github)</a>`
179-
];
220+
isGithub
221+
? `!!<a class="ghBacklink "target="_top" href="https://github.com/KooiInc/StringInterpolator">${back2repo}</a>`
222+
: `!!<a class="cbBacklink" target="_top" href="https://codeberg.org/KooiInc/JS-Interpolate">${back2repo}</a>`
223+
];
180224
const replacement = {blah: `FOOBLAH`, bar: `BARRED`};
181225
const someStr = `Blah [{blah}] and blah and {foo}, but then again [\\{bar\\} | {bar}]`;
182226
const namesUsed = getNamesObj.toString()
@@ -185,7 +229,7 @@ function demoTexts() {
185229
.replace(/\n\s+]/, `\n]`)
186230
.replace(/</g, `&lt;`);
187231
return {
188-
links,
232+
links: !isLocal && links || [`!!LOCAL TEST`],
189233
preSyntax: `<div class="readme">The module exports the factory itself (<code>interpolateFactory</code>),
190234
the <code>interpolate</code> function (default) and the <code>interpolateClear</code> function (which
191235
clears empty placeholders).</div>
@@ -211,10 +255,10 @@ insert(templateStringEx,
211255
{wrld: "WORLD", univrs: null},
212256
{wrld: null, univrs: "UNIVERSE"},
213257
{wrld: "WORLD", univrs: "AND UNIVERSE"} ); /* result =>\n${
214-
insert(" hello {wrld} {univrs}\n",
215-
{wrld: "WORLD", univrs: null},
216-
{wrld: null, univrs: "UNIVERSE"},
217-
{wrld: "WORLD", univrs: "AND UNIVERSE"})}*/
258+
insert(" hello {wrld} {univrs}\n",
259+
{wrld: "WORLD", univrs: null},
260+
{wrld: null, univrs: "UNIVERSE"},
261+
{wrld: "WORLD", univrs: "AND UNIVERSE"})}*/
218262
219263
// On importing interpolateFactory String.prototype
220264
// was extended using 2 Symbols. Here we
@@ -225,23 +269,27 @@ const tokenize$ = Symbol.for("interpolate$");
225269
// now we can use the 'symbolic extensions' (named tokenize/tokenize$)
226270
// [tokenize]: keep tokens with empty values intact
227271
templateStringEx[tokenize](
272+
{wrld: "WORLD"},
228273
{wrld: "WORLD", univrs: null},
229274
{wrld: null, univrs: "UNIVERSE"},
230275
{wrld: "WORLD", univrs: "AND UNIVERSE"} ); /* result => \n${
231-
" hello {wrld} {univrs}\n"[tokenize](
232-
{wrld: "WORLD", univrs: null},
233-
{wrld: null, univrs: "UNIVERSE"},
234-
{wrld: "WORLD", univrs: "AND UNIVERSE"})}*/
276+
" hello {wrld} {univrs}\n"[tokenize](
277+
{wrld: "WORLD (Note: missing tokens are ignored)"},
278+
{wrld: "WORLD", univrs: null},
279+
{wrld: null, univrs: "UNIVERSE"},
280+
{wrld: "WORLD", univrs: "AND UNIVERSE"})}*/
235281
236-
// [tokenize$]: cleanup empty values
282+
// [tokenize$]: remove tokens without values (replace with empty string)
237283
templateStringEx[tokenize$](
284+
{univrs: "UNIVERSE"},
238285
{wrld: "WORLD", univrs: null},
239286
{wrld: null, univrs: "UNIVERSE"},
240287
{wrld: "WORLD", univrs: "AND UNIVERSE"} ); /* result =>\n${
241-
" hello {wrld} {univrs}\n"[tokenize$](
242-
{wrld: "WORLD", univrs: null},
243-
{wrld: null, univrs: "UNIVERSE"},
244-
{wrld: "WORLD", univrs: "AND UNIVERSE"})}*/
288+
" hello {wrld} {univrs}\n"[tokenize$](
289+
{univrs: "UNIVERSE (Note: missing tokens are cleared)"},
290+
{wrld: "WORLD", univrs: null},
291+
{wrld: null, univrs: "UNIVERSE"},
292+
{wrld: "WORLD", univrs: "AND UNIVERSE"})}*/
245293
246294
// escaped "{" and/or "}" and non existing token values are ignored
247295
const replacement = { blah: "FOOBLAH", bar: "BARRED" };
@@ -255,9 +303,9 @@ someStr[tokenize$](replacement); => "${someStr[tokenize$](replacement)}"</code><
255303
// to fill the next table, a single object with array values is used
256304
const theNamesTokensAsArrays = {
257305
pre: [ "Mary", "Muhammed", "Missy", "Hillary", "Foo", "Bar",
258-
"小平", "Володимир", "zero (0)", "Row", null, "missing value =>" ],
306+
"小平", "Володимир", "zero (0)", "Row", null, "missing value" ],
259307
last: [ "Peterson", "Ali", "Johnson", "Clinton", "Bar", "Foo",
260-
"邓", "Зеленський", "0", "10", "<= missing value", null ]
308+
"邓", "Зеленський", "0", "10", "missing value", null ]
261309
};</code>`,
262310

263311
tableTemplatesCode: `<br><pre class="syntax language-javascript line-numbers"><code class="language-javascript">
@@ -296,4 +344,10 @@ function createContent() {
296344
$.editCssRule(`.bottomSpace { height: ${$.node(`.container`).clientHeight}px; }`);
297345
$(`#log2screen`).afterMe(`<div class="bottomSpace">`);
298346
}
347+
348+
function checkCBPage() {
349+
if (location.href.includes(`codeberg.page`)) {
350+
$(`head`).append(`<base href="https://kooiinc.codeberg.page/JS-Interpolate/">`);
351+
}
352+
}
299353
/* endregion indexCreatr */

0 commit comments

Comments
 (0)