diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e940252892b2..a49df4a9fc92 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,6 +26,12 @@ One great way you can contribute to the project without writing any code is to h - Ask for more information if you believe the issue does not provide all the details required to solve it. - Flag issues that are stale or that should be closed. - Ask for test plans and review code. + +### How does `svelte` work? + +Check out this interactive walkthrough of the `svelte` codebase on CodeCanvas [here](https://www.code-canvas.com/?session=unauthenticatedGithub&repo=svelte&owner=sveltejs&branch=main&OnboardingTutorial=true). + +image ## Our process diff --git a/svelte.CodeCanvas b/svelte.CodeCanvas new file mode 100644 index 000000000000..317f34c9f3cd --- /dev/null +++ b/svelte.CodeCanvas @@ -0,0 +1,6656 @@ +{ + "drawioXML": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n", + "fileName": "", + "fileURL": "github", + "repoData": { + "documentation": { + "path": "documentation", + "fileName": "documentation", + "cellName": "documentation", + "cellId": "ca8c0d2e-ca59-4b37-ac4b-bb218398cb59", + "visible": true, + "children": [ + "documentation/docs" + ] + }, + "documentation/docs": { + "path": "documentation/docs", + "fileName": "docs", + "cellName": "docs", + "cellId": "3ef33673-dab9-498f-b09d-6e0a58fb342e", + "visible": true, + "parentCellId": "ca8c0d2e-ca59-4b37-ac4b-bb218398cb59", + "children": [ + "documentation/docs/03-template-syntax" + ] + }, + "documentation/docs/03-template-syntax": { + "path": "documentation/docs/03-template-syntax", + "fileName": "03-template-syntax", + "cellName": "03-template-syntax", + "cellId": "0061d995-4a9c-4e18-a0bd-4cb733031f0e", + "visible": true, + "parentCellId": "3ef33673-dab9-498f-b09d-6e0a58fb342e", + "children": [ + "documentation/docs/03-template-syntax/14-transition.md", + "documentation/docs/03-template-syntax/16-animate.md" + ] + }, + "documentation/docs/03-template-syntax/14-transition.md": { + "path": "documentation/docs/03-template-syntax/14-transition.md", + "fileName": "14-transition.md", + "cellName": "14-transition.md", + "cellId": "9eb1b9fc-28da-425a-883d-1a9e0c5a22d4", + "visible": true, + "parentCellId": "0061d995-4a9c-4e18-a0bd-4cb733031f0e", + "children": [ + "documentation/docs/03-template-syntax/14-transition.md-simstep-28710c96-e94d-442b-8417-badf5ea506bb" + ] + }, + "documentation/docs/03-template-syntax/16-animate.md": { + "path": "documentation/docs/03-template-syntax/16-animate.md", + "fileName": "16-animate.md", + "cellName": "16-animate.md", + "cellId": "ab0380dd-6f80-424d-b113-fc65d73f01fa", + "visible": true, + "parentCellId": "0061d995-4a9c-4e18-a0bd-4cb733031f0e", + "children": [ + "documentation/docs/03-template-syntax/16-animate.md-simstep-2749951d-3951-40a5-bf47-8dfe061e72bb" + ] + }, + "packages": { + "path": "packages", + "fileName": "packages", + "cellName": "packages", + "cellId": "af678e96-098e-49de-84a0-4e826caeb2c4", + "visible": true, + "children": [ + "packages/svelte" + ] + }, + "packages/svelte": { + "path": "packages/svelte", + "fileName": "svelte", + "cellName": "svelte", + "cellId": "5b30eee6-87d1-43ce-9181-aa7946d68317", + "visible": true, + "parentCellId": "af678e96-098e-49de-84a0-4e826caeb2c4", + "children": [ + "packages/svelte/src" + ] + }, + "packages/svelte/src": { + "path": "packages/svelte/src", + "fileName": "src", + "cellName": "src", + "cellId": "3c333438-3f7b-48da-9999-9436756517e7", + "visible": true, + "parentCellId": "5b30eee6-87d1-43ce-9181-aa7946d68317", + "children": [ + "packages/svelte/src/compiler", + "packages/svelte/src/ambient.d.ts", + "packages/svelte/src/internal", + "packages/svelte/src/legacy", + "packages/svelte/src/store", + "packages/svelte/src/animate" + ] + }, + "packages/svelte/src/ambient.d.ts": { + "path": "packages/svelte/src/ambient.d.ts", + "fileName": "ambient.d.ts", + "cellName": "ambient.d.ts", + "cellId": "7cb454fe-c839-41a0-903e-f61978d6ad1b", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7", + "children": [ + "packages/svelte/src/ambient.d.ts-simstep-41484434-76b1-4c57-8ea0-1bd25cd84ca1" + ] + }, + "packages/svelte/src/animate": { + "path": "packages/svelte/src/animate", + "fileName": "animate", + "cellName": "animate", + "cellId": "611ac4d1-e3f9-44b4-8503-bac882e7d57e", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7", + "children": [ + "packages/svelte/src/animate/index.js" + ] + }, + "packages/svelte/src/animate/index.js": { + "path": "packages/svelte/src/animate/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "e1baa89e-19bd-483e-9394-25e91261b9c5", + "visible": true, + "parentCellId": "611ac4d1-e3f9-44b4-8503-bac882e7d57e" + }, + "packages/svelte/src/compiler": { + "path": "packages/svelte/src/compiler", + "fileName": "compiler", + "cellName": "compiler", + "cellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7", + "children": [ + "packages/svelte/src/compiler/index.js", + "packages/svelte/src/compiler/phases", + "packages/svelte/src/compiler/preprocess" + ] + }, + "packages/svelte/src/compiler/index.js": { + "path": "packages/svelte/src/compiler/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "b152c570-d538-4fdf-a07e-83c12f47ef1d", + "visible": true, + "parentCellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "children": [ + "packages/svelte/src/compiler/index.js-simstep-73988ccd-a18f-4141-9178-ce9152f835b6" + ] + }, + "packages/svelte/src/compiler/phases": { + "path": "packages/svelte/src/compiler/phases", + "fileName": "phases", + "cellName": "phases", + "cellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "visible": true, + "parentCellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "children": [ + "packages/svelte/src/compiler/phases/1-parse", + "packages/svelte/src/compiler/phases/2-analyze", + "packages/svelte/src/compiler/phases/3-transform" + ] + }, + "packages/svelte/src/compiler/phases/1-parse": { + "path": "packages/svelte/src/compiler/phases/1-parse", + "fileName": "1-parse", + "cellName": "1-parse", + "cellId": "6e3ee060-6616-4687-9673-166e4ff68495", + "visible": true, + "parentCellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/index.js", + "packages/svelte/src/compiler/phases/1-parse/read", + "packages/svelte/src/compiler/phases/1-parse/state" + ] + }, + "packages/svelte/src/compiler/phases/1-parse/index.js": { + "path": "packages/svelte/src/compiler/phases/1-parse/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "5e06e830-9256-493b-a0d2-5d514fa79c36", + "visible": true, + "parentCellId": "6e3ee060-6616-4687-9673-166e4ff68495", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/index.js-simstep-6abaf85a-bbba-43a6-8a7b-c137931d139a" + ] + }, + "packages/svelte/src/compiler/phases/1-parse/read": { + "path": "packages/svelte/src/compiler/phases/1-parse/read", + "fileName": "read", + "cellName": "read", + "cellId": "e1949c26-d319-4ce3-a3e2-13cf3b984e9c", + "visible": true, + "parentCellId": "6e3ee060-6616-4687-9673-166e4ff68495", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/read/style.js" + ] + }, + "packages/svelte/src/compiler/phases/1-parse/read/style.js": { + "path": "packages/svelte/src/compiler/phases/1-parse/read/style.js", + "fileName": "style.js", + "cellName": "style.js", + "cellId": "191ce14b-6daa-48ae-895a-46feec6ca558", + "visible": true, + "parentCellId": "e1949c26-d319-4ce3-a3e2-13cf3b984e9c", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/read/style.js-simstep-10c33676-7337-42af-8dbd-dce381adc7ac" + ] + }, + "packages/svelte/src/compiler/phases/1-parse/state": { + "path": "packages/svelte/src/compiler/phases/1-parse/state", + "fileName": "state", + "cellName": "state", + "cellId": "3d0521fa-d547-4c24-bb2b-aa38093ea991", + "visible": true, + "parentCellId": "6e3ee060-6616-4687-9673-166e4ff68495", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/state/tag.js", + "packages/svelte/src/compiler/phases/1-parse/state/element.js" + ] + }, + "packages/svelte/src/compiler/phases/1-parse/state/element.js": { + "path": "packages/svelte/src/compiler/phases/1-parse/state/element.js", + "fileName": "element.js", + "cellName": "element.js", + "cellId": "211aefd9-d0d7-4a49-bc9e-b639fd1c7082", + "visible": true, + "parentCellId": "3d0521fa-d547-4c24-bb2b-aa38093ea991", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/state/element.js-simstep-b2adfb46-eaea-466a-b752-bdb0bb0a0d87", + "packages/svelte/src/compiler/phases/1-parse/state/element.js-simstep-63a8c2b5-f6ce-4d09-aa94-73a18d25b1af" + ] + }, + "packages/svelte/src/compiler/phases/1-parse/state/tag.js": { + "path": "packages/svelte/src/compiler/phases/1-parse/state/tag.js", + "fileName": "tag.js", + "cellName": "tag.js", + "cellId": "91a93014-ea20-4b47-98a4-eb2647df7442", + "visible": true, + "parentCellId": "3d0521fa-d547-4c24-bb2b-aa38093ea991", + "children": [ + "packages/svelte/src/compiler/phases/1-parse/state/tag.js-simstep-dbce1619-de41-4a9b-b635-11f05daf28a1", + "packages/svelte/src/compiler/phases/1-parse/state/tag.js-simstep-ee19ef10-dc97-48f1-a8ff-cb5ecf5728bc" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze": { + "path": "packages/svelte/src/compiler/phases/2-analyze", + "fileName": "2-analyze", + "cellName": "2-analyze", + "cellId": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc", + "visible": true, + "parentCellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/index.js", + "packages/svelte/src/compiler/phases/2-analyze/visitors" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/index.js": { + "path": "packages/svelte/src/compiler/phases/2-analyze/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "b3e80350-454f-4bc2-a6ca-eaa85bbec2fb", + "visible": true, + "parentCellId": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/index.js-simstep-e3549e74-8d2c-49f9-9d16-7573de53db6a", + "packages/svelte/src/compiler/phases/2-analyze/index.js-simstep-177851bc-bad8-4b21-b6b1-37f671aa65ad" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/visitors": { + "path": "packages/svelte/src/compiler/phases/2-analyze/visitors", + "fileName": "visitors", + "cellName": "visitors", + "cellId": "80e4a10f-f281-44c7-80c8-b09bb2c995ef", + "visible": true, + "parentCellId": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js", + "packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js", + "packages/svelte/src/compiler/phases/2-analyze/visitors/shared", + "packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js": { + "path": "packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js", + "fileName": "BindDirective.js", + "cellName": "BindDirective.js", + "cellId": "1b42cdbe-d287-4432-9878-f504b5a1a9e1", + "visible": true, + "parentCellId": "80e4a10f-f281-44c7-80c8-b09bb2c995ef", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js-simstep-56760edd-8197-436f-8793-d1036fac8776" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js": { + "path": "packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js", + "fileName": "EachBlock.js", + "cellName": "EachBlock.js", + "cellId": "e93ddce2-f07a-4280-ba0e-dcb525c61156", + "visible": true, + "parentCellId": "80e4a10f-f281-44c7-80c8-b09bb2c995ef", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js-simstep-6034fafc-8dbf-43b4-bb5e-3ce9cd58fc15" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js": { + "path": "packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js", + "fileName": "SnippetBlock.js", + "cellName": "SnippetBlock.js", + "cellId": "30198efb-97e1-4306-8db4-662c357ec5ed", + "visible": true, + "parentCellId": "80e4a10f-f281-44c7-80c8-b09bb2c995ef", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js-simstep-1167723b-785d-4fd8-b422-61507ebd3d0a" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/visitors/shared": { + "path": "packages/svelte/src/compiler/phases/2-analyze/visitors/shared", + "fileName": "shared", + "cellName": "shared", + "cellId": "d8a220fb-e71c-4e7f-8691-e1168af2ade8", + "visible": true, + "parentCellId": "80e4a10f-f281-44c7-80c8-b09bb2c995ef", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js" + ] + }, + "packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js": { + "path": "packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js", + "fileName": "element.js", + "cellName": "element.js", + "cellId": "b81aec1a-1596-46c3-8878-fb07b9287b1d", + "visible": true, + "parentCellId": "d8a220fb-e71c-4e7f-8691-e1168af2ade8", + "children": [ + "packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js-simstep-32ac57eb-f41c-4d55-997a-2f8fb41f5d54" + ] + }, + "packages/svelte/src/compiler/phases/3-transform": { + "path": "packages/svelte/src/compiler/phases/3-transform", + "fileName": "3-transform", + "cellName": "3-transform", + "cellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "visible": true, + "parentCellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/index.js", + "packages/svelte/src/compiler/phases/3-transform/server", + "packages/svelte/src/compiler/phases/3-transform/css", + "packages/svelte/src/compiler/phases/3-transform/client" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client": { + "path": "packages/svelte/src/compiler/phases/3-transform/client", + "fileName": "client", + "cellName": "client", + "cellId": "c321a9c5-a440-4b32-a88b-5da67ca6c95c", + "visible": true, + "parentCellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/transform-client.js", + "packages/svelte/src/compiler/phases/3-transform/client/visitors" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/transform-client.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/transform-client.js", + "fileName": "transform-client.js", + "cellName": "transform-client.js", + "cellId": "3b200b84-3c1c-4699-b96a-634f7d1f153f", + "visible": true, + "parentCellId": "c321a9c5-a440-4b32-a88b-5da67ca6c95c" + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors", + "fileName": "visitors", + "cellName": "visitors", + "cellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "visible": true, + "parentCellId": "c321a9c5-a440-4b32-a88b-5da67ca6c95c", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared", + "packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js", + "packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js", + "packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js", + "packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js", + "packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js", + "fileName": "AnimateDirective.js", + "cellName": "AnimateDirective.js", + "cellId": "27907653-90fd-453c-b46f-65e1d450fab1", + "visible": true, + "parentCellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js-simstep-454afc3a-c047-4cee-a583-bc7245205fec" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js", + "fileName": "AwaitBlock.js", + "cellName": "AwaitBlock.js", + "cellId": "1d8facf4-104a-416a-a8d5-e9d5002e7cb1", + "visible": true, + "parentCellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js-simstep-ba4a8df7-43c2-4261-a212-c49bff26f59b" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js", + "fileName": "BindDirective.js", + "cellName": "BindDirective.js", + "cellId": "371c006f-a99d-4dfa-b6e7-a8673d66cfeb", + "visible": true, + "parentCellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js-simstep-a0a75d39-c6f4-47cd-b653-0ca8cf5b3966" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js", + "fileName": "SnippetBlock.js", + "cellName": "SnippetBlock.js", + "cellId": "363e223e-53de-4243-85f6-d92a9ff85669", + "visible": true, + "parentCellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js-simstep-b9bec382-2c5d-4f98-8146-6aed443f89f1" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js", + "fileName": "TransitionDirective.js", + "cellName": "TransitionDirective.js", + "cellId": "2fe244d0-ca16-417b-9b61-0210d3940778", + "visible": true, + "parentCellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js-simstep-7183b52a-d894-4c9b-938d-debc842f8b01" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared", + "fileName": "shared", + "cellName": "shared", + "cellId": "9279532a-ef72-4083-a656-88628f7d400d", + "visible": true, + "parentCellId": "fb0bc35c-b4cb-48aa-80c2-7c1d3388fffc", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js", + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js", + "fileName": "component.js", + "cellName": "component.js", + "cellId": "6fede3bc-b52f-42b2-970e-209ccd0841b7", + "visible": true, + "parentCellId": "9279532a-ef72-4083-a656-88628f7d400d" + }, + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js", + "fileName": "element.js", + "cellName": "element.js", + "cellId": "ad4d641c-edf4-4af2-89a3-da522df729b0", + "visible": true, + "parentCellId": "9279532a-ef72-4083-a656-88628f7d400d", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js-simstep-ca037e33-e250-43e0-8aa4-e9eeaf0a98e9" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/css": { + "path": "packages/svelte/src/compiler/phases/3-transform/css", + "fileName": "css", + "cellName": "css", + "cellId": "79795dc7-1024-490f-a4c2-d3cdc040baf4", + "visible": true, + "parentCellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/css/index.js" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/css/index.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/css/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "a5a0d13b-b847-40eb-978a-7bd065fa6270", + "visible": true, + "parentCellId": "79795dc7-1024-490f-a4c2-d3cdc040baf4", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/css/index.js-simstep-cff22a9e-4943-4c0a-86c9-3866b43146be" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/index.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "b1b25193-eb67-4c5c-b350-0f5a1d0f3a4a", + "visible": true, + "parentCellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/index.js-simstep-f40522ec-9c92-4e66-8338-0d0a0b420f3b" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/server": { + "path": "packages/svelte/src/compiler/phases/3-transform/server", + "fileName": "server", + "cellName": "server", + "cellId": "fd1e2bba-0950-46fe-9c35-63cc0fd336ab", + "visible": true, + "parentCellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/server/transform-server.js" + ] + }, + "packages/svelte/src/compiler/phases/3-transform/server/transform-server.js": { + "path": "packages/svelte/src/compiler/phases/3-transform/server/transform-server.js", + "fileName": "transform-server.js", + "cellName": "transform-server.js", + "cellId": "9a0b1c7a-6ab2-46e9-a05c-78dc5d0f60a2", + "visible": true, + "parentCellId": "fd1e2bba-0950-46fe-9c35-63cc0fd336ab", + "children": [ + "packages/svelte/src/compiler/phases/3-transform/server/transform-server.js-simstep-22b12906-f8bf-4ca8-bb11-0830c4dd7001" + ] + }, + "packages/svelte/src/compiler/preprocess": { + "path": "packages/svelte/src/compiler/preprocess", + "fileName": "preprocess", + "cellName": "preprocess", + "cellId": "0073948b-2910-4cc1-9ffb-877eb8a76ad8", + "visible": true, + "parentCellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "children": [ + "packages/svelte/src/compiler/preprocess/index.js" + ] + }, + "packages/svelte/src/compiler/preprocess/index.js": { + "path": "packages/svelte/src/compiler/preprocess/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "f720a08f-2642-40fc-8f79-66a3fee2b5b2", + "visible": true, + "parentCellId": "0073948b-2910-4cc1-9ffb-877eb8a76ad8", + "children": [ + "packages/svelte/src/compiler/preprocess/index.js-simstep-df806b8a-f7d8-42b9-b37d-784b5f0f674d", + "packages/svelte/src/compiler/preprocess/index.js-simstep-37fc3a53-23b5-4a2d-bd5b-35ff705f407f", + "packages/svelte/src/compiler/preprocess/index.js-simstep-3af7367f-20ce-4f60-a67d-d1ea084dfbc7", + "packages/svelte/src/compiler/preprocess/index.js-simstep-0b1ed861-1e73-4d13-9a29-2914f4312b51", + "packages/svelte/src/compiler/preprocess/index.js-simstep-c6e8333b-d47d-4e3b-98a6-675469af864e", + "packages/svelte/src/compiler/preprocess/index.js-simstep-f15f8fb9-a25c-4d33-8057-510378599a36", + "packages/svelte/src/compiler/preprocess/index.js-simstep-8d4cb3f3-f71c-438b-b1b1-1bd5a5f5f0dc" + ] + }, + "packages/svelte/src/internal": { + "path": "packages/svelte/src/internal", + "fileName": "internal", + "cellName": "internal", + "cellId": "c9eaf8af-5614-48cf-9729-cb09ac85fab9", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7", + "children": [ + "packages/svelte/src/internal/client", + "packages/svelte/src/internal/server" + ] + }, + "packages/svelte/src/internal/client": { + "path": "packages/svelte/src/internal/client", + "fileName": "client", + "cellName": "client", + "cellId": "f01b052e-68c5-443b-9292-308b1de23715", + "visible": true, + "parentCellId": "c9eaf8af-5614-48cf-9729-cb09ac85fab9", + "children": [ + "packages/svelte/src/internal/client/reactivity", + "packages/svelte/src/internal/client/proxy.js", + "packages/svelte/src/internal/client/render.js", + "packages/svelte/src/internal/client/dom", + "packages/svelte/src/internal/client/index.js" + ] + }, + "packages/svelte/src/internal/client/dom": { + "path": "packages/svelte/src/internal/client/dom", + "fileName": "dom", + "cellName": "dom", + "cellId": "2b0f8570-634f-41a8-9d0c-0616c23238f7", + "visible": true, + "parentCellId": "f01b052e-68c5-443b-9292-308b1de23715", + "children": [ + "packages/svelte/src/internal/client/dom/template.js", + "packages/svelte/src/internal/client/dom/elements", + "packages/svelte/src/internal/client/dom/css.js", + "packages/svelte/src/internal/client/dom/blocks" + ] + }, + "packages/svelte/src/internal/client/dom/blocks": { + "path": "packages/svelte/src/internal/client/dom/blocks", + "fileName": "blocks", + "cellName": "blocks", + "cellId": "4d08eab8-19e1-4491-926b-6bad280bd1e6", + "visible": true, + "parentCellId": "2b0f8570-634f-41a8-9d0c-0616c23238f7", + "children": [ + "packages/svelte/src/internal/client/dom/blocks/if.js", + "packages/svelte/src/internal/client/dom/blocks/each.js", + "packages/svelte/src/internal/client/dom/blocks/snippet.js", + "packages/svelte/src/internal/client/dom/blocks/slot.js" + ] + }, + "packages/svelte/src/internal/client/dom/blocks/each.js": { + "path": "packages/svelte/src/internal/client/dom/blocks/each.js", + "fileName": "each.js", + "cellName": "each.js", + "cellId": "2bf992f6-56e3-4314-8ece-5c7a9798471d", + "visible": true, + "parentCellId": "4d08eab8-19e1-4491-926b-6bad280bd1e6", + "children": [ + "packages/svelte/src/internal/client/dom/blocks/each.js-simstep-7e6e69f3-d953-4548-9a52-f0e07cc36990" + ] + }, + "packages/svelte/src/internal/client/dom/blocks/if.js": { + "path": "packages/svelte/src/internal/client/dom/blocks/if.js", + "fileName": "if.js", + "cellName": "if.js", + "cellId": "a0ba1293-8fd2-49dd-9c88-4186082a622c", + "visible": true, + "parentCellId": "4d08eab8-19e1-4491-926b-6bad280bd1e6", + "children": [ + "packages/svelte/src/internal/client/dom/blocks/if.js-simstep-c9fbbdb3-acd4-428e-a025-4855edfd6511" + ] + }, + "packages/svelte/src/internal/client/dom/blocks/slot.js": { + "path": "packages/svelte/src/internal/client/dom/blocks/slot.js", + "fileName": "slot.js", + "cellName": "slot.js", + "cellId": "01a25379-ce0f-4069-affb-782eebe25241", + "visible": true, + "parentCellId": "4d08eab8-19e1-4491-926b-6bad280bd1e6", + "children": [ + "packages/svelte/src/internal/client/dom/blocks/slot.js-simstep-831fa657-9214-4058-82bf-c46815ef1ac1" + ] + }, + "packages/svelte/src/internal/client/dom/blocks/snippet.js": { + "path": "packages/svelte/src/internal/client/dom/blocks/snippet.js", + "fileName": "snippet.js", + "cellName": "snippet.js", + "cellId": "058292a3-5fc0-4db0-84da-046d3288f86b", + "visible": true, + "parentCellId": "4d08eab8-19e1-4491-926b-6bad280bd1e6", + "children": [ + "packages/svelte/src/internal/client/dom/blocks/snippet.js-simstep-718edc43-86c2-4944-a6ab-cdac5973b4f4" + ] + }, + "packages/svelte/src/internal/client/dom/css.js": { + "path": "packages/svelte/src/internal/client/dom/css.js", + "fileName": "css.js", + "cellName": "css.js", + "cellId": "de1d11a3-0955-4b98-a7b4-a96f579dc6aa", + "visible": true, + "parentCellId": "2b0f8570-634f-41a8-9d0c-0616c23238f7", + "children": [ + "packages/svelte/src/internal/client/dom/css.js-simstep-d1e49f9f-7e95-4ff4-9af1-fc74f95bcda4" + ] + }, + "packages/svelte/src/internal/client/dom/elements": { + "path": "packages/svelte/src/internal/client/dom/elements", + "fileName": "elements", + "cellName": "elements", + "cellId": "c2ef09ef-7623-44db-a67d-57f2d75e1057", + "visible": true, + "parentCellId": "2b0f8570-634f-41a8-9d0c-0616c23238f7", + "children": [ + "packages/svelte/src/internal/client/dom/elements/events.js", + "packages/svelte/src/internal/client/dom/elements/bindings", + "packages/svelte/src/internal/client/dom/elements/transitions.js" + ] + }, + "packages/svelte/src/internal/client/dom/elements/bindings": { + "path": "packages/svelte/src/internal/client/dom/elements/bindings", + "fileName": "bindings", + "cellName": "bindings", + "cellId": "e8fb97f3-cf1b-4b8d-a8df-03a86c743a17", + "visible": true, + "parentCellId": "c2ef09ef-7623-44db-a67d-57f2d75e1057", + "children": [ + "packages/svelte/src/internal/client/dom/elements/bindings/input.js" + ] + }, + "packages/svelte/src/internal/client/dom/elements/bindings/input.js": { + "path": "packages/svelte/src/internal/client/dom/elements/bindings/input.js", + "fileName": "input.js", + "cellName": "input.js", + "cellId": "f3694c07-775b-473a-8480-8888be018286", + "visible": true, + "parentCellId": "e8fb97f3-cf1b-4b8d-a8df-03a86c743a17", + "children": [ + "packages/svelte/src/internal/client/dom/elements/bindings/input.js-simstep-f033033f-bb40-49b6-b42c-9ee69d0e2cc6", + "packages/svelte/src/internal/client/dom/elements/bindings/input.js-simstep-0b96b271-3a64-4f76-911a-937547e9f13b", + "packages/svelte/src/internal/client/dom/elements/bindings/input.js-simstep-820fc63a-1b56-4fae-bee8-e71aba1dc25d" + ] + }, + "packages/svelte/src/internal/client/dom/elements/events.js": { + "path": "packages/svelte/src/internal/client/dom/elements/events.js", + "fileName": "events.js", + "cellName": "events.js", + "cellId": "cc25736e-45cb-4ed0-a48f-f51114fd9c5d", + "visible": true, + "parentCellId": "c2ef09ef-7623-44db-a67d-57f2d75e1057" + }, + "packages/svelte/src/internal/client/dom/elements/transitions.js": { + "path": "packages/svelte/src/internal/client/dom/elements/transitions.js", + "fileName": "transitions.js", + "cellName": "transitions.js", + "cellId": "a7e1e1b5-09be-49fa-872b-85a01b459532", + "visible": true, + "parentCellId": "c2ef09ef-7623-44db-a67d-57f2d75e1057", + "children": [ + "packages/svelte/src/internal/client/dom/elements/transitions.js-simstep-7e7ca1f9-5ca4-41da-8f7a-79b432d1c717", + "packages/svelte/src/internal/client/dom/elements/transitions.js-simstep-2f683b42-3a9d-42cd-b039-f5711579fb69", + "packages/svelte/src/internal/client/dom/elements/transitions.js-simstep-5d81373e-8cab-4bf7-8e52-0989dd63129b" + ] + }, + "packages/svelte/src/internal/client/dom/template.js": { + "path": "packages/svelte/src/internal/client/dom/template.js", + "fileName": "template.js", + "cellName": "template.js", + "cellId": "f9414253-6ed2-45a1-9d4a-6ae9f539227e", + "visible": true, + "parentCellId": "2b0f8570-634f-41a8-9d0c-0616c23238f7", + "children": [ + "packages/svelte/src/internal/client/dom/template.js-simstep-3e9bf432-da3b-4e85-a97b-2b21dc80e651" + ] + }, + "packages/svelte/src/internal/client/index.js": { + "path": "packages/svelte/src/internal/client/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "56aca6b5-bcc2-4fa9-bab7-e469261eff57", + "visible": true, + "parentCellId": "f01b052e-68c5-443b-9292-308b1de23715" + }, + "packages/svelte/src/internal/client/proxy.js": { + "path": "packages/svelte/src/internal/client/proxy.js", + "fileName": "proxy.js", + "cellName": "proxy.js", + "cellId": "c59ae393-b4aa-47c7-b324-7a9be46c4dd5", + "visible": true, + "parentCellId": "f01b052e-68c5-443b-9292-308b1de23715" + }, + "packages/svelte/src/internal/client/reactivity": { + "path": "packages/svelte/src/internal/client/reactivity", + "fileName": "reactivity", + "cellName": "reactivity", + "cellId": "cf34a291-6671-4fde-b532-137e252ec7f6", + "visible": true, + "parentCellId": "f01b052e-68c5-443b-9292-308b1de23715", + "children": [ + "packages/svelte/src/internal/client/reactivity/deriveds.js", + "packages/svelte/src/internal/client/reactivity/effects.js", + "packages/svelte/src/internal/client/reactivity/sources.js", + "packages/svelte/src/internal/client/reactivity/batch.js" + ] + }, + "packages/svelte/src/internal/client/reactivity/batch.js": { + "path": "packages/svelte/src/internal/client/reactivity/batch.js", + "fileName": "batch.js", + "cellName": "batch.js", + "cellId": "92ce6570-0bb4-4496-b436-d1f2dfc1608c", + "visible": true, + "parentCellId": "cf34a291-6671-4fde-b532-137e252ec7f6", + "children": [ + "packages/svelte/src/internal/client/reactivity/batch.js-simstep-d7ef3ce4-3728-4fc3-924a-2fdd2dd79b7c" + ] + }, + "packages/svelte/src/internal/client/reactivity/deriveds.js": { + "path": "packages/svelte/src/internal/client/reactivity/deriveds.js", + "fileName": "deriveds.js", + "cellName": "deriveds.js", + "cellId": "b93e7762-bd1a-4533-91dd-b004d6b942a4", + "visible": true, + "parentCellId": "cf34a291-6671-4fde-b532-137e252ec7f6", + "children": [ + "packages/svelte/src/internal/client/reactivity/deriveds.js-simstep-a46f5d0f-f7f1-4dce-b7f6-f7a860b1f9b8", + "packages/svelte/src/internal/client/reactivity/deriveds.js-simstep-7052b8a8-1b42-4298-baf4-07f931221a33" + ] + }, + "packages/svelte/src/internal/client/reactivity/effects.js": { + "path": "packages/svelte/src/internal/client/reactivity/effects.js", + "fileName": "effects.js", + "cellName": "effects.js", + "cellId": "88f24557-c310-4de9-a084-e168debcfb5d", + "visible": true, + "parentCellId": "cf34a291-6671-4fde-b532-137e252ec7f6", + "children": [ + "packages/svelte/src/internal/client/reactivity/effects.js-simstep-269bbdfe-dca8-407f-a63b-0235d9c16e90" + ] + }, + "packages/svelte/src/internal/client/reactivity/sources.js": { + "path": "packages/svelte/src/internal/client/reactivity/sources.js", + "fileName": "sources.js", + "cellName": "sources.js", + "cellId": "ee702d94-2b0c-42d3-a24c-73254aeb567d", + "visible": true, + "parentCellId": "cf34a291-6671-4fde-b532-137e252ec7f6", + "children": [ + "packages/svelte/src/internal/client/reactivity/sources.js-simstep-b4f33a1a-fb27-4571-82eb-c4b4a9b31258" + ] + }, + "packages/svelte/src/internal/client/render.js": { + "path": "packages/svelte/src/internal/client/render.js", + "fileName": "render.js", + "cellName": "render.js", + "cellId": "69ef4ce1-14c1-406b-9702-d2fad58362c1", + "visible": true, + "parentCellId": "f01b052e-68c5-443b-9292-308b1de23715", + "children": [ + "packages/svelte/src/internal/client/render.js-simstep-b87f2993-f9ce-46bb-b104-7b7a9967d009", + "packages/svelte/src/internal/client/render.js-simstep-93b13150-a700-4fe7-89c0-cb01e2de84b7", + "packages/svelte/src/internal/client/render.js-simstep-7776d3d5-06a8-4848-9806-953b4fc9a9e1", + "packages/svelte/src/internal/client/render.js-simstep-bf53a356-f54a-4b1c-9cbe-63d167fd745f" + ] + }, + "packages/svelte/src/internal/server": { + "path": "packages/svelte/src/internal/server", + "fileName": "server", + "cellName": "server", + "cellId": "331c8628-f65a-4e1c-95bc-8afde389bb54", + "visible": true, + "parentCellId": "c9eaf8af-5614-48cf-9729-cb09ac85fab9", + "children": [ + "packages/svelte/src/internal/server/renderer.js" + ] + }, + "packages/svelte/src/internal/server/renderer.js": { + "path": "packages/svelte/src/internal/server/renderer.js", + "fileName": "renderer.js", + "cellName": "renderer.js", + "cellId": "c726254a-b20d-4570-9da0-4f5f63620630", + "visible": true, + "parentCellId": "331c8628-f65a-4e1c-95bc-8afde389bb54", + "children": [ + "packages/svelte/src/internal/server/renderer.js-simstep-7bb5f1b8-dbc6-4d4a-9f51-f7ba2e4a21d8", + "packages/svelte/src/internal/server/renderer.js-simstep-5a5b78a3-07cc-4c10-ba49-1f1d0893f55b", + "packages/svelte/src/internal/server/renderer.js-simstep-22605c1b-3437-4d2f-a89a-c5898f1d491b" + ] + }, + "packages/svelte/src/legacy": { + "path": "packages/svelte/src/legacy", + "fileName": "legacy", + "cellName": "legacy", + "cellId": "94c6aa5d-ee9e-4b66-9e41-75ceee9011fb", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7", + "children": [ + "packages/svelte/src/legacy/legacy-client.js" + ] + }, + "packages/svelte/src/legacy/legacy-client.js": { + "path": "packages/svelte/src/legacy/legacy-client.js", + "fileName": "legacy-client.js", + "cellName": "legacy-client.js", + "cellId": "7a29c64b-a2e1-4027-9231-7ce9f3f732fa", + "visible": true, + "parentCellId": "94c6aa5d-ee9e-4b66-9e41-75ceee9011fb" + }, + "packages/svelte/src/store": { + "path": "packages/svelte/src/store", + "fileName": "store", + "cellName": "store", + "cellId": "360d448d-6e33-44ce-bb6e-1308301c886f", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7", + "children": [ + "packages/svelte/src/store/shared" + ] + }, + "packages/svelte/src/store/shared": { + "path": "packages/svelte/src/store/shared", + "fileName": "shared", + "cellName": "shared", + "cellId": "5a58dd06-21a0-4358-bbd2-dc0c99da0b7f", + "visible": true, + "parentCellId": "360d448d-6e33-44ce-bb6e-1308301c886f", + "children": [ + "packages/svelte/src/store/shared/index.js" + ] + }, + "packages/svelte/src/store/shared/index.js": { + "path": "packages/svelte/src/store/shared/index.js", + "fileName": "index.js", + "cellName": "index.js", + "cellId": "b4e5863b-7aa7-4d90-b1e7-b9386cbf6150", + "visible": true, + "parentCellId": "5a58dd06-21a0-4358-bbd2-dc0c99da0b7f", + "children": [ + "packages/svelte/src/store/shared/index.js-simstep-0c2654b1-8c26-4a45-8f27-5a22365296ca", + "packages/svelte/src/store/shared/index.js-simstep-9e720ebf-613f-453a-849a-ccc835189361", + "packages/svelte/src/store/shared/index.js-simstep-5eccfae7-3e3c-4aec-bdb6-5d58467296e2", + "packages/svelte/src/store/shared/index.js-simstep-1b59caea-f549-403a-aa9c-170aec5c0769", + "packages/svelte/src/store/shared/index.js-simstep-e91fbf1c-7489-4884-a78c-f62f98f4c1a0" + ] + }, + "playgrounds": { + "path": "playgrounds", + "fileName": "playgrounds", + "cellName": "playgrounds", + "cellId": "0ade3e4e-5ca7-449f-8635-7bf0e8a6ae01", + "visible": true, + "children": [ + "playgrounds/sandbox" + ] + }, + "playgrounds/sandbox": { + "path": "playgrounds/sandbox", + "fileName": "sandbox", + "cellName": "sandbox", + "cellId": "259ecd09-6cb7-4d14-b3dd-61fa4e0f1828", + "visible": true, + "parentCellId": "0ade3e4e-5ca7-449f-8635-7bf0e8a6ae01", + "children": [ + "playgrounds/sandbox/ssr-prod.js" + ] + }, + "playgrounds/sandbox/ssr-prod.js": { + "path": "playgrounds/sandbox/ssr-prod.js", + "fileName": "ssr-prod.js", + "cellName": "ssr-prod.js", + "cellId": "4c29abd2-6302-447d-a375-cd9e9d62f05c", + "visible": true, + "parentCellId": "259ecd09-6cb7-4d14-b3dd-61fa4e0f1828", + "children": [ + "playgrounds/sandbox/ssr-prod.js-simstep-5ff7e951-9835-4071-a4e5-de52e6f2bdfb" + ] + }, + "af678e96-098e-49de-84a0-4e826caeb2c4": { + "path": "af678e96-098e-49de-84a0-4e826caeb2c4", + "fileName": "af678e96-098e-49de-84a0-4e826caeb2c4", + "cellName": "packages", + "cellId": "af678e96-098e-49de-84a0-4e826caeb2c4", + "visible": true + }, + "5b30eee6-87d1-43ce-9181-aa7946d68317": { + "path": "5b30eee6-87d1-43ce-9181-aa7946d68317", + "fileName": "5b30eee6-87d1-43ce-9181-aa7946d68317", + "cellName": "svelte", + "cellId": "5b30eee6-87d1-43ce-9181-aa7946d68317", + "visible": true, + "parentCellId": "af678e96-098e-49de-84a0-4e826caeb2c4" + }, + "3c333438-3f7b-48da-9999-9436756517e7": { + "path": "3c333438-3f7b-48da-9999-9436756517e7", + "fileName": "3c333438-3f7b-48da-9999-9436756517e7", + "cellName": "src", + "cellId": "3c333438-3f7b-48da-9999-9436756517e7", + "visible": true, + "parentCellId": "5b30eee6-87d1-43ce-9181-aa7946d68317" + }, + "db822733-4e7e-40b2-8b5f-7a21defc45a9": { + "path": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "fileName": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "cellName": "compiler", + "cellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9", + "visible": true, + "parentCellId": "3c333438-3f7b-48da-9999-9436756517e7" + }, + "b152c570-d538-4fdf-a07e-83c12f47ef1d": { + "path": "b152c570-d538-4fdf-a07e-83c12f47ef1d", + "fileName": "b152c570-d538-4fdf-a07e-83c12f47ef1d", + "cellName": "index.js", + "cellId": "b152c570-d538-4fdf-a07e-83c12f47ef1d", + "visible": true, + "parentCellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9" + }, + "0850f588-905a-4e9b-8ec0-e91e41ae4e42": { + "path": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "fileName": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "cellName": "phases", + "cellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42", + "visible": true, + "parentCellId": "db822733-4e7e-40b2-8b5f-7a21defc45a9" + }, + "6e3ee060-6616-4687-9673-166e4ff68495": { + "path": "6e3ee060-6616-4687-9673-166e4ff68495", + "fileName": "6e3ee060-6616-4687-9673-166e4ff68495", + "cellName": "1-parse", + "cellId": "6e3ee060-6616-4687-9673-166e4ff68495", + "visible": true, + "parentCellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42" + }, + "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc": { + "path": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc", + "fileName": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc", + "cellName": "2-analyze", + "cellId": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc", + "visible": true, + "parentCellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42" + }, + "db288fd2-ae40-4a16-8688-a929bcb7e1ec": { + "path": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "fileName": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "cellName": "3-transform", + "cellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec", + "visible": true, + "parentCellId": "0850f588-905a-4e9b-8ec0-e91e41ae4e42" + }, + "5e06e830-9256-493b-a0d2-5d514fa79c36": { + "path": "5e06e830-9256-493b-a0d2-5d514fa79c36", + "fileName": "5e06e830-9256-493b-a0d2-5d514fa79c36", + "cellName": "index.js", + "cellId": "5e06e830-9256-493b-a0d2-5d514fa79c36", + "visible": true, + "parentCellId": "6e3ee060-6616-4687-9673-166e4ff68495" + }, + "b3e80350-454f-4bc2-a6ca-eaa85bbec2fb": { + "path": "b3e80350-454f-4bc2-a6ca-eaa85bbec2fb", + "fileName": "b3e80350-454f-4bc2-a6ca-eaa85bbec2fb", + "cellName": "index.js", + "cellId": "b3e80350-454f-4bc2-a6ca-eaa85bbec2fb", + "visible": true, + "parentCellId": "f89b2967-f1fa-43c3-a3f5-ea1192ade9cc" + }, + "b1b25193-eb67-4c5c-b350-0f5a1d0f3a4a": { + "path": "b1b25193-eb67-4c5c-b350-0f5a1d0f3a4a", + "fileName": "b1b25193-eb67-4c5c-b350-0f5a1d0f3a4a", + "cellName": "index.js", + "cellId": "b1b25193-eb67-4c5c-b350-0f5a1d0f3a4a", + "visible": true, + "parentCellId": "db288fd2-ae40-4a16-8688-a929bcb7e1ec" + }, + "f48bf76d-115e-4ebe-af39-11c4d3e00642": { + "path": "f48bf76d-115e-4ebe-af39-11c4d3e00642", + "fileName": "f48bf76d-115e-4ebe-af39-11c4d3e00642", + "cellName": "Compile Entrypoint - index.js:L24-28", + "cellId": "f48bf76d-115e-4ebe-af39-11c4d3e00642", + "visible": true, + "parentCellId": "b152c570-d538-4fdf-a07e-83c12f47ef1d" + }, + "packages/svelte/src/compiler/index.js-simstep-73988ccd-a18f-4141-9178-ce9152f835b6": { + "path": "packages/svelte/src/compiler/index.js-simstep-73988ccd-a18f-4141-9178-ce9152f835b6", + "fileName": "index.js", + "wiki": "The Svelte compilation process begins when the `compile` function is invoked with the raw `.svelte` component source code and a set of compiler options. This function orchestrates the parsing, analysis, and transformation phases.", + "cellName": "Compile Entrypoint - index.js:L24-28", + "cellId": "f48bf76d-115e-4ebe-af39-11c4d3e00642", + "visible": true, + "startLine": 24, + "endLine": 28, + "parentCellId": "b152c570-d538-4fdf-a07e-83c12f47ef1d", + "parentPath": "packages/svelte/src/compiler/index.js" + }, + "61f846e2-4e6a-425e-aff3-fe1f9bf7088d": { + "path": "61f846e2-4e6a-425e-aff3-fe1f9bf7088d", + "fileName": "61f846e2-4e6a-425e-aff3-fe1f9bf7088d", + "cellName": "Parse Source Code into AST - index.js:L299-307", + "cellId": "61f846e2-4e6a-425e-aff3-fe1f9bf7088d", + "visible": true, + "parentCellId": "5e06e830-9256-493b-a0d2-5d514fa79c36" + }, + "packages/svelte/src/compiler/phases/1-parse/index.js-simstep-6abaf85a-bbba-43a6-8a7b-c137931d139a": { + "path": "packages/svelte/src/compiler/phases/1-parse/index.js-simstep-6abaf85a-bbba-43a6-8a7b-c137931d139a", + "fileName": "index.js", + "wiki": "The parser processes the component source. It uses a state machine to parse the template markup (`element.js`, `tag.js`), Acorn for JavaScript in `\\n

