Skip to content

v10.1.0 "Carl"
Compare
Choose a tag to compare
@illepic illepic released this 09 Oct 16:50
v10.1.0
4ccdbdb

The 10.1.0 Carl release aims to bring in Vue and streamline most other processes within Particle.

Javascript

  • First class support for Vue. See ./source/_patterns/02-molecules/vue-widget/ for examples of simple Vue and VueX. Testing included as well! Has full access to all our Sass variables and mixins!
  • With the new ./particle.js configuration helper, ALL app entry points are prepended with @babel/polyfill to ensure we have solid IE11 support.
  • The example Drupal behavior within ./apps/drupal/index.js now features the ideal approach to handling custom settings. All components may need settings, and Drupal may be able to provide it. This is the spot where that should happen. Lots of elegant ES6 object destructuring with default values here. See the corresponding Carousel component at ./source/_patterns/02-molecules/carousel/index.j for an example of a component that provides its own default, overridable settings.
  • We're bringing in a little bit of magic with require.context() within ./source/design-system.js. Instead of manually importing every single component with import * as componentName from 'molecules/componentName; and then immediately exporting it on an object that includes a key/value of componentName, we're now leveraging the power of Webpack's require.context() to watch all root folders within atoms/molecules/organisms (templates/pages are handled within ./apps/pl/glob.js). This should make adding and removing components much easier.
  • Font Awesome 5! All Font Awesome Sass removed, JS api only. See #412 for details.

PHP/Twig

  • Particle now has just enough of a ./composer.json to show up at packagist.org.
  • Twig linting via npm run lint:twig, which is also a part of npm run lint.
  • Pattern Lab's dependencies within ./apps/pl/pattern-lab now points to the main, supported repos and modern versions.
  • The twig-namespaces gulp node app and gulp task now actually sorts namespaces alphanumerically. Prior it sorted by length because reasons. It is no longer a git merge nightmare.

Sass

  • Bootstrap printing and non-printing Sass files are now revamped and consolidated instead of spread around the components. See #411. All Bootstrap configuration happens in a single location. All Bootstrap css generation happens in a single location.
  • Example font inclusion, via a Google Fonts hosted font and a local file. See ./source/_patterns/00-protons/printing/_type.scss for both examples.
  • No more manual inclusion of string @import 00-protons/variables at the top of every component .scss file. The Webpack sass-loader now injects this automatically so we're guaranteed access to all variables, mixins, and functions.
  • Font Awesome 5! All Font Awesome Sass removed, JS api only. See #412 for details.

Tooling

  • "Supported browsers" concept via ./.browserslistrc. Both babel for JS and postcss-env for CSS use this file to determine compilation target. Run npx browserslist to see which browsers Particle will attempt to transpile assets to support. Note: this allows Particle to automatically drop dead browsers over time.
  • Particle webpack configuration has moved from dev/prod variant files at the root to just a single ./webpack.particle.js file that does NODE_ENV checking inline. This means all apps now have a single config file as well, greatly reducing the complexity of config.
  • ./particle.js helper application at the root now helps merge dev/prod/app configuration. This is the key to having very different CSS compiling in dev mode vs prod mode. ./particle.js also ensures we always have @babel/polyfill before all entry points for every app, transparently.
  • Travis now deploys the built Pattern Lab to an S3 bucket on successful merge into master. Visible here: http://p2-particle.s3-website-us-west-2.amazonaws.com/pl/
  • ./config.js paths are now path() functions instead of strings.
Assets 2
Loading