Skip to content

Commit 99a25a7

Browse files
committedJul 21, 2024
Fixed an issue that caused too few large bundles
Stencil tries to intelligently decide which components should be bundled together for lazy-loading. Somehow this "intelligence" got confused and we ended up with fewer and fewer larger files along the commit history. Rading more about this, we can in the config define how we want our stuff bundled knowing which components usually are used together. The goal is to balance between multiple downloads and small downloads. This PR manually defines bundles we want. Examples: 1. dnn-monaco-editor has all the component code and all of monaco code in a single bundle (10.7Mb) that can be forever cached even if we do updates (as long as we don't touch that component). 2. dnn-richtext is in a bundle with all of the Jodit code together (1.1Mb) 3. dnn-color-picker is in a bundle (30Kb) has all the components that are always needed for it (buttons, modals, tabs, tab, etc.) 4. dnn-permissions gid (24Kb) has all the components used by it in the same bundle. 5. So on and so forth reducing in size up to our smallest component that can be used on its own, dnn-chevron (1Kb)
1 parent d9564bc commit 99a25a7

File tree

4 files changed

+55
-35
lines changed

4 files changed

+55
-35
lines changed
 

‎packages/stencil-library/custom-elements.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"type": {
4949
"text": "number"
5050
},
51-
"description": "How many suggestions to preload in pixels of their height.\r\nThis is used to calculate the virtual scroll height and request\r\nmore items before they get into view.",
51+
"description": "How many suggestions to preload in pixels of their height.\nThis is used to calculate the virtual scroll height and request\nmore items before they get into view.",
5252
"default": "1000",
5353
"required": false
5454
},
@@ -65,7 +65,7 @@
6565
"type": {
6666
"text": "number"
6767
},
68-
"description": "The total amount of suggestions for the given search query.\r\nThis can be used to show virtual scroll and pagination progressive feeding.\r\nThe needMoreItems event should be used to request more items.",
68+
"description": "The total amount of suggestions for the given search query.\nThis can be used to show virtual scroll and pagination progressive feeding.\nThe needMoreItems event should be used to request more items.",
6969
"required": false
7070
},
7171
{
@@ -130,7 +130,7 @@
130130
"type": {
131131
"text": "string"
132132
},
133-
"description": "Fires when the search query has changed.\r\nThis is almost like valueInput, but it is debounced\r\nand can be used to trigger a search query without overloading\r\nAPI endpoints while typing."
133+
"description": "Fires when the search query has changed.\nThis is almost like valueInput, but it is debounced\nand can be used to trigger a search query without overloading\nAPI endpoints while typing."
134134
},
135135
{
136136
"name": "valueChange",
@@ -234,7 +234,7 @@
234234
"type": {
235235
"text": "\"button\" | \"reset\" | \"submit\""
236236
},
237-
"description": "Optional button type,\r\ncan be either submit, reset or button and defaults to button if not specified.\r\nWarning: DNN wraps the whole page in a form, only use this if you are handling\r\nform submission manually.",
237+
"description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.",
238238
"default": "'button'",
239239
"required": false
240240
},
@@ -261,7 +261,7 @@
261261
"type": {
262262
"text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
263263
},
264-
"description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
264+
"description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
265265
"default": "'primary'",
266266
"required": false
267267
}
@@ -620,7 +620,7 @@
620620
"text": "{ contrast: string; preview: string; cancel: string; confirm: string; normal: string; light: string; dark: string; }"
621621
},
622622
"description": "Can be used to customize the text language.",
623-
"default": "{\r\n contrast: \"Contrast\",\r\n preview: \"Preview\",\r\n cancel: \"Cancel\",\r\n confirm: \"Confirm\",\r\n normal: \"Normal\",\r\n light: \"Light\",\r\n dark: \"Dark\",\r\n }",
623+
"default": "{\n contrast: \"Contrast\",\n preview: \"Preview\",\n cancel: \"Cancel\",\n confirm: \"Confirm\",\n normal: \"Normal\",\n light: \"Light\",\n dark: \"Dark\",\n }",
624624
"required": false
625625
}
626626
],
@@ -736,7 +736,7 @@
736736
"type": {
737737
"text": "boolean"
738738
},
739-
"description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https).",
739+
"description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https).",
740740
"default": "false",
741741
"required": false
742742
},
@@ -745,7 +745,7 @@
745745
"type": {
746746
"text": "number"
747747
},
748-
"description": "Specifies the jpeg quality for when the device\r\ncamera is used to generate a picture.\r\nNeeds to be a number between 0 and 1 and defaults to 0.8",
748+
"description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8",
749749
"default": "0.8",
750750
"required": false
751751
},
@@ -773,7 +773,7 @@
773773
"type": {
774774
"text": "string[]"
775775
},
776-
"description": "A list of allowed file extensions.\r\nIf not specified, any file is allowed.\r\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
776+
"description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
777777
"required": false
778778
},
779779
{
@@ -989,7 +989,7 @@
989989
"kind": "class",
990990
"name": "dnn-image-cropper.tsx",
991991
"tagName": "dnn-image-cropper",
992-
"description": "Allows cropping an image in-browser with the option to enforce a specific final size.\r\nAll computation happens in the browser and the final image is emmited\r\nin an event that has a data-url of the image.",
992+
"description": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image.",
993993
"attributes": [
994994
{
995995
"name": "height",
@@ -1041,7 +1041,7 @@
10411041
"type": {
10421042
"text": "ImageCropperResx"
10431043
},
1044-
"description": "Can be used to customize controls text.\r\nSome values support tokens, see default values for examples.",
1044+
"description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.",
10451045
"required": false
10461046
},
10471047
{
@@ -1064,7 +1064,7 @@
10641064
"type": {
10651065
"text": "File"
10661066
},
1067-
"description": "Emits both when a file is initially select and when the crop has changed.\r\nCompared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name."
1067+
"description": "Emits both when a file is initially select and when the crop has changed.\nCompared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name."
10681068
}
10691069
],
10701070
"slots": [],
@@ -1324,7 +1324,7 @@
13241324
"type": {
13251325
"text": "string"
13261326
},
1327-
"description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided.",
1327+
"description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided.",
13281328
"default": "\"Close modal\"",
13291329
"required": false
13301330
},
@@ -1342,7 +1342,7 @@
13421342
"type": {
13431343
"text": "boolean"
13441344
},
1345-
"description": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content.",
1345+
"description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content.",
13461346
"default": "true",
13471347
"required": false
13481348
},
@@ -1715,7 +1715,7 @@
17151715
"type": {
17161716
"text": "string"
17171717
},
1718-
"description": "Fires up each time the search query changes.\r\nThe data passed is the new query."
1718+
"description": "Fires up each time the search query changes.\nThe data passed is the new query."
17191719
}
17201720
],
17211721
"slots": [],
@@ -2304,7 +2304,7 @@
23042304
"kind": "class",
23052305
"name": "dnn-vertical-splitview.tsx",
23062306
"tagName": "dnn-vertical-splitview",
2307-
"description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\r\n- The content for the left part should be injected in the `left` slot.\r\n- The content for the right part should be injected in the `right` slot.\r\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
2307+
"description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
23082308
"attributes": [
23092309
{
23102310
"name": "split-width-percentage",

‎packages/stencil-library/licenses.json

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,6 @@
33
"licenses": "MIT",
44
"repository": "https://github.com/dnncommunity/dnn-elements",
55
"path": "",
6-
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\README.md"
7-
},
8-
"typescript@5.2.2": {
9-
"licenses": "Apache-2.0",
10-
"repository": "https://github.com/Microsoft/TypeScript",
11-
"publisher": "Microsoft Corp.",
12-
"path": "node_modules\\typescript",
13-
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
6+
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md"
147
}
158
}