Hello {name}!

\\n\", \"options\": {\"filename\": \"App.svelte\", \"generate\": \"client\", \"dev\": true}}", + "outputDataExample": "{\"source\": \"\\n

Hello {name}!

\\n\", \"validated_options\": {\"filename\": \"App.svelte\", \"generate\": \"client\", \"dev\": true, \"runes\": false, \"css\": \"external\"}}" + }, + { + "simStepId": "36738ebf-0ae1-47f0-98fc-16b845647b81", + "diagramNodeId": "7eb8d72d-c4e3-42bc-ab82-f0c77f50b03e", + "simStepLabel": "Source to Parser", + "simStepDescription": "The raw Svelte source code is passed to the parsing phase to be converted into an Abstract Syntax Tree (AST).", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/index.js", + "startLine": "30", + "endLine": "30", + "relevantVariables": [ + "_parse" + ] + }, + "inputDataExample": "{\"source\": \"\\n

Hello {name}!

\\n\"}", + "outputDataExample": "{\"source\": \"\\n

Hello {name}!

\\n\"}" + }, + { + "simStepId": "6abaf85a-bbba-43a6-8a7b-c137931d139a", + "diagramNodeId": "61f846e2-4e6a-425e-aff3-fe1f9bf7088d", + "simStepLabel": "Parse Source Code into AST", + "simStepDescription": "The parser processes the component source. It uses a state machine to parse the template markup (`element.js`, `tag.js`), Acorn for JavaScript in `\\n

Hello {name}!

\\n\"}", + "outputDataExample": "{\"type\":\"Root\",\"fragment\":{\"type\":\"Fragment\",\"nodes\":[{\"type\":\"RegularElement\",\"name\":\"h1\",\"fragment\":{\"nodes\":[{\"type\":\"Text\",\"data\":\"Hello \"},{\"type\":\"ExpressionTag\",\"expression\":{\"type\":\"Identifier\",\"name\":\"name\"}},{\"type\":\"Text\",\"data\":\"!\"}]}}]},\"css\":{\"type\":\"StyleSheet\",\"children\":[{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"h1\"}]}]},\"block\":{\"children\":[{\"type\":\"Declaration\",\"property\":\"color\",\"value\":\"red\"}]}},{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"p\"}]}]},\"block\":{\"children\":[{\"type\":\"Declaration\",\"property\":\"color\",\"value\":\"blue\"}]}}]},\"instance\":{\"type\":\"Script\",\"content\":{\"body\":[{\"type\":\"ExportNamedDeclaration\",\"declaration\":{\"declarations\":[{\"id\":{\"name\":\"name\"},\"init\":{\"value\":\"world\"}}]}}]}}}" + }, + { + "simStepId": "6dcc1391-65e2-4e74-8119-b46aebe563a6", + "diagramNodeId": "9a648bc5-c023-4653-9e9b-151eb41704f3", + "simStepLabel": "AST to Analyzer", + "simStepDescription": "The generated AST is passed to the analysis phase. This AST contains the raw parsed structure of the component, which will be enriched with metadata about reactivity, scopes, and CSS usage.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/index.js", + "startLine": "65", + "endLine": "65", + "relevantVariables": [ + "analyze_component", + "parsed" + ] + }, + "inputDataExample": "{\"type\":\"Root\",\"fragment\":{\"type\":\"Fragment\",\"nodes\":[{\"type\":\"RegularElement\",\"name\":\"h1\",\"fragment\":{\"nodes\":[{\"type\":\"Text\",\"data\":\"Hello \"},{\"type\":\"ExpressionTag\",\"expression\":{\"type\":\"Identifier\",\"name\":\"name\"}},{\"type\":\"Text\",\"data\":\"!\"}]}}]},\"css\":{\"type\":\"StyleSheet\",\"children\":[{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"h1\"}]}]},\"block\":{\"children\":[{\"type\":\"Declaration\",\"property\":\"color\",\"value\":\"red\"}]}},{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"p\"}]}]},\"block\":{\"children\":[{\"type\":\"Declaration\",\"property\":\"color\",\"value\":\"blue\"}]}}]},\"instance\":{\"type\":\"Script\",\"content\":{\"body\":[{\"type\":\"ExportNamedDeclaration\",\"declaration\":{\"declarations\":[{\"id\":{\"name\":\"name\"},\"init\":{\"value\":\"world\"}}]}}]}}}", + "outputDataExample": "{\"type\":\"Root\",\"fragment\":{\"type\":\"Fragment\",\"nodes\":[{\"type\":\"RegularElement\",\"name\":\"h1\",\"fragment\":{\"nodes\":[{\"type\":\"Text\",\"data\":\"Hello \"},{\"type\":\"ExpressionTag\",\"expression\":{\"type\":\"Identifier\",\"name\":\"name\"}},{\"type\":\"Text\",\"data\":\"!\"}]}}]},\"css\":{\"type\":\"StyleSheet\",\"children\":[{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"h1\"}]}]},\"block\":{\"children\":[{\"type\":\"Declaration\",\"property\":\"color\",\"value\":\"red\"}]}},{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"p\"}]}]},\"block\":{\"children\":[{\"type\":\"Declaration\",\"property\":\"color\",\"value\":\"blue\"}]}}]},\"instance\":{\"type\":\"Script\",\"content\":{\"body\":[{\"type\":\"ExportNamedDeclaration\",\"declaration\":{\"declarations\":[{\"id\":{\"name\":\"name\"},\"init\":{\"value\":\"world\"}}]}}]}}}" + }, + { + "simStepId": "e3549e74-8d2c-49f9-9d16-7573de53db6a", + "diagramNodeId": "ddfea10a-886f-4b9e-998a-8bc04e6471c8", + "simStepLabel": "Analyze Component AST", + "simStepDescription": "The analysis phase walks the AST to understand the component's behavior. It builds scopes, identifies reactive variables, and analyzes CSS to determine which styles are used and can be pruned. This phase enriches the AST with metadata for the final transformation phase.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/2-analyze/index.js", + "startLine": "325", + "endLine": "328", + "relevantVariables": [ + "analyze_component", + "ScopeRoot", + "root", + "source", + "options" + ] + }, + "inputDataExample": "{\"type\":\"Root\",\"fragment\":{\"nodes\":[{\"type\":\"RegularElement\",\"name\":\"h1\"}]},\"css\":{\"children\":[{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"h1\"}]}]},\"block\":{}},{\"type\":\"Rule\",\"prelude\":{\"children\":[{\"selectors\":[{\"type\":\"TypeSelector\",\"name\":\"p\"}]}]},\"block\":{}}]},\"instance\":{\"content\":{\"body\":[{\"type\":\"ExportNamedDeclaration\"}]}}}", + "outputDataExample": "{\"name\":\"App\",\"root\":{},\"module\":{},\"instance\":{\"scope\":{},\"ast\":{}},\"template\":{\"scope\":{}},\"css\":{\"ast\":{\"children\":[{\"type\":\"Rule\",\"metadata\":{\"has_local_selectors\":true}},{\"type\":\"Rule\",\"metadata\":{\"has_local_selectors\":false}}]}},\"reactive_statements\":{},\"component_references\":{},\"runes\":false}" + }, + { + "simStepId": "ce2180fe-150c-49f1-a0ba-dc9219fbd8bb", + "diagramNodeId": "ee258f8d-6cfe-4b5c-89c5-ef1f58ac3527", + "simStepLabel": "Analysis to Transformer", + "simStepDescription": "The enriched `ComponentAnalysis` object, containing the AST and all collected metadata, is passed to the transformation phase to generate the final JavaScript code.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/index.js", + "startLine": "66", + "endLine": "66", + "relevantVariables": [ + "transform_component", + "analysis" + ] + }, + "inputDataExample": "{\"name\":\"App\",\"root\":{},\"module\":{},\"instance\":{\"scope\":{},\"ast\":{}},\"template\":{\"scope\":{}},\"css\":{\"ast\":{\"children\":[{\"type\":\"Rule\",\"metadata\":{\"has_local_selectors\":true}},{\"type\":\"Rule\",\"metadata\":{\"has_local_selectors\":false}}]}},\"reactive_statements\":{},\"component_references\":{},\"runes\":false}", + "outputDataExample": "{\"name\":\"App\",\"root\":{},\"module\":{},\"instance\":{\"scope\":{},\"ast\":{}},\"template\":{\"scope\":{}},\"css\":{\"ast\":{\"children\":[{\"type\":\"Rule\",\"metadata\":{\"has_local_selectors\":true}},{\"type\":\"Rule\",\"metadata\":{\"has_local_selectors\":false}}]}},\"reactive_statements\":{},\"component_references\":{},\"runes\":false}" + }, + { + "simStepId": "f40522ec-9c92-4e66-8338-0d0a0b420f3b", + "diagramNodeId": "722de3d2-78b4-492f-be78-45b476cce49d", + "simStepLabel": "Transform AST to JavaScript", + "simStepDescription": "The transformation phase takes the analyzed component and generates the output JavaScript module. For client-side components, it creates the logic for building, hydrating, mounting, and updating the DOM, along with handling component state and props.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/index.js", + "startLine": "21", + "endLine": "26", + "relevantVariables": [ + "transform_component", + "analysis", + "source", + "options" + ] + }, + "inputDataExample": "{\"name\":\"App\",\"root\":{},\"module\":{},\"instance\":{\"scope\":{}},\"template\":{\"scope\":{}},\"css\":{\"ast\":{}},\"reactive_statements\":{},\"component_references\":{},\"runes\":false}", + "outputDataExample": "{\"js\":{\"code\":\"import { SvelteComponent, init, safe_not_equal, element, text, insert, append, set_data, detach } from 'svelte/internal';\\n\\nfunction create_fragment(ctx) {\\n // ... fragment creation logic ... \\n}\\n\\nfunction instance($$self, $$props, $$invalidate) {\\n let { name = 'world' } = $$props;\\n // ... instance logic ... \\n}\\n\\nclass App extends SvelteComponent {\\n constructor(options) {\\n super();\\n init(this, options, instance, create_fragment, safe_not_equal, { name: 0 });\\n }\\n}\\n\\nexport default App;\",\"map\":{...}},\"css\":{\"code\":\"h1.svelte-xyz { color: red; }\",\"map\":{...}},\"warnings\":[],\"metadata\":{\"runes\":false}}" + }, + { + "simStepId": "a56da5ef-b0a2-4f15-b652-0534802c24b4", + "diagramNodeId": "", + "simStepLabel": "Return Compiled Result", + "simStepDescription": "The final `CompileResult` object, containing the generated JavaScript and CSS code along with source maps and any warnings, is returned from the top-level `compile` function. This completes the compilation process.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/index.js", + "startLine": "67", + "endLine": "67", + "relevantVariables": [ + "result" + ] + }, + "inputDataExample": "{\"js\":{\"code\":\"import { SvelteComponent, ... } from 'svelte/internal';\\n// ... component code ...\\nexport default App;\",\"map\":{...}},\"css\":{\"code\":\"h1.svelte-xyz { color: red; }\",\"map\":{...}},\"warnings\":[],\"metadata\":{\"runes\":false}}", + "outputDataExample": "{\"js\":{\"code\":\"import { SvelteComponent, ... } from 'svelte/internal';\\n// ... component code ...\\nexport default App;\",\"map\":{...}},\"css\":{\"code\":\"h1.svelte-xyz { color: red; }\",\"map\":{...}},\"warnings\":[],\"metadata\":{\"runes\":false}}" + } + ], + "description": "", + "simulationNodesAndEdges": { + "f48bf76d-115e-4ebe-af39-11c4d3e00642": { + "simStepIds": [ + "73988ccd-a18f-4141-9178-ce9152f835b6" + ] + }, + "61f846e2-4e6a-425e-aff3-fe1f9bf7088d": { + "simStepIds": [ + "6abaf85a-bbba-43a6-8a7b-c137931d139a" + ] + }, + "ddfea10a-886f-4b9e-998a-8bc04e6471c8": { + "simStepIds": [ + "e3549e74-8d2c-49f9-9d16-7573de53db6a" + ] + }, + "722de3d2-78b4-492f-be78-45b476cce49d": { + "simStepIds": [ + "f40522ec-9c92-4e66-8338-0d0a0b420f3b" + ] + }, + "7eb8d72d-c4e3-42bc-ab82-f0c77f50b03e": { + "simStepIds": [ + "36738ebf-0ae1-47f0-98fc-16b845647b81" + ] + }, + "9a648bc5-c023-4653-9e9b-151eb41704f3": { + "simStepIds": [ + "6dcc1391-65e2-4e74-8119-b46aebe563a6" + ] + }, + "ee258f8d-6cfe-4b5c-89c5-ef1f58ac3527": { + "simStepIds": [ + "ce2180fe-150c-49f1-a0ba-dc9219fbd8bb" + ] + } + }, + "isAIGenerated": true, + "keywords": "compile, parse, ComponentAnalysis", + "generationPrompt": "Component-Based UI Development", + "generationKeywords": "compile, parse, ComponentAnalysis" + }, + "Declarative & Fine-Grained Reactivity (Runes)": { + "name": "Declarative & Fine-Grained Reactivity (Runes)", + "simSteps": [ + { + "simStepId": "41484434-76b1-4c57-8ea0-1bd25cd84ca1", + "diagramNodeId": "745e8e46-db2f-4dc8-a3ea-f9a2b3026552", + "simStepLabel": "1. Declare Reactive State with `$state`", + "simStepDescription": "A developer initializes a reactive variable `count` to `0` using the `$state` rune. This is a compiler instruction that, at runtime, creates a reactive 'source' signal to track the variable's value. Any part of the application that reads this value will automatically subscribe to its changes.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/ambient.d.ts", + "startLine": "12", + "endLine": "19", + "relevantVariables": [ + "$state" + ] + }, + "inputDataExample": "{\"initialValue\": 0}", + "outputDataExample": "{\"signal\": {\"value\": 0, \"subscribers\": []}}" + }, + { + "simStepId": "4d02c778-1f6e-4425-9042-2d792034f805", + "diagramNodeId": "10d99855-477c-4f9c-bbc6-9dec6f928433", + "simStepLabel": "2. State Value Flow to Derived Calculation", + "simStepDescription": "The value of the `count` state (initially `0`) is read during the initialization of a `$derived` expression. This establishes `count` as a dependency for the derived state.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/ambient.d.ts", + "startLine": "164", + "endLine": "173", + "relevantVariables": [ + "$derived" + ] + }, + "inputDataExample": "{\"count\": 0}", + "outputDataExample": "{\"count\": 0}" + }, + { + "simStepId": "a46f5d0f-f7f1-4dce-b7f6-f7a860b1f9b8", + "diagramNodeId": "17b7357f-5678-4337-802a-bdf19c9febdd", + "simStepLabel": "3. Declare Derived State with `$derived`", + "simStepDescription": "A new derived state variable `doubled` is declared. The Svelte compiler transforms the `$derived` rune into a function that creates a 'derived' signal. This signal automatically tracks `count` as a dependency and computes its value as `count * 2`. The value is lazily re-calculated only when `doubled` is read and its dependencies have changed.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/deriveds.js", + "startLine": "66", + "endLine": "113", + "relevantVariables": [ + "derived", + "derived_effect" + ] + }, + "inputDataExample": "{\"expression\": \"count * 2\", \"dependencies\": {\"count\": 0}}", + "outputDataExample": "{\"derivedSignal\": {\"value\": 0, \"dependencies\": [\"count\"]}}" + }, + { + "simStepId": "e1b10348-1d2f-42f7-b399-55672a30e36b", + "diagramNodeId": "9a28bb95-39a0-4fac-a561-fe7d4dcd6300", + "simStepLabel": "4. State Value Flow to Side Effect", + "simStepDescription": "The value of `count` is also read during the initialization of an `$effect`. This establishes `count` as a dependency for the effect, meaning the effect will re-run whenever `count` changes.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/effects.js", + "startLine": "195", + "endLine": "224", + "relevantVariables": [ + "user_effect" + ] + }, + "inputDataExample": "{\"count\": 0}", + "outputDataExample": "{\"count\": 0}" + }, + { + "simStepId": "269bbdfe-dca8-407f-a63b-0235d9c16e90", + "diagramNodeId": "b5cc8d6a-f7ac-40ed-926d-696ba7bcddf2", + "simStepLabel": "5. Register Side Effect with `$effect`", + "simStepDescription": "A side effect is registered using the `$effect` rune. The runtime creates an 'effect' that subscribes to its dependencies (in this case, `count`). The provided callback function is executed once after the component mounts, and then re-executed after any subsequent change to its dependencies.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/effects.js", + "startLine": "195", + "endLine": "224", + "relevantVariables": [ + "user_effect", + "validate_effect", + "create_effect" + ] + }, + "inputDataExample": "{\"callback\": \"() => { console.log('Count is:', count) }\", \"dependencies\": {\"count\": 0}}", + "outputDataExample": "{\"effect\": {\"status\": \"scheduled\", \"dependencies\": [\"count\"]}}" + }, + { + "simStepId": "fe988104-19fe-4e2c-928b-480e7f25d2f5", + "diagramNodeId": "c37c9b57-4d87-4b28-82b7-b88f15d5f1ef", + "simStepLabel": "6. User Interaction Triggers State Update", + "simStepDescription": "A user interaction, such as clicking a button, triggers an event handler that executes `count++`. This initiates the reactive update cycle.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/proxy.js", + "startLine": "105", + "endLine": "134", + "relevantVariables": [ + "set" + ] + }, + "inputDataExample": "{\"event\": \"click\", \"handler\": \"() => count++\"}", + "outputDataExample": "{\"operation\": \"set\", \"target\": \"count\", \"newValue\": 1}" + }, + { + "simStepId": "b4f33a1a-fb27-4571-82eb-c4b4a9b31258", + "diagramNodeId": "52b3fbf0-a463-42d0-813d-35c6b2df5f5f", + "simStepLabel": "7. Runtime Detects State Change via Proxy", + "simStepDescription": "The assignment to `count` is intercepted by the `$state` proxy's `set` handler. This handler compares the new value with the old one. Since the value has changed, it calls `set_signal_value` to mark the `count` signal as 'dirty' and schedules an update.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/sources.js", + "startLine": "204", + "endLine": "236", + "relevantVariables": [ + "set_signal_value", + "is_runes", + "current_component_context", + "mark_reactions" + ] + }, + "inputDataExample": "{\"target\": {\"signal\": \"count\"}, \"property\": \"value\", \"newValue\": 1}", + "outputDataExample": "{\"dirtySignal\": \"count\", \"status\": \"update_scheduled\"}" + }, + { + "simStepId": "e7c044f8-f77f-4f17-90f9-4c83b4f7e6ed", + "diagramNodeId": "9191c53a-2475-429e-b2f2-f538d670baa3", + "simStepLabel": "8. Propagate 'Dirty' Status to Dependents", + "simStepDescription": "The runtime traverses the dependency graph starting from the `count` signal. It marks all dependent signals and effects (`doubled` and the logging effect) as 'dirty', indicating they need to be updated or re-run.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/sources.js", + "startLine": "238", + "endLine": "260", + "relevantVariables": [ + "mark_reactions", + "mark_reaction" + ] + }, + "inputDataExample": "{\"dirtySignal\": \"count\"}", + "outputDataExample": "{\"dirtyDependents\": [\"doubled_signal\", \"log_effect\"]}" + }, + { + "simStepId": "7052b8a8-1b42-4298-baf4-07f931221a33", + "diagramNodeId": "91d3446d-904e-44b2-9b47-d82feb813f59", + "simStepLabel": "9. Re-compute Derived State", + "simStepDescription": "During the update cycle, the runtime processes all dirty signals. It re-evaluates the expression for the `doubled` signal (`count * 2`) using the new value of `count` (1). The result (2) is then compared to the old value, and if it has changed, `doubled` itself is marked as dirty to propagate the change further.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/deriveds.js", + "startLine": "119", + "endLine": "147", + "relevantVariables": [ + "update_derived", + "set_signal_value" + ] + }, + "inputDataExample": "{\"dirtySignal\": \"doubled\", \"dependencies\": {\"count\": 1}}", + "outputDataExample": "{\"recomputedSignal\": \"doubled\", \"newValue\": 2}" + }, + { + "simStepId": "b95bd6bd-1d99-4146-aeca-3fd11f3026e5", + "diagramNodeId": "c4ef69d1-0e78-4099-8cba-cdf590cdfff0", + "simStepLabel": "10. Updated Values Flow to Effect", + "simStepDescription": "The new value of `count` is now available for the scheduled side effect to consume during its execution.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/batch.js", + "startLine": "321", + "endLine": "344", + "relevantVariables": [ + "execute_effect" + ] + }, + "inputDataExample": "{\"count\": 1}", + "outputDataExample": "{\"count\": 1}" + }, + { + "simStepId": "d7ef3ce4-3728-4fc3-924a-2fdd2dd79b7c", + "diagramNodeId": "b08c5565-60eb-4e1c-af03-54ec0bd2b8cd", + "simStepLabel": "11. Re-run Side Effect", + "simStepDescription": "After DOM updates are flushed, the runtime executes all dirty effects. The callback for the logging `$effect` is re-run because its dependency `count` changed. It now reads the new value of `count` (1) and logs it to the console.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/client/reactivity/batch.js", + "startLine": "321", + "endLine": "344", + "relevantVariables": [ + "flush_effects", + "execute_effect", + "update_effect" + ] + }, + "inputDataExample": "{\"dirtyEffect\": \"log_effect\", \"dependencies\": {\"count\": 1}}", + "outputDataExample": "{\"sideEffectResult\": \"console.log('Count is: 1')\"}" + } + ], + "description": "", + "simulationNodesAndEdges": { + "745e8e46-db2f-4dc8-a3ea-f9a2b3026552": { + "simStepIds": [ + "41484434-76b1-4c57-8ea0-1bd25cd84ca1" + ] + }, + "17b7357f-5678-4337-802a-bdf19c9febdd": { + "simStepIds": [ + "a46f5d0f-f7f1-4dce-b7f6-f7a860b1f9b8" + ] + }, + "b5cc8d6a-f7ac-40ed-926d-696ba7bcddf2": { + "simStepIds": [ + "269bbdfe-dca8-407f-a63b-0235d9c16e90" + ] + }, + "52b3fbf0-a463-42d0-813d-35c6b2df5f5f": { + "simStepIds": [ + "b4f33a1a-fb27-4571-82eb-c4b4a9b31258" + ] + }, + "91d3446d-904e-44b2-9b47-d82feb813f59": { + "simStepIds": [ + "7052b8a8-1b42-4298-baf4-07f931221a33" + ] + }, + "b08c5565-60eb-4e1c-af03-54ec0bd2b8cd": { + "simStepIds": [ + "d7ef3ce4-3728-4fc3-924a-2fdd2dd79b7c" + ] + }, + "10d99855-477c-4f9c-bbc6-9dec6f928433": { + "simStepIds": [ + "4d02c778-1f6e-4425-9042-2d792034f805" + ] + }, + "9a28bb95-39a0-4fac-a561-fe7d4dcd6300": { + "simStepIds": [ + "e1b10348-1d2f-42f7-b399-55672a30e36b" + ] + }, + "c37c9b57-4d87-4b28-82b7-b88f15d5f1ef": { + "simStepIds": [ + "fe988104-19fe-4e2c-928b-480e7f25d2f5" + ] + }, + "9191c53a-2475-429e-b2f2-f538d670baa3": { + "simStepIds": [ + "e7c044f8-f77f-4f17-90f9-4c83b4f7e6ed" + ] + }, + "c4ef69d1-0e78-4099-8cba-cdf590cdfff0": { + "simStepIds": [ + "b95bd6bd-1d99-4146-aeca-3fd11f3026e5" + ] + } + }, + "isAIGenerated": true, + "keywords": "$state, $derived, $effect", + "generationPrompt": "Declarative & Fine-Grained Reactivity (Runes)", + "generationKeywords": "$state, $derived, $effect" + }, + "Server-Side Rendering (SSR) and Hydration": { + "name": "Server-Side Rendering (SSR) and Hydration", + "simSteps": [ + { + "simStepId": "7bb5f1b8-dbc6-4d4a-9f51-f7ba2e4a21d8", + "diagramNodeId": "167fbd50-0cc8-451c-b28b-c92d07736416", + "simStepLabel": "SSR Flow: Call `render` Function", + "simStepDescription": "The server-side rendering process begins when the application's server code calls the `render` function from `svelte/server`, passing the root Svelte component and its initial properties. This function is the main entry point for generating static HTML on the server.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/server/renderer.js", + "startLine": "319", + "endLine": "353", + "relevantVariables": [ + "Renderer.render", + "component", + "options" + ] + }, + "inputDataExample": "{\"Component\": \"App\", \"options\": {\"props\": {\"name\": \"world\"}}}", + "outputDataExample": "{\"head\": \"\", \"body\": \"

Hello world!

\"}" + }, + { + "simStepId": "7ccc5a28-c962-4ce8-8cff-07cfc8d3d4df", + "diagramNodeId": "3efb3b71-0192-4d8c-a03c-0239092b0145", + "simStepLabel": "SSR Flow: Pass Component and Props to Renderer", + "simStepDescription": "The `render` function internally passes the component constructor, props, and any context to the `Renderer` class, which will manage the HTML generation process.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/server/renderer.js", + "startLine": "332", + "endLine": "332", + "relevantVariables": [ + "Renderer.#render" + ] + }, + "inputDataExample": "{\"component\": \"function App(...) {...}\", \"options\": {\"props\": {\"name\": \"world\"}, \"context\": {}}}", + "outputDataExample": "{\"component\": \"function App(...) {...}\", \"options\": {\"props\": {\"name\": \"world\"}, \"context\": {}}}" + }, + { + "simStepId": "5a5b78a3-07cc-4c10-ba49-1f1d0893f55b", + "diagramNodeId": "0e813f50-a86c-4333-8023-b91aac0bd769", + "simStepLabel": "SSR Flow: Initialize Renderer and Execute Component", + "simStepDescription": "The static `Renderer.#open_render` method is called. It creates a new `Renderer` instance and an `SSRState` object. It then immediately invokes the compiled component's function, passing the new renderer instance (`$$renderer`). The process starts by pushing the opening hydration marker (``) into the output buffer.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/server/renderer.js", + "startLine": "515", + "endLine": "538", + "relevantVariables": [ + "Renderer.#open_render", + "renderer", + "SSRState", + "component(renderer, options.props ?? {})" + ] + }, + "inputDataExample": "{\"mode\": \"sync\", \"component\": \"function App(...) {...}\", \"options\": {\"props\": {\"name\": \"world\"}}}", + "outputDataExample": "{\"renderer\": {\"global\": {\"mode\": \"sync\"}, \"#out\": [\"\"]}}" + }, + { + "simStepId": "e793d918-44cc-493c-8569-1df115ea3705", + "diagramNodeId": "e82e8822-1f1d-4d62-9a18-430afd036078", + "simStepLabel": "SSR Flow: Pass Renderer Instance to Component Logic", + "simStepDescription": "The newly created renderer instance is passed as an argument to the compiled server-side component function, allowing it to generate HTML fragments.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/server/renderer.js", + "startLine": "532", + "endLine": "532", + "relevantVariables": [ + "component" + ] + }, + "inputDataExample": "{\"$$renderer\": {\"global\": {\"mode\": \"sync\"}, \"#out\": [\"\"]}}", + "outputDataExample": "{\"$$renderer\": {\"global\": {\"mode\": \"sync\"}, \"#out\": [\"\"]}}" + }, + { + "simStepId": "22b12906-f8bf-4ca8-bb11-0830c4dd7001", + "diagramNodeId": "6a6365c5-c780-4eb6-99b2-5d08740d9126", + "simStepLabel": "SSR Flow: Component Generates HTML Fragments", + "simStepDescription": "The compiled server-side version of the Svelte component executes. Instead of creating DOM nodes, it calls methods on the provided `$$renderer` instance (like `$$renderer.push()`) to build up an array of HTML strings and other directives that represent the component's structure.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/server/transform-server.js", + "startLine": "87", + "endLine": "102", + "relevantVariables": [ + "server_component", + "state" + ] + }, + "inputDataExample": "{\"$$renderer\": \"[Renderer instance]\", \"$$props\": {\"name\": \"world\"}}", + "outputDataExample": "{\"#out\": [\"\", \"

