Skip to content

Commit

Permalink
Merge pull request #10 from Yepstr/feature/rn53
Browse files Browse the repository at this point in the history 
Feature/rn53
  • Loading branch information
@bvic23
bvic23 authored Feb 7, 2018
2 parents e86d8a5 + eb29694 commit e3f95c9
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 60 deletions.
92 changes: 55 additions & 37 deletions lib/__tests__/__snapshots__/plugin.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" let { children, layout: { width, height } } = this.props;",
" return (<Text style={{ color: 'blue' }} width={width} height={height}>",
Expand All @@ -59,23 +61,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" let { title } = this.props;",
" return (<Text style={{ color: 'blue' }}>",
Expand All @@ -97,23 +101,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" let { title } = this.props;",
"",
Expand All @@ -138,23 +144,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" return (<Text style={{ color: 'blue' }}>Test</Text>);",
" }",
Expand All @@ -173,23 +181,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" let { children, onPress } = this.props;",
" return (<TouchableNativeFeedback onPress={onPress}>",
Expand All @@ -213,23 +223,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Comp extends require(\\"react\\").Component {",
"class __Comp extends _react.Component {",
" render() {",
" let { children, onPress } = this.props;",
" return (<TouchableNativeFeedback onPress={onPress}>",
Expand Down Expand Up @@ -257,23 +269,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" let { children, onPress } = this.props;",
" return (<TouchableNativeFeedback onPress={onPress}>",
Expand All @@ -287,7 +301,7 @@ Array [
"",
"export const Button = wrapComponent('Button', __Button);",
"",
"class __Box extends require(\\"react\\").Component {",
"class __Box extends _react.Component {",
" render() {",
" let { children, onPress } = this.props;",
" return (<TouchableNativeFeedback onPress={onPress}>",
Expand All @@ -306,23 +320,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" return (<Text style={{ color: 'blue' }}>Test</Text>);",
" }",
Expand All @@ -341,23 +357,25 @@ Array [
"import { TouchableNativeFeedback, Text } from 'react-native';",
"import React, { Component, PropTypes } from 'react';",
"",
"import reactTransform from 'react-transform-hmr';",
"import _react from 'react';",
"import _reactTransform from 'react-transform-hmr';",
"",
"function wrapComponent(id, Component) {",
" const t = reactTransform({",
" const t = _reactTransform({",
" components: {",
" [id]: {",
" displayName: id",
" }",
" },",
" locals: [module],",
" imports: [require(\\"react\\")],",
" imports: [_react],",
" filename: '%%FILENAME%%'",
" });",
"",
" return t(Component, id);",
"}",
"",
"class __Button extends require(\\"react\\").Component {",
"class __Button extends _react.Component {",
" render() {",
" let { children, onPress } = this.props;",
" return (<TouchableNativeFeedback onPress={onPress}>",
Expand Down
52 changes: 29 additions & 23 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const jsx = require('babel-plugin-syntax-jsx');

function hmrImport(t) {
const specifiers = [t.importDefaultSpecifier(t.identifier('reactTransform'))];
return t.importDeclaration(specifiers, t.stringLiteral('react-transform-hmr'));
const createImportDeclaration = (t, identifier, pageName) => {
const specifiers = [t.importDefaultSpecifier(identifier)];
return t.importDeclaration(specifiers, t.stringLiteral(pageName));
}

function wrapComponent(t, className) {
Expand All @@ -19,22 +19,22 @@ function wrapComponent(t, className) {
return t.variableDeclaration('const', declares);
}

function declareWrapComponent(t, className, filename) {
function declareWrapComponent(t, className, filename, ReactId, ReactTransformId) {
const displayNameProp = t.objectProperty(t.identifier('displayName'), t.identifier('id'));
const displayNameObject = t.objectExpression([displayNameProp]);

const idProp = t.objectProperty(t.identifier('[id]'), displayNameObject);
const idProp = t.objectProperty(t.identifier('id'), displayNameObject, true);
const idObject = t.objectExpression([idProp]);

const localsProp = t.objectProperty(t.identifier('locals'), t.identifier('[module]'));
const reactProp = t.objectProperty(t.identifier('imports'), t.identifier('[require("react")]'));
const localsProp = t.objectProperty(t.identifier('locals'), t.arrayExpression([t.identifier('module')]));
const reactProp = t.objectProperty(t.identifier('imports'), t.arrayExpression([ReactId]));
const filenameProp = t.objectProperty(t.identifier('filename'), t.stringLiteral(filename));

const componentsProp = t.objectProperty(t.identifier('components'), idObject);
const componentsObject = t.objectExpression([componentsProp, localsProp, reactProp, filenameProp]);

const declares = [
t.variableDeclarator(t.identifier('t'), t.callExpression(t.identifier('reactTransform'), [componentsObject]))
t.variableDeclarator(t.identifier('t'), t.callExpression(ReactTransformId, [componentsObject]))
];
const declareT = t.variableDeclaration('const', declares);

Expand Down Expand Up @@ -70,9 +70,9 @@ function renderFunction(t, arrowFunction, params, isEmbeddedReturn) {
return t.classMethod('method', t.identifier('render'), [], renderBody);
}

module.exports = function({ Plugin, types: t }) {
module.exports = function({ Plugin, types: t, template }) {
const visitor = {};
const arrowVisitor = function(state) {
const arrowVisitor = function(state, ReactId, ReactTransformId) {
return function(path) {
if (process.env.BABEL_ENV === 'production') return;

Expand Down Expand Up @@ -112,12 +112,19 @@ module.exports = function({ Plugin, types: t }) {
const classBody = t.classBody([renderMethod]);
const classDeclaration = t.classDeclaration(
t.identifier('__' + className),
t.identifier('require("react").Component'),
t.memberExpression(ReactId, t.identifier('Component')),
classBody,
[]
);

const alreadyAddedImport = state.cache[filename] || false;
const addImports = (base) => {
if (!state.cache[filename]) {
state.cache[filename] = true;
base.insertBefore(createImportDeclaration(t, ReactId, 'react'));
base.insertBefore(createImportDeclaration(t, ReactTransformId, 'react-transform-hmr'));
base.insertBefore(declareWrapComponent(t, className, filename, ReactId, ReactTransformId));
}
}

if (isDeclaredAsConstant) {
const isExportDefault = path.parentPath.parentPath.parent.type === 'Program';
Expand All @@ -127,28 +134,27 @@ module.exports = function({ Plugin, types: t }) {
wrapComp = t.exportNamedDeclaration(wrapComp, []);
}

if (!alreadyAddedImport) {
state.cache[filename] = true;
base.insertBefore(hmrImport(t));
base.insertBefore(declareWrapComponent(t, className, filename));
}
addImports(base);

base.replaceWith(classDeclaration);
base.insertAfter(wrapComp);
} else {
path.parentPath.replaceWith(classDeclaration);
path.parentPath.insertAfter(t.exportDefaultDeclaration(t.identifier(className)));
if (!alreadyAddedImport) {
state.cache[filename] = true;
path.parentPath.insertBefore(hmrImport(t));
path.parentPath.insertBefore(declareWrapComponent(t, className, filename));
}

addImports(path.parentPath);

path.parentPath.insertAfter(wrapComponent(t, className));
}
};
};

visitor.Program = function(path, state) {
path.traverse({ ArrowFunctionExpression: arrowVisitor(state) });
// create unique identifers from the imports of react and react transform
const ReactId = path.scope.generateUidIdentifier('react');
const ReactTransformId = path.scope.generateUidIdentifier('reactTransform');

path.traverse({ ArrowFunctionExpression: arrowVisitor(state, ReactId, ReactTransformId) });
};

return {
Expand Down

0 comments on commit e3f95c9

Please sign in to comment.