refactor(lang/js): Revise JavaScript language support section (#304)

* Revise JavaScript language support section

As with other sections, added more details and factored
out code examples into other files.

* Fixed two errors in `jco componentize` command
  The world name was wrong in one of the commands, and "--disable all"
  should be "--disable=all" (at least with a recent jco version)
* Added omitted steps of creating package.json files (without which
  we get "Cannot use import statement outside a module" error)
* Fixed missing semicolon in component.wit file for string-reverse example
* Corrected string-reverse example to use split() and join() (the example
  didn't run before)
* Corrected string-reverse-uppercase example to declare reverseAndUppercase(s)
  rather than reverseAndUppercase() (this example also didn't run before).

* Update component-model/src/language-support/javascript.md

Co-authored-by: Victor Adossi <[email protected]>

* Update component-model/src/language-support/javascript.md

Co-authored-by: Victor Adossi <[email protected]>

* Update component-model/src/language-support/javascript.md

Co-authored-by: Victor Adossi <[email protected]>

* Update component-model/src/language-support/javascript.md

Co-authored-by: Victor Adossi <[email protected]>

* Update component-model/src/language-support/javascript.md

Co-authored-by: Victor Adossi <[email protected]>

* Update component-model/src/language-support/javascript.md

Co-authored-by: Victor Adossi <[email protected]>

* Re-add line breaks in jco commands

---------

Co-authored-by: Victor Adossi <[email protected]>

Author: catamorphism

component-model/examples/tutorial/js/adder/adder.js

@@ -0,0 +1,5 @@
+export const add = {
+    add(x, y) {
+        return x + y;
+    }
+};

component-model/examples/tutorial/js/adder/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "adder-wasm",
+  "description": "Simple codebase for compiling an add interface to WebAssembly with jco",
+  "type": "module"
+}

component-model/examples/tutorial/js/adder/run.js

@@ -0,0 +1,3 @@
+import { add } from "./dist/transpiled/adder.js";
+
+console.log("1 + 2 = " + add.add(1, 2));

component-model/examples/tutorial/js/string-reverse-upper/component.wit

@@ -0,0 +1,16 @@
+package example:string-reverse-upper@0.1.0;
+
+@since(version = 0.1.0)
+interface reversed-upper {
+    reverse-and-uppercase: func(s: string) -> string;
+}
+
+world revup {
+    //
+    // NOTE, the import below translates to:
+    // <namespace>:<package>/<interface>@<package version>
+    //
+    import example:string-reverse/reverse@0.1.0;
+
+    export reversed-upper;
+}

component-model/examples/tutorial/js/string-reverse-upper/run.js

@@ -0,0 +1,12 @@
+/**
+ * If this import listed below is missing, please run
+ *
+ * ```
+ * npm run build && npm run compose && npm run transpile`
+ * ```
+ */
+import { reversedUpper } from "./dist/transpiled/string-reverse-upper.js";
+
+const result = reversedUpper.reverseAndUppercase("!dlroW olleH");
+
+console.log(`reverseAndUppercase('!dlroW olleH') = ${result}`);

component-model/examples/tutorial/js/string-reverse-upper/string-reverse-upper.mjs

@@ -0,0 +1,26 @@
+/**
+ * This module is the JS implementation of the `revup` WIT world
+ */
+
+/**
+ * The import here is *virtual*. It refers to the `import`ed `reverse` interface in component.wit.
+ *
+ * These types *do not resolve* when the first `string-reverse-upper` component is built,
+ * but the types are relevant for the resulting *composed* component.
+ */
+import { reverseString } from 'example:string-reverse/[email protected]';
+
+/**
+ * The JavaScript export below represents the export of the `reversed-upper` interface,
+ * which which contains `revup` as it's primary exported function.
+ */
+export const reversedUpper = {
+  /**
+   * Represents the implementation of the `reverse-and-uppercase` function in the `reversed-upper` interface
+   *
+   * This function makes use of `reverse-string` which is *imported* from another WebAssembly binary.
+   */
+  reverseAndUppercase(s) {
+    return reverseString(s).toLocaleUpperCase();
+  },
+};

component-model/examples/tutorial/js/string-reverse/component.wit

@@ -0,0 +1,10 @@
+package example:string-reverse@0.1.0;
+
+@since(version = 0.1.0)
+interface reverse {
+    reverse-string: func(s: string) -> string;
+}
+
+world string-reverse {
+    export reverse;
+}

component-model/examples/tutorial/js/string-reverse/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "string-reverse",
+  "description": "Simple codebase for compiling a string reversing interface to WebAssembly with jco",
+  "type": "module"
+}

component-model/examples/tutorial/js/string-reverse/run.js

@@ -0,0 +1,6 @@
+// If this import listed below is missing, please run `npm run transpile`
+import { reverse } from "./dist/transpiled/string-reverse.js";
+
+const reversed = reverse.reverseString("!dlroW olleH");
+
+console.log(`reverseString('!dlroW olleH') = ${reversed}`);

component-model/examples/tutorial/js/string-reverse/string-reverse.mjs

@@ -0,0 +1,19 @@
+/**
+ * This module is the JS implementation of the `string-reverse` WIT world
+ */
+
+/**
+ * The JavaScript export below represents the export of the `reverse` interface,
+ * which which contains `reverse-string` as its primary exported function.
+ */
+export const reverse = {
+/**
+ * This JavaScript will be interpreted by `jco` and turned into a
+ * WebAssembly binary with a single export (this `reverse` function).
+ */
+ reverseString(s) {
+    return s.split("")
+      .reverse()
+      .join("");
+  }
+};