Skip to content

Commit

Permalink
feat: simplify string template
Browse files Browse the repository at this point in the history
  • Loading branch information
yuluyi committed May 5, 2017
1 parent 4953923 commit 7165585
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 40 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"validate-commit-message": "^3.0.1"
},
"dependencies": {
"decamelize": "^1.2.0",
"loader-utils": "^1.1.0",
"vulcanize": "^1.15.4"
},
Expand Down
39 changes: 39 additions & 0 deletions react/componentGenerator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const React = require('react')
const ReactDOM = require('react-dom')
const decamelize = require('decamelize')
const htmlModuleLoader = require('./htmlModuleLoader')
const syncEvent = require('./syncEvent')

module.exports = function(tagName, url) {
return class ReactComponent extends React.Component {
static displayName = tagName

componentDidMount() {
this.componentWillReceiveProps(this.props)
htmlModuleLoader(url, () => {
this.componentWillReceiveProps(this.props)
}, function(e) {
console.err('Load html module failed:', e)
})
}

componentWillReceiveProps(props) {
const node = ReactDOM.findDOMNode(this)
Object.keys(props).forEach(key => {
if (key === 'children' || key === 'style') return

if (props[key] === node[key]) return

if (key.indexOf('on') === 0 && key[2] === key[2].toUpperCase()) {
syncEvent(node, decamelize(key.substring(2), '-'), props[key])
} else {
node[key] = props[key]
}
})
}

render() {
return React.createElement(tagName, { style: this.props.style }, this.props.children)
}
}
}
2 changes: 1 addition & 1 deletion react/generateTemplate.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module.exports = function(meta) {
return ("var React = require('react')\nvar ReactDOM = require('react-dom')\nvar syncEvent = require('html-imports-loader/react/syncEvent')\nvar htmlModuleLoader = require('html-imports-loader/react/htmlModuleLoader')\n\nmodule.exports = (function (superclass) {\n function ReactComponent () {\n superclass.apply(this, arguments);\n }\n\n if ( superclass ) ReactComponent.__proto__ = superclass;\n ReactComponent.prototype = Object.create( superclass && superclass.prototype );\n ReactComponent.prototype.constructor = ReactComponent;\n\n var staticAccessors = { displayName: {} };\n\n staticAccessors.displayName.get = function () {\n return '" + (meta.tagName) + "';\n };\n ReactComponent.prototype.componentDidMount = function componentDidMount () {\n var this$1 = this;\n\t this$1.componentWillReceiveProps(this$1.props);\n htmlModuleLoader(['" + (meta.url) + "'], function () {\n this$1.componentWillReceiveProps(this$1.props);\n }, function(e) {\n console.err('Load html module failed:', e)\n });\n };\n ReactComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps (props) {\n var node = ReactDOM.findDOMNode(this);\n Object.keys(props).forEach(function (name) {\n if (name === 'children' || name === 'style') {\n return;\n }\n\n if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n syncEvent(node, name.substring(2), props[name]);\n } else {\n node[name] = props[name];\n }\n });\n };\n ReactComponent.prototype.render = function render () {\n return React.createElement('" + (meta.tagName) + "', { style: this.props.style }, this.props.children);\n };\n\n Object.defineProperties( ReactComponent, staticAccessors );\n\n return ReactComponent;\n}(React.Component))")
return ("var componentGenerator = require('babel-loader!html-imports-loader/react/componentGenerator'); module.exports = componentGenerator(\"" + meta.tagName + "\", \"" + meta.url + "\")")
}
77 changes: 38 additions & 39 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


"@bahmutov/parse-github-repo-url@^0.1.0":
version "0.1.2"
resolved "https://registry.npmjs.org/@bahmutov/parse-github-repo-url/-/parse-github-repo-url-0.1.2.tgz#6311dfbe7fe00ac464b9069d0e2684a739aeb69b"
Expand Down Expand Up @@ -43,14 +41,14 @@
version "0.1.30"
resolved "https://registry.npmjs.org/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"

"@types/node@6.0.*":
version "6.0.66"
resolved "https://registry.npmjs.org/@types/node/-/node-6.0.66.tgz#5680b74a6135d33d4c00447e7c3dc691a4601625"

"@types/node@^4.0.30":
version "4.2.4"
resolved "https://registry.npmjs.org/@types/node/-/node-4.2.4.tgz#4024bbd6e5000e9fef6db3333042112a2d82247c"

"@types/node@6.0.*":
version "6.0.66"
resolved "https://registry.npmjs.org/@types/node/-/node-6.0.66.tgz#5680b74a6135d33d4c00447e7c3dc691a4601625"

