cbvirtua 1.0.7 → 1.0.9

package/README.md

@@ -0,0 +1,270 @@
+# vue-presetup
+
+> 仅适用于 Vue3
+
+vue-presetup 可以将指定的 Vue 组件进行提前加载，并在组件“准备好”后再进行下一步操作，
+
+如从当前路由 /foo 跳转至 /bar 时，可以先提前在 /foo 页面加载 /bar 对应的组件，随后再进行路由切换
+
+## 安装
+
+通过 npm 安装
+
+```shell
+npm install vue-presetup -S
+```
+
+通过 yarn 安装
+
+```shell
+yarn add vue-presetup -S
+```
+
+通过 pnpm 安装
+
+```shell
+pnpm install vue-presetup -S
+```
+
+## 基础使用示例
+
+有一个简单的使用示例，这个示例是摘自 [playground](./playground) 中的
+
+1. 有以下的路由配置
+
+   **router.ts**
+
+   ```ts
+   import { createRouter, createWebHashHistory } from 'vue-router'
+   import Foo from './views/Foo.vue'
+   import Bar from './views/Bar.vue'
+   
+   const router = createRouter({
+     history: createWebHashHistory(),
+     routes: [
+       {
+         path: '/',
+         redirect: '/foo'
+       },
+       {
+         path: '/foo',
+         component: Foo
+       },
+       {
+         path: '/bar',
+         component: Bar
+       }
+     ]
+   })
+   
+   export default router
+   ```
+
+2. 在 App.vue 使用路由并放置 vue-presetup 需要的载体
+
+   **App.vue**
+
+   ```vue
+   <script setup lang="ts">
+   import { PresetupView } from 'vue-presetup'
+   </script>
+   
+   <template>
+     <RouterView v-slot="{ Component }">
+       <PresetupView :active="Component"></PresetupView>
+     </RouterView>
+   </template>
+   ```
+
+3. 在可能被提前加载的 /bar 组件需要做一些反馈，来告知当前组件什么时候准备好（实际情况可能是首屏数据加载好了啥的）
+
+   **Bar.vue**
+
+   ```vue
+   <script lang="ts" setup>
+   import { ref } from 'vue'
+   import { useContext } from 'vue-presetup'
+   
+   const context = useContext()
+   
+   window.setTimeout(() => {
+       // 在 1500ms 后，这个组件准备好了！
+       context.resolve()
+   }, 1500)
+   </script>
+   
+   <template>
+     <div class="Bar">
+       <h1>Bar.vue</h1>
+     </div>
+   </template>
+   ```
+
+4. 接下来，就可以实现在 /foo 中提前加载 /bar 对应的组件
+
+   **Foo.bar**
+
+   ```vue
+   <script lang="ts" setup>
+   import { ref } from 'vue'
+   import { useSetupComponent } from 'vue-presetup'
+   import router from '../router'
+   import Bar from './Bar.vue'
+   
+   const { setupComponent } = useSetupComponent()
+   
+   const go = async () => {
+     // 等待组件加载完成
+     await setupComponent(Bar)
+     router.push('/bar')
+   }
+   </script>
+   
+   <template>
+     <div class="Foo">
+       <h1>Foo.vue</h1>
+       <button @click="go">Go</ElButton>
+     </div>
+   </template>
+   ```
+
+## 与 Transition、KeepAlive 一起使用
+
+编辑上述示例中 **App.vue**
+
+```vue
+<script> /* ... */ </script>
+<template>
+  <RouterView v-slot="{ Component }">
+    <PresetupView :active="Component" v-slot="{ Component: Component2 }">
+      <Transition name="fade" mode="out-in">
+        <KeepAlive include="foo">
+          <component :is="Component2"></component>
+        </KeepAlive>
+      </Transition>
+    </PresetupView>
+  </RouterView>
+</template>
+```
+
+## API
+
+### PresetupView
+
+Type: Component
+
+Props：
+
++ `active`: 期望渲染的 VNode
+
+### useSetupComponent
+
+Type: Hook
+
+Return: { setupComponent }
+
+> 这是一个 Vue3 Hook，因此只能在 setup 函数中使用
+
+```vue
+<script setup lang="ts">
+import { useSetupComponent } from 'vue-presetup'
+import Bar from './Bar.vue'
+
+const { setupComponent } = useSetupComponent()
+
+const next = async () => {
+    await setupComponent(Bar, /* props */)
+}
+</script>
+```
+
+#### setupComponent
+
+Params:
+
+ + Component
+
+   需要加载的组件对象，这个组件必须有 `name` 属性，否则会收到一个被 reject 的 Promise；
+
+   同一组件（相同的 `name` ，后同）可预加载的数量是有限的（一个），在后面预加载的组件会覆盖之前已加载过的同一组件。
+
+ + props
+
+   传递给组件的参数，在 Vue 组件中是区分 Props 和 Attrs 的，因此在组件内部接收这个参数时候需要声明 Props，否则会给 Vue 理解为 Attrs，如下面这个示例，在 Comp.vue 中，p1,p2 在组件的 props 中，p3 是 attrs 中：
+
+   Comp.vue
+
+   ```vue
+   <script setup lang="ts">
+   const props = deineProps(['p1', 'p2'])
+   </script>
+   ```
+
+   Foo.vue
+
+   ```vue
+   <script setup lang="ts">
+   import { useSetupComponent } from 'vue-presetup'
+   import Comp from './Comp.vue'
+   
+   const { setupComponent } = useSetupComponent()
+   
+   const next = async () => {
+       await setupComponent(Comp, {
+           p1: 1,
+           p2: 2,
+           p3: 3
+       })
+   }
+   </script>
+   ```
+
+### useContext
+
+Type: Hook
+
+Return Context
+
+> 这是一个 Vue3 Hook，因此只能在 setup 函数中使用
+
+用在可能会被预加载的组件中，如基础使用示例的 Bar.vue
+
+#### Context
+
+```ts
+interface UseContextResult {
+  // 在当前组件“准备好”调用，以告知预加载完成。如当前组件不是通过预加载，此方法什么都不会发生。
+  resolve: Callback
+  // 在当前组件中预加载发生错误时候调用。如当前组件不是通过预加载，此方法什么都不会发生。
+  reject: Callback
+  // 获取在 setupComponent 中传递的参数。如当前组件不是通过预加载，此方法没有办法获取任何值，除非你提供了 defaultValue
+  get<R = unknown>(key: string): R | undefined
+  get<R = unknown>(key: string, defaultValue: R): R
+}
+```
+
+### removeComponent
+
+将一个已预加载的组件移除
+
+Params:
+
++ `name`: 被移除组件的 name
+
+```vue
+<script setup lang="ts">
+import { useSetupComponent, removeComponent } from 'vue-presetup'
+import Bar from './Bar.vue'
+
+const { setupComponent } = useSetupComponent()
+
+const next = async () => {
+    await setupComponent(Bar, /* props */)
+    removeComponent(Bar.name)
+}
+</script>
+```
+
+## License
+
+[MIT](https://github.com/haiya6/vite-plugin-html-resolve-alias/blob/main/LICENSE)

package/asy.js

@@ -0,0 +1,32 @@
+async function asyncTaskWithCb(cb) {
+    let err, user, savedTask, notification;
+
+    [ err, user ] = await to(UserModel.findById(1));
+    if(!user) return cb('No user found');
+
+    [ err, savedTask ] = await to(TaskModel({userId: user.id, name: 'Demo Task'}));
+    if(err) return cb('Error occurred while saving task');
+
+   if(user.notificationsEnabled) {
+      [ err ] = await to(NotificationService.sendNotification(user.id, 'Task Created'));
+      if(err) return cb('Error while sending notification');
+   }
+
+   if(savedTask.assignedUser.id !== user.id) {
+      [ err, notification ] = await to(NotificationService.sendNotification(savedTask.assignedUser.id, 'Task was created for you'));
+      if(err) return cb('Error while sending notification');
+   }
+
+   cb(null, savedTask);
+}
+
+function to(promise, errorExt) {
+    return promise
+        .then(function (data) { return [null, data]; }) // 执行成功，返回数组第一项为 null。第二个是结果。
+        .catch(function (err) {
+        if (errorExt) {
+            Object.assign(err, errorExt);
+        }
+        return [err, undefined]; // 执行失败，返回数组第一项为错误信息，第二项为 undefined
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
   "main": "index.js",
   "scripts": {

package/pre/index.js

@@ -0,0 +1,93 @@
+import { h, render, defineComponent, getCurrentInstance } from 'vue';
+const COMPONENT_KEPT_ALIVE = 1 << 9;
+const CONTEXT_KEY = Symbol('VUE_PRESETUP_CONTEXT_KEY');
+const NOOP = () => { };
+const cache = new Map();
+export const PresetupView = defineComponent({
+    name: 'PresetupView',
+    props: {
+        active: {
+            type: Object
+        }
+    },
+    setup(props, { slots }) {
+        const instance = getCurrentInstance();
+        // @ts-expect-error
+        instance.ctx.activate = (vnode, container, anchor) => {
+            container.insertBefore(vnode.component.subTree.el, anchor);
+        };
+        return () => {
+            const { active } = props;
+            const normalizeSlot = (vnode) => {
+                if (slots.default) {
+                    return slots.default({ Component: vnode });
+                }
+                return vnode;
+            };
+            if (!active)
+                return null;
+            const name = typeof active.type === 'object' ? active.type.name : '';
+            if (!name || !cache.has(name))
+                return normalizeSlot(active);
+            const data = cache.get(name);
+            cache.delete(name);
+            return normalizeSlot(data.vnode);
+        };
+    }
+});
+export function useContext() {
+    const instance = getCurrentInstance();
+    if (!instance)
+        console.warn(`[vue-presetup] useContext() called without active instance.`);
+    // @ts-expect-error
+    const context = instance?.vnode?.[CONTEXT_KEY] ?? {};
+    const get = (key, defaultValue) => {
+        const props = context?.props ?? {};
+        if ((key in props) && props[key] !== void 0)
+            return props[key];
+        else
+            return defaultValue;
+    };
+    return {
+        resolve: context?.resolve ?? NOOP,
+        reject: context?.resolve ?? NOOP,
+        get
+    };
+}
+export function useSetupComponent() {
+    const instance = getCurrentInstance();
+    if (!instance)
+        throw new Error(`[vue-presetup] useSetupComponent() called without active instance.`);
+    return {
+        setupComponent(component, props = {}) {
+            if (!component.name)
+                return Promise.reject(new Error(`[vue-presetup] The component must have \`name\` attribute.`));
+            return new Promise((resolve, reject) => {
+                const container = window.document.createElement('div');
+                const vnode = h(component, props);
+                // bind appContext
+                vnode.appContext = instance.appContext;
+                // bind presetup context
+                const context = { props, resolve, reject };
+                // @ts-expect-error
+                vnode[CONTEXT_KEY] = context;
+                if (cache.has(component.name))
+                    removeComponent(component.name);
+                cache.set(component.name, { vnode, container });
+                render(vnode, container);
+                vnode.shapeFlag |= COMPONENT_KEPT_ALIVE;
+            });
+        }
+    };
+}
+export function removeComponent(name) {
+    const data = cache.get(name);
+    if (!data) {
+        if (process.env.NODE_ENV === 'development') {
+            console.warn(`[vue-presetup] No component with name \`${name}\` found.`);
+        }
+        return;
+    }
+    render(null, data.container);
+    cache.delete(name);
+}

package/style/basic.less

@@ -0,0 +1,69 @@
+@sides: {
+  top: bottom;
+  bottom: top;
+  left: right;
+  right: left;
+}
+@N: .van-popper;
+@{N} {
+  --van-arrow-size: 10px;
+  --van-popper-content-bg: #fff;
+  --van-popper-border: 1px solid #ebedf0;
+  border-radius: 4px;
+  color: #000;
+  background-color: var(--van-popper-content-bg);
+  padding: 10px 12px;
+  border: var(--van-popper-border);
+  position: absolute;
+  white-space: nowrap;
+  transition: opacity .3s;
+  font-size: 13px;
+  z-index: 1000;
+  width: max-content;
+  
+  &__arrow {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: var(--van-popper-content-bg);
+    transform: rotate(45deg);
+  }
+
+  each(@sides, {
+    &[data-side^='@{value}'] {
+      @{N}__arrow {
+        @{key}: -5px;
+      }
+      @{N}__arrow {
+        border-@{key}: var(--van-popper-border);
+      }
+      @{N}__arrow when (@value =top) {
+        border-right: var(--van-popper-border);
+      }
+      @{N}__arrow when (@value =bottom) {
+        border-left: var(--van-popper-border);
+      }
+      @{N}__arrow when (@value =left) {
+        border-top: var(--van-popper-border);
+      }
+      @{N}__arrow when (@value =right) {
+        border-bottom: var(--van-popper-border);
+      }
+    }
+  });
+
+  &.is-dark {
+    --van-popper-content-bg: #000;
+    color: #fff;
+    border: none;
+
+    @{N}__arrow {
+      border-color: transparent;
+    }
+  }
+}
+
+.van-popper-fade-enter-from,
+.van-popper-fade-leave-to {
+  opacity: 0;
+}

package/style/index.less

@@ -0,0 +1,125 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './mixin';
+
+@row-prefix-cls: ~'@{ant-prefix}-row';
+@col-prefix-cls: ~'@{ant-prefix}-col';
+
+// Grid system
+.@{row-prefix-cls} {
+  display: flex;
+  flex-flow: row wrap;
+
+  &::before,
+  &::after {
+    display: flex;
+  }
+
+  // No wrap of flex
+  &-no-wrap {
+    flex-wrap: nowrap;
+  }
+}
+
+// x轴原点
+.@{row-prefix-cls}-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.@{row-prefix-cls}-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.@{row-prefix-cls}-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.@{row-prefix-cls}-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.@{row-prefix-cls}-space-around {
+  justify-content: space-around;
+}
+
+// 顶部对齐
+.@{row-prefix-cls}-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.@{row-prefix-cls}-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.@{row-prefix-cls}-bottom {
+  align-items: flex-end;
+}
+
+.@{col-prefix-cls} {
+  position: relative;
+  max-width: 100%;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+}
+
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
+
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}
+
+// Extra Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xxl-min) {
+  .make-grid(-xxl);
+}
+
+@media (min-width: @screen-xxxl-min) {
+  .make-grid(-xxxl);
+}
+
+@import './rtl';

package/style/index.tsx

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/style/mixin.less

@@ -0,0 +1,53 @@
+@import '../../style/mixins/index';
+
+// mixins for grid system
+// ------------------------
+
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{ant-prefix}-col@{class}-@{index} {
+    display: block;
+    flex: 0 0 percentage((@index / @grid-columns));
+    max-width: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+  .@{ant-prefix}-col@{class}-order-@{index} {
+    order: @index;
+  }
+  .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{ant-prefix}-col@{class}-@{index} {
+    display: none;
+  }
+  .@{ant-prefix}-col-push-@{index} {
+    left: auto;
+  }
+  .@{ant-prefix}-col-pull-@{index} {
+    right: auto;
+  }
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    left: auto;
+  }
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    right: auto;
+  }
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+  .@{ant-prefix}-col@{class}-order-@{index} {
+    order: 0;
+  }
+}
+
+.make-grid(@class: ~'') {
+  .loop-grid-columns(@grid-columns, @class);
+}