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

virutal-application-core

v0.1.6

Published

虚拟应用核心,使Web前端工程更接近一个PC应用工程,主要约束工程的整体运行框架。强调“应用”,“窗口”等概念,加强应用(窗口)之间的通信交互能力。

Downloads

6

Readme

Virtual Application Core

虚拟应用核心,使Web前端工程更接近一个PC应用工程,主要约束工程的整体运行框架。强调“应用”,“窗口”等概念,加强应用(窗口)之间的通信交互能力。

Install - 安装

安装依赖

npm install --save virtual-application-core

Usage - 基本用法

import { VirtualAppCore } from 'virtual-application-core'
import pkg from '@package.json' // 工程根路径下package.json,@package.json是别名用法,需要在构建工具中声明才能使用

const app = new VirtualAppCore({
    debug: true, // 开启debg
    name: pkg.name, // 应用名称
})

Step Event - 应用的生命周期

应用(窗口)装载时发生的事件, 其他应用可以订阅对应应用(窗口)的装载事件。
step:init(初始化) -> step:before-mount(挂载前) -> step:mount(挂载完成)

step.1 应用初始化 - 应用通信挂载

app.on('step:init', () => {
    return Promise.resolve() // 支持返回Promise对象来阻塞流程
})

step.2 应用挂载前

app.on('step:before-mount', () => {
    return Promise.resolve() // 支持返回Promise对象来阻塞流程
})

step.3 应用挂载完成

app.on('step:mount', () => {
    return Promise.resolve() // 支持返回Promise对象来阻塞流程
})

Custom Step 自定义装载事件

针对当前应用拓展生命周期, 需在sync为false,且需在init方法执行之前定义。

// 定义在step:init之前
app.setup({
    name: 'myAppSetupEventName',
    beforeEvent: 'step:init',
    doth() {
        // ....
        return Promise.resolve() // 返回Promise可以阻塞流程
    },
})

Step Reply Usage 重新执行应用事件

在目标应用的事件完成后,其他应用可以重新触发目标应用的事件,谨慎使用。

app.use('appName', 'step:init', { 'xxxx': 'xxxxxxxxxxx' })
app.use('appName', 'step:before-mount', { 'xxxx': 'xxxxxxxxxxx' })
app.use('appName', 'step:mount', { 'xxxx': 'xxxxxxxxxxx' })
app.use('appName', 'myAppSetupEventName', { 'xxxx': 'xxxxxxxxxxx' })