Merge branch 'refactor'

.eslintrc.json

@@ -1,3 +1,24 @@
 {
-  "extends": ["eslint-config-node-roboleary"]
+  "extends": ["eslint-config-node-roboleary"],
+  "env": {
+    "mocha": true,
+    "es2020": true
+  },
+  "settings": {
+    "import/core-modules": ["vscode"]
+  },
+  "rules": {
+    "node/no-missing-require": [
+      "error",
+      {
+        "allowModules": ["vscode"]
+      }
+    ],
+    "node/no-unpublished-require": [
+      "error",
+      {
+        "allowModules": ["mocha"]
+      }
+    ]
+  }
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -25,11 +25,11 @@ A clear and concise description of what you expected to happen.
 
 If applicable, add screenshots to help explain your problem.
 
-## Environment information
+## Platform information
 
 Please complete the following information:
 - On the main menu, go to *Help*, and select *About* from the drop down. Copy the information from the *About* dialog.
-- Are you are working remotely or using WSL? Please state this too.
+- Are you are working remotely or using WSL?
 
 ## Additional context
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,24 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Is your feature request related to a problem?
+
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+## Describe the solution you'd like
+
+A clear and concise description of what you want to happen.
+
+## Describe alternatives you've considered
+
+A clear and concise description of any alternative solutions or features you've considered.
+
+## Additional context
+
+Add any other context or screenshots about the feature request here.

.vscodeignore

@@ -8,6 +8,7 @@ test
 **/*.map
 **/.eslintrc.json
 src
+refactor
 !script/main.js
 webpack.config.js
 img/**

CHANGELOG.md

@@ -5,6 +5,37 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.0] - 2023-11-08
+
+### Changed
+
+- Major refactor of codebase!!
+- Tweaked the appearance of *view* in following ways:
+	- Updated the *table of contents* to show an entry for the snippets file in an extension.
+	- Show *all* snippet files. Previously if a file was empty, it was not shown.
+	- For extensions section, make the file section with the heading (snippet file name) and languages a sticky section.
+	- Moved the "view source" button to be on same line as heading and to be be part of a sticky section.
+	- For the table of snippets:
+		- Show `prefix` as an unstyled list. If it has multiple items, show as a comman-separated list
+		 with each item on a separate line.
+		- Format the `scope` content to be a sorted list and have a space between each item.
+	- Tweaked colours, spacing, and various styles to improve readability.
+	- Change the `h3` headings in the project, user, and "VS Code" sections. Now, it shows the filename with the extension. Previously, the extension was excluded for brevity. Since a snippet file can be a `.json` or `.code-snippets` file, it is better to be give the complete filename.
+	- Changed the title for "app" snippets section from "VS Code Snippets" to "App Snippets".
+- Change `prefix` to accept string or array in *snippet.js*.
+- Change `scope` to be a formatted string (sort items and normalize space between items) in *snippet.js*.
+- Change the title of the `snippets-ranger.add` command from "Snippets Ranger: Add New Snippet" to "Add new snippet to snippets file...".
+- Change the `snippets-ranger.add` command to transform a multi-line string into multiple elements in the array.
+- Updated README copy and added new screenshots.
+
+### Removed
+
+- Removed the "back to button" that resided in the top-right corner of *view*.
+
+### Fixed
+
+- For the `snippets-ranger.add` command, it escapes dollar signs in the selected code. This ensures that they are not interpeted as tabstops.
+
 ## [0.25.2] - 2023-10-16
 
 ### Fixed

README.md

@@ -10,68 +10,80 @@
 <h4 align="center">View and edit all your snippets in one purty place. Yee-haw!</h4>
 
 <p align="center">
-<img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=made%20for&message=VS%20Code&color=0000ff" alt="Made for VSCode">
-<img src="https://img.shields.io/visual-studio-marketplace/v/robole.snippets-ranger?logo=visual-studio-code&color=0000ff" alt="Visual Studio Marketplace Version">
-<img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=size&message=65KB&color=0000ff"
+<img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=made%20for&message=VS%20Code&color=blue" alt="Made for VSCode">
+<img src="https://img.shields.io/visual-studio-marketplace/v/robole.snippets-ranger?logo=visual-studio-code&color=blue" alt="Visual Studio Marketplace Version">
+<img src="https://img.shields.io/static/v1?logo=visual-studio-code&label=size&message=67KB&color=blue"
 alt="Extension file size in bytes">
-<img src="https://img.shields.io/visual-studio-marketplace/r/robole.snippets-ranger?logo=visual-studio-code&color=0000ff" alt="Visual Studio Marketplace Rating">
-<img src="https://img.shields.io/visual-studio-marketplace/d/robole.snippets-ranger?logo=visual-studio-code&color=0000ff" alt="downloads"/>
-<img src="https://img.shields.io/visual-studio-marketplace/i/robole.snippets-ranger?logo=visual-studio-code&color=0000ff" alt="installs"/>
-<img src="https://img.shields.io/static/v1?label=built%20with&message=sarsaparilla%20%26%20javascript&color=0000ff" alt="Built with sarsaparilla and javascript"/>
-<a href="https://ko-fi.com/roboleary"><img src="https://img.shields.io/badge/Buy%20me%20a%20coffee-$4-orange?logo=buy-me-a-coffee" alt="Buy me a coffee"></a>
+<img src="https://img.shields.io/visual-studio-marketplace/r/robole.snippets-ranger?logo=visual-studio-code&color=blue" alt="Visual Studio Marketplace Rating">
+<img src="https://img.shields.io/visual-studio-marketplace/d/robole.snippets-ranger?logo=visual-studio-code&color=blue" alt="downloads"/>
+<img src="https://img.shields.io/visual-studio-marketplace/i/robole.snippets-ranger?logo=visual-studio-code&color=blue" alt="installs"/>
+<img src="https://img.shields.io/static/v1?label=built%20with&message=sarsaparilla%20%26%20javascript&color=blue" alt="Built with sarsaparilla and javascript"/>
+<a href="https://ko-fi.com/roboleary"><img src="https://img.shields.io/badge/Buy%20me%20a%20coffee-$4-gold?logo=buy-me-a-coffee" alt="Buy me a coffee"></a>
 </p>
 
-<p align="center">
-<img src="img/screenshots/demo.webp" width="556" height="482" alt="recording of  exploring view opened from the command 'Snippets Ranger: Show me that dur Range, Partner'. An entry of 'Markdown snippets' from the table of contents is selected and clicked, it takes the user down to the table with the snippets displayed for that extension."/>
-</p>
+![Screenshot of the view. It shows the user snippets for the markdown language in a table with the columns: prefix, name, description, body and action.](img/screenshots/view-showcase.jpg)
 
-**Snippets are grouped as: *Project*, *User*, *Extension*, and *VS Code*.**
+Snippets are shown in an **easy to read [webview](https://code.visualstudio.com/api/extension-guides/webview)**.
 
-The table of contents facilitates quick navigation to a snippets set. Pressing the <kbd>Home</kbd> key will return you to the table of contents.
+Snippets are formed into posses:
+- ***Project***: These are the snippets contained in the `.vscode` folder of the current workspace,
+- ***User***: These are the global snippet files (`.code-snippets` files) and language snippet files (`.json` files) that you created as an user on your system,
+- ***Extension***: These are the snippets files that are included in extensions you have installed,
+- ***App***: These are the snippets files that are packaged with VS Code.
 
-There are sticky headings to ensure you can browse through long snippet lists without losing context. 🦎🔝
+The extension uses the exact same source files as VS Code does. No double-crossing rattlesnakes! 🐍
 
-You can go to the source snippet file directly with the *View Source File* button. The extension uses **the exact same source files as VS Code does**.
+## Easy navigation
 
-![view source screenshot](img/screenshots/view-source.png)
+There are **sticky headings** to ensure you can browse through long snippet lists without losing context. 🦎🔝
 
-**Editing is a piece of cake**.🍰
+![Demonstration of scrolling through the user snippets section. There are 3 sticky sections: the h2 heading (user snippets), a section with a, h3 heading (markdown.json) and view source button, and the table header.W](img/screenshots/sticky-headers.webp)
 
-![view source screenshot](img/screenshots/edit.png)
+The **table of contents** facilitates quick navigation to a snippets set.
 
-The *Edit* action button will take you to the specific snippet in the source file to perform an edit. The *Delete* action button will delete the snippet straight away.
+![Screenshot of the table of contents for the view.](img/screenshots/toc.webp)
 
-## Activation
+Pressing the <kbd>Home</kbd> key will return you to the table of contents.
 
-The extension is only loaded when one of the commands are executed.
+## Easy editing
+
+You can **open the snippets file with the *View Source File* button** contained in the sticky header for each snippets file listed in the view.
+
+In the table, you can **edit individual snippet with the buttons in each row**:
+- The *Edit* action button (identified by the pen icon) will take you to the specific snippet in the source file to perform an edit.
+- The *Delete* action button (identified by the trash icon) will delete the snippet straight away without opening the file.
+
+![view source screenshot](img/screenshots/action-highlight.webp)
+
+If you are working in code and would like to **quickly add a snippet to a snippets file, you can use the `Snippets Ranger: Add new snippet to snippets file...` command**. It has 3 easy steps:
+1. Select some code (no selection is fine too) and run the command,
+1. Choose an existing snippets file or create a new file from the menu,
+1. The file will be opened with a new snippet. Your selection will be in the `body` field as an array of values. You can tab through the properties to fill each one out.
+
+![using add command](img/screenshots/add-command.png)
 
 ## Commands
 
-The following commands can be run from the Command Palette (`Ctrl+Shift+P`):
+The following commands are available:
 
-1. **`Snippets Ranger: Show me that dur Range, Partner`**: Opens the view that lists all snippets.
-1. **`Snippets Ranger: Add New Snippet`**: Quickly add a new snippet to a snippet file of your choosing.
+1. **`Snippets Ranger: Show me that dur Range, Partner`**: Opens the view that lists all your snippets.
+1. **`Snippets Ranger: Add new snippet to snippets file...`**: Quickly add a new snippet to a snippet file of your choosing. If you have code selected, this selection will be added to the `body` of the snippet. Any dollar signs in the selection will be escaped (preceded by 2 backslashes) to prevent them being interpeted as tab stops.
 
-![add new snippet](img/screenshots/add-new.webp)
+## Activation
+
+The extension is only loaded when one of the commands are executed.
 
 ## Performance
 
-To gather and render approx 6000 snippets sourced from 18 different files, it takes 4.5 seconds on a modestly-specced 4-year old laptop running Ubuntu 18. 🚀
+To gather and render approx 6000 snippets sourced from 18 different files, it takes 4.5 seconds on a modestly-specced laptop running Ubuntu 18. 🚀
 
 ## Contribute
 
-Contributions are welcome. If you have a suggestion or find a bug, please file an issue.
-
-Please do not offer a PR without raising an issue first, my time for reviews are limited. You can [support me](https://ko-fi.com/roboleary) to increase my time available.
-
-## Appreciate
+Contributions are welcome. If you have a suggestion or find a bug, please file an issue. Please do not offer a PR without raising an issue first, my time for reviews are limited.
 
-You can show your appreciation by:
-1. [Buying me a coffee or sponsoring me](https://ko-fi.com/roboleary)
-1. Leaving a positive review in the [visual studio marketplace](https://marketplace.visualstudio.com/items?itemName=robole.snippets-ranger&ssr=false#review-details).
-1. Starring the repo 🌟.
+To help other people find the extension, you can [star the repo 🌟](https://github.com/robole/vscode-snippets-ranger), and leave a positive review in the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=robole.snippets-ranger&ssr=false#review-details) or [Open VSX Registry](https://open-vsx.org/extension/robole/snippets-ranger/reviews).
 
-This will **help other people find the extension**. It will **encourage me to continue maintenance**, and may provide **a path to dedicating more time to open-source** in the future.
+You can [support me](https://ko-fi.com/roboleary) to make issues in this project a higher priority and allow me to dedicate more time I can dedicate to open-source projects.
 
 ## Learn more about snippets
 

jsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es6",
-    "checkJs": true /* Typecheck .js files. */,
+    "checkJs": false /* Typecheck .js files. */,
     "lib": ["es6"]
   },
   "exclude": ["node_modules", "dist"]

