Skip to content

Commit bd58e8e

Browse files
fabioricalifabioricali
committed
progress
1 parent a503a64 commit bd58e8e

File tree

11 files changed

+312
-63
lines changed

11 files changed

+312
-63
lines changed

‎dist/extml.es.js‎

Lines changed: 102 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Extml, version: 2.1.17 - November 2, 2024 08:56:38 */
1+
/* Extml, version: 2.1.17 - November 2, 2024 14:52:56 */
22
const STYLE_PREFIX = 'extml-style-';
33

44
function composeStyleInner(cssContent, tag) {
@@ -110,7 +110,7 @@ function destroyContext() {
110110
function destroy() {
111111
destroyStyle.apply(this);
112112
destroyContext.apply(this);
113-
}const htmlTags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "math", "menu", "menuitem", "meta", "meter", "multicol", "nav", "nextid", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress", "q", "rb", "rbc", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp"];function defineExtClass(tag) {
113+
}const htmlTags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "command", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "math", "menu", "menuitem", "meta", "meter", "multicol", "nav", "nextid", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress", "q", "rb", "rbc", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "svg", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "signal"];function defineExtClass(tag) {
114114
let className = 'html-' + tag;
115115
window.__extHtmlClass[className] = window.Ext.define(className, {
116116
extend: 'Ext.Container',
@@ -129,28 +129,25 @@ function destroy() {
129129
],
130130
getInnerHtmlElement() {
131131
return this.getRenderTarget();
132-
// let me = this,
133-
// innerHtmlElement = me.innerHtmlElement;
134-
// if (!innerHtmlElement || !innerHtmlElement.dom || !innerHtmlElement.dom.parentNode) {
135-
// me.innerHtmlElement = innerHtmlElement = Ext.Element.create({
136-
// tag: 'ghost-tag',
137-
// cls: '',
138-
// });
139-
// me.getRenderTarget().appendChild(innerHtmlElement);
140-
// }
141-
// return innerHtmlElement;
142132
},
143133
listeners: [
144134
{
145-
initialize() {
135+
initialize(o) {
146136
//hack
147137
requestAnimationFrame(() => {
148138
this.el.dom.className = '';
149139
this.innerElement.dom.className = '';
150140
if (this._propsAttributes) {
151141
Object.keys(this._propsAttributes).forEach(attribute => {
152-
if (typeof this._propsAttributes[attribute] === 'function') {
153-
this.el.dom.addEventListener(attribute.substring(2), this._propsAttributes[attribute]);
142+
if (typeof this._propsAttributes[attribute] === 'function' &&this._propsAttributes[attribute].$$isState) {
143+
if (this._propsAttributes[attribute].$$isState) {
144+
this.el.dom.setAttribute(attribute, this._propsAttributes[attribute]());
145+
o.$$stateListener = this._propsAttributes[attribute].$$subscribe(value => {
146+
this.el.dom.setAttribute(attribute, this._propsAttributes[attribute]());
147+
});
148+
} else {
149+
this.el.dom.addEventListener(attribute.substring(2), this._propsAttributes[attribute]);
150+
}
154151
} else {
155152
this.el.dom.setAttribute(attribute, this._propsAttributes[attribute]);
156153
}
@@ -187,6 +184,13 @@ function destroy() {
187184
oldParent.remove();
188185
}
189186
}
187+
},
188+
{
189+
destroy(o) {
190+
if(o.$$stateListener) {
191+
o.$$stateListener();
192+
}
193+
}
190194
}
191195
]
192196
});
@@ -225,9 +229,8 @@ function createComponentConfig(type, props, children, propsFunction) {
225229

226230
// Configuration based on props
227231
let configFromProps = Object.assign({}, props, propsFunction);
228-
let isHtmlType = (configFromProps.xtype || type).startsWith('html-');
229232

230-
if (isHtmlType) {
233+
if (isHtmlType(configFromProps.xtype || type)) {
231234
componentConfig._propsAttributes = props;
232235
} else {
233236
applyPropsToConfig(componentConfig, configFromProps);
@@ -239,6 +242,10 @@ function createComponentConfig(type, props, children, propsFunction) {
239242
return componentConfig;
240243
}
241244

245+
function isHtmlType(type) {
246+
return (type).startsWith('html-')
247+
}
248+
242249
// Function to initialize the base configuration
243250
function initializeComponentConfig(type) {
244251
return {
@@ -263,6 +270,25 @@ function applyPropsToConfig(config, props) {
263270
} else if (prop === 'class') {
264271
config['cls'] = props[prop];
265272
} else {
273+
if (typeof props[prop] === 'function') {
274+
let propsProp = props[prop];
275+
if (propsProp.$$isState) {
276+
config.listeners = config.listeners || [];
277+
config.listeners.push(createEventObject('initialize', (o) => {
278+
o.$$stateListener = propsProp.$$subscribe(value => {
279+
o[createSetterName(prop)](value);
280+
});
281+
}));
282+
config.listeners.push(createEventObject('destroy', (o) => {
283+
if(o.$$stateListener) {
284+
o.$$stateListener();
285+
}
286+
}));
287+
}
288+
289+
props[prop] = props[prop]();
290+
291+
}
266292
config[prop] = props[prop];
267293
}
268294
}
@@ -278,8 +304,29 @@ function configureChildren(config, children, type) {
278304
} else if (child.xtype) {
279305
addToArray(config, 'items', child);
280306
} else {
281-
config.html = config.html || '';
282-
config.html += processValueForHtml(child);
307+
if (child.$$isState) {
308+
addToArray(config, 'items', {
309+
xtype: 'html-signal',
310+
html: String(child()),
311+
listeners: [
312+
createEventObject('initialize', (o) => {
313+
o.$$stateListener = child.$$subscribe(value => {
314+
o.bodyElement.el.dom.innerHTML = String(value);
315+
});
316+
}),
317+
createEventObject('destroy', (o) => {
318+
if(o.$$stateListener) {
319+
o.$$stateListener();
320+
}
321+
})
322+
]
323+
});
324+
//console.log(config)
325+
} else {
326+
config.html = config.html || '';
327+
config.html += processValueForHtml(child);
328+
}
329+
283330
}
284331
});
285332
}
@@ -315,6 +362,10 @@ function processValueForHtml(value) {
315362
console.warn('Unhandled value type:', value);
316363
return ''; // Returns an empty string for unsupported types
317364
}
365+
}
366+
367+
function createSetterName(attribute) {
368+
return `set${attribute.charAt(0).toUpperCase()}${attribute.slice(1)}`;
318369
}function detectClassType(xtype) {
319370
if (xtype.startsWith('ext-')) {
320371
xtype = xtype.split('ext-')[1];
@@ -358,8 +409,39 @@ function h(strings, ...values) {
358409
parsed.isContext = true;
359410
}
360411
return parsed
412+
}function createState(initialValue) {
413+
let state = initialValue;
414+
const listeners = new Set();
415+
416+
// Funzione getter che restituisce un oggetto con valore e tipo
417+
// const getState = () => ({
418+
// value: state,
419+
// $$isState: true,
420+
// subscribe,
421+
// });
422+
// Funzione per iscriversi ai cambiamenti di stato
423+
const subscribe = (listener) => {
424+
listeners.add(listener);
425+
return () => listeners.delete(listener); // Ritorna una funzione per rimuovere l'observer
426+
};
427+
// Funzione getter che restituisce un oggetto con valore e tipo
428+
const getState = () => state;
429+
getState.$$isState = true; // Aggiunge la proprietà isState direttamente alla funzione
430+
getState.$$subscribe = subscribe;
431+
432+
// Funzione setter
433+
const setState = (newValue) => {
434+
if (newValue !== state) {
435+
state = newValue;
436+
listeners.forEach((listener) => listener(state));
437+
}
438+
};
439+
440+
441+
442+
return [getState, setState, subscribe]; // Ritorniamo anche subscribe
361443
}try {
362444
if (window) {
363445
generateHtmlClass();
364446
}
365-
} catch (e) {}export{destroy,generateHtmlClass,h,initialize};
447+
} catch (e) {}export{createState,destroy,generateHtmlClass,h,initialize};

0 commit comments

Comments
 (0)