v6.4 Module Importing [Feature Request]

[grantcarthew]

Hi. I just updated the vue-foundation template project to import each javascript module rather than using the single file foundation.js import from the foundation-sites package.

After a bit of research I discovered the plugins all need to be imported and then registered within the Foundation core.

I have copied the npm.js script from your dist directory and modified it. See the modified file here: https://github.com/vue-foundation/vue-foundation/blob/master/src/foundation.js

It should be easier to import just the modules you want in your project than what is going on in that file.

Sorry, I don't have any suggestions yet. I'll add to this if I think of some.

[marvinhuebner]

You only need to register the plugins to the foundation core if you want to initialize the js plugins with data attributes. If you want to do it this way you can see a example in the foundation-zurb-template here: https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/js/lib/foundation-explicit-pieces.js

For example if you want to use explicit the accordion and want to create a new instance it should enough to import the core and the accordion like this:

import { Foundation } from 'foundation-sites/js/foundation.core';
import { Accordion } from 'foundation-sites/js/foundation.accordion';

const myAccordion = new Foundation.Accordion(element, options);

I think with the foundation 7 release in november this will be much better.

[grantcarthew]

I tried that @marvinhuebner and it didn't work. I found the Dropdown was importing fine however it was not added to the Foundation object. This made the call to the Foundation.Dropdown() fail. It wasn't until I used the Foundation.plugin(Dropdown) that the Dropdown function was added to the Foundation object.

[rafibomb]

@kball Thoughts on this?

[DaSchTour]

Well that's because we have two dimensions of modules here. The ES modules and the "Foundation Modules". Using something like import { Accordion } from 'foundation-sites/js/foundation.accordion'; will not automatically register the plugin, because it's just a reference to an export in the given file and doesn't execute anything. I'll take a look on how the infrastructure might be improved after the typescript migration is done.

[grantcarthew]

OK great. The vue-foundation project would be a great proving ground @DaSchTour.

Thanks for looking into it.

[colin-marshall]

Thanks for this feature request. We’re going to close out this ticket, as we will not be adding more features to Version 6, but your request is being considered for Version 7.

[IamManchanda]

@colin-marshall I express my disconcern regarding this specific issue ... This should be done in v6!

[ncoden]

It seems everyone is not on the same page in the core team.

@grantcarthew Please see https://github.com/zurb/foundation-sites/pull/10864 @IamManchanda There is a lot of isseus similar to this one. So we could have closed it with a "duplicate" tag anyway ;) @colin-marshall No need to reconsider it in v7 now ;)

[IamManchanda]

Seems good to me @ncoden