How to use jsx-runtime

• CMD

npm install @jugar/jsx-runtime

• tsconfig.json

{
  "compilerOptions": {
    /** JSX */
    "jsx": "preserve",
    "jsxFactory": "html5",
    "jsxFragmentFactory": "fragment",
    "jsxImportSource": "@jugar"
  }
}

• vite-env.d.ts

/// <reference types="@jugar/jsx-runtime" />

• vite.config.ts

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    jsx: 'transform',
    jsxFactory: 'html5',
    jsxFragment: 'fragment',
    jsxInject: `import { html5, fragment } from '@jugar/jsx-runtime'\n\n`,
  },
})

How to use signal

import { createSignal } from '@jugar/jsx-runtime'

export function HelloWorld() {
  const count = createSignal(0)

  return (
    <div className="jsx-runtime-demo">
      <button
        onclick={() => {
          count.set(count.get() + 1)
        }}
        ref={(elm) => {
          count.relay(elm, 'title')
        }}
        type="button"
      >
        Increase
      </button>
      <input
        id="count"
        name="count"
        ref={(elm) => {
          count.sync(elm)
        }}
        type="number"
        value={count.get()}
      />
      <span
        ref={(elm) => {
          count.relay(elm, 'text', 'Current: ${self}')
        }}
      >
        {count.get()}
      </span>
    </div>
  )
}

Methods

| Name | Description | Parameters | | ----- | ----------------------------------------------------------- | --------------------------- | | get | Get Currrent State With Optional Template | template | | refer | Refer Element Event Data Into State | element, eventName | | relay | Relay State Into Element's Property With Optional Template | element, propName, template | | set | Set State | next | | sync | Bind State With <input> by value Property | element |