mercury - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #typescript #llm #golang #deep-learning #linux #docker #nodejs #java #windows #kubernetes #vue #openai

mercury

(★ 2,810)

A truly modular frontend framework

파일 탐색기

최종 버전 다운로드 (.zip)

- browserify-editor.js
- build.js
- dist.js
- example-server.js
- example-tasks.js
- modules-docs.js
- mercury.js
- - dom-delegator.md
  - geval.md
  - main-loop.md
  - observ-array.md
  - observ-struct.md
  - observ-varhash.md
  - observ.md
  - README.md
  - value-event.md
  - vdom-thunk.md
  - vdom.md
  - virtual-dom.md
  - virtual-hyperscript.md
  - vtree.md
- faq.md
- hooks.md
- introduction.md
- life-cycles.md
- mercury-component.md
- thunks.md
- widgets.md
- - render.js
  - style.css
- - browser.js
  - shapes.js
- - browser.js
  - index.html
  - package.json
  - README.md
  - render.js
- - focus-hook.js
  - reset-hook.js
  - safe-hook.js
  - weakmap-event.js
- - browser.js
  - login-component-render.js
  - login-component.js
  - styles.js
- - app.js
  - browser.js
  - style.css
- - browser.js
  - number-component.js
- - browser.js
  - render.js
  - server.js
  - test.js
- - bg.png
  - browser.js
  - style.css
  - todo-app.js
  - todo-item.js
- - README.md
- async-state.js
- bmi-counter.js
- canvas.js
- count.js
- examples-styles.css
- index.html
- real-dom.js
- shared-state.js
- - embed-component.js
  - load-hook.js
- - intercept-mercury-app.js
- bmi-counter.js
- count.js
- index.js
- package.json
- shared-state.js
- ssr.js
- synthetic-events.js
- time-travel.js
.editorconfig
.gitignore
.jshintignore
.travis.yml
.zuul.yml
CONTRIBUTION.md
index.js
LICENCE
package.json
README.md
ROADMAP.md
svg.js
time-travel.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Raynos/mercury

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd mercury

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm test

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# mercury

# Deprecated: Not actively being worked on.