"@types/parse5@^0.0.31":
version "0.0.31"
resolved "https://registry.npmjs.org/@types/parse5/-/parse5-0.0.31.tgz#e827a493a443b156e1b582a2e4c3bdc0040f2ee7"
Expand All @@ -67,14 +65,14 @@ acorn-jsx@^3.0.0:
dependencies:
acorn "^3.0.4"

acorn@4.0.4:
version "4.0.4"
resolved "https://registry.npmjs.org/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"

acorn@^3.0.4:
version "3.3.0"
resolved "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"

acorn@4.0.4:
version "4.0.4"
resolved "https://registry.npmjs.org/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"

ajv@^4.9.1:
version "4.11.5"
resolved "https://registry.npmjs.org/ajv/-/ajv-4.11.5.tgz#b6ee74657b993a01dce44b7944d56f485828d5bd"
Expand Down Expand Up @@ -128,14 +126,14 @@ asn1@~0.2.3:
version "0.2.3"
resolved "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"

assert-plus@1.0.0, assert-plus@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"

assert-plus@^0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"

assert-plus@^1.0.0, assert-plus@1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"

async@^2.0.1:
version "2.2.0"
resolved "https://registry.npmjs.org/async/-/async-2.2.0.tgz#c324eba010a237e4fbd55a12dee86367d5c0ef32"
Expand Down Expand Up @@ -254,7 +252,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
dependencies:
delayed-stream "~1.0.0"

commander@2.9.0, commander@^2.9.0:
commander@^2.9.0, commander@2.9.0:
version "2.9.0"
resolved "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
dependencies:
Expand Down Expand Up @@ -333,7 +331,7 @@ dateformat@^1.0.11:
get-stdin "^4.0.1"
meow "^3.3.0"

decamelize@^1.1.2:
decamelize, decamelize@^1.1.2:
version "1.2.0"
resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"

Expand Down Expand Up @@ -739,14 +737,14 @@ is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"

isarray@0.0.1:
version "0.0.1"
resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"

isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"

isarray@0.0.1:
version "0.0.1"
resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"

isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
Expand Down Expand Up @@ -973,14 +971,14 @@ mime@^1.2.11:
version "1.3.4"
resolved "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"

minimist@0.0.8:
version "0.0.8"
resolved "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

minimist@^1.1.3:
version "1.2.0"
resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

minimist@0.0.8:
version "0.0.8"
resolved "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

mkdirp@^0.5.0:
version "0.5.1"
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
Expand Down Expand Up @@ -1061,15 +1059,6 @@ npmconf@^2.1.2:
semver "2 || 3 || 4"
uid-number "0.0.5"

"npmlog@2 || ^3.1.0 || ^4.0.0", npmlog@^4.0.0:
version "4.0.2"
resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
dependencies:
are-we-there-yet "~1.1.2"
console-control-strings "~1.1.0"
gauge "~2.7.1"
set-blocking "~2.0.0"

npmlog@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/npmlog/-/npmlog-1.2.1.tgz#28e7be619609b53f7ad1dd300a10d64d716268b6"
Expand All @@ -1078,6 +1067,15 @@ npmlog@^1.2.1:
are-we-there-yet "~1.0.0"
gauge "~1.2.0"

npmlog@^4.0.0, "npmlog@2 || ^3.1.0 || ^4.0.0":
version "4.0.2"
resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
dependencies:
are-we-there-yet "~1.1.2"
console-control-strings "~1.1.0"
gauge "~2.7.1"
set-blocking "~2.0.0"

number-is-nan@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
Expand Down Expand Up @@ -1393,7 +1391,7 @@ semantic-release@^6.3.2:
run-series "^1.1.3"
semver "^5.0.3"

"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0:
semver@^5.0.3, semver@^5.1.0, "semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5":
version "5.3.0"
resolved "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

Expand Down Expand Up @@ -1482,6 +1480,10 @@ stream-combiner@~0.0.4:
dependencies:
duplexer "~0.1.1"

string_decoder@~0.10.x:
version "0.10.31"
resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"

string-width@^1.0.1:
version "1.0.2"
resolved "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
Expand All @@ -1490,10 +1492,6 @@ string-width@^1.0.1:
is-fullwidth-code-point "^1.0.0"
strip-ansi "^3.0.0"

string_decoder@~0.10.x:
version "0.10.31"
resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"

stringstream@~0.0.4:
version "0.0.5"
resolved "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
Expand Down Expand Up @@ -1524,7 +1522,7 @@ supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

through@2, through@~2.3, through@~2.3.1:
through@~2.3, through@~2.3.1, through@2:
version "2.3.8"
resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"

Expand Down Expand Up @@ -1657,3 +1655,4 @@ xtend@^4.0.0:
yallist@^2.0.0:
version "2.1.2"
resolved "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"

0 comments on commit 7165585

Please sign in to comment.