@materializecss/materialize 1.2.2 → 2.0.0-alpha

package/Gruntfile.js

@@ -1,42 +1,10 @@
+const path = require('path');
 const sass = require('sass');
+const webpackConfig = require('./webpack.config.js');
 
 module.exports = function(grunt) {
-  const concatFile = 'temp/js/materialize_concat.js.map';
-  const jsFiles = [
-    'js/cash.js',
-    'js/waves.js',
-    'js/component.js',
-    'js/global.js',
-    'js/anime.min.js',
-    'js/collapsible.js',
-    'js/dropdown.js',
-    'js/modal.js',
-    'js/materialbox.js',
-    'js/parallax.js',
-    'js/tabs.js',
-    'js/tooltip.js',
-    'js/toasts.js',
-    'js/sidenav.js',
-    'js/scrollspy.js',
-    'js/autocomplete.js',
-    'js/forms.js',
-    'js/slider.js',
-    'js/cards.js',
-    'js/chips.js',
-    'js/pushpin.js',
-    'js/buttons.js',
-    'js/datepicker.js',
-    'js/timepicker.js',
-    'js/characterCounter.js',
-    'js/carousel.js',
-    'js/tapTarget.js',
-    'js/select.js',
-    'js/range.js'
-  ];
-
   // configure the tasks
   const config = {
-    //  Jasmine
     jasmine: {
       components: {
         src: ['bin/materialize.js'],
@@ -60,13 +28,11 @@ module.exports = function(grunt) {
       }
     },
 
-    //  Sass
     sass: {
       // Global options
       options: {
         implementation: sass
       },
-
       // Task
       expanded: {
         // Target options
@@ -112,7 +78,6 @@ module.exports = function(grunt) {
       }
     },
 
-    // PostCss Autoprefixer
     postcss: {
       options: {
         processors: [
@@ -141,39 +106,51 @@ module.exports = function(grunt) {
       }
     },
 
-    babel: {
+    webpack: {
       options: {
-        sourceMap: false,
-        plugins: [
-          'transform-es2015-arrow-functions',
-          'transform-es2015-block-scoping',
-          'transform-es2015-classes',
-          'transform-es2015-template-literals',
-          'transform-es2015-object-super',
-          'babel-plugin-transform-object-rest-spread'
-        ]
+        /*stats: !process.env.NODE_ENV || process.env.NODE_ENV === "development",*/
       },
-      bin: {
-        options: {
-          sourceMap: true
+
+      dev: Object.assign({}, webpackConfig, {
+        mode: 'development'
+      }),
+
+      dev_watch: Object.assign({}, webpackConfig, {
+        mode: 'development',
+        watch: true,
+      }),
+      
+      dev_dist: Object.assign({}, webpackConfig, {
+        mode: 'development',
+        devtool: false,
+        optimization: {
+          minimize: false
         },
-        files: {
-          'bin/materialize.js': 'temp/js/materialize_concat.js'
+        output: {
+          filename: 'materialize.js',
+          path: path.resolve(__dirname, 'dist/js'),
+          libraryTarget: 'var',
+          library: 'M'
         }
-      },
-      dist: {
-        files: {
-          'dist/js/materialize.js': 'temp/js/materialize.js'
+      }),
+
+      prod_min: Object.assign({}, webpackConfig, {
+        mode: 'production',
+        devtool: 'source-map',
+        output: {
+          filename: 'materialize.min.js',
+          path: path.resolve(__dirname, 'dist/js'),
+          libraryTarget: 'var',
+          library: 'M'
         }
-      }
-    },
+      }),
+    },       
 
-    // Browser Sync integration
     browserSync: {
       bsFiles: ['bin/*', 'css/ghpages-materialize.css', '!**/node_modules/**/*'],
       options: {
         server: {
-          baseDir: './' // make server from root dir
+          baseDir: './docs/' // make server from root dir
         },
         port: 8000,
         ui: {
@@ -186,55 +163,6 @@ module.exports = function(grunt) {
       }
     },
 
-    //  Concat
-    concat: {
-      options: {
-        separator: ';'
-      },
-      dist: {
-        // the files to concatenate
-        src: jsFiles,
-        // the location of the resulting JS file
-        dest: 'temp/js/materialize.js'
-      },
-      temp: {
-        // the files to concatenate
-        options: {
-          sourceMap: true,
-          sourceMapStyle: 'link'
-        },
-        src: jsFiles,
-        // the location of the resulting JS file
-        dest: 'temp/js/materialize_concat.js'
-      }
-    },
-
-    //  Uglify
-    uglify: {
-      options: {
-        // Use these options when debugging
-        // mangle: false,
-        // compress: false,
-        // beautify: true
-      },
-      dist: {
-        files: {
-          'dist/js/materialize.min.js': ['dist/js/materialize.js']
-        }
-      },
-      bin: {
-        files: {
-          'bin/materialize.min.js': ['bin/materialize.js']
-        }
-      },
-      extras: {
-        files: {
-          'extras/noUiSlider/nouislider.min.js': ['extras/noUiSlider/nouislider.js']
-        }
-      }
-    },
-
-    //  Compress
     compress: {
       main: {
         options: {
@@ -255,42 +183,7 @@ module.exports = function(grunt) {
         files: [
           { expand: true, cwd: 'sass/', src: ['materialize.scss'], dest: 'materialize-src/sass/' },
           { expand: true, cwd: 'sass/', src: ['components/**/*'], dest: 'materialize-src/sass/' },
-          {
-            expand: true,
-            cwd: 'js/',
-            src: [
-              'anime.min.js',
-              'cash.js',
-              'component.js',
-              'global.js',
-              'collapsible.js',
-              'dropdown.js',
-              'modal.js',
-              'materialbox.js',
-              'parallax.js',
-              'tabs.js',
-              'tooltip.js',
-              'waves.js',
-              'toasts.js',
-              'sidenav.js',
-              'scrollspy.js',
-              'autocomplete.js',
-              'forms.js',
-              'slider.js',
-              'cards.js',
-              'chips.js',
-              'pushpin.js',
-              'buttons.js',
-              'datepicker.js',
-              'timepicker.js',
-              'characterCounter.js',
-              'carousel.js',
-              'tapTarget.js',
-              'select.js',
-              'range.js'
-            ],
-            dest: 'materialize-src/js/'
-          },
+          { expand: true, cwd: 'src/',  src: ['**/*'], dest: 'materialize-src/ts/' },
           { expand: true, cwd: 'dist/js/', src: ['**/*'], dest: 'materialize-src/js/bin/' },
           { expand: true, cwd: './', src: ['LICENSE', 'README.md'], dest: 'materialize-src/' }
         ]
@@ -353,14 +246,6 @@ module.exports = function(grunt) {
       }
     },
 
-    //  Clean
-    clean: {
-      temp: {
-        src: ['temp/']
-      }
-    },
-
-    //  Pug
     pug: {
       compile: {
         options: {
@@ -369,65 +254,18 @@ module.exports = function(grunt) {
             debug: false
           }
         },
-        files: {
-          'docs/index.html': 'pug/index.pug',
-          'docs/icons.html': 'pug/icons.pug',
-          'docs/about.html': 'pug/about.pug',
-          'docs/sass.html': 'pug/sass.pug',
-          'docs/getting-started.html': 'pug/getting-started.pug',
-          'docs/mobile.html': 'pug/mobile.pug',
-          'docs/parallax.html': 'pug/parallax.pug',
-          'docs/parallax-demo.html': 'pug/parallax-demo.pug',
-          'docs/typography.html': 'pug/typography.pug',
-          'docs/color.html': 'pug/color.pug',
-          'docs/shadow.html': 'pug/shadow.pug',
-          'docs/grid.html': 'pug/grid.pug',
-          'docs/media-css.html': 'pug/media-css.pug',
-          'docs/table.html': 'pug/table.pug',
-          'docs/helpers.html': 'pug/helpers.pug',
-          'docs/buttons.html': 'pug/buttons.pug',
-          'docs/navbar.html': 'pug/navbar.pug',
-          'docs/cards.html': 'pug/cards.pug',
-          'docs/preloader.html': 'pug/preloader.pug',
-          'docs/collections.html': 'pug/collections.pug',
-          'docs/badges.html': 'pug/badges.pug',
-          'docs/footer.html': 'pug/footer.pug',
-          'docs/modals.html': 'pug/modals.pug',
-          'docs/dropdown.html': 'pug/dropdown.pug',
-          'docs/tabs.html': 'pug/tabs.pug',
-          'docs/toasts.html': 'pug/toasts.pug',
-          'docs/tooltips.html': 'pug/tooltips.pug',
-          'docs/sidenav.html': 'pug/sidenav.pug',
-          'docs/pushpin.html': 'pug/pushpin.pug',
-          'docs/waves.html': 'pug/waves.pug',
-          'docs/media.html': 'pug/media.pug',
-          'docs/collapsible.html': 'pug/collapsible.pug',
-          'docs/scrollspy.html': 'pug/scrollspy.pug',
-          'docs/fullscreen-slider-demo.html': 'pug/fullscreen-slider-demo.pug',
-          'docs/pagination.html': 'pug/pagination.pug',
-          'docs/breadcrumbs.html': 'pug/breadcrumbs.pug',
-          'docs/carousel.html': 'pug/carousel.pug',
-          'docs/feature-discovery.html': 'pug/feature-discovery.pug',
-          'docs/pulse.html': 'pug/pulse.pug',
-          'docs/pushpin-demo.html': 'pug/pushpin-demo.pug',
-          'docs/css-transitions.html': 'pug/css-transitions.pug',
-          'docs/404.html': 'pug/404.pug',
-          'docs/autocomplete.html': 'pug/autocomplete.pug',
-          'docs/checkboxes.html': 'pug/checkboxes.pug',
-          'docs/chips.html': 'pug/chips.pug',
-          'docs/pickers.html': 'pug/pickers.pug',
-          'docs/radio-buttons.html': 'pug/radio-buttons.pug',
-          'docs/range.html': 'pug/range.pug',
-          'docs/select.html': 'pug/select.pug',
-          'docs/switches.html': 'pug/switches.pug',
-          'docs/text-inputs.html': 'pug/text-inputs.pug',
-          'docs/floating-action-button.html': 'pug/floating-action-button.pug',
-          'docs/auto-init.html': 'pug/auto-init.pug'
-        }
+        files: [{
+          expand: true,
+          cwd: 'pug/',
+          src: ['*.pug', '!**/pug/includes/*.*'],
+          dest: 'docs/',
+          rename: function (dest, src) {
+            return dest + src.split('.', 2)[0] + '.html';
+          }
+        }]
       }
     },
 
-    //  Watch Files
     watch: {
       pug: {
         files: ['pug/**/*'],
@@ -437,16 +275,14 @@ module.exports = function(grunt) {
           spawn: false
         }
       },
-
-      js: {
-        files: ['js/**/*', '!js/init.js'],
-        tasks: ['js_compile'],
+      copydocs: {
+        files: ['bin/*.js'],
+        tasks: ['copy:docs_js'],
         options: {
           interrupt: false,
           spawn: false
         }
       },
-
       sass: {
         files: ['sass/**/*'],
         tasks: ['sass_compile'],
@@ -457,7 +293,6 @@ module.exports = function(grunt) {
       }
     },
 
-    //  Concurrent
     concurrent: {
       options: {
         logConcurrentOutput: true,
@@ -465,75 +300,21 @@ module.exports = function(grunt) {
       },
       monitor: {
         tasks: [
+          'webpack:dev_watch',
           'pug_compile',
           'sass_compile',
-          'js_compile',
           'watch:pug',
-          'watch:js',
           'watch:sass',
-          'notify:watching',
+          'watch:copydocs',
           'server'
         ]
       }
     },
 
-    //  Notifications
-    notify: {
-      watching: {
-        options: {
-          enabled: true,
-          message: 'Watching Files!',
-          title: 'Materialize', // defaults to the name in package.json, or will use project directory's name
-          success: true, // whether successful grunt executions should be notified automatically
-          duration: 1 // the duration of notification in seconds, for `notify-send only
-        }
-      },
-
-      sass_compile: {
-        options: {
-          enabled: true,
-          message: 'Sass Compiled!',
-          title: 'Materialize',
-          success: true,
-          duration: 1
-        }
-      },
-
-      js_compile: {
-        options: {
-          enabled: true,
-          message: 'JS Compiled!',
-          title: 'Materialize',
-          success: true,
-          duration: 1
-        }
-      },
-
-      pug_compile: {
-        options: {
-          enabled: true,
-          message: 'Pug Compiled!',
-          title: 'Materialize',
-          success: true,
-          duration: 1
-        }
-      },
-
-      server: {
-        options: {
-          enabled: true,
-          message: 'Server Running!',
-          title: 'Materialize',
-          success: true,
-          duration: 1
-        }
-      }
-    },
-
     // Replace text to update the version string
     replace: {
       version: {
-        src: ['bower.json', 'package.js', 'pug/**/*.html', 'pug/_navbar.pug', 'js/global.js'],
+        src: ['bower.json', 'package.js', 'pug/**/*.html', 'pug/includes/_navbar.pug', 'src/global.ts'],
         overwrite: true,
         replacements: [
           {
@@ -583,17 +364,16 @@ module.exports = function(grunt) {
       }
     },
 
-    // Rename files
     rename: {
       rename_src: {
-        src: 'bin/materialize-src' + '.zip',
+        src: 'bin/materialize-src.zip',
         dest: 'bin/materialize-src-v' + grunt.option('newver') + '.zip',
         options: {
           ignore: true
         }
       },
       rename_compiled: {
-        src: 'bin/materialize' + '.zip',
+        src: 'bin/materialize.zip',
         dest: 'bin/materialize-v' + grunt.option('newver') + '.zip',
         options: {
           ignore: true
@@ -635,70 +415,46 @@ module.exports = function(grunt) {
 
   grunt.initConfig(config);
 
-  // load the tasks
-  // grunt.loadNpmTasks('grunt-gitinfo');
+  // load tasks
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-sass');
-  grunt.loadNpmTasks('grunt-contrib-concat');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-compress');
-  grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-pug');
   grunt.loadNpmTasks('grunt-concurrent');
-  grunt.loadNpmTasks('grunt-notify');
   grunt.loadNpmTasks('grunt-text-replace');
   grunt.loadNpmTasks('grunt-banner');
   grunt.loadNpmTasks('grunt-rename-util');
   grunt.loadNpmTasks('grunt-browser-sync');
   grunt.loadNpmTasks('grunt-contrib-jasmine');
   grunt.loadNpmTasks('grunt-postcss');
-  grunt.loadNpmTasks('grunt-babel');
+  grunt.loadNpmTasks('grunt-webpack');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-copy');
 
-  // define the tasks
+  // define tasks
   grunt.registerTask('release', [
+    'replace:version', // before webpack
     'sass:expanded',
     'sass:min',
     'postcss:expanded',
     'postcss:min',
-    'concat:dist',
-    'babel:dist',
-    'uglify:dist',
-    'uglify:extras',
+    'webpack:dev_dist',
+    'webpack:prod_min',
     'usebanner:release',
     'compress:main',
     'compress:src',
     'compress:starter_template',
     'compress:parallax_template',
-    'replace:version',
+    'replace:version', // again because of cdn
     'replace:package_json',
     'rename:rename_src',
     'rename:rename_compiled',
-    'clean:temp'
-  ]);
-
-  grunt.task.registerTask('configureBabel', 'configures babel options', function() {
-    config.babel.bin.options.inputSourceMap = grunt.file.readJSON(concatFile);
-  });
-
-  grunt.registerTask('pug_compile', ['pug', 'notify:pug_compile']);
-  grunt.registerTask('js_compile', [
-    'concat:temp',
-    'configureBabel',
-    'babel:bin',
-    'clean:temp',
-    'copy:docs_js'
-  ]);
-  grunt.registerTask('sass_compile', [
-    'sass:gh',
-    'sass:bin',
-    'postcss:gh',
-    'postcss:bin',
-    'notify:sass_compile'
-  ]);
-  grunt.registerTask('server', ['browserSync', 'notify:server']);
-  grunt.registerTask('monitor', ['concurrent:monitor']);
+  ]);  
+  grunt.registerTask('pug_compile', ['pug']);
+  grunt.registerTask('js_compile', ['webpack:dev', 'copy:docs_js']);
+  grunt.registerTask('sass_compile', ['sass:gh', 'sass:bin', 'postcss:gh', 'postcss:bin']);
+  grunt.registerTask('server', ['browserSync']);
+  grunt.registerTask('monitor', ['concurrent:monitor']); // DEV
   grunt.registerTask('test', ['js_compile', 'sass_compile', 'connect', 'jasmine']);
   grunt.registerTask('jas_test', ['connect', 'jasmine']);
   grunt.registerTask('test_repeat', function() {
@@ -707,7 +463,6 @@ module.exports = function(grunt) {
     for (let i = 0; i < n; i++) {
       tasks.push('jasmine');
     }
-
     grunt.task.run(tasks);
   });
   grunt.registerTask('docs', [

package/README.md

@@ -4,10 +4,10 @@
   </a>
 </p>
 
-<h3 align="center">MaterializeCSS</h3>
+<h3 align="center">Materialize</h3>
 
 <p align="center">
-  Materialize, a CSS Framework based on material design.
+  Materialize, a CSS Framework based on Material Design.
   <br>
   <a href="https://materializecss.github.io/materialize/"><strong>-- Browse the docs --</strong></a>
   <br>