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

weex-transformer

v0.4.6

Published

Weex DSL transformer

Downloads

433

Readme

Weex DSL Transformer

NPM version Build status Downloads

<template> + <style> + <script> + <element>

Install

npm install weex-transformer

Usage

CLI tool

  Usage: transformer [options] <file...>

  Options:

    -h, --help               output usage information
    -V, --version            output the version number
    -g, --logLevel [value]   specify log output level - `NOTE`, `WARNING`, `ERROR`, `OFF` (default: `NOTE`, equivalent to `ALL`)
    -e, --isEntry [value]    whether is an entry module which has `bootstrap` (default: true)
    -l, --oldFormat [value]  whether to transform to old format (default: false)
    -o, --output [path]      the output file dirname

API

transform(name, code, path, elements, config)

var transformer = require('weex-transformer')
var output = transformer.transform('foo', '/* code here */', '.', {})
params
  • name: string, current bundle name
  • code: string, source code
  • path: string optional, useful when find custom component in a certain path
  • elements: object optional, existed custom component map
  • config: object optional
    • logLevel: specify log output level - NOTE (default, equivalent to ALL), WARNING, ERROR, OFF, aranging from low to high
    • isEntry: whether is an entry module which has bootstrap (default: true)
    • oldFormat: whether to transform to old format (default: false)
returns
  • an object with keys
    • result: string, all custom components define() and final bootstrap()
    • logs: array, corresponding warning & error logs

transformOld(...)

same params and different output format for old style: register(name, options) and render(name, data)

transforming content

  • template: JavaScript Object by parse5
  • style: JSON Object by css
  • script: JavaScript AST with template, deps, style by esprima
  • element: string code map for deeply parsing

workflow

  1. get template, style, script, elements
  2. parse and validate style by styler
  3. parse and validate template by templater and get deps
  4. parse script by scripter
  5. join template, style and script to build a module
  6. collect element code map
  7. output define() string code, deps, element code map and logs
  8. find deps code by name from element code map first and from file system for second
  9. join all deps code together recursively
  10. find all required 3rd party javascript and bundle them
  11. append bootstrap() string code and bundle at last