parent
e782d9cf96
commit
8519bfd4ef
|
@ -12,6 +12,7 @@
|
||||||
|
|
||||||
- 提供迷你的单页应用开发环境
|
- 提供迷你的单页应用开发环境
|
||||||
- 无需`node.js`编译, 即写即用。
|
- 无需`node.js`编译, 即写即用。
|
||||||
|
- 本项目适合开发一些快速迭代简单页面、app内嵌的`webview`页面(无须搭建复杂的前端开发环境)
|
||||||
|
|
||||||
|
|
||||||
### 一些注意事项
|
### 一些注意事项
|
||||||
|
@ -20,7 +21,7 @@
|
||||||
- `$router`对象, 只注入到使用`wkit`创建的组件, 其他地方可以使用`getRouter()`获取`$router`对象。
|
- `$router`对象, 只注入到使用`wkit`创建的组件, 其他地方可以使用`getRouter()`获取`$router`对象。
|
||||||
- 所有路由页面和组件, 均可使用`getCurrentPage()`获取当前的页面的信息; 也可以用`$router.route`获取。
|
- 所有路由页面和组件, 均可使用`getCurrentPage()`获取当前的页面的信息; 也可以用`$router.route`获取。
|
||||||
- `$store`对象, 只注入到使用`wkit`创建的组件, 其他组件可使用`getStore()`获取。
|
- `$store`对象, 只注入到使用`wkit`创建的组件, 其他组件可使用`getStore()`获取。
|
||||||
- `$store`对象为非响应式, 后续可能会支持(时间无限期延后)。
|
|
||||||
|
|
||||||
|
|
||||||
### 示例
|
### 示例
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "wkitd",
|
"name": "wkitd",
|
||||||
"version": "1.0.0",
|
"version": "1.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"files": [
|
"files": [
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
/**
|
||||||
|
* {框架常量}
|
||||||
|
* @author yutent<yutent.io@gmail.com>
|
||||||
|
* @date 2023/08/15 10:15:54
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const __ROUTER__ = Symbol('router')
|
||||||
|
export const __ROUTER_VIEW__ = Symbol('router-view')
|
||||||
|
export const __STORE__ = Symbol('store')
|
||||||
|
export const WKITD_COMPONENTS = new Set()
|
13
src/index.js
13
src/index.js
|
@ -7,6 +7,7 @@
|
||||||
import './init.js'
|
import './init.js'
|
||||||
import { html, css, Component } from 'wkit'
|
import { html, css, Component } from 'wkit'
|
||||||
import { noop } from './utils.js'
|
import { noop } from './utils.js'
|
||||||
|
import { __ROUTER__, __STORE__, __ROUTER_VIEW__ } from './constants.js'
|
||||||
|
|
||||||
export * from './router/index.js'
|
export * from './router/index.js'
|
||||||
export { createStore } from './store.js'
|
export { createStore } from './store.js'
|
||||||
|
@ -26,11 +27,11 @@ export function createApp({
|
||||||
Object.assign(App.prototype, methods, { mounted })
|
Object.assign(App.prototype, methods, { mounted })
|
||||||
|
|
||||||
this.use = function (plugin = noop, ...args) {
|
this.use = function (plugin = noop, ...args) {
|
||||||
plugin.apply(this, args)
|
plugin.apply(App.prototype, args)
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
this.mount = function () {
|
this.mount = function () {
|
||||||
let $router = window.__wkitd__.get('$router')
|
let $router = window.wkitd.get(__ROUTER__)
|
||||||
if (render) {
|
if (render) {
|
||||||
App.prototype.render = render
|
App.prototype.render = render
|
||||||
} else {
|
} else {
|
||||||
|
@ -70,7 +71,7 @@ export function createApp({
|
||||||
}
|
}
|
||||||
if ($router) {
|
if ($router) {
|
||||||
App.prototype.mounted = function (...args) {
|
App.prototype.mounted = function (...args) {
|
||||||
let $view = window.__wkitd__.get('ROUTER_VIEW')
|
let $view = window.wkitd.get(__ROUTER_VIEW__)
|
||||||
if ($view) {
|
if ($view) {
|
||||||
$view.sync($router.views)
|
$view.sync($router.views)
|
||||||
$router.init() // mounted 时正式初始化路由
|
$router.init() // mounted 时正式初始化路由
|
||||||
|
@ -88,13 +89,13 @@ export function createApp({
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getStore() {
|
export function getStore() {
|
||||||
return window.__wkitd__.get('$store')
|
return window.wkitd.get(__STORE__)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getRouter() {
|
export function getRouter() {
|
||||||
return window.__wkitd__.get('$router')
|
return window.wkitd.get(__ROUTER__)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getCurrentPage() {
|
export function getCurrentPage() {
|
||||||
return window.__wkitd__.get('$router')?.route
|
return window.wkitd.get(__ROUTER__)?.route
|
||||||
}
|
}
|
||||||
|
|
33
src/init.js
33
src/init.js
|
@ -4,15 +4,40 @@
|
||||||
* @date 2023/08/10 10:19:12
|
* @date 2023/08/10 10:19:12
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const __WKITD__ = new Map()
|
import { Component } from 'wkit'
|
||||||
|
import { WKITD_COMPONENTS } from './constants.js'
|
||||||
|
|
||||||
Object.defineProperty(window, '__wkitd__', {
|
class Wkitd extends WeakMap {
|
||||||
|
/**
|
||||||
|
* 广播式推送更新
|
||||||
|
*/
|
||||||
|
broadcast() {
|
||||||
|
for (let it of WKITD_COMPONENTS) {
|
||||||
|
it.$requestUpdate()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 注册缓存组件
|
||||||
|
*/
|
||||||
|
assign(target) {
|
||||||
|
WKITD_COMPONENTS.add(target)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 取消注册
|
||||||
|
*/
|
||||||
|
deassign(target) {
|
||||||
|
WKITD_COMPONENTS.add(target)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const __WKITD__ = new Wkitd()
|
||||||
|
|
||||||
|
Object.defineProperty(window, 'wkitd', {
|
||||||
get() {
|
get() {
|
||||||
return __WKITD__
|
return __WKITD__
|
||||||
},
|
},
|
||||||
set(val) {
|
set(val) {
|
||||||
console.error('Can not set readonly property __wkitd__ of window')
|
console.error('Can not set readonly property wkitd of window')
|
||||||
},
|
},
|
||||||
writable: false,
|
|
||||||
enumerable: false
|
enumerable: false
|
||||||
})
|
})
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
import { Component } from 'wkit'
|
import { Component } from 'wkit'
|
||||||
import { createWebHashHistory, createWebHistory } from './router-engine.js'
|
import { createWebHashHistory, createWebHistory } from './router-engine.js'
|
||||||
import './router-components.js'
|
import './router-components.js'
|
||||||
|
import { __ROUTER__ } from '../constants.js'
|
||||||
|
|
||||||
export { createWebHashHistory, createWebHistory }
|
export { createWebHashHistory, createWebHistory }
|
||||||
|
|
||||||
|
@ -15,13 +16,13 @@ export function createRouter({
|
||||||
} = {}) {
|
} = {}) {
|
||||||
let $router = history()
|
let $router = history()
|
||||||
|
|
||||||
window.__wkitd__.set('$router', $router)
|
window.wkitd.set(__ROUTER__, $router)
|
||||||
|
|
||||||
$router.addRoute(routes)
|
$router.addRoute(routes)
|
||||||
function wrapper() {
|
function wrapper() {
|
||||||
Object.defineProperty(Component.prototype, '$router', {
|
Object.defineProperty(Component.prototype, '$router', {
|
||||||
get() {
|
get() {
|
||||||
return window.__wkitd__.get('$router')
|
return window.wkitd.get(__ROUTER__)
|
||||||
},
|
},
|
||||||
set(val) {
|
set(val) {
|
||||||
console.error('Can not set readonly property $router of Component')
|
console.error('Can not set readonly property $router of Component')
|
||||||
|
@ -32,11 +33,3 @@ export function createRouter({
|
||||||
wrapper.beforeEach = $router.beforeEach.bind($router)
|
wrapper.beforeEach = $router.beforeEach.bind($router)
|
||||||
return wrapper
|
return wrapper
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getRouter() {
|
|
||||||
return window.__wkitd__.get('$router')
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getCurrentPage() {
|
|
||||||
return getRouter().route
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
//
|
//
|
||||||
import { Component, html, css, raw } from 'wkit'
|
import { Component, html, css, raw } from 'wkit'
|
||||||
import { object2query } from '../utils.js'
|
import { object2query } from '../utils.js'
|
||||||
|
import { __ROUTER_VIEW__ } from '../constants.js'
|
||||||
|
|
||||||
class RouterView extends Component {
|
class RouterView extends Component {
|
||||||
static props = {
|
static props = {
|
||||||
|
@ -26,7 +27,7 @@ class RouterView extends Component {
|
||||||
#views = []
|
#views = []
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
window.__wkitd__.set('ROUTER_VIEW', this)
|
window.wkitd.set(__ROUTER_VIEW__, this)
|
||||||
}
|
}
|
||||||
|
|
||||||
sync(views) {
|
sync(views) {
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
*/
|
*/
|
||||||
import { bind, fire } from 'wkit'
|
import { bind, fire } from 'wkit'
|
||||||
import { noop, query2object, object2query } from '../utils.js'
|
import { noop, query2object, object2query } from '../utils.js'
|
||||||
|
import { __ROUTER_VIEW__ } from '../constants.js'
|
||||||
|
|
||||||
//hash前缀正则
|
//hash前缀正则
|
||||||
const PREFIX_REGEXP = /^(#!|#)[\/]+?/
|
const PREFIX_REGEXP = /^(#!|#)[\/]+?/
|
||||||
|
@ -95,7 +96,7 @@ class Router {
|
||||||
// 路由检测
|
// 路由检测
|
||||||
#check() {
|
#check() {
|
||||||
let isHash = this.type === MODE_HASH
|
let isHash = this.type === MODE_HASH
|
||||||
let $view = window.__wkitd__.get('ROUTER_VIEW')
|
let $view = window.wkitd.get(__ROUTER_VIEW__)
|
||||||
let hash = location.hash
|
let hash = location.hash
|
||||||
let path = isHash
|
let path = isHash
|
||||||
? location.hash
|
? location.hash
|
||||||
|
@ -141,7 +142,7 @@ class Router {
|
||||||
}
|
}
|
||||||
|
|
||||||
#exec(route) {
|
#exec(route) {
|
||||||
let $view = window.__wkitd__.get('ROUTER_VIEW')
|
let $view = window.wkitd.get(__ROUTER_VIEW__)
|
||||||
$view.current = route.name
|
$view.current = route.name
|
||||||
this.#route = route
|
this.#route = route
|
||||||
this.#rsync()
|
this.#rsync()
|
||||||
|
|
31
src/store.js
31
src/store.js
|
@ -5,27 +5,36 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component } from 'wkit'
|
import { Component } from 'wkit'
|
||||||
|
import { __STORE__ } from './constants.js'
|
||||||
|
|
||||||
export function createStore(obj = {}) {
|
export function createStore(obj = {}) {
|
||||||
window.__wkitd__.set(
|
let defined = false
|
||||||
'$store',
|
|
||||||
new Proxy(obj, {
|
|
||||||
set(target, prop, value) {
|
|
||||||
target[prop] = value
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
return function () {
|
return function () {
|
||||||
Object.defineProperty(Component.prototype, '$store', {
|
Object.defineProperty(Component.prototype, '$store', {
|
||||||
get() {
|
get() {
|
||||||
return window.__wkitd__.get('$store')
|
return window.wkitd.get(__STORE__)
|
||||||
},
|
},
|
||||||
set(val) {
|
set(val) {
|
||||||
console.error('Can not set readonly property $store of Component')
|
if (defined) {
|
||||||
|
return console.error(
|
||||||
|
'Can not set readonly property $store of Component'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
window.wkitd.set(
|
||||||
|
__STORE__,
|
||||||
|
new Proxy(val, {
|
||||||
|
set(target, prop, value) {
|
||||||
|
target[prop] = value
|
||||||
|
window.wkitd.broadcast()
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
defined = true
|
||||||
},
|
},
|
||||||
enumerable: false
|
enumerable: false
|
||||||
})
|
})
|
||||||
|
Component.prototype.$store = obj
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue