javascript-playground

📚 Learning and exploring JavaScript.

Overview

This repository is my own exploration of JavaScript (JS) and the JavaScript ecosystem (although I want to descope non-JS-language things outside of this repository). It codifies some of the JS concepts and trivia I've learned into runnable example programs, complete with verbose commentary and references.

NOTE: This project was developed on macOS. It is designed for my own personal use.

Standalone subprojects

This repository illustrates different concepts, patterns and examples via standalone subprojects. Each subproject is completely independent of the others and do not depend on the root project. This standalone subproject constraint forces the subprojects to be complete and maximizes the reader's chances of successfully running, understanding, and re-using the code.

The subprojects include:

console/

Print dynamic content to the console with readline and DraftLog.

See the README in console/.

object-oriented/

Showcasing the object-oriented language features of JavaScript.

See the README in object-oriented/.

async/

Showcasing the asynchronous programming features of JavaScript.

See the README in async/.

repl/

This is a working example of the Node.js REPL (Read-Eval-Print-Loop) and how to make the most of it.

See the README in repl/.

file/

Reading, decoding and writing files in Node.js.

See the README in file/.

misc/

Miscellaneous JavaScript code. Learning by doing.

See the README in misc/.

npm-library/

An example npm-based library and an example npm-based program that consumes it.

See the README in npm-library/.

npm-library-typescript/

An example npm-based library written in TypeScript and an example npm-based program written in TypeScript that consumes it.

See the README in npm-library-typescript/.

npm-library-rollup/

An example npm-based library bundled with Rollup and an example npm-based program that consumes it.

See the README in npm-library-rollup/.

npm-library-typescript-rollup-api-extractor/

An example TypeScript library bundled with Rollup. The types are also bundled with API Extractor into a standalone index.d.ts.

See the README in npm-library-typescript-rollup-api-extractor/.

npm-library-typescript-multi-workspace-rollup-api-extractor/

An example npm-based multi-workspace TypeScript library bundled with Rollup. It uses TypeScript project references. The types are also bundled with API Extractor into a standalone index.d.ts.

See the README in npm-library-typescript-multi-workspace-rollup-api-extractor/.

Wish List

General clean-ups, TODOs and things I wish to implement for this project:

• Explore options to bundle the source code into a single HTML file. Why? I think the "single document" model (i.e. just a index.html and no other files) is killer. For a few reasons. For one, it's the only way to run JavaScript in the browser from a file (although I think browser vendors are experimenting with other sandboxed options I think...). Running code from a file is the most approachable way for a new developer. Makes the project approachable. The second reason is that I think a single document is easier to grok than a program with multiple sources (I didn't articulate this very well, but I mean it).
• DONE Add a well-described async/await example that creates a Promise (and probably use the setTimeout function)
• DONE Implement an async program with generators.
• DONE Lowercase "npm". npm is stylized as "npm" not "NPM".
• In the many npm-library* subprojects, clean up a couple things. Push the .gitignore files into the individual projects. For example, push animals-library-*.tgz into npm-library/animals-library. Also, in the READMEs of the forest-story projects, use the If needed, re-install animals-library` style (a step) instead of explaining that step outside of the instruction steps.
• Replace the 'I won't repeat the contents of the other README' mentions. This brings too much drag to the cognitive load to the subprojects. Instead, repeat the contents. And better yet, cater the contents to the characteristics of the project. Also, to prevent a Twilight Zone effect of "Wait didn't I just see a 'animals-library', where am I now?" be sure to reference the other projects by name and as "Similar projects with different toolchains".
• Include source maps in the npm-library* projects.
• Create an example project of: a JavaScript library that also contains TypeScript type definitions
• DONE 2023 upgrades.
• DONE Stop using require. I think I can be completely done with CommonJS.
• De-scope Node.js subprojects from this repository. file/, repl/ and console/ should be in a nodejs-playground.

Finished Items

• DONE Parse commandline arguments passed to Node
• DONE Node has some fancy console logging features in its standard libraries, like the console.table function. Is there more? Is there a way to update the output printed to the console dynamically? Like a progress bar? Answer: well, I found a very popular library called "cli-progress" so I'll just use that. And under the hood, it uses a lower-level abstraction called Terminal to render the content to the terminal. So with some more studying, I could learn from the Terminal code to figure out how to draw arbitrary stuff to the console.
• DONE Draw arbitrary stuff to the console, and re-draw new stuff that overwrites the old stuff, using "cli-progress"'s Terminal abstraction.
• DONE Replace "Terminal" usage with plain "readline"
• DONE Do another "draw to the terminal" example similar to what "cli-progress" does and the "readline" example does but do it over multiple lines.
• DONE Incorporate the draw-*.js JS scripts into the src/playground.js runner script or detail the exact instructions to runs these JS scripts.
• DONE A JavaScript library bundled with Rollup
• DONE A TypeScript library bundled with Rollup and API Extractor.
  • This was implemented in ../npm-library-rollup/
• DONE Create an example project of: a TypeScript library compiled with tsc
  • This was implemented in ../npm-library-typescript/
• DONE Create an example project of: A monolith-style repository with local libraries defined as npm workspaces and a workspace that acts as the runnable consumer program.

Reference

• MDN web docs: JavaScript classes reference
• MDN web docs: export keyword
• MDN web docs: import keyword
• MDN web docs: JSON.stringify
• MDN web docs: Proxy
• MDN web docs: Reflect
• Node.js: ECMAScript modules
• StackOverflow question and answer: a form of multi-module projects
• Webpack GitHub issue #2933: support output.libraryTarget: 'module'