From 329902ccf873c6c4559c273ed1fd4d384c23a72c Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 14 Jan 2018 23:28:58 +0100 Subject: [PATCH] chore: make UMD build default entry point Make UMD (universal module definition) build the default entry point (`pkg.main`). Related changes: * make `js/entries/foundation` build AND export Foundation and plugins * use `js/entries/foundation` as ESM entry point * use `dist/js/foundation.js` as browser entry point * delete useless `dist/js/npm.js` --- dist/js/npm.js | 103 -------------------------------- gulp/tasks/javascript.js | 38 +++++++----- js/entries/foundation.js | 126 ++++++++++++++++++++++----------------- package.json | 5 +- 4 files changed, 97 insertions(+), 175 deletions(-) delete mode 100644 dist/js/npm.js diff --git a/dist/js/npm.js b/dist/js/npm.js deleted file mode 100644 index bad432327..000000000 --- a/dist/js/npm.js +++ /dev/null @@ -1,103 +0,0 @@ -import $ from 'jquery'; - -import { Foundation } from '../../js/foundation.core'; -Foundation.addToJquery($); - -// Add Foundation Utils to Foundation global namespace for backwards -// compatibility. - -import { rtl, GetYoDigits, transitionend } from '../../js/foundation.util.core'; -Foundation.rtl = rtl; -Foundation.GetYoDigits = GetYoDigits; -Foundation.transitionend = transitionend; - -import { Box } from '../../js/foundation.util.box' -import { onImagesLoaded } from '../../js/foundation.util.imageLoader'; -import { Keyboard } from '../../js/foundation.util.keyboard'; -import { MediaQuery } from '../../js/foundation.util.mediaQuery'; -import { Motion, Move } from '../../js/foundation.util.motion'; -import { Nest } from '../../js/foundation.util.nest'; -import { Timer } from '../../js/foundation.util.timer'; - -Foundation.Box = Box; -Foundation.onImagesLoaded = onImagesLoaded; -Foundation.Keyboard = Keyboard; -Foundation.MediaQuery = MediaQuery; -Foundation.Motion = Motion; -Foundation.Move = Move; -Foundation.Nest = Nest; -Foundation.Timer = Timer; - -// Touch and Triggers previously were almost purely sede effect driven, -// so n../../js// need to add it to Foundation, just init them. - -import { Touch } from '../../js/foundation.util.touch'; -Touch.init($); - -import { Triggers } from '../../js/foundation.util.triggers'; -Triggers.init($, Foundation); - -import { Abide } from '../../js/foundation.abide'; -Foundation.plugin(Abide, 'Abide'); - -import { Accordion } from '../../js/foundation.accordion'; -Foundation.plugin(Accordion, 'Accordion'); - -import { AccordionMenu } from '../../js/foundation.accordionMenu'; -Foundation.plugin(AccordionMenu, 'AccordionMenu'); - -import { Drilldown } from '../../js/foundation.drilldown'; -Foundation.plugin(Drilldown, 'Drilldown'); - -import { Dropdown } from '../../js/foundation.dropdown'; -Foundation.plugin(Dropdown, 'Dropdown'); - -import { DropdownMenu } from '../../js/foundation.dropdownMenu'; -Foundation.plugin(DropdownMenu, 'DropdownMenu'); - -import { Equalizer } from '../../js/foundation.equalizer'; -Foundation.plugin(Equalizer, 'Equalizer'); - -import { Interchange } from '../../js/foundation.interchange'; -Foundation.plugin(Interchange, 'Interchange'); - -import { Magellan } from '../../js/foundation.magellan'; -Foundation.plugin(Magellan, 'Magellan'); - -import { OffCanvas } from '../../js/foundation.offcanvas'; -Foundation.plugin(OffCanvas, 'OffCanvas'); - -import { Orbit } from '../../js/foundation.orbit'; -Foundation.plugin(Orbit, 'Orbit'); - -import { ResponsiveMenu } from '../../js/foundation.responsiveMenu'; -Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu'); - -import { ResponsiveToggle } from '../../js/foundation.responsiveToggle'; -Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle'); - -import { Reveal } from '../../js/foundation.reveal'; -Foundation.plugin(Reveal, 'Reveal'); - -import { Slider } from '../../js/foundation.slider'; -Foundation.plugin(Slider, 'Slider'); - -import { SmoothScroll } from '../../js/foundation.smoothScroll'; -Foundation.plugin(SmoothScroll, 'SmoothScroll'); - -import { Sticky } from '../../js/foundation.sticky'; -Foundation.plugin(Sticky, 'Sticky'); - -import { Tabs } from '../../js/foundation.tabs'; -Foundation.plugin(Tabs, 'Tabs'); - -import { Toggler } from '../../js/foundation.toggler'; -Foundation.plugin(Toggler, 'Toggler'); - -import { Tooltip } from '../../js/foundation.tooltip'; -Foundation.plugin(Tooltip, 'Tooltip'); - -import { ResponsiveAccordionTabs } from '../../js/foundation.responsiveAccordionTabs'; -Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs'); - -export default Foundation; diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js index 0441af8fe..782497be9 100644 --- a/gulp/tasks/javascript.js +++ b/gulp/tasks/javascript.js @@ -38,17 +38,25 @@ var pluginsAsExternals = { './foundation.smoothScroll' : '{SmoothScroll: window.Foundation.SmoothScroll}', }; -var moduleConfig = { - rules: [ - { - test: /.js$/, - use: [ - { - loader: 'babel-loader' - } - ] - } - ] +var webpackConfig = { + externals: { + 'jquery': 'jQuery' + }, + module: { + rules: [ + { + test: /.js$/, + use: [ + { + loader: 'babel-loader' + } + ] + } + ] + }, + output: { + libraryTarget: 'umd', + } } // Core has to be dealt with slightly differently due to bootstrapping externals @@ -57,20 +65,20 @@ var moduleConfig = { gulp.task('javascript:plugin-core', function() { return gulp.src('js/entries/plugins/foundation.core.js') .pipe(named()) - .pipe(webpackStream({externals: {'jquery': 'jQuery'}, module: moduleConfig}, webpack2)) + .pipe(webpackStream(webpackConfig, webpack2)) .pipe(gulp.dest('_build/assets/js/plugins')); }); -gulp.task('javascript:plugins', ['javascript:plugin-core'], function() { +gulp.task('javascript:plugins', ['javascript:plugin-core'], function () { return gulp.src(['js/entries/plugins/*.js', '!js/entries/plugins/foundation.core.js']) .pipe(named()) - .pipe(webpackStream({externals: pluginsAsExternals, module: moduleConfig}, webpack2)) + .pipe(webpackStream(Object.assign({ externals: pluginsAsExternals }, webpackConfig), webpack2)) .pipe(gulp.dest('_build/assets/js/plugins')); }); gulp.task('javascript:foundation', ['javascript:plugins'], function() { return gulp.src('js/entries/foundation.js') .pipe(named()) - .pipe(webpackStream({externals: {jquery: 'jQuery'}, module: moduleConfig}, webpack2)) + .pipe(webpackStream(webpackConfig, webpack2)) .pipe(gulp.dest('_build/assets/js')); }); //gulp.task('javascript:foundation', function() { diff --git a/js/entries/foundation.js b/js/entries/foundation.js index 71c662224..8a4463feb 100644 --- a/js/entries/foundation.js +++ b/js/entries/foundation.js @@ -1,16 +1,7 @@ import $ from 'jquery'; import { Foundation } from '../foundation.core'; -Foundation.addToJquery($); - -// Add Foundation Utils to Foundation global namespace for backwards -// compatibility. - -import { rtl, GetYoDigits, transitionend } from '../foundation.util.core'; -Foundation.rtl = rtl; -Foundation.GetYoDigits = GetYoDigits; -Foundation.transitionend = transitionend; - +import * as CoreUtils from '../foundation.util.core'; import { Box } from '../foundation.util.box' import { onImagesLoaded } from '../foundation.util.imageLoader'; import { Keyboard } from '../foundation.util.keyboard'; @@ -18,6 +9,37 @@ import { MediaQuery } from '../foundation.util.mediaQuery'; import { Motion, Move } from '../foundation.util.motion'; import { Nest } from '../foundation.util.nest'; import { Timer } from '../foundation.util.timer'; +import { Touch } from '../foundation.util.touch'; +import { Triggers } from '../foundation.util.triggers'; +import { Abide } from '../foundation.abide'; +import { Accordion } from '../foundation.accordion'; +import { AccordionMenu } from '../foundation.accordionMenu'; +import { Drilldown } from '../foundation.drilldown'; +import { Dropdown } from '../foundation.dropdown'; +import { DropdownMenu } from '../foundation.dropdownMenu'; +import { Equalizer } from '../foundation.equalizer'; +import { Interchange } from '../foundation.interchange'; +import { Magellan } from '../foundation.magellan'; +import { OffCanvas } from '../foundation.offcanvas'; +import { Orbit } from '../foundation.orbit'; +import { ResponsiveMenu } from '../foundation.responsiveMenu'; +import { ResponsiveToggle } from '../foundation.responsiveToggle'; +import { Reveal } from '../foundation.reveal'; +import { Slider } from '../foundation.slider'; +import { SmoothScroll } from '../foundation.smoothScroll'; +import { Sticky } from '../foundation.sticky'; +import { Tabs } from '../foundation.tabs'; +import { Toggler } from '../foundation.toggler'; +import { Tooltip } from '../foundation.tooltip'; +import { ResponsiveAccordionTabs } from '../foundation.responsiveAccordionTabs'; + +Foundation.addToJquery($); + +// Add Foundation Utils to Foundation global namespace for backwards +// compatibility. +Foundation.rtl = CoreUtils.rtl; +Foundation.GetYoDigits = CoreUtils.GetYoDigits; +Foundation.transitionend = CoreUtils.transitionend; Foundation.Box = Box; Foundation.onImagesLoaded = onImagesLoaded; @@ -29,73 +51,65 @@ Foundation.Nest = Nest; Foundation.Timer = Timer; // Touch and Triggers previously were almost purely sede effect driven, -// so no // need to add it to Foundation, just init them. - -import { Touch } from '../foundation.util.touch'; +// so no need to add it to Foundation, just init them. Touch.init($); - -import { Triggers } from '../foundation.util.triggers'; Triggers.init($, Foundation); -import { Abide } from '../foundation.abide'; Foundation.plugin(Abide, 'Abide'); - -import { Accordion } from '../foundation.accordion'; Foundation.plugin(Accordion, 'Accordion'); - -import { AccordionMenu } from '../foundation.accordionMenu'; Foundation.plugin(AccordionMenu, 'AccordionMenu'); - -import { Drilldown } from '../foundation.drilldown'; Foundation.plugin(Drilldown, 'Drilldown'); - -import { Dropdown } from '../foundation.dropdown'; Foundation.plugin(Dropdown, 'Dropdown'); - -import { DropdownMenu } from '../foundation.dropdownMenu'; Foundation.plugin(DropdownMenu, 'DropdownMenu'); - -import { Equalizer } from '../foundation.equalizer'; Foundation.plugin(Equalizer, 'Equalizer'); - -import { Interchange } from '../foundation.interchange'; Foundation.plugin(Interchange, 'Interchange'); - -import { Magellan } from '../foundation.magellan'; Foundation.plugin(Magellan, 'Magellan'); - -import { OffCanvas } from '../foundation.offcanvas'; Foundation.plugin(OffCanvas, 'OffCanvas'); - -import { Orbit } from '../foundation.orbit'; Foundation.plugin(Orbit, 'Orbit'); - -import { ResponsiveMenu } from '../foundation.responsiveMenu'; Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu'); - -import { ResponsiveToggle } from '../foundation.responsiveToggle'; Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle'); - -import { Reveal } from '../foundation.reveal'; Foundation.plugin(Reveal, 'Reveal'); - -import { Slider } from '../foundation.slider'; Foundation.plugin(Slider, 'Slider'); - -import { SmoothScroll } from '../foundation.smoothScroll'; Foundation.plugin(SmoothScroll, 'SmoothScroll'); - -import { Sticky } from '../foundation.sticky'; Foundation.plugin(Sticky, 'Sticky'); - -import { Tabs } from '../foundation.tabs'; Foundation.plugin(Tabs, 'Tabs'); - -import { Toggler } from '../foundation.toggler'; Foundation.plugin(Toggler, 'Toggler'); - -import { Tooltip } from '../foundation.tooltip'; Foundation.plugin(Tooltip, 'Tooltip'); - -import { ResponsiveAccordionTabs } from '../foundation.responsiveAccordionTabs'; Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs'); + +export { + Foundation, + Box, + onImagesLoaded, + Keyboard, + MediaQuery, + Motion, + Nest, + Timer, + Touch, + Triggers, + Abide, + Accordion, + AccordionMenu, + Drilldown, + Dropdown, + DropdownMenu, + Equalizer, + Interchange, + Magellan, + OffCanvas, + Orbit, + ResponsiveMenu, + ResponsiveToggle, + Reveal, + Slider, + SmoothScroll, + Sticky, + Tabs, + Toggler, + Tooltip, + ResponsiveAccordionTabs +} + +export default Foundation; + diff --git a/package.json b/package.json index 91fae7aea..9dd311b7a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,10 @@ { "name": "foundation-sites", "version": "6.4.3", - "main": "dist/js/npm.js", + "main": "dist/js/foundation.js", + "browser": "dist/js/foundation.js", + "module": "js/entries/foundation.js", + "jsnext:main": "js/entries/foundation.js", "typings": "dist/js/foundation.d.ts", "description": "The most advanced responsive front-end framework in the world.", "author": "ZURB (http://foundation.zurb.com)", -- 2.47.2