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

vue-overview-loader

v0.0.18

Published

webpack loader,能够处理 .vue|js|ts 文件,提取 vue 项目代码大纲,需要配合 vue-overview-loader-plugin 使用

Downloads

6

Readme

支持的语法

路由中

  • 支持 import() 导入组件,在用于显示数据的模板中实现的

其他 ts|js 文件

  • 参考 import、export 语法

vue中

  • 支持 option 组件、class 组件、<script setup> 组件
    • class
      • 不支持@Watch
      • 不支持@Ref
  • 不支持
    • vue option 中不支持解构语法
  • template
    • 支持:
      • 标签、{{}}、字符串注释
      • 注释支持多行
      • 支持解构
    • 标签:<div></div>
      • attrs
        • 不支持
          • 运算符::style="a+b"
          • 常量绑定::attr-a="'tw-m-2'"
          • 模板语法
        • 支持
          • 常量:class="tw-p-2"
          • 变量绑定::class="dataA"
          • 函数调用绑定::attr-b="getAttrB1(getAttrB2(dataA, dataB))"
            • 不支持:attr-b="getAttrB1(getAttrB2(dataA),getAttrB3(dataB))"
            • 临时:method\filter\extend\mixin\setup输出
          • 属性表达式绑定::attr-c="dataB.a"
          • filter绑定::attr-d="myClass | filterA | filterB"
          • v-if,v-else-if,v-else
          • v-for
            • (item,index) in forName 其中 forName 只支持变量
          • slot
          • slot-scope
          • v-slot
    • {{}}
      • 不支持
        • 运算符
        • 常量
        • 模板语法
        • 括号内注释
      • 支持
        • 变量绑定
        • 函数调用绑定
          • 支持{{ getAttrB1(getAttrB2(data, dataB)) }}
          • 不支持getAttrB1(getAttrB2(dataA),getAttrB3(dataB))
        • 属性表达式绑定
        • filter绑定
    • 字符串
  • script
    • class 组件
      • 一个属性只允许使用一个装饰器
    • props
      • 配置对象,只支持字面量定义
      • option 组件
        • 对象
          • default
          • type
            • PropType
          • required
        • 构造函数
        • 数组
      • class 组件
        • 装饰器实现
      • <script setup>
        • defineProps
          • 参数支持当前文档定义,不支持函数返回
          • withDefaults 第二个参数只持支字面量定义
    • name
      • options 组件
      • class 组件
        • @Component 参数中
      • <script setup>
        • 在另一个<script>的 options 中定义
    • extends
      • 只支持文件外引入
      • 优先级高于 mixins
      • option 组件
        • 配置对象
        • 不支持:构造函数(vue2)
      • class 组件
        • 通过 ClassComponent extends OtherComponent 实现
      • <script setup>
        • 在另一个<script>的 options 中定义
    • mixins
      • 只支持文件外引入
      • 优先级后面的覆盖前面的
      • options 组件
        • 配置数组
      • class 组件
        • 在 @Component 参数中传入
        • class 组件提供 mixin 这个方法 extend 多个组件,本质上是 extends 但是放在 mixins 中
      • <script setup>
        • 在另一个<script>的 options 中定义
    • components
      • 不支持 components:{[component.name]:component}
      • option 组件
        • 配置
      • class 组件
        • 在 @Component 参数中传入
      • <script setup>
        • 直接通过 import 获取
    • filters
      • 支持当前文件定义中的注释
      • 支持其他文件引入得注释
      • option 组件
        • 配置
      • class 组件
        • 在 @Component 参数中传入
      • <script setup>
        • 在另一个<script>的 options 中定义
    • 生命周期
      • option 组件
        • 不带 on
      • class 组件
        • 不带 on
      • <script setup>
        • 带 on
        • 能够整合当前文件多次调用中的注释
        • 单独保存在元数据 lifecycleHookMap 中
    • provide
      • option 组件
        • 对象
        • 函数
          • key为变量
          • key为常量
          • value 为 this 的属性引用[s]: this.provideSymbolFrom.a
          • value 为常量provideB: "provideB"
          • 函数只允许有一个 return
      • class 组件
        • @ProvideReactive、@Provide
        • 为了保持和其他类型组件统一,只会提取装饰器的注释
      • <script setup>
        • provide("provideName", dataA)
        • 参数1可以是字符串或变量名
        • 参数2可以是字符串或变量名
    • inject
      • options 组件
        • 数组
        • 对象
          • from 支持字符串和 Symbol
          • default
            • 直接获取代码片段,因为引用类型需要工厂函数
            • 不允许使用变量名
      • class 组件
        • @Inject@injectReactive
          • 装饰器参数同 options 对象配置的 value
      • <script setup>
        • inject 没有存在 injectMap 中而是在 setupMap 中
    • emits
      • 会通过 emits 校验函数的参数获取 emit 抛出数据的类型
      • 会通过 emit,$emit 调用的参数类型补充 emit 抛出数据的类型
      • option 组件
        • 数组
        • 对象
      • class 组件
        • PropSync\ModelSync\VModel\Emit
        • @Emit 只支持一个 return
      • <script setup>
        • defineEmits
        • 只支持 defineEmits 定义时的注释,不支持emit('emitA',value)的注释
    • methods
      • option 组件
        • 对象
      • class 组件
        • 非生命周期的方法
      • <script setup>
        • 没有存在 methodMap 中而是在 setupMap 中
    • setup
      • option 组件
        • 只允许有一个return
      • class 组件、<script setup>
        • 不支持
    • computed
      • 注释由3种组合、all:,get:,set:
      • option 组件
        • 对象 get,set
        • 函数
      • class 组件
        • PropSync/ModelSync/get set 函数
      • <script setup>
        • 没有存在 computedMap 中而是在 setupMap 中
        • 没有all,get,set这些注释前缀
    • data
      • 支持当前文件的初始化方法dataB: getDataB(),getDataB 的定义需要在当前文件中
      • 支持对象递归dataA:{a:''}=>能够获取data.a的注释,初始化方法中也支持
      • option 组件
        • 对象
        • 函数
          • 函数只允许只有一个return
      • class 组件
        • 没有装饰器的属性
        • Provide,ProvideReactive
      • <script setup>
        • 没有存在 dataMap 中而是在 setupMap 中
    • import、export 语法
      • import 导入路径为 @ 或 . 开头的才会被认为是内部代码才会进行处理
        • node_module 和 routes.include 匹配的代码都不进行处理
      • import a from ''
      • import {default as b} from ''
      • import {a} from '' 不能用于导入.vue组件
      • import * as a from '' 不能用于导入.vue组件
      • import {a as b} from '' 不能用于导入.vue组件
      • export const a={}
      • export default {} ExportDefaultDeclaration
      • export {a}
      • export {a as b}
      • export {a} from ''

待办事项

  • 根据 ts 获取具体类型
  • class 多个装饰器
  • require.context => import