‎packages/stencil-library/stencil.config.ts

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,33 @@ async function generateCustomElementsJson(docsData: JsonDocs) {
8989

9090
export const config: Config = {
9191
namespace: 'dnn',
92+
bundles: [
93+
{ components: ['dnn-autocomplete', 'dnn-fieldset' ]},
94+
{ components: ['dnn-button', 'dnn-modal']},
95+
{ components: ['dnn-checkbox']},
96+
{ components: ['dnn-chevron']},
97+
{ components: ['dnn-collapsible']},
98+
{ components: ['dnn-color-input', 'dnn-fieldset', 'dnn-modal', 'dnn-tabs', 'dnn-tab', 'dnn-color-picker', 'dnn-button']},
99+
{ components: ['dnn-color-picker']},
100+
{ components: ['dnn-dropzone']},
101+
{ components: ['dnn-fieldset']},
102+
{ components: ['dnn-image-cropper', 'dnn-dropzone', 'dnn-modal']},
103+
{ components: ['dnn-input', 'dnn-fieldset']},
104+
{ components: ['dnn-modal']},
105+
{ components: ['dnn-monaco-editor']},
106+
{ components: ['dnn-permissions-grid', 'dnn-checkbox', 'dnn-button', 'dnn-searchbox', 'dnn-collapsible']},
107+
{ components: ['dnn-progress-bar']},
108+
{ components: ['dnn-richtext']},
109+
{ components: ['dnn-searchbox']},
110+
{ components: ['dnn-select', 'dnn-fieldset']},
111+
{ components: ['dnn-sort-icon']},
112+
{ components: ['dnn-tabs', 'dnn-tab']},
113+
{ components: ['dnn-textarea', 'dnn-fieldset']},
114+
{ components: ['dnn-toggle']},
115+
{ components: ['dnn-treeview-item', 'dnn-collapsible']},
116+
{ components: ['dnn-vertical-overflow-menu']},
117+
{ components: ['dnn-vertical-splitview']},
118+
],
92119
outputTargets: [
93120
{
94121
type: 'dist',
@@ -125,5 +152,5 @@ export const config: Config = {
125152
sourceMap: true,
126153
testing: {
127154
browserHeadless: "new",
128-
}
155+
},
129156
};

‎packages/stencil-library/vscode-data.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
},
2727
{
2828
"name": "preload-threshold-pixels",
29-
"description": "How many suggestions to preload in pixels of their height.\r\nThis is used to calculate the virtual scroll height and request\r\nmore items before they get into view."
29+
"description": "How many suggestions to preload in pixels of their height.\nThis is used to calculate the virtual scroll height and request\nmore items before they get into view."
3030
},
3131
{
3232
"name": "required",
3333
"description": "Defines whether the field requires having a value."
3434
},
3535
{
3636
"name": "total-suggestions",
37-
"description": "The total amount of suggestions for the given search query.\r\nThis can be used to show virtual scroll and pagination progressive feeding.\r\nThe needMoreItems event should be used to request more items."
37+
"description": "The total amount of suggestions for the given search query.\nThis can be used to show virtual scroll and pagination progressive feeding.\nThe needMoreItems event should be used to request more items."
3838
},
3939
{
4040
"name": "value",
@@ -71,7 +71,7 @@
7171
},
7272
{
7373
"name": "form-button-type",
74-
"description": "Optional button type,\r\ncan be either submit, reset or button and defaults to button if not specified.\r\nWarning: DNN wraps the whole page in a form, only use this if you are handling\r\nform submission manually.",
74+
"description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.",
7575
"values": [
7676
{
7777
"name": "button"
@@ -105,7 +105,7 @@
105105
},
106106
{
107107
"name": "type",
108-
"description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
108+
"description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
109109
"values": [
110110
{
111111
"name": "danger"
@@ -276,11 +276,11 @@
276276
"attributes": [
277277
{
278278
"name": "allow-camera-mode",
279-
"description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https)."
279+
"description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https)."
280280
},
281281
{
282282
"name": "capture-quality",
283-
"description": "Specifies the jpeg quality for when the device\r\ncamera is used to generate a picture.\r\nNeeds to be a number between 0 and 1 and defaults to 0.8"
283+
"description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8"
284284
},
285285
{
286286
"name": "max-file-size",
@@ -361,7 +361,7 @@
361361
"name": "dnn-image-cropper",
362362
"description": {
363363
"kind": "markdown",
364-
"value": "Allows cropping an image in-browser with the option to enforce a specific final size.\r\nAll computation happens in the browser and the final image is emmited\r\nin an event that has a data-url of the image."
364+
"value": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image."
365365
},
366366
"attributes": [
367367
{
@@ -512,15 +512,15 @@
512512
},
513513
{
514514
"name": "close-text",
515-
"description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided."
515+
"description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided."
516516
},
517517
{
518518
"name": "resizable",
519519
"description": "If set to true, the modal becomes resizable."
520520
},
521521
{
522522
"name": "show-close-button",
523-
"description": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content."
523+
"description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content."
524524
},
525525
{
526526
"name": "visible",
@@ -937,7 +937,7 @@
937937
"name": "dnn-vertical-splitview",
938938
"description": {
939939
"kind": "markdown",
940-
"value": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\r\n- The content for the left part should be injected in the `left` slot.\r\n- The content for the right part should be injected in the `right` slot.\r\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component."
940+
"value": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component."
941941
},
942942
"attributes": [
943943
{

0 commit comments

Comments
 (0)
Failed to load comments.