Django x Svelte: Alpha

💌 Introduction

Warning: This project is in Alpha and key features are still under active development.

DxSvelte is a powerful integration package that brings Svelte to your Django web applications with a simplified workflow, closer to how you would normally Render views. Enjoy the full benefit of SSR in your next single-page application (SPA).

🎉 Changelog (Release 0.2.0-alpha.20)

• Project fully ported across to Vite, and can now leverage many of the awesome tools available to the SvelteKit ecosystem!
• Svelte version migrated from 3.x.x -> 4.2.2 following Vite port of DxSvelte.
• Published the Python package element of the project to PyPi.
• Improved type hints and in-line function documentation through JSDoc.
• Exposed goto(path) as a @common import function.
• Added CSRF tokens and a form object builder to handle its attachment.
• Experimental Bun support.
• Implemented sourcemapped SSR errors with CSR failover.
• Other miscellaneous clean-ups.

🔎 To-Do List & Known Bugs

• 404 Errors: TBC.
• Type Generation (Autocomplete): Decision TBC.

📔 Documentation

The new documentation is now available to read. And it was built with DxSvelte!

⚡️ Features

• Seamless Integration: DxSvelte integrates tightly with Django's route resolvers, allowing you to easily build SPAs with Svelte without manually connecting the dots through DRF (though you don't lose that functionality, should you need it). The whole philosophy here is that SPA functionality can and should be a 'first class citizen' in Django.
• Automatic SPA Generation: You don't have to manually configure REST endpoints or manage complex API interactions. Instead, DxSvelte automatically generates the SPA for you, based on the routes defined in your Django app.
• Easy Server-Side Props: When rendering a view, you may pass a dictionary as the second argument and access it via the $ServerSideProps object in your Svelte template file.
• Server Side Rendering (SSR): DxSvelte uses Svelte's efficient rendering engine to deliver fast and responsive user experiences, without sacrificing the power and flexibility of Django. But not only that, DxSvelte also takes care of SSR (Server Side Rendering), so that the first page-load is already rendered when it arrives in the browser.
• Fast Compilation: DxSvelte uses ESBuild (a powerful JS compiler written in Rust) under the hood to give you the best possible compile times.
• Incremental Adoption: The default behaviour when it comes to navigation makes it easy to adopt the SPA incrementally. If you have an existing project you don't want to rewrite or only want for a specific portion of the site to be an SPA, then just keep going as you are; the SPA will honour any \ tags which lead away from the SPA by checking itself against the automatically generated routing table.

npx dxsvelte@alpha

my_project_name
├── manage.py
├── dxsvelte.py
├── package.json
├── tsconfig.json
├── my_project_name
│   └── ...
├── static
│   ├── index.html
│   ├── ...
└── ...

# Example app called 'home_page'
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='$index'),
    path('about/', views.about, name='$about'),
]

from dxsvelte import render

def index(req):
    # Your normal view logic goes here
    return render(req, data?)

def about(req):
    return render(req)

my_project_name
├── manage.py
├── dxsvelte.py
├── package.json
├── tsconfig.json
├── home_page
│   ├── ...
│   └── views
│       ├── index.svelte
│       └── about.svelte
├── my_project_name
│   └── layout.svelte
└── ...

<h1>Your Website Name.</h1>
<slot/>

npm run compile

# urls.py
urlpatterns = [
    path('', views.index, name='$index'),
    path('about/<str:company>/', views.about, name='$about'),
]

# views.py
import render from dxsvelte

def about(req, company):
    data = {
        "aboutUsText": "Lorem ipsum dolor sit amet, consectetur adip...",
        "company": "You are viewing the page for " + company + "!"
    }
    return render(req, data)

<script>
    // The import statement from @page below retrieves the server-side props.
    // The line beneath that registers 'data' as a reactive variable from it.
    import { ServerSideProps } from "@page";
    $: data = $ServerSideProps
    let incrementedValue = 0
    const increment = () => {
        incrementedValue ++
    }
</script>

{#if data?.company && data.aboutUsText}
    <h1>About {data.company}.</h1>
    {data.aboutUsText}
{/if}

<button on:click={increment}>Number Goes Up</button>

We welcome contributions to DxSvelte! If you'd like to contribute, please open an issue or pull request on our GitHub repository.

License

DxSvelte is released under the MIT License.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.