Skip to content

Commit f9cea29

Browse files
fehmifehmi
committed
no shadow option
1 parent 8dd1121 commit f9cea29

File tree

6 files changed

+262
-76
lines changed

6 files changed

+262
-76
lines changed

‎components/_s-icon.html

+79
Large diffs are not rendered by default.

‎components/s-icon.html

100755100644
+4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@
1616
:host {
1717
background-color: yellow;
1818
all: unset !important;
19+
height: calc("{props.height}" * 1px)!important;
20+
width: calc("{props.height}" * 1px)!important;
21+
display: inline-block!important;
1922
}
23+
2024
</style>
2125

2226
<script>

‎docs/component-structure.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,6 @@ In the example above, "S" letter exists in DOM, because it is defined in templat
88

99
?> All of those there tags are optional. For example, your component can contains only a `<script>` tag or only a `<html>` tag or only a `<style>` tag.
1010

11-
<repl-component id="9yl7k6gtgkucjmw"></repl-component>
11+
<repl-component id="9yl7k6gtgkucjmw"></repl-component>
12+
13+
?> If you don't like shadow dom or you may need to serialize your form or something, you can always use your component as `<your-componen open>` This way your component adopt parent styles and reachable via JS from anywhere. And the best part you can create your custom form element components and easyly serialize them before sending to back-end.

‎simply.js

