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

Overview

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

    You might also like...
    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

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

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

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

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

    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.

    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

    ⚡️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

    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

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

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

    Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.
    Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

    Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

    Comments
    • Bump vite from 2.6.13 to 2.9.13

      Bump vite from 2.6.13 to 2.9.13

      Bumps vite from 2.6.13 to 2.9.13.

      Release notes

      Sourced from vite's releases.

      [email protected]

      Please refer to CHANGELOG.md for details.

      [email protected]

      Please refer to CHANGELOG.md for details.

      [email protected]

      Please refer to CHANGELOG.md for details.

      [email protected]

      Please refer to CHANGELOG.md for details.

      [email protected]

      Please refer to CHANGELOG.md for details.

      Changelog

      Sourced from vite's changelog.

      2.9.13 (2022-06-27)

      2.9.12 (2022-06-10)

      • fix: outdated optimized dep removed from module graph (#8534) (c0d6c60), closes #8534

      2.9.11 (2022-06-10)

      2.9.10 (2022-06-06)

      2.9.9 (2022-05-11)

      2.9.8 (2022-05-04)

      ... (truncated)

      Commits
      Maintainer changes

      This version was pushed to npm by vitebot, a new releaser for vite since your current version.


      Dependabot compatibility score

      Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


      Dependabot commands and options

      You can trigger Dependabot actions by commenting on this PR:

      • @dependabot rebase will rebase this PR
      • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
      • @dependabot merge will merge this PR after your CI passes on it
      • @dependabot squash and merge will squash and merge this PR after your CI passes on it
      • @dependabot cancel merge will cancel a previously requested merge and block automerging
      • @dependabot reopen will reopen this PR if it is closed
      • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
      • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
      • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
      • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
      • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
      • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
      • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

      You can disable automated security fix PRs for this repo from the Security Alerts page.

      dependencies 
      opened by dependabot[bot] 0
    Owner
    Max Base
    Open Source Maintainer. Full-Time Open-Sourcerer. Full-stack programmer. In the path of a real computer engineer... (Compiler enthusiast)
    Max Base
    🌟 DataFormsJS 🌟 A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

    ?? DataFormsJS ?? A minimal JavaScript Framework, standalone React and Web Components, and JSX Compiler for rapid development of high quality websites and single page applications.

    DataFormsJS 156 Dec 8, 2022
    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.

    Edward Tanguay 1 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

    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

    marmelab 21.3k Jan 6, 2023
    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

    waldo.vision 35 Nov 12, 2021
    Ethereum Boilerplates 480 Jan 6, 2023
    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

    Orange 8 Dec 15, 2022
    The Full-stack Framework for React and other in Deno.

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

    Aleph.js 5k Jan 5, 2023
    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.

    Joe 1 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

    Noah Grant 75 Jun 24, 2022
    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

    Simon Y. Blackwell 6 Dec 30, 2022