Skip to content
This repository was archived by the owner on Mar 11, 2026. It is now read-only.

Commit 97ddce1

Browse files
tamb¡Támb!
tamb
authored and
¡Támb!
committed
Adds custom syntax support
1 parent dfaac49 commit 97ddce1

14 files changed

Lines changed: 206 additions & 83 deletions

‎dist/domponent.development.js‎

Lines changed: 58 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
}
4141
}
4242

43+
// import { this.$app.$syntax } from "./enums";
44+
4345
function createKey() {
4446
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
4547
var r = (Math.random() * 16) | 0,
@@ -60,13 +62,13 @@
6062
function splitKeyValuePairs(string) {
6163
return string
6264
.trim()
63-
.split(relationalStringEnum.KEY_VALUE)
65+
.split(this.$app.$syntax.KEY_VALUE)
6466
.map(item => item.trim());
6567
}
6668
function splitMultipleValues(string) {
6769
return string
6870
.trim()
69-
.split(relationalStringEnum.MULTIPLE_VALUES)
71+
.split(this.$app.$syntax.MULTIPLE_VALUES)
7072
.map(item => item.trim());
7173
}
7274
function splitPropsPassedIn(string) {
@@ -78,7 +80,7 @@
7880
/* END.DEV */
7981
return string
8082
.trim()
81-
.split(relationalStringEnum.INHERITS_FROM)
83+
.split(this.$app.$syntax.INHERITS_FROM)
8284
.map(item => item.trim());
8385
}
8486
function splitMethodCalls(string) {
@@ -90,7 +92,7 @@
9092
/* END.DEV */
9193
return string
9294
.trim()
93-
.split(relationalStringEnum.METHOD_CALL)
95+
.split(this.$app.$syntax.METHOD_CALL)
9496
.map(item => item.trim());
9597
}
9698
function splitFromComponent(string) {
@@ -102,20 +104,22 @@
102104
/* END.DEV */
103105
return string
104106
.trim()
105-
.split(relationalStringEnum.FROM_COMPONENT)
107+
.split(this.$app.$syntax.FROM_COMPONENT)
106108
.map(item => item.trim());
107109
}
108110
function splitList(string) {
109111
return string
110112
.trim()
111-
.split(relationalStringEnum.LIST)
113+
.split(this.$app.$syntax.LIST)
112114
.map(item => item.trim());
113115
}
114116

115117
function createStateObjects() {
118+
const self = this;
119+
116120
const nodes = scopeElements.call(
117121
this,
118-
`[data-${this.$app.$datasets.bind}^="state:"]`
122+
`[data-${this.$app.$datasets.bind}^="state${this.$app.$syntax.KEY_VALUE}"]`
119123
);
120124
if (nodes.length > 0) {
121125
const $s = {};
@@ -124,7 +128,7 @@
124128
/* START.DEV */
125129
try {
126130
/* END.DEV */
127-
var states = splitMultipleValues(
131+
var states = splitMultipleValues.call(self,
128132
el.getAttribute(`data-${this.$app.$datasets.bind}`)
129133
);
130134
/* START.DEV */
@@ -138,7 +142,7 @@
138142
/* START.DEV */
139143
try {
140144
/* END.DEV */
141-
var parts = splitKeyValuePairs(state);
145+
var parts = splitKeyValuePairs.call(self, state);
142146
/* START.DEV */
143147
} catch (err) {
144148
console.error(`🤓 -- "There's a problem creating the state.
@@ -149,7 +153,7 @@
149153
/* START.DEV */
150154
try {
151155
/* END.DEV */
152-
var stateKey = splitFromComponent(parts[1])[1];
156+
var stateKey = splitFromComponent.call(self, parts[1])[1];
153157
/* START.DEV */
154158
} catch (err) {
155159
console.error(`🤓 -- "There's a problem creating the state.
@@ -190,28 +194,29 @@
190194
}
191195

192196
function bindListeners() {
197+
const self = this;
193198
this.$b = [];
194199
let arr = this.$root.getAttribute(`data-${this.$app.$datasets.action}`)
195200
? [this.$root]
196201
: [];
197202
arr
198203
.concat(scopeElements.call(this, `[data-${this.$app.$datasets.action}]`))
199204
.forEach(el => {
200-
const actions = splitMultipleValues(
205+
const actions = splitMultipleValues.call(self,
201206
el.getAttribute(`data-${this.$app.$datasets.action}`)
202207
);
203208
const binding = {
204209
el: el,
205210
actions: []
206211
};
207212
actions.forEach(action => {
208-
const parts = splitMethodCalls(action);
213+
const parts = splitMethodCalls.call(self, action);
209214
const event = parts[0];
210-
const cbFunc = splitFromComponent(parts[1]);
215+
const cbFunc = splitFromComponent.call(self, parts[1]);
211216
if (cbFunc[0] === this.$name) {
212217
let options = {};
213218
if (cbFunc[2]) {
214-
const arr = splitList(cbFunc[2]);
219+
const arr = splitList.call(self, cbFunc[2]);
215220
for (let key in eventOptions) {
216221
options[eventOptions[key]] = arr.includes(eventOptions[key]);
217222
}
@@ -291,13 +296,14 @@
291296
}
292297

293298
function createPropObjects() {
299+
const self = this;
294300
const attr = this.$root.getAttribute(`data-${this.$app.$datasets.props}`);
295301
if (attr) {
296302
const $p = {};
297-
const props = splitMultipleValues(attr);
303+
const props = splitMultipleValues.call(self, attr);
298304
props.forEach(prop => {
299-
const propStringValues = splitPropsPassedIn(prop);
300-
const parentComponentValues = splitKeyValuePairs(propStringValues[1]);
305+
const propStringValues = splitPropsPassedIn.call(self, prop);
306+
const parentComponentValues = splitKeyValuePairs.call(self, propStringValues[1]);
301307
const propName = propStringValues[0];
302308
const parentComponent = this.$app.registeredComponents[
303309
parentComponentValues[0]
@@ -308,7 +314,7 @@
308314
const els = [
309315
...scopeElements.call(
310316
this,
311-
`[${this.$app.$datasets.bind}^="props:${propName}"]`
317+
`[${this.$app.$datasets.bind}^="props${this.$app.$syntax.KEY_VALUE}${propName}"]`
312318
)
313319
];
314320
this.props[propName] = parentComponent.state[parentComponentKey];
@@ -325,11 +331,16 @@
325331
}
326332

327333
function createRefs() {
334+
const self = this;
335+
328336
scopeElements
329-
.call(this, `[data-${this.$app.$datasets.ref}*='${this.$name}.']`)
337+
.call(
338+
this,
339+
`[data-${this.$app.$datasets.ref}*='${this.$name}${this.$app.$syntax.FROM_COMPONENT}']`
340+
)
330341
.forEach(element => {
331342
this[
332-
splitFromComponent(
343+
splitFromComponent.call(self,
333344
element.getAttribute(`data-${this.$app.$datasets.ref}`)
334345
)[1]
335346
] = element;
@@ -338,10 +349,15 @@
338349

339350
function createRefArrays() {
340351
let prevKey = null;
352+
const self = this;
353+
341354
scopeElements
342-
.call(this, `[data-${this.$app.$datasets.ref_array}*='${this.$name}.']`)
355+
.call(
356+
this,
357+
`[data-${this.$app.$datasets.ref_array}*='${this.$name}${this.$app.$syntax.FROM_COMPONENT}']`
358+
)
343359
.forEach(element => {
344-
const key = splitFromComponent(
360+
const key = splitFromComponent.call(self,
345361
element.getAttribute(`data-${this.$app.$datasets.ref_array}`)
346362
)[1];
347363
if (key === prevKey) {
@@ -474,6 +490,26 @@ See ya soon!"`);
474490
return dataSet;
475491
})();
476492

493+
// custom syntax to avoid collisions
494+
this.$syntax = (() => {
495+
const syntax = relationalStringEnum;
496+
if (config.customSyntax) {
497+
for (let key in config.customSyntax) {
498+
syntax[key] = config.customSyntax[key];
499+
}
500+
}
501+
/* START.DEV */
502+
console.log(
503+
`🤓 -- "Dom here. Your custom syntax is in this object:
504+
`,
505+
syntax,
506+
`
507+
Sweet, dude!"`
508+
);
509+
/* END.DEV */
510+
return syntax;
511+
})();
512+
477513
// methods to expose
478514
// create component
479515
this._cc = (el, cb) => {

‎dist/domponent.es5.development.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)