@lightspeed-js/core

Lightspeed is a compile-first framework for islands of reactivity: pages are static HTML generated at build time, and only the parts that need JavaScript hydrate. Components are single-file .lsp files with <view>, <logic> and <style> blocks, compiled by a Vite plugin.

Early release (0.x). The API may change between minor versions.

Install

npm install @lightspeed-js/core
npm install -D vite typescript

Works with Vite 6, 7 and 8.

Set up

vite.config.ts:

import { defineConfig } from 'vite'
import { lightspeedPlugin } from '@lightspeed-js/core/vite'

export default defineConfig({
  plugins: [lightspeedPlugin({ typescript: true })],
})

src/main.ts:

import { createLightspeedApp } from '@lightspeed-js/core'
import { components } from 'virtual:lightspeed/components'

const app = createLightspeedApp()
app.useComponents(components)
app.hydrate()

Pages are .html files at the project root (or in routes/) that use components as tags, e.g. <Header />. Components live in src/components/*.lsp.

A component

<view>
  <button class="counter" @click="state.count++">Clicked {{ state.count }} times</button>
</view>

<logic lang="ts">
import { reactive } from '@lightspeed-js/core'

const state = reactive({ count: 0 })
</logic>

<style>
  .counter { padding: 0.5rem 1rem; }
</style>

Entry points

| Import | For | | --- | --- | | @lightspeed-js/core | Runtime: createLightspeedApp, reactive, shared, defineProps, lifecycle hooks | | @lightspeed-js/core/vite | The Vite plugin | | @lightspeed-js/core/ssg | Static site generation | | @lightspeed-js/core/compile | Compile components outside a Vite build (e.g. tests, a CMS) |

Upgrading from the unpublished lightspeed package

Code importing 'lightspeed' keeps working: component logic accepts both names, and the Vite plugin maps 'lightspeed' to @lightspeed-js/core. Only vite.config.ts must change, because Node loads it before the plugin runs: import from '@lightspeed-js/core/vite'. New code should use @lightspeed-js/core.

Licence

MIT