Support for custom elements #121
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,6 @@ | ||
| var hyperx = require('hyperx') | ||
| var nanoHtmlCreateElement = require('./createElement') | ||
|
|
||
| module.exports = hyperx(nanoHtmlCreateElement, { comments: true }) | ||
| module.exports.default = module.exports | ||
| module.exports.createElement = nanoHtmlCreateElement |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,25 @@ | ||
| var convertSourceMap = require('convert-source-map') | ||
| var transformAst = require('transform-ast') | ||
| var through = require('through2') | ||
| var acorn = require('acorn') | ||
| var path = require('path') | ||
|
|
||
| var transform = require('./transform') | ||
|
|
||
| var SUPPORTED_VIEWS = ['nanohtml', 'bel', 'yo-yo', 'choo/html'] | ||
|
|
||
| module.exports = function (file, opts) { | ||
| if (/\.json$/.test(file)) return through() | ||
| var bufs = [] | ||
| var viewVariables = [] | ||
| var babelTemplateObjects = Object.create(null) | ||
| return through(write, end) | ||
|
|
||
| function write (buf, enc, next) { | ||
| bufs.push(buf) | ||
| next() | ||
| } | ||
|
|
||
| function end (cb) { | ||
| var src = Buffer.concat(bufs).toString('utf8') | ||
| var res | ||
|
|
@@ -42,13 +36,16 @@ module.exports = function yoYoify (file, opts) { | |
| this.push(res) | ||
| this.push(null) | ||
| } | ||
|
|
||
| function walk (node) { | ||
| var res | ||
|
|
||
| if (isSupportedView(node)) { | ||
| if (node.arguments[0].value === 'bel' || | ||
| node.arguments[0].value === 'choo/html' || | ||
| node.arguments[0].value === 'nanohtml') { | ||
| // html and choo/html have no other exports that may be used | ||
| node.edit.update('{ createElement: require("' + path.join(node.arguments[0].value, '/lib/createElement") }')) | ||
|
There was a problem hiding this comment. would it make sense to just do
There was a problem hiding this comment. Yeah, that was my first idea, but then I thought it wouldn't be a good idea to "reuse" an already existent api. I mean, one might want to: var html = require('nanohtml')
var foo = function (strings, ...keys) {
// do stuff
return html(strings, ...keys)
}
var bar = html`<span>HELLO</span>`You are absolutely right about |
||
| } | ||
| if (node.parent.type === 'VariableDeclarator') { | ||
| viewVariables.push(node.parent.id.name) | ||
|
|
@@ -67,7 +64,8 @@ module.exports = function yoYoify (file, opts) { | |
| if (node.type === 'TemplateLiteral' && node.parent.tag) { | ||
| var name = node.parent.tag.name || (node.parent.tag.object && node.parent.tag.object.name) | ||
| if (viewVariables.indexOf(name) !== -1) { | ||
| res = apply(name, [ node.quasis.map(cooked) ].concat(node.expressions.map(expr))) | ||
| node.parent.update(res) | ||
| } | ||
| } | ||
| if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && viewVariables.indexOf(node.callee.name) !== -1) { | ||
|
|
@@ -78,15 +76,17 @@ module.exports = function yoYoify (file, opts) { | |
| // Emitted by Buble. | ||
| template = node.arguments[0].elements.map(function (part) { return part.value }) | ||
| expressions = node.arguments.slice(1).map(expr) | ||
| res = apply(node.callee.name, [ template ].concat(expressions)) | ||
| node.update(res) | ||
| } else if (node.arguments[0] && node.arguments[0].type === 'Identifier') { | ||
| // Detect transpiled template strings like: | ||
| // html(_templateObject, {id: "test"}) | ||
| // Emitted by Babel. | ||
| var templateObject = babelTemplateObjects[node.arguments[0].name] | ||
| template = templateObject.elements.map(function (part) { return part.value }) | ||
| expressions = node.arguments.slice(1).map(expr) | ||
| res = apply(node.callee.name, [ template ].concat(expressions)) | ||
| node.update(res) | ||
|
|
||
| // Remove the _taggedTemplateLiteral helper call | ||
| templateObject.parent.edit.update('0') | ||
|
|
@@ -95,166 +95,31 @@ module.exports = function yoYoify (file, opts) { | |
| } | ||
| } | ||
|
|
||
| var apply = transform.factory({ | ||
| arrayExpression: function (elements) { | ||
| return '[' + elements.join(',') + ']' | ||
| }, | ||
| objectExpression: function (properties) { | ||
| return '{' + properties.join(',') + '}' | ||
| }, | ||
| objectProperty: function (key, value, computed) { | ||
| return computed | ||
| ? ('[' + key + ']' + ':' + value) | ||
| : (key + ':' + value) | ||
|
There was a problem hiding this comment. choo aims to work in IE 11 + so we can't use ES6+ syntax in the transform output |
||
| }, | ||
| stringLiteral: function (value) { | ||
| return JSON.stringify(value) | ||
| }, | ||
| callCreateElement (html, tag, props, children) { | ||
| return html + '.createElement(' + tag + ',' + props + ',' + children + ')' | ||
| }, | ||
| callObjectAssign (objects) { | ||
| return 'Object.assign(' + objects.join(',') + ')' | ||
|
There was a problem hiding this comment. Object.assign also doesn't exist yet in IE11 … choo uses the IE 11 will probably be dropped in choo 7 but not yet: choojs/choo#616 |
||
| }, | ||
| stringConcat: function (a, b) { | ||
| return a + '+' + b | ||
| } | ||
| }) | ||
|
|
||
| function isSupportedView (node) { | ||
| return (node.type === 'CallExpression' && | ||
|
|
@@ -269,32 +134,4 @@ function BabelTemplateDefinition (node) { | |
| } | ||
|
|
||
| function cooked (node) { return node.value.cooked } | ||
| function expr (ex) { return transform.expr(ex.source()) } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good,
choo.viewis long gone afaik 👍