Skip to content

Commit f3c159b

Browse files
HetariHetari
committed
add: new languages
1 parent de18609 commit f3c159b

File tree

12 files changed

+211
-102
lines changed

12 files changed

+211
-102
lines changed

‎.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
docs/.vitepress/dist
22
docs/.vitepress/cache
3-
src/components/generate-icons/**
4-
src/components/generate-prism-languages/**
3+
src/components/generate-icons/icons/
54
# Logs
65
logs
76
*.log

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"type": "module",
33
"private": false,
44
"name": "vuejs-code-block",
5-
"version": "1.0.0",
5+
"version": "1.0.1",
66
"description": "A Vue 3 component of unstyled UI components to build powerful code blocks.",
77
"author": {
88
"name": "Ebraheem Alhetari",

‎src/components/generate-icons/index.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { readdir, copyFile, mkdir } from 'node:fs/promises';
2+
import { join, dirname } from 'node:path';
3+
import { fileURLToPath } from 'node:url';
4+
5+
const __filename = fileURLToPath(import.meta.url);
6+
const __dirname = dirname(__filename);
7+
8+
const iconsPath = join(__dirname, './icons');
9+
const outputFolder = join(__dirname, '../icons');
10+
11+
const iconsToBundle = [
12+
'plain',
13+
'plaintext',
14+
'text',
15+
'txt',
16+
'extend',
17+
'insertBefore',
18+
'DFS',
19+
'markup',
20+
'html',
21+
'mathml',
22+
'svg',
23+
'xml',
24+
'ssml',
25+
'atom',
26+
'rss',
27+
'css',
28+
'clike',
29+
'javascript',
30+
'js',
31+
'regex',
32+
'actionscript',
33+
'coffeescript',
34+
'coffee',
35+
'javadoclike',
36+
'yaml',
37+
'yml',
38+
'markdown',
39+
'md',
40+
'graphql',
41+
'typescript',
42+
'ts',
43+
'jsdoc',
44+
'flow',
45+
'n4js',
46+
'n4jsd',
47+
'jsx',
48+
'tsx',
49+
'swift',
50+
'kotlin',
51+
'kt',
52+
'kts',
53+
'c',
54+
'objectivec',
55+
'objc',
56+
'reason',
57+
'rust',
58+
'go',
59+
'cpp',
60+
'python',
61+
'py',
62+
'webmanifest',
63+
'java',
64+
'json',
65+
'php',
66+
'SQL',
67+
'cucumber',
68+
'console'
69+
];
70+
71+
async function copyIcons() {
72+
try {
73+
await mkdir(outputFolder, { recursive: true });
74+
// Read all the icons from the source directory
75+
const icons = await readdir(iconsPath);
76+
77+
for (const icon of icons) {
78+
if (iconsToBundle.some((ext) => icon.startsWith(`${ext}.svg`))) {
79+
const sourcePath = join(iconsPath, icon);
80+
const destinationPath = join(outputFolder, icon);
81+
82+
await copyFile(sourcePath, destinationPath);
83+
console.log(`Copied: ${icon}`);
84+
}
85+
}
86+
87+
console.log(`All icons copied successfully to ${outputFolder}`);
88+
} catch (err) {
89+
console.error(`Error copying icons: ${err}`);
90+
}
91+
}
92+
93+
// Run the copy function
94+
copyIcons();

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

+98-94
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,113 @@
1-
// // This code is from prism-react-renderer:
2-
// // https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts
3-
// // Thanks @FormidableLabs.
1+
// This code is from prism-react-renderer:
2+
// https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts
3+
// Thanks @FormidableLabs.
44

5-
// // @ts-ignore
6-
// import flowRight from 'lodash.flowright';
7-
// import * as pc from 'picocolors';
8-
// import { readFile, writeFile, access } from 'node:fs/promises';
9-
// import { constants } from 'node:fs';
10-
// import { join, dirname } from 'node:path';
11-
// import { languages as prismLanguages } from 'prismjs/components';
12-
// import * as uglify from 'uglify-js';
5+
// @ts-ignore
6+
import flowRight from 'lodash.flowright';
7+
import * as pc from 'picocolors';
8+
import { readFile, writeFile, access } from 'node:fs/promises';
9+
import { constants } from 'node:fs';
10+
import { join, dirname } from 'node:path';
11+
import { languages as prismLanguages } from 'prismjs/components';
12+
import * as uglify from 'uglify-js';
1313

14-
// export const languagesToBundle = <const>[
15-
// 'vue',
16-
// 'jsx',
17-
// 'tsx',
18-
// 'swift',
19-
// 'kotlin',
20-
// 'java',
21-
// 'objectivec',
22-
// 'javascript',
23-
// 'rust',
24-
// 'graphql',
25-
// 'yaml',
26-
// 'go',
27-
// 'cpp',
28-
// 'c',
29-
// 'markdown',
30-
// 'python',
31-
// 'json'
32-
// ];
14+
export const languagesToBundle = <const>[
15+
'vue',
16+
'jsx',
17+
'tsx',
18+
'swift',
19+
'kotlin',
20+
'java',
21+
'objectivec',
22+
'javascript',
23+
'rust',
24+
'graphql',
25+
'yaml',
26+
'go',
27+
'cpp',
28+
'c',
29+
'markdown',
30+
'python',
31+
'json',
32+
'php',
33+
'SQL',
34+
'gherkin',
35+
'bash'
36+
];
3337

34-
// /**
35-
// * We need to disable typechecking on this generated file as it's just concatenating JS code
36-
// * that starts off assuming Prism lives in global scope. We also need to provide Prism as that
37-
// * gets passed into an iffe preventing us from needing to use global scope.
38-
// */
39-
// const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport * as Prism from "prismjs";\nexport { Prism };`;
40-
// const prismPath = dirname(require.resolve('prismjs'));
38+
/**
39+
* We need to disable typechecking on this generated file as it's just concatenating JS code
40+
* that starts off assuming Prism lives in global scope. We also need to provide Prism as that
41+
* gets passed into an iffe preventing us from needing to use global scope.
42+
*/
43+
const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport * as Prism from "prismjs";\nexport { Prism };`;
44+
const prismPath = dirname(require.resolve('prismjs'));
4145

42-
// const readLanguageFile = async (language: string): Promise<string> => {
43-
// const pathToLanguage = join(prismPath, `components/prism-${language}.js`);
44-
// await access(pathToLanguage, constants.R_OK);
45-
// const buffer = await readFile(pathToLanguage, { encoding: 'utf-8' });
46-
// return buffer.toString();
47-
// };
46+
const readLanguageFile = async (language: string): Promise<string> => {
47+
const pathToLanguage = join(prismPath, `components/prism-${language}.js`);
48+
await access(pathToLanguage, constants.R_OK);
49+
const buffer = await readFile(pathToLanguage, { encoding: 'utf-8' });
50+
return buffer.toString();
51+
};
4852

49-
// const strArrayFromUnknown = (input: unknown) => (array: string[]) => {
50-
// if (typeof input === 'string') array.push(input);
51-
// else if (Array.isArray(input)) array = array.concat(input);
52-
// return array;
53-
// };
53+
const strArrayFromUnknown = (input: unknown) => (array: string[]) => {
54+
if (typeof input === 'string') array.push(input);
55+
else if (Array.isArray(input)) array = array.concat(input);
56+
return array;
57+
};
5458

55-
// const main = async () => {
56-
// let output = '';
57-
// const bundledLanguages = new Set<keyof typeof prismLanguages>();
58-
// const orderBundled = new Set<keyof typeof prismLanguages>();
59-
// const outputPath = join(__dirname, '../prism-langs.ts');
59+
const main = async () => {
60+
let output = '';
61+
const bundledLanguages = new Set<keyof typeof prismLanguages>();
62+
const orderBundled = new Set<keyof typeof prismLanguages>();
63+
const outputPath = join(__dirname, '../prism-langs.ts');
6064

61-
// const addLanguageToOutput = async (language?: string) => {
62-
// if (bundledLanguages.has(language)) {
63-
// return;
64-
// }
65-
// if (language == null || prismLanguages[language] == null) {
66-
// return;
67-
// }
68-
// bundledLanguages.add(language);
65+
const addLanguageToOutput = async (language?: string) => {
66+
if (bundledLanguages.has(language)) {
67+
return;
68+
}
69+
if (language == null || prismLanguages[language] == null) {
70+
return;
71+
}
72+
bundledLanguages.add(language);
6973

70-
// /**
71-
// * We need to ensure any language dependencies are bundled first
72-
// */
73-
// const prismLang = prismLanguages[language];
74-
// const deps = flowRight(
75-
// strArrayFromUnknown(prismLang.require),
76-
// strArrayFromUnknown(prismLang.optional)
77-
// )([]);
78-
// const peerDeps = strArrayFromUnknown(prismLang.peerDependencies)([]);
74+
/**
75+
* We need to ensure any language dependencies are bundled first
76+
*/
77+
const prismLang = prismLanguages[language];
78+
const deps = flowRight(
79+
strArrayFromUnknown(prismLang.require),
80+
strArrayFromUnknown(prismLang.optional)
81+
)([]);
82+
const peerDeps = strArrayFromUnknown(prismLang.peerDependencies)([]);
7983

80-
// for await (const language of deps) {
81-
// await addLanguageToOutput(language);
82-
// }
84+
for await (const language of deps) {
85+
await addLanguageToOutput(language);
86+
}
8387

84-
// output += await readLanguageFile(language);
85-
// orderBundled.add(language);
88+
output += await readLanguageFile(language);
89+
orderBundled.add(language);
8690

87-
// for await (const language of peerDeps) {
88-
// await addLanguageToOutput(language);
89-
// }
90-
// };
91+
for await (const language of peerDeps) {
92+
await addLanguageToOutput(language);
93+
}
94+
};
9195

92-
// for await (const language of languagesToBundle) {
93-
// await addLanguageToOutput(language);
94-
// }
96+
for await (const language of languagesToBundle) {
97+
await addLanguageToOutput(language);
98+
}
9599

96-
// console.info(pc.bold(pc.bgYellow(pc.black('Prism Renderer'))), '\n');
97-
// console.info(
98-
// pc.bgBlue(`Generated TypeScript output at:`),
99-
// pc.cyan(outputPath)
100-
// );
101-
// console.info(
102-
// pc.bgGreen(`Included language definitions in the following order:`),
103-
// Array.from(orderBundled.values()).join(', ')
104-
// );
100+
console.info(pc.bold(pc.bgYellow(pc.black('Prism Renderer'))), '\n');
101+
console.info(
102+
pc.bgBlue(`Generated TypeScript output at:`),
103+
pc.cyan(outputPath)
104+
);
105+
console.info(
106+
pc.bgGreen(`Included language definitions in the following order:`),
107+
Array.from(orderBundled.values()).join(', ')
108+
);
105109

106-
// await writeFile(outputPath, header + uglify.minify(output).code);
107-
// };
110+
await writeFile(outputPath, header + uglify.minify(output).code);
111+
};
108112

109-
// main();
113+
main();

‎src/components/icons/console.svg

+1
Loading

‎src/components/icons/cucumber.svg

+1
Loading

‎src/components/icons/index.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ const aliasMap: Record<string, string> = {
2626
text: 'document',
2727
webmanifest: 'json',
2828
xml: 'markup',
29-
yml: 'yaml'
29+
yml: 'yaml',
30+
bash: 'console',
31+
shell: 'console',
32+
gherkin: 'cucumber'
3033
};
3134

3235
export const icons = Object.fromEntries(

‎src/components/icons/php.svg

+1
Loading

‎src/components/prism-langs.ts

+1-1
Large diffs are not rendered by default.

‎src/types/code-block.d.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,12 @@ declare module 'code-block' {
8383
| 'webmanifest'
8484
| 'xml'
8585
| 'yaml'
86-
| 'yml';
86+
| 'yml'
87+
| 'php'
88+
| 'SQL'
89+
| 'gherkin'
90+
| 'bash'
91+
| 'shell';
8792

8893
const CodeBlockType: DefineComponent<CodeBlockProps>;
8994
export {

‎tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"exclude": [
2020
"node_modules",
2121
"dist",
22-
"/src/components/generate-prism-languages/**"
22+
"src/components/generate-prism-languages",
23+
"src/components/generate-icons"
2324
]
2425
}

‎tsconfig.tsbuildinfo

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +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"}
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/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"}

0 commit comments

Comments
 (0)