Merge pull request #7 from diegoquiroz/add-svelte4-templates

Add svelte templates by @diegoquiroz
Louxsdon · Sep 25, 2024 · 74b3496 · 74b3496
2 parents da5e41d + 3bebbdd
commit 74b3496
Show file tree

Hide file tree

Showing 21 changed files with 307 additions and 4 deletions.
diff --git a/django_breeze/core/management/commands/create-app.py b/django_breeze/core/management/commands/create-app.py
@@ -1,5 +1,4 @@
-from pathlib import Path, PurePath
-import os
+from pathlib import Path
 from django_breeze.core.management import BaseCommand
 from django_breeze.core.handlers.files import TemplateFilesHandler
 
@@ -10,12 +9,12 @@
 class CreateAppCommand(BaseCommand):
     name = "create-app"
     description = "Create a new app"
-    usage = "create-app [ react|vue3 ] [ --typescript ]"
+    usage = "create-app [ react|vue3|svelte4 ] [ --typescript ]"
 
     def add_arguments(self, parser):
         parser.add_argument(
             "framework",
-            choices=["react", "vue3"],
+            choices=["react", "vue3", "svelte4"],
             help="Framework of the app to create",
         )
         parser.add_argument("--typescript", action="store_true", help="use TypeScript")

diff --git a/django_breeze/templates/svelte4/package.json b/django_breeze/templates/svelte4/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "svelte4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@inertiajs/svelte": "^1.2.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.44",
+    "tailwindcss": "^3.4.10"
+  },
+  "devDependencies": {
+    "vite": "^5.4.3",
+    "svelte": "^4.2.19"
+  }
+}
diff --git a/django_breeze/templates/svelte4/postcss.config.js b/django_breeze/templates/svelte4/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/django_breeze/templates/svelte4/src/components/PackageCard.svelte b/django_breeze/templates/svelte4/src/components/PackageCard.svelte
@@ -0,0 +1,6 @@
+<script>
+    export let framework;
+</script>
+<div class="px-12 py-6 border border-purple-500 text-purple-600 rounded-lg hover:scale-105 transition-all cursor-pointer duration-200">
+    <p>{framework}</p>
+</div>
diff --git a/django_breeze/templates/svelte4/src/index.css b/django_breeze/templates/svelte4/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/django_breeze/templates/svelte4/src/index.html b/django_breeze/templates/svelte4/src/index.html
@@ -0,0 +1,19 @@
+{% load django_vite %}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <head>
+      <meta charset="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    {% vite_hmr_client %} {% vite_asset 'main.js' %}
+
+    <title>Django Breeze</title>
+  </head>
+
+  <body>
+    {% block inertia %}{% endblock %}
+  </body>
+</html>
diff --git a/django_breeze/templates/svelte4/src/main.js b/django_breeze/templates/svelte4/src/main.js
@@ -0,0 +1,13 @@
+import { createInertiaApp } from "@inertiajs/svelte";
+import "./index.css";
+
+createInertiaApp({
+  resolve: (name) => {
+    const pages = import.meta.glob("./pages/**/*.svelte", { eager: true });
+    return pages[`./pages/${name}.svelte`];
+  },
+  setup({ el, App, props }) {
+    new App({ target: el, props });
+  },
+});
+
diff --git a/django_breeze/templates/svelte4/src/pages/index.svelte b/django_breeze/templates/svelte4/src/pages/index.svelte
@@ -0,0 +1,20 @@
+<script>
+  import PackageCard from '../components/PackageCard.svelte';
+  import { page } from '@inertiajs/svelte';
+</script>
+
+<div class="text-center h-screen flex justify-center flex-col items-center p-4">
+  <img
+    class="w-full lg:w-[60%]"
+    src="/static/django_breeze/django-breeze-logo.jpg"
+    alt=""
+  />
+  <h1 class="text-3xl font-bold">Welcome, Django Breeze</h1>
+  <p class="text-green-600 mb-5">Your project is setup successfully!</p>
+  <h3 class="text-slate-500">Powered by:</h3>
+  <div class="lg:flex space-y-2 lg:space-y-0 lg:space-x-3 mt-3">
+    {#each $page.props.packages as framework}
+      <PackageCard framework={framework} />
+    {/each}
+  </div>
+</div>
diff --git a/django_breeze/templates/svelte4/tailwind.config.js b/django_breeze/templates/svelte4/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [
+    "./src/index.html",
+    "./src/**/*.{js,svelte}"
+  ],
+  darkMode: 'selector',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/django_breeze/templates/svelte4/vite.config.js b/django_breeze/templates/svelte4/vite.config.js
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [svelte()],
+  root: resolve("./src"),
+  base: "/static/",
+  server: {
+    host: "localhost",
+    port: 5173,
+    open: false,
+    watch: {
+      usePolling: true,
+      disableGlobbing: false,
+    },
+  },
+  build: {
+    outDir: resolve("./static/dist"),
+    manifest: true,
+    emptyOutDir: true,
+    target: "es2015",
+    rollupOptions: {
+      input: {
+        main: resolve("./src/main.js"),
+      },
+    },
+  },
+});
diff --git a/django_breeze/templates/svelte4_typescript/package.json b/django_breeze/templates/svelte4_typescript/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "svelte4_typescript",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@inertiajs/svelte": "^1.2.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.44",
+    "tailwindcss": "^3.4.10"
+  },
+  "devDependencies": {
+    "vite": "^5.4.3",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^4.2.19", 
+    "svelte-check": "^3.8.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  }
+}
diff --git a/django_breeze/templates/svelte4_typescript/postcss.config.js b/django_breeze/templates/svelte4_typescript/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/django_breeze/templates/svelte4_typescript/src/components/PackageCard.svelte b/django_breeze/templates/svelte4_typescript/src/components/PackageCard.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    export let framework: string;
+</script>
+<div class="px-12 py-6 border border-purple-500 text-purple-600 rounded-lg hover:scale-105 transition-all cursor-pointer duration-200">
+    <p>{framework}</p>
+</div>
diff --git a/django_breeze/templates/svelte4_typescript/src/index.css b/django_breeze/templates/svelte4_typescript/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/django_breeze/templates/svelte4_typescript/src/index.html b/django_breeze/templates/svelte4_typescript/src/index.html
@@ -0,0 +1,19 @@
+{% load django_vite %}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <head>
+      <meta charset="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    {% vite_hmr_client %} {% vite_asset 'main.ts' %}
+
+    <title>Django Breeze</title>
+  </head>
+
+  <body>
+    {% block inertia %}{% endblock %}
+  </body>
+</html>
diff --git a/django_breeze/templates/svelte4_typescript/src/main.ts b/django_breeze/templates/svelte4_typescript/src/main.ts
@@ -0,0 +1,13 @@
+import { createInertiaApp } from "@inertiajs/svelte";
+import "./index.css";
+
+createInertiaApp({
+  resolve: (name) => {
+    const pages = import.meta.glob("./pages/**/*.svelte", { eager: true });
+    return pages[`./pages/${name}.svelte`];
+  },
+  setup({ el, App, props }) {
+    new App({ target: el, props });
+  },
+});
+
diff --git a/django_breeze/templates/svelte4_typescript/src/pages/index.svelte b/django_breeze/templates/svelte4_typescript/src/pages/index.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import PackageCard from '../components/PackageCard.svelte';
+  import { page } from '@inertiajs/svelte';
+
+  type Framework = string;
+
+  const packages: Framework[] = $page.props.packages;
+</script>
+
+<div class="text-center h-screen flex justify-center flex-col items-center p-4">
+  <img
+    class="w-full lg:w-[60%]"
+    src="/static/django_breeze/django-breeze-logo.jpg"
+    alt=""
+  />
+  <h1 class="text-3xl font-bold">Welcome, Django Breeze</h1>
+  <p class="text-green-600 mb-5">Your project is setup successfully!</p>
+  <h3 class="text-slate-500">Powered by:</h3>
+  <div class="lg:flex space-y-2 lg:space-y-0 lg:space-x-3 mt-3">
+    {#each packages as framework}
+      <PackageCard framework={framework} />
+    {/each}
+  </div>
+</div>
diff --git a/django_breeze/templates/svelte4_typescript/tailwind.config.js b/django_breeze/templates/svelte4_typescript/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [
+    "./src/index.html",
+    "./src/**/*.{js,svelte}"
+  ],
+  darkMode: 'selector',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/django_breeze/templates/svelte4_typescript/tsconfig.json b/django_breeze/templates/svelte4_typescript/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "compilerOptions": {
+      "target": "ESNext",
+      "useDefineForClassFields": true,
+      "module": "ESNext",
+      "resolveJsonModule": true,
+      /**
+       * Typecheck JS in `.svelte` and `.js` files by default.
+       * Disable checkJs if you'd like to use dynamic types in JS.
+       * Note that setting allowJs false does not prevent the use
+       * of JS in `.svelte` files.
+       */
+      "allowJs": true,
+      "checkJs": true,
+      "isolatedModules": true,
+      "moduleDetection": "force"
+    },
+    "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/django_breeze/templates/svelte4_typescript/tsconfig.node.json b/django_breeze/templates/svelte4_typescript/tsconfig.node.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "strict": true,
+      "noEmit": true
+    },
+    "include": ["vite.config.ts"]
+}
diff --git a/django_breeze/templates/svelte4_typescript/vite.config.ts b/django_breeze/templates/svelte4_typescript/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [svelte({ preprocess: vitePreprocess() })],
+  root: resolve("./src"),
+  base: "/static/",
+  server: {
+    host: "localhost",
+    port: 5173,
+    open: false,
+    watch: {
+      usePolling: true,
+      disableGlobbing: false,
+    },
+  },
+  build: {
+    outDir: resolve("./static/dist"),
+    manifest: true,
+    emptyOutDir: true,
+    target: "es2015",
+    rollupOptions: {
+      input: {
+        main: resolve("./src/main.js"),
+      },
+    },
+  },
+});