feat: ostate api design
This commit is contained in:
dntzhang
parent
58d5f51f2b
commit
a892394f80
|
|
@ -6,10 +6,17 @@ Observable state for JavaScript apps.
|
|||
|
||||
```jsx
|
||||
const App = o({
|
||||
render(){},
|
||||
render(){
|
||||
|
||||
},
|
||||
use:[],
|
||||
useSelf(){
|
||||
|
||||
},
|
||||
store: {
|
||||
data: {
|
||||
count: 1
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -17,4 +24,6 @@ ReactDOM.render(
|
|||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
```
|
||||
```
|
||||
|
||||
## Usage in Vue
|
||||
|
|
@ -1,12 +1,58 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
import { o } from './ostate'
|
||||
|
||||
class Store {
|
||||
data = {
|
||||
count: 1
|
||||
}
|
||||
sub = () => {
|
||||
this.data.count--
|
||||
}
|
||||
add = () => {
|
||||
this.data.count++
|
||||
}
|
||||
}
|
||||
|
||||
const Counter = o({
|
||||
render() {
|
||||
return <div>
|
||||
<button onClick={o.store.sub}>-</button>
|
||||
<span>{o.store.data.count}</span>
|
||||
<button onClick={o.store.add}>+</button>
|
||||
</div>
|
||||
},
|
||||
use: ['count']
|
||||
})
|
||||
|
||||
const App = o({
|
||||
render() {
|
||||
return <Counter></Counter>
|
||||
},
|
||||
store: new Store
|
||||
})
|
||||
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
|
||||
|
||||
// export class Grandmother extends React.Component {
|
||||
// info = {
|
||||
// lastName: "Sanchez"
|
||||
// };
|
||||
|
||||
// render() {
|
||||
// return (
|
||||
// <Context.Provider value={this.info}>
|
||||
// <Mother />
|
||||
// </Context.Provider>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// const Child = () => {
|
||||
// return <Context.Consumer>{context => <p>{context.lastName}</p>}</Context.Consumer>;
|
||||
// };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
import {useState,useCallback} from 'react'
|
||||
|
||||
function useForceUpdate() {
|
||||
const [, setTick] = useState(0)
|
||||
|
||||
const update = useCallback(() => {
|
||||
setTick(tick => tick + 1)
|
||||
}, [])
|
||||
|
||||
return update
|
||||
}
|
||||
|
||||
|
||||
|
||||
//const Context = React.createContext();
|
||||
|
||||
|
||||
export function o(options) {
|
||||
|
||||
console.log(this)
|
||||
if (options.store) o.store = options.store
|
||||
if(options.use){
|
||||
|
||||
}
|
||||
|
||||
//https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver.ts
|
||||
|
||||
|
||||
// setInterval(()=>{
|
||||
// // forceUpdate()
|
||||
// },2000)
|
||||
return (props, ref) => {
|
||||
|
||||
const wantedForceUpdateHook = options.useForceUpdate || useForceUpdate
|
||||
const forceUpdate = wantedForceUpdateHook()
|
||||
|
||||
//如果没有监听，就进行监听，保证监听一次
|
||||
// setInterval(()=>{
|
||||
|
||||
// forceUpdate()
|
||||
// },2000)
|
||||
return options.render(props, ref)
|
||||
}
|
||||
}
|
||||
|
||||
function useObserver(fn){
|
||||
|
||||
|
||||
let rendering
|
||||
oba('',()=>{
|
||||
rendering = fn()
|
||||
|
||||
})
|
||||
|
||||
return rendering
|
||||
}
|
||||
|
||||
function oba(){}
|
||||
|
||||
o.useInstances = []
|
||||
o.useSelfInstances = []
|
||||
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue