optimize webpack bundles

app/javascript/application.js

@@ -1,14 +1,11 @@
 import '@hotwired/turbo-rails'
 
-import { createApp, reactive } from 'vue'
-
 import ToggleVisible from './elements/toggle_visible'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
-import TemplateBuilder from './template_builder/builder'
 import DynamicList from './elements/dynamic_list'
 import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
@@ -34,8 +31,16 @@ window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 
 window.customElements.define('template-builder', class extends HTMLElement {
-  connectedCallback () {
+  async connectedCallback () {
-    this.appElem = document.createElement('div')
+    const [
+      { createApp, reactive },
+      { default: TemplateBuilder }
+    ] = await Promise.all([
+      import('vue'),
+      import('./template_builder/builder')
+    ])
+
+    this.appElem = this.children[0]
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template))
@@ -50,6 +55,5 @@ window.customElements.define('template-builder', class extends HTMLElement {
 
   disconnectedCallback () {
     this.app?.unmount()
-    this.appElem?.remove()
   }
 })

app/javascript/elements/file_dropzone.js

@@ -1,5 +1,3 @@
-import { DirectUpload } from '@rails/activestorage'
-
 import { actionable } from '@github/catalyst/lib/actionable'
 import { target, targetable } from '@github/catalyst/lib/targetable'
 
@@ -11,6 +9,8 @@ export default actionable(targetable(class extends HTMLElement {
   ]
 
   connectedCallback () {
+    import('@rails/activestorage')
+
     this.addEventListener('drop', this.onDrop)
 
     this.addEventListener('dragover', (e) => e.preventDefault())
@@ -39,6 +39,8 @@ export default actionable(targetable(class extends HTMLElement {
   async uploadFiles (files) {
     this.toggleLoading()
 
+    const { DirectUpload } = await import('@rails/activestorage')
+
     await Promise.all(
       Array.from(files).map(async (file) => {
         const upload = new DirectUpload(

app/javascript/submission_form/completed.vue

@@ -45,7 +45,6 @@
 
 <script>
 import { IconCircleCheck, IconMail, IconDownload, IconInnerShadowTop } from '@tabler/icons-vue'
-import confetti from 'canvas-confetti'
 
 export default {
   name: 'FormCompleted',
@@ -67,7 +66,9 @@ export default {
       isDownloading: false
     }
   },
-  mounted () {
+  async mounted () {
+    const { default: confetti } = await import('canvas-confetti')
+
     confetti({
       particleCount: 50,
       startVelocity: 30,

app/javascript/submission_form/dropzone.vue

@@ -47,7 +47,6 @@
 </template>
 
 <script>
-import { DirectUpload } from '@rails/activestorage'
 import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'
 
 export default {
@@ -87,6 +86,9 @@ export default {
       return 'el' + Math.random().toString(32).split('.')[1]
     }
   },
+  mounted () {
+    import('@rails/activestorage')
+  },
   methods: {
     onDropFiles (e) {
       this.uploadFiles(e.dataTransfer.files)
@@ -103,6 +105,8 @@ export default {
     async uploadFiles (files) {
       this.isLoading = true
 
+      const { DirectUpload } = await import('@rails/activestorage')
+
       const blobs = await Promise.all(
         Array.from(files).map(async (file) => {
           const upload = new DirectUpload(

app/javascript/submission_form/signature_step.vue

@@ -40,8 +40,6 @@
 </template>
 
 <script>
-import SignaturePad from 'signature_pad'
-import { DirectUpload } from '@rails/activestorage'
 import { IconReload } from '@tabler/icons-vue'
 
 export default {
@@ -75,10 +73,13 @@ export default {
       isSignatureStarted: false
     }
   },
-  mounted () {
+  async mounted () {
     this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
     this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
 
+    import('@rails/activestorage')
+    const { default: SignaturePad } = await import('signature_pad')
+
     this.pad = new SignaturePad(this.$refs.canvas)
 
     this.pad.addEventListener('beginStroke', () => {
@@ -94,11 +95,13 @@ export default {
 
       this.isSignatureStarted = false
     },
-    submit () {
+    async submit () {
       if (this.modelValue) {
         return Promise.resolve({})
       }
 
+      const { DirectUpload } = await import('@rails/activestorage')
+
       return new Promise((resolve) => {
         this.$refs.canvas.toBlob((blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })

app/javascript/template_builder/upload.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import { DirectUpload } from '@rails/activestorage'
 import { IconUpload } from '@tabler/icons-vue'
 
 export default {
@@ -49,10 +48,15 @@ export default {
       return 'el' + Math.random().toString(32).split('.')[1]
     }
   },
+  mounted () {
+    import('@rails/activestorage')
+  },
   methods: {
     async upload () {
       this.isLoading = true
 
+      const { DirectUpload } = await import('@rails/activestorage')
+
       const blobs = await Promise.all(
         Array.from(this.$refs.input.files).map(async (file) => {
           const upload = new DirectUpload(

app/views/icons/_device_floppy.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
+   <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+   <path d="M14 4l0 4l-6 0l0 -4"></path>
+</svg>

app/views/icons/_users_plus.html.erb

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
+  <path d="M3 21v-2a4 4 0 0 1 4 -4h4c.96 0 1.84 .338 2.53 .901"></path>
+  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+  <path d="M16 19h6"></path>
+  <path d="M19 16v6"></path>
+</svg>

app/views/templates/show.html.erb

@@ -1 +1,31 @@
-<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>
+<template-builder data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>">
+  <div>
+    <div style="max-width: 1600px" class="mx-auto pl-4">
+      <div class="flex justify-between py-1.5 items-center pr-4">
+        <div class="flex space-x-3">
+          <a href="/">
+            <%= render 'shared/logo', width: 40, height: 40 %>
+          </a>
+          <span class="text-3xl font-semibold focus:text-clip flex items-center">
+            <span>
+              <%= @template.name %>
+            </span>
+          </span>
+        </div>
+        <div class="space-x-3 flex items-center">
+          <button class="btn btn-primary disabled" disabled>
+            <%= svg_icon('users_plus', class: 'w-5') %>
+            Recipients
+          </button>
+          <button class="base-button disabled" disabled>
+            <%= svg_icon('device_floppy', class: 'w-5') %>
+            Save
+          </button>
+        </div>
+      </div>
+      <div class="flex items-center justify-center h-96">
+        <%= svg_icon('loader', class: 'animate-spin') %>
+      </div>
+    </div>
+  </div>
+</template-builder>

config/webpack/webpack.config.js

@@ -6,11 +6,22 @@ const configs = merge(webpackConfig, {
   resolve: {
     extensions: ['.css', '.scss', '.vue']
   },
+  performance: {
+    maxEntrypointSize: 0
+  },
   optimization: {
     runtimeChunk: false,
     splitChunks: {
       cacheGroups: {
-        default: false
+        default: false,
+        applicationVendors: {
+          test: /\/node_modules\//,
+          chunks: chunk => chunk.name === 'application'
+        },
+        formVendors: {
+          test: /\/node_modules\//,
+          chunks: chunk => chunk.name === 'form'
+        }
       }
     }
   },