Allow pack files to be placed in subdirectories

[kuroda]

With this commit, you can organize JavaScript files with namespaces.

For example:

app/javascript/packs/admin/hello_vue.js
app/javascript/packs/admin/hello.vue
app/javascript/packs/hello_vue.js
app/javascript/packs/hello.vue

[ronnyhaase]

I think not considering sub-folders is intended, because app/javascript/packs only contains your entry points and you should probably move the admin folder into app/javascript, and either import it in hello_vue.js or add a hello_vue_admin.js doing so.

I have no clue about Vue but e.g. for React this is totally fine.

[kuroda]

@ronnyhaase

Thanks for your comment.

I suppose that you assume a kind of single page application with a very few entry points. Under this assumption, organizing entry points using subdirectories seems an overdo.

I personally, however, want to have a lot of entry points.

I often create a small Vue component in order to fullfil a small functionality, which used to be done with jQuery. In such case, there are times to need a separate vue file for each action.

Suppose that we have admin/users and portal/users resources, for example. I want to have a vue file for the admin/users#new action, and another for the portal/users#new action. In my opinion, it is very natural to put the former under the app/javascript/packs/admin directory, and the latter under the app/javascript/packs/portal directory.

This use case might not have been under consideration by the core team, but I think it is very important especially for Vue developers.

[ronnyhaase]

I see your point, that you might have a requirement for subfolders in a huge app, where you have multiple areas like "admin" and "portal", each containing multiple pages and therefor entry points.

But I'm still not sure if Webpacker should go for that case by default, but this decision has to be made by the core contributors.

[p0wl]

whats the downside of this pr? the app/javascript/packs folder is the root of entries of webpack and I don't see a reason why you would want subfolders in this directory if not for organizing entries.

So I think this pr enforces developers to keep the packs folder clean from anything but entry points, which I think is a good thing.

[gauravtiwari]

@kuroda How about you just name space them within file name? For ex - admin-new or portal-new . I am not sure, but subdirectories seems redundant, when all we are keeping here are packs/entries, which is essentially going to be one per module or bundle.

Please correct me if I am assuming wrong?

This is what we have in readme,

// app/javascript/packs/calendar.js
require('calendar')

app/javascript/calendar/index.js // gets loaded by require('calendar')
app/javascript/calendar/components/grid.jsx
app/javascript/calendar/styles/grid.sass
app/javascript/calendar/models/month.js

If you have multiple namespaces, just name space the pack/entry name - admin-calendar.js, app-calendar.js.

I guess this change will create some edge cases

[dhh]

I like the idea of using actual directories for namespaces. Follows how we do namespaces in the rest of a Rails app as well. Did you find any problems with this change, Gaurav?

…

On Wed, Apr 5, 2017 at 1:17 PM, Gaurav Tiwari ***@***.***> wrote: @kuroda <https://github.com/kuroda> How about you just name space them within file name? For ex - admin-new or portal-new . I am not sure, but subdirectories seems redundant, when all we are keeping here are packs/entries name, which is essentially going to be one per module or bundle. Please correct me if I am assuming wrong? This is what we have in readme, // app/javascript/packs/calendar.jsrequire('calendar') app/javascript/calendar/index.js // gets loaded by require('calendar') app/javascript/calendar/components/grid.jsx app/javascript/calendar/styles/grid.sass app/javascript/calendar/models/month.js If you have multiple namespaces, just name space the pack/entry name - admin-calendar.js, app-calendar.js. I guess this change will create some edge cases — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#201 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAKtUVuf9OCIXSxX4DA-xWXaBbQJAT7ks5rs9qigaJpZM4MsZBM> .

[ronnyhaase]

I think there are arguments for both sides, but I agree with @dhh it fits with Rails namespaces. And thinking of bigger apps I would prefer directories instead of @gauravtiwari suggestion as well.

As an alternative option, how about only allowing one level of sub-directories by replacing the ** with a single * ? Just an idea, not sure if I like it.

@kuroda

[dhh]

I don't like trying to second guess what's reasonable here. We're designing for adults and they can decide for themselves. We should of course nudge them in a good direction, but think we're already doing that.

…

On Wed, Apr 5, 2017 at 3:54 PM, Ronny Haase ***@***.***> wrote: I think there are arguments for both sides, but I agree with @dhh <https://github.com/dhh> it fits with Rails namespaces. And thinking of bigger apps I would prefer directories instead of @gauravtiwari <https://github.com/gauravtiwari> suggestion as well. As an alternative option, how about only allowing one level of sub-directories by replacing the ** with a single * ? Just an idea, not sure if I like it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#201 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAKtVkfty_x4UE4HcWxuLoCuATa8yWNks5rs_-fgaJpZM4MsZBM> .

[kuroda]

@gauravtiwari

Vue.js allows JS components to pick their template from an HTML element.

If we have this code as app/javascript/packs/hello_world:

import Vue from 'vue/dist/vue.esm'

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: "#app",
    data: { name: "world" },
    methods: {
      changeName: function() {
        this.name = "Alice"
      }
    }
  })
})

then, you can use this component like this:

<div id="app">
  <p>Hello, {{ name }}</p>
  <button v-on:click="changeName">Click me</button>
</div>
<%= javascript_pack_tag "hello_world" %>

With this approach, we can introduce Vue.js to an existing Rails app without massive code change.

I assume that this app has a lot of (hundreds of, maybe) pages which are organized using namespaces.
And we want to create a separate Vue.js component for each page.

In this circumstance, I don't want to see hundreds of JS files scattered in the app/javascript/packs directory.

[gauravtiwari]

Thank you, that totally makes sense and apologies for under-sight on my part. @dhh No, everything works (just tested it). I was worried that this might break the paths generated in the manifest :)

Thanks @kuroda 👍 🍰