<script>
const some = {
blocks: <?=json_encode($blocks)?>
}
</script>
const loadFirst = () => import(`first-component-path.vue`);
Vue.component("first-component", loadFirst);
Vue.component("second-component", async () => {
await loadFirst();
return import(`second-component-path.vue`);
});
Vue.component("third-component", () => loadFirst().then(() => import(`third-component-path.vue`)))
А как его тормознуть
const ts = require('typescript');
function isReadonly(node) {
return node.modifiers.some(
modifier => modifier.kind === ts.SyntaxKind.ReadonlyKeyword
)
}
function isSuperCall(node) {
return ts.isExpressionStatement(node) && ts.isCallExpression(node.expression) && node.expression.expression.kind === ts.SyntaxKind.SuperKeyword;
}
module.exports = () => ({
before: [ctx => {
return sourceFile => {
function visitor(node) {
if (ts.isClassExpression(node) || ts.isClassDeclaration(node)) {
const readonlyDeclarations = [];
let constructorStatements = null;
node.members = node.members.filter(member => {
if (ts.isPropertyDeclaration(member) && isReadonly(member)) {
let name = member.name;
if (ts.isComputedPropertyName(name)) {
return true;
} else if (ts.isIdentifier(name)) {
name = ts.createStringLiteral(name.escapedText);
}
readonlyDeclarations.push(ts.createObjectDefinePropertyCall(ts.createThis(), name, ts.createPropertyDescriptor({
value: member.initializer || ts.createVoidZero(),
configurable: true,
writable: false,
enumerable: true
})));
return false;
} else if (ts.isConstructorDeclaration(member) && member.body) {
constructorStatements = member.body.statements;
}
return true;
});
if (readonlyDeclarations.length) {
if (constructorStatements)
constructorStatements.splice(constructorStatements.findIndex(isSuperCall) + 1, 0, ...readonlyDeclarations);
else node.members.push(
ts.createConstructor(
undefined,
undefined,
undefined,
ts.createBlock(readonlyDeclarations)
)
);
}
}
return ts.visitEachChild(node, visitor, ctx);
}
return ts.visitEachChild(sourceFile, visitor, ctx);
};
}]
});
const path = require('path');
module.exports = {
chainWebpack: config => {
['ts', 'tsx'].forEach(rule => config.module
.rule(rule)
.use('ts-loader')
.loader('ts-loader')
.tap(options => Object.assign(options, {
getCustomTransformers: path.join(__dirname, './transform.js')
})));
}
}
writable: true
на writable: !hasModifier(property, ModifierFlags.Readonly)
(+флаг useDefineForClassFields)
Именно.
Но не нужно.
Именно.
БЭМ была создана до Vue и до Web-components, тогда не было возможности инкапсулировать стили в компоненты, были только глобальные стили. Сейчас такая возможность есть, и куда логичнее ею пользоваться, слегка адаптировав систему(причём ни в чём не противореча ей) и сильно облегчая себе жизнь, чем отказываться из-за фанатичного догматизма.
Компонент сам по себе задаёт новое пространство имён.