add: new languages

.gitignore

@@ -1,7 +1,6 @@
 docs/.vitepress/dist
 docs/.vitepress/cache
-src/components/generate-icons/**
-src/components/generate-prism-languages/**
+src/components/generate-icons/icons/
 # Logs
 logs
 *.log

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "private": false,
   "name": "vuejs-code-block",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue 3 component of unstyled UI components to build powerful code blocks.",
   "author": {
     "name": "Ebraheem Alhetari",

src/components/generate-icons/index.js

@@ -0,0 +1,94 @@
+import { readdir, copyFile, mkdir } from 'node:fs/promises';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const iconsPath = join(__dirname, './icons');
+const outputFolder = join(__dirname, '../icons');
+
+const iconsToBundle = [
+  'plain',
+  'plaintext',
+  'text',
+  'txt',
+  'extend',
+  'insertBefore',
+  'DFS',
+  'markup',
+  'html',
+  'mathml',
+  'svg',
+  'xml',
+  'ssml',
+  'atom',
+  'rss',
+  'css',
+  'clike',
+  'javascript',
+  'js',
+  'regex',
+  'actionscript',
+  'coffeescript',
+  'coffee',
+  'javadoclike',
+  'yaml',
+  'yml',
+  'markdown',
+  'md',
+  'graphql',
+  'typescript',
+  'ts',
+  'jsdoc',
+  'flow',
+  'n4js',
+  'n4jsd',
+  'jsx',
+  'tsx',
+  'swift',
+  'kotlin',
+  'kt',
+  'kts',
+  'c',
+  'objectivec',
+  'objc',
+  'reason',
+  'rust',
+  'go',
+  'cpp',
+  'python',
+  'py',
+  'webmanifest',
+  'java',
+  'json',
+  'php',
+  'SQL',
+  'cucumber',
+  'console'
+];
+
+async function copyIcons() {
+  try {
+    await mkdir(outputFolder, { recursive: true });
+    // Read all the icons from the source directory
+    const icons = await readdir(iconsPath);
+
+    for (const icon of icons) {
+      if (iconsToBundle.some((ext) => icon.startsWith(`${ext}.svg`))) {
+        const sourcePath = join(iconsPath, icon);
+        const destinationPath = join(outputFolder, icon);
+
+        await copyFile(sourcePath, destinationPath);
+        console.log(`Copied: ${icon}`);
+      }
+    }
+
+    console.log(`All icons copied successfully to ${outputFolder}`);
+  } catch (err) {
+    console.error(`Error copying icons: ${err}`);
+  }
+}
+
+// Run the copy function
+copyIcons();

src/components/generate-prism-languages/index.ts

@@ -1,109 +1,113 @@
-// // This code is from prism-react-renderer:
-// // https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts
-// // Thanks @FormidableLabs.
+// This code is from prism-react-renderer:
+// https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts
+// Thanks @FormidableLabs.
 
-// // @ts-ignore
-// import flowRight from 'lodash.flowright';
-// import * as pc from 'picocolors';
-// import { readFile, writeFile, access } from 'node:fs/promises';
-// import { constants } from 'node:fs';
-// import { join, dirname } from 'node:path';
-// import { languages as prismLanguages } from 'prismjs/components';
-// import * as uglify from 'uglify-js';
+// @ts-ignore
+import flowRight from 'lodash.flowright';
+import * as pc from 'picocolors';
+import { readFile, writeFile, access } from 'node:fs/promises';
+import { constants } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { languages as prismLanguages } from 'prismjs/components';
+import * as uglify from 'uglify-js';
 
-// export const languagesToBundle = <const>[
-//   'vue',
-//   'jsx',
-//   'tsx',
-//   'swift',
-//   'kotlin',
-//   'java',
-//   'objectivec',
-//   'javascript',
-//   'rust',
-//   'graphql',
-//   'yaml',
-//   'go',
-//   'cpp',
-//   'c',
-//   'markdown',
-//   'python',
-//   'json'
-// ];
+export const languagesToBundle = <const>[
+  'vue',
+  'jsx',
+  'tsx',
+  'swift',
+  'kotlin',
+  'java',
+  'objectivec',
+  'javascript',
+  'rust',
+  'graphql',
+  'yaml',
+  'go',
+  'cpp',
+  'c',
+  'markdown',
+  'python',
+  'json',
+  'php',
+  'SQL',
+  'gherkin',
+  'bash'
+];
 
-// /**
-//  * We need to disable typechecking on this generated file as it's just concatenating JS code
-//  * that starts off assuming Prism lives in global scope. We also need to provide Prism as that
-//  * gets passed into an iffe preventing us from needing to use global scope.
-//  */
-// const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport * as Prism from "prismjs";\nexport { Prism };`;
-// const prismPath = dirname(require.resolve('prismjs'));
+/**
+ * We need to disable typechecking on this generated file as it's just concatenating JS code
+ * that starts off assuming Prism lives in global scope. We also need to provide Prism as that
+ * gets passed into an iffe preventing us from needing to use global scope.
+ */
+const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport * as Prism from "prismjs";\nexport { Prism };`;
+const prismPath = dirname(require.resolve('prismjs'));
 
-// const readLanguageFile = async (language: string): Promise<string> => {
-//   const pathToLanguage = join(prismPath, `components/prism-${language}.js`);
-//   await access(pathToLanguage, constants.R_OK);
-//   const buffer = await readFile(pathToLanguage, { encoding: 'utf-8' });
-//   return buffer.toString();
-// };
+const readLanguageFile = async (language: string): Promise<string> => {
+  const pathToLanguage = join(prismPath, `components/prism-${language}.js`);
+  await access(pathToLanguage, constants.R_OK);
+  const buffer = await readFile(pathToLanguage, { encoding: 'utf-8' });
+  return buffer.toString();
+};
 
-// const strArrayFromUnknown = (input: unknown) => (array: string[]) => {
-//   if (typeof input === 'string') array.push(input);
-//   else if (Array.isArray(input)) array = array.concat(input);
-//   return array;
-// };
+const strArrayFromUnknown = (input: unknown) => (array: string[]) => {
+  if (typeof input === 'string') array.push(input);
+  else if (Array.isArray(input)) array = array.concat(input);
+  return array;
+};
 
-// const main = async () => {
-//   let output = '';
-//   const bundledLanguages = new Set<keyof typeof prismLanguages>();
-//   const orderBundled = new Set<keyof typeof prismLanguages>();
-//   const outputPath = join(__dirname, '../prism-langs.ts');
+const main = async () => {
+  let output = '';
+  const bundledLanguages = new Set<keyof typeof prismLanguages>();
+  const orderBundled = new Set<keyof typeof prismLanguages>();
+  const outputPath = join(__dirname, '../prism-langs.ts');
 
-//   const addLanguageToOutput = async (language?: string) => {
-//     if (bundledLanguages.has(language)) {
-//       return;
-//     }
-//     if (language == null || prismLanguages[language] == null) {
-//       return;
-//     }
-//     bundledLanguages.add(language);
+  const addLanguageToOutput = async (language?: string) => {
+    if (bundledLanguages.has(language)) {
+      return;
+    }
+    if (language == null || prismLanguages[language] == null) {
+      return;
+    }
+    bundledLanguages.add(language);
 
-//     /**
-//      * We need to ensure any language dependencies are bundled first
-//      */
-//     const prismLang = prismLanguages[language];
-//     const deps = flowRight(
-//       strArrayFromUnknown(prismLang.require),
-//       strArrayFromUnknown(prismLang.optional)
-//     )([]);
-//     const peerDeps = strArrayFromUnknown(prismLang.peerDependencies)([]);
+    /**
+     * We need to ensure any language dependencies are bundled first
+     */
+    const prismLang = prismLanguages[language];
+    const deps = flowRight(
+      strArrayFromUnknown(prismLang.require),
+      strArrayFromUnknown(prismLang.optional)
+    )([]);
+    const peerDeps = strArrayFromUnknown(prismLang.peerDependencies)([]);
 
-//     for await (const language of deps) {
-//       await addLanguageToOutput(language);
-//     }
+    for await (const language of deps) {
+      await addLanguageToOutput(language);
+    }
 
-//     output += await readLanguageFile(language);
-//     orderBundled.add(language);
+    output += await readLanguageFile(language);
+    orderBundled.add(language);
 
-//     for await (const language of peerDeps) {
-//       await addLanguageToOutput(language);
-//     }
-//   };
+    for await (const language of peerDeps) {
+      await addLanguageToOutput(language);
+    }
+  };
 
-//   for await (const language of languagesToBundle) {
-//     await addLanguageToOutput(language);
-//   }
+  for await (const language of languagesToBundle) {
+    await addLanguageToOutput(language);
+  }
 
-//   console.info(pc.bold(pc.bgYellow(pc.black('Prism Renderer'))), '\n');
-//   console.info(
-//     pc.bgBlue(`Generated TypeScript output at:`),
-//     pc.cyan(outputPath)
-//   );
-//   console.info(
-//     pc.bgGreen(`Included language definitions in the following order:`),
-//     Array.from(orderBundled.values()).join(', ')
-//   );
+  console.info(pc.bold(pc.bgYellow(pc.black('Prism Renderer'))), '\n');
+  console.info(
+    pc.bgBlue(`Generated TypeScript output at:`),
+    pc.cyan(outputPath)
+  );
+  console.info(
+    pc.bgGreen(`Included language definitions in the following order:`),
+    Array.from(orderBundled.values()).join(', ')
+  );
 
-//   await writeFile(outputPath, header + uglify.minify(output).code);
-// };
+  await writeFile(outputPath, header + uglify.minify(output).code);
+};
 
-// main();
+main();

src/components/icons/index.ts

@@ -26,7 +26,10 @@ const aliasMap: Record<string, string> = {
   text: 'document',
   webmanifest: 'json',
   xml: 'markup',
-  yml: 'yaml'
+  yml: 'yaml',
+  bash: 'console',
+  shell: 'console',
+  gherkin: 'cucumber'
 };
 
 export const icons = Object.fromEntries(

src/types/code-block.d.ts

@@ -83,7 +83,12 @@ declare module 'code-block' {
     | 'webmanifest'
     | 'xml'
     | 'yaml'
-    | 'yml';
+    | 'yml'
+    | 'php'
+    | 'SQL'
+    | 'gherkin'
+    | 'bash'
+    | 'shell';
 
   const CodeBlockType: DefineComponent<CodeBlockProps>;
   export {

tsconfig.json

@@ -19,6 +19,7 @@
   "exclude": [
     "node_modules",
     "dist",
-    "/src/components/generate-prism-languages/**"
+    "src/components/generate-prism-languages",
+    "src/components/generate-icons"
   ]
 }

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/main.ts","./src/vite-env.d.ts","./src/components/components.ts","./src/components/index.ts","./src/components/prism-langs.ts","./src/components/utils.ts","./src/components/code-block/index.ts","./src/components/code-block/types.ts","./src/components/code-block/use-code-block.ts","./src/components/generate-prism-languages/index.ts","./src/components/icons/index.ts","./src/components/themes/index.ts","./src/types/code-block.d.ts","./src/App.vue","./src/components/code-block/CodeBlock.vue"],"version":"5.6.2"}
+{"root":["./src/index.ts","./src/main.ts","./src/vite-env.d.ts","./src/components/components.ts","./src/components/index.ts","./src/components/prism-langs.ts","./src/components/utils.ts","./src/components/code-block/index.ts","./src/components/code-block/types.ts","./src/components/code-block/use-code-block.ts","./src/components/icons/index.ts","./src/components/themes/index.ts","./src/types/code-block.d.ts","./src/App.vue","./src/components/code-block/CodeBlock.vue"],"version":"5.6.2"}