https://github.com/lxsmnsyc/stellis
a no-VDOM JSX framework for SSR.
https://github.com/lxsmnsyc/stellis
Last synced: about 2 months ago
JSON representation
a no-VDOM JSX framework for SSR.
- Host: GitHub
- URL: https://github.com/lxsmnsyc/stellis
- Owner: lxsmnsyc
- License: mit
- Created: 2023-02-07T13:30:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-19T09:27:35.000Z (over 1 year ago)
- Last Synced: 2025-03-27T15:18:40.000Z (2 months ago)
- Language: TypeScript
- Size: 382 KB
- Stars: 32
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stellis
> A no-VDOM, JSX framework for SSR
[](https://www.npmjs.com/package/stellis) [](https://github.com/airbnb/javascript)
### Install
```bash
npm install --save stellis
```
```bash
yarn add stellis
```
```bash
pnpm add stellis
```
## Setup for classic JSX
### Comment pragmas (Babel, Typescript, ESBuild etc.)
- Automatic runtime
```js
/* @jsxRuntime automatic */
/* @jsxImportSource stellis */
```
- Classic runtime
```js
/* @jsxRuntime classic */
/* @jsx h */
/* @jsxFrag Fragment */
import { h, Fragment } from 'stellis';
```
### Typescript
Reference: https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx
- Automatic runtime
```json
{
"compilerOptions": {
"jsx": "react-jsx", // or "react-jsxdev"
"jsxImportSource": "stellis",
}
}
```
- Classic runtime
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
```
```js
import { h, Fragment } from 'stellis';
```
### ESBuild
Reference: https://esbuild.github.io/api/#transformation
- Automatic runtime
- CLI
```bash
esbuild --jsx=automatic --jsx-import-source="stellis" --jsx-dev
```
- Options
```js
const option = {
jsx: 'automatic',
jsxDev: true | false,
jsxImportSource: 'stellis',
};
```
- Classic runtime (as options)
- CLI
```bash
esbuild --jsx=transform --jsx-factory=h --jsx-fragment=Fragment
```
- Options
```js
const option = {
jsx: 'transform',
jsxFactory: 'h',
jsxFragment: 'Fragment',
};
```
## Setup for optimized JSX
### Babel
Stellis uses [Babel](https://babeljs.io/) to transform your JSX and is provided in the form a plugin exported through `stellis/babel`.
### Integrations
- Rollup (SOON)
- Vite (SOON)
- ESBuild (SOON)
## Usage
### Rendering JSX
```js
import { render } from 'stellis';
const result = await render(
Hello World
);
console.log(result); // Hello World
```
Stellis JSX is unlike your usual, React-like JSX:
- Stellis has no VDOM
- The babel compiler will always generate optimized templates from the JSX
- Stellis' attributes are closer to HTML
- React introduced some properties like `className`, `htmlFor` and `readOnly` to be closer to DOM than HTML, which is the opposite of Stellis, where you can write `class`, `html` and `readonly`.
- Rendering is always async
### Writing your first component
```js
function Message({ greeting, receiver }) {
return
{greeting}, {receiver}
;
}
const result = await render(
); //
Hello World
```
### Async components
```js
async function Profile({ id }) {
const user = await getUser(id);
return ;
}
```
```js
async function Profile({ id }) {
return ;
}
```
### Attributes
#### `class` and `class:` directives
```js
Hello
Array
Object
Nested
```
```js
Hello
Another Example
```
#### `style` and `style:` directives
```js
Red Heading
Red Heading 2
```
#### `set:html`
Sets the raw HTML content of the given element. Always takes priority over `children`.
```js
```
### Built-in Components
#### `ErrorBoundary`/``
Attempts to render `children`. If it receives an error, `fallback` is called with the received error and the result is rendered instead.
```js
import { ErrorBoundary, render } from 'stellis';
function FailingComponent() {
throw new Error('Example');
}
const result = await render(
<>
Error: {error.name}
Message: {error.message}
>}
>
);
console.log(result);
// Output: Error: Error
Message: Example
```
#### `Fragment`/``
Same behavior as `<>>` except this allows raw HTML output with `set:html`
```js
```
#### `Comment`/``
Allow inserting HTML comments
```js
// Output:
```
#### `Dynamic`
```js
import { Dynamic, render } from 'stellis';
function Example({ as, children }) {
return {children};
}
const result = await render(
Hello World
);
console.log(result);
// Output:
Hello World
```
### Context API
```js
import { createContext, setContext, getContext, render } from 'stellis';
const message = createContext('Hello World');
function Parent({ children }) {
setContext(message, 'Bonjour World');
return children;
}
function Child() {
return
{getContext(message)}
; // Hello World
}
const result = await render(
<>
>
);
console.log(result);
// Output
//
Bonjour World
Hello World
```
### Stellis meta
Built-in components that renders after the markup has resolved. Both `` and `` has the types `"pre"` and `"post"` which defines where the children are going to be injected.
#### `Head`/``
```js
Hello World
```
#### `Body`/``
```js
```
## Sponsors
## License
MIT © [lxsmnsyc](https://github.com/lxsmnsyc)