elem

An asset manager based on custom elements

Elem

An tiny and easy to use web framework based on making custom HTML elements.

Creating Custom Elements

An elem is just a folder who's name is the tag name.

ui
  widget
    widget.js
    widget.html.jade
    widget.css.styl
    hello.txt
  window
    jquery.js
  • Files with extensions like widget.html.jadeare caught by the pre-processor and become widget.html.

  • When a <widget>appears on the page elem/loaderwill pull down all of the files in the widgetfolder.

  • If there is a widget.htmlthe element's inner html will be replaced with it.

  • If there is a widget.cssthe css will be added to the document.

  • If there is a widget.jsit will be treated like a node module. Here we can export a function that applies the behavior. This function is called for every instance of <widget>and passed an object containing all of the file contents of the folder.

widget.js:

module.exports = function widget() {
  $(this).find('.hello').text('hello');
}

Giving the function two arguments makes it async, delaying rendering and loading child elements:

module.exports = function widget(done) {
  var self = this;

  $.get('/content.txt', function(text) {
    $(self).text(text);
    done();
  });
}

Special Folders

  • */libis recursively pre-loaded before the element is applied. Put anything you want to require() in here so it is available when the element implementation.

  • */componentsare parsed as installed componentsand can be required globally.

  • */windowis recursively pre-loaded but executed without a module.exports.

    This is where you would put classic global libraries like jQuery.

    You could also component install component/jqueryand require('jquery'). But jQuery was always designed to extend window. Using it as a module breaks plugins.

    Everything in windowis run in top-down order of directory depth. So to make jQuery plugins run after jQuery, you can put them in a window/jquery-plugins/folder.

Express/Connect Middleware

var express = require('express');
var elem = require('elem');
var server = express();
var app = elem(__dirname+'/app');

var production = process.env.NODE_ENV == 'production';

server.use('/app', ui.loader({production: production}));

// Remove this route and include
// <script src="/app/loader.js">
// in a template if you don't want to use the bootloader.
app.get('*', ui.boot('/app'));

app.listen(3000);

Package Management

Elem has has built-in supports for component.

$ npm install -g component
$ component install visionmedia/page.js

body.js

var page = require('page');

You can use libraries from bower or npm if you need to by symlinking:

bower install jquery
ln -s bower_components/jquery/dist/jquery.js frontend/window/

Client-side templating

widget
  widget.js
  template.js.jade

widget.js

var template = require('template');

module.exports = function(render) {
  var locals = {};
  render( template(locals) );
}

Client-side routing

component install page
body.html
hello.js

body.html

<hello></hello>

hello.html

<h1>Hi!</h1>
<img src="reallybigimage.jpg">

hello.js

var page = require('page');

module.exports = function(files, render) {
  // hello.html will not be injected
  // until the route is matched
  page('/hello', render);
}

Page Layouts

... can be deleted. Try making a dynamic <body> element instead.

- app
  - frontend
    - body
      - body.html.jade
      - body.css.styl
    - header
      - header.html.jade
      - header.css.styl
      - header.js
    - page
      - page.css.styl
      - page.js
    - window
      - jquery.js

Pre-processor

The pre-processor keys off of sequential file extensions. e.g. any template.html.jade will envoke the .html.jade pre-processor and result in a static template.html build that is exposed to the element.

The standard pre-processors elem supports are:

  • .html.jade
  • .css.styl
  • .css.less

To add additional pre-processors, or override the built-in ones:

frontend.prep('.html.md', function(str, done){
  marked(str, done);
});

Note that if you override a built-in pre-processor, it will only apply to your own elements. Not installed ones.

By supporting these standard pre-processors element authors are able to use their templating language of choice without incuring a setup penalty. Since they are just pre-processors so there is no overhead.

If you think there is a pre-processor that should be standard make a pull request. The only requirement is that it be a well-known standard format.

No Headaches

Elem is built with the premise that your development and debugging workflow can never be impeded by the build process. In development mode, it actually enhances your workflow making it clear what code is responsible for what is happening on the page.

Development Mode:

  1. All files are requested independently.
  2. File names and line numbers are preserved.
  3. CSS is linked to the page, not injected.
  4. The final DOM is annotated with HTML comments that indicate how and where the markup was generated.
  5. Files are rebuilt on request, and only when they have changed.

elem(1)

elem(1)is provided as a convenience for developing isolated elements. It is not meant to be a real web server.

$ npm install -g elem
Usage: elem [options] <file ...>

Commands:

  index [options]        build index

Options:

  -h, --help     output usage information
  -V, --version  output the version number
elem create widget
elem run widget

License

MIT

Repository

https://github.com/em/elem


上一篇:livescript-middleware
下一篇:appcd-fs

相关推荐

  • 🍊仿Element自定义Vue组件库

    (/public/upload/643b972fb2ebd2e6272ff8b16712b205) 前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。

    24 天前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vuecli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    3 个月前
  • 踩坑记之基于Vue+Element+Koa实现云上存储

    前言最近在做项目等时候,需要处理图片,表格,文本等多种格式的文件到数据库,用传统等方法进行处理既繁琐又比较麻烦,所以第一次尝试使用云上存储等方式来实现。比较了阿里云和腾讯云之类的网站之后,最终选择七牛...

    3 个月前
  • 跟着element学习写组件

    如何使用vue写一个组件库 组件以插件的形式引入使用,当然,也可以直接在页面引入组件文件,两者按需使用。 安装插件: vue.install源码: 通过源码可知,vue不会重复安装同...

    1 年前
  • 超详细 ElementUI 源码分析 —— Input

    最近在学习 Vue 框架,想深入了解一下组件化开发以及封装组件库的思想,而 ElementUI 作为这方面做的最好的也是最常用的组件库,它的源码一定有很多值得我们去学习的地方,所以去 ElementU...

    4 个月前
  • 财产&apos;价值&apos;不在型“价值存在;HtmlElement“;

    Bjarke FreundHansen(https://stackoverflow.com/users/81398/bjarkefreundhansen)提出了一个问题:The property 'v...

    2 年前
  • 详解JavaScript 中getElementsByName在IE中的注意事项

    详解JavaScript 中getElementsByName在IE中的注意事项 前言: 在IE59中是没有实现js的 getElementsByClassName()方法,但是实现了getEle...

    3 年前

官方社区

扫码加入 JavaScript 社区