Releases: phase2/particle
v10.3.0 "Chester"
- Dropping support for Node 6.
- Better
.eslintrc.js
config - Extensive Drupal theme preprocessing includes. See
particle.theme
- Beginning of the ParticleTools PHP namespace and helper. Docs here
- Wrapping Drupal layouts templates regions in proper attributes
- Twig lint now only prints errors
- All NPM dependencies updated since December
- Sass formatting
- Revamped all Vue tests to use updated vue testing tools
- Reformatted all Vue
<template>
blocks using new Vue prettier config - Ensure
pl-paths.js
ignores protons and SVG icons for cleaner pa11y and Backstop testing - pa11y config is updated to slight more relaxed standards
- OTF fonts are now understood by webpack
v10.2.1
- Twig referenced in apps is copied to dist/
- Apps now read twig from dist/
- Config naming convention in apps is now clearer
- Drupal Layout Builder layouts now part of drupal app
- Drupal
particle.libraries.yml
file now uses relative paths to assets (finally!) - Drupal .theme preprocessing for better logo handling
- Fixed Drupal completely missing organisms namespace by properly providing index.js to card-grid/
- Fix uglify build times in webpack by using terser package
- Use spacers in sass provided by bootstrap instead of homegrown $spacing
- px to rem function now part of custom sass
- breakpoints from sass available to js!
- SVG icon size issue fix
- vue widget memory leak fix
v10.2.0 "Phil"
Particle v10.2.0 "Phil" is out!
The main goal of v10.2.0 was to bring the "multi-design-system" architecture to the folder and configuration structure. This means that below source/
should be folders containing totally self-sufficient design systems. You get one out of the box: source/default/
. Note the config at the root of source/default/
, especially namespaces.js
. Each design system now not only provides its own twig, sass, and js files, it also informs any consuming apps/
about its "namespaces". These namespaces (just a name like "atoms" and a path where "atoms" live) are shared between webpack and jest, as well as understood by Drupal, Grav, and Pattern Lab!
Other notable changes:
- Babel and Jest config is handled by dynamic
babel|jest.config.js
files instead of passive .rc (JSON) files. - twig-lint dependency is moved to root composer.json
npm run setup
not composer installs at rootdist/
is now separated out by app. There is no longer a single dump of assets, but per-app folders.- The Drupal app now checks if the Component Libraries module is installed and informs the user to install it
- All webpack has been updated to use defined app/design-system names dynamically
- gulp config now depends entirely on being passed a config.js file. This makes gulp tasks dynamic per app, allowing multiple Pattern Labs to run in a single Particle
- pa11y tests by default now automatically read the Pattern Lab json an test ALL Pattern Lab urls.
- Lots of cleanup, formatting, dependency updates
v10.1.1
v10.1.0 "Carl"
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 withimport * as componentName from 'molecules/componentName;
and then immediately exporting it on an object that includes a key/value ofcomponentName
, we're now leveraging the power of Webpack'srequire.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 ofnpm 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. Runnpx 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 doesNODE_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 nowpath()
functions instead of strings.
v10.0.0
🎆 PARTICLE V10 IS FINALLY HERE 🎆
This release features over 220 commits and 6 months of work to get Particle unified and stable.
- Node 10 compatibility!
- Prettier is available to auto-format most code files. Run with
npm run fmt
- Husky prettifies all files on git commit
- Massively revamped icon system, now featuring embedded SVGs, SVG spritesheets, fonticons, and more. See @atoms/svgicons for lots of details.
- Babel no longer looks above the particle directory for an rc file
- Travis now tests PHP 5.6, 7.1, 7.2 and Node 6, 8, 10
- Revamped Drupal jquery extraction from the webpack bundle. See
apps/drupal/particle.libraries.yml
for details - A new RunScriptAfterEmit webpack plugin that is webpack 4 compatible and lets us run scripts like
drupal cr all
after webpack compiles - A new RunScriptOnFiletypeChange webpack plugin that is webpack 4 compatible and is responsible fore compiling Pattern Lab
- Babel now uses full
@babel/polyfill
to support ES6/7 things back to older browsers - Grav theme is mostly stable
- Leverage
npx
to run local binaries instead of npm scripts, ienpx gulp compile
instead ofnpm run gulp -- compile
- Update all the npm modules
- Bootstrap imports now use the dist versions instead of src versions for better compatibility
- Much reformatting,
v10.0.0-beta.3
Twig is now on the Webpack dependency chain! We have a Yeoman generator for new design system components!
- Gulp is further deprecated to just running PL build commands, no more active file watching.
- All webpack files are now split into
dev
andprod
configurations, at the root level and per-app. This means that all apps can use config that best suites active development or production deployment. package.json
scripts are now heavily refactored to to utilize these new webpack splits. You'll notice:dev:pl
andbuild:pl
dev:drupal
andbuild:drupal
dev:grav
andbuild:grav
package.json
scripts are now used to run simultaneously vianpm-run-all
, further letting us rely less on Gulp- All javascript files can now import
.twig
files and trigger a PL rebuild and Webpack DevServer browser refresh when those twig files change apps/pl/index.js
now imports all source demo folders via a webpack "glob" loader. This keeps the design system and demos system separate.source/design-system.js
now includes API functions likecomponentNames()
andenableAllComponents()
. Apps have been updated to use these functions instead of manually iterating all components.- As many source/_data json files converted to yaml as we can
- Spinny loader for PL welcome page while Webpack builds
- PL templates and pages updates and cleanup
v10.0.0-beta.2
Massive rewrite of our handling of Webpack files and big updates to dependencies. Documentation in the README.md file needs to catch up to this release still.
- Webpack 4!
- Babel 7 Beta!
- Updated library for font icon generation
- Example icons are now on a consistent 500x500 canvas
- Webpack config at root is split up into
webpack.particle.dev.js
andwebpack.particle.prod.js
- Each app's webpack config it now split into (eg Pattern Lab):
webpack.pl.shared.js
,webpack.pl.dev.js
, webpack.pl.prod.js`. This gives us a lot of flexibility for asset output. - The custom webpack dev server js app that was once launched by gulp has been nuked, since we can now rely on default webpack-dev-server and our new gulp task called
compile:pl:notify
- webpack-dev-server now opens the browser automatically to the /pl route to avoid confusion.
npm-run-all
let's us orchestratepackage.json
scripts and rely on gulp less- The Pattern Lab app now uses purely JS hot-reloaded styles for rapid prototyping.
ExtractTextPlugin
has been moved toprod
configs. package.json
scripts use consistent naming structure finally.- Favicon generation has been temporarily removed
Upcoming:
dev:drupal
script for watching and recompiling assets (and clearing caches)build:pl
script for generating PL assets that can be served via a static host (not just active dev server)- README.md needs some love
v10.0.0-beta1
- Better landing page
- ASTROGOAT
v10.0.0-beta.0
See all notes from v10.0.0-alpha.0 with the addition of:
- Jest testing configured with basic tests included for most patterns
- An example javascript-widget utilizing all our tools
- Simpler travis command