diff --git a/README.md b/README.md index 682c63d..7d23cea 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@
- 🚧 *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 - +
@@ -180,7 +180,7 @@ const [$0] = ${1:array} ### Flow control -
Prefix
+
@@ -368,7 +368,7 @@ try { ### Functions -
Prefix
+
@@ -497,7 +497,7 @@ async ($1) => { ### Loops -
Prefix
+
@@ -606,7 +606,7 @@ while (${1:true}) { ### Classes -
Prefix
+
@@ -762,7 +762,7 @@ async ${1:name}($2) { ### Promises -
Prefix
+
@@ -907,7 +907,7 @@ Promise.any($1) ### Modules -
Prefix
+
@@ -1102,7 +1102,7 @@ export const ${1:name} = ($2) => {$0} ### Array methods -
Prefix
+
@@ -1263,7 +1263,7 @@ $1.filter(Boolean) ### Objects -
Prefix
+
@@ -1322,7 +1322,7 @@ Object.values($0) ### Returns -
Prefix
+
@@ -1371,7 +1371,7 @@ return ({$0}) ### Operators, Expressions, Literals Grouping them all together for now -
Prefix
+
@@ -1610,7 +1610,7 @@ ${$1}$0 ### Console -
Prefix
+
@@ -1791,7 +1791,7 @@ console.warn('$1 ->', ${2:$1}) ### Timers -
Prefix
+
@@ -1858,7 +1858,7 @@ process.nextTick(() => { ### JSON -
Prefix
+
@@ -1917,7 +1917,7 @@ typeof ${1:value} === 'string' ? value : JSON.stringify($1) ### DOM -
Prefix
+
@@ -2014,7 +2014,7 @@ ${1:emitter}.on('${2:event}', (${3:arguments}) => { ### Dates -
Prefix
+
@@ -2049,7 +2049,7 @@ Date.now() ### Testing -
Prefix
+
@@ -2187,7 +2187,7 @@ afterEach(() => { ### Types -
Prefix
+
@@ -2282,7 +2282,7 @@ isNan($0) ### Misc -
Prefix
+
@@ -2353,7 +2353,7 @@ import.meta.env.$0 ### Uncategorized Will be sorted into appropriate categories in the future. -
Prefix
+
@@ -2452,7 +2452,7 @@ Available only in .ts and .tsx files ### Declarations -
Prefix
+
@@ -2511,7 +2511,7 @@ const $1: ${2:object} = { $0 } ### Types -
Prefix
+
diff --git a/package.json b/package.json index 9cf7bea..f346c06 100644 --- 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 index bc073eb..6892f01 100644 --- 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 index 130a737..2287c11 100644 --- 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,22 +35,22 @@ 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); @@ -58,7 +58,7 @@ const generateVariantSection = (variant: XSnippetVariant) => { 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 index 22cdf77..21b6e78 100644 --- 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([ - "
Prefix
", + '
', $headerRow(headings), joinByNewLine(rows), "
", diff --git a/src/docs-gen/table-md.ts b/src/docs-gen/table-md.ts deleted file mode 100644 index f178231..0000000 --- a/src/docs-gen/table-md.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { markdownTable } from "../deps.ts"; -import { VscSnippetDefinition, VscSnippetDict } from "../models/app.ts"; -import { replaceSymbol } from "../utils/general.ts"; - -export const code = (str: string) => `\`${str}\``; - -export const serializeForMarkdown = (str: string) => { - if (str.includes("\n")) { - return str - .replace(/`/, "") - .replace(/`/, "") - .replace(/\n/g, "
") - .replace(/\t/g, "  ") - .replace(/\|/g, "\\|"); - } - // TODO: don't remove | when it is in code block - // but it differs for every .md implementation - return str.replace(/\|/g, "\\|"); -}; - -export const generateMarkdownTable = (input: VscSnippetDict) => { - const header = ["Prefix", "Description", "Body"]; - - const parseMultiLine = (input: string | string[]) => - Array.isArray(input) ? input.join("\n") : input; - - const rows = Object.entries(input) - .map(([name, { prefix, body }]) => { - const row = [ - code(prefix as string), - replaceSymbol(name), - code(parseMultiLine(body)), - ]; - const serializedRow = row.map(serializeForMarkdown); - return serializedRow; - }); - - return markdownTable([header, ...rows]); -}; - -export const logTables = ( - language: string, - snippetsWithMeta: VscSnippetDefinition[], -) => { - console.log(`## ${language}`); - snippetsWithMeta.forEach(({ snippets, meta }) => { - console.log(`### ${meta.title}`); - if (meta.description) { - console.log(meta.description); - } - console.log(generateMarkdownTable(snippets)); - console.log("\n"); - }); -}; diff --git a/src/models/app.ts b/src/models/app.ts index e9ec6ce..8711d45 100644 --- a/src/models/app.ts +++ b/src/models/app.ts @@ -8,22 +8,25 @@ export type VscSnippetDict = Record; export type XSnippet = Omit & { name: string }; export type XSnippetDict = Record; -export type XSnippetMeta = { +export type SnippetMeta = { title: string; description?: string; }; -export type GenericSnippetDictWithMeta = { - meta: XSnippetMeta; +export type SnippetDefinition = { + meta: SnippetMeta; snippets: T; }; -export type XSnippetDefinition = GenericSnippetDictWithMeta; -export type VscSnippetDefinition = GenericSnippetDictWithMeta; +export type XSnippetDefinition = SnippetDefinition; +export type VscSnippetDefinition = SnippetDefinition; -export type XSnippetVariant = { +export type SnippetVariant = { label: string; description?: string; language: string; fileExtension: string; - snippetDefinitions: XSnippetDefinition[]; + snippetDefinitions: T[]; }; + +export type XSnippetVariant = SnippetVariant; +export type VscSnippetVariant = SnippetVariant; diff --git a/src/snippets/app.ts b/src/snippets/app.ts index d223957..338b327 100644 --- a/src/snippets/app.ts +++ b/src/snippets/app.ts @@ -2,7 +2,7 @@ import { XSnippetVariant } from "../models/app.ts"; import { javascript } from "./js/app.ts"; import { typescript } from "./ts/app.ts"; -export const languages: XSnippetVariant[] = [ +export const variants: XSnippetVariant[] = [ { label: "Snippets", language: "javascript", diff --git a/src/utils/general.ts b/src/utils/general.ts index b6d7a1a..156a5a1 100644 --- a/src/utils/general.ts +++ b/src/utils/general.ts @@ -2,3 +2,7 @@ const SYMBOL = "âš¡"; export const replaceSymbol = (str: string) => str.replace(` ${SYMBOL}`, ""); export const addSymbol = (str: string) => `${str} ${SYMBOL}`; + +export const parseMultiline = (s: string | string[]) => { + return Array.isArray(s) ? s.join("\n") : s; +}; diff --git a/src/utils/snippets.ts b/src/utils/snippets.ts index 4cb3219..a43d6ed 100644 --- a/src/utils/snippets.ts +++ b/src/utils/snippets.ts @@ -1,11 +1,11 @@ import { ensureDirSync } from "../deps.ts"; -import { VscSnippet, VscSnippetDict, XSnippetDict } from "../models/app.ts"; +import { VscSnippetDict, XSnippetDict } from "../models/app.ts"; import { addSymbol } from "./general.ts"; export const convertToVscSnippet = (snippets: XSnippetDict) => { return Object.entries(snippets) .reduce((acc, [prefix, { name, body }]) => { - acc[addSymbol(name)] = { prefix, body } as VscSnippet; + acc[addSymbol(name)] = { prefix, body }; return acc; }, {} as VscSnippetDict); };