@composi/core:

• Install
• Render
• Props
• Events
• Lifecycle
• Hydration
• State
• Fragment
• CDN

Install

Composi/core is Small

When you install @composi/core you are only adding 2KB to your final project's JavaScript. That means a simple Hello World app's JavaScript will be only 2KB. Composi's small size means it loads quickly, even on old phones with poor connections. Despite its small size, @composi/core offers a lot of functionality to create complex and powerful applications. This means most of the JavaScript your project needs to load will be code you wrote, not library bloat. In the world of mobile and PWAs, small is beautiful.

No Install

The best way to get up and running with @composi/core is to create a new project with @composi/create-composi-app. Read the documentation for create-composi-app to learn how to get up and running fast.

To use @composi/core, you need to import it. A project create with @composi/create-composi-app already has a file--app.js--with core imported. But if you want to create a new file for a component that uses JSX, you'll need to import the h function from @composi/core.

import { h } from '@composi/core'
// Define your component here:

If you're creating a module that does return JSX, then you do not need to import the h function.

Once you've created a new project with @composi/create-composi-app, read about render and other documentation in this section to learn how to use @composi/core.

In the Browser

You can use @composi/core in the browser without an install or build process. Just include the distribution versions with a script tag:

<script src='https://unpkg.com/@composi/core@latest/dist/composi.js'></script>
<script src='https://unpkg.com/@composi/datastore@latest/dist/datastore.js'></script>
<script src='https://unpkg.com/@composi/fragment@latest/dist/fragment.js'></script>
<script>
  const { h, render } = composi
  const { DataStore } = datastore
  // No need to capture Fragment in variable since it comes in as a global.

  function ListItems(data) {
    return (
      Fragment(
        null,
        {
          data.map(item => h('ul', {}, item))
        }
      )
    )
  }
  const things = ['Apples', 'Shoes', 'Computers']
  function List(data) {
    return (
      h('ul', {class: 'list'}, ListItems(data))
    )
  }
  render(List(things), 'body')
</script>

When you import Composi like this, you can't use JSX but instead have to use the h function to define the markup.