Comments (4)
There is in node-figlet (https://github.com/patorjk/figlet.js/blob/master/lib/node-figlet.js). That's what package.json points to (for the "main" prop). Also, at the bottom of the figlet file, there is an export statement.
What kind of changes are you thinking of? What would be the use case? I'm all for updating the package if it makes it easier for something, as long as it maintains its backward compatibility.
from figlet.js.
@patorjk close, but it's an exports statement, as opposed to export.
The story is like this, when nodejs was born, the browsers did not have a module system yet. And suddenly npm created a big ecosystem that potentially could benefit the web dev 10 years ago. However, at the time, in order for browsers to use a 3rd party library, the library has to inject itself into the window
scope. Because of this need, webpack and rollup were born. This duo was great 10 years ago, but is bad today. Because back then they enabled npm packages for web devs. But today they allowed fake ES syntax for many npm packages and effectively they hindered the modern browsers from natively loading 3rd party modules, like your package. The root cause is ES doesn't support module.exports syntax, and even worse, webpack allowed to use ES import syntax to load npm packages. This is effectively making webpack a dependency of most of today's web apps, which shouldn't be necessary at all.
The good part of webpack is help to bundle a web app, but the evil part webpack is to hinder the incentive of migrating the old node package system to ES module system, like yours. So that's why you could see lodash and lodash-es co-exist. Good thing is node has started to support ES syntax so that's the start of the death of the require syntax.
So I think it may make sense to create a new file called figlet-es.js which will be usable in modern browsers natively.
from figlet.js.
Is there a workaround for this? I can't seem to import figlet
in my es project
from figlet.js.
Yes. The work around is stop using Node and start using Deno. You can reverse engineer this entire library with ChatGPT in 4 hours and somehow, people are still using God Forsaken Webpack.
Allow me to illustrate:
types.ts
// types.ts
export type AsciiFont = {
height: number;
chars: Record<string, string[]>;
}
languages.ts
// Define code languages and script languages that will have specific comment styles
export const codeLanguages: string[] = [
"js",
"ts",
"go",
"rust",
"c",
"java",
"css",
"php",
"sql"
];
Object.freeze(codeLanguages);
// Define script languages that will have specific comment styles
export const scriptLanguages: string[] = [
"bash",
"python",
"ruby",
"perl",
"tcl",
"r",
"lua",
"swift",
"applescript",
"powershell",
"groovy",
"coffeescript",
"nginx"
];
Object.freeze(scriptLanguages);
fonts.ts
import { AsciiFont } from './types.ts';
/**
* ###### #### ## ## ######
* ## ## ## ### ## ##
* #### ## ## ## ### ##
* ## ## ## ## ## ##
* ## #### ## ## ##
*
* FIGlet font Bright.flf
* Modified to exclude background. Character spacing normalized.
*
*/
export const fBright: AsciiFont = {
height: 6,
chars: {
" ": [
" ",
" ",
" ",
" ",
" ",
" ",
],
"!": [
"## ",
"## ",
"## ",
" ",
"## ",
" ",
],
"\"": [
"## ## ",
"## ## ",
" # # ",
" ",
" ",
" ",
],
"#": [
" # # ",
"###### ",
" # # ",
"###### ",
" # # ",
" ",
],
"$": [
" ##### ",
"## # ",
" #### ",
" # ## ",
"##### ",
" ",
],
"%": [
"## ## ",
"# ## ",
" ## ",
" ## # ",
"## ## ",
" ",
],
"&": [
" ##### ",
"## ## ",
" ## ## ",
"## ## # ",
" ##### ",
" ",
],
"'": [
"## ",
"## ",
" # ",
" ",
" ",
" ",
],
"(": [
" ### ",
" ## ",
"# ",
" ## ",
" ### ",
" ",
],
")": [
"### ",
" ## ",
" # ",
" ## ",
"### ",
" ",
],
"*": [
"# # # ",
" # # # ",
"####### ",
" # # # ",
"# # # ",
" ",
],
"+": [
" ## ",
" ## ",
"###### ",
" ## ",
" ## ",
" ",
],
",": [
" ",
" ",
"## ",
"## ",
" # ",
" ",
],
"-": [
" ",
" ",
"###### ",
" ",
" ",
" ",
],
".": [
" ",
" ",
" ",
"## ",
"## ",
" ",
],
"/": [
" ## ",
" ## ",
" ## ",
" ## ",
"## ",
" ",
],
"0": [
" #### ",
"## ## ",
"###### ",
"## ## ",
" #### ",
" ",
],
"1": [
" ## ",
" ### ",
" ## ",
" ## ",
"###### ",
" ",
],
"2": [
" #### ",
" ## ",
" #### ",
"## ",
"###### ",
" ",
],
"3": [
"###### ",
" ## ",
" ### ",
" ## ",
"##### ",
" ",
],
"4": [
" ## ",
"## ## ",
"###### ",
" ## ",
" ## ",
" ",
],
"5": [
"###### ",
"## ",
" #### ",
" ## ",
"##### ",
" ",
],
"6": [
" ## ",
" ## ",
"##### ",
"## ## ",
" #### ",
" ",
],
"7": [
"###### ",
" ## ",
" ## ",
" ## ",
"## ",
" ",
],
"8": [
" #### ",
"## ## ",
" #### ",
"## ## ",
" #### ",
" ",
],
"9": [
" #### ",
"## ## ",
" #### ",
" ## ",
" ## ",
" ",
],
":": [
" ",
"## ",
" ",
"## ",
" ",
" ",
],
";": [
" ",
"## ",
" ",
"## ",
" # ",
" ",
],
"<": [
" ## ",
" ## ",
"## ",
" ## ",
" ## ",
" ",
],
"=": [
" ",
"###### ",
" ",
"###### ",
" ",
" ",
],
">": [
"## ",
" ## ",
" ## ",
" ## ",
"## ",
" ",
],
"?": [
" #### ",
"## ## ",
" ## ",
" ## ",
" ## ",
" ",
],
"@": [
" #### ",
"# ## # ",
"# ## # ",
"# # # ",
" #### ",
" ",
],
"A": [
" #### ",
"## ## ",
"###### ",
"## ## ",
"## ## ",
" ",
],
"B": [
"##### ",
"## ## ",
"##### ",
"## ## ",
"##### ",
" ",
],
"C": [
" #### ",
"## ## ",
"## ",
"## ## ",
" #### ",
" ",
],
"D": [
"##### ",
"## ## ",
"## ## ",
"## ## ",
"##### ",
" ",
],
"E": [
"###### ",
"## ",
"#### ",
"## ",
"###### ",
" ",
],
"F": [
"###### ",
"## ",
"#### ",
"## ",
"## ",
" ",
],
"G": [
" #### ",
"## ",
"## ### ",
"## ## ",
" #### ",
" ",
],
"H": [
"## ## ",
"## ## ",
"###### ",
"## ## ",
"## ## ",
" ",
],
"I": [
"###### ",
" ## ",
" ## ",
" ## ",
"###### ",
" ",
],
"J": [
"###### ",
" ## ",
" ## ",
"## ## ",
" #### ",
" ",
],
"K": [
"## ## ",
"## ## ",
"#### ",
"## ## ",
"## ## ",
" ",
],
"L": [
"## ",
"## ",
"## ",
"## ",
"###### ",
" ",
],
"M": [
"## ## ",
"### ### ",
"## # ## ",
"## ## ",
"## ## ",
" ",
],
"N": [
"## ## ",
"### ## ",
"## ### ",
"## ## ",
"## ## ",
" ",
],
"O": [
" #### ",
"## ## ",
"## ## ",
"## ## ",
" #### ",
" ",
],
"P": [
"##### ",
"## ## ",
"##### ",
"## ",
"## ",
" ",
],
"Q": [
" #### ",
"## ## ",
"## ### ",
"## ## ",
" ##### ",
" ",
],
"R": [
"##### ",
"## ## ",
"##### ",
"## ## ",
"## ## ",
" ",
],
"S": [
" #### ",
"## ",
" #### ",
" ## ",
" #### ",
" ",
],
"T": [
"###### ",
" ## ",
" ## ",
" ## ",
" ## ",
" ",
],
"U": [
"## ## ",
"## ## ",
"## ## ",
"## ## ",
" #### ",
" ",
],
"V": [
"## ## ",
"## ## ",
"## ## ",
" #### ",
" ## ",
" ",
],
"W": [
"## ## ",
"## ## ",
"## # ## ",
"####### ",
" ## ## ",
" ",
],
"X": [
"## ## ",
" #### ",
" ## ",
" #### ",
"## ## ",
" ",
],
"Y": [
"## ## ",
" #### ",
" ## ",
" ## ",
" ## ",
" ",
],
"Z": [
"###### ",
" ## ",
" ## ",
" ## ",
"###### ",
" ",
],
"[": [
"###### ",
"## ",
"## ",
"## ",
"###### ",
" ",
],
"\\": [
"## ",
" ## ",
" ## ",
" ## ",
" ## ",
" ",
],
"]": [
"###### ",
" ## ",
" ## ",
" ## ",
"###### ",
" ",
],
"^": [
" ## ",
" #### ",
"## ## ",
" ",
" ",
" ",
],
"_": [
" ",
" ",
" ",
" ",
"###### ",
" ",
],
"`": [
"## ",
"## ",
"# ",
" ",
" ",
" ",
],
"a": [
" #### ",
"## ## ",
"###### ",
"## ## ",
"## ## ",
" ",
],
"b": [
"##### ",
"## ## ",
"##### ",
"## ## ",
"##### ",
" ",
],
"c": [
" #### ",
"## ## ",
"## ",
"## ## ",
" #### ",
" ",
],
"d": [
"##### ",
"## ## ",
"## ## ",
"## ## ",
"##### ",
" ",
],
"e": [
"###### ",
"## ",
"#### ",
"## ",
"###### ",
" ",
],
"f": [
"###### ",
"## ",
"#### ",
"## ",
"## ",
" ",
],
"g": [
" #### ",
"## ",
"## ### ",
"## ## ",
" #### ",
" ",
],
"h": [
"## ## ",
"## ## ",
"###### ",
"## ## ",
"## ## ",
" ",
],
"i": [
"###### ",
" ## ",
" ## ",
" ## ",
"###### ",
" ",
],
"j": [
"###### ",
" ## ",
" ## ",
"## ## ",
" #### ",
" ",
],
"k": [
"## ## ",
"## ## ",
"#### ",
"## ## ",
"## ## ",
" ",
],
"l": [
"## ",
"## ",
"## ",
"## ",
"###### ",
" ",
],
"m": [
"## ## ",
"### ### ",
"## # ## ",
"## ## ",
"## ## ",
" ",
],
"n": [
"## ## ",
"### ## ",
"## ### ",
"## ## ",
"## ## ",
" ",
],
"o": [
" #### ",
"## ## ",
"## ## ",
"## ## ",
" #### ",
" ",
],
"p": [
"##### ",
"## ## ",
"##### ",
"## ",
"## ",
" ",
],
"q": [
" #### ",
"## ## ",
"## ### ",
"## ## ",
" ##### ",
" ",
],
"r": [
"##### ",
"## ## ",
"##### ",
"## ## ",
"## ## ",
" ",
],
"s": [
" #### ",
"## ",
" #### ",
" ## ",
" #### ",
" ",
],
"t": [
"###### ",
" ## ",
" ## ",
" ## ",
" ## ",
" ",
],
"u": [
"## ## ",
"## ## ",
"## ## ",
"## ## ",
" #### ",
" ",
],
"v": [
"## ## ",
"## ## ",
"## ## ",
" #### ",
" ## ",
" ",
],
"w": [
"## ## ",
"## ## ",
"## # ## ",
"####### ",
" ## ## ",
" ",
],
"x": [
"## ## ",
" #### ",
" ## ",
" #### ",
"## ## ",
" ",
],
"y": [
"## ## ",
" #### ",
" ## ",
" ## ",
" ## ",
" ",
],
"z": [
"###### ",
" ## ",
" ## ",
" ## ",
"###### ",
" ",
],
"{": [
" #### ",
" ## ",
"### ",
" ## ",
" #### ",
" ",
],
"|": [
"## ",
"## ",
"## ",
"## ",
"## ",
"## ",
],
"}": [
"#### ",
" ## ",
" ### ",
" ## ",
"#### ",
" ",
],
"~": [
" ### # ",
"# ### ",
" ",
" ",
" ",
" ",
],
}
};
Object.freeze(fBright);
// Define code languages and script languages that will have specific comment styles
export const codeLanguages: string[] = [
"js",
"ts",
"go",
"rust",
"c",
"java",
"css",
"php",
"sql"
];
Object.freeze(codeLanguages);
// Define script languages that will have specific comment styles
export const scriptLanguages: string[] = [
"bash",
"python",
"ruby",
"perl",
"tcl",
"r",
"lua",
"swift",
"applescript",
"powershell",
"groovy",
"coffeescript",
"nginx"
];
Object.freeze(scriptLanguages);
engine.ts
import { AsciiFont } from "./types.ts";
import { codeLanguages, scriptLanguages } from "./languages.ts";
/**
* Constructs an ASCII art representation of the input string using the provided font.
*
* @param {AsciiFont} font - The font object containing ASCII character representations.
* @param {string} input - The input string to be converted to ASCII art.
* @returns {Promise<string[]>} A Promise that resolves to an array of strings representing the ASCII art.
*
*/
async function construct(font: AsciiFont, input: string): Promise<string[]> {
// Initialize the output array with the same number of elements as the font height
const outputArray: string[] = new Array(font.height).fill("");
/**
* #### #### #### ###### ######
* ## ## ## ## ## ## ##
* ###### #### ## ## ##
* ## ## ## ## ## ## ##
* ## ## #### #### ###### ######
*
* @dev Example of ASCII full printable character set.
*
* const inputASCII = " !\"#$%&'()*+,-./";
* const inputASCII = "0123456789";
* const inputASCII = ":;<=>?@";
* const inputASCII = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
* const inputASCII = "[\\]^_`";
* const inputASCII = "abcdefghijklmnopqrstuvwxyz";
* const inputASCII = "{|}~";
*
*/
// Define the list of printable ASCII characters
const printableAscii = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
// Check if input contains only printable ASCII characters
if (!input.split("").every(char => printableAscii.includes(char))) {
// If the input contains a non-printable ASCII character, abort the construction and return an empty array
console.error("Error: Input contains non-printable ASCII characters. Aborting construct.");
return [];
}
// Iterate through each character in the input string
input.split("").forEach(char => {
// Retrieve the ASCII representation for the current character
const charLines = font.chars[char];
// Add the corresponding lines of the character representation to the output array
for (let i = 0; i < font.height; i++) {
outputArray[i] += charLines[i];
}
});
// Return the output array containing the ASCII art representation of the input string
return outputArray;
}
/**
* Formats the ASCII art output based on the specified language.
*
* @param {AsciiFont} font - The font object containing ASCII character representations.
* @param {string[]} outputArray - The array of strings representing the ASCII art.
* @param {string} [language="plain"] - The language specifying the desired comment style for the output.
* @returns {Promise<string>} A Promise that resolves to a formatted string containing the ASCII art.
*
*/
async function format(font: AsciiFont, outputArray: string[], language: string = "plain"): Promise<string> {
/**
* Transforms an array of strings by adding a prefix to each element and joining them with a newline.
* Internal helper function.
*
* @param {string} prefix - The prefix to be added to each element in the outputArray.
* @param {string[]} outputArray - The array of strings to be transformed.
* @returns {string} The transformed string with the prefix added to each line and separated by newlines.
*
*/
const transform = (prefix: string, lines: string[]): string => {
return lines.map(line => prefix + line).join("\n");
};
// Check if the specified language is in the list of code languages
if (codeLanguages.includes(language)) {
// Transform the outputArray with a "*" prefix for code languages
const transformedText = transform(" * ", outputArray.slice(0, font.height));
// Return the formatted output string with a JSDoc-style comment block
return `/**\n${transformedText}\n * \n */ `;
}
// Check if the specified language is in the list of script languages
if (scriptLanguages.includes(language)) {
// Transform the outputArray with a "#" prefix for script languages
const transformedText = transform("# ", outputArray.slice(0, font.height));
// Return the formatted output string with a Unix shell-style comment block
return `# \n${transformedText}\n# \n# `;
}
// Check if the specified language is "html"
if (language === "html") {
// Transform the outputArray with a " " prefix for HTML
const transformedText = transform(" ", outputArray.slice(0, font.height));
// Return the formatted output string with an HTML-style comment block
return `<!-- \n${transformedText}\n \n--> `;
}
// Check if the specified language is "latex"
if (language === "latex") {
// Transform the outputArray with a "% " prefix for LaTeX
const transformedText = transform("% ", outputArray.slice(0, font.height));
// Return the formatted output string with an LaTeX-style comment block
return `%\n${transformedText}\n%`;
}
// If no specific language is specified or matched, default to plain formatting
return outputArray.join("\n");
}
/**
* Renders the ASCII art representation of the input string using the provided font and language.
*
* @param {AsciiFont} font - The font object containing ASCII character representations.
* @param {string} [input="default"] - The input string to be converted to ASCII art.
* @param {string} [language="plain"] - The language specifying the desired comment style for the output.
* @returns {Promise<void>} A Promise that resolves when the rendering is complete.
*
*/
export async function render(font: AsciiFont, input: string = "default", language: string = "plain"): Promise<void> {
// Check if the input string is empty or contains only whitespace
if (!input.trim().length) {
// Log an error message and use the default input string
console.error("Error: Missing or empty input string. Using default template.");
}
// Construct the ASCII art representation of the input string
const outputArray: string[] = await construct(font, input);
// Format the output according to the specified language
const outputString: string = await format(font, outputArray, language);
// Log the formatted output string with a newline at the end
console.info(`${outputString}\n`);
}
mod.ts
export * as fonts from "./fonts.ts";
export { render } from "./engine.ts";
test.ts
import { fonts, render } from "./mod.ts";
/**
* @dev
* deno run --allow-read --check test.ts
*
* Available fonts
* fBright, fBanner, fThick, f4Max
*
* function Signature
* render(fonts.fNAME, input, language);
*
* Test cases below:
*
*/
await render(fonts.fBright, `HELLO WORLD!`, "ts");
Output
/**
* ## ## ###### ## ## #### ## ## #### ##### ## ##### ##
* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ##
* ###### #### ## ## ## ## ## # ## ## ## ##### ## ## ## ##
* ## ## ## ## ## ## ## ####### ## ## ## ## ## ## ##
* ## ## ###### ###### ###### #### ## ## #### ## ## ###### ##### ##
*
*
*/
from figlet.js.
Related Issues (20)
- Examples directory of the repository is part of the NPM package HOT 3
- can't find font file HOT 3
- Slant front weird rendering HOT 13
- How to use different colors HOT 3
- [ PLS HELP ] want to change the header text , but in bash.bashrc file there is no written text HOT 1
- Possibility to add one empty line at the top/beginning HOT 2
- Cannot read property 'reduce' of undefined HOT 2
- Can blank lines be preserved?
- Problem with code that pollute array prototype
- small slant.flf does not work in Ubuntu HOT 2
- TypeError: Cannot read properties of undefined (reading 'reduce') HOT 6
- Typo in README.md
- Readability issues in README.md
- TTF -> FLF? HOT 2
- Cannot find module figlet HOT 1
- [README] Build Status Shield Button Not Working HOT 1
- Question: Why doesn't figlet return the new text and why is error the first parameter of the callback? HOT 1
- [Suggestion] Way to import every font using Webpack
- Error: Cannot find module 'figlet'(已经重新安装依赖还是如此)node v16.20.2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from figlet.js.