npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ds-render

v2.2.4

Published

render module for dysonshell

Downloads

23

Readme

@ds/render

installation

ccnpm i --save @ds/render

usage

var dsRender = require('@ds/render');
var app = require('express')();
var dsRenderMiddleware = dsRender.augmentApp(app, {
    appRoot: __dirname // 必须的
    appendMiddleware: false // 默认 false, 设置成 true 会添加返回的 middleware: app.use(dsRenderMiddleware)
});

除了 dsRender.augmentApp() 方法返回一个供 express app 使用的 middleware 外,其他方法均返回 promise

dsRender.getParsedPartials(appRoot[, viewPath])

#{appRoot}/partials 下的 **/*.html 文件做成 Ractive.parse() 后的模板对象,返回的 object promise resolve 后为类似:

{
    a: {v:1,t:[/*...*/]}, // #{appRoot}/partials/a.html 解析后
    b.c.d: {v:1,t:[/*...*/]} //#{appRoot}/partials/b/c/d.html 解析后
}

如果把可选的 viewPath 给出如 #{appRoot}/ccc/account/views/home.html 则会到 #{componentRoot}/partials(#{componentRoot} 表示组件的根目录,本例中就是 #{appRoot}/ccc/account/)查找 partials,如存在 #{appRoot}/ccc/account/partials/ac.html 返回的对象会有 ac 这个 parsed partial,如果同时存在 #{appRoot}/partials/ac.html#{appRoot}/ccc/account/partials/ac.html,以组件的 partial 为优先。

dsRender.getParsedTemplate(filePath)

给出模板文件路径,返回 Ractive.parse() 后的模板对象(promise)。

以上两个方法是 @ds/render 的基础,返回的模板都会做资源路径的替换。

dsRender.augmentApp(app, opts)

用法在最前面,使用后,express middleware 里面的 res 对象会添加下列方法:

res.preRenderView(name)

会先到 #{componentRoot}/views 再到 #{appRoot}/views 查找模板文件,返回的 view 对象(promise)中有 view.templateview.partials

res.preRenderLocals(locals)

组合 app.locals (全局模板变量) app.locals.__proto__ (父 app 的全局模板变量) res.locals 和这里给进的 locals,locals 对象里的值可以是 promise 如

{
    a: promiseA,
    b: promiseB, // 第一层的 promise 会自动解决
    c: {
        pc: promiseInC // 这里的 promise 不会自动解决了
    }
}

返回的是 promise

res.rendr(name, locals)

使用前面两个方法生成 html,返回的是 promise

res.render(name, locals, fn)

覆盖(overwrite)了 express 里面的 res.render() 方法。