Converts html tagged templates to ExtJS component object.
npm install extmlbash
$ npm install -D extml
`
---
Examples
$3
Try Extml live on Sencha Fiddle.
$3
`javascript
import { h } from 'extml';
function myButton() {
return h
;
}
const component = myButton();
console.log(component);
/* Outputs:
{
xtype: 'button',
text: 'Click Me',
listeners: [{ tap: [Function] }]
}
*/
`
$3
`javascript
import {
h,
createState,
createRef,
createEffect,
createDerivedState,
conditionalState
} from "extml";
function timelineComponent() {
const [currentTime, setCurrentTime] = createState(0);
const [isPlaying, setIsPlaying] = createState(false);
const currentRelativeTime = createDerivedState(() => {
const time = currentTime();
return time < 10 ? 0:0${time} : 0:${time};
});
const videoRef = createRef();
createEffect(() => {
const video = videoRef();
if (!video) return;
video.addEventListener('timeupdate', () => setCurrentTime(video.currentTime));
video.addEventListener('play', () => setIsPlaying(true));
video.addEventListener('pause', () => setIsPlaying(false));
}, [videoRef]);
return h
;
}
const component = timelineComponent();
console.log(component);
`
$3
`javascript
Ext.application({
name : 'Fiddle',
launch : function() {
const { h } = window.extml;
const myButton = function() {
return h
;
};
const myPanel = function() {
return h
;
};
this.viewport.add(myPanel());
}
});
`
$3
`javascript
import { h, For } from "extml";
function listComponent(items) {
return h
${item.content}
}
;
}
const items = [
{ id: 1, title: "Item 1", content: "Content 1" },
{ id: 2, title: "Item 2", content: "Content 2" },
{ id: 3, title: "Item 3", content: "Content 3" }
];
const component = listComponent(items);
console.log(component);
`
---
Key Features
$3
Extml provides a robust state management system:
- createState: Creates a reactive state.
- createDerivedState: Generates states derived from other states.
- Example:
`javascript
const [value, setValue] = createState(0);
setValue(value() + 1);
`
$3
createEffect allows you to perform actions when dependencies change:
`javascript
createEffect(() => {
console.log('Value changed:', value());
}, [value]);
`
$3
Define styles specific to a component using the
;
`
---
Component Guidelines
- Component Tags: All ExtJS component tags must use the ext- prefix (e.g., ).
- Event Listeners: Use the on prefix for defining event listeners (e.g., ontap for the tap event).
- HTML Compatibility: You can mix native HTML tags with ExtJS components in your templates.
- Scoped Styles: Define component-specific styles within a