refactor(package): bundle jquery and sui js

Semantic-Org · Jul 10, 2016 · 4a655cb · 4a655cb
1 parent bfd5770
commit 4a655cb
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -58,10 +58,6 @@ export default class TryStardust extends Component {
 
   <!-- SUI CSS -->
   <link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet">
-
-  <!-- Temporary script dependencies until we're done removing jQuery -->
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
 </head>
 <body>
   <script src="bundle.js"></script>

diff --git a/build/karma.conf.babel.js b/build/karma.conf.babel.js
@@ -1,5 +1,6 @@
 const { argv } = require('yargs')
 const config = require('../config')
+const webpack = require('webpack')
 const webpackConfig = require('./webpack.config')
 
 const { paths } = config
@@ -50,7 +51,13 @@ module.exports = (karmaConfig) => {
           ...webpackConfig.module.loaders,
         ],
       }),
-      plugins: webpackConfig.plugins,
+      plugins: [
+        ...webpackConfig.plugins,
+        // utils/jquery ensures jQuery is not on the window before loading it
+        // however, Karma doesn't like how utils/jQuery loads jquery to the window
+        // we instead ignore this module, then load jQuery and semantic-ui-css/semantic
+        new webpack.NormalModuleReplacementPlugin(/utils\/jquery/, 'empty'),
+      ],
       resolve: Object.assign({}, webpackConfig.resolve, {
         alias: Object.assign({}, webpackConfig.resolve.alias, {
           jquery: `${paths.test('mocks')}/SemanticjQuery-mock.js`,

diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -66,11 +66,6 @@ webpackConfig.output = {
 // ------------------------------------
 webpackConfig.plugins = [
   new webpack.DefinePlugin(config.compiler_globals),
-  new webpack.ProvidePlugin({
-    $: 'jquery',
-    jQuery: 'jquery',
-    'window.jQuery': 'jquery',
-  }),
   new webpack.DllReferencePlugin({
     context: paths.base('node_modules'),
     manifest: require(paths.base('dll/vendor-manifest.json')),
@@ -160,7 +155,8 @@ webpackConfig.module.loaders = [{
 // ----------------------------------------
 // For faster builds in dev, rely on prebuilt libraries
 // Local modules can still be enabled (ie for offline development)
-if (argv.localModules) {
+// in TEST we need local modules because karma uses a different index.html (no CDNs)
+if (__TEST__ || argv.localModules) {
   webpackConfig.module.loaders = [
     ...webpackConfig.module.loaders,
     {
@@ -178,21 +174,32 @@ if (argv.localModules) {
     },
   ]
 } else {
+  // we're not using local modules, we're loading deps via CDNs
+  webpackConfig.entry.vendor = _.without(webpackConfig.entry.vendor, [
+    'jquery',
+    'faker',
+    'semantic-ui-css/semantic.js',
+  ])
+
+  // these are browser ready modules or aliased to empty
+  // do not parse their source for faster builds
   webpackConfig.module.noParse = [
     ...webpackConfig.module.noParse,
+    /faker/,
     /jquery/,
-    /semantic-ui-css\/semantic\.js/,
-    /semantic-ui-css\/semantic\.css/,
+    /semantic-ui-css/,
   ]
+
+  // alias imports to empty
   webpackConfig.resolve.alias = Object.assign({}, webpackConfig.resolve.alias, {
-    'semantic-ui-css/semantic.js': 'empty',
     'semantic-ui-css/semantic.css': 'empty',
     'highlight.js/styles/github.css': 'empty',
   })
+
+  // find them on the window
   webpackConfig.externals = {
     jquery: 'jQuery',
     faker: 'faker',
-    lodash: '_',
   }
 }
 

diff --git a/config/_default.js b/config/_default.js
@@ -65,11 +65,10 @@ config = Object.assign({}, config, {
     'classnames',
     'faker',
     'jquery',
-    'lodash',
     'react',
     'react-dom',
     'react-highlight',
-    'semantic-ui-css/semantic.js',
+    'semantic-ui-css/semantic',
   ],
   compiler_stats: {
     hash: false,            // the hash of the compilation

diff --git a/docs/app/Components/Root.js b/docs/app/Components/Root.js
@@ -1,4 +1,3 @@
-import 'semantic-ui-css/semantic.js'
 import 'semantic-ui-css/semantic.css'
 import 'highlight.js/styles/github.css'
 import _ from 'lodash'

diff --git a/docs/app/Examples/collections/Form/Validation/FormValidationExamples.js b/docs/app/Examples/collections/Form/Validation/FormValidationExamples.js
@@ -16,7 +16,7 @@ export default class FormValidationExamples extends Component {
           title='Validating on Blur and other Events'
           description={`
             Validation messages can also appear inline.
-            UI Forms automatically format labels with the class name <code>prompt</code>.
+            UI Forms automatically format labels with the class name "prompt".
             These validation prompts are also set to appear on input change instead of form submission.
           `}
           examplePath='collections/Form/Validation/FormValidatingOnBlurAndOtherEventsExample'

diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -7,9 +7,6 @@
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/<%= htmlWebpackPlugin.options.versions.highlightjs %>/styles/github.min.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/<%= htmlWebpackPlugin.options.versions.jquery %>/jquery.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/<%= htmlWebpackPlugin.options.versions.lodash %>/lodash.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.js"></script>
   <title>Stardust</title>
   <script>
     // Apply gh-pages SPA redirect that was applied in 404.html

diff --git a/package.json b/package.json
@@ -47,7 +47,9 @@
     "bluebird": "^3.3.4",
     "classnames": "^2.1.5",
     "debug": "^2.2.0",
-    "lodash": "^4.6.1"
+    "jquery": "^3.1.0",
+    "lodash": "^4.6.1",
+    "semantic-ui-css": "^2.2.1"
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",
@@ -76,6 +78,7 @@
     "eslint-config-ta": "^5.1.0",
     "eslint-plugin-mocha": "^2.2.0",
     "eslint-plugin-react": "^5.1.1",
+    "expose-loader": "^0.7.1",
     "express": "^4.13.4",
     "faker": "^3.0.1",
     "file-loader": "^0.8.5",
@@ -116,7 +119,6 @@
     "require-dir": "^0.3.0",
     "rimraf": "^2.5.2",
     "sass-loader": "^3.2.0",
-    "semantic-ui-css": "^2.1.8",
     "simulant": "^0.2.1",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
@@ -130,7 +132,6 @@
     "yargs": "^4.3.2"
   },
   "peerDependencies": {
-    "jquery": "^2.1.4",
     "react": ">=0.14.0 <= 15",
     "react-dom": ">=0.14.0 <= 15"
   }

diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
+import './utils/jquery'
 import { deprecateComponent } from './utils/deprecate'
 
 // ----------------------------------------

diff --git a/src/utils/jquery.js b/src/utils/jquery.js
@@ -0,0 +1,28 @@
+/**
+ * Ensure the user's app only uses our one copy of jQuery and SUI jQuery plugins.
+ */
+import _ from 'lodash'
+
+let jQuery
+if (window.jQuery) jQuery = window.jQuery
+else if (_.get(window, '$.prototype.jquery')) jQuery = window.$
+
+if (jQuery) {
+  throw new Error([
+    'Do not load jQuery, it is bundled with Stardust.',
+    'Stardust will soon be jQuery free: https://github.com/TechnologyAdvice/stardust/issues/247.',
+  ].join(' '))
+}
+
+console.log('...Loading jQuery')
+// load jQuery, then load SUI jQuery
+window.jQuery = window.$ = require('jquery')
+
+console.log('...Loading SUI Checkbox plugin')
+require('semantic-ui-css/components/checkbox')
+
+console.log('...Loading SUI Form plugin')
+require('semantic-ui-css/components/form')
+
+console.log('...Loading SUI Progress plugin')
+require('semantic-ui-css/components/progress')