svelte-helper

svelte-helper/src/App.svelte

@@ -0,0 +1,33 @@
+<script>
+  import Counter from "./lib/Counter.svelte";
+  import Review from "./lib/Review.svelte";
+</script>
+
+<main>
+  <div></div>
+  <h1>Vite + Svelte</h1>
+
+  <div class="card">
+    <Counter />
+  </div>
+
+  <div class="card">
+    <Review />
+  </div>
+
+  <p>
+    Check out <a
+      href="https://github.com/sveltejs/kit#readme"
+      target="_blank"
+      rel="noreferrer">SvelteKit</a
+    >, the official Svelte app framework powered by Vite!
+  </p>
+
+  <p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
+</main>
+
+<style>
+  .read-the-docs {
+    color: #888;
+  }
+</style>

svelte-helper/src/app.css

@@ -0,0 +1,84 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

svelte-helper/src/lib/AreEqual.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Left from './Left.svelte';
+  import Right from './Right.svelte';
+
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>AreEqual data is null</p>
+{:else if data.length === 0}
+  <p>AreEqual data is empty</p>
+{:else}
+  {#each data as segment}
+    AreEqual:
+    <Left data={segment.Left} />
+    <Right data={segment.Right} />
+  {/each}
+{/if}

svelte-helper/src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script>
+  let count = $state(0);
+  const increment = () => {
+    count += 1;
+  };
+</script>
+
+<button onclick={increment}>
+  count is {count}
+</button>

svelte-helper/src/lib/Left.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>Left data is null</p>
+{:else}
+  <li>Left: {data.RelativePath} - {data.Size} - {data.Ticks}</li>
+{/if}

svelte-helper/src/lib/LeftSideIsNewer.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Left from './Left.svelte';
+  import Right from './Right.svelte';
+
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>LeftSideIsNewer data is null</p>
+{:else if data.length === 0}
+  <p>LeftSideIsNewer data is empty</p>
+{:else}
+  {#each data as segment}
+    LeftSideIsNewer:
+    <Left data={segment.Left} />
+    <Right data={segment.Right} />
+  {/each}
+{/if}

svelte-helper/src/lib/LeftSideOnly.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Left from './Left.svelte';
+  import Right from './Right.svelte';
+
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>LeftSideOnly data is null</p>
+{:else if data.length === 0}
+  <p>LeftSideOnly data is empty</p>
+{:else}
+  {#each data as segment}
+    LeftSideOnly:
+    <Left data={segment.Left} />
+    <Right data={segment.Right} />
+  {/each}
+{/if}

svelte-helper/src/lib/NotEqualBut.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Left from './Left.svelte';
+  import Right from './Right.svelte';
+
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>NotEqualBut data is null</p>
+{:else if data.length === 0}
+  <p>NotEqualBut data is empty</p>
+{:else}
+  {#each data as segment}
+    NotEqualBut:
+    <Left data={segment.Left} />
+    <Right data={segment.Right} />
+  {/each}
+{/if}

svelte-helper/src/lib/Records.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>Records data is null</p>
+{:else if data.length === 0}
+  <p>Records data is empty</p>
+{:else}
+  Records:
+  {#each data as record}
+    <li>{record.Left.Records}</li>
+  {/each}
+{/if}

svelte-helper/src/lib/Review.svelte

@@ -0,0 +1,41 @@
+<script>
+  import AreEqual from './AreEqual.svelte';
+  import LeftSideIsNewer from './LeftSideIsNewer.svelte';
+  import LeftSideOnly from './LeftSideOnly.svelte';
+  import NotEqualBut from './NotEqualBut.svelte';
+  import Records from './Records.svelte';
+  import RightSideIsNewer from './RightSideIsNewer.svelte';
+  import RightSideOnly from './RightSideOnly.svelte';
+
+  export let page; // from props
+  export let json; // from props
+  export let baseUrl; // from props
+
+  let promise = fetch(baseUrl + page, {
+    method: 'POST',
+    body: json,
+    headers: { 'Content-Type': 'application/json' },
+  }).then((x) => x.json());
+</script>
+
+{#await promise}
+  <!-- optionally show something while promise is pending -->
+  <span>waiting</span>
+{:then data}
+  <!-- promise was fulfilled -->
+  {#if !data}
+    <p>Review data is null</p>
+  {:else}
+    <p>Review:</p>
+    <AreEqual data={data.AreEqual} />
+    <LeftSideIsNewer data={data.LeftSideIsNewer} />
+    <LeftSideOnly data={data.LeftSideOnly} />
+    <NotEqualBut data={data.NotEqualBut} />
+    <Records data={data.Records} />
+    <RightSideIsNewer data={data.RightSideIsNewer} />
+    <RightSideOnly data={data.RightSideOnly} />
+  {/if}
+{:catch error}
+  <span>{error}</span>
+  <!-- optionally show something while promise was rejected -->
+{/await}

svelte-helper/src/lib/Right.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>Right data is null</p>
+{:else}
+  <li>Right: {data.RelativePath} - {data.Size} - {data.Ticks}</li>
+{/if}

svelte-helper/src/lib/RightSideIsNewer.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Left from './Left.svelte';
+  import Right from './Right.svelte';
+
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>RightSideIsNewer data is null</p>
+{:else if data.length === 0}
+  <p>RightSideIsNewer data is empty</p>
+{:else}
+  {#each data as segment}
+    RightSideIsNewer:
+    <Left data={segment.Left} />
+    <Right data={segment.Right} />
+  {/each}
+{/if}

svelte-helper/src/lib/RightSideOnly.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Left from './Left.svelte';
+  import Right from './Right.svelte';
+
+  export let data; // from props
+</script>
+
+{#if !data}
+  <p>RightSideOnly data is null</p>
+{:else if data.length === 0}
+  <p>RightSideOnly data is empty</p>
+{:else}
+  {#each data as segment}
+    RightSideOnly:
+    <Left data={segment.Left} />
+    <Right data={segment.Right} />
+  {/each}
+{/if}

svelte-helper/src/lib/embed.js

@@ -0,0 +1,37 @@
+import Review from './Review.svelte';
+
+var div = document.createElement('DIV');
+var script = document.currentScript;
+script.parentNode.insertBefore(div, script);
+
+const page = '/api/SyncV1/?';
+const baseUrl = 'http://localhost:5004';
+
+const json = `
+{
+  "LeftDirectory": "D:/Tmp/phares/VisualStudioCodeLeft",
+  "RightDirectory": "D:/Tmp/phares/VisualStudioCode",
+  "Records": [
+    {
+      "RelativePath": "D:/Tmp/phares/VisualStudioCode",
+      "Size": 0,
+      "Ticks": 0
+    },
+    {
+      "RelativePath": "z-exclude-patterns.nsv",
+      "Size": 230,
+      "Ticks": 638843891271017574
+    },
+    {
+      "RelativePath": "z-include-patterns.nsv",
+      "Size": 4,
+      "Ticks": 638796666663591762
+    }
+  ]
+}
+`;
+
+const embed = new Review({
+  target: div,
+  props: { page: page, baseUrl: baseUrl, json: json },
+});

svelte-helper/src/lib/x.js

@@ -0,0 +1,101 @@
+const exampleData = `
+{
+    "RightDirectory": "D:/Tmp/phares/VisualStudioCode",
+    "Helper": "Day-Helper-2025-05-19",
+    "LeftDirectory": "D:/Tmp/phares/VisualStudioCodeLeft",
+    "IncludePatternsFile": "z-include-patterns.nsv",
+    "ExcludePatternsFile": "z-exclude-patterns.nsv",
+    "BaseAddresses": [
+        "http://localhost:5004"
+    ],
+    "Page": "/api/SyncV1/?",
+    "LessThan": ",L",
+    "GreaterThan": ".G",
+    "Segments": [
+        "+",
+        "G",
+        "",
+        "L",
+        "+",
+        "Custom-Default"
+    ],
+    "Empty": "",
+    "Mirror": "+~G~~G~-~Mirror",
+    "Update": "+~G~~~~Update",
+    "Custom-Default": "+~G~~L~+~Custom-Default",
+    "Custom-A": "-~G~~G~+~Custom-A",
+    "Custom-B": "-~L~~L~+~Custom-B",
+    "Custom-C": "+~L~~L~-~Custom-C"
+}
+`;
+
+window.addEventListener('message', event => { onDidReceiveMessage(event); });
+
+function onDidReceiveMessage(event) {
+  const message = event.data;
+  console.info(message);
+  const headerGrid = document.getElementById('HeaderGrid');
+  const allTextarea = document.getElementById('AllTextarea');
+  if (!headerGrid || !allTextarea) {
+    console.warn('Could not select html element(s)!');
+  }
+  else {
+    allTextarea.value = '';
+    headerGrid.innerHTML = '';
+    if (message.command && message.command === 'post') {
+      post(allTextarea, headerGrid, event.data);
+    }
+  }
+}
+
+function post(allTextarea, headerGrid, data) {
+  $.post(data.input.BaseAddresses[0] + data.input.Page, data.relativePath)
+    .done(function (reply) {
+      loadPage(allTextarea, headerGrid, data.input, data.relativePath, reply);
+    })
+    .fail(function (_, textStatus, __) {
+      console.warn(textStatus);
+    });
+}
+
+function loadPage(allTextarea, headerGrid, input, relativePath, reply) {
+  console.log('Input value of ' + input);
+  console.log('RelativePath value of ' + relativePath);
+  console.log('Posted value of ' + reply);
+  if (!reply || !reply.RightSideIsNewer) {
+    console.warn('Data retrieved is not valid!');
+  }
+  else {
+    let record;
+    let line = '';
+    let text = 'RelativePath\tSize\tTicks\r\n';
+    let html = '<tr><th>RelativePath</th><th>Size</th><th>Ticks</th></tr>';
+    for (let i = 0; i < reply.RightSideIsNewer.length; i++) {
+      record = reply.RightSideIsNewer[i];
+      text += record.Left.RelativePath + '\t' +
+        record.Left.Size + '\t' +
+        record.Left.Ticks + '\r\n';
+      line = '<tr id="tr' + record.Left.Ticks + '-' + record.Left.Size + '"><td>' +
+        record.Left.RelativePath + '</td><td>' +
+        record.Left.Size + "</td><td>" +
+        record.Left.Ticks +
+        '</td></tr>';
+      html += line;
+    }
+    headerGrid.innerHTML = html.replaceAll('>null<', '>&nbsp;<');
+    allTextarea.value = text.replaceAll('null', '').replaceAll('&nbsp;', '');
+  }
+}
+
+function getRelativePathAndPost() {
+  if (!acquiredVsCodeApi || typeof acquiredVsCodeApi.postMessage !== 'function') {
+    console.warn('VSCode function is not available!');
+  }
+  else {
+    acquiredVsCodeApi.postMessage({ command: 'File-Folder-Helper.exe', subcommand: 'post', value: null, collection: [] });
+  }
+}
+
+if (!exampleData) {
+  getRelativePathAndPost();
+}

svelte-helper/src/main.js

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app'),
+})
+
+export default app

svelte-helper/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />