Provide function to generate webpack configs, initialize Svelte components

Author: nning

package.json

@@ -2,21 +2,28 @@
   "name": "svelte_ujs",
   "version": "0.1.0",
   "description": "Rails UJS for the svelte-rails gem",
-  "main": "svelte_ujs/index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "license": "MIT",
+  "author": "henning mueller <[email protected]>",
+  "bugs": {
+    "url": "https://github.com/nning/svelte-rails/issues"
   },
+  "homepage": "https://github.com/nning/svelte-rails#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nning/svelte-rails.git"
   },
-  "author": "henning mueller <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/nning/svelte-rails/issues"
+
+  "main": "svelte_ujs/index.js",
+  "exports": {
+    "./": "./svelte_ujs/"
+  },
+
+  "devDependencies": {
+    "@rails/webpacker": "4.2.2",
+    "webpack-assets-manifest": "^3.1.1",
+    "before-build-webpack": "^0.2.9"
   },
-  "homepage": "https://github.com/nning/svelte-rails#readme"
+  "resolutions": {
+    "webpack-assets-manifest": "https://github.com/pustovalov/webpack-assets-manifest#build"
+  }
 }

svelte_ujs/WaitPlugin.js

@@ -0,0 +1,35 @@
+const config = require('@rails/webpacker/package/config')
+const fs = require('fs')
+const path = require('path')
+const WebpackBeforeBuildPlugin = require('before-build-webpack')
+
+// https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/
+class WaitPlugin extends WebpackBeforeBuildPlugin {
+  constructor(file, interval = 200, timeout = 10000) {
+    const filePath = path.join(config.outputPath, file)
+
+    try {
+      fs.unlinkSync(filePath)
+    } catch(e) {
+      // Ignore if file does not exist
+    }
+
+    super((stats, callback) => {
+      let start = Date.now()
+
+      function poll() {
+        if (fs.existsSync(filePath)) {
+          callback()
+        } else if (Date.now() - start > timeout) {
+          throw Error(`Waited too long for "${file}" to exist.`)
+        } else {
+          setTimeout(poll, interval)
+        }
+      }
+
+      poll()
+    })
+  }
+}
+
+module.exports = WaitPlugin

svelte_ujs/getSvelteEnvironments.js

@@ -0,0 +1,58 @@
+const config = require('@rails/webpacker/package/config')
+const ConfigList = require('@rails/webpacker/package/config_types/config_list')
+const WaitPlugin = require('svelte_ujs/WaitPlugin')
+
+// Use version of WebpackAssetsManifest that supports merging entrypoints in manifest.json
+// https://github.com/webdeveric/webpack-assets-manifest/pull/59
+const WebpackAssetsManifest = require('webpack-assets-manifest')
+
+const env = process.env.NODE_ENV
+const Environment = require('@rails/webpacker/package/environments/' + env)
+
+function getSvelteEnvironments(clientLoader, serverLoader) {
+  const clientEnvironment = new Environment()
+  clientEnvironment.entry.delete('server_rendering')
+  clientEnvironment.loaders.prepend('svelte', clientLoader)
+
+  // We need to set merge:true for generating the manifest.json
+  clientEnvironment.plugins.delete('Manifest')
+  clientEnvironment.plugins.append(
+    'Manifest',
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      publicPath: config.publicPathWithoutCDN,
+      merge: true
+    })
+  )
+
+  const serverEnvironment = new Environment()
+  // TODO Actually delete everything but server_rendering
+  serverEnvironment.entry.delete('application')
+  serverEnvironment.loaders.prepend('svelte', serverLoader)
+
+  // We need to set merge:true for generating the manifest.json
+  serverEnvironment.plugins.delete('Manifest')
+  serverEnvironment.plugins.append(
+    'Manifest',
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      writeToDisk: true,
+      publicPath: config.publicPathWithoutCDN,
+      merge: true
+    })
+  )
+
+  // Wait for the manifest.json created by clientEnvironment
+  serverEnvironment.plugins.prepend(
+    'WaitPlugin',
+    new WaitPlugin('manifest.json')
+  )
+
+  return [
+    clientEnvironment,
+    serverEnvironment
+  ]
+}
+
+module.exports = getSvelteEnvironments

svelte_ujs/index.js

@@ -1,10 +1,41 @@
 class SvelteRailsUJS {
   static serverRender(component_name, props) {
-    const requireComponent = require.context('components', true);
-    const bundle = requireComponent('./' + component_name).default;
-    const {html, css} = bundle.render(props);
+    const requireComponent = require.context('components', true)
+    const bundle = requireComponent('./' + component_name).default
+    const {html, css} = bundle.render(props)
 
-    return `<style>${css.code}</style>` + html;
+    return `<style>${css.code}</style>` + html
+  }
+
+  static start() {
+    SvelteRailsUJS.mountComponents()
+
+    document.addEventListener('DOMContentLoaded', () => {
+      SvelteRailsUJS.mountComponents()
+    })
+  }
+
+  static mountComponents() {
+    document.querySelectorAll('[data-svelte-class]')
+      .forEach(SvelteRailsUJS.mountComponent)
+  }
+
+  static mountComponent(target) {
+    const name = target.dataset.svelteClass
+    const hydrate = !!target.dataset.hydrate
+
+    let props = {}
+
+    if (target.dataset.svelteProps) {
+      props = JSON.parse(target.dataset.svelteProps)
+    }
+
+    const requireComponent = require.context('components', true)
+    const Component = requireComponent('./' + name).default
+
+    console.debug(Component, {target, props, hydrate});
+
+    const component = new Component({target, props, hydrate})
   }
 }