Hello world!

\", \"\"]}" + }, + { + "simStepId": "50154714-706c-44a6-915f-614cda2a33d4", + "diagramNodeId": "dddfdd22-20f6-4a83-a47f-1d084c19c8d9", + "simStepLabel": "SSR Flow: Return HTML Fragments to Renderer", + "simStepDescription": "As the component logic runs, it pushes strings of HTML into the renderer's internal buffer, effectively building the component's markup piece by piece.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/internal/server/renderer.js", + "startLine": "259", + "endLine": "267", + "relevantVariables": [ + "push" + ] + }, + "inputDataExample": "{\"html_fragment\": \"

Hello world!

\"}", + "outputDataExample": "{\"html_fragment\": \"

Hello world!

\"}" + }, + { + "simStepId": "22605c1b-3437-4d2f-a89a-c5898f1d491b", + "diagramNodeId": "503bd721-d554-4e31-8b0d-be87b0af5c5b", + "simStepLabel": "SSR Flow: Collect and Finalize HTML Content", + "simStepDescription": "After the component function has finished executing, the `Renderer` collects all the generated HTML fragments from its internal buffer. The `#collect_content` method concatenates the strings, and `#close_render` appends any styles (from `\"}", + "outputDataExample": "{\"type\":\"StyleSheet\",\"start\":0,\"end\":25,\"attributes\":[],\"children\":[{\"type\":\"Rule\",\"start\":7,\"end\":23,\"prelude\":{\"type\":\"SelectorList\",\"start\":7,\"end\":8,\"children\":[{\"type\":\"ComplexSelector\",\"start\":7,\"end\":8,\"children\":[{\"type\":\"RelativeSelector\",\"start\":7,\"end\":8,\"combinator\":null,\"selectors\":[{\"type\":\"TypeSelector\",\"start\":7,\"end\":8,\"name\":\"p\"}]}]}]},\"block\":{\"type\":\"Block\",\"start\":9,\"end\":23,\"children\":[{\"type\":\"Declaration\",\"start\":11,\"end\":22,\"property\":\"color\",\"value\":\"red\",\"important\":false}]}}],\"content\":{\"start\":7,\"end\":23,\"styles\":\"p { color: red; }\",\"comment\":null}}" + }, + { + "simStepId": "6f6c4624-849d-47de-b7f6-a773d4e8c305", + "diagramNodeId": "43861c78-369a-4efc-831a-9369fa37c17c", + "simStepLabel": "CSS AST to Analysis Phase", + "simStepDescription": "The generated CSS AST is passed from the parsing phase to the analysis phase for further processing.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/2-analyze/index.js", + "startLine": "39", + "endLine": "39", + "relevantVariables": [ + "ast" + ] + }, + "inputDataExample": "{\"type\":\"StyleSheet\",\"start\":0,\"end\":25,\"attributes\":[],\"children\":[{\"type\":\"Rule\",\"start\":7,\"end\":23,\"prelude\":{\"type\":\"SelectorList\",\"start\":7,\"end\":8,\"children\":[{\"type\":\"ComplexSelector\",\"start\":7,\"end\":8,\"children\":[{\"type\":\"RelativeSelector\",\"start\":7,\"end\":8,\"combinator\":null,\"selectors\":[{\"type\":\"TypeSelector\",\"start\":7,\"end\":8,\"name\":\"p\"}]}]}]},\"block\":{\"type\":\"Block\",\"start\":9,\"end\":23,\"children\":[{\"type\":\"Declaration\",\"start\":11,\"end\":22,\"property\":\"color\",\"value\":\"red\",\"important\":false}]}}],\"content\":{\"start\":7,\"end\":23,\"styles\":\"p { color: red; }\",\"comment\":null}}", + "outputDataExample": "{\"type\":\"StyleSheet\",\"start\":0,\"end\":25,\"attributes\":[],\"children\":[{\"type\":\"Rule\",\"start\":7,\"end\":23,\"prelude\":{\"type\":\"SelectorList\",\"start\":7,\"end\":8,\"children\":[{\"type\":\"ComplexSelector\",\"start\":7,\"end\":8,\"children\":[{\"type\":\"RelativeSelector\",\"start\":7,\"end\":8,\"combinator\":null,\"selectors\":[{\"type\":\"TypeSelector\",\"start\":7,\"end\":8,\"name\":\"p\"}]}]}]},\"block\":{\"type\":\"Block\",\"start\":9,\"end\":23,\"children\":[{\"type\":\"Declaration\",\"start\":11,\"end\":22,\"property\":\"color\",\"value\":\"red\",\"important\":false}]}}],\"content\":{\"start\":7,\"end\":23,\"styles\":\"p { color: red; }\",\"comment\":null}}" + }, + { + "simStepId": "177851bc-bad8-4b21-b6b1-37f671aa65ad", + "diagramNodeId": "f2d68884-4321-48aa-a5e4-ab45cb4f438c", + "simStepLabel": "Generate Scoping Hash", + "simStepDescription": "During the analysis phase, a unique hash is generated based on the component's filename or CSS content. This hash will be used to create a unique class for scoping.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/2-analyze/index.js", + "startLine": "529", + "endLine": "537", + "relevantVariables": [ + "options.cssHash", + "analysis.css.hash", + "hash" + ] + }, + "inputDataExample": "{\"css\": \"p { color: red; }\", \"filename\": \"App.svelte\", \"name\": \"App\"}", + "outputDataExample": "{\"analysis\": {\"css\": {\"hash\": \"svelte-1a2b3c\"}}}" + }, + { + "simStepId": "501357c0-4a59-45e1-968e-0bdeeb3b7ff5", + "diagramNodeId": "929dd6de-1f4d-4b8a-86aa-2f7446fca5fe", + "simStepLabel": "Hashed AST to Transform Phase", + "simStepDescription": "The CSS AST, now augmented with the unique scoping hash, is passed to the transform phase.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/index.js", + "startLine": "20", + "endLine": "20", + "relevantVariables": [ + "analysis" + ] + }, + "inputDataExample": "{\"analysis\": {\"css\": {\"ast\": {...}, \"hash\": \"svelte-1a2b3c\"}}}", + "outputDataExample": "{\"analysis\": {\"css\": {\"ast\": {...}, \"hash\": \"svelte-1a2b3c\"}}}" + }, + { + "simStepId": "cff22a9e-4943-4c0a-86c9-3866b43146be", + "diagramNodeId": "3e958017-aa2c-4dd0-b122-ab1270d508ce", + "simStepLabel": "Rewrite CSS Selectors", + "simStepDescription": "The transform phase iterates through the CSS AST. For each selector that isn't marked as global, it prepends the unique hash class (e.g., `.svelte-1a2b3c`). This ensures the styles only apply to elements within the component.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/css/index.js", + "startLine": "301", + "endLine": "326", + "relevantVariables": [ + "RelativeSelector", + "state.selector", + "state.code.prependRight" + ] + }, + "inputDataExample": "{\"css_ast\": {\"prelude\": {\"children\": [{\"children\": [{\"selectors\": [{\"name\":\"p\"}]}]}]}}, \"hash\": \"svelte-1a2b3c\"}", + "outputDataExample": "{\"transformed_css\": \"p.svelte-1a2b3c { color: red; }\"}" + }, + { + "simStepId": "a88524a7-3984-4570-a50a-97f3c6c4834b", + "diagramNodeId": "60544abe-c438-49ac-aa39-15c2445ef102", + "simStepLabel": "Scoped CSS to JS Generation", + "simStepDescription": "The transformed, scoped CSS code is prepared for inclusion in the final JavaScript output.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/client/transform-client.js", + "startLine": "438", + "endLine": "438", + "relevantVariables": [ + "render_stylesheet" + ] + }, + "inputDataExample": "{\"code\": \"p.svelte-1a2b3c { color: red; }\", \"map\": {...}}", + "outputDataExample": "{\"code\": \"p.svelte-1a2b3c { color: red; }\", \"map\": {...}}" + }, + { + "simStepId": "ca037e33-e250-43e0-8aa4-e9eeaf0a98e9", + "diagramNodeId": "11ad83a8-262c-49bf-8e0c-23627c889575", + "simStepLabel": "Add Scoping Class to Elements", + "simStepDescription": "Simultaneously, the compiler transforms the component's HTML markup. It adds the unique class attribute (e.g., `class=\"svelte-1a2b3c\"`) to every element that is targeted by a scoped style.", + "isEdge": 0, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js", + "startLine": "188", + "endLine": "195", + "relevantVariables": [ + "css_hash", + "element.metadata.scoped", + "context.state.analysis.css.hash" + ] + }, + "inputDataExample": "{\"element\": \"

...

\", \"metadata\": {\"scoped\": true}, \"analysis\": {\"css\": {\"hash\": \"svelte-1a2b3c\"}}}", + "outputDataExample": "{\"transformed_element_code\": \"$.set_class(p, 1, 'svelte-1a2b3c');\"}" + }, + { + "simStepId": "1a87eaf6-7494-48d5-aa2d-5a950abfdd35", + "diagramNodeId": "39e34f2a-7634-47f1-a199-bf48e8ee20d2", + "simStepLabel": "Final JS to Bundler", + "simStepDescription": "The generated JavaScript, containing both the component logic and the scoped CSS (if injected), is passed to the bundler.", + "isEdge": 1, + "sourceCodeMapping": { + "filePath": "packages/svelte/src/compiler/phases/3-transform/client/transform-client.js", + "startLine": "437", + "endLine": "443", + "relevantVariables": [ + "$$css" + ] + }, + "inputDataExample": "{\"javascript_code\": \"... const $$css = { hash: 'svelte-1a2b3c', code: 'p.svelte-1a2b3c { color: red; }' }; ... $.append_styles(target, $$css); ...\"}", + "outputDataExample": "{\"javascript_code\": \"... const $$css = { hash: 'svelte-1a2b3c', code: 'p.svelte-1a2b3c { color: red; }' }; ... $.append_styles(target, $$css); ...\"}" + }, + { + "simStepId": "d1e49f9f-7e95-4ff4-9af1-fc74f95bcda4", + "diagramNodeId": "4d18a0e4-8890-49a8-9a5f-c5b9df7c8efe", + "simStepLabel": "Inject Styles into DOM", + "simStepDescription": "At runtime in the browser, if the `css: 'injected'` option is used, the component's JavaScript executes a function that creates a ` tag is added to the document head.\"}" + } + ], + "description": "