Skip to content

Handle braces in text. #45

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

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all 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
8 changes: 7 additions & 1 deletion src/cli.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ function getArgs() {
)
.describe('className', 'Create a React component (wraps JSX in React.createClass call)')
.alias('className', 'c')
.boolean('e')
.describe('e', 'Decide whether to wrap in module.exports')
Copy link
Member

Choose a reason for hiding this comment

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

This option seems useful, but it's not really relevant to this pull request. Could you please split it out into a separate one? I think because you created this pull request off your master branch, Github is including all the changes on your master branch. You should make a separate branch with just the changes you want to submit :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Cheers, I resubmitted the braces change in a separate PR. The other changes are submitted as before. I was not sure how to break the second set of changes into it's own PR without dependence on the earlier commits, so I left it alone.

.boolean('g')
.describe('g', 'Decide whether to format for grouping with other jsx files(i.e. no wrapper)')
.help('help')
.example(
'$0 -c AwesomeComponent awesome.htm',
Expand All @@ -38,7 +42,9 @@ function main() {
}
var converter = new HTMLtoJSX({
createClass: !!argv.className,
outputClassName: argv.className
outputClassName: argv.className,
exports: argv.e && !argv.g,
group: argv.g && !argv.e
});
var output = converter.convert(input);
console.log(output);
Expand Down
28 changes: 19 additions & 9 deletions src/htmltojsx.js
Original file line number Diff line number Diff line change
Expand Up @@ -198,14 +198,19 @@ HTMLtoJSX.prototype = {
var containerEl = createElement('div');
containerEl.innerHTML = '\n' + this._cleanInput(html) + '\n';

if (this.config.createClass) {
if (this.config.outputClassName) {
this.output = 'var ' + this.config.outputClassName + ' = React.createClass({\n';
} else {
this.output = 'React.createClass({\n';
if (this.config.exports) {
this.output = 'module.exports = ';
} else if (this.config.group){
} else {
if (this.config.createClass) {
if (this.config.outputClassName) {
this.output = 'var ' + this.config.outputClassName + ' = React.createClass({\n';
} else {
this.output = 'React.createClass({\n';
}
this.output += this.config.indent + 'render: function() {' + "\n";
this.output += this.config.indent + this.config.indent + 'return (\n';
}
this.output += this.config.indent + 'render: function() {' + "\n";
this.output += this.config.indent + this.config.indent + 'return (\n';
}

if (this._onlyOneTopLevel(containerEl)) {
Expand All @@ -224,7 +229,7 @@ HTMLtoJSX.prototype = {
this.output += this.config.indent + this.config.indent + ');\n';
this.output += this.config.indent + '}\n';
this.output += '});';
}
}else if (this.config.exports){ this.output += ';';}
return this.output;
},

Expand Down Expand Up @@ -434,7 +439,7 @@ HTMLtoJSX.prototype = {
return;
}

var text = escapeSpecialChars(node.textContent)
var text = escapeSpecialChars(node.textContent);

if (this._inPreTag) {
// If this text is contained within a <pre>, we need to ensure the JSX
Expand All @@ -446,6 +451,11 @@ HTMLtoJSX.prototype = {
return '{' + JSON.stringify(whitespace) + '}';
});
} else {
// Handle any curly braces.
text = text
.replace(/(\{|\})/g, function(brace) {
return '{\'' + brace + '\'}';
});
// If there's a newline in the text, adjust the indent level
if (text.indexOf('\n') > -1) {
text = text.replace(/\n\s*/g, this._getIndentedNewline());
Expand Down