+163-65
Original file line numberDiff line numberDiff line change
@@ -752,11 +752,30 @@ simply = {
752752
this.sfcClass.lifecycle.beforeConstruct();
753753
}
754754
}
755-
755+
var open = false;
756+
if (this.getAttribute("open") !== null) {
757+
open = true;
758+
}
759+
756760
var uid = "id" + Math.random().toString(16).slice(2)
757761
var component = this;
758-
var dom = this.attachShadow({ mode: 'open' });
759-
var parent = this.getRootNode().host;
762+
763+
if (!open) {
764+
var dom = this.attachShadow({ mode: 'open' });
765+
var parent = this.getRootNode().host;
766+
if (!parent) {
767+
parent = simply.findShadowRootOrCustomElement(this);
768+
}
769+
}
770+
else {
771+
var dom = this;
772+
var parent = simply.findShadowRootOrCustomElement(this);
773+
}
774+
775+
if (name == "home-comp") {
776+
console.log("ehem", parent);
777+
}
778+
760779
var data = this.sfcClass.data ? this.sfcClass.data : {};
761780
var props = this.sfcClass.props ? this.sfcClass.props : {};
762781
var methods = this.sfcClass.methods;
@@ -773,6 +792,9 @@ simply = {
773792
this.watch = watch;
774793
this.parent = parent;
775794
this.uid = uid;
795+
this.open = open;
796+
797+
// console.log(name, open);
776798

777799
var geval = eval;
778800
for (var key in sfcClass) {
@@ -974,13 +996,19 @@ simply = {
974996
if (m.index === regex.lastIndex) {
975997
regex.lastIndex++;
976998
}
977-
if (m.groups["match"].indexOf("this.getRootNode().host") == -1) {
999+
if (this.open) {
1000+
var match = "simply.findShadowRootOrCustomElement(this)";
1001+
}
1002+
else {
1003+
var match = "this.getRootNode().host";
1004+
}
1005+
if (m.groups["match"].indexOf(match) == -1) {
9781006
var builtinVars = ["state.", "parent.", "methods.", "lifecycle.", "data.", "props.", "component.", "dom."];
9791007

9801008
var newValue = m[0];
9811009
builtinVars.forEach(v => {
982-
newValue = newValue.replaceAll(v, "this.getRootNode().host." + v);
983-
newValue = newValue.replaceAll(".this.getRootNode().host", "");
1010+
newValue = newValue.replaceAll(v, match + "." + v);
1011+
newValue = newValue.replaceAll("." + match, "");
9841012
});
9851013
template = template.replaceAll(m[0], newValue);
9861014
}
@@ -1100,7 +1128,15 @@ simply = {
11001128
}
11011129

11021130
try {
1103-
this.sheet = this.dom.getRootNode().querySelector("style[simply-vars]").sheet;
1131+
if (!this.open) {
1132+
//console.log("not open", this);
1133+
this.sheet = this.dom.getRootNode().querySelector("style[simply-vars]").sheet;
1134+
}
1135+
else {
1136+
//console.log("open", this);
1137+
this.sheet = this.querySelector("style[simply-vars]").sheet;
1138+
}
1139+
11041140
//console.log(this.dom.getRootNode().styleSheets[1].cssRules[0].style.setProperty"--main-bg-color: yellow;";["--data-topAreaHeight"] = "3px");
11051141

11061142
var vars = ":host {";
@@ -1141,51 +1177,79 @@ simply = {
11411177
var newDom = parsedTemplate + "<style uno></style><style global>" + (parsedGlobalStyle ? parsedGlobalStyle.style : "") + "</style>" + "<style simply>:host([hoak]) {display: none;} " + parsedStyle.style + "</style><style simply-vars></style>";
11421178

11431179
//childrenOnly: true,
1144-
simply.morphdom(this.dom, "<div>" + newDom + "</div>", {
1145-
onBeforeElUpdated: function (fromEl, toEl) {
1146-
// spec - https://dom.spec.whatwg.org/#concept-node-equals
1147-
if (fromEl.isEqualNode(toEl)) {
1148-
return false
1149-
}
1150-
return true
1151-
},
1152-
onBeforeNodeDiscarded: function (node) {
1153-
1154-
},
1155-
onBeforeElChildrenUpdated: function (fromEl, toEl) {
1156-
if (fromEl.tagName == "CHILD-COMPONENT") {
1157-
// console.log("dont again");
1158-
}
1159-
else if (fromEl.tagName == "STYLE") {
1160-
return false;
1161-
}
1162-
else if (toEl.hasAttribute("passive") === true) {
1163-
return false;
1164-
}
1165-
else if (toEl.tagName === 'INPUT') {
1166-
if (toEl.type == 'RADIO' || toEl.type == 'CHECKBOX') {
1180+
1181+
if (this.open) {
1182+
var newDomAsString = "<"+name+" open>" + newDom + "</"+name+">";
1183+
morphIt(this.dom);
1184+
}
1185+
else {
1186+
var newDomAsString = "<"+name+">" + newDom + "</"+name+">";
1187+
morphIt(this.dom);
1188+
}
1189+
1190+
function morphIt(dom) {
1191+
simply.morphdom(dom, newDomAsString, {
1192+
childrenOnly: true,
1193+
onBeforeElUpdated: function (fromEl, toEl) {
1194+
// spec - https://dom.spec.whatwg.org/#concept-node-equals
1195+
1196+
1197+
if (fromEl.isSameNode(toEl)) {
11671198
return false;
11681199
}
1169-
else {
1170-
toEl.value = fromEl.value;
1171-
}
1172-
}
1173-
1174-
else if (toEl.tagName === 'ROUTER') {
1175-
// DINAMIK BAKMAK LAZIM EL ROUTER MI DIYE
1176-
return false;
1177-
}
1178-
else if (toEl.tagName == 'LABEL') {
11791200
if (fromEl.isEqualNode(toEl)) {
1201+
return false
1202+
}
1203+
return true
1204+
},
1205+
onBeforeNodeDiscarded: function (node) {
1206+
},
1207+
onBeforeElChildrenUpdated: function (fromEl, toEl) {
1208+
// bu custom element'leri skip etmek için
1209+
// shadowdom olanlara zaten dokunamıyor da
1210+
// shadow'suz custom elementleri her seferinde render ediyor yoksa
1211+
if (customElements.get(fromEl.tagName.toLowerCase())) {
1212+
return false;
1213+
}
1214+
if (fromEl.isSameNode(toEl)) {
11801215
return false;
1216+
}
1217+
if (fromEl.tagName == "CHILD-COMPONENT") {
1218+
// console.log("dont again");
11811219
}
1220+
else if (fromEl.tagName == "STYLE") {
1221+
return false;
1222+
}
1223+
else if (toEl.hasAttribute("passive") === true) {
1224+
return false;
1225+
}
1226+
else if (toEl.tagName === 'INPUT') {
1227+
if (toEl.type == 'RADIO' || toEl.type == 'CHECKBOX') {
1228+
return false;
1229+
}
1230+
else {
1231+
toEl.value = fromEl.value;
1232+
}
1233+
}
1234+
1235+
else if (toEl.tagName === 'ROUTER') {
1236+
// DINAMIK BAKMAK LAZIM EL ROUTER MI DIYE
1237+
return false;
1238+
}
1239+
else if (toEl.tagName == 'LABEL') {
1240+
if (fromEl.isEqualNode(toEl)) {
1241+
return false;
1242+
}
1243+
}
1244+
else if (toEl.tagName === 'OPTION') {
1245+
toEl.selected = fromEl.selected;
1246+
}
1247+
//console.log(toEl.tagName);
11821248
}
1183-
else if (toEl.tagName === 'OPTION') {
1184-
toEl.selected = fromEl.selected;
1185-
}
1186-
//console.log(toEl.tagName);
1187-
}
1188-
});
1249+
});
1250+
}
1251+
1252+
11891253

11901254
if (this.globalStyle) {
11911255
var parsedGlobalStyle = simply.parseStyle({
@@ -1230,26 +1294,21 @@ simply = {
12301294
var state = this.state;
12311295
var parent = this.parent;
12321296

1233-
this.state.__c_.forEach(function(cb, i) {
1234-
if (cb.id == compId) {
1235-
// console.log("bunu silem aga", cb, compName, i);
1236-
state.__c_.splice(i, 1);
1237-
}
1238-
});
1297+
// Remove items from this.state.__c_
1298+
this.state.__c_ = this.state.__c_.filter(function(cb) {
1299+
return cb.id !== compId;
1300+
});
1301+
1302+
// Remove items from this.parent.data.__c_
1303+
this.parent.data.__c_ = this.parent.data.__c_.filter(function(cb) {
1304+
return cb.id !== compId;
1305+
});
1306+
1307+
// Remove items from this.parent.props.__c_
1308+
this.parent.props.__c_ = this.parent.props.__c_.filter(function(cb) {
1309+
return cb.id !== compId;
1310+
});
12391311

1240-
this.parent.data.__c_.forEach(function(cb, i) {
1241-
if (cb.id == compId) {
1242-
// console.log("bunu silem aga", cb, compName, i);
1243-
parent.data.__c_.splice(i, 1);
1244-
}
1245-
});
1246-
1247-
this.parent.props.__c_.forEach(function(cb, i) {
1248-
if (cb.id == compId) {
1249-
// console.log("bunu silem aga", cb, compName, i);
1250-
parent.props.__c_.splice(i, 1);
1251-
}
1252-
});
12531312

12541313
if (typeof this.lifecycle !== "undefined") {
12551314
if (typeof this.lifecycle.disconnected !== "undefined") {
@@ -3135,12 +3194,20 @@ simply = {
31353194

31363195
// simply.js state & parent fix
31373196
let outlet = context.resolver.__outlet;
3197+
31383198
if (outlet.getRootNode().host) {
31393199
let parent = outlet.getRootNode().host;
31403200
element.parent = parent;
31413201
let state = parent.state;
31423202
element.state = state;
31433203
}
3204+
else {
3205+
let parent = document.querySelector("reframer-app");;
3206+
element.parent = parent;
3207+
let state = parent.state;
3208+
element.state = state;
3209+
//console.log(element);
3210+
}
31443211
return element;
31453212
}
31463213

@@ -4289,7 +4356,38 @@ simply = {
42894356
});
42904357
}
42914358
},
4359+
findShadowRootOrCustomElement: function(element) {
4360+
let parent = element.parentNode;
4361+
4362+
while (parent !== null) {
4363+
// Check if the parent is a shadow root
4364+
if (parent instanceof ShadowRoot) {
4365+
// console.log("Found shadow root:", parent);
4366+
return parent.host;
4367+
}
4368+
console.log(element, parent);
4369+
// Check if the parent is a custom element
4370+
// console.log(parent.tagName, customElements.get(parent.tagName));
4371+
if (parent.tagName) {
4372+
if (parent.tagName.includes('-') && customElements.get(parent.tagName.toLowerCase()) !== undefined) {
4373+
// console.log("Found custom element:", parent);
4374+
return parent;
4375+
}
4376+
}
4377+
else {
4378+
console.log("hi doc", parent);
4379+
return undefined
4380+
}
42924381

4382+
4383+
// Move to the next parent
4384+
parent = parent.parentNode;
4385+
}
4386+
4387+
// If no shadow root or custom element is found
4388+
console.log("No shadow root or custom element found.");
4389+
return null;
4390+
},
42934391
init: function () {
42944392
this.Router();
42954393
this.obaa();

‎simply.min.js

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

0 commit comments

Comments
 (0)