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

vite-plugin-uniapp-generics

v0.0.2

Published

a minprogram componentGenerics plugin for uniapp3

Downloads

2

Readme

how to use

install

  • 仅支持uni-cli 3.0+
$ npm i vite-plugin-uniapp-generics -D
  • vite.config.js 添加插件
import uni from '@dcloudio/vite-plugin-uni';
import generic from 'vite-plugin-uniapp-generics';
export default defineConfig({
  ...
  plugins: [
    uni(),
    generic(),
  ],
});

父组件(定义抽象节点)

说明

  • 在自定义的component下添加generic标识即可
<自定义component名 generic />

demo

<!-- father-generic.vue -->
<template>
    <view class="content">
        <view>generic</view>
        <view v-for="(val, index) in list" :key="index">
            <beforeGeneric generic :index="index" :name="'myname-'+val" @tapInside="handleTap" />
        </view>

        <afterGeneric generic="true" :age="21" name="myname-after" />
        <!-- 仅会验证generic参数,后面添加任意参数都不影响-->
    </view>
</template>

组合组件(使用抽象节点)

说明

  • 在父组件中通过generic:传入对应的generic标识和需要传入的组件
  • 遵循小程序中的写法限制,仅允许传入自定义组件。
<父组件名 
    generic:对应的generic组件名A="传入的子组件" 
    generic:对应的generic组件名B="传入的子组件" 
></父组件名>

demo

<!-- combine-generic.vue -->
<template>
	<view class="content">
        <view>***** generic ***** </view>
        <ceshiGenetic 
            generic:beforeGeneric="childComp1" 
            generic:afterGeneric="childComp2"
        ></ceshiGenetic>
        <view>***** end slot ***** </view>
	</view>
</template>

<script>
import childComp1 from '...';
import childComp2 from '...';

export default {
  components: {
    childComp1,
    childComp2,
  },
}
</script>

why to use

slot在小程序中的限制

  1. v-for中使用slot会怎样?
  • 仅会渲染出v-for中的首条内容,后面的子组件不会被渲染。
  1. slot并不支持v-for 需求:更强大的slot

slot 本身应该是属于父组件的一部分,它能使用的数据是父组件数据而不是子组件数据。如果要定制子组件的“某些部分”的话,应该不是使用 slot,而是使用抽象节点

  1. slot不支持父组件传递数据
  • 这个目前uniapptaro都是静态编译的时候劫持数据,并在运行时结合vue3的响应式更新机制解决。

taro3为什么可以结合v-forslot

  • 推断taro3中是结合wxs动态的生成wxml文件,因此对wxml文件来说,slot结构可以平铺输出,处理遍历slot导致的问题(未看源码验证)
  • 但这种设计可能会导致wxml需要频繁的重新生成,造成一定的性能问题和意料之外的bug

插件实现原理

原理

  1. 结合抽象节点的使用说明,抽象出适合vue的写法(参考上方使用说明)
  2. uniapp里的节点属性,除了白名单中的组件和白名单的props,其余都会被劫持到vue的运行时数据处理中,导致属性失效,因此需要在编译前通过白名单prop添加标识,文件输出阶段结合标识重组成微信小程序所需结构即可。

generic 入参限制

使用是相对遵循小程序原生写法,因此在组合组件的时候,generic入参仅支持传组件名,所以不能再组合组件的位置给generic组件入参。举个例子

  • slot 可以在组合组件/父组件定义位置入参
    // compA.vue 定义 slot,并且传入参数
    <view>
        <slot name="header" height="180" />
    </view>

    // 组合组件 中 可以给 slot 入参
    <compA>
        <template #header="{ height }">
            <childComp age="10" :height="height" />
        </template>
    </compA>
  • generic 只能在 定义组件的位置入参
    // compB.vue 定义 generic,并且传入参数
    <view>
        <genericB :age="21" name="myname-after" />
    </view>

    // 组合组件 中, 不能给传入 generic 的组件入参
    <compB 
        generic:genericB="childComp" 
    ></compB>

todo

  • 替换 u-i 为专用节点
  • 其他小程序中的验证
    • [x] 微信
    • [x] 手q
    • [ ] 快手
    • [ ] other...
  • sourcemap https://rollupjs.org/guide/en/#source-code-transformations
  • hbuilder 支持