Skip to content

Commit 3daa687

Browse files
thewebartisan7thewebartisan7
committed
Custom script props utility methods
1 parent 149ad64 commit 3daa687

32 files changed

+213
-111
lines changed

‎docs/demo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
104104
1.0.0-beta.8 (2022-10-25)
105105
</h2>
106106
<ul>
107-
<li>Fix merge locals with global</li>
107+
<li>Fix merge props with global</li>
108108
</ul>
109109
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
110110
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎docs/docs.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1463,7 +1463,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
14631463
1.0.0-beta.8 (2022-10-25)
14641464
</h2>
14651465
<ul>
1466-
<li>Fix merge locals with global</li>
1466+
<li>Fix merge props with global</li>
14671467
</ul>
14681468
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
14691469
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
120120
1.0.0-beta.8 (2022-10-25)
121121
</h2>
122122
<ul>
123-
<li>Fix merge locals with global</li>
123+
<li>Fix merge props with global</li>
124124
</ul>
125125
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
126126
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎docs/test.html

+18-4
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,20 @@
4949
<h1 class="display-1 fw-bold mb-4">Playground</h1>
5050
<div class="wrapper">
5151
<div class="demo my-demo" computed:acomputed="" something="alocal">
52+
{"title":"PostHTML Components","close":true,"$slots":{},"aStringOverride":"My override string changed","anObjectOverride":{"third":"Third override item","fourth":"Fourth override item"},"computed:aComputed":true,"class":"my-demo","anObjectMerged":{"third":"Third merged item","fourth":"Fourth merged item","anObjectMerged1":{"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}},"post":{"title":"My post title","body":"My post body","comments":[{"id":1,"body":"My comment 1 new"},{"id":3,"body":"My comment 3"}]},"anArrayOfObjects":[{"id":1,"title":"My new title 1"},{"id":2,"title":"My new title 2","somethingnew":"New"}],"anArray":["first","third","fourth","ten"],"something":"alocal"}
53+
<div>
54+
<a href="/my-page.html">
55+
hi,
56+
<strong>fred</strong>
57+
</a>
58+
!
59+
<a href="/my-page2.html">
60+
hi,
61+
<strong>Damir</strong>
62+
</a>
63+
!
64+
</div>
65+
{"third":"Third override item","fourth":"Fourth override item","something":"Merged","again":"Again merged"}
5266
<h1>anObjectDefault</h1>
5367
<p>
5468
<strong>first</strong>
@@ -153,12 +167,12 @@ <h5>YIELD CHILD INSIDE TEST.html</h5>
153167
</div>
154168
<div class="wrapper">
155169
<div class="parent">
156-
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot parent"],"source":"Slot parent","locals":{}}}
170+
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot parent"],"source":"Slot parent","props":{}}}
157171
<div class="parent-content">I'm parent</div>
158172
<div class="parent-yield">
159173
<h1>Parent yield</h1>
160174
<div class="child">
161-
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot child"],"source":"Slot child","locals":{}}}
175+
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot child"],"source":"Slot child","props":{}}}
162176
<div class="child-content">I'm child</div>
163177
<div class="child-yield">
164178
<h1>Child yield</h1>
@@ -170,7 +184,7 @@ <h1>Child yield</h1>
170184
</div>
171185
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["\n ",{"tag":"div","attrs":{"class":"parent2-child2-slot"},"content":["\n parent2-child2 slot\n "]},"\n "],"source":"\n
172186
<div class="\&quot;parent2-child2-slot\&quot;">\n parent2-child2 slot\n</div>
173-
\n ","locals":{}},"myslot":{"filled":true,"rendered":true,"tag":"fill:myslot","attrs":{},"content":["\n SLOT CHILD INSIDE TEST.html\n "],"source":"\n SLOT CHILD INSIDE TEST.html\n ","locals":{}}}
187+
\n ","props":{}},"myslot":{"filled":true,"rendered":true,"tag":"fill:myslot","attrs":{},"content":["\n SLOT CHILD INSIDE TEST.html\n "],"source":"\n SLOT CHILD INSIDE TEST.html\n ","props":{}}}
174188

175189

176190
yes is filled
@@ -234,7 +248,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
234248
1.0.0-beta.8 (2022-10-25)
235249
</h2>
236250
<ul>
237-
<li>Fix merge locals with global</li>
251+
<li>Fix merge props with global</li>
238252
</ul>
239253
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
240254
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎examples/dist/demo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
104104
1.0.0-beta.8 (2022-10-25)
105105
</h2>
106106
<ul>
107-
<li>Fix merge locals with global</li>
107+
<li>Fix merge props with global</li>
108108
</ul>
109109
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
110110
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎examples/dist/docs.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1463,7 +1463,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
14631463
1.0.0-beta.8 (2022-10-25)
14641464
</h2>
14651465
<ul>
1466-
<li>Fix merge locals with global</li>
1466+
<li>Fix merge props with global</li>
14671467
</ul>
14681468
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
14691469
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎examples/dist/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
120120
1.0.0-beta.8 (2022-10-25)
121121
</h2>
122122
<ul>
123-
<li>Fix merge locals with global</li>
123+
<li>Fix merge props with global</li>
124124
</ul>
125125
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
126126
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎examples/dist/test.html

+18-4
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,20 @@
4949
<h1 class="display-1 fw-bold mb-4">Playground</h1>
5050
<div class="wrapper">
5151
<div class="demo my-demo" computed:acomputed="" something="alocal">
52+
{"title":"PostHTML Components","close":true,"$slots":{},"aStringOverride":"My override string changed","anObjectOverride":{"third":"Third override item","fourth":"Fourth override item"},"computed:aComputed":true,"class":"my-demo","anObjectMerged":{"third":"Third merged item","fourth":"Fourth merged item","anObjectMerged1":{"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}},"post":{"title":"My post title","body":"My post body","comments":[{"id":1,"body":"My comment 1 new"},{"id":3,"body":"My comment 3"}]},"anArrayOfObjects":[{"id":1,"title":"My new title 1"},{"id":2,"title":"My new title 2","somethingnew":"New"}],"anArray":["first","third","fourth","ten"],"something":"alocal"}
53+
<div>
54+
<a href="/my-page.html">
55+
hi,
56+
<strong>fred</strong>
57+
</a>
58+
!
59+
<a href="/my-page2.html">
60+
hi,
61+
<strong>Damir</strong>
62+
</a>
63+
!
64+
</div>
65+
{"third":"Third override item","fourth":"Fourth override item","something":"Merged","again":"Again merged"}
5266
<h1>anObjectDefault</h1>
5367
<p>
5468
<strong>first</strong>
@@ -153,12 +167,12 @@ <h5>YIELD CHILD INSIDE TEST.html</h5>
153167
</div>
154168
<div class="wrapper">
155169
<div class="parent">
156-
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot parent"],"source":"Slot parent","locals":{}}}
170+
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot parent"],"source":"Slot parent","props":{}}}
157171
<div class="parent-content">I'm parent</div>
158172
<div class="parent-yield">
159173
<h1>Parent yield</h1>
160174
<div class="child">
161-
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot child"],"source":"Slot child","locals":{}}}
175+
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["Slot child"],"source":"Slot child","props":{}}}
162176
<div class="child-content">I'm child</div>
163177
<div class="child-yield">
164178
<h1>Child yield</h1>
@@ -170,7 +184,7 @@ <h1>Child yield</h1>
170184
</div>
171185
{"name":{"filled":true,"rendered":false,"tag":"fill:name","attrs":{},"content":["\n ",{"tag":"div","attrs":{"class":"parent2-child2-slot"},"content":["\n parent2-child2 slot\n "]},"\n "],"source":"\n
172186
<div class="\&quot;parent2-child2-slot\&quot;">\n parent2-child2 slot\n</div>
173-
\n ","locals":{}},"myslot":{"filled":true,"rendered":true,"tag":"fill:myslot","attrs":{},"content":["\n SLOT CHILD INSIDE TEST.html\n "],"source":"\n SLOT CHILD INSIDE TEST.html\n ","locals":{}}}
187+
\n ","props":{}},"myslot":{"filled":true,"rendered":true,"tag":"fill:myslot","attrs":{},"content":["\n SLOT CHILD INSIDE TEST.html\n "],"source":"\n SLOT CHILD INSIDE TEST.html\n ","props":{}}}
174188

175189

176190
yes is filled
@@ -234,7 +248,7 @@ <h2 id="1.0.0-beta.8-(2022-10-25)" tabindex="-1">
234248
1.0.0-beta.8 (2022-10-25)
235249
</h2>
236250
<ul>
237-
<li>Fix merge locals with global</li>
251+
<li>Fix merge props with global</li>
238252
</ul>
239253
<h2 id="1.0.0-beta.7-(2022-10-25)" tabindex="-1">
240254
<a class="header-anchor" href="#1.0.0-beta.7-(2022-10-25)">#</a>

‎examples/src/components/modal/index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515
* contentClass: any additional class for modal-content
1616
*/
1717
module.exports = {
18-
backdrop: locals.backdrop || true,
19-
keyboard: locals.backdrop === "static" || locals.keyboard === true,
20-
scrollable: locals.scrollable === true ? 'modal-dialog-scrollable' : '',
21-
centered: locals.centered === true ? 'modal-dialog-centered' : '',
22-
size: locals.size ? `modal-${locals.size}` : '',
23-
fullscreen: [true, "sm", "md", "lg", "xl", "xxl"].includes(locals.fullscreen)
24-
? (locals.fullscreen === true ? "modal-fullscreen" : `modal-fullscreen-${locals.fullscreen}-down`)
18+
backdrop: props.backdrop || true,
19+
keyboard: props.backdrop === "static" || props.keyboard === true,
20+
scrollable: props.scrollable === true ? 'modal-dialog-scrollable' : '',
21+
centered: props.centered === true ? 'modal-dialog-centered' : '',
22+
size: props.size ? `modal-${props.size}` : '',
23+
fullscreen: [true, "sm", "md", "lg", "xl", "xxl"].includes(props.fullscreen)
24+
? (props.fullscreen === true ? "modal-fullscreen" : `modal-fullscreen-${props.fullscreen}-down`)
2525
: ''
2626
};
2727
</script>
@@ -54,7 +54,7 @@
5454
</x-modal.body>
5555
</if>
5656
<if condition="$slots.footer?.filled">
57-
<x-modal.footer close="{{ $slots.footer?.locals.close }}">
57+
<x-modal.footer close="{{ $slots.footer?.props.close }}">
5858
<slot:footer></slot:footer>
5959
</x-modal.footer>
6060
</if>

‎examples/src/components/test/index.html

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<script props>
22
module.exports = {
3+
allProps: props,
4+
tplLink: template('<a href="<%= url %>">hi, <strong><%= user %></strong></a>!'),
5+
somethingMerged: merge({}, props.anObjectOverride, { something: 'Merged', again: 'Again merged'}),
36
aStringDefault: 'My default string',
47
aStringOverride: 'My default override string',
58
anObjectDefault: {
@@ -47,11 +50,19 @@
4750
}
4851
],
4952
anArray: ['first', 'second'],
50-
aComputed: locals.aComputed === true ? 'Yes' : 'No'
53+
aComputed: props.aComputed === true ? 'Yes' : 'No'
5154
};
5255
</script>
5356
<div class="wrapper">
5457
<div class="demo" attributes>
58+
{{ allProps }}
59+
<div>
60+
{{{ tplLink({ 'url': '/my-page.html', 'user': 'fred' }) }}}
61+
62+
{{{ tplLink({ 'url': '/my-page2.html', 'user': 'Damir' }) }}}
63+
</div>
64+
65+
{{ somethingMerged }}
5566
<h1>anObjectDefault</h1>
5667
<each loop="o,i in anObjectDefault">
5768
<p><strong>{{ i }}</strong>: {{ o }}</p>
@@ -97,7 +108,7 @@ <h1>aComputed</h1>
97108
<p>{{ aComputed }}</p>
98109

99110
<slot:name>
100-
{{ $slots.name.locals.aslotlocal }}
111+
{{ $slots.name.props.aslotlocal }}
101112
</slot:name>
102113
</div>
103114
</div>

‎examples/src/md/changelog.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
## 1.0.0-beta.8 (2022-10-25)
1010

11-
* Fix merge locals with global
11+
* Fix merge props with global
1212

1313
## 1.0.0-beta.7 (2022-10-25)
1414

‎examples/src/pages/test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h1 class="display-1 fw-bold mb-4">Playground</h1>
1616

1717
computed:aComputed="true"
1818

19-
merge:locals='{ "something": "alocal", "anArray": [ "ten" ] }'
19+
merge:props='{ "something": "alocal", "anArray": [ "ten" ] }'
2020

2121
class="my-demo"
2222
>

‎src/attributes.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ const has = require('lodash/has');
1111
const extend = require('lodash/extend');
1212

1313
/**
14-
* Map component attributes that it's not defined as locals to first element of node
14+
* Map component attributes that it's not defined as props to first element of node
1515
*
1616
* @param {Object} currentNode
1717
* @param {Object} attributes
18-
* @param {Object} locals
18+
* @param {Object} props
1919
* @param {Object} options
2020
* @return {void}
2121
*/
22-
module.exports = (currentNode, attributes, locals, options) => {
22+
module.exports = (currentNode, attributes, props, options) => {
2323
let mainNode;
2424
match.call(currentNode, {attrs: {attributes: ''}}, node => {
2525
delete node.attrs.attributes;
@@ -40,7 +40,7 @@ module.exports = (currentNode, attributes, locals, options) => {
4040

4141
const nodeAttrs = parseAttrs(mainNode.attrs, options.attrsParserRules);
4242

43-
const mainNodeAttributes = omit(attributes, union(keys(locals), [options.attribute], keys(options.aware), keys(options.locals), ['$slots']));
43+
const mainNodeAttributes = omit(attributes, union(keys(props), [options.attribute], keys(options.aware), keys(options.props), ['$slots']));
4444

4545
each(mainNodeAttributes, (value, key) => {
4646
if (['class', 'style'].includes(key)) {

‎src/index.js

+14-8
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const processLocals = require('./locals');
1010
const processAttributes = require('./attributes');
1111
const {processPushes, processStacks} = require('./stacks');
1212
const {setFilledSlots, processSlotContent, processFillContent} = require('./slots');
13+
const mergeWith = require('lodash/mergeWith');
14+
const template = require('lodash/template');
1315

1416
// const {inspect} = require('util');
1517
// const debug = true;
@@ -35,14 +37,18 @@ module.exports = (options = {}) => tree => {
3537
options.slotSeparator = options.slotSeparator || ':';
3638
options.push = options.push || 'push';
3739
options.stack = options.stack || 'stack';
38-
options.localsAttr = options.localsAttr || 'props';
40+
options.propsScriptAttribute = options.propsScriptAttribute || 'props';
41+
options.propsContext = options.propsContext || 'props';
42+
options.propsAttribute = options.propsAttribute || 'props';
43+
options.propsSlot = options.propsSlot || 'props';
3944
options.expressions = options.expressions || {};
4045
options.plugins = options.plugins || [];
4146
options.attrsParserRules = options.attrsParserRules || {};
4247
options.strict = typeof options.strict === 'undefined' ? true : options.strict;
48+
options.utilities = options.utilities || {merge: mergeWith, template};
4349

4450
// Merge customizer callback passed to lodash mergeWith
45-
// for merge attribute `locals` and all attributes starting with `merge:`
51+
// for merge attribute `props` and all attributes starting with `merge:`
4652
// @see https://lodash.com/docs/4.17.15#mergeWith
4753
options.mergeCustomizer = options.mergeCustomizer || ((objectValue, sourceValue) => {
4854
if (Array.isArray(objectValue)) {
@@ -86,7 +92,7 @@ module.exports = (options = {}) => tree => {
8692
}
8793
});
8894

89-
options.locals = {...options.expressions.locals};
95+
options.props = {...options.expressions.locals};
9096
options.aware = {};
9197

9298
const pushedContent = {};
@@ -140,10 +146,10 @@ function processTree(options) {
140146
setFilledSlots(currentNode, filledSlots, options);
141147
// setFilledSlots(nextNode, filledSlots, options);
142148

143-
// Reset previous locals with passed global and keep aware locals
144-
options.expressions.locals = {...options.locals, ...options.aware};
149+
// Reset options.expressions.locals and keep aware locals
150+
options.expressions.locals = {...options.props, ...options.aware};
145151

146-
const {attributes, locals} = processLocals(currentNode, nextNode, filledSlots, options);
152+
const {attributes, props} = processLocals(currentNode, nextNode, filledSlots, options);
147153

148154
options.expressions.locals = attributes;
149155
options.expressions.locals.$slots = filledSlots;
@@ -172,11 +178,11 @@ function processTree(options) {
172178
currentNode.tag = false;
173179
currentNode.content = content;
174180

175-
processAttributes(currentNode, attributes, locals, options);
181+
processAttributes(currentNode, attributes, props, options);
176182

177183
// log(currentNode, 'currentNode', 'currentNode')
178184
// currentNode.attrs.counter = processCounter;
179-
// currentNode.attrs.data = JSON.stringify({ attributes, locals });
185+
// currentNode.attrs.data = JSON.stringify({ attributes, props });
180186

181187
// messages.push({
182188
// type: 'dependency',

0 commit comments

Comments
 (0)