LS v5.0.0

Welcome the next big iteration of LS, LS v5.

What's new?

• ✨ New, modern API remade from scratch
• 📔 New component system
• 🚀 Significantly improved performance all around
• 💾 Optimized for memory efficiency
• 💼 Smaller size
• 💻 Reworked UI framework

Warning

If you are migrating from earlier LS versions, please review the migration notes. As this is a major release of LS, API compatibility is not guaranteed and a lot of things were changed or removed. Namely all previously deprecated methods were removed and many methods have changed.

v4 vs v5 Performance

Operation	v4 (Ops/s)	v5 (Ops/s)	Speed Improvement
Event Handling
Event invoke	462,637	57,068,479	~123x faster
Event on	666,207	4,310,638	~6x faster
Event once	295,046	4,418,975	~14x faster
Elements selector
Simple selector	--	--	~4.5x faster
Complex selector	--	--	~2x faster

Getting started

Add LS to your web app or site with

<!-- Note this imports *all* default parts and components. -->
<script src="https://cdn.extragon.cloud/ls/5.0.0/*/index.min.js"></script>
<link href="https://cdn.extragon.cloud/ls/5.0.0/*/index.min.css" rel="stylesheet">

And you can start using LS right away!

// Make LS-Tiny's HTMLElement custom methods available globally (use with caution!)
LS.prototypeTiny()

const myDiv = LS.Create({
  inner: [N("img", { width: 120, src: "https://lstv.space/assets/image/prism_light.webp" }), "<br> Hello world!"],
  class: "myDiv"
})

document.body.add(myDiv)

Creating components

You can register components to use across your code!

LS.LoadComponent(class myComponent extends LS.Component {
  constructor() {
    super()
  }
}, { global: true })

const instance = new LS.myComponent()

// Events are available on all components by default
instance.on("event", console.log)
instance.invoke("event", "Hello world!")

Note

Components are no longer stored uniquely with an ID in LS version 5 and up - previously, you were required to supply an ID when creating an instance and LS would manage instances for you. This is no longer the case and you need to manage your own component references now.

Hosting

You can either simply use the static files in /dist/, but if you want version management, on-the-fly code compression, and tree-shaking modules from an URL, you can host the API in /backend/api.js, which is the same API used by the official ExtraGon CDN links.

To host it, you will need akeno on your server.