svelte-draft
Version:
Develop svelte app in typedraft
162 lines (161 loc) • 8.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const types_1 = require("@babel/types");
const typedraft_1 = require("typedraft");
class OpeningElementVisitor {
Visit(e, generator) {
var _a, _b, _c, _d, _e;
const slot_props = (_b = (_a = FindChildJSXExpressionContainer(e)) === null || _a === void 0 ? void 0 : _a.get("expression")) === null || _b === void 0 ? void 0 : _b.get("params").find(each => each.isObjectPattern());
if (slot_props) {
const properties = slot_props.node.properties;
properties.forEach(each => {
const prop = each.key.name;
const alias = typedraft_1.ToString(each.value);
const name = types_1.jsxNamespacedName(types_1.jsxIdentifier("let"), types_1.jsxIdentifier(prop));
const value = types_1.jsxExpressionContainer(types_1.identifier(alias));
e.node.attributes.push(types_1.jsxAttribute(name, value));
});
}
e.node.attributes = e.node.attributes.reduce((container, attr) => {
if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && (attr.name.name === "on" || attr.name.name === "props")) {
const value = attr.value;
const config = value.expression;
const [event_config] = config.arguments;
const properties = event_config.properties;
properties.forEach(each => {
const prop = each.key.name;
const prop_value = typedraft_1.ToString(each.value);
const prefix = attr.name.name === "on" ? "on" : "";
const name = types_1.jsxIdentifier(`${prefix}${prop}`);
const value = types_1.stringLiteral(`{${prop_value}}`);
container.push(types_1.jsxAttribute(name, value));
});
}
else {
container.push(attr);
}
return container;
}, []);
e.node.attributes.forEach(attr => {
if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier") {
const name = attr.name.name;
if (DirectiveSet.has(name)) {
const value = attr.value;
const config = value.expression;
const args = config.arguments.map(arg => typedraft_1.ToString(arg, {
compact: true
}));
const [transition_function, transition_params] = args;
let namespace = name === "localTransition" ? `transition` : name;
let function_name = name === "localTransition" ? `${transition_function}${VerticalBar}local` : transition_function;
attr.name = types_1.jsxNamespacedName(types_1.jsxIdentifier(namespace), types_1.jsxIdentifier(function_name));
attr.value = transition_params ? types_1.stringLiteral(`{${transition_params}}`) : null;
}
else {
NamespaceList.forEach(namespace => {
if (TargetTable[name]) {
attr.name = types_1.jsxIdentifier(TargetTable[name]);
}
else if (name.startsWith(namespace)) {
const raw_target = name.substr(namespace.length);
const target = TargetTable[raw_target] || raw_target.toLowerCase();
attr.name = types_1.jsxNamespacedName(types_1.jsxIdentifier(namespace), types_1.jsxIdentifier(target));
}
});
}
}
});
const name = e.get("name");
if (!name.isJSXIdentifier())
return;
const Append = generator.Append.bind(generator);
const tag_name = name.node.name;
if (tag_name === "debug") {
Append(`{@debug `);
}
else if (tag_name === "raw-html") {
Append(`{@html `);
}
else if (tag_name === "if") {
const raw_condition = (_c = FindAttribute("condition", e)) === null || _c === void 0 ? void 0 : _c.node;
const condition = raw_condition ? typedraft_1.ToString(raw_condition.value.expression) : "__invalid condition__";
const _if = `{#if ${condition}}`;
Append(_if);
}
else if (tag_name === "else") {
const raw_condition = (_d = FindAttribute("condition", e)) === null || _d === void 0 ? void 0 : _d.node;
const condition = raw_condition ? ` if ${typedraft_1.ToString(raw_condition.value.expression)}` : "";
const _else = `{:else${condition}}`;
Append(_else);
}
else if (tag_name === "each") {
const raw_from = (_e = FindAttribute("from", e)) === null || _e === void 0 ? void 0 : _e.node;
const data = raw_from ? typedraft_1.ToString(raw_from.value.expression) : "__invalid data__";
const container = FindChildJSXExpressionContainer(e);
if (!container)
return;
const item = container.get("expression");
if (!item.isArrowFunctionExpression())
return;
const [value, index, key] = item.get("params").map(param => {
if (param.isIdentifier()) {
return param.node.name;
}
else if (param.isAssignmentPattern()) {
return {
is_key: true,
key_name: typedraft_1.ToString(param.get("right").node)
};
}
});
const item_part = `#each ${data} as ${value || "__invalid value__"}`;
const index_part = index ? index.is_key ? ` (${index.key_name})` : `, ${index}` : "";
const key_part = key ? ` (${key.key_name})` : "";
const each = `{${item_part}${index_part}${key_part}}`;
Append(each);
}
else if (tag_name === "await") {
const container = FindChildJSXExpressionContainer(e);
if (!container)
return;
const info = container.get("expression");
if (!info.isObjectExpression())
return;
const props = info.get("properties");
const promise = props.find(prop => prop.isObjectProperty() && prop.node.key.name === "promise");
const promise_name = `${typedraft_1.ToString(promise.node.value).split(".")[0]}`;
const _await = `{#await ${promise_name}}`;
Append(_await);
}
else {
const tag_name = e.get("name");
if (tag_name.isJSXIdentifier() && tag_name.node.name.startsWith("svelte")) {
tag_name.node.name = tag_name.node.name.replace("-", ":");
}
let element = typedraft_1.ToString(e.node);
element = element.replace(VerticalBar, "|");
Append(element);
}
}
}
exports.OpeningElementVisitor = OpeningElementVisitor;
const TargetTable = {
DoubleClick: "dblclick",
InnerHTML: "innerHTML",
contentEditable: "contenteditable",
Ref: "this",
ScrollY: "scrollY"
};
const NamespaceList = ["on", "bind"];
const DirectiveSet = new Set(["transition", "in", "out", "localTransition", "animate", "use"]);
const VerticalBar = "$VERTICAL_BAR$";
function FindAttribute(name, e) {
const attribute_list = e.get("attributes").filter(each => each.isJSXAttribute());
const attribute = attribute_list.find(attr => attr.get("name").isJSXIdentifier() && attr.get("name").node.name === name);
return attribute;
}
function FindChildJSXExpressionContainer(e) {
const tag = e.parentPath;
const container = tag.get("children").find(each => each.isJSXExpressionContainer());
return container;
}