feat(init): use package.json & ECMA-419 in default project scaffold (#…

…199)

* feat(init): use package.json for default project config

* docs(init): update default project config file, add manifest flag

* fix(init): add io manifest config to packageJSON

* docs(guide): update blinky based on default project scaffold

* refactor: resolve prettier formatting

* refactor(init/templates): appease eslint

* fix(setup): allow 'esp'/'windows' for device target

* fix: remove unused extensions files

docs/src/content/docs/features/init.md

@@ -5,60 +5,68 @@ description: Scaffold new Moddable projects
 
 # Scaffold new Moddable projects
 
-The default template creates a `main.js` and minimally configured `manifest.json` for running in the simulator.
+The default template creates a `main.js` and minimally configured `package.json` for running in the simulator.
 
 ```
 xs-dev init my-project
 ```
 
+## Manifest
+
+The `--manifest` flag will create a project with the `manifest.json` file for Moddable project configuration over the default `package.json`:
+
+```
+xs-dev init --manifest my-manifest-project
+```
+
 ## TypeScript
 
-The `--typescript` flag will create a project with Moddable types and a `main.ts` to get started:
+The `--typescript` flag will create a project with Moddable types and a `main.ts` to get started, as well as the necessary scripts to build the TypeScript before running:
 
 ```
-xs-dev init my-typed-project --typescript
+xs-dev init --typescript my-typed-project
 ```
 
 ## IO (ECMA 419)
 
-The `--io` flag sets up the project to use the [TC53 IO manifest](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/io/io.md) in the generated `mainfest.json`:
+The `--io` flag sets up the project to use the [TC53 IO manifest](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/io/io.md) in the generated `package.json` or `manifest.json`:
 
 ```
-xs-dev init my-io-project --io
+xs-dev init --io my-io-project
 ```
 
 ## asyncMain
 
