Ctrl++. Если ты хочешь тупо такое же масштабирование, то не надо*.
import { ref, h } from 'vue';
function loadScript(options, root = document.head) {
return root.appendChild(Object.assign(document.createElement('script'), options));
}
const Comp = defineComponent(() => {
const root = ref(null);
onMounted(() => {
loadScript(
{
innerHTML: `
!(function (a, m, o, c, r, m) {
(a[o + c] = a[o + c] || {
setMeta: function (p) {
this.params = (this.params || []).concat([p]);
},
}),
(a[o + r] =
a[o + r] ||
function (f) {
a[o + r].f = (a[o + r].f || []).concat([f]);
}),
a[o + r]({
id: "....",
hash: "....",
locale: "ru",
}),
(a[o + m] =
a[o + m] ||
function (f, k) {
a[o + m].f = (a[o + m].f || []).concat([[f, k]]);
});
})(window, 0, "amo_forms_", "params", "load", "loaded");
`
},
root.value
);
loadScript(
{
id: 'amoforms_script_...',
async: 'async',
charset: 'utf-8',
src: 'https://forms.amocrm.ru/forms/assets/js/amoforms.js?...'
},
root.value
);
});
return () => h('div', { ref: root });
});useMemo нужен, чтобы при передаче значения как prop в низлежащий memo компонент не происходила перерисовка оного если не было изменений(+при передаче как зависимость в другой хук, тот не срабатывал заново).useMemo и пойдёт водопадом перерисовка на каждый чих каждого компонента по всему дереву вниз. И именно это является основной причиной тормозов в React, а не какие-то там мифические сложные вычисления.useMemo "только в узких местах" и нигде больше. Прикол в том, что с таким подходом при разрастании проекта никакого "узкого места" просто нет, тормозить начинает просто потому, что складываются тысячи микротормозов от тысяч перерисовок тысяч компонентов: наступает то самое "потом" и тут придётся переписывать с useMemo чуть ли не весь проект, чтоб снизить эти тормоза.useMemo стараются таки использовать заранее в каждом месте, где оно потенциально нужно. Некоторые радикальные философии вообще предполагают использование useMemo просто всегда, без исключений.:)
script type="module" через import(никаких глобальных вызовов)./browse.<script type="importmap">
{
"imports": {
"tictic": "https://unpkg.com/tictic@0.1.0/esm/index.js",
"tslib": "https://unpkg.com/tslib@2.6.2/tslib.es6.js"
}
}
</script>
<script type="module">
import { getDate } from 'tictic';
console.log(getDate({}));
</script>[role="row"]:has(.fraud) {
background-color: #f1f7bc;
}[role="row"] {
position: relative;
background-color: transparent;
}
[role="row"] .fraud::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f1f7bc;
}MutationObserver и следить за появлением новых [role="row"].
paths в tsconfig работают только визуально. Чтобы они работали физически - надо продублирвать их в алиасы того сборщика, который вы используете.paths - не первичны, а вторичны: они сделаны как отражение возможностей алиасов в сборщиков, а не как самостоятельная фича.
const lines = [1, 2, 3];
return lines.map(line => (
<p> {line} </p>
));function Component() {
const [lines, setLines] = useState([1, 2, 3]);
const addLine = useCallback(() => {
setLines(lines => [...lines, lines.length+1])
});
return(
<>
<button onClick={addLine} className="button">
addLine
</button>
{lines.map(line => (
<p> {line} </p>
))}
</>
}setTimeout(тут я обернул его в Promise для простоты и наглядности):const delay = (ms) => new Promise(r => setTimeout(r, ms))
function Component() {
const [lines, setLines] = useState([]);
const addLines = useCallback(async () => {
let i = 0;
while(i++ < 10) {
await delay(1000);
setLines(lines => [...lines, i])
}
});
return(
<>
<button onClick={addLines} className="button">
addLine
</button>
{lines.map(line => (
<p> {line} </p>
))}
</>
);
}function manualSmoothScroll(event) {
// находим хэш ссылу по которой мы кликнули
const id = event.target.closest('a[href^="#"]')?.hash;
// если клик куда-то ещё - ничего не делаем
if (!id) return;
// находим цель куда будем скроллить по хэшу
const target = document.querySelector(id);
// если не нашли - ничего не делаем
if (!target) return;
// отменяем стандартный переход
event.preventDefault();
// едем руками
target.scrollIntoView({ behavior: "smooth" });
}
// при загрузке
addEventListener('click', manualSmoothScroll, true);
// при выгрузке
removeEventListener('click', manualSmoothScroll, true);
// если действовать надо только в рамках элнметата
// elementRef.value.addEvent... elementRef.value.removeve...
// или this.$refs.element...
// или this.$el...fetch в котором у Request body - это ReadableStream, растянув таким образом запрос настолько - насколько надо. Но это всё же не совсем то же самое что просто медленный запрос.