JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1743
  • Score
    100M100P100Q96801F
  • License MIT

A modern JavaScript framework for building user interfaces with reactive state, composition API, and built-in performance optimizations

Package Exports

  • @kalxjs/core
  • @kalxjs/core/browser
  • @kalxjs/core/component/js-component
  • @kalxjs/core/composition
  • @kalxjs/core/renderer
  • @kalxjs/core/styles
  • @kalxjs/core/template

Readme

kalxjs Core

Next-generation core package for building high-performance web applications with kalxjs.

Features

  • Signal-Based Reactivity: Fine-grained reactivity with automatic dependency tracking
  • Server Components: First-class SSR support with hydration
  • Typed Components: Full TypeScript support with type inference
  • Suspense Integration: Async data loading and code splitting
  • Error Boundaries: Graceful error handling
  • Static Analysis: Tree-shakeable APIs and dead code elimination
  • Concurrent Rendering: Non-blocking UI updates
  • Automatic Batching: Smart update scheduling

Installation

npm install @kalxjs-framework/runtime @kalxjs-framework/compiler

Modern Usage

import { defineComponent, signal, computed } from '@kalxjs-framework/runtime'

// Create signals for reactive state
const count = signal(0)
const doubled = computed(() => count() * 2)

// Modern component with TypeScript
const Counter = defineComponent<{
  initial: number
  onChange?: (value: number) => void
}>({
  props: {
    initial: { type: Number, required: true },
    onChange: Function
  },

  setup(props, { emit }) {
    const count = signal(props.initial)
    
    function increment() {
      count.update(n => n + 1)
      emit('onChange', count())
    }

    return () => (
      <div class="counter">
        <h1>Counter Example</h1>
        <p>Count: {count()}</p>
        <p>Doubled: {doubled()}</p>
        <button onClick={increment}>Increment</button>
      </div>
    )
  }
})

Advanced Features

Server Components

// Server Component
const AsyncData = defineServerComponent(async () => {
  const data = await fetchData()
  return <DataDisplay data={data} />
})

// Client Entry
const App = () => (
  <Suspense fallback={<Loading />}>
    <AsyncData />
  </Suspense>
)

Performance Optimizations

import { lazy, memo, useTransition } from '@kalxjs-framework/runtime'

// Lazy loading
const LazyComponent = lazy(() => import('./Heavy'))

// Memoization
const Pure = memo(({ data }) => <div>{data}</div>)

// Concurrent updates
const [isPending, startTransition] = useTransition()
startTransition(() => {
  // Non-blocking update
  heavyOperation()
})

Type System

import { Component, PropType } from '@kalxjs-framework/runtime'

interface Props {
  items: string[]
  onSelect: (item: string) => void
}

const List: Component<Props> = defineComponent({
  props: {
    items: Array as PropType<string[]>,
    onSelect: Function as PropType<(item: string) => void>
  },
  // ...
})

API Documentation

Reactivity

  • signal(value): Create a reactive signal
  • computed(getter): Create a computed signal
  • effect(fn): Run a function reactively

Component System

  • defineComponent(options): Define a component
  • defineServerComponent(factory): Define a server component

Rendering

  • h(type, props, ...children): Create virtual DOM nodes
  • lazy(factory): Lazy load a component
  • memo(component): Memoize a component

Application

  • createApp(options): Create a new application instance
    • app.mount(el): Mount the application
    • app.unmount(): Unmount the application
    • app.use(plugin, options?): Use a plugin
    • app.component(name, component): Register a global component
    • app.provide(key, value): Provide a value to all components

License

MIT