Import js from live_svelte directly

assets/js/hooks.js

@@ -1,13 +1,8 @@
 import * as Components from '../svelte/components/**/*'
+import {exportSvelteComponents} from 'live_svelte'
 import {detach, insert, noop} from 'svelte/internal'
 
-let {default: modules, filenames} = Components
-
-filenames = filenames
-    .map(name => name.replace('../svelte/components/', ''))
-    .map(name => name.replace('.svelte', ''))
-
-const components = Object.assign({}, ...modules.map((m, index) => ({[filenames[index]]: m.default})))
+const components = exportSvelteComponents(Components)
 
 function base64ToElement(base64) {
     let template = document.createElement('div')

assets/js/server.js

@@ -1,9 +1,4 @@
 import * as Components from '../svelte/components/**/*'
+import {exportSvelteComponents} from 'live_svelte'
 
-let { default: modules, filenames } = Components
-
-filenames = filenames
-    .map(name => name.replace('../svelte/components/', ''))
-    .map(name => name.replace('.svelte', ''))
-
-module.exports = Object.assign({}, ...modules.map((m, index) => ({[filenames[index]]: m.default})))
+module.exports = exportSvelteComponents(Components)

assets/svelte/render.js

@@ -1,24 +1,4 @@
-const componentPath = '../../priv/static/assets/server/server.js'
+var path = require("path")
+var absolutePath = path.resolve("./priv/static/assets/server/server.js")
 
-/***
- * Render a component with the name, props and slots provided.
- */
-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(componentPath) in require.cache
-    ) {
-        delete require.cache[require.resolve(componentPath)]
-    }
-
-    const component = require(componentPath)[name].default
-    const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}
-
-    return component.render(props, { $$slots, context: new Map() })
-}
-
-module.exports = {
-    render,
-}
+module.exports.render = require("live_svelte").getRender(absolutePath)

lib/mix/tasks/install_npm_deps.ex

@@ -10,7 +10,7 @@ defmodule Mix.Tasks.LiveSvelte.InstallNpmDeps do
 
     "cd assets &&
     npm install --save-dev esbuild@^0.16.17 esbuild-svelte svelte svelte-preprocess esbuild-plugin-import-glob &&
-    npm install --save ../deps/phoenix ../deps/phoenix_html ../deps/phoenix_live_view"
+    npm install --save ../deps/phoenix ../deps/phoenix_html ../deps/phoenix_live_view ../deps/live_svelte"
     |> String.to_charlist()
     |> :os.cmd()
     |> IO.puts()

package.json

@@ -4,8 +4,13 @@
   "version": "0.2.0",
   "description": "",
   "license": "MIT",
-  "main": "./priv/static/live_svelte.js",
+  "module": "./priv/live_svelte.esm.js",
+  "main": "./priv/live_svelte.cjs.js",
   "author": "Wout De Puysseleir <contact@wout.space>",
+  "exports": {
+    "import": "./priv/live_svelte.esm.js",
+    "require": "./priv/live_svelte.cjs.js"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/woutdp/live_svelte.git"
@@ -15,6 +20,6 @@
     "LICENSE.md",
     "package.json",
     "assets/js/phoenix/*",
-    "priv/static/live_svelte.js"
+    "priv/*"
   ]
-}
+}

priv/live_svelte.cjs.js

@@ -0,0 +1,26 @@
+function getRender(componentPath) {
+    /***
+     * Render a component with the name, props and slots provided.
+     */
+    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(componentPath) in require.cache
+        ) {
+            delete require.cache[require.resolve(componentPath)]
+        }
+
+        const component = require(componentPath)[name].default
+        const $$slots = Object.fromEntries(Object.entries(slots).map(([k, v]) => [k, () => v])) || {}
+
+        return component.render(props, { $$slots, context: new Map() })
+    }
+
+    return render
+}
+
+module.exports = {
+    getRender
+}

priv/live_svelte.esm.js

@@ -0,0 +1,13 @@
+function exportSvelteComponents(components) {
+    let { default: modules, filenames } = components
+
+    filenames = filenames
+        .map(name => name.replace('../svelte/components/', ''))
+        .map(name => name.replace('.svelte', ''))
+
+    return Object.assign({}, ...modules.map((m, index) => ({[filenames[index]]: m.default})))
+}
+
+module.exports = {
+  exportSvelteComponents,
+}