A custom JSX implementation designed for zSnout.
npm install @zsnout/jsxA custom JSX implementation designed for zSnout.
- Basic Usage
- Creating JSX Components
- JavaScript API
- [jsx(component: string, props: object, ...children: any[]): zQuery<HTMLElement>](#jsxcomponent-string-props-object-children-any-zqueryhtmlelement)
- [jsx(component: (props: object) => zQuery, props: object, ...children: any[]): zQuery<HTMLElement>](#jsxcomponent-props-object--zquery-props-object-children-any-zqueryhtmlelement)
- $(selector: string): zQuery<HTMLElement>
- $(query: zQuery<T>): zQuery<T>
- [$<T extends HTMLElement>(...els: T[]): zQuery<T>](#t-extends-htmlelementels-t-zqueryt)
- zQuery<T extends HTMLElement>
- zQuery.each(callback: (el: T) => void): this
- zQuery.text(): string
- zQuery.text(content: string): this
- zQuery.html(): string
- zQuery.html(content: string): this
- zQuery.render(): this
- [zQuery.elements(): T[]](#zqueryelements-t)
- zQuery.empty(): this
- [zQuery.append(...els: (HTMLElement | zQuery<HTMLElement>)[]): this](#zqueryappendels-htmlelement--zqueryhtmlelement-this)
- zQuery.appendTo(item: zQuery<HTMLElement> | HTMLElement | string): this
- zQuery.on(event: string, callback: (event: Event) => void, options?: AddEventListenerOptions): this
- zQuery.once(event: string, callback: (event: Event) => void, options?: AddEventListenerOptions): this
- zQuery.off(event: string, callback: (event: Event) => void, options?: EventListenerOptions): this
- zQuery.parents(): zQuery<HTMLElement>
- zQuery.parent(): zQuery<HTMLElement>
- zQuery.where(selector: string): zQuery<T>
- zQuery.is(selector: string): boolean
- zQuery.className(): string
- zQuery.className(className: string): this
- zQuery.hasClass(className: string): boolean
- zQuery.addClass(className: string): this
- zQuery.removeClass(className: string): this
- TypeScript API
- [type JSX<T extends keyof HTMLElements> = zQuery<HTMLElements\[T]>](#type-jsxt-extends-keyof-htmlelements--zqueryhtmlelementst)
- type JSX<T extends (props: any) => zQuery<HTMLElement>> = T extends zQuery<infer U> ? U : never
- namespace JSX
- type JSX.Element = zQuery<globalThis.Element>
- type Boolish = boolean | "true" | "false"
- type CSSStyles = Omit<CSSStyleDeclaration, "parentRule" | "length">
- interface BaseAttributes
- interface ElementAttributes
- interface Attributes extends BaseAttributes
- type ElementChildrenAttribute = { children: {} }
- type IntrinsicElements = JSX.BaseAttributes
This module includes a single client file assets/jsx.ts that adds jsx and $ functions to the global scope, the former being the JSX implementation. It also adds a hidden class, zQuery, that is a custom implementation of jQuery designed for zSnout.
To use it, simply import it in your index.ts file using import "@zsnout/jsx";.
To write a simple JSX component, create a function beginning with a capital letter that returns a JSX element.
Note that internally, all JSX components are zQueries, so you must use those methods to manipulate the element.
``tsx
function HelloWorld() {
return Hello world!;
}
function HelloWorld() {
let div =
div.text("Hello world!");
}
let component =
`
Props are passed to the function in the first argument.
You may specify required and optional props.
`tsx
function HelloPerson({ name }: { name: string }) {
return Hello {name}!;
}
let component =
`
Children are passed to the function as a prop named children.
When no children are passed, this prop is undefined.
When one child is passed, this prop will be the value of that child.
If multiple children are passed, this prop will be an array of those children.
`tsx
function HelloPerson({ children }: { children: string }) {
return Hello {children}!;
}
let component =
let component2 =
`
_More accurate type definitions are available in the definition files._
Creates a new HTML element and returns it as a zQuery.
Returns a zQuery containing the created JSX element.
- component: string - The HTML tag to create.props: object
- - Properties to add to the HTML tag.children: any[]
- - Children to append to the created tag.
_More accurate type definitions are available in the definition files._
Creates a new JSX component and returns it.
Returns a zQuery containing the created JSX element.
- component: string - The component to use.props: object
- - The props to pass to the component.children: any[]
- - The children to pass to the component.
_More accurate type definitions are available in the definition files._
Selects elements matching a CSS selector from the DOM.
Returns a zQuery containing elements matching the selector.
- selector: string - The CSS selector to use.
_More accurate type definitions are available in the definition files._
Returns the given zQuery.
- query: zQuery - The zQuery to return.
Creates a zQuery of the given elements.
Returns a zQuery containing the given elements.
- els: T[] - The elements to use.
A class used for DOM manipulation.
Calls a function on each element in this zQuery.
Returns the current zQuery, to allow for chaining.
- callback: (el: T) => void - The function to call on each element.
Gets the text content of the first element in this zQuery.
Sets the text content of all elements in this zQuery.
Returns the current zQuery, to allow for chaining.
- content: string - The text to fill elements with.
Gets the inner HTML of the first element in this zQuery.
Sets the inner HTML of all elements in this zQuery.
Returns the current zQuery, to allow for chaining.
- content: string - The HTML content to fill elements with.
Moves all elements in a zQuery into another element.
Returns the zQuery that elements were moved into.
- query: zQuery - The zQuery to move the elements to.
Gets the elements of this zQuery.
Returns an array containing the elements of this zQuery.
Empties all elements in this zQuery.
Returns the current zQuery, to allow for chaining.
Appends elements to the first item in this zQuery.
Returns the current zQuery, to allow for chaining.
- els: (HTMLElement | zQuery - The elements to append.
Appends items in this zQuery to another element.
Returns the current zQuery, to allow for chaining.
- item: zQuery - The item to append to. Can be a selector, zQuery, or HTMLElement.
_More accurate type definitions are available in the definition files._
Adds an event listener to this zQuery.
Returns the current zQuery, to allow for chaining.
- event: string - The event to listen for.callback: (event: Event) => void
- - A callback that will be called when the event is triggered.options?: AddEventListenerOptions
- - Options to add to the event listener.
_More accurate type definitions are available in the definition files._
Adds a one-time event listener to this zQuery.
Returns the current zQuery, to allow for chaining.
- event: string - The event to listen for.callback: (event: Event) => void
- - A callback that will be called when the event is triggered.options?: AddEventListenerOptions
- - Options to add to the event listener.
Remove an event listener from this zQuery.
Returns the current zQuery, to allow for chaining.
- event: string - The event that was listened to.callback: (event: Event) => void
- - The callback attatched to the event listener.options: EventListenerOptions
- - Options to pass to the event listener.
Gets the parents of the first element in this zQuery.
Returns a zQuery containing the parents of the first element in the current zQuery.
Gets the parent of the first element in this zQuery.
Returns a zQuery containing the parent of the first element in the current zQuery.
_More accurate type definitions are available in the definition files._
Filters elements in this zQuery by a CSS selector.
Returns a zQuery containing elements matching the CSS selector.
- selector: string - The CSS selector to filter by.
_More accurate type definitions are available in the definition files._
Checks if every element in this zQuery matches a selector.
Returns a boolean indicating whether all of the elements in this zQuery match the selector.
- selector: string - The CSS selector to match.
Gets the classes on the first element in a zQuery.
Returns the class name of the first element in this zQuery.
Sets the class name of each element in this zQuery.
Returns the current zQuery, to allow for chaining.
- className: string - The class name to set each element to.
Checks if every element in this zQuery has a class.
Returns a boolean indicating whether the class is present.
- className: string - The name of the class to check for.
Adds a class to each element in this zQuery.
Returns the current zQuery, to allow for chaining.
- className: string - The name of the class to add.
Removes a class from each element in this zQuery.
Returns the current zQuery, to allow for chaining.
- className: string - The name of the class to remove.
_More accurate type definitions are available in the definition files._
_In reality, this type alias uses complex extends clauses, not overloads._
Gets the result of creating a JSX element using a specific tag.
- T: keyof HTMLElements - The name of the tag to use.
_More accurate type definitions are available in the definition files._
_In reality, this type alias uses complex extends clauses, not overloads._
Gets the result of creating a JSX element using a specific component.
- T: keyof HTMLElements - The name of the component to use.
The main JSX namespace.
The output of a JSX component or tag.
Represents a boolean or a stringified boolean.
Represents every CSS style that can be added using the style property.
_More accurate type definitions are available in the definition files._
Base attributes that any JSX element (not component) can have.
_More accurate type definitions are available in the definition files._
Attributes that specific types of JSX elements can have.
_More accurate type definitions are available in the definition files._
All possible attributes a JSX element could have.
Essentially a union of the values of ElementAttributes and BaseAttributes.
The key for children in the props` attribute of a component.
_More accurate type definitions are available in the definition files._
A list of all attributes that can be added to intrinsic elements.