Skip to content

Commit

Permalink
bumped mithril version & added route distribution build
Browse files Browse the repository at this point in the history
  • Loading branch information
LeXofLeviafan committed Nov 3, 2022
1 parent 6b9692d commit 18184e4
Show file tree
Hide file tree
Showing 14 changed files with 4,394 additions and 93 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/perftest.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Performance tests

on:
push:
branches: [ "main" ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'yarn'
- run: yarn install --frozen-lockfile # optional, --immutable
- run: yarn perftest
7 changes: 6 additions & 1 deletion Cakefile
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

modules = ['util', 'atom', 'reagent', 're-frame']
deps = "mithril/mount,mithril/render,mithril/redraw,mithril/hyperscript"
depsRoute = "#{deps},mithril/route"

option '-o', '--outfile [FILE]', "output filename ('.min' is added automatically when minifying)"
option '-m', '--minify', "minify the bundle"
Expand All @@ -27,6 +28,9 @@ buildNodeps = (options) ->
buildStandalone = (options) ->
build {outfile: "dist/mreframe.js", modules, expose: deps, ...options}

buildRoute = (options) ->
build {outfile: "dist/mreframe-route.js", modules, expose: depsRoute, ...options}

task 'transpile', "transpile coffeescript files", ->
for dir in ['.', './src', './examples'] when fs.existsSync(dir)
for s in fs.readdirSync(dir) when s.match /\.coffee$/
Expand All @@ -37,9 +41,10 @@ task 'transpile', "transpile coffeescript files", ->
@

task 'build', "build a standalone bundle", buildStandalone
task 'build:route', "build with 'mithril/route' included", buildRoute
task 'build:nodeps', "build without including mithril dependencies", buildNodeps
task 'build:all', "build all bundles (regular and minified)", ->
for f in [buildStandalone, buildNodeps]
for f in [buildStandalone, buildNodeps, buildRoute]
f {}
f minify: on

Expand Down
12 changes: 10 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
[Homepage](https://lexofleviafan.github.io/mreframe)
[![Unit tests](https://github.com/LeXofLeviafan/mreframe/actions/workflows/test.yml/badge.svg)](https://github.com/LeXofLeviafan/mreframe/actions/workflows/test.yml)
[![Performance tests](https://github.com/LeXofLeviafan/mreframe/actions/workflows/perftest.yml/badge.svg)](https://github.com/LeXofLeviafan/mreframe/actions/workflows/perftest.yml)

`mreframe` is a plain JavaScript re-implementation of [`reagent`](http://reagent-project.github.io) and
[`re-frame`](https://day8.github.io/re-frame) libraries from [ClojureScript](https://clojurescript.org);
Expand All @@ -9,6 +10,7 @@ it's a mini-framework for single-page apps (using Mithril as the base renderer,
* _No language/stack requirement_ – you can use JS directly, or any language that transpiles into it as long as it has interop
* _Simple, data-centric API_ using native JS data structures and plain functions for rendering, event handling, and querying state
* Components, events and queries have _no need to expose their inner workings_ beyond the level of a simple function call
* _Improved performance of re-rendering large, complex UI_ by preventing recalculation of unchanged subtrees

Install: `npm i mreframe`/`yarn add mreframe` or `<script src="https://unpkg.com/mreframe/dist/mreframe.min.js"></script>`.

Expand Down Expand Up @@ -89,7 +91,9 @@ be found in the following Examples section, as well as in the API reference.
# Usage

Install the NPM package into a project with `npm i mreframe`/`yarn add mreframe`;
or, import as a script in webpage from a CDN: `<script src="https://unpkg.com/mreframe/dist/mreframe.min.js"></script>`.
or, import as a script in webpage from a CDN: `<script src="https://unpkg.com/mreframe/dist/mreframe.min.js"></script>`.
(If you want [routing](https://mithril.js.org/route.html) as well, use this:
`<script src="https://unpkg.com/mreframe/dist/mreframe-route.min.js"></script>`.)

Access in code by requiring either main module:
```js
Expand Down Expand Up @@ -123,9 +127,11 @@ For further information, see [API reference](#api-reference) below and the follo
like [Lodash](https://lodash.com) / [Ramda](https://ramdajs.com) (/ [Rambda](https://selfrefactor.github.io/rambda)).
* Q: How do I inject raw HTML?
A: If you absolutely have to, use [`m.trust`](https://mithril.js.org/trust.html).
In `dist/mreframe.min.js` it can be accessed as `require('mithril/hyperscript').trust()`.
* Q: What about routing?
A: Use [Mitrhil routing API](https://mithril.js.org/route.html).
* Q: But neither is available in `dist/mreframe.min.js`!
In `dist/mreframe-route.min.js` it can be accessed as `require('mithril/route')`.
* Q: What if I want to use a custom version Mithril (e.g. full distribution or a different version)?
A: If you're using JS files from CDN, pick `dist/mreframe-nodeps.min.js` instead, and load Mithril as a separate script;
then run [`rf._init`](docs/re-frame.md#_init-opts) to connect them.
* Q: Are there any third-party libraries (components etc.) I can use with this?
Expand All @@ -152,6 +158,8 @@ For further information, see [API reference](#api-reference) below and the follo
[[live]](https://lexofleviafan.github.io/mreframe/examples/re-frame.coffee.html)
* [Routing using `m.route` (from external Mithril bundle, connected via `_init`)](examples/route.wisp.html) (scripted in Wisp)
[[live]](https://lexofleviafan.github.io/mreframe/examples/route.wisp.html)
* [Routing using `mithril/route` (from `mreframe-route.js`)](examples/route.js.html) (scripted in JavaScript)
[[live]](https://lexofleviafan.github.io/mreframe/examples/route.js.html)
* [Rendering HTML from Reagent components using `mithril-node-render`](examples/node-render.coffee) (scripted in CoffeeScript)


Expand Down
Loading

0 comments on commit 18184e4

Please sign in to comment.