https://github.com/basemax/mithrilts-jsx

Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.
https://github.com/basemax/mithrilts-jsx

javascript js jsx jsx-renderer jsx-syntax mithril mithril-template mithriljs mithriljs-template ts typescript vite vite-template vitejs vitets

Last synced: about 22 hours ago
JSON representation

Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.

• Host: GitHub
• URL: https://github.com/basemax/mithrilts-jsx
• Owner: BaseMax
• License: gpl-3.0
• Created: 2021-11-07T19:43:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-03T17:51:51.000Z (10 months ago)
• Last Synced: 2025-02-04T07:15:40.044Z (6 days ago)
• Topics: javascript, js, jsx, jsx-renderer, jsx-syntax, mithril, mithril-template, mithriljs, mithriljs-template, ts, typescript, vite, vite-template, vitejs, vitets
• Language: TypeScript
• Homepage: https://basemax.github.io/MithrilTS-JSX/dist/
• Size: 129 KB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mithril TS(Type script) JSX

Create a SPA project using Mithril JS framework and design layout by JSX syntax and use Typescript and Vite for build system.

### Why MithrilJS with JSX?

If you already know MithrilJS, you have to write the tempalte and layout in HybridScript way and you cannot do that in such a way like ReactJS.

So in this example we are going to create a simple project with **Mithril** framework but with a JSX way.

## Features

- TypeScript (TS)

- Support **JSX** syntax

- Write **CSS** styles for each component in a seperate file, so it's easy to manage style conflicting

- Auto build system (**Vite** is really fast and perfect system)

- Use **MithrilJS** and what we love to use for what we are building

[![Mithril-JS/Type script with support of JSX syntax](preview.png)](https://basemax.github.io/MithrilTS-JSX/dist/)

**First component:** a counter which you can increase a number between 0 and infinity :)

**Second component:** you can add name of your friends and its work dynamically.

## Example component

```typescript

import m from "mithril"

import classes from "./Friends.module.css"

const Name = (elm) => {

    return {

        view: () => {

        return (

            


                {elm.attrs.name}

            

        )}

    }

}


export const Friends = () => {

    let names = []

    let field_name = ""

    const add_friend = () => {

        field_name = field_name.trim()

        if(field_name !== "")

            names.push(field_name)

        field_name = ""

    }

    const nameTyping = (e) => {

        console.log(e.keyCode, e.target.value);

        if(e.key === 'Enter' || e.keyCode === 13) {

            add_friend()

            e.target.value = ""

        }

        else {

            field_name = e.target.value

        }

    }

    return {

        view: () => {

        return (

            

                
Friends

                 nameTyping(e)} value={field_name} />

                 add_friend()}>Insert

                


                    {names.map(name =>

                        

                    )}

                

            

        )},

    }

}

```

### Using


- `$ npm install`

- `$ npm run dev`

- `$ npm run build`

- `$ npm run preview`

### Credit

Thank you from **Arthur Clemens**, and **Kevin Fiol** for helping me to config a Build system correctly. Now I have really a good feel while it's possible to config JSX syntax inside MithrilJS library on front of TypeScript which is a good tool for big project.

© Copyright 2021, Max Base