Initial commit

app/javascript/app.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+</script>
+
+<style>
+  h1 {
+    color: #FF3E00;
+  }
+</style>
+
+<h1>Hello {name}!</h1>

app/javascript/channels/consumer.js

@@ -0,0 +1,6 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
+
+import { createConsumer } from "@rails/actioncable"
+
+export default createConsumer()

app/javascript/channels/index.js

@@ -0,0 +1,5 @@
+// Load all the channels within this directory and all subdirectories.
+// Channel files must be named *_channel.js.
+
+const channels = require.context('.', true, /_channel\.js$/)
+channels.keys().forEach(channels)

app/javascript/packs/application.js

@@ -0,0 +1,13 @@
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+
+import Rails from "@rails/ujs"
+import Turbolinks from "turbolinks"
+import * as ActiveStorage from "@rails/activestorage"
+import "channels"
+
+Rails.start()
+Turbolinks.start()
+ActiveStorage.start()

app/javascript/packs/hello_svelte.js

@@ -0,0 +1,20 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
+// <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Svelte!</div> at the bottom of the page.
+
+import App from '../app.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+    props: {
+      name: 'Svelte'
+    }
+  });
+
+  window.app = app;
+})
+