package.json

@@ -7,7 +7,7 @@
   },
   "description": "View and edit all your snippets in one purty place. Yee-haw!",
   "icon": "img/logo.png",
-  "version": "0.25.2",
+  "version": "1.0.0",
   "engines": {
     "vscode": "^1.4.0",
     "node": ">=12.0.0"
@@ -90,7 +90,7 @@
     "onCommand:snippets-ranger.show",
     "onCommand:snippets-ranger.add"
   ],
-  "main": "./dist/extension.js",
+  "main": "./dist/main.js",
   "contributes": {
     "commands": [
       {
@@ -100,7 +100,7 @@
       },
       {
         "command": "snippets-ranger.add",
-        "title": "Add New Snippet",
+        "title": "Add new snippet to snippets file...",
         "category": "Snippets Ranger"
       }
     ]

script/main.js

@@ -3,31 +3,6 @@
 let script = (function () {
   const vscode = acquireVsCodeApi();
 
-  let toTopLink = document.getElementById("toTopLink");
-  let debounceTimer;
-
-  window.onscroll = function () {
-    if (debounceTimer) {
-      window.clearTimeout(debounceTimer);
-    }
-    debounceTimer = window.setTimeout(() => {
-      showToTopLink();
-    }, 100);
-  };
-
-  function showToTopLink() {
-    let gap = 750;
-
-    if (
-      document.body.scrollTop > gap ||
-      document.documentElement.scrollTop > gap
-    ) {
-      toTopLink.style.display = "block";
-    } else {
-      toTopLink.style.display = "none";
-    }
-  }
-
   let openFile = function (path) {
     vscode.postMessage({
       command: "openSnippetFile",
@@ -43,7 +18,7 @@ let script = (function () {
     });
   };
 
-  let deleteSnippet = function (path, snippetName, rowIndex) {
+  let deleteSnippet = function (path, snippetName) {
     vscode.postMessage({
       command: "deleteSnippet",
       path,
@@ -52,7 +27,7 @@ let script = (function () {
 
     let decodedPath = decodeURIComponent(path);
     let row = document.querySelector(
-      `table[data-path='${decodedPath}'] tbody tr:nth-child(${rowIndex})`
+      `table[data-path='${decodedPath}'] tbody tr[data-name='${snippetName}']`
     );
 
     if (row !== null) {