forked from developit/htm
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.mjs
More file actions
177 lines (160 loc) · 5.79 KB
/
Copy pathindex.mjs
File metadata and controls
177 lines (160 loc) · 5.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
import { JSDOM } from 'jsdom';
const before = global.document;
global.document = new JSDOM().window.document;
const htm = require('htm');
global.document = before;
// htm() uses the HTML parser, which serializes attribute values.
// this is a problem, because composite values here can be made up
// of strings and AST nodes, which serialize to [object Object].
// Since the handoff from AST node handling to htm() is synchronous,
// this global lookup will always reflect the corresponding
// AST-derived values for the current htm() invocation.
let currentExpressions;
/**
* @param {Babel} babel
* @param {object} options
* @param {string} [options.pragma=h] JSX/hyperscript pragma.
* @param {string} [options.tag=html] The tagged template "tag" function name to process.
* @param {boolean} [options.monomorphic=false] Output monomorphic inline objects instead of using String literals.
*/
export default function htmBabelPlugin({ types: t }, options = {}) {
const pragma = options.pragma===false ? false : dottedIdentifier(options.pragma || 'h');
const inlineVNodes = options.monomorphic || pragma===false;
function dottedIdentifier(keypath) {
const path = keypath.split('.');
let out;
for (let i=0; i<path.length; i++) {
const ident = propertyName(path[i]);
out = i===0 ? ident : t.memberExpression(out, ident);
}
return out;
}
function patternStringToRegExp(str) {
const parts = str.split('/').slice(1);
const end = parts.pop() || '';
return new RegExp(parts.join('/'), end);
}
function propertyName(key) {
if (key.match(/(^\d|[^a-z0-9_$])/i)) return t.stringLiteral(key);
return t.identifier(key);
}
function stringValue(str) {
if (options.monomorphic) {
return t.objectExpression([
t.objectProperty(propertyName('type'), t.numericLiteral(3)),
t.objectProperty(propertyName('tag'), t.nullLiteral()),
t.objectProperty(propertyName('props'), t.nullLiteral()),
t.objectProperty(propertyName('children'), t.nullLiteral()),
t.objectProperty(propertyName('text'), t.stringLiteral(str))
]);
}
return t.stringLiteral(str);
}
function createVNode(tag, props, children) {
if (inlineVNodes) {
return t.objectExpression([
options.monomorphic && t.objectProperty(propertyName('type'), t.numericLiteral(1)),
t.objectProperty(propertyName('tag'), tag),
t.objectProperty(propertyName('props'), props),
t.objectProperty(propertyName('children'), children),
options.monomorphic && t.objectProperty(propertyName('text'), t.nullLiteral())
].filter(Boolean));
}
return t.callExpression(pragma, [tag, props, children]);
}
let isVNode = t.isCallExpression;
if (inlineVNodes) {
isVNode = node => {
if (!t.isObjectExpression(node)) return false;
return node.properties[0].value.value!==3;
};
}
function childMapper(child, index, children) {
// JSX-style whitespace: (@TODO: remove? doesn't match the browser version)
if (typeof child==='string' && child.trim().length===0 || child==null) {
if (index===0 || index===children.length-1) return null;
}
if (typeof child==='string' && isVNode(children[index-1]) && isVNode(children[index+1])) {
child = child.trim();
}
if (typeof child==='string') {
const matches = child.match(/\$\$\$_h_\[(\d+)\]/);
if (matches) return currentExpressions[matches[1]];
return stringValue(child);
}
return child;
}
function h(tag, props) {
if (typeof tag==='string') {
const matches = tag.match(/\$\$\$_h_\[(\d+)\]/);
if (matches) tag = currentExpressions[matches[1]];
else tag = t.stringLiteral(tag);
}
//const propsNode = props==null || Object.keys(props).length===0 ? t.nullLiteral() : t.objectExpression(
const propsNode = t.objectExpression(
Object.keys(props).map(key => {
let value = props[key];
if (typeof value==='string') {
const tokenizer = /\$\$\$_h_\[(\d+)\]/g;
let token, lhs, root, index=0, lastIndex=0;
const append = expr => {
if (lhs) expr = t.binaryExpression('+', lhs, expr);
root = lhs = expr;
};
while ((token = tokenizer.exec(value))) {
append(t.stringLiteral(value.substring(index, token.index)));
append(currentExpressions[token[1]]);
index = token.index;
lastIndex = tokenizer.lastIndex;
}
if (lastIndex < value.length) {
append(t.stringLiteral(value.substring(lastIndex)));
}
value = root;
}
else if (typeof value==='boolean') {
value = t.booleanLiteral(value);
}
return t.objectProperty(propertyName(key), value);
})
);
// recursive iteration of possibly nested arrays of children.
let children = [];
if (arguments.length>2) {
const stack = [];
// eslint-disable-next-line prefer-rest-params
for (let i=arguments.length; i-->2; ) stack.push(arguments[i]);
while (stack.length) {
const child = stack.pop();
if (Array.isArray(child)) {
for (let i=child.length; i--; ) stack.push(child[i]);
}
else if (child!=null) {
children.push(child);
}
}
children = children.map(childMapper).filter(Boolean);
}
children = t.arrayExpression(children);
return createVNode(tag, propsNode, children);
}
const html = htm.bind(h);
// The tagged template tag function name we're looking for.
// This is static because it's generally assigned via htm.bind(h),
// which could be imported from elsewhere, making tracking impossible.
const htmlName = options.tag || 'html';
return {
name: 'htm',
visitor: {
TaggedTemplateExpression(path) {
const tag = path.node.tag.name;
if (htmlName[0]==='/' ? patternStringToRegExp(htmlName).test(tag) : tag === htmlName) {
const statics = path.node.quasi.quasis.map(e => e.value.raw);
const expr = path.node.quasi.expressions;
currentExpressions = expr;
path.replaceWith(html(statics, ...expr.map((p, i) => `$$$_h_[${i}]`)));
}
}
}
};
}