├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── extension
    ├── .DS_Store
    ├── devtools
    │   ├── 32709ce1000d77ae3c14fa968595e573.png
    │   ├── background.js
    │   ├── index.html
    │   ├── index.js
    │   ├── listener.js
    │   ├── panel.html
    │   └── public
    │   │   └── images
    │   │       ├── icon128.png
    │   │       ├── icon16.png
    │   │       └── svelte_slicer_logo_64x64.png
    └── manifest.json
├── package-lock.json
├── package.json
├── src
    ├── App.svelte
    ├── CollapsibleSection.svelte
    ├── Component.svelte
    ├── Diffs.svelte
    ├── FileStructure.svelte
    ├── StateChart.svelte
    ├── StateTree.svelte
    ├── Variable.svelte
    ├── global.css
    ├── main.js
    └── stores.js
└── webpack.config.js


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     parserOptions: {
 3 |       ecmaVersion: 2019,
 4 |       sourceType: 'module'
 5 |     },
 6 |     env: {
 7 |       es6: true,
 8 |       browser: true
 9 |     },
10 |     plugins: [
11 |       'svelte3'
12 |     ],
13 |     overrides: [
14 |       {
15 |         files: ['*.svelte'],
16 |         processor: 'svelte3/svelte3'
17 |       }
18 |     ],
19 |     rules: {
20 |       // ...
21 |     },
22 |     settings: {
23 |       // ...
24 |     }
25 |   };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | extension/devtools/build/


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false
4 | }
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 OSLabs Beta
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SvelteSlicer
 2 | 
 3 | ![Svelte Slicer logo](extension/devtools/public/images/svelte_slicer_logo_64x64.png)
 4 | 
 5 | # About The Project
 6 | Svelte Slicer is an open-source Chrome Developer Tool for visualizing component and state changes in Svelte applications. Svelte Slicer allows users to capture, store and traverse detailed snapshots of application state to aid in debugging.
 7 | 
 8 | # Key features include:
 9 | - Visualization of component relationships
