Simplify installation

README.md

@@ -82,7 +82,7 @@ If you don't want SSR, you can disable it by not setting `NodeJS.Supervisor` in
 ```elixir
 defp deps do
   [
-    {:live_svelte, "~> 0.4.1"}
+    {:live_svelte, "~> 0.4.2"}
   ]
 end
 ```
@@ -126,14 +126,7 @@ children = [
 ]
 ```
 
-6. Add the following to your `config.exs` and replace `:my_app` with your app name
-
-```elixir
-# Configures LiveSvelte
-config :live_svelte, :otp_name, :my_app
-```
-
-7. Finally, remove the `esbuild` configuration from `config/config.exs` and remove the dependency from the `deps` function in your `mix.exs`, and you are done!
+6. Finally, remove the `esbuild` configuration from `config/config.exs` and remove the dependency from the `deps` function in your `mix.exs`, and you are done!
 
 ### What did we do?
 

assets/js/live_svelte/render.js

@@ -1,14 +1,14 @@
 /***
  * Render a component with the name, props and slots provided.
  */
-export function render(serverPath, name, props = {}, slots = null) {
+export function render(name, props = {}, slots = null) {
     // remove from cache in non-production environments
     // so that we can see changes
-    if (process.env.NODE_ENV !== "production" && require.resolve(serverPath) in require.cache) {
-        delete require.cache[require.resolve(serverPath)]
+    if (process.env.NODE_ENV !== "production" && require.resolve(__filename) in require.cache) {
+        delete require.cache[require.resolve(__filename)]
     }
 
-    const component = require(serverPath)[name].default
+    const component = require(__filename)[name].default
     const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}
 
     return component.render(props, {$$slots, context: new Map()})

example_project/config/config.exs

@@ -49,9 +49,6 @@ config :logger, :console,
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason
 
-# Configures LiveSvelte
-config :live_svelte, :otp_name, :example
-
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"

example_project/priv/static/robots-9e2c81b0855bbff2baa8371bc4a78186.txt

@@ -0,0 +1,5 @@
+# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
+#
+# To ban all spiders from the entire site uncomment the next two lines:
+# User-agent: *
+# Disallow: /

lib/ssr.ex

@@ -2,8 +2,8 @@ defmodule LiveSvelte.SSR.NodeNotConfigured do
   @moduledoc false
 
   defexception message: """
-                 NodeJS is not configured. Please add the following to your application.ex:
-                 {NodeJS.Supervisor, [path: Application.app_dir(:my_app, "/priv/static/assets"), pool_size: 4]},
+                 NodeJS is not configured. Please add the following to your application.ex:
+                 {NodeJS.Supervisor, [path: Application.app_dir(:my_app, "/priv/static/assets"), pool_size: 4]},
                """
 end
 
@@ -16,11 +16,7 @@ defmodule LiveSvelte.SSR do
 
   def render(name, props, slots) do
     try do
-      server_path =
-        Application.get_env(:live_svelte, :otp_name)
-        |> Application.app_dir("/priv/static/assets/server/server.js")
-
-      NodeJS.call!({"server/server", "ssrRenderComponent"}, [server_path, name, props, slots])
+      NodeJS.call!({"server/server", "ssrRenderComponent"}, [name, props, slots])
     catch
       :exit, {:noproc, _} -> raise LiveSvelte.SSR.NodeNotConfigured
     end

mix.exs

@@ -1,7 +1,7 @@
 defmodule LiveSvelte.MixProject do
   use Mix.Project
 
-  @version "0.4.1"
+  @version "0.4.2"
   @repo_url "https://github.com/woutdp/live_svelte"
 
   def project do

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "live_svelte",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "live_svelte",
-            "version": "0.4.1",
+            "version": "0.4.2",
             "license": "MIT",
             "devDependencies": {
                 "prettier": "2.8.7",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "live_svelte",
-    "version": "0.4.1",
+    "version": "0.4.2",
     "description": "",
     "license": "MIT",
     "module": "./priv/static/live_svelte.esm.js",

priv/static/live_svelte.cjs.js

@@ -26,11 +26,11 @@ __export(live_svelte_exports, {
 module.exports = __toCommonJS(live_svelte_exports);
 
 // js/live_svelte/render.js
-function render(serverPath, name, props = {}, slots = null) {
-  if (require.resolve(serverPath) in require.cache) {
-    delete require.cache[require.resolve(serverPath)];
+function render(name, props = {}, slots = null) {
+  if (require.resolve(__filename) in require.cache) {
+    delete require.cache[require.resolve(__filename)];
   }
-  const component = require(serverPath)[name].default;
+  const component = require(__filename)[name].default;
   const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {};
   return component.render(props, { $$slots, context: /* @__PURE__ */ new Map() });
 }

priv/static/live_svelte.esm.js

@@ -7,11 +7,11 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // js/live_svelte/render.js
-function render(serverPath, name, props = {}, slots = null) {
-  if (__require.resolve(serverPath) in __require.cache) {
-    delete __require.cache[__require.resolve(serverPath)];
+function render(name, props = {}, slots = null) {
+  if (__require.resolve(__filename) in __require.cache) {
+    delete __require.cache[__require.resolve(__filename)];
   }
-  const component = __require(serverPath)[name].default;
+  const component = __require(__filename)[name].default;
   const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {};
   return component.render(props, { $$slots, context: /* @__PURE__ */ new Map() });
 }

priv/static/live_svelte.js

@@ -50,11 +50,11 @@ var LiveSvelte = (() => {
   });
 
   // js/live_svelte/render.js
-  function render(serverPath, name, props = {}, slots = null) {
-    if (__require.resolve(serverPath) in __require.cache) {
-      delete __require.cache[__require.resolve(serverPath)];
+  function render(name, props = {}, slots = null) {
+    if (__require.resolve(__filename) in __require.cache) {
+      delete __require.cache[__require.resolve(__filename)];
     }
-    const component = __require(serverPath)[name].default;
+    const component = __require(__filename)[name].default;
     const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {};
     return component.render(props, { $$slots, context: /* @__PURE__ */ new Map() });
   }

priv/static/live_svelte.min.js

@@ -1 +1 @@
-var LiveSvelte=(()=>{var a=Object.defineProperty,M=Object.defineProperties,D=Object.getOwnPropertyDescriptor,T=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,g=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var b=(t,e,n)=>e in t?a(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,w=(t,e)=>{for(var n in e||(e={}))$.call(e,n)&&b(t,n,e[n]);if(g)for(var n of g(e))j.call(e,n)&&b(t,n,e[n]);return t},F=(t,e)=>M(t,T(e));var v=(t=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(t,{get:(e,n)=>(typeof require!="undefined"?require:e)[n]}):t)(function(t){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+t+'" is not supported')});var P=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},q=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of N(e))!$.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(i=D(e,o))||i.enumerable});return t};var L=t=>q(a({},"__esModule",{value:!0}),t);var U={};P(U,{exportSvelteComponents:()=>f,getHooks:()=>C,render:()=>x});function x(t,e,n={},i=null){let o=v(t)[e].default,d=Object.fromEntries(Object.entries(i).map(([c,l])=>[c,()=>l]))||{};return o.render(n,{$$slots:d,context:new Map})}function s(){}function S(t){return t()}function O(t){t.forEach(S)}function E(t){return typeof t=="function"}function R(t){return Object.keys(t).length===0}function _(t,e,n){t.insertBefore(e,n||null)}function h(t){t.parentNode&&t.parentNode.removeChild(t)}var k=[];function I(t){let e=[],n=[];k.forEach(i=>t.indexOf(i)===-1?e.push(i):n.push(i)),n.forEach(i=>i()),k=e}var K=typeof window!="undefined"?window:typeof globalThis!="undefined"?globalThis:global;var B=["allowfullscreen","allowpaymentrequest","async","autofocus","autoplay","checked","controls","default","defer","disabled","formnovalidate","hidden","inert","ismap","itemscope","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","selected"],Q=new Set([...B]);function H(t,e){let n=t.$$;n.fragment!==null&&(I(n.after_update),O(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}var z;typeof HTMLElement=="function"&&(z=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let{on_mount:t}=this.$$;this.$$.on_disconnect=t.map(S).filter(E);for(let e in this.$$.slotted)this.appendChild(this.$$.slotted[e])}attributeChangedCallback(t,e,n){this[t]=n}disconnectedCallback(){O(this.$$.on_disconnect)}$destroy(){H(this,1),this.$destroy=s}$on(t,e){if(!E(e))return s;let n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{let i=n.indexOf(e);i!==-1&&n.splice(i,1)}}$set(t){this.$$set&&!R(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}});function f(t){let{default:e,filenames:n}=t;return n=n.map(i=>i.replace("../svelte/","")).map(i=>i.replace(".svelte","")),Object.assign({},...e.map((i,o)=>({[n[o]]:i.default})))}function G(t){let e=document.createElement("div");return e.innerHTML=atob(t).trim(),e}function p(t,e){let n=e.getAttribute(t);return n?JSON.parse(n):{}}function W(t,e){let n=(o,d)=>{let c,l,u;return()=>({getElement(){return G(p("data-slots",d.el)[o])},update(){let r=this.getElement();h(u),_(c,r,l),u=r},c:s,m(r,m){let y=this.getElement();c=r,l=m,u=y,_(r,y,m)},d(r){r&&h(u)},l:s})},i={};for(let o in t)i[o]=[n(o,e)];return i}function A(t){return F(w({},p("data-props",t.el)),{pushEvent:(e,n,i)=>t.pushEvent(e,n,i),$$slots:W(p("data-slots",t.el),t),$$scope:{}})}function J(t){return t.$$.ctx.find(e=>e==null?void 0:e.default)}function C(t){let e=f(t);return{SvelteHook:{mounted(){let i=this.el.getAttribute("data-name");if(!i)throw new Error("Component name must be provided");let o=e[i];if(!o)throw new Error(`Unable to find ${i} component.`);this._instance=new o({target:this.el,props:A(this),hydrate:!0})},updated(){this._instance.$set(A(this));let i=J(this._instance);for(let o in i)i[o][0]().update()},destroyed(){}}}}return L(U);})();
+var LiveSvelte=(()=>{var u=Object.defineProperty,M=Object.defineProperties,D=Object.getOwnPropertyDescriptor,T=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertyNames,g=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var b=(t,e,n)=>e in t?u(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,w=(t,e)=>{for(var n in e||(e={}))$.call(e,n)&&b(t,n,e[n]);if(g)for(var n of g(e))j.call(e,n)&&b(t,n,e[n]);return t},F=(t,e)=>M(t,T(e));var v=(t=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(t,{get:(e,n)=>(typeof require!="undefined"?require:e)[n]}):t)(function(t){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+t+'" is not supported')});var q=(t,e)=>{for(var n in e)u(t,n,{get:e[n],enumerable:!0})},L=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of N(e))!$.call(t,o)&&o!==n&&u(t,o,{get:()=>e[o],enumerable:!(i=D(e,o))||i.enumerable});return t};var P=t=>L(u({},"__esModule",{value:!0}),t);var U={};q(U,{exportSvelteComponents:()=>a,getHooks:()=>C,render:()=>x});function x(t,e={},n=null){let i=v(__filename)[t].default,o=Object.fromEntries(Object.entries(n).map(([f,c])=>[f,()=>c]))||{};return i.render(e,{$$slots:o,context:new Map})}function s(){}function S(t){return t()}function O(t){t.forEach(S)}function E(t){return typeof t=="function"}function R(t){return Object.keys(t).length===0}function d(t,e,n){t.insertBefore(e,n||null)}function _(t){t.parentNode&&t.parentNode.removeChild(t)}var k=[];function I(t){let e=[],n=[];k.forEach(i=>t.indexOf(i)===-1?e.push(i):n.push(i)),n.forEach(i=>i()),k=e}var K=typeof window!="undefined"?window:typeof globalThis!="undefined"?globalThis:global;var B=["allowfullscreen","allowpaymentrequest","async","autofocus","autoplay","checked","controls","default","defer","disabled","formnovalidate","hidden","inert","ismap","itemscope","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","selected"],Q=new Set([...B]);function H(t,e){let n=t.$$;n.fragment!==null&&(I(n.after_update),O(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}var z;typeof HTMLElement=="function"&&(z=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let{on_mount:t}=this.$$;this.$$.on_disconnect=t.map(S).filter(E);for(let e in this.$$.slotted)this.appendChild(this.$$.slotted[e])}attributeChangedCallback(t,e,n){this[t]=n}disconnectedCallback(){O(this.$$.on_disconnect)}$destroy(){H(this,1),this.$destroy=s}$on(t,e){if(!E(e))return s;let n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{let i=n.indexOf(e);i!==-1&&n.splice(i,1)}}$set(t){this.$$set&&!R(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}});function a(t){let{default:e,filenames:n}=t;return n=n.map(i=>i.replace("../svelte/","")).map(i=>i.replace(".svelte","")),Object.assign({},...e.map((i,o)=>({[n[o]]:i.default})))}function G(t){let e=document.createElement("div");return e.innerHTML=atob(t).trim(),e}function h(t,e){let n=e.getAttribute(t);return n?JSON.parse(n):{}}function W(t,e){let n=(o,f)=>{let c,p,l;return()=>({getElement(){return G(h("data-slots",f.el)[o])},update(){let r=this.getElement();_(l),d(c,r,p),l=r},c:s,m(r,m){let y=this.getElement();c=r,p=m,l=y,d(r,y,m)},d(r){r&&_(l)},l:s})},i={};for(let o in t)i[o]=[n(o,e)];return i}function A(t){return F(w({},h("data-props",t.el)),{pushEvent:(e,n,i)=>t.pushEvent(e,n,i),$$slots:W(h("data-slots",t.el),t),$$scope:{}})}function J(t){return t.$$.ctx.find(e=>e==null?void 0:e.default)}function C(t){let e=a(t);return{SvelteHook:{mounted(){let i=this.el.getAttribute("data-name");if(!i)throw new Error("Component name must be provided");let o=e[i];if(!o)throw new Error(`Unable to find ${i} component.`);this._instance=new o({target:this.el,props:A(this),hydrate:!0})},updated(){this._instance.$set(A(this));let i=J(this._instance);for(let o in i)i[o][0]().update()},destroyed(){}}}}return P(U);})();