This content originally appeared on DEV Community and was authored by chris-czopp
Introduction
This article is dedicated for a web developer who appreciates design freedom, yet who'd like to code less in a setup-free web-based development environment.
It's a 5 DOM interaction you'd better did in a reactive way instead of using jQuery or document.querySelector.
Why? - Because it's more maintainable and scalable. You can read more in one of my past articles.
The below snippets are meant to work with GlueCodes Studio - the tool powering your every-day work in the ways you haven't seen elsewhere. It's for somebody who'd be pleased with loads of automation to deliver an extremely fast and scalable code i.e. build-time diffed JSX using SolidJS organised around an implicit uni-directional data flow. Obviously you can use it for FREE, so let's begin!
1. Updating a CSS class on a button click
<button-x>
<script>
if (uiSignals.updateClass) {
props.className = 'some-class'
}
props.onClick = () => {
uiSignals.updateClass = true
}
</script>Click
</button-x>
2. Toggling a CSS class on a button click
<button-x>
<script>
if (uiSignals.updateClass) {
props.className = 'some-class'
}
props.onClick = () => {
uiSignals.updateClass = !uiSignals.updateClass
}
</script>Click
</button-x>
Note: The snippets are made using a concept called "extended tags". Below you'll be seeing a global
uiSignalsobject being accessed in embedded<script>s. You can freerly set/get properties on/of this object. Think of it as a local UI state, something you'd see in React as hooks. What matters the most is that when a property ofuiSignalschanges, only the DOM elements which access it get updated.
3. Switching tabs
<span-x>
<script>
if (uiSignals! || uiSignals.activeTab === 'a') {
props.className = 'active'
}
props.onClick = () => {
uiSignals.activeTab = 'a'
}
</script>Default tab (A)
</span-x>
<span-x>
<script>
if (uiSignals.activeTab === 'b') {
props.className = 'active'
}
props.onClick = () => {
uiSignals.activeTab = 'b'
}
</script>B
</span-x>
<span-x>
<script>
if (uiSignals.activeTab === 'c') {
props.className = 'active'
}
props.onClick = () => {
uiSignals.activeTab = 'c'
}
</script>C
</span-x>
4. Removing an element on a button click
<div>
<button-x>
<script>
props.onClick = () => {
uiSignals.shouldTheSpanBeRemoved = true
}
</script>
</button-x>
<span-x gc-as="conditional">
<script>
props.isConditionMet = uiSignals.shouldTheSpanBeRemoved
</script>
</span-x>
</div>
5. Adding an item to the list
<div>
<input-x>
<script>
props.onKeyUp = async (e) => {
if (e.code === 'Enter') {
await actions.submitRecord(e.target.value)
actions.reload()
}
}
</script>
</input-x>
<ul>
<li gc-as="listItemPresenter" gc-provider="getSomeRecords">
<fragment gc-as="varPresenter" name="getSomeRecordsItem">repeated item</fragment>
</li>
</ul>
</div>
There are some more directives in this snippet which you can read about here. Note that when an extended tag is placed inside a "list item presenter", you get access to a variable called:
providerName + Item, in our casegetSomeRecordsItemwhich is an item while looping overgetSomeRecordsaction result (an array). You could also accessgetSomeRecordsIndexfor a numeric index in the array.
What are those tagName-x tags?
Static HTML has no built-in way to make it reactive. Hence, GlueCodes Studio supports a concept called extended tags which is named like: tagName + '-x' and has an embedded <script> included. Its code is sandboxed allowing you to access variables which are available inside other directives including slots or list item presenters. In the script you can assign to props variable to change props/attributes of the "extended" tag. For a complete list of the directives click here.
What's next?
Before you shout "this is another self-promotional read", I'll say yeah, this article is indeed about a new tool. But, bear in mind it's made by two developers who want to address the problem differently. And we're not a corporation. I'm trying to share with you a new way where you can use a slightly extended old-fashion HTML to build reactive apps. So if you like the idea of managing local UI state using the extended tags and attribute directives, you may want to read more in our documentation.
Also join our Facebook forum for help and support. Thanks!
This content originally appeared on DEV Community and was authored by chris-czopp
chris-czopp | Sciencx (2021-06-15T17:56:14+00:00) 5 reactive UI interactions you’d better did instead of querying $elements. Retrieved from https://www.scien.cx/2021/06/15/5-reactive-ui-interactions-youd-better-did-instead-of-querying-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.