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

Last update: Feb 22, 2022

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

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

{ 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} />
      {names.map(name => )}
    )}, } } ">
    import m from "mithril"
    import classes from "./Friends.module.css"
    
    const Name = (elm) => {
        return {
            view: () => {
            return (
                <li>
                    {elm.attrs.name}
                </li>
            )}
        }
    }
    
    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 (
                <section className={classes.section}>
                    <h2 className={classes.sectionTitle}>Friends</h2>
                    <input type="text" onkeyup={(e) => nameTyping(e)} value={field_name} />
                    <button onclick={() => add_friend()}>Insert</button>
                    <ul>
                        {names.map(name =>
                            <Name name={name} />
                        )}
                    </ul>
                </section>
            )},
        }
    }

    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

    GitHub

    https://github.com/BaseMax/MithrilTS-JSX
    You might also like...

    A light-weight, comprehensive, reactive framework for business logic and when things change.

    watchlight.dev v1.0.15 beta For when things change. A light-weight, comprehensive, reactive framework for business logic and when things change. In

    May 13, 2022

    The React Framework

    Next.js Getting Started Visit https://nextjs.org/learn to get started with Next.js. Documentation Visit https://nextjs.org/docs to view the full docum

    Jun 19, 2022

    ⚡️The Fullstack React Framework — built on Next.js

    ⚡️The Fullstack React Framework — built on Next.js

    ⚡️The Fullstack React Framework — built on Next.js

    Jun 16, 2022

    🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    Jun 23, 2022

    A most advanced ssr framework support React/Vue2/Vue3 on Earth that implemented serverless-side render specification.

    A most advanced ssr framework support React/Vue2/Vue3 on Earth that implemented serverless-side render specification.

    A most advanced ssr framework support React/Vue2/Vue3 on Earth that implemented serverless-side render specification.

    Jun 18, 2022

    web3-react🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    Jun 24, 2022

    ⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

    ⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

    ⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

    Oct 12, 2021

    A web framework for building virtual reality experiences (VR Web)

    A web framework for building virtual reality experiences (VR Web)

    Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift

    Mar 18, 2022

    A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

    Nov 1, 2021
    single-spa.js is an Open Source framework for bringing together multiple JavaScript microfrontends in a frontend application.

    single-spa.js is an Open Source framework for bringing together multiple JavaScript microfrontends in a frontend application.

    Feb 13, 2022
    Datapod for React - a framework which extends create-react-app to enables you to quickly build data-driven sites
    Datapod for React - a framework which extends create-react-app to enables you to quickly build data-driven sites

    This is a framework which extends create-react-app to enables you to quickly build data-driven sites. This code is generated from the Datapod-for-React Core application.

    Mar 19, 2022
    A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
    A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

    react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

    Jun 26, 2022
    Web App using react framework

    waldo.vision This is the website for waldo-anticheat :D Libraries used: React React-router React-router-hash-link React-helmet TODO: improve this list

    Nov 12, 2021
    A system combining classical traces dumping tools and a ReactJS web app for live 3D graph rendering of streamed graph data derived from traces
    A system combining classical traces dumping tools and a ReactJS web app for live 3D graph rendering of streamed graph data derived from traces

    The DynaGraph framework: a system combining classical traces dumping tools (i.e. the tshark tool and Firefox's Network Monitor component) and a ReactJS web app for live 3D graph rendering of streamed graph data derived from traces

    Apr 28, 2022
    Create beautfiful custom applications using 100ms' React SDK.
    Create beautfiful custom applications using 100ms' React SDK.

    Create beautfiful custom applications using 100ms' React SDK.

    Jun 17, 2022
    The Full-stack Framework for React and other in Deno.

    The Full-stack Framework for React and other in Deno.

    Jun 17, 2022
    A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript.
    A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript.

    A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript. It leverages React, inspired by re-frame.

    Mar 2, 2022
    Declarative data-fetching and caching framework for REST APIs with React
    Declarative data-fetching and caching framework for REST APIs with React

    Declarative data-fetching and caching framework for REST APIs with React

    Jun 12, 2022