Mint 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Mint 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Mint 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Mint 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Mint 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 BSD
开发语言 Crystal 查看源码 »
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发
开源组织
地区 不详
提 交 者 局长
适用人群 未知
收录时间 2021-02-23

软件简介

Mint 是面向前端开发的编程语言,旨在从语言层面解决编写单页应用 (Single Page Application, SAP) 的常见问题。例如:

  • 可复用组件
  • 全局和局部状态处理
  • 同步和异步计算
  • 样式
  • 路由

Mint 可帮助开发者编写无错误、易于阅读和可维护的应用程序。

语法示例

样式

在 Mint 语言中,支持使用style块直接用 CSS 来为元素设置样式。

component TodoItem {
  property color = "#333"
  property label = ""
  property done = false

  style base {
    align-items: center;
    display: flex;
  }

  style label {
    font-weight: bold;
    color: #{color};
    flex: 1;

    if (done) {
      text-decoration: line-through;
    }
  }

  fun render {
    <div::base>
      <span::label>
        <{ label }>
      </span>

      <Icon.Checkmark/>
      <Icon.Trash/>
    </div>
  }
}

数据管理

Mint 语言的store包含并用于管理数据,store具有全局访问属性,并且可以连接到组件。当store的数据发生变化时,连接的组件会被重新渲染。

record Todo {
  label : String,
  done : Bool
}

store Todos {
  property items = [] of Todo

  fun add (todo : Todo) {
    next { items = Array.push(todo, items) }
  }

  fun delete (todo : Todo) {
    next { items = Array.delete(todo, items) }
  }
}

component TodoList {
  connect Todos exposing { add, delete }

  ...
}

路由

Mint 语言中的路由是一项语言特性而不是工具库,路由可在routes块中进行定义,并支持类型化的路径参数。

routes {
  / {
    Application.setPage(Page::Home)
  }

  /blog {
    Application.setPage(Page::Blog)
  }

  /blog/:slug (slug : String) {
    sequence {
      Posts.load(slug)
      Application.setPage(Page::Post)
    }
  }

  * {
    Application.setPage(Page::NotFound)
  }
}

与 JavaScript 的互操作性

使用`...`语法即可内嵌任何 JavaScript 代码。

module MyFunctions {
  fun alert(message : String) : Promise(Never, Void) {
    `
    (new Promise((resolve) => {
      alert(#{message})
      resolve()
    })()
    `
  }

  fun decode : Maybe(TodoItem) {
    try {
      object =
        `{ label: "Check out Mint!",
           done: false }`

      result =
        decode as TodoItem

      Maybe::Just(result)
    } catch {
      Maybe::Nothing()
    }
  }
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/03/02 11:45

mint-ui----mint-ui的基本使用

mint-ui的使用: 1、安装cnpm i mint-ui -S 或直接使用以下的cdn托管: <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> 2、安装后导入文件: import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' 3、注意:自定义组件绑定原生事件必须使用 .native 修饰符,只有button组件可以直接...

0
0
发表了博客
2019/03/19 22:41

org.apache.xerces.dom.ElementNSImpl.setUserData(Ljava/lang/String;Ljava/lang

HTTP Status 500 - Handler processing failed; nested exception is java.lang.AbstractMethodError: org.apache.xerces.dom.ElementNSImpl.setUserData(Ljava/lang/String;Ljava/lang/Object;Lorg/w3c/dom/UserDataHandler;)Ljava/lang/Object; type Exception report message Handler processing failed; nested exception is java.lang.AbstractMethodError: org.apache.xerces.dom.ElementNSImpl.setUserData(Ljava/lang/S...

0
0
发表于开发技能专区
2016/12/05 14:31

Commons Lang

Commons Lang The standard Java libraries fail to provide enough methods for manipulation of its core classes. Apache Commons Lang provides these extra methods. Lang provides a host of helper utilities for the java.lang API, notably String manipulation methods, basic numerical methods, object reflection, concurrency, creation and serialization and System properties. Additionally it contains basi...

0
0
发表了博客
2016/12/16 14:54

common-lang

StringUtils:提供了各种关于字符串操作的工具类 [API地址](http://commons.apache.org/proper/commons-lang/javadocs/api-2.6/org/apache/commons/lang/StringUtils.html)

0
0
发表于大前端专区
2016/09/09 16:51

lang属性

lang属性可指定标签范围内元素的语言种类。<html lang="en"> lang="en"——英语 lang="zh"——中文 lang="ja" ——日语 http://www.monmonkey.com/rumenpian/html/attr/lang.html

0
0
发表了博客
2018/08/13 20:06

Mint UI文档

Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一、Mint UI的安装和基本用法。 1.NPM :npm i mint-ui -S 建议使用npm进行安装,因为它可以与webpack无缝协作。 2.CDN:从unpkg.com/mint-ui获取最新版本,并在您的页面中导入JavaScript和CSS文件 <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- import JavaScript --> <script src="https://unpkg.com/mint-ui/lib/inde...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
4 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部