-The `--asyncMain` flag will enable top level await in your project's entry file. In XS, TLA is only be available in imported modules by default.
+The `--asyncMain` flag will enable top-level await (TLA) in your project's entry file. In XS, TLA is only be available in imported modules by default.
 
 ```
-xs-dev init my-io-project --asyncMain
+xs-dev init --asyncMain my-io-project
 ```
 
 ## Moddable example
 
 For the `--example` flag, it can be used as a boolean to select a project from the list of available [Moddable examples](https://github.com/Moddable-OpenSource/moddable/tree/public/examples):
 
 ```
-xs-dev init my-example-project --example
+xs-dev init --example my-example-project
 ```
 
 Or select from a filtered list of projects:
 
 ```
-xs-dev init my-http-project --example http
+xs-dev init --example http my-http-project
 ```
 
 Or if the complete example name is passed, it will be selected by default:
 
 ```
-xs-dev init my-mqtt-project --example network/mqtt/mqttbasic
+xs-dev init --example network/mqtt/mqttbasic my-mqtt-project
 ```
 
 ## Overwrite
 
 An existing directory matching the project name can be overwritten with the `--overwrite` flag:
 
 ```
-xs-dev init my-existing-project --overwrite
+xs-dev init --overwrite my-existing-project
 ```

docs/src/content/docs/guide/02-blinky.md

@@ -20,40 +20,37 @@ Generating Moddable project: guiding-light
 Run the project using: cd guiding-light && xs-dev run
 ```
 
-The `guiding-light` directory should contain `main.js` and `manifest.json` files. `main.js` contains that was run from the [Hello Console example](/guide/01-hello-console#run-the-hello-world-example):
+The `guiding-light` directory should contain `main.js` and `package.json` files. `main.js` contains that was run from the [Hello Console example](/guide/01-hello-console#run-the-hello-world-example):
 
 ```javascript
 debugger;
 
 let message = "Hello, world - sample";
-trace(message);
+console.log(message);
 ```
 
 The first line is a [debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) for setting a breakpoint in [xsbug](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/xs/xsbug.md).
-The third and fourth lines save a string to a variable and log it to the xsbug console using the global [`trace` function](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/xs/xsbug.md#colorizing-consolelog-with-trace).
+The third and fourth lines save a string to a variable and log it to the xsbug console using the global [`console.log` function](https://developer.mozilla.org/en-US/docs/Web/API/console/log_static).
 
-The [Moddable docs](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/tools/manifest.md) describe the `manifest.json` as follows:
-
-> A manifest is a JSON file that describes the modules and resources necessary to build a Moddable app.
-
-The initialized `manifest.json` in the `guiding-light` project should look like this:
+The initialized `package.json` in the `guiding-light` project should look like this:
 
 ```json
 {
-  "include": [
-    "$(MODDABLE)/examples/manifest_base.json"
-  ],
-  "modules": {
-    "*": "./main"
-  }
+  "name": "guiding-light",
+  "main": "main.js",
+  "type": "module",
+  "description": "A starter project for embedded JS",
+  "scripts": {
+    "build": "xs-dev build",
+    "start": "xs-dev run"
+  },
+  "devDependencies": {}
 }
 ```
 
-The [`include` field](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/tools/manifest.md#include) contains references to other manifests to provide quick reuse of common configuration found in the Moddable SDK, examples, and your own projects. The `manifest_base.json` includes basic platform support for all available platforms and some initial modules for time, timers, and instrumentation.
-
-The [`modules` field](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/tools/manifest.md#modules) should contain a mapping of every module to include in the build. The `*` key means the module (or list of modules) can be imported and referenced by their file name. A custom key can be used as an alias to reference when importing the assigned module.
+The `main` field points to the generated `main.js` as the entrypoint for the program.
 
-Executing `xs-dev run` should provide the same experience as the [Hello Console guide](/guide/01-hello-console).
+Executing the `start` script using the package manager of your choice, i.e. `npm start`, or `xs-dev run` will provide the same experience as the [Hello Console guide](/guide/01-hello-console).
 
 _Quick tip: check out all the available simulators by using the [`--list-devices` flag](/features/run#select-a-device-target) with the `run` command and typing "simulator" to filter the list._
 
@@ -68,6 +65,7 @@ Just like the [previous step](/guide/01-hello-console#setup-system-tooling), the
 ? Here are the available target devices: …
 esp8266
 esp32
+nrf52
 pico
 wasm
 mac
@@ -95,27 +93,9 @@ This will take some time to compile and send the code over to the device. When i
 
 ## Hello blinky
 
-Now that we know we can run code on our device, it is time to shed a little light on hardware control. We will use the [ECMA-419 standard APIs](https://419.ecma-international.org/) to perform this task. To access those APIs we need to include them in our project:
-
-```
-xs-dev include io
-```
-
-The [`include` command](/features/include) updates the `manifest.json` to (you guessed it) _include_ the required module(s) from the Moddable SDK. In this case, the `io` module provides the complete set of ECMA-419 APIs for the supported device platform. The `manifest.json` should look like this:
-
-```json
-{
-  "include": [
-    "$(MODDABLE)/examples/manifest_base.json",
-    "$(MODDABLE)/modules/io/manifest.json"
-  ],
-  "modules": {
-    "*": "./main"
-  }
-}
-```
+Now that we know we can run code on our device, it is time to shed a little light on hardware control. We will use the [ECMA-419 standard APIs](https://419.ecma-international.org/) to perform this task.
 
-With that configured, the `main.js` file can be updated with the following code:
+With that default `package.json` the ECMA-419 APIs are included in the compiled program, so the `main.js` file can be updated with the following code:
 
 ```javascript
 const Digital = device.io.Digital;
@@ -165,7 +145,7 @@ The project can be run using the same command as before: `xs-dev run --device <d
 
 ## Keep exploring!
 
-Tried adding some `trace` calls to log the state to the debugger or updating the timer code to send a message in [Morse code](https://ledask.com/morse-code-lights/).
+Tried adding some `console.log` calls to log the state to the debugger or updating the timer code to send a message in [Morse code](https://ledask.com/morse-code-lights/).
 
 _Coming soon: react to digital input by pressing some buttons_
 

src/commands/init.ts

@@ -6,6 +6,7 @@ import { sourceEnvironment } from '../toolbox/system/exec'
 interface InitOptions {
   typescript?: boolean
   io?: boolean
+  manifest?: boolean
   example?: string
   'list-examples'?: boolean
   overwrite?: boolean
@@ -25,7 +26,8 @@ const command = buildCommand({
 
     const {
       typescript = false,
-      io = false,
+      io = true,
+      manifest = false,
       example,
       'list-examples': listExamples = false,
       overwrite = false,
@@ -103,20 +105,46 @@ const command = buildCommand({
           ? ',\n  defines: {\n    async_main: 1\n  }'
           : ''
 
-        const { createManifest, createMain } = await import(
-          '../toolbox/init/templates'
-        )
+        const {
+          createManifest,
+          createMain,
+          createPackageJSON,
+          createTSConfig,
+        } = await import('../toolbox/init/templates')
 
-        await Promise.all([
-          createManifest({
-            target: `${projectName}/manifest.json`,
-            includes,
-            defines,
-          }),
+        const fileTasks = [
           createMain({
             target: `${projectName}/main.${typescript ? 'ts' : 'js'}`,
+            legacy: manifest,
           }),
-        ])
+        ]
+
+        if (manifest) {
+          fileTasks.push(
+            createManifest({
+              target: `${projectName}/manifest.json`,
+              includes,
+              defines,
+            }),
+          )
+        } else {
+          fileTasks.push(
+            createPackageJSON({
+              target: `${projectName}/package.json`,
+              projectName,
+              typescript,
+              io,
+            }),
+          )
+        }
+
+        if (typescript) {
+          fileTasks.push(
+            createTSConfig({ target: `${projectName}/tsconfig.json` }),
+          )
+        }
+
+        await Promise.all(fileTasks)
       }
 
       success(`Run the project using: cd ${projectName} && xs-dev run`)
@@ -147,13 +175,19 @@ const command = buildCommand({
       io: {
         kind: 'boolean',
         brief:
-          'Add ECMA-419 standard API support to generated project; defaults to false',
+          'Add ECMA-419 standard API support to generated project; defaults to true',
+        optional: true,
+      },
+      manifest: {
+        kind: 'boolean',
+        brief:
+          'Use manifest.json file for project configuration instead of package.json; defaults to false',
         optional: true,
       },
       example: {
         kind: 'parsed',
         brief:
-          'Name or path of an example project as the base for the generated project; use --list-examples to select interactively',
+          'Name or path of an example project as the base for the generated project; omit a name or use --list-examples to select interactively',
         parse: String,
         optional: true,
       },

src/commands/setup.ts

@@ -30,7 +30,8 @@ const command = buildCommand({
       release = 'latest',
       'source-repo': sourceRepo = MODDABLE_REPO,
     } = flags
-    let target: Device = device ?? DEVICE_ALIAS[currentPlatform]
+    let target: Device =
+      DEVICE_ALIAS[device ?? ('' as Device)] ?? DEVICE_ALIAS[currentPlatform]
 
     if (device === undefined && listDevices) {
       const choices = [
@@ -70,6 +71,7 @@ const command = buildCommand({
       'mac',
       'darwin',
       'windows_nt',
+      'windows',
       'win',
       'lin',
       'linux',

src/commands/update.ts

@@ -16,12 +16,10 @@ const command = buildCommand({
   },
   async func(this: LocalContext, flags: UpdateOptions) {
     const currentPlatform: Device = platformType().toLowerCase() as Device
-    const {
-      device = DEVICE_ALIAS[currentPlatform],
-      branch,
-      release = 'latest',
-    } = flags
-    const { default: update } = await import(`../toolbox/update/${device}`)
+    const { device = currentPlatform, branch, release = 'latest' } = flags
+    const { default: update } = await import(
+      `../toolbox/update/${DEVICE_ALIAS[device]}`
+    )
     await update({ branch, release })
   },
   parameters: {