Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: rax jsx runtime #2101

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/rax/jsx-dev-runtime.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export {Fragment, jsxDEV} from './index';
Copy link
Collaborator

@SoloJiang SoloJiang Apr 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

大括号前后加个空格 export { Fragment }....

Copy link
Contributor Author

@7213 7213 Apr 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok,不过npm run lint:fix似乎没有自动修正这个style

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

仓库有点老,没敢升级新的 lint 规则 =。=

1 change: 1 addition & 0 deletions packages/rax/jsx-runtime.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export {Fragment, jsx, jsxs, jsxDEV} from './index';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

5 changes: 5 additions & 0 deletions packages/rax/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
"description": "A universal React-compatible render engine.",
"license": "BSD-3-Clause",
"main": "index.js",
"exports": {
".": "./index.js",
"./jsx-runtime": "./jsx-runtime.js",
"./jsx-dev-runtime": "./jsx-dev-runtime.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/alibaba/rax.git"
Expand Down
92 changes: 92 additions & 0 deletions packages/rax/src/__tests__/jsx-runtime.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import Component from '../vdom/component';
import createElement from '../createElement';
import createRef from '../createRef';
import { jsx, jsxs, jsxDEV } from '../jsx-runtime';
import Fragment from '../fragment';

describe('Support JSX-Runtime', () => {
it('should export all modules needed by importSource', () => {
expect(typeof jsx).toBe('function');
expect(typeof jsxs).toBe('function');
expect(typeof jsxDEV).toBe('function');
expect(typeof Fragment).toBe('function');
});

it('should add key', () => {
const vnode = jsx('div', null, 'foo');
expect(vnode.key).toBe('foo');
});

it('should keep ref in props', () => {
let ref = () => null;
let vnode = jsx('div', { ref });
expect(vnode.ref).toBe(ref);

ref = 'fooRef';
vnode = jsx('div', { ref });
expect(vnode.ref).toBe('fooRef');
});

it('should apply defaultProps', () => {
class Foo extends Component {
render() {
return <div />;
}
}

Foo.defaultProps = {
foo: 'bar',
fake: 'bar1',
};

let vnode = jsx(Foo, {}, null);
expect(vnode.props.foo).toBe('bar');

vnode = jsx(Foo, {fake: 'bar2'}, null);
expect(vnode.props.fake).toBe('bar2');
});

it('should keep props over defaultProps', () => {
class Foo extends Component {
render() {
return <div />;
}
}

Foo.defaultProps = {
foo: 'bar'
};

const vnode = jsx(Foo, { foo: 'baz' }, null);
expect(vnode.props).toEqual({
foo: 'baz'
});
});

it('should set __source and __self', () => {
const vnode = jsxDEV('div', { class: 'foo' }, 'key', 'source', 'self');
expect(vnode.__source).toBe('source');
expect(vnode.__self).toBe('self');
});

it('should return a vnode like createElement', () => {
const elementVNode = createElement('div', {
class: 'foo',
key: 'key'
});
const jsxVNode = jsx('div', { class: 'foo' }, 'key');
expect(jsxVNode).toEqual(elementVNode);
});

it('should remove ref from props', () => {
const ref = createRef();
const vnode = jsx('div', { ref }, null);
expect(vnode.props).toEqual({});
expect(vnode.ref).toBe(ref);
});

it('should receive children props', () => {
const fooProps = {children: []};
expect(Fragment(fooProps)).toEqual([]);
});
});
1 change: 1 addition & 0 deletions packages/rax/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export memo from './memo';
export Fragment from './fragment';
export render from './render';
export Component, { PureComponent } from './vdom/component';
export { jsx, jsxs, jsxDEV } from './jsx-runtime';
export version from './version';

import Host from './vdom/host';
Expand Down
105 changes: 105 additions & 0 deletions packages/rax/src/jsx-runtime.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import Host from './vdom/host';
import Element from './vdom/element';
import { warning, throwError, throwMinifiedWarn } from './error';
import { isArray, NOOP } from './types';
import validateChildKeys from './validateChildKeys';

const __DEV__ = process.env.NODE_ENV !== 'production';

/**
* This module is adapted to react's jsx-runtime module.
* @see:[introducing-the-new-jsx-transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.htm)
*/
function jsxRuntime(type, props, key, __source, __self) {
let normalizedProps = {};
let propName;

// The default value of key and ref of rax element is null
let ref = props && props.ref || null;
key = key || null;

for (propName in props) {
if (propName !== 'ref') {
normalizedProps[propName] = props[propName];
}
}

let defaults;
if (typeof type === 'function' && (defaults = type.defaultProps)) {
for (propName in defaults)
if (normalizedProps[propName] === undefined) {
normalizedProps[propName] = defaults[propName];
}
}

return new Element(
type,
key,
ref,
normalizedProps,
Host.owner,
__source,
__self
);
}


function _jsxWithValidation(type, props, key, isStaticChildren, __source, __self) {
const elem = jsxRuntime(type, props, key, __source, __self);

if (type == null) {
if (__DEV__) {
throwError(`Invalid element type, expected a string or a class/function component but got "${type}".`);
} else {
// A empty component replaced avoid break render in production
type = NOOP;
throwMinifiedWarn(0);
}
}

const children = props && props.children;
if (children !== undefined) {
if (isStaticChildren) {
if (isArray(children)) {
for (let i = 0; i < children.length; i++) {
validateChildKeys(children[i], type);
}

if (Object.freeze) {
Object.freeze(children);
}
} else {
warning(
'Rax.jsx: Static children should always be an array. ' +
'You are likely explicitly calling Rax.jsxs or Rax.jsxDEV. ' +
'Use the Babel transform instead.',
);
}
} else {
validateChildKeys(children, type);
}
}

return elem;
}

function jsxWithValidation(type, props, key) {
return _jsxWithValidation(type, props, key, false);
}
function jsxsWithValidation(type, props, key) {
return _jsxWithValidation(type, props, key, true);
}
function jsxDEVWithValidation(type, props, key, __source, __self) {
return _jsxWithValidation(type, props, key, true, __source, __self);
}

const jsx = __DEV__ ? jsxWithValidation : jsxRuntime;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jsxWithValidation 用额外的文件实现,避免最后生产代码里还遗存

const jsxs = __DEV__ ? jsxsWithValidation : jsxRuntime;
const jsxDEV = __DEV__ ? jsxDEVWithValidation : undefined;

export {
jsx,
jsxs,
jsxDEV
};

24 changes: 19 additions & 5 deletions packages/rax/src/vdom/element.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import checkPropTypes from 'prop-types/checkPropTypes';

export default function Element(type, key, ref, props, owner) {
export default function Element(type, key, ref, props, owner, __source, __self) {
let element = {
// Built-in properties that belong on the element
type,
Expand Down Expand Up @@ -33,10 +33,24 @@ export default function Element(type, key, ref, props, owner) {
value: false
});

// Props is immutable
if (Object.freeze) {
Object.freeze(props);
}
Object.defineProperty(element, '__source', {
configurable: false,
enumerable: false,
writable: true,
value: __source
});

Object.defineProperty(element, '__self', {
configurable: false,
enumerable: false,
writable: true,
value: __self
});
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里抽成一个 utils,避免浪费体积


// Props is immutable
if (Object.freeze) {
Object.freeze(props);
}

return element;
Expand Down