Comments (4)
I guess that makes sense - just when we make substantial changes in the next version, it will be become quite difficult to port those over to Omi.
I actually think it might be possible to do most of what Omi needs on top of Preact.
Here's an example that implement's Omi's changes to render
, h
and Component
.
It's worth noting - doing things this way would let you alias Preact components for use within Omi, and they could access Omi's store as this.context.$store
💯
import { preactH, PreactComponent, preactRender } from 'preact';
export function h() {
let p = preactH.apply(null, arguments);
p.nodeName = options.isWeb?p.nodeName:map[p.nodeName];
if (typeof p.children[0]=== 'string'&& !options.isWeb) {
if (p.attributes) {
p.attributes.value = p.children[0];
} else {
p.attributes = { value: p.children[0] };
}
}
if (options.vnode) options.vnode(p);
return p;
}
export function render() {
merge = Object.assign({
store: {}
}, merge);
if (typeof window === 'undefined') {
if (vnode instanceof Component&&merge){
vnode.$store = merge.store;
}
return;
}
options.staticStyleRendered = false;
parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
if (merge.merge){
merge.merge = typeof merge.merge === 'string' ? document.querySelector(merge.merge) : merge.merge;
}
if (merge.empty){
while (parent.firstChild){
parent.removeChild(parent.firstChild);
}
}
merge.store.ssrData = options.root.__omiSsrData;
options.$store = merge.store;
if (vnode instanceof Component) {
if (window && window.Omi){
window.Omi.instances.push(vnode);
}
vnode.$store = merge.store;
if (vnode.componentWillMount) vnode.componentWillMount();
if (vnode.install) vnode.install();
const rendered = vnode.render(vnode.props, vnode.state, vnode.context);
//don't rerender
if (vnode.staticStyle){
addScopedAttrStatic(rendered,vnode.staticStyle(),'_style_'+getCtorName(vnode.constructor));
}
if (vnode.style){
addScopedAttr(rendered,vnode.style(),'_style_'+vnode._id,vnode);
}
vnode.base = preactRender(rendered, parent, merge.merge);
if (vnode.componentDidMount) vnode.componentDidMount();
if (vnode.installed) vnode.installed();
options.staticStyleRendered = true;
return vnode.base;
}
let result = preactRender(preactH(Provide, { $store: merge.store }, vnode), parent, merge.merge);
options.staticStyleRendered = true;
return result;
}
class Provide {
getChildContext() {
return { $store: this.props.$store }
}
render(props) {
return props.children[0];
}
}
export class Component extends PreactComponent {
constructor(props, context) {
super(props, context);
this._id = getId();
this._preStyle = null;
this.$store = this.context.$store;
}
forceUpdate(callback) {
super.forceUpdate(callback);
if (options.componentChange) options.componentChange(this, this.base);
}
update(callback) {
this.setState(null, callback);
}
}
from omi.
I figured it was easier to show code than explain haha. If you are looking into things, feel free to ping me on slack 👍
from omi.
Pretty good way! You know preact better than I do :), wait for me to try and give you feedback these days.
from omi.
Thank you for your advice and thank you for your preact project.
There are some differences between the Omi source code and the preact in order to be compatible with native, such as h method. I modified the args format of render method for ssr and store system. The hook functions of preact are not enough to implement the existing functions of Omi. And i prefer component.update to component.setState, more free and flexible.
On the problem of code synchronization between Omi and preact, i will keep an eye on preact's progress and incorporate good features into Omi.
Cheers!
-dntzhang
from omi.
Related Issues (20)
- 设置主题色报错 HOT 1
- taro 的模板没有
- Cax如何启用同层渲染?
- README里提到的omi-kbone-snake点击进入后404 HOT 1
- 当自定义的元素接收Object参数时,某些合法数据,正则校验处理有问题,会导致JSON.parse报错 HOT 3
- feature: TDesign link component HOT 3
- RFC: TDesign Omi Roadmap HOT 41
- store 的 ignoreAttrs 可以去掉了,因为 h 函数都自动注入了 ignoreAttrs
- [OMI ADMIN]i18n select center fixed HOT 6
- > 点错了
- Uncaught The provide prop was not found on the parent node or the provide type is incorrect. provide和inject的使用问题 HOT 3
- Watermark
- popup报错 —— v7.0.0-alpha2 HOT 2
- 1
- omiu 有开源吗?没有找到相关文档和组件配置 HOT 2
- <></>里的 createRef 被重建了
- 能否支持在 web component 中引入 JSX 组件? HOT 3
- effect is running for every dependecy HOT 1
- [omi-templates]完成调查问卷页的黑夜模式的适配
- [omi-templates]页面滚动自动切换右边的导航active项
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from omi.