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

miox-simple

v4.1.5

Published

miox-simple

Downloads

11

Readme

Miox-Simple

process.env.MIOX_ENV = 'server | client | web';

miox的桌面端核心,承载着客户端与服务端双重解决方案。

  • 客户端 提供一个web service服务。它监听history变化,桥接到web service服务上启动路由变化改变渲染层的生命周期。
  • 服务端 SSR 提供一套服务端渲染的机制,利于SEO。

Usage

npm install --save miox-simple

引用后使用最简单的方式来运行(以 VUEJS 为例)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import miox from 'miox-simple';
import { Engine, Component, Webview, life } from 'miox-vue2x';

/**
* 数据源,用户存储数据
*/
const store = new Vuex.Store({
    state: {
        value: 'my data'
    },
    mutations: {
        SET_DATA(state, value) {
            state.value = value;
        }
    }
})

/**
* 组件 webview 渲染层
*/
@Component
class Page extends Webview {
    @life mounted() {
        console.log(this.$store.state);
    }
    render(h) {
        return h('h1', 'Hello World!');
    }
}

/**
* miox service 核心服务启动
*/
export default miox(app => {
   app.set('engine', Engine);
   app.set('vuex', store);
   
   app.on('server:start', () => {
       console.log('server:start', new Date().toLocaleString());
   });
   app.on('server:end', () => {
       console.log('server:end', new Date().toLocaleString());
   });
   
   app.use(async (ctx, next) => {
       if (ctx.context) {
            // ssr fetch data
            const data = await ctx.context.fetchData();
            store.commit('SET_DATA', data);
       }
       await ctx.render(Page);
       await next();
   });
   
   app.use(async ctx => {
       if (ctx.context) {
           ctx.context.db.close();
           console.log('db closed')
       }
   })
});

History

启动一个history监听服务,来通知服务进行页面生命周期的切换。该模块核心自动内嵌入服务中,同时也提供了一个触发history改变的方法redirect

param <String|Number> url

ctx.history.redirect(-1);
ctx.history.redirect(1);
ctx.history.redirect('/a/b/c/d?a=1&b=2');
  1. 当参数为数字类型,执行history的forward或者back行为。
  2. 当参数为字符串类型,必须是一个 非绝对地址 的跳转链接。

Request

服务的 STDIN 输入口,用于接收环境参数。相见参数编译 NPM:url:api

console.log(ctx.req);

Response

服务的 STDOUT 输出口,用于输出处理行为数据。

console.log(ctx.res);

ctx.res.render 在指定渲染引擎后,该方法将根据引擎提供的规则渲染页面。参数如下:

  • webview 渲染页面的webview对象,根据引擎的不同,对象类型也不同,具体参看引擎说明。
  • args 传入的模板数据。

ctx.res.forward 在具体逻辑中使用这个方法将自动跳转到具体页面,参数见 history:redirect

Middleware

一套简易中间件创建模式

import Miox from 'miox-simple';
const middle = new Miox.middleware();
middle.use(fn1, fn2, fn3, ...);
middle.__defineProcessHandle__();
await middle.__processer__(context);

Server Side Render (SSR)

miox也支持服务端渲染。优势在于我们不用改动任意代码,但是需要在书写代码时候注意一些引擎提供的注意点,这里不多做解释,具体什么引擎就有什么规范。

Server Render Data Mock

对服务端渲染数据进行mock。我们以vuejs的vuex为例。

// vuex.js
export default new Vuex.Store({
    state: {
        data: 'demo'
    },
    mutations: {
        set(state, val) {
            state.data = val;
        }
    },
    actions: {
        async SET_DATA({ commit }, { fetch, id, key, value }){
            commit('set', await fetch({
                async client({ ctx }) {
                    return await ctx.ajax.get('http://api.demo.com', { id, key, value });
                },
                async server({ service }) {
                    return await service.getUserInfo(id, key, value);
                }
            }));
        }
    }
});

// route.js
import store from './vuex';
route.patch('/demo/:id(\\d+)', async ctx => {
    const id = Number(ctx.params.id);
    await store.dispatch('SET_DATA', ctx.mock({ 
        id,
        key: 'demoKey',
        value: 'demoValue' 
    }));
    await ctx.render(demoWebview);
})

Documents

除了上述不同之外,其他方法请参阅 Miox文档教程