[{"type":"blog","content":"Compiling Svelte into UMD bundles.\r\n\r\n## Svelte in Razor Views using UMD \r\n\r\nI've been experimenting further with including Svelte in Razor Views. Originally, I was [compiling Svelte components to web components](https://darrens-blog.netlify.app/svelte-razor-views). Now, I've setup a [new project that instead compiles the Svelte files into UMD bundles](https://github.com/DarrenGrafton/SvelteRazorViewsUMD).\r\n\r\n\r\n\r\nBelow is the video where I picked up this technique:\r\n\r\n[Jesse Skinner - Adding Svelte to your legacy projects](https://www.youtube.com/watch?v=uWxkaDdqfpI)\r\n\r\nWhat I prefer about this technique is the ability to set the \"target\" and props for a Svelte component in the script tag of the Razor Page using the component, rather that including that information as part of the bundle.\r\n\r\n[Index.cshtml](https://github.com/DarrenGrafton/SvelteRazorViewsUMD/blob/master/SvelteRazorViewsUMD/Views/Home/Index.cshtml)\r\n```\r\n\r\n\r\n```\r\n\r\nHere is the new rollup config. Note that instead of a bundle containing all the Svelte components, I'm passing an argument to create a separate JavaScript file for each Svelte component. \r\n\r\n\r\n[rollup.config](https://github.com/DarrenGrafton/SvelteRazorViewsUMD/blob/master/SvelteRazorViewsUMD/rollup.config.js)\r\n```\r\nimport svelte from 'rollup-plugin-svelte';\r\nimport resolve from '@rollup/plugin-node-resolve';\r\nimport css from 'rollup-plugin-css-only';\r\n\r\nexport default {\r\n // each svelte component is built into a js and css file\r\n input: `wwwroot/js/${process.env.entry}.svelte`,\r\n output: {\r\n sourcemap: true,\r\n file: `wwwroot/js/build/${process.env.entry}.js`,\r\n format: 'umd',\r\n name: process.env.entry,\r\n },\r\n plugins: [\r\n svelte({ \r\n // Tell the svelte plugin where our svelte files are located\r\n include: 'wwwroot/**/*.svelte',\r\n }),\r\n css({ output: `${process.env.entry}.css` }),\r\n resolve({\r\n browser: true,\r\n dedupe: [\"svelte\"]\r\n }),\r\n ]\r\n};\r\n```\r\n\r\nFor the build script, I'm calling rollup once per Svelte component\r\n\r\n[package.json](https://github.com/DarrenGrafton/SvelteRazorViewsUMD/blob/master/SvelteRazorViewsUMD/package.json)\r\n```\r\n\"scripts\": {\r\n \"build\": \"rollup -c rollup.config.js --environment entry:Checklist && rollup -c rollup.config.js --environment entry:App\",\r\n \"dev\": \"rollup -c rollup.config.js -w --environment entry:Checklist && rollup -c rollup.config.js -w --environment entry:App\"\r\n },\r\n```\r\n\r\n### Next Steps\r\n\r\n1. Improvements to development, having Svelte files and CSS changes appear immediately in browser. \r\n2. A script to call rollup for each .svelte file in the JS folder, rather than manually adding calls to build script.\r\n3. Experimenting with fetching to the ASP.Net controller from the Svelte component\r\n\r\n\r\n\r\n\r\n","frontmatter":{},"title":"Svelte Razor Views - UMD","description":"Compiling Svelte into UMD bundles.\r","tags":[],"slug":"svelte-razor-views-umd","date":"2022-04-06T03:37:38.000Z","ghMetadata":{"issueUrl":"https://github.com/DarrenGrafton/darrens-blog/issues/3","commentsUrl":"https://api.github.com/repos/DarrenGrafton/darrens-blog/issues/3/comments","title":"Svelte Razor Views - UMD","created_at":"2022-04-06T03:37:38Z","updated_at":"2022-04-13T20:45:37Z","reactions":{"url":"https://api.github.com/repos/DarrenGrafton/darrens-blog/issues/3/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}},{"type":"blog","content":"Hi and welcome.\r\n\r\nThis article is about adding a nice UI experience to an ASP.NET Core MVC app using Svelte components.\r\n\r\n## What's the problem?\r\n\r\nAn ASP.NET Core MVC Web app runs on a server. It combines data from a Model with an HTML template language (Razor View) to generate pages to deliver to the user's browser. \r\n\r\nOnce the web page lands in the user's browser, it's up to front-end technologies to give a rich experience to the user. Design and interactivity are achieved through the combination of HTML, CSS, and JavaScript. \r\n\r\nASP.NET Core web app templates have JQuery and Bootstrap installed by default to help with this. These are \"battle-tested\" technologies, but there are advancements in front-end frameworks that can provide a better experience for developers and end-users. \r\n\r\n\r\n## Svelte\r\n\r\nSvelte is newer amongst the JavaScript technologies but is currently my pick. \r\n\r\nSvelte components are compiled to JavaScript and then can be included in Razor Views. While it is still JavaScript at the end that is running in the user's browser, Svelte's abstractions make it easier to craft interactive and animated components.\r\n\r\n[Check out svelte.dev for many great examples](https://svelte.dev/)\r\n\r\nIn this example, we are building Custom Elements with Svelte to allow the components to be added to our Razor page. This is using Web Components technology which does have some drawbacks, see links below for some issues and workarounds. \r\n\r\n[Svelte docs for custom elements](https://svelte.dev/docs#run-time-custom-element-api)\r\n\r\n[Custom elements in svelte Geoff Rich for CSS Tricks](https://css-tricks.com/using-custom-elements-in-svelte/)\r\n\r\n[Common pitfalls and workarounds, Kyohei on dev.to](https://dev.to/tnzk/svelte-for-web-components-development-pitfalls-and-workarounds-as-of-july-2021-3lii)\r\n\r\n## The Project\r\n\r\n1. Begin with a bare-bones default ASP.NET Core MVC project.\r\n2. Add Node packages for the capability to build Svelte components into JavaScript files.\r\n3. Add the Rollup config file to configure how your Svelte Components are built\r\n4. Add the rollup build command to package.json\r\n5. Add a command to the `.csproj` file to compile the Svelte components into JavaScript each time the ASP.NET Core project is built. \r\n6. Create some Svelte components\r\n7. Reference the components in Razor Views by including a `\r\n\r\n

Hello {name}!

\r\n```\r\n\r\nNote two small changes from the example on Svelte's website. \r\n1. We added the svelte:options tab to specify the tag name to reference the component in the Razor View.\r\n2. We added `export` before let name so that we can pass a name into the component\r\n\r\nModify the site.js file to reference our Svelte component:\r\n\r\n`import Hello from \"./Hello.svelte\";`\r\n\r\n#### 7. Reference the component in a Razor Views by including a `\r\n```\r\n\r\n_**Note: I'm running into an issue with having two svelte components setup with this system side by side. So far wrapping them in divs if side by side works fine**_\r\n\r\n\r\nIn a full solution, you'll want to move the script tag into a section of the page with your other script imports\r\n\r\n#### 8. That's it. Now run the project\r\n\r\nRun this command to run your project and see your svelte component in action!\r\n\r\n`dotnet run watch` \r\n\r\nYour browser should open and look something like this:\r\n\r\n![2022-04-03 11_29_09-Home Page - my_svelte_mvc](https://user-images.githubusercontent.com/54216318/161438044-f11de563-6f9f-4bca-84a9-f5162dbfc3b3.png)\r\n\r\nCongratulations! Now I suggest grabbing some fun examples from [Svelte's website](https://svelte.dev/examples) to try out some of the interactivity and animation.\r\n\r\n\r\n## Next Steps and Questions\r\n\r\nThis is a simple proof of concept that raises a lot of questions for me\r\n\r\n1. What are the limits of using Svelte Web Components? Is there a way to include the Svelte in Razor without web components?\r\n2. Can I set up Visual Studio to rebuild the svelte components and hot reload the site when the svelte or razor files are saved? This is a killer feature in new front-end frameworks and it's much less fun to code without it. \r\n3. Any unexpected behavior when posting to or fetching from an ASP.NET Core Controller from a svelte component? \r\n4. Any benefit to using Vite instead of Rollup?\r\n5. When is it worth it to try to split the svelte components into separate JavaScript files to limit file size?\r\n6. What bits of Razor will stop working if I drop the JQuery entirely?\r\n \r\n\r\nI'm planning to write some follow-up posts as I investigate further.\r\n\r\n\r\n\r\n## Resources\r\n\r\n\r\n1. [As mentioned above, a similar article by Khalid Abuhakmeh](https://khalidabuhakmeh.com/add-svelte-to-aspnet-core-projects)\r\n2. [Log rocket blog on svelte web components coverting drawbacks](https://blog.logrocket.com/build-web-components-svelte/)\r\n3. [A more complete template for integrating Svelte with Razor](https://dev.to/vbilopav/razorsvelte-asp-net-razor-pages-with-svelte-20pg)\r\n4. [Adding svelte to an existing website, without web components](https://apop.tech/posts/adding-svelte-to-an-existing-website/)\r\n5. [Mozilla tutorial on setting up svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)\r\n6. [ThisDot article about web components with Svelte](https://www.thisdot.co/blog/web-components-with-svelte)\r\n\r\n","frontmatter":{},"title":"Svelte Razor Views","description":"Hi and welcome.\r","tags":[],"slug":"svelte-razor-views","date":"2022-04-02T03:57:02.000Z","ghMetadata":{"issueUrl":"https://github.com/DarrenGrafton/darrens-blog/issues/2","commentsUrl":"https://api.github.com/repos/DarrenGrafton/darrens-blog/issues/2/comments","title":"Svelte Razor Views","created_at":"2022-04-02T03:57:02Z","updated_at":"2022-04-04T19:44:51Z","reactions":{"url":"https://api.github.com/repos/DarrenGrafton/darrens-blog/issues/2/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}}}]

Blog

All Posts

Svelte Razor Views - UMD

Svelte Razor Views