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

@dhlx/text-template

v0.0.2

Published

The `template` function is a customizable templating engine that takes a string with embedded template expressions, parses it, and returns a function that can render the template with dynamic data.

Downloads

265

Readme

Text-Template 模板引擎

template 函数是一个自定义的模板引擎,它接收包含模板表达式的字符串,解析后返回一个函数,可以通过动态数据来渲染模板内容。

功能特性

  • 文本插值:从数据对象中直接插入变量值。
  • 条件渲染:根据条件动态渲染内容。
  • 循环:遍历数组,生成重复内容。
  • 多余空白删除:自动去除块内容周围的多余空格或换行符。

安装

npm install @dhlx/text-template

示例

import { template } from '@dhlx/text-template'

const tmpl = template(`
  {{#is_loggedIn}}
    欢迎,{{username}}!
    {{#each items for item}}
      项目: {{item}}
    {{/each}}
  {{/is_loggedIn}}
`)

const result = tmpl({
  is_loggedIn: true,
  username: 'Alice',
  items: ['苹果', '香蕉', '樱桃']
})

console.log(result)
// 期望输出:
// 欢迎,Alice!
// 项目: 苹果
// 项目: 香蕉
// 项目: 樱桃

使用方法

基本用法

template 函数接收模板字符串作为输入,并返回一个渲染函数。渲染函数接受一个数据对象,并使用数据生成最终的输出字符串。

const renderFunction = template(templateString);
const output = renderFunction(dataObject);

支持的语法

  1. 文本插值:使用 {{ 变量名 }} 语法插入变量值。
const tmpl = template('你好,{{username}}!')
const result = tmpl({ username: 'Alice' })
// 输出:"你好,Alice!"
  1. 条件语句:使用 {{#is_条件}} ... {{/is_条件}} 语法有条件地包含内容。
const tmpl = template(`
  {{#is_loggedIn}}
    欢迎,{{username}}!
  {{/is_loggedIn}}
`)
const result = tmpl({ is_loggedIn: true, username: 'Alice' })
// 输出:"欢迎,Alice!"
  1. 循环语句:使用 {{#each 数组名 for item名}} ... {{/each}} 语法来循环渲染数组中的内容。
const tmpl = template(`
  {{#each items for item}}
    项目: {{item}}
  {{/each}}
`)
const result = tmpl({ items: ['苹果', '香蕉', '樱桃'] })
// 输出:
// 项目: 苹果
// 项目: 香蕉
// 项目: 樱桃

函数

template<T extends {}>(str: string)

  • 参数
  1. str: string - 包含文本、条件和循环的模板字符串。
  • 返回值 返回一个渲染函数,该函数接收一个数据对象并返回生成的字符串。

示例

const tmpl = template('你好,{{username}}!')
const result = tmpl({ username: 'Alice' })
console.log(result) // 输出:"你好,Alice!"

工作原理

  1. 词法分析:将模板字符串解析为 tokens,识别文本、条件、循环和变量。
  2. AST 解析:将 tokens 转换为抽象语法树(AST)。
  3. 语法树求值:遍历 AST 并基于数据生成内容。

错误处理

当以下情况发生时可能会出现错误:

  • 条件或循环标签未正确嵌套。

  • 数据中缺少某些引用(例如,{{username}} 未提供 username 数据)。

  • 在这些情况下,evaluateAst 会跳过无效引用,但输出可能不完整。建议在传递数据前进行验证。

许可证

MIT License. 详见 LICENSE 文件。