From 63ba8956ee3a74248fe773b08bb63a5c4273c438 Mon Sep 17 00:00:00 2001 From: Julio Ortega Date: Wed, 17 Apr 2024 15:04:10 -0600 Subject: [PATCH] final test --- .../workflows/send-blog-communications.yml | 6 +- .../docs/about/whats-new/posts/2024-4-17.md | 198 ++++++++++++++++++ 2 files changed, 203 insertions(+), 1 deletion(-) create mode 100644 apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-17.md diff --git a/.github/workflows/send-blog-communications.yml b/.github/workflows/send-blog-communications.yml index 1b99db7be7..8ea9056517 100644 --- a/.github/workflows/send-blog-communications.yml +++ b/.github/workflows/send-blog-communications.yml @@ -1,5 +1,8 @@ name: Send blog communications on: + pull_request: + types: + - synchronize push: branches: - production @@ -35,6 +38,7 @@ jobs: run: echo '${{ steps.changed-files.outputs.added_files }}' send-email: + if: false name: Send email runs-on: ubuntu-latest needs: [added-posts] @@ -142,5 +146,5 @@ jobs: -H "Authorization: bearer ${{ steps.auth.outputs.id_token }}" \ -H "Content-Type: application/json" \ -d '{ - "message": "New blog post: \"${{ env.BLOG_POST_HEADING }}\", read full article: ${{ env.POST_URL }}" + "message": "New blog post: \"${{ env.BLOG_POST_HEADING }}\". Read full article: ${{ env.POST_URL }}", }' diff --git a/apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-17.md b/apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-17.md new file mode 100644 index 0000000000..a0d40392e7 --- /dev/null +++ b/apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-17.md @@ -0,0 +1,198 @@ +--- +heading: Added Tree-shaking support for dialtone-vue and dialtone-icons +author: Tico Ortega +posted: '2024-4-15' +--- + + + +# TL;DR: + +- Improved dialtone-vue **bundle size**. +- Added **tree-shaking** support for dialtone-vue and dialtone icons. +- **Updated mono-package exports** (migration guide included) +- Now it's possible to **use icons from @dialpad/dialtone-icons directly** + +
+ +___ + +
+ +**👋 Hey there,** we're excited to share some updates regarding the bundle size of dialtone-vue, +how to migrate to latest dialtone version as the exports changed and how can you use @dialpad/dialtone-icons library to +use isolated icons to avoid bundling a bunch of icons you're not using. + +## Dialtone-vue bundle size + +We've improved the dialtone-vue bundle size by externalizing all the dependencies that are not part of the library. + +### Before + +![dialtone vue bundle analysis before](/assets/images/bundle-analysis-before.png) +![dialtone vue bundle size before](/assets/images/bundle-size-before.png) + +### After (without tree shaking) + +![dialtone vue bundle analysis after, without tree shaking](/assets/images/bundle-analysis-after-without-treeshaking.png) +![dialtone vue bundle size after, without tree shaking](/assets/images/bundle-size-after-without-treeshaking.png) + +### After (with tree shaking) + +![dialtone vue bundle size after, with tree shaking](/assets/images/dialtone-vue-bundle-size-after-tree-shaking.png) + +```bash +✓ 281 modules transformed. +dist/style.css 34.04 kB │ gzip: 5.80 kB +dist/chunks/dropdown_constants-EUcDxBrX.js 0.14 kB │ gzip: 0.15 kB │ map: 0.41 kB +dist/lib/emoji.js 0.35 kB │ gzip: 0.24 kB │ map: 0.10 kB +... +✓ built in 2.15s +``` + +## Migration to dialtone >=9.27.1 + +With the recent improvements, there are two ways of importing component from dialtone. + +### Directly from the bundle. + +- Pros + - Improved code readability as you can include multiple components on a single line. + - Treeshake works on vite+rollup with default config and can be improved with small changes to your [rollup config](https://rollupjs.org/configuration-options/#treeshake). +- Cons + - Doesn't treeshake the library if you're using webpack. + +```js +import { DtButton, DtInput } from '@dialpad/dialtone/vue2' +``` + +### Importing the individual component. + +- Pros + - Treeshake works on most bundlers without additional config as you're importing just what you need by default. +- Cons + - Makes the code a bit less readable and harder to maintain as you need to import every component individually. + +```js +import { DtButton } from '@dialpad/dialtone/vue2/lib/button' +import { DtInput } from '@dialpad/dialtone/vue2/lib/input' +``` + +Note: You can use [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) to import the components automatically +to avoid having to import them manually. + +To migrate, replace any instances of the old imports with the corresponding new imports, please refer to the examples table below for clarity. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Previous 👎New 👍Enable Tree shaking (best) ✨
+ import { DtEmoji } from '@dialpad/dialtone/vue2/emoji' + + import { DtEmoji } from '@dialpad/dialtone/vue2' + + import { DtEmoji } from '@dialpad/dialtone/vue2/lib/emoji.js' +
+ import { DtMessageInput } from '@dialpad/dialtone/vue2/message_input' + + import { DtMessageInput } from '@dialpad/dialtone/vue2' + + import { DtMessageInput } from '@dialpad/dialtone/vue2/lib/message-input.js' +
+ import { DtTooltipDirective } from '@dialpad/dialtone/vue2/directives' + + import { DtTooltipDirective } from '@dialpad/dialtone/vue2' + + import { DtTooltipDirective } from '@dialpad/dialtone/vue2/lib/tooltip-directive.js' +
+ import SpotBlankSpace from '@dialpad/dialtone/dist/css/vue/spot/SpotBlankSpace' + + import SpotBlankSpace from '@dialpad/dialtone/css/vue/spot/SpotBlankSpace.vue'; + + - +
+ import { DtIcon } from '@dialpad/dialtone/vue2' + + import { DtIcon } from '@dialpad/dialtone/vue2/icon'; + + import { DtIconAccessibility } from '@dialpad/dialtone-icons'; +
+
+ +## Using dialtone-icons + +Backwards-compatible support for DtIcon will remain for the near-term. However, we encourage you to begin updating your projects to the new dialtone-icons usage for a seamless and better experience. + +Previously, to use an icon on your app you had to do: + +```jsx +import { DtIcon } from '@dialpad/dialtone' + + +``` + +This is going to change going forward to enable better tree shaking capabilities and a possible lazy-loading in the future to improve even more the load of your app. + +As of dialtone components, there's also two ways of importing icons, with the same caveats and advantages as [importing components](#directly-from-the-bundle): + +```jsx +import { DtIconAccessibility } from '@dialpad/dialtone-icons/vue2' +import { DtIconApple } from '@dialpad/dialtone-icons/vue2/apple' +``` + +use it as follows: + +```jsx + + +``` + +This way, only the icons you import are going to be bundled on your package, improving bundle size, build and runtime performance. + +## Got questions? + +For more detailed information, read our [README.md](https://github.com/dialpad/dialtone/blob/staging/README.md#import-packages). + +We're here to help! Reach out us in the `#dialtone` channel for any assistance you need. + +Thanks for your patience and understanding, +Dialtone Team 💜 + + +