Skip to content

Commit c2573f6

Browse files
thewebartisan7thewebartisan7
committed
Added underscore
1 parent 518894a commit c2573f6

File tree

8 files changed

+354
-15
lines changed

8 files changed

+354
-15
lines changed

‎examples/dist/demo.html

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="h-100">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>PostHTML UI</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
.doc-shadow {
10+
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
11+
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
12+
rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important;
13+
}
14+
</style>
15+
</head>
16+
<body class="d-flex flex-column h-100 bg-light">
17+
<header class="py-3 mb-4">
18+
<div class="container-lg">
19+
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
20+
<a href="index.html" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
21+
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" fill="currentColor" class="bi bi-code-slash me-2" viewbox="0 0 16 16">
22+
<path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
23+
</svg>
24+
</a>
25+
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
26+
<li>
27+
<a class="nav-link px-2 link-dark" href="index.html">Home</a>
28+
</li>
29+
<li>
30+
<a class="nav-link px-2 link-dark" href="docs.html">Docs</a>
31+
</li>
32+
<li>
33+
<a class="nav-link px-2 link-dark" href="https://github.com/posthtml" target="_blank">PostHTML</a>
34+
</li>
35+
<li>
36+
<a class="nav-link px-2 link-dark d-block d-md-none" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a>
37+
</li>
38+
</ul>
39+
<div class="col-md-3 text-end d-none d-md-block">
40+
<a class="btn btn-light bg-white doc-shadow border-white me-3" href="https://www.npmjs.com/package/posthtml-component" target="_blank">NPM</a>
41+
<a class="btn btn-light bg-white doc-shadow border-white" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a>
42+
</div>
43+
</div>
44+
</div>
45+
</header>
46+
<main class="flex-shrink-0">
47+
<div class="container">
48+
<div class="row">
49+
<div class="col-lg-8">
50+
<h1 class="display-1 fw-bold mb-4">Demo</h1>
51+
<div>
52+
<h1>anObjectDefault</h1>
53+
<p>
54+
<strong>first</strong>
55+
: First default item
56+
</p>
57+
<p>
58+
<strong>second</strong>
59+
: Second default item
60+
</p>
61+
<h1>anObjectOverride</h1>
62+
<p>
63+
<strong>third</strong>
64+
: Third override item
65+
</p>
66+
<p>
67+
<strong>fourth</strong>
68+
: Fourth override item
69+
</p>
70+
<h1>anObjectMerged</h1>
71+
<p>
72+
<strong>third</strong>
73+
: Third merged item
74+
</p>
75+
<p>
76+
<strong>fourth</strong>
77+
: Fourth merged item
78+
</p>
79+
<p>
80+
<strong>anObjectMerged1</strong>
81+
: {"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
82+
</p>
83+
<h1>aStringDefault</h1>
84+
<p>My default string</p>
85+
<h1>aStringOverride</h1>
86+
<p>My override string changed</p>
87+
<hr>
88+
<h1>post</h1>
89+
My post title My post body
90+
<p>
91+
<strong>1</strong>
92+
: My comment 1 new
93+
</p>
94+
<p>
95+
<strong>3</strong>
96+
: My comment 3
97+
</p>
98+
<h1>anArrayOfObjects</h1>
99+
<p>
100+
<strong>0</strong>
101+
: {"id":1,"title":"My new title 1"}
102+
</p>
103+
<p>
104+
<strong>1</strong>
105+
: {"id":2,"title":"My new title 2","somethingnew":"New"}
106+
</p>
107+
<h1>anArray</h1>
108+
<p>
109+
<strong>0</strong>
110+
: first
111+
</p>
112+
<p>
113+
<strong>1</strong>
114+
: third
115+
</p>
116+
<p>
117+
<strong>2</strong>
118+
: fourth
119+
</p>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</main>
125+
<footer class="footer mt-auto py-3">
126+
<div class="container-lg">
127+
<div class="text-muted text-center">
128+
Built with
129+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill d-inline mx-1 text-danger" viewbox="0 0 16 16">
130+
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
131+
</svg>
132+
and
133+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-hot-fill d-inline mx-1 text-warning" viewbox="0 0 16 16">
134+
<path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6H.5ZM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5Z"></path>
135+
<path d="m4.4.8-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 3.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8Zm3 0-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 6.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8Zm3 0-.003.004-.014.019a4.077 4.077 0 0 0-.204.31 2.337 2.337 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.198 3.198 0 0 1-.202.388 5.385 5.385 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 9.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8Z"></path>
136+
</svg>
137+
in Swiss Alp by
138+
<a href="https://github.com/thewebartisan7" class="text-muted text-decoration-none fst-italic" target="_blank">@thewebartisan7</a>
139+
</div>
140+
</div>
141+
</footer>
142+
<div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
143+
<div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
144+
<div class="modal-content modal-content-custom">
145+
<div class="modal-header">
146+
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
147+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
148+
</div>
149+
<!-- /.modal-header -->
150+
<div class="modal-body">
151+
<p>
152+
All notable changes to this project will be documented in this file.
153+
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
154+
</p>
155+
<h5>[1.0.0-beta.2] - 2022.10.20</h5>
156+
<p>Initial release.</p>
157+
</div>
158+
<!-- /.modal-body -->
159+
<div class="modal-footer">
160+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
161+
</div>
162+
<!-- /.modal-footer -->
163+
</div>
164+
<!-- /.modal-content -->
165+
</div>
166+
<!-- /.modal-dialog -->
167+
</div>
168+
<!-- /.modal -->
169+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
170+
</body>
171+
</html>

‎examples/src/components/demo.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script props>
2+
module.exports = {
3+
aStringDefault: 'My default string',
4+
aStringOverride: 'My default override string',
5+
anObjectDefault: {
6+
first: 'First default item',
7+
second: 'Second default item'
8+
},
9+
anObjectOverride: {
10+
first: 'First overriden item',
11+
second: 'Second overriden item'
12+
},
13+
anObjectMerged: {
14+
first: 'First merged item',
15+
second: 'Second merged item',
16+
anObjectMerged1: {
17+
first: 'First1 merged item',
18+
second: 'Second1 merged item',
19+
anObjectMerged2: {
20+
first: 'First2 merged item',
21+
second: 'Second2 merged item'
22+
},
23+
},
24+
},
25+
post: {
26+
title: 'Default post title',
27+
body: 'Default post body',
28+
comments: [
29+
{
30+
id: 1,
31+
body: "My comment 1"
32+
},
33+
{
34+
id: 2,
35+
body: "My comment 2"
36+
}
37+
]
38+
},
39+
anArrayOfObjects: [
40+
{
41+
id: 1,
42+
title: "My default title 1"
43+
},
44+
{
45+
id: 2,
46+
title: "My default title 2"
47+
}
48+
],
49+
anArray: ['first', 'second']
50+
};
51+
</script>
52+
<div>
53+
<h1>anObjectDefault</h1>
54+
<each loop="o,i in anObjectDefault">
55+
<p><strong>{{ i }}</strong>: {{ o }}</p>
56+
</each>
57+
58+
<h1>anObjectOverride</h1>
59+
<each loop="o,i in anObjectOverride">
60+
<p><strong>{{ i }}</strong>: {{ o }}</p>
61+
</each>
62+
63+
<h1>anObjectMerged</h1>
64+
<each loop="o,i in anObjectMerged">
65+
<p><strong>{{ i }}</strong>: {{ o }}</p>
66+
</each>
67+
68+
<h1>aStringDefault</h1>
69+
<p>{{ aStringDefault }}</p>
70+
71+
<h1>aStringOverride</h1>
72+
<p>{{ aStringOverride }}</p>
73+
74+
<hr>
75+
76+
<h1>post</h1>
77+
{{ post.title }} {{ post.body }}
78+
<each loop="comment in post.comments">
79+
<p><strong>{{ comment.id }}</strong>: {{ comment.body }}</p>
80+
</each>
81+
82+
<h1>anArrayOfObjects</h1>
83+
<each loop="o,i in anArrayOfObjects">
84+
<p><strong>{{ i }}</strong>: {{ o }}</p>
85+
</each>
86+
87+
<h1>anArray</h1>
88+
<each loop="o,i in anArray">
89+
<p><strong>{{ i }}</strong>: {{ o }}</p>
90+
</each>
91+
</div>

‎examples/src/pages/demo.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<x-page>
2+
<div class="row">
3+
<div class="col-lg-8">
4+
<h1 class="display-1 fw-bold mb-4">Demo</h1>
5+
6+
<x-demo
7+
aStringOverride="My override string changed"
8+
anObjectOverride='{ "third": "Third override item", "fourth": "Fourth override item" }'
9+
merge:anObjectMerged='{ "third": "Third merged item", "fourth": "Fourth merged item", "anObjectMerged1": { "third": "Third merged item (UPDATED?)", "fourth1": "Fourth merged item" } }'
10+
11+
merge:post='{ "title": "My post title", "body": "My post body", "comments": [ { "id": 1, "body": "My comment 1 new" }, { "id": 3, "body": "My comment 3" } ] }'
12+
13+
merge:anArrayOfObjects='[ { "id": 1, "title": "My new title 1" }, { "id": 2, "title": "My new title 2", "somethingnew": "New" } ]'
14+
15+
merge:anArray='[ "first", "third", "fourth" ]'
16+
></x-demo>
17+
</div>
18+
</div>
19+
</x-page>

‎package-lock.json

+14-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
"posthtml-expressions": "^1.9.0",
2929
"posthtml-parser": "^0.11.0",
3030
"posthtml-render": "^3.0.0",
31-
"style-to-object": "^0.3.0"
31+
"style-to-object": "^0.3.0",
32+
"underscore": "^1.13.6"
3233
},
3334
"devDependencies": {
3435
"@commitlint/cli": "^12.0.1",

‎src/locals.js

+12-11
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
const merge = require('deepmerge');
44
const scriptDataLocals = require('posthtml-expressions/lib/locals');
5+
const {pick, extend} = require('underscore');
6+
// const {inspect} = require('util');
7+
//
8+
// const debug = true;
9+
//
10+
// const log = (object, what, method) => {
11+
// if (debug === true || method === debug) {
12+
// console.log(what, inspect(object, false, null, true));
13+
// }
14+
// };
515

616
/**
717
* Parse locals from attributes, globals and via script
@@ -74,19 +84,10 @@ module.exports = (currentNode, nextNode, slotContent, options) => {
7484
// Retrieve default locals from <script props> and merge with attributes
7585
const {locals} = scriptDataLocals(nextNode, {localsAttr: options.localsAttr, removeScriptLocals: true, locals: {...attributes, $slots: slotContent}});
7686

77-
// Merge default locals and attributes or overrides props with attributes
87+
// Merge or overrides props and attributes
7888
if (locals) {
7989
if (merged.length > 0) {
80-
/** @var {Object} mergedAttributes */
81-
const mergedAttributes = Object.fromEntries(Object.entries(attributes).filter(([attribute]) => merged.includes(attribute)));
82-
/** @var {Object} mergedAttributes */
83-
const mergedLocals = Object.fromEntries(Object.entries(locals).filter(([local]) => merged.includes(local)));
84-
85-
if (Object.keys(mergedLocals).length > 0) {
86-
merged.forEach(attributeName => {
87-
attributes[attributeName] = merge(mergedLocals[attributeName], mergedAttributes[attributeName]);
88-
});
89-
}
90+
extend(attributes, merge(pick(locals, merged), pick(attributes, merged)));
9091
}
9192

9293
// Override attributes with props when is computed or attribute is not defined

0 commit comments

Comments
 (0)