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

py-revue

v0.3.1

Published

Python framework for building ML & data science web apps.

Downloads

29

Readme

revue - Python Vue Binding

revue 期望提供一个前端 Vue 后端 Flask,快速开发标注工具 / 可视化页面的最佳实践,它可以帮助你

  1. 生成一个静态页面托管在 oss 上
  2. 生成一个标注工具,把比较重的任务放在后端计算

Usage

项目模板

vue 组件默认放在 python 文件同级的 components 目录下,可以通过 Vue 类的 component_folder 参数控制

目录结构参考 examples 目录下的模板

数据

通过 app.data 可以把用户自定义数据绑定在页面上,要求数据可以被 json 序列化,绑定数据有两种用法,例如:

  1. 直接赋值提供数据

    app.data['foo'] = 'bar'

    前端直接通过 props 访问

  2. 通过装饰器定义数据,被装饰器包裹的函数没有参数

    @app.data
    def data():
        return {}

    数据会被懒加载,在前端 component 中通过函数调用来访问

    this.data().then((value) => console.log(value))

函数调用

通过 app.method 可以用户自定义函数,要求输入输出都是可以被 json 序列化的数据,例如:

@app.method
def func(value: int) -> int:
    return value + 1

在前端 component 中通过函数调用来访问

this.$revue.func(1).then(value => console.log(value))

多页面

通过 app.route 可以用户自定义路由,要求返回一个 Page 对象,例如:

from revue import Page

@app.route('/user/<username>')
def func(username: str) -> dict:
    return Page(root='user.vue')

路由规则,参考 Flask 的定义

模块引用 & 插件系统

通过 app.use 可以使用指定插件,合法的插件包括:

  1. 字符串,代表拼接到 html 页面上的一段代码,例如:'<script src="https://unpkg.com/vue-session/index.unpkg.js"></script>'
  2. 可执行对象(callable),返回一个字符串,代表拼接到 html 页面上的一段代码,例如:lambda options: '<script src="https://unpkg.com/vue-session/index.unpkg.js"></script>'
  3. 一个 Plugin 对象的子类,需要实现 install 方法

通过 app.use(ComponentFolder("path/to/components")) 可以额外添加一个 components 目录,可以把一些公用前端组件放在一个目录中,通过这种方式添加进来,参考 examples/addComponentFolder 添加的 components 目录可以是一个 s3 路径,但目前只支持放在 s3://pages-oss/

编译 & 发布

  1. revue 使用前端编译,一般情况下开发时无需安装 npm 环境,只需要安装 revue
  2. app.run() 可以打开一个服务,app.publish() 可以生成静态文件并托管在 oss 上
  3. app.cli() 可以提供一个包含常用操作的 CLI
  4. 对于前端性能比较敏感的工具,编写好的前端组件可以通过命令行工具 revue build PACKAGE / revue release PACKAGE VERSION 预先编译好,并传到 oss 上,加快页面加载速度,但编译时需要安装 npm + webpack 环境,通常你并不需要这么做

已知问题

  1. 支持 vue / vue@next / react,但三种实现不同,会有不同的已知问题
  2. 引入第三方包比较麻烦,需要找 UMD 打包,并看 js 代码中模块注册到 window 的名字,也许可以通过引入 amd 或 commonjs 来解决