phoenix-sveltev1.diff

diff --git a/assets/js/App.svelte b/assets/js/App.svelte
new file mode 100644
index 0000000..221cde6
--- /dev/null
+++ b/assets/js/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Myapp {name}!</h1>
diff --git a/assets/js/app.js b/assets/js/app.js
index 3f8fc87..42a86c8 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -14,3 +14,5 @@ import "phoenix_html"
 //
 // Local files can be imported directly using relative paths, for example:
 // import socket from "./socket"
+//
+import './svelte.js';
diff --git a/assets/js/svelte.js b/assets/js/svelte.js
new file mode 100644
index 0000000..ddfc215
--- /dev/null
+++ b/assets/js/svelte.js
@@ -0,0 +1,9 @@
+import App from './App.svelte'
+
+const app = new App({
+	target: document.querySelector('.container'),
+	props: {
+		name: 'myapp'
+	}
+})
+export default app
diff --git a/assets/package.json b/assets/package.json
index e18310b..450fdb1 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -14,6 +14,7 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@dkuku/tailwind-color-palette": "^1.0.1",
+    "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^4.5.0",
     "css-loader": "^3.2.0",
@@ -23,8 +24,10 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.3.1",
+    "svelte": "^3.12.1",
+    "svelte-loader": "^2.13.6",
     "tailwindcss": "^1.1.2",
-    "uglifyjs-webpack-plugin": "^1.2.4",
+    "terser-webpack-plugin": "^2.1.1",
     "webpack": "4.4.0",
     "webpack-cli": "^3.3.9"
   }
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
index 4464f61..e63da4c 100644
--- a/assets/webpack.config.js
+++ b/assets/webpack.config.js
@@ -1,19 +1,27 @@
 const path = require('path');
 const glob = require('glob');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 module.exports = (env, options) => ({
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
+      new TerserPlugin(),
       new OptimizeCSSAssetsPlugin({})
     ]
   },
   entry: {
     './js/app.js': ['./js/app.js']
   },
+  resolve: {
+    alias: {
+      svelte: path.resolve('node_modules', 'svelte')
+    },
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main'],
+    modules: ['node_modules']
+  },
   output: {
     filename: 'app.js',
     path: path.resolve(__dirname, '../priv/static/js')
@@ -43,6 +51,21 @@ module.exports = (env, options) => ({
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader'
+        },
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+      },
+      {
+        test: /\.(html|svelte)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            hotReload: true
+          }
         }
       }
     ]

phoenix-sveltev2.diff

diff --git a/assets/js/svelte.js b/assets/js/svelte.js
index ddfc215..362c58d 100644
--- a/assets/js/svelte.js
+++ b/assets/js/svelte.js
@@ -1,9 +1,26 @@
-import App from './App.svelte'
-
-const app = new App({
-	target: document.querySelector('.container'),
-	props: {
-		name: 'myapp'
-	}
-})
-export default app
+const context = require.context("./svelte", false, /\.svelte/);
+window.onload = function() {
+  context.keys().forEach((file) => {
+    const componentName = file.replace(/\.\/|\.svelte/g, '');
+    const targetId = `svelte-${componentName}-root`;
+
+    const root = document.getElementById(targetId);
+
+    if(!root){
+      return;
+    }
+
+    const requiredApp = require(`./svelte/${componentName}.svelte`);
+
+    const props = root.getAttribute('data-props');
+    let parsedProps = {};
+    if(props){
+      parsedProps = JSON.parse(props);
+    }
+
+    new requiredApp.default({
+      target: root,
+      props: parsedProps
+    });
+  });
+};
diff --git a/assets/js/svelte/new-test.svelte b/assets/js/svelte/new-test.svelte
new file mode 100644
index 0000000..5996454
--- /dev/null
+++ b/assets/js/svelte/new-test.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let first_name;
+	export let last_name;
+</script>
+
+<h1>Welcome {first_name}, {last_name}!</h1>
diff --git a/assets/js/App.svelte b/assets/js/svelte/test.svelte
similarity index 62%
rename from assets/js/App.svelte
rename to assets/js/svelte/test.svelte
index 221cde6..60c4bec 100644
--- a/assets/js/App.svelte
+++ b/assets/js/svelte/test.svelte
@@ -2,4 +2,4 @@
 	export let name;
 </script>
 
-<h1>Myapp {name}!</h1>
+<h1>test {name}!</h1>
diff --git a/lib/myapp_web/templates/layout/app.html.eex b/lib/myapp_web/templates/layout/app.html.eex
index 1a24135..db51763 100644
--- a/lib/myapp_web/templates/layout/app.html.eex
+++ b/lib/myapp_web/templates/layout/app.html.eex
@@ -10,7 +10,9 @@
   <body>
     <%= render "app_nav.html", conn: @conn, customer: @current_customer %>
     <div class="container mx-auto">
+      <%= svelte "new-test", %{:first_name => "Daniel", :last_name => "Kukula"} %>
       <%= show_notification(@conn)%>
+      <%= svelte "test", %{:name => "kuku"} %>
     </div>
     <main role="main" class="container my-12 mx-auto px-4 md:px-12">
       <%= render @view_module, @view_template, assigns %>
diff --git a/lib/myapp_web/views/layout_view.ex b/lib/myapp_web/views/layout_view.ex
index ed73d7d..ce1be20 100644
--- a/lib/myapp_web/views/layout_view.ex
+++ b/lib/myapp_web/views/layout_view.ex
@@ -1,6 +1,5 @@
 defmodule MyappWeb.LayoutView do
   use MyappWeb, :view
-  import MyappWeb.Router.Helpers
 
   def show_notification(conn) do
     conn
@@ -18,4 +17,21 @@ defmodule MyappWeb.LayoutView do
 
   def flash_message(_), do: nil
 
+  def svelte(name, props) do
+    :div
+    |> tag([data: [props: json(props)], id: generate_id(name)])
+  end
+
+  def json(props) do
+    props
+    |> Jason.encode
+    |> case do
+      {:ok, message} -> message
+      {:error, _} -> ""
+    end
+  end
+
+  def generate_id(name) do
+    "svelte-#{String.replace(name, " ", "-")}-root"
+  end
 end