https://github.com/oscarotero/ssx

Fast and simple JSX library for server side
https://github.com/oscarotero/ssx

deno jsx

Last synced: 2 months ago
JSON representation

Fast and simple JSX library for server side

• Host: GitHub
• URL: https://github.com/oscarotero/ssx
• Owner: oscarotero
• License: mit
• Created: 2024-07-15T22:06:31.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-23T14:33:09.000Z (5 months ago)
• Last Synced: 2024-09-29T18:41:03.698Z (3 months ago)
• Topics: deno, jsx
• Language: TypeScript
• Homepage: https://deno.land/x/ssx
• Size: 69.3 KB
• Stars: 17
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SSX

JSX is terrible for frontend. But it's an acceptable way to create HTML code in

server side, specially if it's supported by default by TypeScript and Deno.

Most of the current JSX libraries are designed to work in server and client

sides. They do complicated things like a virtual DOM, reactivity, hooks,

hydration, events, etc, in order to create interactive user interfaces.

SSX is a minimal JSX library designed to be used ONLY in server side and output

plain HTML code.

- Created in TypeScript, for Deno.

- Very fast. It uses the

  [`precompile` option](https://deno.com/blog/v1.38#fastest-jsx-transform)

  available in Deno.

  > 7-20x faster rendering times and a 50% reduction in Garbage Collection

  > times.

- Designed to output HTML. It uses real HTML attributes (no more `className`).

- Great HTML documentation. Every element and property has a description and

  even links to [MDN documentation](https://developer.mozilla.org/). Types are

  generated using the data from

  [VSCode Custom Data](https://github.com/microsoft/vscode-custom-data).

- It supports async components (components returning a Promise).

- Allows to insert raw HTML code easily (without patronizing you).

- You can add the `` declaration.

## Configuration

In your `deno.json` file:

```json

{

  "compilerOptions": {

    "jsx": "precompile",

    "jsxImportSource": "ssx"

  },

  "imports": {

    "ssx/jsx-runtime": "https://deno.land/x/ssx/jsx-runtime.ts"

  }

}

```

## Example:

```jsx

// Main component

function Main() {

  return (

    

      

        

        
Example:

        

          Welcome to SSX

          


          {{ __html: "Raw HTML code" }}

        

      

    

  );

}


// Async component

async function Header(

  { name, children }: { name: string; children: JSX.Children },

) {

  const res = await fetch(

    `https://api.dictionaryapi.dev/api/v2/entries/en/${name}`,

  );

  const json = await res.json();

  return (

    <>

      
Hello {name}

      
Os: {Deno.build.os}

      


        Definition of {name}:{" "}

        {json[0]?.meanings[0]?.definitions[0]?.definition ||

          "Definition not found"}

      

      {children}

    >

  );

}


// String with the HTML code

console.log(await Main());

```

### Adding Doctype:

Any children content with the type `{ __html: string }` is considered raw HTML

code that won't be escaped. You can use it to add the ``

declaration (something not possible in other JSX libraries):

```html

{{ __html: "" }}

  ...

;

```