matijaoe · matijaoe · Dec 28, 2022 · Dec 28, 2022 · Dec 28, 2022
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 <br>
 
-  🚧 *Still a work in progress. Some snippets may be changed or removed, and many more will be added.*
+  🚧 *Still a work in progress. Some snippets may be changed or removed, and more will be added.*
 
 ## Features
 - Contains over **180** snippets
@@ -61,7 +61,7 @@ It's highly recommended to use these snippets along with Prettier/ESLint to have
 
 ### Assignments
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -180,7 +180,7 @@ const [$0] = ${1:array}
 
 ### Flow control
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -368,7 +368,7 @@ try {
 
 ### Functions
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -497,7 +497,7 @@ async ($1) => {
 
 ### Loops
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -606,7 +606,7 @@ while (${1:true}) {
 
 ### Classes
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -762,7 +762,7 @@ async ${1:name}($2) {
 
 ### Promises
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -907,7 +907,7 @@ Promise.any($1)
 
 ### Modules
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1102,7 +1102,7 @@ export const ${1:name} = ($2) => {$0}
 
 ### Array methods
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1263,7 +1263,7 @@ $1.filter(Boolean)
 
 ### Objects
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1322,7 +1322,7 @@ Object.values($0)
 
 ### Returns
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1371,7 +1371,7 @@ return ({$0})
 
 ### Operators, Expressions, Literals
 Grouping them all together for now
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1610,7 +1610,7 @@ ${$1}$0
 
 ### Console
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1791,7 +1791,7 @@ console.warn('$1 ->', ${2:$1})
 
 ### Timers
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1858,7 +1858,7 @@ process.nextTick(() => {
 
 ### JSON
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -1917,7 +1917,7 @@ typeof ${1:value} === 'string' ? value : JSON.stringify($1)
 
 ### DOM
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2014,7 +2014,7 @@ ${1:emitter}.on('${2:event}', (${3:arguments}) => {
 
 ### Dates
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2049,7 +2049,7 @@ Date.now()
 
 ### Testing
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2187,7 +2187,7 @@ afterEach(() => {
 
 ### Types
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2282,7 +2282,7 @@ isNan($0)
 
 ### Misc
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2353,7 +2353,7 @@ import.meta.env.$0
 
 ### Uncategorized
 Will be sorted into appropriate categories in the future.
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2452,7 +2452,7 @@ Available only in .ts and .tsx files
 
 ### Declarations
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>
@@ -2511,7 +2511,7 @@ const $1: ${2:object} = { $0 }
 
 ### Types
 
-<table>
+<table width="100%">
 
 <tr>
 <td>Prefix</td>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "modern-js-snippets",
   "displayName": "Modern JavaScript Snippets ⚡",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "MIT",
   "description": "Code snippets for modern JavaScript & TypeScript",
   "icon": "assets/icon.png",

diff --git a/src/app.ts b/src/app.ts
@@ -1,43 +1,53 @@
 import { parse } from "./deps.ts";
 import { generateDocs, populateDocsBlock } from "./docs-gen/snippets.ts";
-import { languages } from "./snippets/app.ts";
+import { variants } from "./snippets/app.ts";
 import {
   convertToVscSnippet,
   generateSnippets,
   groupSnippets,
 } from "./utils/snippets.ts";
 
-const flags = parse(Deno.args, {
-  boolean: ["snippets", "docs"],
-  default: { snippets: false, docs: false },
-});
+const main = () => {
+  const flags = parse(Deno.args, {
+    boolean: ["snippets", "docs"],
+    default: { snippets: false, docs: false },
+  });
+
+  if (!flags.snippets && !flags.docs) {
+    return console.log(
+      "Please specify at least one flag: --snippets or --docs",
+    );
+  }
+
+  // Convert XDefinitions to VscDefinitions, for every variant
+  const variantsAsVsc = variants.map((variant) => {
+    const snippetDefinitions = variant.snippetDefinitions
+      .map((def) => ({
+        ...def,
+        snippets: convertToVscSnippet(def.snippets),
+      }));
+
+    return { ...variant, snippetDefinitions };
+  });
 
-if (!flags.snippets && !flags.docs) {
-  console.log("Please specify at least one flag: --snippets or --docs");
-} else {
   if (flags.snippets) {
     console.log("\nGenerating snippets...");
-    languages.forEach((language) => {
-      const categorizedVscSnippets = language
-        .snippetDefinitions.map(
-          (item) => {
-            const snippets = convertToVscSnippet(item.snippets);
-            return { ...item, snippets };
-          },
-        );
-
-      const variantVscSnippet = groupSnippets(
-        categorizedVscSnippets.map((item) => item.snippets),
+
+    variantsAsVsc.forEach((variant) => {
+      const vscSnippetDict = groupSnippets(
+        variant.snippetDefinitions.map((def) => def.snippets),
       );
-      generateSnippets(language.fileExtension, variantVscSnippet);
+      generateSnippets(variant.fileExtension, vscSnippetDict);
     });
   }
 
-  // TODO: probably better to make it generate from vsc json
-  // pass in meta, and snippets converted to vsc format
+  // important to know it generates docs off of defined xSnippets
+  // so .code-snippets could be out of date if you haven't run --snippets
   if (flags.docs) {
     console.log("\nGenerating docs...");
-    const docs = generateDocs(languages);
+    const docs = generateDocs(variantsAsVsc);
     populateDocsBlock(docs);
   }
-}
+};
+
+main();
diff --git a/src/docs-gen/snippets.ts b/src/docs-gen/snippets.ts
@@ -1,5 +1,6 @@
 import { replaceInFile } from "../deps.ts";
-import { XSnippetDefinition, XSnippetVariant } from "../models/app.ts";
+import { VscSnippetDefinition, VscSnippetVariant } from "../models/app.ts";
+import { parseMultiline, replaceSymbol } from "../utils/general.ts";
 import {
   $col,
   $colCode,
@@ -18,11 +19,10 @@ type SnippetRow = {
 };
 
 const snippetRow = ({ prefix, name, body }: SnippetRow) => {
-  const parsedBody = Array.isArray(body) ? body.join("\n") : body;
   const cols = joinByNewLine([
     $colCode(prefix),
     $col(name),
-    $colCodeBlock(parsedBody),
+    $colCodeBlock(parseMultiline(body)),
   ]);
 
   return $row(cols);
@@ -35,30 +35,30 @@ const generateSnippetTable = (items: SnippetRow[]) => {
   return $table(headings, rows);
 };
 
-const generateSnippetSection = (
-  { meta, snippets }: XSnippetDefinition,
-) => {
+const generateSnippetSection = ({ meta, snippets }: VscSnippetDefinition) => {
   const title = `### ${meta.title}`;
   const description = meta.description ?? "";
   const table = generateSnippetTable(
-    Object.entries(snippets).map(([prefix, value]) => ({
-      ...value,
-      prefix,
+    Object.entries(snippets).map(([name, { body, prefix, description }]) => ({
+      name: replaceSymbol(name),
+      body,
+      prefix: parseMultiline(prefix),
+      description,
     })),
   );
 
   return joinByNewLine([title, description, table, ""]);
 };
 
-const generateVariantSection = (variant: XSnippetVariant) => {
+const generateVariantSection = (variant: VscSnippetVariant) => {
   const title = `## ${variant.label}`;
   const description = variant.description ?? "";
   const sections = variant.snippetDefinitions.map(generateSnippetSection);
 
   return joinByNewLine([title, description, "", ...sections]);
 };
 
-export const generateDocs = (variants: XSnippetVariant[]) => {
+export const generateDocs = (variants: VscSnippetVariant[]) => {
   return joinByDoubleNewLine(variants.map(generateVariantSection));
 };
 

diff --git a/src/docs-gen/table-html.ts b/src/docs-gen/table-html.ts
@@ -38,7 +38,7 @@ export const $headerRow = (headers: string[]) => {
 
 export const $table = (headings: string[], rows: string[]) => {
   return joinByNewLine([
-    "<table>",
+    '<table width="100%">',
     $headerRow(headings),
     joinByNewLine(rows),
     "</table>",