Instead [`tonic`](https://github.com/optoolco/tonic) and https://tonic.technology/ are actively being worked on.

`mercury` has some interesting ideas but they are not very practical at scale.
`tonic` is a lightweigth component system on top of web components that leverages
the browsers HTML parser for the heavy lifting instead of `virtual-dom`.

It comes with a set of [`components`](https://github.com/optoolco/components) which help with building
apps more quickly by having some re-usable components out of the box.

## Description

A truly modular frontend framework

To understand what I mean by truly modular just [read the source](https://github.com/Raynos/mercury/blob/master/index.js)

## Examples

### Hello world

```js
'use strict';

var document = require('global/document');
var hg = require('mercury');
var h = require('mercury').h;

function App() {
    return hg.state({
        value: hg.value(0),
        channels: {
            clicks: incrementCounter
        }
    });
}

function incrementCounter(state) {
    state.value.set(state.value() + 1);
}

App.render = function render(state) {
    return h('div.counter', [
        'The state ', h('code', 'clickCount'),
        ' has value: ' + state.value + '.', h('input.button', {
            type: 'button',
            value: 'Click me!',
            'ev-click': hg.send(state.channels.clicks)
        })
    ]);
};

hg.app(document.body, App(), App.render);
```

### Basic Examples

- [count](examples/count.js)
 - [shared-state](examples/shared-state.js)
 - [bmi-counter](examples/bmi-counter.js)
 - [canvas](examples/canvas.js)
 - [async-state](examples/async-state.js)
 - [real-dom](examples/real-dom.js)

### Intermediate Examples

- [TodoMVC](examples/todomvc)
 - [markdown editor](examples/markdown)
 - [number-input](examples/number-input)
 - [serverside rendering](examples/server-rendering)
 - [login form](examples/login-form)
 - [geometry](examples/geometry)
 - [2048 (wip)](https://github.com/Raynos/mercury/tree/2048-wip/examples/2048)
 - [github issues (wip)](https://github.com/Raynos/mercury/tree/github-issues/examples/github-issues-viewer)
 - [hot reloading with browserify or webpack](examples/hot-reload)

### Unidirectional examples

The following examples demonstrate how you can mix & match
  mercury with other frameworks. This is possible because mercury
  is fundamentally modular.

**Disclaimer:** The following are neither "good" nor "bad" ideas.
  Your milage may vary on using these ideas

- [Backbone + Mercury](examples/unidirectional/backbone)
 - [Immutable + Mercury](examples/unidirectional/immutable)
 - [JSX + Mercury](examples/unidirectional/jsx)

## Motivation

### Mercury vs React

`mercury` is similar to react, however it's larger in scope,
  it is better compared against [`om`][om] or
  [`quiescent`][quiescent]

- mercury leverages [`virtual-dom`][virtual-dom] which uses
    an immutable vdom structure
 - mercury comes with [`observ-struct`][observ-struct] which uses
    immutable data for your state atom
 - mercury is truly modular, you can trivially swap out
    subsets of it for other modules
 - mercury source code itself is maintainable, the modules it
    uses are all small, well tested and well documented.
    You should not be afraid to use mercury in production
    as it's easy to maintain & fix.
 - mercury encourages zero dom manipulation in your application code. As far as your application is concerned
    elements do not exist. This means you don't need to reference DOM elements when rendering or when handling
    events
 - mercury is compact, it's 11kb min.gzip.js, that's smaller than backbone.
 - mercury strongly encourages FRP techniques and discourages local mutable state.
 - mercury is highly performant, it's faster than React / Om / ember+htmlbars in multiple benchmarks
    [TodoMVC benchmark](http://matt-esch.github.io/mercury-perf/)\
    [animation benchmark](http://jsfiddle.net/sVPQL/11/)
    [TodoMVC benchmark source](https://github.com/matt-esch/mercury-perf)
 - mercury comes with FP features like time-travel / easy undo out of the box.
 - mercury is lean, it's an weekend's read at 2.5kloc. (virtual-dom is 1.1kloc, an evening's read.)
    compared to react which is almost 20kloc (a month's read)

## Modules

`mercury` is a small glue layer that composes a set of modules
  that solves a subset of the frontend problem.

If `mercury` is not ideal for your needs, you should check out
  the individual modules and see if you can re-use something.

Alternatively if the default set of modules in `mercury` doesn't
  work for you, you can just require other modules. It's possible
  to for example, swap out [`vtree`][vtree] with
  [`react`][react] or swap out [`observ-struct`][observ-struct]
  with [`backbone`][backbone]

See [the modules README](docs/modules/README.md) for more
  information.

## Documentation

See the [documentation folder](docs)

### FAQ

See the [FAQ document](docs/faq.md)

### API

WIP. In lieu of documentation please see examples :(

## Installation

`npm install mercury`

## Development

If you want to develop on `mercury` you can clone the code

```sh
git clone git@github.com:Raynos/mercury
cd mercury
npm install
npm test
```

### npm run tasks

- `npm test` runs the tests
 - `npm run jshint` will run jshint on the code
 - `npm run disc` will open discify (if globally installed)
 - `npm run build` will build the html assets for gh-pages
 - `npm run examples` will start a HTTP server that shows examples
 - `npm run dist` will create a distributed version of mercury
 - `npm run modules-docs` will (re)generate docs of mercury modules

## Inspirations

A lot of the philosophy and design of `mercury` is inspired by
  the following:

- [`react`][react] for documenting and explaining the concept
    of a virtual DOM and its diffing algorithm
 - [`om`][om] for explaining the concept and benefits of
    immutable state and time travel.
 - [`elm`][elm] for explaining the concept of FRP and having a
    reference implementation of FRP in JavaScript. I wrote a
    pre-cursor to `mercury` that was literally a
    re-implementation of [`elm`][elm] in javascript
    ([`graphics`][graphics])
 - [`reflex`][reflex] for demonstrating the techniques used to
    implement dynamic inputs.

## Contributors

- Raynos
 - Matt-Esch
 - neonstalwart
 - parshap
 - nrw
 - kumavis

## MIT Licenced

[1]: https://secure.travis-ci.org/Raynos/mercury.svg
  [2]: https://travis-ci.org/Raynos/mercury
  [3]: https://badge.fury.io/js/mercury.svg
  [4]: https://badge.fury.io/js/mercury
  [5]: http://img.shields.io/coveralls/Raynos/mercury.svg
  [6]: https://coveralls.io/r/Raynos/mercury
  [7]: https://gemnasium.com/Raynos/mercury.png
  [8]: https://gemnasium.com/Raynos/mercury
  [9]: https://david-dm.org/Raynos/mercury.svg
  [10]: https://david-dm.org/Raynos/mercury
  [11]: https://img.shields.io/badge/GITTER-join%20chat-green.svg
  [12]: https://gitter.im/Raynos/mercury
  [13]: https://badge-size.herokuapp.com/Raynos/mercury/master/dist/mercury.js
  [14]: https://badge-size.herokuapp.com/Raynos/mercury/master/dist/mercury.js

[graphics]: https://github.com/Raynos/graphics
  [elm]: https://github.com/elm-lang/Elm
  [react]: https://github.com/facebook/react
  [om]: https://github.com/swannodette/om
  [reflex]: https://github.com/Gozala/reflex
  [backbone]: https://github.com/jashkenas/backbone
  [quiescent]: https://github.com/levand/quiescent
  [virtual-dom]: https://github.com/Matt-Esch/virtual-dom
  [vtree]: https://github.com/Matt-Esch/virtual-dom/tree/master/vtree
  [vdom]: https://github.com/Matt-Esch/virtual-dom/tree/master/vdom
  [vdom-create-element]: https://github.com/Matt-Esch/virtual-dom/blob/master/vdom/create-element.js
  [vdom-patch]: https://github.com/Matt-Esch/virtual-dom/blob/master/vdom/patch.js
  [min-document]: https://github.com/Raynos/min-document
  [virtual-hyperscript]: https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript
  [main-loop]: https://github.com/Raynos/main-loop
  [vdom-thunk]: https://github.com/Raynos/vdom-thunk
  [observ]: https://github.com/Raynos/observ
  [observ-computed]: https://github.com/Raynos/observ/blob/master/computed.js
  [observ-struct]: https://github.com/Raynos/observ-struct
  [observ-array]: https://github.com/Raynos/observ-array
  [geval]: https://github.com/Raynos/geval
  [dom-delegator]: https://github.com/Raynos/dom-delegator
  [value-event]: https://github.com/Raynos/value-event