Giter Club home page Giter Club logo

Comments (4)

developit avatar developit commented on May 6, 2024 13

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.

developit avatar developit commented on May 6, 2024 6

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.

dntzhang avatar dntzhang commented on May 6, 2024 3

Pretty good way! You know preact better than I do :), wait for me to try and give you feedback these days.

from omi.

dntzhang avatar dntzhang commented on May 6, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.