Hey everyone, it's been a while! I'd like to bring to your attention some recent updates to Dialtone Vue's infrastructure. This will mostly only affect developers contributing to Dialtone, however there is one small breaking change consumers of Dialtone Vue will need to make after this update if you are using Vue 2.
The Dialtone developers will make this update in Dialpad, but if you maintain an app separate from Dialpad you'll have to make this update yourself.
Breaking change
Similar to what we have already done with our Vue 3 package, our Dialtone Vue CSS file is now separate from our javascript bundle. You will need to globally include it in your entry point like so:
import '@dialpad/dialtone-vue/css';
or within another css file which is loaded at your entry point:
@import 'node_modules/@dialpad/dialtone-vue/dist/style.css';
Vite
Dialtone Vue has upgraded from Vue CLI with webpack to Vite. This gives us a number of benefits mostly performance related:
- Extremely fast local development and hot module replacement
- Native ES Modules output build (No more babel transpilation!)
- Simpler config
You run the local server exactly the same way as before via npm start. One important change to note is that all Vue files imported in code now must have the .vue extension included.
You can read more about why we chose vite:
Storybook 7.0
7.0 is Storybook's largest update ever. It has full support for Vite, is easier to develop for, and fixes numerous issues with older version of storybook. My personal favourite is that "view code" examples which had very limited support in the past, now work perfectly for Vue components.
For the most part Dialtone Vue's Storybook should be similar to before. One thing you may notice is that documentation pages have been moved from a tab on the story page to a story entry under the component dropdown in the sidebar.
MDX files and stories.js files have also had their syntax changed which I will not go into in great detail, but you can see all the changes in the Storybook 7 migration guide.
This will also allow us to do some cool stuff in the future, such as interaction tests.
Jest
We have migrated from Mocha to Jest to modernize our testing infrastructure. We were having many problems with Mocha and it is becoming quite dated. We no longer have to include separate libraries for assertions and mocking (chai, sinon) as Jest is an all-in-one framework.
Syntax between Mocha and Jest is quite similar, the main place you will notice a difference is when making assertions. Jest has more of a "chained" style syntax:
mocha (chai):
assert.isTrue(button.classes().includes('d-btn--danger'));
jest:
expect(button.classes().includes('d-btn--danger')).toBe(true);
see more details on expect syntax
Module mode
Dialtone Vue now runs in native ES modules mode, meaning that by default files with extension .js must be written with ES module import syntax:
import x from 'dialtone-vue'
If for some reason you need a file in CommonJS syntax:
const x = require('dialtone-vue').x;
it must have extension .cjs instead of .js. You will see some config files in Dialtone Vue that have this extension.
Currently open branches
If you have any currently open branches you are working on in Dialtone Vue, it's likely you will get many conflicts when merging staging into your branch. I (Brad Paugh) can help you out with fixing these. Just send me a message on Slack or Dialpad.
Finally with such a large change it is likely you may see some bugs in our Storybook, please report these if you see them.