Support or implement ivi-html

[igotfr]

Support or implement ivi-html as an alternative to hyperscript

https://github.com/localvoid/ivi#quick-start

Resources

https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions

[xania]

Is it so one does not need JSX to create views? in xania one could use jsx.createElement as the h for intrinsic elements, and because custom Components are nothing special compared to functions you could just call it as follows:

const h = jsx.createElement
// intrinsic element
const div = h("div");
// custom component
<MyComponent /> === h(MyComponent) === MyComponent()

Just to draw the comparison with React, calling component as function is different than using JSX / React.createElement

// React
<MyComponent /> !== MyComponent()

[igotfr]

Is it so one does not need JSX to create views? in xania one could use jsx.createElement as the h for intrinsic elements, and because custom Components are nothing special compared to functions you could just call it as follows:

const h = jsx.createElement
// intrinsic element
const div = h("div");
// custom component
<MyComponent /> === h(MyComponent) === MyComponent()

Just to draw the comparison with React, calling component as function is different than using JSX / React.createElement

// React
<MyComponent /> !== MyComponent()

@xania

export default function App() {
  return div('texto') // This expression is not callable. No constituent of type 'JsxElement | Promise<JsxElement> is callable'
}

[xania]

JSX in Xania does not need precompilation like in Solid. Could you explain what are general benefits for supporting hyperscript api specifically in Xania?

[igotfr]

@xania the example you gave me worked with h, the following works:

const jsx = jsxFactory();

const h = jsx.createElement;

export default function App() {
  return h('div', {}, 'lek')
}

but const div = h('div') doesn't works with the error message: This expression is not callable. No constituent of type 'JsxElement | Promise<JsxElement> is callable'

const jsx = jsxFactory();

const h = jsx.createElement;
const div = h('div');

export default function App() {
  return div('texto') // This expression is not callable. No constituent of type 'JsxElement | Promise<JsxElement> is callable'
}

how to fix it? I don't want precompilation, just use HTML tags as functions

[igotfr]

@xania const div = (props?: any, ...children: TemplateInput[]): JsxElement | Promise<JsxElement> | undefined => jsx.createElement('div', props, children); is the only way?

[xania]

that's a way, not nescassary the only way. that's why I asked wether there is value in adding support for hyper api and what would be the use cases for this support.

[xania]

let me check for a moment

[xania]

try this out:

npm i @xania/[email protected]

import { intrinsic } from '@xania/view';

const div = intrinsic("div");

div({ class: "container" }, child1, child2, ...otherchildren);

An improvement could be to add built-in factories for all possible tags