Migrating from Vue 2 to Svelte

Post by veidelis » Fri, Dec 02, 2022, 11:29 AM UTC

randomsearch wrote: post #81

snowl wrote: post #7

Still don't understand why people prefer magic templated front-end frameworks. Reading non-standard HTML just sucks. What even is "$:" or why does Vue require non-standard javascript ref("") objects...

If you want a serious answer: because frameworks do a lot of work for you. For example, they will keep state synchronised between your data model and components (and with some handy plugins, your server). They allow encapsulation and reuse through a well thought out set of abstractions. They provide functionality like routing and app-wide data stores with transactions. If you’re just building a webpage no problem, us…

Post by [deleted] » Fri, Dec 02, 2022, 11:36 AM UTC

Elte wrote: post #12

lmiller1990 wrote: post #6

Re events - You can type events in Vue with `defineEmits`: https://vuejs.org/api/sfc-script-setup.html#defineprops-defi... Re global enums - I'm not sure what the author means about global enums - anything imported into your Vue file can be used in the ` `. Re styles - Style is automatically scoped in Vue SFC files, too - I believe it was the first component framework to do this. This article and migration seems not…

I've got a couple of templates where I've aliased the value of a TypeScript enum into a local variable before using it in the template, so I'm pretty certain at that point I was unable to use the value of the enum directly (that's also how I remember it). However, I just tried it and...it seems to just work now. So thanks for making me revisit that :D.

Post by timeon » Fri, Dec 02, 2022, 11:43 AM UTC

rob74 wrote: post #16

allanrbo wrote: post #4

It seems worrisome that front end frameworks needs to be changed after just two years of use. Glad I'm not working with front end...

As another comment mentioned, migrating from Vue 2 to Vue 3 is mostly trivial, so this is probably just a case of preferring the new shiny over the old formerly shiny now slightly tarnished...

Post by veidelis » Fri, Dec 02, 2022, 11:45 AM UTC

kevinak wrote: post #145

snowl wrote: post #116

Earlier quoted context omitted.

JSX compiles down to standard JS

...so does Svelte?

    createElement(
        "div", {
            className: ["recipeTile", { lastRow: options.lastRow, lastColumn: options.lastColumn }],
            onclick: function () { showHideRecipe(recipe.name) }
        }, [
            createElement("img", { src: "./static/images/" + recipe.name + ".jpg" }),
            createElement("div", { className: "details" }, [
                createElement("div", { className: "name" }, capitalize(recipe.name)),
                createElement("div", { className: "ingredients", }, Object.keys(recipe.ingredients).map(function(ingredientName) {
                    return capitalize(ingredientName);
                }).join(", "))
            ])
        ]
    );

    function createElement(type, attributes, children) {
        var element = document.createElement(type);
    
        Object.keys(attributes).forEach(function(key) {
            if (key === "className") {
                classNames(attributes[key]).forEach(function (className) {
                    element.classList.add(className);
                });
            } else if (key.indexOf("on") === 0) {
                element.addEventListener(key.replace("on", ""), attributes[key], false);
            } else {
                element.setAttribute(key, attributes[key]);
            }
        });
    
        if (Array.isArray(children)) {
            children.forEach(function(child) {
                child && element.appendChild(child);
            });
        } else if (typeof children === "string") {
            element.textContent = children;
        } else if (children) {
            element.appendChild(children);
        }
    
        return element;
    }

Post by timeon » Fri, Dec 02, 2022, 11:55 AM UTC

wetpaws wrote: post #2

Migrating from svelte to when