Lit Vs Svelte

Posted on  by admin

Final Notes

since January 2021 release

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language. Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:. ..probably many others. (Idyll is an outlier as it's geared towards a specific use case, rather than general purpose app development, but I think it qualifies as an example.).

since May 2021 release

PackageStarsIssuesForksTotal Contributors
Packagelit-elementStars11,334Issues2,635Forks585Total Contributors97
Packagelit-htmlStars11,335Issues2,635Forks585Total Contributors97
PackagemarkoStars11,274Issues1,777Forks634Total Contributors99
PackagesvelteStars57,752Issues7,346Forks2,844Total Contributors98

since Nov 2021 release

PackageDescriptionAuthorLinksKeywords
Packagelit-elementDescriptionA simple base class for creating fast, lightweight web componentsAuthorGoogle LLCLinksKeywords
Packagelit-htmlDescriptionHTML templates literals in JavaScriptAuthorGoogle LLCLinksKeywords
PackagemarkoDescriptionUI Components + streaming, async, high performance, HTML templating for Node.js and the browser.AuthorPatrick Steele-IdemLinksKeywordsfront-end, templating, template, async, streaming, components, ui, vdom, dom, morphdom, virtual, virtual-dom,
PackagesvelteDescriptionCybernetically enhanced web appsAuthorRich HarrisLinksKeywordsUI, framework, templates, templating,

Estimated Bundle size of 30 components using the same library

PackageDependenciesDev Dependencies
Packagelit-element[email protected]/reactive-element,lit-htmlDev [email protected]/chai,@types/chai,@types/mocha,@webcomponents/shadycss,@webcomponents/template,@webcomponents/webcomponentsjs,chokidar-cli,downlevel-dts,internal-scripts,mocha,rollup,tslib,typescript
Packagelit-html[email protected]/trusted-typesDev [email protected]/chai,@types/mocha,@types/web-ie11,@web/test-runner-mocha,@webcomponents/shadycss,@webcomponents/template,@webcomponents/webcomponentsjs,chokidar-cli,concurrently,internal-scripts,mocha,rollup,typescript
Packagemarko[email protected]/compiler,@marko/translator-default,app-module-path,argly,browser-refresh-client,complain,events-light,listener-tracker,minimatch,raptor-util,resolve-from,self-closing-tags,warp10Dev DependenciesN/A
PackagesvelteDependenciesN/ADev [email protected]/remapping,@rollup/plugin-commonjs,@rollup/plugin-json,@rollup/plugin-node-resolve,@rollup/plugin-replace,@rollup/plugin-sucrase,@rollup/plugin-typescript,@rollup/plugin-virtual,@sveltejs/eslint-config,@types/mocha,@types/node,@typescript-eslint/eslint-plugin,@typescript-eslint/parser,acorn,agadoo,code-red,css-tree,eslint,eslint-plugin-import,eslint-plugin-svelte3,estree-walker,is-reference,jsdom,kleur,locate-character,magic-string,mocha,periscopic,puppeteer,rollup,source-map,source-map-support,sourcemap-codec,tiny-glob,tslib,typescript

Bundle size of 1 component

PackageTo InstallTo Remove
Packagelit-elementTo Installnpm i -S lit-elementTo Removenpm r -S lit-element
Packagelit-htmlTo Installnpm i -S lit-htmlTo Removenpm r -S lit-html
PackagemarkoTo Installnpm i -S markoTo Removenpm r -S marko
PackagesvelteTo Installnpm i -S svelteTo Removenpm r -S svelte