10 | - Moment-by-moment tracking of state variables
11 | - Snapshot diffing to identify specific state changes
12 | - Dynamic time travel through past state snapshots
13 | 
14 | # Built With
15 | - [Svelte](https://svelte.dev/)
16 | - [D3.js](https://d3js.org/)
17 | - [Chrome Extension API’s](https://developer.chrome.com/docs/extensions/reference/)
18 | - [Webpack](https://webpack.js.org/)
19 | 
20 | # Getting Started
21 | - Install Svelte Slicer from the Chrome Web Store
22 | - Run your Svelte application in development mode.
23 | - Open Chrome Developer Tools (Cmd + Option + I) & navigate to the “Slicer” panel
24 | 
25 | # Using Svelte Slicer
26 | After opening the tool, you will see two panels. With each DOM update in your application, the panel on the left will populate a new snapshot with a *Data* and a *Jump* button. Clicking on the Data button for a particular snapshot will display in the right hand panel data about the application’s state at the moment the selected snapshot was captured.
27 | 
28 | Snapshots that result from a specific user interaction are labeled with the component, event and event handler that triggered its state changes. Users can also use the *Filter* feature to identify specific snapshots based on their labels.
29 | 
30 | Each snapshot can be explored in several ways. While in the *State* view, selecting the *Tree* button will display a list of all components with stateful variables that were part of the DOM when the snapshot was captured. Clicking on the name of a component will show it’s stateful variables and their values at the moment of snapshot capture. Clicking the Chart button will display a graphical visualization of the component relationships on the DOM for the selected snapshot. Clicking the *Diff* button will present a list of the specific components and variables that changed from the previous snapshot.
31 | 
32 | The *Component* view displays the relationship between user-defined components in the file structure of the application. The *Tree*button displays this information as a collapsible tree, while the *Chart* button shows a hierarchical graphical representation.
33 | 
34 | Using the *Jump* buttons allows the user to not only see the data for a chosen snapshot, but also to actually re-render their application as it was at the moment the snapshot was captured. After jumping, the user can choose to start a new timeline by continuing to interact with their application. This will result in new snapshots that build off application state at the last jump. 
35 | 
36 | Snapshots outside the timeline of the currently rendered snapshot are retained and can still be viewed and jumped to, but are washed out in the snapshot panel to indicate that they are not related to the current snapshot. Using the *Path* button will clear out these washed out snapshots, leaving only the current timeline in the panel. 
37 | 
38 | The *Previous* and *Forward* buttons also clear out unwanted snapshots, removing all snapshots respectively before or after the currently rendered one.
39 | 
40 | # Contributing
41 | Found a bug or have suggestions for improvement? We would love to hear from you!
42 | 
43 | Please open an issue to submit feedback or problems you come across.
44 | 
45 | # Authors
46 | - Heather Barney - [LinkedIn](https://www.linkedin.com/in/heather-barney-81ab2834/)
47 | - Rachel Collins - [LinkedIn](https://www.linkedin.com/in/rachel-c-bb5b0346/)
48 | - Lynda Labranche - [LinkedIn](https://www.linkedin.com/in/lynda-labranche-854184146/)
49 | - Anchi Teng - [LinkedIn](https://www.linkedin.com/in/anchiteng/)
50 | 
51 | # License
52 | This project is licensed under the MIT [License](https://github.com/oslabs-beta/svelte-sight/blob/master/LICENSE) - see the LICENSE file for details
53 |  
54 |  
55 |  
56 | 
57 | 


--------------------------------------------------------------------------------
/extension/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/SvelteSlicer/fe8bcd53e83551cc27667ab7a3fa06b4610d4e0e/extension/.DS_Store


--------------------------------------------------------------------------------
/extension/devtools/32709ce1000d77ae3c14fa968595e573.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/SvelteSlicer/fe8bcd53e83551cc27667ab7a3fa06b4610d4e0e/extension/devtools/32709ce1000d77ae3c14fa968595e573.png


--------------------------------------------------------------------------------
/extension/devtools/background.js:
--------------------------------------------------------------------------------
 1 | // background.js
 2 | var connections = {};
 3 | 
 4 | chrome.runtime.onConnect.addListener(function (port) {
 5 | 
 6 |   var extensionListener = function (message, sender, sendResponse) {
 7 | 
 8 |     // The original connection event doesn't include the tab ID of the
 9 |     // DevTools page, so we need to send it explicitly.
10 |     if (message.name == "init") {
11 |       connections[message.tabId] = port;
12 |       return;
13 |     }
14 |     
15 |     if (message.name === "jumpState" || message.name === "clearSnapshots") {
16 |       chrome.tabs.sendMessage(message.tabId, message);
17 |     }
18 |   }
19 | 
20 |     // Listen to messages sent from the DevTools page
21 |     port.onMessage.addListener(extensionListener);
22 | 
23 |     port.onDisconnect.addListener(function(port) {
24 |         port.onMessage.removeListener(extensionListener);
25 | 
26 |         var tabs = Object.keys(connections);
27 |         for (var i=0, len=tabs.length; i < len; i++) {
28 |           if (connections[tabs[i]] == port) {
29 |             delete connections[tabs[i]]
30 |             break;
31 |           }
32 |         }
33 |     });
34 | });
35 | 
36 | // Receive message from content script and relay to the devTools page for the
37 | // current tab
38 | chrome.runtime.onMessage.addListener(function(message, sender) {
39 |     // Messages from content scripts should have sender.tab set
40 |     if (sender.tab) {
41 |       var tabId = sender.tab.id;
42 |       if (tabId in connections) {
43 |         connections[tabId].postMessage(message);
44 |       } else {
45 |         console.log("Tab not found in connection list.");
46 |       }
47 |     } else {
48 |       console.log("sender.tab not defined.");
49 |     }
50 |     return true;
51 | });


--------------------------------------------------------------------------------
/extension/devtools/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <!-- <script src="https://d3js.org/d3.v6.min.js"></script> -->
 6 |   </head>
 7 |   <body>
 8 |     <script src="index.js"></script>
 9 |   </body>
10 | </html>


--------------------------------------------------------------------------------
/extension/devtools/index.js:
--------------------------------------------------------------------------------
  1 | chrome.devtools.panels.create(
  2 |     "Slicer",
  3 |     "svelte_logo.png",
  4 |     "devtools/panel.html",
  5 |     function (panel) {
  6 |         panel.onShown.addListener(() => {
  7 |             chrome.devtools.inspectedWindow.reload(
  8 |                 {injectedScript:
  9 |                     `
 10 |                     const components = [];
 11 |                     const deletedNodes = [];
 12 |                     const insertedNodes = [];
 13 |                     const listeners = {};
 14 |                     const nodes = new Map();
 15 |                     const componentCounts = {};
 16 |                     const componentObject = {};
 17 |                     let node_id = 0;
 18 |                     let firstLoadSent = false;
 19 |                     let stateHistory = [];
 20 |                     const storeVariables = {};
 21 |                     let rebuildingDom = false;
 22 |                     let snapshotLabel = "Init";
 23 |                     let jumpIndex;
 24 | 
 25 |                     function setup(root) {
 26 |                         root.addEventListener('SvelteRegisterComponent', svelteRegisterComponent);
 27 |                         root.addEventListener('SvelteDOMInsert', svelteDOMInsert);
 28 |                         root.addEventListener('SvelteDOMRemove', svelteDOMRemove);
 29 |                         root.addEventListener('SvelteDOMAddEventListener', svelteDOMAddEventListener);
 30 |                     }
 31 |                   
 32 |                     function svelteRegisterComponent (e) {                       
 33 |                         const { component, tagName, options } = e.detail;
 34 |                         // assign sequential instance value
 35 | 		                let instance = 0;
 36 | 		                if (componentCounts.hasOwnProperty(tagName)) {
 37 | 			                instance = ++componentCounts[tagName];
 38 | 		                }
 39 | 		                componentCounts[tagName] = instance;
 40 |                         const id = tagName + instance;
 41 | 
 42 |                         componentObject[id] = {component, tagName};
 43 | 
 44 |                         data = {
 45 |                             id,
 46 |                             state: captureComponentState(component),
 47 |                             tagName,
 48 |                             instance,
 49 |                             target: (options.target) ? options.target.nodeName + options.target.id : null
 50 |                         }
 51 |                         components.push(data);
 52 |                     }
 53 | 
 54 |                     function parseState(element, name = null) {
 55 |                         if (element === null) {
 56 |                             return { 
 57 |                                 value: element,
 58 |                                 name
 59 |                             };
 60 |                         }
 61 |                         else if (typeof element === "function") {
 62 |                             return {
 63 |                                 name,
 64 |                                 value: element.toString()
 65 |                             };
 66 |                         }
 67 |                         else if (typeof element === "object") {
 68 |                             if (element.constructor) {
 69 |                                 if (element.constructor.name === "Object" || element.constructor.name === "Array") {
 70 |                                     const value = {};
 71 |                                     for (let i in element) {
 72 |                                         value[i] = parseState(element[i], i);
 73 |                                     }
 74 |                                     return {value, name};
 75 |                                 }
 76 |                                 else {
 77 |                                     return {
 78 |                                         name,
 79 |                                         value: '<' + element.constructor.name + '>'
 80 |                                     }
 81 |                                 }
 82 |                             }
 83 |                             else {
 84 |                                 return {
 85 |                                     name,
 86 |                                     value: "Unknown Object"
 87 |                                 }
 88 |                             }
 89 |                         }
 90 |                         else {
 91 |                             return {
 92 |                                 value: element,
 93 |                                 name
 94 |                             };
 95 |                         }
 96 |                     }
 97 | 
 98 |                     function captureComponentState(component) {
 99 |                         const captureStateFunc = component.$capture_state;
100 |                         let state = captureStateFunc ? captureStateFunc() : {};
101 |                         // if capture_state produces an empty object, may need to use ctx instead (older version of Svelte)
102 |                         if (state && !Object.keys(state).length) {
103 |                             if (component.$$.ctx.constructor.name === "Object") {
104 |                                 state = deepClone(component.$$.ctx);
105 |                             }
106 |                         }
107 |                     
108 |                         const parsedState = {};
109 |                         for (let variable in state) {
110 |                             if (typeof state[variable] === "function") {
111 |                                 delete state[variable];
112 |                             }
113 |                             else if (state[variable] === null) {
114 |                                 parsedState[variable] = parseState(state[variable], variable);
115 |                             }
116 |                             else if (typeof state[variable] === "object") {
117 |                                 if (state[variable].constructor) {
118 |                                     if (state[variable].constructor.name === "Object" || state[variable].constructor.name === "Array") {
119 |                                         // check if variable is a store variable
120 |                                         if (state[variable].hasOwnProperty('subscribe')) {
121 |                                             // if a writable store, we need to store the instance
122 |                                             if (state[variable].hasOwnProperty('set') && state[variable].hasOwnProperty('update')) {
123 |                                                 storeVariables[variable] = state[variable];
124 |                                             }
125 |                                             delete state[variable];
126 |                                         }
127 |                                         else {
128 |                                             parsedState[variable] = parseState(state[variable], variable);
129 |                                         }
130 |                                     }
131 |                                     else {
132 |                                         parsedState[variable] = parseState(state[variable], variable)
133 |                                     }
134 |                                 }
135 |                                 else {
136 |                                     delete state[variable];
137 |                                 }
138 |                             }
139 |                             else {
140 |                                 parsedState[variable]  = parseState(state[variable], variable);
141 |                             }
142 |                         }
143 |                         return parsedState;
144 |                     }
145 | 
146 |                     function svelteDOMRemove(e) {
147 |                         
148 |                         const { node } = e.detail;
149 |                         const nodeData = nodes.get(node);
150 |                         if (nodeData) {
151 |                             deletedNodes.push({
152 |                                 id: nodeData.id,
153 |                                 component: nodeData.component
154 |                             })
155 |                         }
156 |                     }
157 | 
158 |                     function svelteDOMInsert(e) {
159 |                         
160 |                         const { node, target } = e.detail;
161 |                         if (node.__svelte_meta) {
162 |                             let id = nodes.get(node);
163 |                             if (!id) {
164 |                                 id = node_id++;
165 |                                 componentName = getComponentName(node.__svelte_meta.loc.file)
166 |                                 nodes.set(node, {id, componentName});
167 |                             }
168 |                             insertedNodes.push({
169 |                                 target: ((nodes.get(target)) ? nodes.get(target).id : target.nodeName + target.id),
170 |                                 id,
171 |                                 component: componentName, 
172 |                                 loc: node.__svelte_meta.loc.char
173 |                             });
174 |                         }
175 |                     }
176 | 
177 |                     function svelteDOMAddEventListener(e) {
178 |                         const { node, event } = e.detail;
179 |                         if (node.__svelte_meta) {
180 |                             if (!nodes.has(node)) {
181 |                                 const nodeId = node_id++;
182 |                                 const componentName = getComponentName(node.__svelte_meta.loc.file)
183 |                                 nodes.set(node, {nodeId, componentName});
184 |                             }
185 |                             const nodeData = nodes.get(node);
186 |                             const listenerId = nodeData.id + event;
187 |                             node.addEventListener(event, () => updateLabel(nodeData.id, event));
188 |                             
189 |                             listeners[listenerId] = ({
190 |                                 node: nodeData.id,
191 |                                 event,
192 |                                 handlerName: e.detail.handler.name,
193 |                                 component: nodeData.componentName,
194 |                             })
195 |                         }
196 |                     }
197 | 
198 |                     function getComponentName(file) {
199 |                         if (file.indexOf('/') === -1) {
200 |                             tagName = file.slice((file.lastIndexOf('\\\\') + 1), -7);
201 |                         }
202 |                         else {
203 |                             tagName = file.slice((file.lastIndexOf('/') + 1), -7);
204 |                         }
205 |                         return tagName;
206 |                     }
207 | 
208 |                     const deepClone = (inObject) => {
209 |                         let outObject, value, key
210 |                       
211 |                         if (typeof inObject !== "object" || inObject === null) {
212 |                           return inObject // Return the value if inObject is not an object
213 |                         }
214 |                       
215 |                         if (inObject.constructor.name !== "Object" && inObject.constructor.name !== "Array") {
216 |                             return inObject // Return the value if inObject is not an object
217 |                         }
218 | 
219 |                         // Create an array or object to hold the values
220 |                         outObject = Array.isArray(inObject) ? [] : {}
221 |                       
222 |                         for (key in inObject) {
223 |                           value = inObject[key]
224 |                       
225 |                           // Recursively (deep) copy for nested objects, including arrays
226 |                           outObject[key] = deepClone(value)
227 |                         }
228 |                       
229 |                         return outObject
230 |                       }
231 | 
232 |                     function updateLabel(nodeId, event) {
233 |                         const listener = listeners[nodeId + event];
234 | 		                const { component, handlerName } = listener;
235 | 		                snapshotLabel = component + ' - ' + event + " -> " + handlerName;
236 |                         rebuildingDom = false;
237 |                     }
238 | 
239 |                     function rebuildDom(tree) {
240 |                         rebuildingDom = true;
241 |                         
242 |                         tree.forEach(componentFile => {
243 |                             for (let componentInstance in componentObject) {
244 |                                 if (componentObject[componentInstance].tagName === componentFile) {
245 |                                     if (stateHistory[jumpIndex].hasOwnProperty(componentInstance)) {
246 |                                         const variables = stateHistory[jumpIndex][componentInstance];
247 |                                         for (let variable in variables) {
248 |                                             if (variable[0] === '$') {
249 |                                                 updateStore(componentInstance, variable, variables[variable]);
250 |                                             }
251 |                                             else {
252 |                                                 injectState(componentInstance, variable, variables[variable]);
253 |                                             }
254 |                                         }
255 |                                     }
256 |                                 }
257 |                             }
258 |                         })
259 |                     }
260 | 
261 |                     function injectState(componentId, key, value) {
262 |                         const component = componentObject[componentId].component;
263 |                         component.$inject_state({ [key]: value })
264 |                     }
265 | 
266 |                     function updateStore(componentId, name, value) {
267 |                         const component = componentObject[componentId].component;
268 |                         const store = storeVariables[name.slice(1)];
269 |                         store.set(value);
270 |                     }
271 | 
272 |                     function clearSnapshots(index, path, clearType) {
273 |                         if (clearType === 'forward') {
274 |                             stateHistory = stateHistory.slice(0, index + 1);
275 |                         }
276 |                         else if (clearType === 'previous') {
277 |                             stateHistory = stateHistory.slice(index);
278 |                         }
279 |                         else if (clearType === 'path') {
280 |                             for (let i = stateHistory.length -1; i > 0 ; i--){
281 |                                 if (!path.includes(i)){
282 |                                     stateHistory.splice(i,1);
283 |                                 }
284 |                             }
285 |                         }
286 |                     }
287 | 
288 |                     setup(window.document);
289 |                   
290 |                     for (let i = 0; i < window.frames.length; i++) {
291 |                         const frame = window.frames[i]
292 |                         const root = frame.document
293 |                         setup(root)
294 |                     }
295 | 
296 |                     // observe for changes to the DOM
297 |                     const observer = new MutationObserver(() => {
298 |                         if (!rebuildingDom){
299 |                             const domChange = new CustomEvent('dom-changed');
300 |                             window.document.dispatchEvent(domChange)
301 |                         }
302 |                         else {
303 |                             const rebuild = new CustomEvent('rebuild');
304 |                             window.document.dispatchEvent(rebuild);
305 |                         }
306 |                     });
307 |         
308 |                     // capture initial DOM load as one snapshot
309 |                     window.onload = () => {
310 |                         // make sure that data is being sent
311 |                         if (components.length || insertedNodes.length || deletedNodes.length) {
312 |                             stateHistory.push(deepClone(captureRawAppState()));
313 |                             firstLoadSent = true;
314 |                             
315 |                             window.postMessage({
316 |                                 source: 'panel.js',
317 |                                 type: 'firstLoad',
318 |                                 data: {
319 |                                     stateObject: captureParsedAppState(),
320 |                                     components,
321 |                                     insertedNodes,
322 |                                     deletedNodes,
323 |                                     snapshotLabel
324 |                                 }
325 |                             })
326 | 
327 |                             // reset arrays
328 |                             components.splice(0, components.length);
329 |                             insertedNodes.splice(0, insertedNodes.length);
330 |                             deletedNodes.splice(0, deletedNodes.length);
331 |                             snapshotLabel = undefined;
332 |                         }
333 | 
334 |                         // start MutationObserver
335 |                         observer.observe(window.document, {attributes: true, childList: true, subtree: true});
336 |                     }   
337 | 
338 |                     function captureRawAppState() {
339 |                         const appState = {};
340 |                         for (let component in componentObject) {
341 |                             const captureStateFunc = componentObject[component].component.$capture_state;
342 |                             let state = captureStateFunc ? captureStateFunc() : {};
343 |                             // if state object is empty, may need to use ctx instead (older version of Svelte)
344 |                             if (state && !Object.keys(state).length) {
345 |                                 if (componentObject[component].component.$$.ctx.constructor.name === "Object") {
346 |                                     state = componentObject[component].component.$$.ctx;
347 |                                 }
348 |                             }
349 |                             appState[component] = state;
350 |                         }
351 |                         return appState;
352 |                     }
353 | 
354 |                     function captureParsedAppState() {
355 |                         const appState = {};
356 |                         for (let component in componentObject) {
357 |                             appState[component] = captureComponentState(componentObject[component].component);
358 |                         }
359 |                         return appState;
360 |                     }
361 | 
362 |                     // capture subsequent DOM changes to update snapshots
363 |                     window.document.addEventListener('dom-changed', (e) => {
364 |                         // only send message if something changed in SvelteDOM or stateObject
365 |                         if (components.length || insertedNodes.length || deletedNodes.length) {
366 |                             // check for deleted components
367 |                             for (let component in componentObject) {
368 |                                 if (componentObject[component].component.$$.fragment === null) {
369 |                                     delete componentObject[component];
370 |                                 }
371 |                             }
372 |                             const currentState = captureRawAppState();
373 |                             stateHistory.push(deepClone(currentState));
374 |                             let type;
375 |                             // make sure the first load has already been sent; if not, this is the first load
376 |                             if (!firstLoadSent) {
377 |                                 type = "firstLoad";
378 |                                 firstLoadSent = true;
379 |                             }
380 |                             else type = "update";
381 |                             
382 |                             window.postMessage({
383 |                                 source: 'panel.js',
384 |                                 type,
385 |                                 data: {
386 |                                     stateObject: captureParsedAppState(),
387 |                                     components,
388 |                                     insertedNodes,
389 |                                     deletedNodes,
390 |                                     snapshotLabel
391 |                                 }
392 |                             });
393 |                         
394 |                             // reset arrays
395 |                             components.splice(0, components.length);
396 |                             insertedNodes.splice(0, insertedNodes.length);
397 |                             deletedNodes.splice(0, deletedNodes.length);
398 |                             snapshotLabel = undefined;
399 |                         }
400 |                     });
401 | 
402 |                     // clean up after jumps
403 |                     window.document.addEventListener('rebuild', (e) => {
404 |                         deletedComponents = [];
405 |                         for (let component in componentObject) {
406 |                             if (componentObject[component].component.$$.fragment === null) {
407 |                                 delete componentObject[component];
408 |                                 deletedComponents.push(component);
409 |                             }
410 |                         }
411 |                         
412 |                         components.forEach(newComponent => {
413 |                             const { tagName, id } = newComponent;
414 |                             const component = componentObject[id].component;
415 |                             const captureStateFunc = component.$capture_state;
416 |                             let componentState = captureStateFunc ? captureStateFunc() : {}; 
417 |                             if (componentState && !Object.keys(componentState).length) {
418 |                                 if (component.$$.ctx.constructor.name === "Object") {
419 |                                     componentState = deepClone(component.$$.ctx);
420 |                                 }
421 |                             }
422 |                             
423 |                             const previousState = stateHistory[jumpIndex];
424 |                             for (let componentId in previousState) {
425 |                                 if (JSON.stringify(previousState[componentId]) === JSON.stringify(componentState) && !componentObject.hasOwnProperty(componentId)) {
426 |                                     componentObject[componentId] = {
427 |                                         component,
428 |                                         tagName
429 |                                     }
430 |                                     newComponent.id = componentId;
431 |                                     delete componentObject[id];
432 |                                     componentCounts[tagName]--;
433 |                                 }
434 |                             }    
435 |                         })
436 |                         
437 |                         window.postMessage({
438 |                             source: 'panel.js',
439 |                             type: 'rebuild',
440 |                             data: {
441 |                                 stateObject: captureParsedAppState(),
442 |                                 components,
443 |                                 insertedNodes,
444 |                                 deletedNodes,
445 |                                 deletedComponents,
446 |                                 snapshotLabel
447 |                             }
448 |                         });
449 | 
450 |                         components.splice(0, components.length);
451 |                         insertedNodes.splice(0, insertedNodes.length);
452 |                         deletedNodes.splice(0, deletedNodes.length);
453 |                         snapshotLabel = undefined;
454 |                         jumpIndex = undefined;
455 |                     })
456 | 
457 |                     // listen for devTool messages
458 |                     window.addEventListener('message', function () {
459 |                         // Only accept messages from the same frame
460 |                         if (event.source !== window) {
461 |                             return;
462 |                         }
463 |                         
464 |                         // Only accept messages that we know are ours
465 |                         if (typeof event.data !== 'object' || event.data === null ||
466 |                           !event.data.source === 'panel.js') {
467 |                           return;
468 |                         }
469 | 
470 |                         if (event.data.type === 'jumpState') {
471 |                             const { index, tree} = event.data;
472 |                             jumpIndex = index;
473 |                             rebuildDom(tree);
474 |                         }
475 | 
476 |                         if (event.data.type === 'clearSnapshots') {
477 |                             const { index, path, clearType } = event.data;
478 |                             clearSnapshots(index, path, clearType);
479 |                         }
480 |                     })
481 |                     `
482 |                 }
483 |             ); 
484 |         })
485 |     }
486 | )


--------------------------------------------------------------------------------
/extension/devtools/listener.js:
--------------------------------------------------------------------------------
 1 | window.addEventListener('message', function(event) {
 2 |   // Only accept messages from the same frame
 3 |   if (event.source !== window) {
 4 |     return;
 5 |   }
 6 | 
 7 |   // Only accept messages that we know are ours
 8 |   if (typeof event.data !== 'object' || event.data === null ||
 9 |       !event.data.source === 'panel.js') {
10 |     return;
11 |   }
12 | 
13 |   const data = event.data;
14 | 
15 |   chrome.runtime.sendMessage(JSON.stringify(data));
16 | });
17 | 
18 | chrome.runtime.onMessage.addListener(message => {
19 |   if (message.name === "jumpState") {
20 |     window.postMessage({
21 |       source: 'listener.js',
22 |       type: 'jumpState',
23 |       index: message.index,
24 |       state: message.state,
25 |       tree: message.tree
26 |     });
27 |   }
28 | 
29 |   else if (message.name === "clearSnapshots") {
30 |     window.postMessage({
31 |       source: 'listeneter.js',
32 |       type: 'clearSnapshots',
33 |       index: message.index,
34 |       clearType: message.clearType,
35 |       path: message.path
36 |     })
37 |   }
38 | });
39 | 
40 | 


--------------------------------------------------------------------------------
/extension/devtools/panel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Analysis</title>
 7 |     <link rel='stylesheet' href='build/bundle.css'>
 8 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" media="all" rel="stylesheet">
 9 |   </head>
10 |   <body>
11 |     
12 |     <script defer src='build/bundle.js'></script>
13 |     
14 |   </body>
15 | </html>


--------------------------------------------------------------------------------
/extension/devtools/public/images/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/SvelteSlicer/fe8bcd53e83551cc27667ab7a3fa06b4610d4e0e/extension/devtools/public/images/icon128.png


--------------------------------------------------------------------------------
/extension/devtools/public/images/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/SvelteSlicer/fe8bcd53e83551cc27667ab7a3fa06b4610d4e0e/extension/devtools/public/images/icon16.png


--------------------------------------------------------------------------------
/extension/devtools/public/images/svelte_slicer_logo_64x64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/SvelteSlicer/fe8bcd53e83551cc27667ab7a3fa06b4610d4e0e/extension/devtools/public/images/svelte_slicer_logo_64x64.png


--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 3,
 3 |     "name": "Svelte Slicer",
 4 |     "version": "1.0",
 5 |     "minimum_chrome_version": "10.0",
 6 |     "description": "Browser devtools extension for time traveling and visualizing Svelte applications.",
 7 |     
 8 |     "devtools_page": "devtools/index.html",
 9 |     "permissions": [
10 |       "activeTab",
11 |       "scripting"
12 |     ],
13 |     "host_permissions": [
14 |       "http://*/*",
15 |       "https://*/*"
16 |     ],
17 |     "background": {
18 |       "service_worker": "devtools/background.js"
19 |     },
20 |     "content_scripts": [
21 |       {
22 |         "matches": [
23 |           "http://*/*",
24 |           "https://*/*"
25 |         ],
26 |         "js": ["devtools/listener.js"],
27 |         "run_at": "document_start"
28 |       }
29 |     ],
30 |     "action": {
31 |       "default_icon": {
32 |         "16": "devtools/public/images/icon16.png",
33 |         "128": "devtools/public/images/icon128.png"
34 |       }
35 |     },
36 |     "icons": {
37 |       "16": "devtools/public/images/icon16.png",
38 |       "128": "devtools/public/images/icon128.png"
39 |     }
40 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-app",
 3 |   "version": "1.0.0",
 4 |   "devDependencies": {
 5 |     "cross-env": "^7.0.3",
 6 |     "css-loader": "^5.0.1",
 7 |     "eslint": "^8.8.0",
 8 |     "eslint-plugin-import": "^2.25.4",
 9 |     "eslint-plugin-svelte3": "^3.4.0",
10 |     "file-loader": "^6.2.0",
11 |     "mini-css-extract-plugin": "^1.3.4",
12 |     "prettier": "^2.5.1",
13 |     "prettier-plugin-svelte": "^2.6.0",
14 |     "svelte": "^3.31.2",
15 |     "svelte-loader": "^3.0.0",
16 |     "webpack": "^5.16.0",
17 |     "webpack-cli": "^4.4.0",
18 |     "webpack-dev-server": "^3.11.2"
19 |   },
20 |   "scripts": {
21 |     "build": "cross-env NODE_ENV=production webpack",
22 |     "dev": "webpack serve --content-base public",
23 |     "format": "prettier --write '{public,src}/**/*.{css,html,js,svelte}'",
24 |     "lint": "eslint . --ext .js,.svelte --fix"
25 |   },
26 |   "dependencies": {
27 |     "d3": "^7.2.1",
28 |     "lodash": "^4.17.21"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import {
  3 |     snapshots,
  4 |     fileTree,
  5 |     flatFileTree,
  6 |     backgroundPageConnection,
  7 |     sharedAppView,
  8 |   } from "./stores.js";
  9 |   import { get } from "svelte/store";
 10 |   import Component from "./Component.svelte";
 11 |   import StateChart from "./StateChart.svelte";
 12 |   import FileStructure from "./FileStructure.svelte";
 13 |   import StateTree from "./StateTree.svelte";
 14 |   import Diffs from "./Diffs.svelte";
 15 |   import logo from "../extension/devtools/public/images/svelte_slicer_logo_64X64.png";
 16 | 
 17 |   $: CurrentI =
 18 |     I === undefined
 19 |       ? $snapshots.length - 1
 20 |       : snapshotLength < $snapshots.length
 21 |       ? $snapshots.length - 1
 22 |       : I;
 23 |   $: CurrentAppView =
 24 |     appView === undefined
 25 |       ? $snapshots.length - 1
 26 |       : snapshotLength < $snapshots.length
 27 |       ? $snapshots.length - 1
 28 |       : appView;
 29 | 
 30 |   let timeline = [];
 31 | 
 32 |   $: {
 33 |     if (timeline.length !== $snapshots.length) {
 34 |       const latest = $snapshots.length - 1;
 35 |       const previous = jumping ? appView : latest - 1;
 36 |       if (latest === 0) {
 37 |         timeline[0] = [0];
 38 |       } else {
 39 |         timeline[latest] = [...timeline[previous], latest];
 40 |       }
 41 |       jumping = false;
 42 |     }
 43 |   }
 44 | 
 45 |   $: {
 46 |     sharedAppView.set(CurrentAppView);
 47 |   }
 48 | 
 49 |   let I;
 50 |   let appView;
 51 |   let filtered = [];
 52 |   let input = "";
 53 |   let jumping = false;
 54 |   let snapshotLength;
 55 | 
 56 |   let view = "state";
 57 |   $: View = view;
 58 | 
 59 |   let vis = "tree";
 60 |   $: Vis = vis;
 61 | 
 62 |   const connection = get(backgroundPageConnection);
 63 | 
 64 |   function selectView(selection) {
 65 |     view = selection;
 66 |   }
 67 | 
 68 |   function selectVis(selection) {
 69 |     vis = selection;
 70 |   }
 71 | 
 72 |   function selectState(index) {
 73 |     I = index;
 74 |     snapshotLength = JSON.parse(JSON.stringify($snapshots)).length;
 75 |   }
 76 | 
 77 |   function jumpState(index) {
 78 |     I = index;
 79 |     appView = index;
 80 |     snapshotLength = JSON.parse(JSON.stringify($snapshots)).length;
 81 |     jumping = true;
 82 |     connection.postMessage({
 83 |       source: "panel",
 84 |       name: "jumpState",
 85 |       index,
 86 |       state: $snapshots[index].data,
 87 |       tree: $flatFileTree,
 88 |       tabId: chrome.devtools.inspectedWindow.tabId,
 89 |     });
 90 |   }
 91 | 
 92 |   function filterEventHandler() {
 93 |     input = input.trim().toLowerCase();
 94 |     function isSubstring(s1, s2) {
 95 |       let S = s1.length;
 96 |       let L = s2.length;
 97 |       for (let i = 0; i <= L - S; i++) {
 98 |         let j;
 99 |         for (j = 0; j < S; j++) {
100 |           if (s2[i + j] != s1[j]) break;
101 |         }
102 |         if (j == S) return i;
103 |       }
104 |       return -1;
105 |     }
106 | 
107 |     $snapshots.forEach((snapshot, index) => {
108 |       let label = snapshot.label;
109 |       label = label.toLowerCase();
110 | 
111 |       let res = isSubstring(input, label);
112 |       if (res > -1) {
113 |         filtered.push({ snapshot, index });
114 |       }
115 |     });
116 |     input = " ";
117 |   }
118 | 
119 |   function resetFilter() {
120 |     filtered = [];
121 |   }
122 | 
123 |   function clearSnapshots(clearType) {
124 |     let newSnapshotList;
125 |     let path = timeline[CurrentAppView].slice();
126 | 
127 |     if (clearType === "forward") {
128 |       newSnapshotList = $snapshots.slice(0, CurrentAppView + 1);
129 |       timeline = timeline.slice(0, CurrentAppView + 1);
130 |       appView = undefined;
131 |       I = undefined;
132 |     } else if (clearType === "previous") {
133 |       newSnapshotList = $snapshots.slice(CurrentAppView);
134 |       let count = CurrentAppView;
135 |       timeline = timeline.slice(CurrentAppView);
136 |       timeline.forEach((snapshot) => {
137 |         for (let i = snapshot.length - 1; i >= 0; i--) {
138 |           const newValue = snapshot[i] - count;
139 |           if (newValue >= 0) {
140 |             snapshot[i] = newValue;
141 |           } else {
142 |             snapshot.splice(i, 1);
143 |           }
144 |         }
145 |       });
146 |       appView = 0;
147 |       I = 0;
148 |     } else if (clearType === "path") {
149 |       newSnapshotList = $snapshots.slice();
150 |       for (let i = $snapshots.length - 1; i > 0; i -= 1) {
151 |         if (!path.includes(i)) {
152 |           newSnapshotList.splice(i, 1);
153 |           timeline.splice(i, 1);
154 |         }
155 |       }
156 |       timeline.forEach((snapshot, snapshotIndex) => {
157 |         snapshot.splice(0, snapshot.length);
158 |         for (let i = 0; i <= snapshotIndex; i++) {
159 |           snapshot.push(i);
160 |         }
161 |       });
162 |       I = newSnapshotList.length - 1;
163 |       appView = newSnapshotList.length - 1;
164 |     }
165 | 
166 |     snapshots.set(newSnapshotList);
167 | 
168 |     // message index.js to trim stateHistory stored there
169 |     connection.postMessage({
170 |       source: "panel",
171 |       name: "clearSnapshots",
172 |       clearType,
173 |       index: CurrentAppView,
174 |       path,
175 |       tabId: chrome.devtools.inspectedWindow.tabId,
176 |     });
177 | 
178 |     jumping = false;
179 |     snapshotLength = snapshotLength = JSON.parse(
180 |       JSON.stringify($snapshots)
181 |     ).length;
182 |   }
183 | </script>
184 | 
185 | <main>
186 |   <div id="mainContainer">
187 |     <div id="title">
188 |       <img src={logo} id="slicerImg" alt="logo" />
189 |       <h2 id="titleText">Svelte Slicer</h2>
190 |     </div>
191 |     <div id="filter">
192 |       <form
193 |         on:submit|preventDefault={(e) => filterEventHandler(e)}
194 |         class="form"
195 |       >
196 |         <input
197 |           type="text"
198 |           bind:value={input}
199 |           placeholder="Filter..."
200 |           name="search"
201 |           class="search-field"
202 |         />
203 |         <button type="submit" class="search-button">
204 |           <i class="fa fa-search" />
205 |         </button>
206 |       </form>
207 |       <button on:click={resetFilter}>Reset</button>
208 |     </div>
209 |     <div id="snapshots">
210 |       {#if !filtered.length}
211 |         {#each $snapshots as snapshot, i}
212 |           <div
213 |             class="snapshotList"
214 |             class:selectedSnapshot={i === CurrentAppView}
215 |             class:inactiveSnapshot={!timeline[CurrentAppView].includes(i)}
216 |           >
217 |             <span class="snapshotText"
218 |               >Snapshot {i}
219 |               {snapshot.label ? " : " + snapshot.label : ""}</span
220 |             >
221 |             <div class="snapshotButtonGroup">
222 |               <button
223 |                 class="snapshotButton"
224 |                 on:click={() => selectState(i)}
225 |                 class:selectedButton={i === CurrentI}>Data</button
226 |               >
227 |               <button class="snapshotButton" on:click={() => jumpState(i)}
228 |                 >Jump</button
229 |               >
230 |             </div>
231 |           </div>
232 |         {/each}
233 |       {:else if filtered.length}
234 |         {#each filtered as snapshot}
235 |           <div
236 |             class="snapshotList"
237 |             class:selectedSnapshot={snapshot.index === CurrentAppView}
238 |             class:inactiveSnapshot={!timeline[CurrentAppView].includes(
239 |               snapshot.index
240 |             )}
241 |           >
242 |             <span class="snapshotText"
243 |               >Snapshot {snapshot.index}
244 |               {snapshot.snapshot.label
245 |                 ? " : " + snapshot.snapshot.label
246 |                 : ""}</span
247 |             >
248 |             <div class="snapshotButtonGroup">
249 |               <button
250 |                 class="snapshotButton"
251 |                 on:click={() => selectState(snapshot.index)}
252 |                 class:selectedButton={snapshot.index === CurrentI}>Data</button
253 |               >
254 |               <button
255 |                 class="snapshotButton"
256 |                 on:click={() => jumpState(snapshot.index)}>Jump</button
257 |               >
258 |             </div>
259 |           </div>
260 |         {/each}
261 |       {/if}
262 |     </div>
263 |     <div id="banner">
264 |       <button
265 |         on:click={() => selectView("files")}
266 |         class:activeButton={view === "files"}>Components</button
267 |       >
268 |       <button
269 |         on:click={() => selectView("state")}
270 |         class:activeButton={view === "state"}>State</button
271 |       >
272 |     </div>
273 |     <div id="buttons">
274 |       {#if View === "files"}
275 |         <button
276 |           on:click={() => selectVis("tree")}
277 |           class:activeButton={vis === "tree"}>Tree</button
278 |         >
279 |         <button
280 |           on:click={() => selectVis("chart")}
281 |           class:activeButton={vis === "chart"}>Chart</button
282 |         >
283 |       {:else if View === "state"}
284 |         <button
285 |           on:click={() => selectVis("tree")}
286 |           class:activeButton={vis === "tree"}>Tree</button
287 |         >
288 |         <button
289 |           on:click={() => selectVis("chart")}
290 |           class:activeButton={vis === "chart"}>Chart</button
291 |         >
292 |         <button
293 |           on:click={() => selectVis("diff")}
294 |           class:activeButton={vis === "diff"}>Diff</button
295 |         >
296 |       {/if}
297 |     </div>
298 |     <div id="presentation">
299 |       {#if $snapshots.length}
300 |         {#if View === "files" && Vis === "tree"}
301 |           {#if Object.keys($fileTree).length}
302 |             <Component component={$fileTree} />
303 |           {:else}
304 |             <p>File structure data unavailable</p>
305 |           {/if}
306 |         {:else if View === "files" && Vis === "chart"}
307 |           {#if Object.keys($fileTree).length}
308 |             <FileStructure treeData={$fileTree} />
309 |           {:else}
310 |             <p>File structure data unavailable</p>
311 |           {/if}
312 |         {:else if View === "state"}
313 |           {#if Vis === "tree"}
314 |             <StateTree I={CurrentI} />
315 |           {:else if Vis === "chart"}
316 |             <StateChart {view} I={CurrentI} />
317 |           {:else if Vis === "diff"}
318 |             <Diffs I={CurrentI} />
319 |           {/if}
320 |         {/if}
321 |       {/if}
322 |     </div>
323 |     <div id="clearSnapshots">
324 |       <h6 class="clearSnapshotHeader">Clear Snapshots</h6>
325 |       <div id="clearButtons" class="tooltip">
326 |         <div class="toolTipPrev">
327 |           <button
328 |             class="clearButton"
329 |             on:click={() => clearSnapshots("previous")}>Previous</button
330 |           >
331 |           <span class="toolTipPrevText"
332 |             >Remove all Snapshots prior to current view</span
333 |           >
334 |         </div>
335 |         <div class="toolTipPath">
336 |           <button class="clearButton" on:click={() => clearSnapshots("path")}
337 |             >Path</button
338 |           >
339 |           <span class="toolTipPathText"
340 |             >Remove Snapshots outside current view's timeline</span
341 |           >
342 |         </div>
343 |         <div class="toolTipFwd">
344 |           <button class="clearButton" on:click={() => clearSnapshots("forward")}
345 |             >Forward</button
346 |           >
347 |           <span class="toolTipFwdText"
348 |             >Remove all Snapshots after the current view</span
349 |           >
350 |         </div>
351 |       </div>
352 |     </div>
353 |   </div>
354 | </main>
355 | 
356 | <style>
357 |   .snapshotText {
358 |     font-size: 14px;
359 |     padding-top: 0.25em;
360 |     padding-bottom: 0.25em;
361 |     padding-left: 0.5em;
362 |     margin-top: 0;
363 |     margin-bottom: 0;
364 |   }
365 | 
366 |   .snapshotButton {
367 |     font-size: 14px;
368 |     margin-top: 0;
369 |     margin-bottom: 0;
370 |   }
371 | 
372 |   .snapshotList {
373 |     display: flex;
374 |     align-items: center;
375 |     justify-content: space-between;
376 |     padding: 0;
377 |     margin-top: 2px;
378 |     margin-bottom: 2px;
379 |     min-height: 60px;
380 |     margin: 0;
381 |   }
382 | 
383 |   .snapshotButtonGroup {
384 |     flex-shrink: 0;
385 |     padding-top: 0.25em;
386 |     padding-right: 0.5em;
387 |     padding-bottom: 0.25em;
388 |   }
389 | 
390 |   .selectedSnapshot {
391 |     background-color: #989797;
392 |     border-bottom: 1px solid rgb(238, 137, 5);
393 |     padding: 0;
394 |     margin: 0;
395 |   }
396 | 
397 |   #mainContainer {
398 |     display: grid;
399 |     grid-template-columns: 300px auto;
400 |     grid-template-rows: 50px 50px auto 85px;
401 |     width: 100vw;
402 |     height: 100vh;
403 |     padding: 0;
404 |     border: 2px solid #dddcdc;
405 |   }
406 | 
407 |   #snapshots::-webkit-scrollbar {
408 |     width: 10px;
409 |   }
410 | 
411 |   #snapshots::-webkit-scrollbar-track {
412 |     background-color: rgba(238, 137, 5, 0.288);
413 |     border-radius: 100px;
414 |   }
415 | 
416 |   #snapshots::-webkit-scrollbar-thumb {
417 |     border-radius: 100px;
418 |     border: 5px solid transparent;
419 |     background-clip: content-box;
420 |     background-color: none;
421 |   }
422 | 
423 |   #snapshots {
424 |     grid-column-start: 1;
425 |     grid-column-end: 2;
426 |     grid-row-start: 3;
427 |     grid-row-end: 4;
428 |     overflow-y: scroll;
429 |     border-top: 2px solid #dddcdc;
430 |     background-color: #75747400;
431 |     margin: 0;
432 |     padding: 0;
433 |     overflow-y: auto;
434 |     overflow-x: hidden;
435 |     direction: ltr;
436 |     scrollbar-color: #d4aa70 #e4e4e4;
437 |     scrollbar-width: thin;
438 |   }
439 | 
440 |   #filter {
441 |     grid-column-start: 1;
442 |     grid-column-end: 2;
443 |     grid-row-start: 2;
444 |     grid-row-end: 3;
445 |     padding-top: 0px;
446 |     padding-bottom: 0px;
447 |     display: flex;
448 |     justify-content: space-between;
449 |     align-items: center;
450 |     background-color: #646262;
451 |   }
452 | 
453 |   #banner {
454 |     grid-column-start: 2;
455 |     grid-column-end: 3;
456 |     grid-row-start: 1;
457 |     grid-row-end: 2;
458 |     border-left: 2px solid #dddcdc;
459 |     display: flex;
460 |     align-items: center;
461 |     background-color: #535151;
462 |   }
463 | 
464 |   #title {
465 |     grid-column-start: 1;
466 |     grid-column-end: 2;
467 |     grid-row-start: 1;
468 |     grid-row-end: 2;
469 |     display: flex;
470 |     align-items: center;
471 |     background-color: #535151;
472 |   }
473 | 
474 |   #buttons {
475 |     grid-column-start: 2;
476 |     grid-column-end: 3;
477 |     grid-row-start: 2;
478 |     grid-row-end: 3;
479 |     border-left: 2px solid #dddcdc;
480 |     padding: 1em;
481 |     display: flex;
482 |     align-items: center;
483 |     background-color: #646262;
484 |   }
485 | 
486 |   #presentation {
487 |     grid-column-start: 2;
488 |     grid-column-end: 3;
489 |     grid-row-start: 3;
490 |     grid-row-end: 5;
491 |     overflow-x: scroll;
492 |     overflow-y: scroll;
493 |     border-top: 2px solid #dddcdc;
494 |     border-left: 2px solid #dddcdc;
495 |     background-color: #757474;
496 |   }
497 | 
498 |   #clearSnapshots {
499 |     grid-column-start: 1;
500 |     grid-column-end: 2;
501 |     grid-row-start: 4;
502 |     grid-row-end: 5;
503 |     background-color: #646262;
504 |     padding: 0;
505 |   }
506 | 
507 |   #clearButtons {
508 |     display: flex;
509 |     justify-content: center;
510 |     padding: 0;
511 |     margin: 0px;
512 |   }
513 | 
514 |   .clearButton {
515 |     background-color: transparent;
516 |     font-size: 14px;
517 |     border: 1px solid rgb(238, 137, 5);
518 |     margin-left: 10px;
519 |     margin-right: 10px;
520 |   }
521 | 
522 |   .clearSnapshotHeader {
523 |     text-align: center;
524 |     font-size: 16px;
525 |     margin: 0px;
526 |     padding: 10px;
527 |   }
528 | 
529 |   .toolTipPrev {
530 |     padding: 0;
531 |     position: relative;
532 |     display: inline-block;
533 |     border-bottom: 1px dotted rgb(83, 81, 81);
534 |   }
535 |   .toolTipPrev .toolTipPrevText {
536 |     visibility: hidden;
537 |     width: 120px;
538 |     background-color: rgb(83, 81, 81);
539 |     border: 1px solid #333;
540 |     color: #fff;
541 |     text-align: center;
542 |     border-radius: 6px;
543 |     /* Position the tooltip */
544 |     position: absolute;
545 |     z-index: 1;
546 |   }
547 |   .toolTipPrev:hover .toolTipPrevText {
548 |     visibility: visible;
549 |     font-size: 14px;
550 |     padding: 1px;
551 |   }
552 |   .toolTipPath {
553 |     padding: 0;
554 |     position: relative;
555 |     display: inline-block;
556 |     border-bottom: 1px dotted rgb(83, 81, 81);
557 |   }
558 |   .toolTipPath .toolTipPathText {
559 |     visibility: hidden;
560 |     width: 120px;
561 |     background-color: rgb(83, 81, 81);
562 |     border: 1px solid #333;
563 |     color: #fff;
564 |     text-align: center;
565 |     border-radius: 6px;
566 |     /* Position the tooltip */
567 |     position: absolute;
568 |     z-index: 1;
569 |   }
570 |   .toolTipPath:hover .toolTipPathText {
571 |     visibility: visible;
572 |     font-size: 14px;
573 |     padding: 1px;
574 |   }
575 |   .toolTipFwd {
576 |     position: relative;
577 |     padding: 0;
578 |     display: inline-block;
579 |     border-bottom: 1px dotted rgb(83, 81, 81);
580 |   }
581 |   .toolTipFwd .toolTipFwdText {
582 |     visibility: hidden;
583 |     width: 120px;
584 |     background-color: rgb(83, 81, 81);
585 |     border: 1px solid #333;
586 |     color: #fff;
587 |     text-align: center;
588 |     border-radius: 6px;
589 |     /* Position the tooltip */
590 |     position: absolute;
591 |     z-index: 1;
592 |   }
593 |   .toolTipFwd:hover .toolTipFwdText {
594 |     visibility: visible;
595 |     font-size: 14px;
596 |     padding: 1px;
597 |   }
598 | 
599 |   #slicerImg {
600 |     width: 30px;
601 |     height: 30px;
602 |     margin-right: 10px;
603 |   }
604 | 
605 |   .inactiveSnapshot {
606 |     background-color: #cbcbcb;
607 |   }
608 | 
609 |   #titleText {
610 |     padding-top: 5px;
611 |     margin: 0;
612 |   }
613 | 
614 |   .selectedButton {
615 |     background-color: rgb(238, 137, 5);
616 |   }
617 | 
618 |   .activeButton {
619 |     border: 1px solid rgb(238, 137, 5);
620 |   }
621 | </style>
622 | 


--------------------------------------------------------------------------------
/src/CollapsibleSection.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let headerText;
 3 | 
 4 |   let expanded = false;
 5 | </script>
 6 | 
 7 | <div class="collapsible">
 8 |   <h3>
 9 |     <button
10 |       aria-expanded={expanded}
11 |       on:click={() => (expanded = !expanded)}
12 |       class="variableVal"
13 |       >{headerText}
14 |       <svg viewBox="0 0 20 20" fill="none">
15 |         <path
16 |           class="vert"
17 |           d="M10 1V19"
18 |           stroke="rgb(238, 137, 5)"
19 |           stroke-width="5"
20 |         />
21 |         <path d="M1 10L19 10" stroke="rgb(238, 137, 5)" stroke-width="5" />
22 |       </svg>
23 |     </button>
24 |   </h3>
25 | 
26 |   <div class="contents" hidden={!expanded}>
27 |     <slot />
28 |   </div>
29 | </div>
30 | 
31 | <style>
32 |   h3 {
33 |     margin: 0;
34 |   }
35 | 
36 |   button {
37 |     background-color: var(--background, #fff);
38 |     color: var(--gray-darkest, #282828);
39 |     display: flex;
40 |     justify-content: space-between;
41 |     width: 100%;
42 |     border: none;
43 |     margin: 0;
44 |     padding: 1em 0.5em;
45 |   }
46 | 
47 |   button[aria-expanded="true"] .vert {
48 |     display: none;
49 |   }
50 | 
51 |   svg {
52 |     height: 0.7em;
53 |     width: 0.7em;
54 |   }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/Component.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let component;
 3 | 
 4 |   const _expansionState = {
 5 |     /* treeNodeId: expanded <boolean> */
 6 |   };
 7 |   const { id, children } = component;
 8 | 
 9 |   let expanded = _expansionState[id] || false;
10 |   const toggleExpansion = () => {
11 |     expanded = _expansionState[id] = !expanded;
12 |   };
13 |   $: arrowDown = expanded;
14 | </script>
15 | 
16 | <main>
17 |   <div>
18 |     <ul class="ulArrows">
19 |       <li>
20 |         {#if children.length}
21 |           <span on:click={toggleExpansion} {id}>
22 |             <span class="arrow" class:arrowDown>&#x25b6</span>{id}</span
23 |           >
24 |           {#if expanded}
25 |             {#each children as child}
26 |               <svelte:self component={child} />
27 |             {/each}
28 |           {/if}
29 |         {:else}
30 |           <span> <span class="no-arrow" />{id}</span>
31 |         {/if}
32 |       </li>
33 |     </ul>
34 |   </div>
35 | </main>
36 | 
37 | <style>
38 |   .ulArrows li {
39 |     padding: 0px;
40 |     margin: 10px;
41 |   }
42 | 
43 |   .ulArrows {
44 |     padding: 0px;
45 |     margin: 10px;
46 |     font-size: 0;
47 |   }
48 | 
49 |   .arrow {
50 |     padding: 5px;
51 |   }
52 | 
53 |   .no-arrow {
54 |     padding: 5px;
55 |     margin: 5px;
56 |   }
57 | 
58 |   span {
59 |     padding-bottom: 5px;
60 |     margin-left: 5px;
61 |   }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/Diffs.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   export let I;
  3 |   import { snapshots } from "./stores.js";
  4 |   $: snapshot = $snapshots[I];
  5 |   $: newComponents = snapshot.diff.newComponents;
  6 |   $: deletedComponents = snapshot.diff.deletedComponents;
  7 |   $: changedVariables = snapshot.diff.changedVariables;
  8 | </script>
  9 | 
 10 | <main>
 11 |   <div id="valuesList">
 12 |     <h2>Snapshot {I}: {snapshot.label}</h2>
 13 |     {#if newComponents.length}
 14 |       <h3 class="diffsHeading">New Components:</h3>
 15 |       {#each newComponents as component}
 16 |         <h4 class="diffComponentName">{component.component}</h4>
 17 |       {/each}
 18 |     {/if}
 19 |     {#if deletedComponents.length}
 20 |       <h3 class="diffsHeading">Deleted Components:</h3>
 21 |       {#each deletedComponents as component}
 22 |         <h4 class="deletedComponent">{component.component}</h4>
 23 |       {/each}
 24 |     {/if}
 25 |     {#if Object.keys(changedVariables).length}
 26 |       <h3 class="diffsHeading">Changed Variables:</h3>
 27 |       {#each Object.entries(changedVariables) as [componentName, component]}
 28 |         <h4 class="diffComponentName">{componentName}</h4>
 29 |         <ul>
 30 |           {#each Object.entries(component) as [variableName, variable]}
 31 |             {#if variable.oldValue !== "" && variable.newValue !== ""}
 32 |               <li class="oldAndNewVals">
 33 |                 {variableName}:
 34 |                 <span class="oldValue">{variable.oldValue}</span>
 35 |                 <span class="newValue"> &#8594; {variable.newValue}</span>
 36 |               </li>
 37 |             {:else if variable.oldValue === ""}
 38 |               <li class="oldAndNewVals">
 39 |                 {variableName}: <span class="oldValue">' '</span>
 40 |                 <span class="newValue"> &#8594; {variable.newValue}</span>
 41 |               </li>
 42 |             {:else if variable.newValue === ""}
 43 |               <li class="oldAndNewVals">
 44 |                 {variableName}:
 45 |                 <span class="oldValue">{variable.oldValue}</span>
 46 |                 <span class="newValue"> &#8594; ' '</span>
 47 |               </li>
 48 |             {/if}
 49 |           {/each}
 50 |         </ul>
 51 |       {/each}
 52 |     {/if}
 53 |   </div>
 54 | </main>
 55 | 
 56 | <style>
 57 |   h2 {
 58 |     font-size: 19px;
 59 |     padding: 0px;
 60 |     font-weight: 700;
 61 |   }
 62 | 
 63 |   h4 {
 64 |     padding: 8px;
 65 |   }
 66 | 
 67 |   h3 {
 68 |     padding-top: 5px;
 69 |     padding-bottom: 5px;
 70 |   }
 71 | 
 72 |   .diffsHeading {
 73 |     text-decoration: none;
 74 |     font-size: 17px;
 75 |     font-weight: bolder;
 76 |     background-color: rgba(238, 137, 5, 0.288);
 77 |   }
 78 | 
 79 |   .oldAndNewVals {
 80 |     font-size: 16px;
 81 |   }
 82 | 
 83 |   .oldValue {
 84 |     text-decoration: line-through;
 85 |     color: rgb(238, 137, 5);
 86 |     font-size: 16px;
 87 |     white-space: pre;
 88 |   }
 89 | 
 90 |   .newValue {
 91 |     white-space: pre;
 92 |   }
 93 | 
 94 |   .diffComponentName {
 95 |     color: white;
 96 |     font-weight: bold;
 97 |     font-size: 16px;
 98 |   }
 99 | 
100 |   .deletedComponent {
101 |     text-decoration: line-through;
102 |     color: rgb(238, 137, 5);
103 |     font-size: 16px;
104 |   }
105 | 
106 |   #valuesList {
107 |     font-size: 16px;
108 |     padding: 10px;
109 |   }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/src/FileStructure.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import * as d3 from "d3";
  3 |   import { onMount } from "svelte";
  4 |   export let treeData;
  5 |   console.log("treeData", treeData);
  6 | 
  7 |   let margin = { top: 20, right: 0, bottom: 20, left: 0 };
  8 |   let width = 700 - margin.left - margin.right;
  9 |   let height = 700 - margin.top - margin.bottom;
 10 | 
 11 |   let svg;
 12 |   onMount(() => {
 13 |     svg = d3
 14 |       .select("#chart")
 15 |       .append("div")
 16 |       .attr("class", "container")
 17 |       .append("svg")
 18 |       .attr("width", width + margin.right + margin.left)
 19 |       .attr("height", height + margin.top + margin.bottom)
 20 |       .append("g")
 21 |       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 22 | 
 23 |     let i = 0;
 24 |     let duration = 750;
 25 |     let root;
 26 |     //d3.tree() is tidy tree layout module
 27 |     let treemap = d3.tree().size([width, height]);
 28 |     //construct root node
 29 |     root = d3.hierarchy(treeData, function (d) {
 30 |       return d.children;
 31 |     });
 32 |     console.log("root", root);
 33 | 
 34 |     root.x0 = 0;
 35 |     root.y0 = width / 2;
 36 |     update(root);
 37 |     function update(src) {
 38 |       let treeData = treemap(root);
 39 |       //nodes //return thr arr of descendant nodes, staring with this node then followed by each child
 40 |       let nodes = treeData.descendants();
 41 |       console.log("nodes", nodes);
 42 |       //set depth
 43 |       nodes.forEach(function (d) {
 44 |         d.y = d.depth * 140;
 45 |       });
 46 |       let node = svg.selectAll("g.node").data(nodes, function (d) {
 47 |         return d.id || (d.id = ++i);
 48 |       });
 49 |       //node start at the parent's position
 50 |       let nodeEnter = node
 51 |         .enter()
 52 |         .append("g")
 53 |         .attr("class", "node")
 54 |         .attr("transform", function (d) {
 55 |           return "translate(" + src.x0 + ", " + src.y0 + ")";
 56 |         })
 57 |         .on("click", click);
 58 |       //create circles (this might be the place to set the state datas to deliver to data panel )
 59 |       nodeEnter
 60 |         .append("circle")
 61 |         .attr("class", "node")
 62 |         .attr("r", 0)
 63 |         .style("fill", function (d) {
 64 |           return d._children ? "moccasin" : "rgb(238, 137, 5)";
 65 |         });
 66 |       //add text  to show the node data
 67 |       nodeEnter
 68 |         .append("text")
 69 |         .attr("dx", ".35em")
 70 |         .attr("y", function (d) {
 71 |           return -12;
 72 |         })
 73 |         .attr("text-anchor", function (d) {
 74 |           return d.children || d._children ? "middle" : "middle"; //text position with node
 75 |         })
 76 |         .text(function (d) {
 77 |           return d.data.id;
 78 |         })
 79 |         .style("fill", "white");
 80 | 
 81 |       //make transition node/ start from parent position to new position
 82 |       let nodeUpdate = nodeEnter.merge(node);
 83 |       nodeUpdate
 84 |         .transition()
 85 |         .duration(duration)
 86 |         .attr("transform", function (d) {
 87 |           return "translate(" + d.x + ", " + d.y + ")";
 88 |         });
 89 |       nodeUpdate
 90 |         .select("circle.node")
 91 |         .attr("r", 10)
 92 |         .style("fill", function (d) {
 93 |           return d._children ? "moccasin" : "rgb(238, 137, 5)";
 94 |         })
 95 |         .attr("cursor", "pointer");
 96 |       //remove exiting node;
 97 |       let nodeExit = node
 98 |         .exit()
 99 |         .transition()
100 |         .duration(duration)
101 |         .attr("transform", function (d) {
102 |           //from child to parent
103 |           return "translate(" + src.x + "," + src.y + ")";
104 |         })
105 |         .remove();
106 |       //remove circle, dot starts at 0 it goes to 10 and when we click again it goes back to 0
107 |       nodeExit.select("circle").attr("r", 0);
108 |       //remove text
109 |       nodeExit.select("text").style("fill-opacity", 0);
110 |       //links
111 |       function diagonal(s, d) {
112 |         //path is svg elm which draw lines. Start from M, move to C
113 |         let path = `M ${s.x} ${s.y}
114 |                   C ${(s.x + d.x) / 2} ${s.y}
115 |                     ${(s.x + d.x) / 2} ${d.y}
116 |                     ${d.x} ${d.y}`;
117 |         return path;
118 |       }
119 | 
120 |       let links = treeData.descendants().slice(1);
121 |       let link = svg.selectAll("path.link").data(links, function (d) {
122 |         return d.id;
123 |       });
124 |       let linkEnter = link
125 |         .enter()
126 |         .insert("path", "g")
127 |         .attr("class", "link")
128 |         .attr("d", function () {
129 |           let o = { x: src.x0, y: src.y0 };
130 |           return diagonal(o, o);
131 |         });
132 | 
133 |       let linkUpdate = linkEnter.merge(link);
134 |       linkUpdate
135 |         .transition()
136 |         .duration(duration)
137 |         .attr("d", function (d) {
138 |           //transit from spot to its parent spot
139 |           return diagonal(d, d.parent);
140 |         });
141 |       let linkExit = link
142 |         .exit()
143 |         .transition()
144 |         .duration(duration)
145 |         .attr("d", function (d) {
146 |           let o = { x: src.x0, y: src.y0 };
147 |           return diagonal(o, o);
148 |         })
149 |         .remove();
150 | 
151 |       //store the old position for transition to transition back
152 |       nodes.forEach(function (d) {
153 |         d.x0 = d.x;
154 |         d.y0 = d.y;
155 |       });
156 |       function click(event, d) {
157 |         if (d.children) {
158 |           d._children = d.children;
159 |           d.children = null;
160 |         } else {
161 |           d.children = d._children;
162 |           d._children = null;
163 |         }
164 |         update(d);
165 |       }
166 |     }
167 |   });
168 | </script>
169 | 
170 | <div bind:this={svg} id="chart" />
171 | 


--------------------------------------------------------------------------------
/src/StateChart.svelte:
--------------------------------------------------------------------------------
  1 | <script defer>
  2 |   export let I;
  3 |   import { snapshots } from "./stores";
  4 |   import * as d3 from "d3";
  5 |   import { afterUpdate } from "svelte";
  6 | 
  7 |   $: label = $snapshots[I].label;
  8 |   $: parent = $snapshots[I].parent;
  9 |   $: tree = JSON.parse(JSON.stringify($snapshots[I].data[parent]));
 10 | 
 11 |   let margin = { top: 40, right: 60, bottom: 20, left: 60 };
 12 |   const width = document.body.clientWidth * 0.7;
 13 |   const height = document.body.clientHeight;
 14 | 
 15 |   let svg;
 16 | 
 17 |   let preElement;
 18 |   let currElement;
 19 | 
 20 |   afterUpdate(() => {
 21 |     // remove references to inactive child components
 22 |     function trimTree(tree) {
 23 |       if (tree.children.length) {
 24 |         for (let i = tree.children.length - 1; i >= 0; i--) {
 25 |           if (!tree.children[i].active) {
 26 |             tree.children.splice(i, 1);
 27 |           } else {
 28 |             trimTree(tree.children[i]);
 29 |           }
 30 |         }
 31 |       }
 32 |     }
 33 | 
 34 |     trimTree(tree);
 35 | 
 36 |     svg = d3
 37 |       .select("#chart")
 38 |       .append("div")
 39 |       .attr("class", I)
 40 |       .append("svg")
 41 |       .attr("width", width + margin.right + margin.left)
 42 |       .attr("height", height + margin.top + margin.bottom)
 43 |       .append("g")
 44 |       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 45 | 
 46 |     let i = 0;
 47 |     let duration = 750;
 48 |     let root;
 49 |     //d3.tree() is tidy tree layout module
 50 |     let treemap = d3.tree().size([width, height]);
 51 |     //construct root node
 52 |     root = d3.hierarchy(tree, function (d) {
 53 |       return d.children;
 54 |     });
 55 | 
 56 |     root.x0 = 0;
 57 |     root.y0 = width / 2;
 58 | 
 59 |     update(root);
 60 |     function update(src) {
 61 |       let treeData = treemap(root);
 62 |       let nodes = treeData.descendants();
 63 | 
 64 |       //set depth
 65 |       nodes.forEach(function (d) {
 66 |         d.y = d.depth * 180;
 67 |       });
 68 | 
 69 |       let node = svg.selectAll("g.node").data(nodes, function (d) {
 70 |         return d.id || (d.id = ++i);
 71 |       });
 72 |       //node start at the parent's position
 73 |       let nodeEnter = node
 74 |         .enter()
 75 |         .append("g")
 76 |         .attr("class", "node")
 77 |         .attr("id", function (d) {
 78 |           return d.data.id;
 79 |         })
 80 |         .attr("transform", function (d) {
 81 |           return "translate(" + src.x0 + ", " + src.y0 + ")";
 82 |         })
 83 |         .on("click", click);
 84 | 
 85 |       //create circles
 86 |       nodeEnter
 87 |         .append("circle")
 88 |         .attr("class", "node")
 89 |         .attr("r", 0)
 90 |         .style("fill", function (d) {
 91 |           return d._children ? "moccasin" : "rgb(238, 137, 5)";
 92 |         });
 93 | 
 94 |       //add text to show the node data
 95 |       nodeEnter
 96 |         .append("text")
 97 |         .attr("dx", ".35em")
 98 | 
 99 |         .attr("y", function (d) {
100 |           return -12;
101 |         })
102 |         .attr("text-anchor", function (d) {
103 |           return d.children || d._children ? "middle" : "middle";
104 |         })
105 |         .text(function (d) {
106 |           return d.data.id;
107 |         })
108 |         .style("fill", "white");
109 | 
110 |       nodeEnter
111 |         .append("g:title")
112 |         .attr("transform", "translate(0,0)")
113 |         .text(function (d) {
114 |           if (Object.keys(d.data.variables).length > 0) {
115 |             let text = "";
116 | 
117 |             Object.keys(d.data.variables).forEach((item) => {
118 |               function nested(obj) {
119 |                 if (obj.value) {
120 |                   text = text + obj.name + ":";
121 |                   if (typeof obj.value !== "object") {
122 |                     text = text + obj.value + "\n";
123 |                   } else {
124 |                     text = text + "\n";
125 |                     for (let val in obj.value) {
126 |                       nested(obj.value[val]);
127 |                     }
128 |                   }
129 |                 }
130 |               }
131 | 
132 |               nested(d.data.variables[item]);
133 |             });
134 | 
135 |             return text;
136 |           } else {
137 |             return `There are ${d.data.children.length} children`;
138 |           }
139 |         });
140 | 
141 |       //make transition node/ start from parent position to new position
142 |       let nodeUpdate = nodeEnter.merge(node);
143 |       nodeUpdate
144 |         .transition()
145 |         .duration(duration)
146 |         .attr("transform", function (d) {
147 |           return "translate(" + d.x + ", " + d.y + ")";
148 |         });
149 | 
150 |       nodeUpdate
151 |         .select("circle.node")
152 |         .attr("r", 10)
153 |         .style("fill", function (d) {
154 |           return d._children ? "moccasin" : "rgb(238, 137, 5)";
155 |         })
156 |         .attr("cursor", "pointer");
157 | 
158 |       //remove exiting node;
159 |       let nodeExit = node
160 |         .exit()
161 |         .transition()
162 |         .duration(duration)
163 |         .attr("transform", function (d) {
164 |           //from child to parent
165 |           return "translate(" + src.x + "," + src.y + ")";
166 |         })
167 |         .remove();
168 |       //remove circle, dot starts at 0 it goes to 10 and when we click again it goes back to 0
169 |       nodeExit.select("circle").attr("r", 0);
170 |       //remove text
171 |       nodeExit.select("text").style("fill-opacity", 0);
172 | 
173 |       //links
174 |       function diagonal(s, d) {
175 |         //path is svg elm which draw lines. Start from M, move to C
176 |         let path = `M ${s.x} ${s.y}
177 |                   C ${(s.x + d.x) / 2} ${s.y}
178 |                     ${(s.x + d.x) / 2} ${d.y}
179 |                     ${d.x} ${d.y}`;
180 |         return path;
181 |       }
182 | 
183 |       let activelinks = treeData.descendants().slice(1);
184 |       let links = [];
185 |       activelinks.forEach((item) => {
186 |         if (item.data.active) {
187 |           links.push(item);
188 |         }
189 |       });
190 | 
191 |       let link = svg.selectAll("path.link").data(links, function (d) {
192 |         return d.id;
193 |       });
194 | 
195 |       let linkEnter = link
196 |         .enter()
197 |         .insert("path", "g")
198 |         .attr("class", "link")
199 |         .attr("d", function () {
200 |           let o = { x: src.x0, y: src.y0 };
201 |           return diagonal(o, o);
202 |         });
203 | 
204 |       let linkUpdate = linkEnter.merge(link);
205 |       linkUpdate
206 |         .transition()
207 |         .duration(duration)
208 |         .attr("d", function (d) {
209 |           //transit from spot to its parent spot
210 |           return diagonal(d, d.parent);
211 |         });
212 |       let linkExit = link
213 |         .exit()
214 |         .transition()
215 |         .duration(duration)
216 |         .attr("d", function (d) {
217 |           let o = { x: src.x0, y: src.y0 };
218 |           return diagonal(o, o);
219 |         })
220 |         .remove();
221 | 
222 |       //store the old position for transition to transition back
223 |       nodes.forEach(function (d) {
224 |         d.x0 = d.x;
225 |         d.y0 = d.y;
226 |       });
227 |       function click(event, d, e) {
228 |         if (d.children) {
229 |           d._children = d.children;
230 |           d.children = null;
231 |         } else {
232 |           d.children = d._children;
233 |           d._children = null;
234 |         }
235 |         update(d);
236 |       }
237 |     }
238 | 
239 |     preElement = document.getElementsByClassName(`${I}`)[0].previousSibling;
240 |     currElement = document.getElementsByClassName(`${I}`);
241 |     if (svg.previousSibling) {
242 |     }
243 |     if (preElement) {
244 |       preElement.remove();
245 |     }
246 |   });
247 | </script>
248 | 
249 | <main>
250 |   <h2>Snapshot {I}: {label}</h2>
251 | 
252 |   <div bind:this={svg} id="chart" />
253 | </main>
254 | 


--------------------------------------------------------------------------------
/src/StateTree.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let I;
 3 |   import { snapshots } from "./stores.js";
 4 |   import Variable from "./Variable.svelte";
 5 |   import CollapsibleSection from "./CollapsibleSection.svelte";
 6 | 
 7 |   $: data = $snapshots[I].data;
 8 |   $: label = $snapshots[I].label;
 9 | 
10 |   $: componentList = Object.keys(data)
11 |     .sort()
12 |     .filter((component) => data[component].active);
13 | </script>
14 | 
15 | <main>
16 |   {#if data}
17 |     <h2>Snapshot {I}: {label}</h2>
18 |     {#each componentList as componentName}
19 |       {#if Object.keys(data[componentName].variables).length}
20 |         <CollapsibleSection headerText={data[componentName].id}>
21 |           <div class="content">
22 |             {#each Object.keys(data[componentName].variables) as variable}
23 |               {#if data[componentName].variables[variable].value !== undefined && data[componentName].variables[variable].value !== null}
24 |                 <Variable variable={data[componentName].variables[variable]} />
25 |               {/if}
26 |             {/each}
27 |           </div>
28 |         </CollapsibleSection>
29 |       {/if}
30 |     {/each}
31 |   {/if}
32 | </main>
33 | 
34 | <style>
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/Variable.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let variable;
 3 |   //console.log("var",variable)
 4 | </script>
 5 | 
 6 | <main>
 7 |   {#if typeof variable.value !== "object" || variable.value === null}
 8 |     {#if variable.value === ""}
 9 |       <p class="variableVal">{variable.name}: ' '</p>
10 |     {:else}
11 |       <p class="variableVal">{variable.name}: {variable.value}</p>
12 |     {/if}
13 |   {:else}
14 |     <div class="variableVal">
15 |       <p id="variableName">{variable.name}:</p>
16 |       <ul class="variableVal">
17 |         {#each Object.keys(variable.value) as nestedValue}
18 |           <li>
19 |             <svelte:self variable={variable.value[nestedValue]} />
20 |           </li>
21 |         {/each}
22 |       </ul>
23 |     </div>
24 |   {/if}
25 | </main>
26 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Overpass:wght@100&display=swap");
  2 | 
  3 | body {
  4 |   margin: 0;
  5 |   background: rgb(83, 81, 81);
  6 |   margin: 0;
  7 |   height: 100%;
  8 |   font-size: 16px;
  9 |   color: whitesmoke;
 10 |   font-family: "Overpass", sans-serif;
 11 | }
 12 | 
 13 | h2 {
 14 |   font-weight: 700;
 15 |   font-size: 19px;
 16 |   margin: 2px;
 17 |   padding: 10px;
 18 | }
 19 | 
 20 | div {
 21 |   padding: 1em;
 22 | }
 23 | 
 24 | .panelDiv {
 25 |   /* border-top: 1px solid whitesmoke; */
 26 |   text-align: center;
 27 | }
 28 | 
 29 | a {
 30 |   color: rgb(0, 100, 200);
 31 |   text-decoration: none;
 32 | }
 33 | 
 34 | ol li::marker {
 35 |   content: "▼";
 36 | }
 37 | 
 38 | a:hover {
 39 |   text-decoration: underline;
 40 | }
 41 | 
 42 | a:visited {
 43 |   color: rgb(0, 80, 160);
 44 | }
 45 | 
 46 | label {
 47 |   display: block;
 48 | }
 49 | 
 50 | input,
 51 | select,
 52 | textarea {
 53 |   color: whitesmoke;
 54 |   background: #333;
 55 |   outline: none;
 56 |   margin: 2px;
 57 |   font-size: 16px;
 58 |   font-family: "Overpass", sans-serif;
 59 |   padding: 0.4em;
 60 |   border: none;
 61 |   border-radius: 2px;
 62 | }
 63 | 
 64 | button {
 65 |   color: whitesmoke;
 66 |   background: #333;
 67 |   outline: none;
 68 |   margin: 2px;
 69 |   font-size: 16px;
 70 |   font-weight: bold;
 71 |   font-family: "Overpass", sans-serif;
 72 |   padding: 5px;
 73 |   border: none;
 74 |   border-radius: 2px;
 75 | }
 76 | 
 77 | input {
 78 |   width: 150px;
 79 | }
 80 | 
 81 | input:disabled {
 82 |   color: #ccc;
 83 | }
 84 | 
 85 | button:disabled {
 86 |   color: #999;
 87 | }
 88 | 
 89 | button:not(:disabled):active {
 90 |   background-color: #ddd;
 91 | }
 92 | 
 93 | button:focus {
 94 |   border-color: #666;
 95 | }
 96 | 
 97 | main {
 98 |   margin: 0px;
 99 |   align-items: center;
100 |   color: whitesmoke;
101 |   /* background: rgb(83, 81, 81); */
102 | }
103 | 
104 | span {
105 |   /* padding: 1em; */
106 |   font-size: 16px;
107 | }
108 | 
109 | .xAxis path,
110 | .xAxis line {
111 |   stroke: teal;
112 |   shape-rendering: crispEdges;
113 | }
114 | 
115 | .xAxis text {
116 |   font-weight: bold;
117 |   font-size: 14px;
118 |   fill: teal;
119 | }
120 | 
121 | .node circle {
122 |   fill: #fff;
123 |   stroke: steelblue;
124 |   stroke-width: 3px;
125 | }
126 | 
127 | .node text {
128 |   font: 12px Overpass;
129 | }
130 | 
131 | .link {
132 |   fill: none;
133 |   stroke: #ccc;
134 |   stroke-width: 2px;
135 | }
136 | 
137 | .test {
138 |   content: "▼";
139 | }
140 | 
141 | .no-arrow {
142 |   font-size: 16px;
143 | }
144 | 
145 | ul.ulArrows {
146 |   list-style-type: none;
147 | }
148 | 
149 | ul.variableVal {
150 |   font-size: 16px;
151 |   list-style-type: none;
152 | }
153 | 
154 | #variableName {
155 |   /* font-size: 16px; */
156 |   list-style-type: none;
157 | }
158 | .arrow {
159 |   cursor: pointer;
160 |   font-weight: bold;
161 |   display: inline-block;
162 |   transition: transform 200ms;
163 |   text-align: center;
164 | }
165 | 
166 | .arrowDown {
167 |   transform: rotate(90deg);
168 | }
169 | 
170 | .search-button {
171 |   color: rgb(162, 159, 159);
172 |   background: transparent;
173 |   border: none;
174 |   outline: none;
175 |   margin-right: -25px;
176 | }
177 | form.form button:hover {
178 |   background: rgb(238, 137, 5);
179 | }
180 | 
181 | .content {
182 |   padding: 2px;
183 |   font-size: 16px;
184 |   font-weight: bold;
185 |   border: none;
186 |   /* transition: max-height 0.2s ease-out; */
187 | }
188 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import "./global.css";
 2 | 
 3 | import App from "./App.svelte";
 4 | 
 5 | const app = new App({
 6 |   target: document.body,
 7 | });
 8 | 
 9 | export default app;
10 | 


--------------------------------------------------------------------------------
/src/stores.js:
--------------------------------------------------------------------------------
  1 | import { writable, get } from "svelte/store";
  2 | import { compile } from "svelte/compiler";
  3 | import _ from "lodash";
  4 | 
  5 | export const snapshots = writable([]);
  6 | export const fileTree = writable({});
  7 | export const flatFileTree = writable([]);
  8 | export const backgroundPageConnection = writable(
  9 |   chrome.runtime.connect({ name: "panel" })
 10 | );
 11 | export const sharedAppView = writable();
 12 | 
 13 | // store updateable objects for current component state
 14 | let componentData = {};
 15 | // store ALL nodes and listeners
 16 | const nodes = {};
 17 | 
 18 | // store AST info for each file
 19 | const astInfo = {};
 20 | const componentTree = {};
 21 | let parentComponent;
 22 | let domParent;
 23 | let rebuild = false;
 24 | 
 25 | // set up background page Connection
 26 | const connection = get(backgroundPageConnection);
 27 | 
 28 | connection.postMessage({
 29 |   name: "init",
 30 |   tabId: chrome.devtools.inspectedWindow.tabId,
 31 | });
 32 | 
 33 | // Listen for SvelteDOM messages from content script
 34 | chrome.runtime.onMessage.addListener((msg) => {
 35 |   const parsedMessage = JSON.parse(msg);
 36 | 
 37 |   const { data, type } = parsedMessage;
 38 | 
 39 |   if (type === "firstLoad") {
 40 |     snapshots.set([]);
 41 |     const snapshot = buildSnapshot(data);
 42 |     snapshots.update((array) => [...array, snapshot]);
 43 |   } else if (type === "update") {
 44 |     const newSnapshot = buildSnapshot(data);
 45 |     snapshots.update((array) => [...array, newSnapshot]);
 46 |   } else if (type === "rebuild") {
 47 |     rebuild = true;
 48 |     const newSnapshot = buildSnapshot(data);
 49 |   }
 50 | });
 51 | 
 52 | // get and parse through the AST for additional variable info
 53 | chrome.devtools.inspectedWindow.getResources((resources) => {
 54 |   const arrSvelteFiles = resources.filter((file) =>
 55 |     file.url.includes(".svelte")
 56 |   );
 57 |   arrSvelteFiles.forEach((svelteFile) => {
 58 |     svelteFile.getContent((source) => {
 59 |       if (source) {
 60 |         const { ast } = compile(source);
 61 |         const componentName = svelteFile.url.slice(
 62 |           svelteFile.url.lastIndexOf("/") + 1,
 63 |           svelteFile.url.lastIndexOf(".svelte")
 64 |         );
 65 |         const components = {};
 66 |         if (ast.instance) {
 67 |           const astVariables = ast.instance.content.body;
 68 |           astVariables.forEach((variable) => {
 69 |             const data = {};
 70 |             if (
 71 |               variable.type === "ImportDeclaration" &&
 72 |               variable.source.value.includes(".svelte")
 73 |             ) {
 74 |               data.name = variable.specifiers[0].local.name;
 75 |               data.parent = componentName;
 76 |               components[data.name] = data;
 77 |             }
 78 |           });
 79 |         }
 80 | 
 81 |         astInfo[componentName] = components;
 82 |         componentTree[componentName] = {
 83 |           id: componentName,
 84 |           children: [],
 85 |         };
 86 |       }
 87 |     });
 88 |   });
 89 | });
 90 | 
 91 | function buildSnapshot(data) {
 92 |   const {
 93 |     components,
 94 |     insertedNodes,
 95 |     deletedNodes,
 96 |     stateObject,
 97 |     snapshotLabel,
 98 |   } = data;
 99 |   const diff = {
100 |     newComponents: [],
101 |     deletedComponents: [],
102 |     changedVariables: {},
103 |   };
104 | 
105 |   // build nodes object
106 |   insertedNodes.forEach((node) => {
107 |     nodes[node.id] = {
108 |       children: [],
109 |       id: node.id,
110 |       component: node.component,
111 |       target: node.target,
112 |       loc: node.loc,
113 |     };
114 |     // add as a child to target node
115 |     if (typeof node.target === "number") {
116 |       nodes[node.target].children.push({ id: node.id });
117 |     }
118 |   });
119 | 
120 |   // build components and assign nodes and variables
121 |   components.forEach((component) => {
122 |     const { tagName, id, instance } = component;
123 | 
124 |     const data = {
125 |       tagName,
126 |       id,
127 |       nodes: {},
128 |       variables: {},
129 |       active: true,
130 |       instance,
131 |     };
132 | 
133 |     const targets = {};
134 |     // create object with all associated nodes
135 |     const nodeLocations = {}; // store nodes by code location and parent to ensure they get assigned to correct component
136 |     insertedNodes.forEach((node, i) => {
137 |       // make sure node belongs to this component - component name should match, should be only node in component from that location OR if same location, must share a target
138 |       if (
139 |         node.component === tagName &&
140 |         (!nodeLocations.hasOwnProperty(node.loc) ||
141 |           nodeLocations[node.loc] === node.target)
142 |       ) {
143 |         // update node component to include full component id with instance number
144 |         nodes[node.id].component = id;
145 |         // assign node by reference to component data
146 |         data.nodes[node.id] = nodes[node.id];
147 |         // mark the node location as taken for this component and store target node
148 |         nodeLocations[node.loc] = node.target;
149 |         // remove node from insertedNodes array so it can't be assigned to another component
150 |         delete insertedNodes[i];
151 |         // push node target and node to targetArray for later reference
152 |         targets[node.target] = true;
153 |         targets[node.id] = true;
154 |       }
155 |     });
156 | 
157 |     // identify the top-level parent node for the component
158 |     let parentNode;
159 |     if (component.target) {
160 |       parentNode = component.target;
161 |       domParent = component.id;
162 |     }
163 |     parentNode = Math.min(...Object.keys(targets));
164 |     data.parentNode = parentNode;
165 |     data.targets = targets;
166 | 
167 |     // assign variables to components using state object
168 |     const variables = stateObject[id];
169 |     for (let variable in variables) {
170 |       const varData = {
171 |         name: variable,
172 |         component: id,
173 |         value: variables[variable].value,
174 |       };
175 | 
176 |       data.variables[varData.name] = varData;
177 |     }
178 | 
179 |     diff.newComponents.push({ component: id, variables: data.variables });
180 | 
181 |     componentData[id] = data;
182 |   });
183 | 
184 |   // assign any remaining inserted Nodes that didn't go to new components
185 |   insertedNodes.forEach((node) => {
186 |     // loop through components in case there are multiple instances
187 |     for (let component in componentData) {
188 |       if (
189 |         componentData[component].tagName === node.component &&
190 |         componentData[component].targets.hasOwnProperty(node.target)
191 |       ) {
192 |         // update node component to include full component id with instance number
193 |         nodes[node.id].component = componentData[component].id;
194 |         // assign node by reference to component data
195 |         componentData[component].nodes[node.id] = nodes[node.id];
196 |         // store node target and node id for later reference
197 |         componentData[component].targets[node.target] = true;
198 |         componentData[component].targets[node.id] = true;
199 |       }
200 |     }
201 |   });
202 | 
203 |   // delete nodes and descendents
204 |   deletedNodes.forEach((node) => {
205 |     deleteNode(node.id);
206 |   });
207 | 
208 |   // if DOM was rebuilt by jumping, need to explicitly remove components
209 |   if (rebuild) {
210 |     data.deletedComponents.forEach((component) => {
211 |       delete componentData[component];
212 |     });
213 |   }
214 | 
215 |   // determine and assign the DOM parent (can't happen until all components are built and have nodes assigned)
216 |   for (let component in componentData) {
217 |     const { parentNode } = componentData[component];
218 |     componentData[component].parent = nodes.hasOwnProperty(parentNode)
219 |       ? nodes[parentNode].component
220 |       : component === domParent
221 |       ? null
222 |       : domParent;
223 |     componentData[component].children = [];
224 |   }
225 | 
226 |   // assign children to components and determine if component is active in the DOM
227 |   for (let i in componentData) {
228 |     const component = componentData[i];
229 |     const parent = component.parent;
230 |     if (parent && componentData.hasOwnProperty(parent)) {
231 |       componentData[parent].children.push(component);
232 |     }
233 |     // if no current nodes, mark component as not active
234 |     if (!Object.keys(component.nodes).length && component.id !== domParent) {
235 |       if (component.active === true) {
236 |         component.active = false;
237 |         diff.deletedComponents.push({
238 |           component: component.id,
239 |           variables: component.variables,
240 |         });
241 |       }
242 |     } else {
243 |       component.active = true;
244 |     }
245 |   }
246 | 
247 |   // update state variables
248 |   const currentIndex = get(sharedAppView);
249 |   if (currentIndex >= 0) {
250 |     const allStates = get(snapshots);
251 |     const stateHistory = allStates[currentIndex].data;
252 |     const storeDiff = {};
253 | 
254 |     for (let [componentId, component] of Object.entries(componentData)) {
255 |       const componentDiff = {};
256 | 
257 |       if (stateObject.hasOwnProperty(componentId)) {
258 |         for (let [varName, variable] of Object.entries(
259 |           stateObject[componentId]
260 |         )) {
261 |           const { value } = variable;
262 |           let data = {};
263 |           // if variable is in stateObject but not in componentData, set value in componentData to null
264 |           if (!component.variables.hasOwnProperty(varName)) {
265 |             component.variables[varName] = variable;
266 |           }
267 |           // if values are different, set value in componentData to value from stateObject
268 |           else if (!_.isEqual(value, component.variables[varName].value)) {
269 |             component.variables[varName].value = value;
270 |           }
271 | 
272 |           if (stateHistory.hasOwnProperty(componentId)) {
273 |             // if variable is in stateObject but not in stateHistory, old value is null
274 |             if (!stateHistory[componentId].variables.hasOwnProperty(varName)) {
275 |               data = {
276 |                 name: varName,
277 |                 oldValue: null,
278 |                 newValue: getDiffValue(value),
279 |               };
280 |             }
281 |             // if values are different in stateObject and stateHistory, set old and new values respetively
282 |             else if (
283 |               !_.isEqual(
284 |                 stateHistory[componentId].variables[varName].value,
285 |                 value
286 |               )
287 |             ) {
288 |               data = {
289 |                 name: varName,
290 |                 oldValue:
291 |                   stateHistory[componentId].variables[varName].value !== undefined
292 |                     ? getDiffValue(
293 |                         stateHistory[componentId].variables[varName].value
294 |                       )
295 |                     : "undefined",
296 |                 newValue: getDiffValue(value),
297 |               };
298 |             }
299 |           }
300 | 
301 |           // if there are diffs, add to component diff or store diff
302 |           if (!_.isEmpty(data)) {
303 |             if (varName[0] === "$") {
304 |               storeDiff[varName] = data;
305 |             } else {
306 |               componentDiff[varName] = data;
307 |             }
308 |           }
309 |         }
310 |       }
311 |       
312 |       if (stateObject.hasOwnProperty(componentId)) {
313 |         for (let [varName, variable] of Object.entries(component.variables)) {
314 |           // if variable is in componentData but not in stateObject, new value in componentData is null
315 |           if (!stateObject[componentId].hasOwnProperty(varName)) {
316 |             variable.value = null;
317 |           }
318 |         }
319 | 
320 |         if (stateHistory.hasOwnProperty(componentId)) {
321 |           for (let [varName, variable] of Object.entries(
322 |             stateHistory[componentId].variables
323 |           )) {
324 |             // if variable is in stateHistory but not in stateObject, new value is null
325 |             if (!stateObject[componentId].hasOwnProperty(varName)) {
326 |               const data = {
327 |                 name: varName,
328 |                 oldValue:
329 |                   variable.value !== undefined
330 |                     ? getDiffValue(variable.value)
331 |                     : "undefined",
332 |                 newValue: null,
333 |               };
334 |               if (varName[0] === "$") {
335 |                 storeDiff[varName] = data;
336 |               } else {
337 |                 componentDiff[varName] = data;
338 |               }
339 |             }
340 |           }
341 |         }
342 |       }
343 | 
344 |       if (!_.isEmpty(componentDiff)) {
345 |         diff.changedVariables[componentId] = componentDiff;
346 |       }
347 |     }
348 | 
349 |     if (!_.isEmpty(storeDiff)) {
350 |       diff.changedVariables["Store"] = storeDiff;
351 |     }
352 |   }
353 | 
354 |   let currentTree = get(fileTree);
355 |   if (_.isEmpty(currentTree)) {
356 |     // assign component children
357 |     for (let file in astInfo) {
358 |       for (let childFile in astInfo[file]) {
359 |         componentTree[file].children.push(componentTree[childFile]);
360 |         componentTree[childFile].parent = file;
361 |       }
362 |     }
363 | 
364 |     // determine top-level parent component
365 |     for (let file in astInfo) {
366 |       if (!componentTree[file].parent) {
367 |         parentComponent = file;
368 |       }
369 |     }
370 | 
371 |     if (!_.isEmpty(componentTree)) {
372 |       fileTree.set(componentTree[parentComponent]);
373 |     }
374 | 
375 |     //create depth-first ordering of tree for state injections
376 |     const flatTreeArray = [];
377 | 
378 |     // if AST came through, make flat file tree based on that; otherwise use componentData
379 |     if (!_.isEmpty(componentTree)) {
380 |       depthFirstTraverse(componentTree[parentComponent]);
381 |     } else {
382 |       depthFirstTraverse(componentData[domParent]);
383 |     }
384 | 
385 |     function depthFirstTraverse(tree) {
386 |       flatTreeArray.push(tree.tagName || tree.id);
387 |       if (tree.children.length) {
388 |         tree.children.forEach((child) => {
389 |           depthFirstTraverse(child);
390 |         });
391 |       }
392 |     }
393 | 
394 |     flatFileTree.set(flatTreeArray);
395 |   }
396 | 
397 |   const snapshot = {
398 |     data: componentData,
399 |     parent: domParent,
400 |     label: snapshotLabel ? snapshotLabel : "Unlabeled Snapshot",
401 |     diff,
402 |   };
403 | 
404 |   rebuild = false;
405 | 
406 |   const deepCloneSnapshot = JSON.parse(JSON.stringify(snapshot));
407 | 
408 |   return deepCloneSnapshot; // deep clone to "freeze" state
409 | }
410 | 
411 | // recursively delete node and all descendents
412 | function deleteNode(nodeId) {
413 |   const { children, component, id } = nodes[nodeId];
414 |   if (children.length) {
415 |     children.forEach((child) => {
416 |       deleteNode(child.id);
417 |     });
418 |   }
419 |   delete componentData[component].nodes[id];
420 | }
421 | 
422 | function getDiffValue(value) {
423 |   let text = "";
424 | 
425 |   if (value === null || typeof value !== "object") {
426 |     text += value;
427 |   } else {
428 |     text += "\n";
429 |     for (let i in value) {
430 |       nested(value[i], 1);
431 |     }
432 |   }
433 | 
434 |   return text;
435 | 
436 |   function nested(obj, tabCount) {
437 |     if (obj.value) {
438 |       // add tabs based on the level in the recursion
439 |       for (let i = 1; i <= tabCount; i++) {
440 |         text = text + "\t";
441 |       }
442 |       text = text + obj.name + ": ";
443 |       if (typeof obj.value !== "object") {
444 |         text = text + obj.value + "\n";
445 |       } else {
446 |         tabCount++;
447 |         text = text + "\n";
448 |         for (let val in obj.value) {
449 |           nested(obj.value[val], tabCount);
450 |         }
451 |       }
452 |     }
453 |   }
454 | }
455 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 2 | const path = require('path');
 3 | 
 4 | const mode = process.env.NODE_ENV || 'development';
 5 | const prod = mode === 'production';
 6 | 
 7 | module.exports = {
 8 | 	entry: {
 9 | 		'build/bundle': ['./src/main.js']
10 | 	},
11 | 	resolve: {
12 | 		alias: {
13 | 			svelte: path.dirname(require.resolve('svelte/package.json'))
14 | 		},
15 | 		extensions: ['.mjs', '.js', '.svelte'],
16 | 		mainFields: ['svelte', 'browser', 'module', 'main']
17 | 	},
18 | 	output: {
19 | 		path: path.join(__dirname, '/extension/devtools'),
20 | 		filename: '[name].js',
21 | 		chunkFilename: '[name].[id].js'
22 | 	},
23 | 	module: {
24 | 		rules: [
25 | 			{
26 | 				test: /\.svelte$/,
27 | 				use: {
28 | 					loader: 'svelte-loader',
29 | 					options: {
30 | 						compilerOptions: {
31 | 							dev: !prod
32 | 						},
33 | 						emitCss: prod,
34 | 						hotReload: !prod
35 | 					}
36 | 				}
37 | 			},
38 | 			{
39 | 				test: /\.css$/,
40 | 				use: [
41 | 					MiniCssExtractPlugin.loader,
42 | 					'css-loader'
43 | 				]
44 | 			},
45 | 			{
46 | 				// required to prevent errors from Svelte on Webpack 5+
47 | 				test: /node_modules\/svelte\/.*\.mjs$/,
48 | 				resolve: {
49 | 					fullySpecified: false
50 | 				}
51 | 			},
52 | 			{
53 | 				test: /\.(png|jpe?g|gif)$/i,
54 | 				use: [
55 | 				  {
56 | 					loader: 'file-loader',
57 | 				  },
58 | 				],
59 | 			  },
60 | 		]
61 | 	},
62 | 	mode,
63 | 	plugins: [
64 | 		new MiniCssExtractPlugin({
65 | 			filename: '[name].css'
66 | 		})
67 | 	],
68 | 	devtool: prod ? false : 'source-map',
69 | 	devServer: {
70 | 		hot: true
71 | 	}
72 | };
73 | 


--------------------------------------------------------------------------------