diff --git a/samples/language-service-sample/app.js b/samples/language-service-sample/app.js index e119bd8..b8579d8 100644 --- a/samples/language-service-sample/app.js +++ b/samples/language-service-sample/app.js @@ -43,103 +43,23 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) initTheme(); -// Examples data -const exampleCases = [ - { - id: 'math', - title: 'Mathematical Expression', - description: 'Basic math operations with variables', - expression: '(x + y) * multiplier + sqrt(16)', - context: { - x: 10, - y: 5, - multiplier: 3 - } - }, - { - id: 'arrays', - title: 'Working with Arrays', - description: 'Array functions like sum, min, max', - expression: 'sum(numbers) + max(numbers) - min(numbers)', - context: { - numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], - values: [15, 25, 35] - } - }, - { - id: 'objects', - title: 'Object Manipulation', - description: 'Access nested object properties', - expression: 'user.profile.score * level.multiplier + bonus.points', - context: { - user: { - name: "Alice", - profile: { - score: 85, - rank: "Gold" - } - }, - level: { - current: 5, - multiplier: 1.5 - }, - bonus: { - points: 100, - active: true - } - } - }, - { - id: 'map-filter', - title: 'Map and Filter Functions', - description: 'Transform and filter data with callbacks', - expression: 'sum(map(filter(items, item => item > 3), x => x * 2))', - context: { - items: [1, 2, 3, 4, 5, 6, 7, 8], - threshold: 3 - } - }, - { - id: 'complex', - title: 'Complex Objects', - description: 'Work with deeply nested data structures', - expression: 'company.departments[0].employees.length * company.settings.bonusRate + sum(map(company.departments, d => d.budget))', - context: { - company: { - name: "TechCorp", - departments: [ - { - name: "Engineering", - budget: 500000, - employees: ["John", "Jane", "Bob"] - }, - { - name: "Marketing", - budget: 200000, - employees: ["Alice", "Carol"] - } - ], - settings: { - bonusRate: 0.15, - fiscalYear: 2024 - } - } - } - }, - { - id: 'data-transform', - title: 'Data Transformation', - description: 'Flatten nested objects and transform rows', - expression: "map(f(row) = {_id: row.rowId} + flatten(row.data, ''), $event)", - context: { - "$event": [ - {"rowId": 1, "state": "saved", "data": { "InventoryId": 1256, "Description": "Bal", "Weight": { "Unit": "g", "Amount": 120 } }}, - {"rowId": 2, "state": "new", "data": { "InventoryId": 2344, "Description": "Basket", "Weight": { "Unit": "g", "Amount": 300 } }}, - {"rowId": 3, "state": "unchanged", "data": { "InventoryId": 9362, "Description": "Wood", "Weight": { "Unit": "kg", "Amount": 18 } }} - ] - } - } -]; +// Copy example link to clipboard +function copyExampleLink(exampleId, button) { + const url = new URL(window.location.href); + url.search = ''; + url.searchParams.set('example', exampleId); + navigator.clipboard.writeText(url.toString()).then(() => { + // Show checkmark briefly + const icon = button.querySelector('svg'); + const originalPath = icon.innerHTML; + icon.innerHTML = ''; + button.classList.add('text-green-500', 'dark:text-green-400'); + setTimeout(() => { + icon.innerHTML = originalPath; + button.classList.remove('text-green-500', 'dark:text-green-400'); + }, 1500); + }); +} // Render examples sidebar function renderExamplesSidebar() { @@ -147,33 +67,48 @@ function renderExamplesSidebar() { if (!examplesList) return; examplesList.innerHTML = exampleCases.map(example => ` - + + + `).join(''); - // Add click handlers + // Add click handlers for loading examples examplesList.querySelectorAll('.example-item').forEach(button => { button.addEventListener('click', () => { const exampleId = button.dataset.exampleId; @@ -183,6 +118,15 @@ function renderExamplesSidebar() { } }); }); + + // Add click handlers for copy link buttons + examplesList.querySelectorAll('.copy-link-btn').forEach(button => { + button.addEventListener('click', (e) => { + e.stopPropagation(); + const exampleId = button.dataset.exampleId; + copyExampleLink(exampleId, button); + }); + }); } // Load example into editors diff --git a/samples/language-service-sample/examples.js b/samples/language-service-sample/examples.js new file mode 100644 index 0000000..9161b7b --- /dev/null +++ b/samples/language-service-sample/examples.js @@ -0,0 +1,97 @@ +// Example cases for the language service sample +const exampleCases = [ + { + id: 'math', + title: 'Mathematical Expression', + description: 'Basic math operations with variables', + expression: '(x + y) * multiplier + sqrt(16)', + context: { + x: 10, + y: 5, + multiplier: 3 + } + }, + { + id: 'arrays', + title: 'Working with Arrays', + description: 'Array functions like sum, min, max', + expression: 'sum(numbers) + max(numbers) - min(numbers)', + context: { + numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], + values: [15, 25, 35] + } + }, + { + id: 'objects', + title: 'Object Manipulation', + description: 'Access nested object properties', + expression: 'user.profile.score * level.multiplier + bonus.points', + context: { + user: { + name: "Alice", + profile: { + score: 85, + rank: "Gold" + } + }, + level: { + current: 5, + multiplier: 1.5 + }, + bonus: { + points: 100, + active: true + } + } + }, + { + id: 'map-filter', + title: 'Map and Filter Functions', + description: 'Transform and filter data with callbacks', + expression: 'sum(\n map(\n f(x) = x * 2, \n filter(\n f(i) = i > threshold, \n items\n )\n )\n) / length(items)', + context: { + items: [1, 2, 3, 4, 5, 6, 7, 8], + threshold: 3 + } + }, + { + id: 'complex', + title: 'Complex Objects', + description: 'Work with deeply nested data structures', + expression: 'length(company.departments[0].employees) * company.settings.bonusRate + sum(map(f(d) = d.budget, company.departments))', + context: { + company: { + name: "TechCorp", + departments: [ + { + name: "Engineering", + budget: 500000, + employees: ["John", "Jane", "Bob"] + }, + { + name: "Marketing", + budget: 200000, + employees: ["Alice", "Carol"] + } + ], + settings: { + bonusRate: 0.15, + fiscalYear: 2024 + } + } + } + }, + { + id: 'data-transform', + title: 'Data Transformation', + description: 'Flatten nested objects and transform rows', + expression: "map(f(row) = {_id: row.rowId} + flatten(row.data, ''), $event)", + context: { + "$event": [ + {"rowId": 1, "state": "saved", "data": { "InventoryId": 1256, "Description": "Bal", "Weight": { "Unit": "g", "Amount": 120 } }}, + {"rowId": 2, "state": "new", "data": { "InventoryId": 2344, "Description": "Basket", "Weight": { "Unit": "g", "Amount": 300 } }}, + {"rowId": 3, "state": "unchanged", "data": { "InventoryId": 9362, "Description": "Wood", "Weight": { "Unit": "kg", "Amount": 18 } }} + ] + } + } +]; diff --git a/samples/language-service-sample/index.html b/samples/language-service-sample/index.html index 64a550b..eda05c1 100644 --- a/samples/language-service-sample/index.html +++ b/samples/language-service-sample/index.html @@ -143,6 +143,7 @@

diff --git a/samples/language-service-sample/serve-sample.cjs b/samples/language-service-sample/serve-sample.cjs index be52d7e..d49a359 100644 --- a/samples/language-service-sample/serve-sample.cjs +++ b/samples/language-service-sample/serve-sample.cjs @@ -32,7 +32,7 @@ const server = http.createServer((req, res) => { if (urlPath === '/' || urlPath === '/index.html') { urlPath = 'samples/language-service-sample/index.html'; - } else if (urlPath === '/styles.css' || urlPath === '/app.js') { + } else if (urlPath === '/styles.css' || urlPath === '/app.js' || urlPath === '/examples.js') { // Serve sample-specific files from the sample folder urlPath = 'samples/language-service-sample' + urlPath; }