xs-dev 0.25.1 → 0.25.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/build/commands/init.js +2 -2
- package/docs/astro.config.mjs +1 -2
- package/docs/src/components/HeadCommon.astro +20 -14
- package/docs/src/components/Header/Search.tsx +1 -1
- package/docs/src/config.ts +1 -0
- package/docs/src/pages/en/guide/00-prepare.md +18 -1
- package/docs/src/pages/en/guide/01-hello-console.md +31 -4
- package/docs/src/pages/en/guide/02-blinky.md +175 -0
- package/docs/src/pages/en/introduction.md +15 -9
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ The Moddable SDK and associated dev board tooling is incredibly empowering for e
|
|
|
8
8
|
|
|
9
9
|
## Requirements
|
|
10
10
|
|
|
11
|
-
[Node.js >=
|
|
11
|
+
[Node.js >= v16](https://nodejs.org/en/)
|
|
12
12
|
|
|
13
13
|
_If you've never installed Node.js before, check out the [getting started guide for xs-dev](https://hipsterbrown.github.io/xs-dev/en/guide/00-prepare#nodejs-package-manager-optional)._
|
|
14
14
|
|
package/build/commands/init.js
CHANGED
|
@@ -40,7 +40,7 @@ const command = {
|
|
|
40
40
|
if (selectedExample !== '' && selectedExample !== undefined) {
|
|
41
41
|
const selectedExamplePath = filesystem.resolve(exampleProjectPath, selectedExample);
|
|
42
42
|
info(`Generating project directory from ${selectedExample}`);
|
|
43
|
-
filesystem.copy(selectedExamplePath, name);
|
|
43
|
+
filesystem.copy(selectedExamplePath, name, { overwrite });
|
|
44
44
|
}
|
|
45
45
|
else {
|
|
46
46
|
warning('Please select an example template to use.');
|
|
@@ -79,4 +79,4 @@ const command = {
|
|
|
79
79
|
},
|
|
80
80
|
};
|
|
81
81
|
exports.default = command;
|
|
82
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
82
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5pdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21tYW5kcy9pbml0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQ0EsdURBQWtFO0FBQ2xFLGlEQUEwRDtBQVUxRCxNQUFNLE9BQU8sR0FBbUI7SUFDOUIsSUFBSSxFQUFFLE1BQU07SUFDWixLQUFLLEVBQUUsQ0FBQyxHQUFHLENBQUM7SUFDWixXQUFXLEVBQUUsb0NBQW9DO0lBQ2pELEdBQUcsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEVBQUU7O1FBQ3JCLE1BQU0sRUFDSixVQUFVLEVBQ1YsVUFBVSxFQUNWLFFBQVEsRUFBRSxFQUFFLFFBQVEsRUFBRSxFQUN0QixLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxFQUNqQyxNQUFNLEdBQ1AsR0FBRyxPQUFPLENBQUE7UUFFWCxNQUFNLElBQUksR0FBRyxVQUFVLENBQUMsS0FBSyxDQUFBO1FBQzdCLE1BQU0sRUFDSixVQUFVLEdBQUcsS0FBSyxFQUNsQixFQUFFLEdBQUcsS0FBSyxFQUNWLE9BQU8sR0FBRyxLQUFLLEVBQ2YsU0FBUyxHQUFHLEtBQUssRUFDakIsU0FBUyxHQUFHLEtBQUssR0FDbEIsR0FBZ0IsVUFBVSxDQUFDLE9BQU8sQ0FBQTtRQUVuQyxJQUFJLElBQUksS0FBSyxTQUFTLEVBQUU7WUFDdEIsSUFBSSxDQUFDLFNBQVMsSUFBSSxVQUFVLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFO2dCQUM5QyxPQUFPLENBQ0wsb0JBQW9CLElBQUksbUZBQW1GLENBQzVHLENBQUE7Z0JBQ0QsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQTthQUNoQjtZQUVELE1BQU0sSUFBQSx3QkFBaUIsR0FBRSxDQUFBO1lBRXpCLElBQUksT0FBTyxLQUFLLEtBQUssRUFBRTtnQkFDckIsdUJBQXVCO2dCQUN2QixNQUFNLGtCQUFrQixHQUFHLFVBQVUsQ0FBQyxP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
|
package/docs/astro.config.mjs
CHANGED
|
@@ -1,32 +1,38 @@
|
|
|
1
1
|
---
|
|
2
|
-
import '../styles/theme.css'
|
|
3
|
-
import '../styles/index.css'
|
|
2
|
+
import '../styles/theme.css'
|
|
3
|
+
import '../styles/index.css'
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
<!-- Global Metadata -->
|
|
7
7
|
<meta charset="utf-8" />
|
|
8
8
|
<meta name="viewport" content="width=device-width" />
|
|
9
9
|
|
|
10
|
-
<link rel="icon" type="image/svg+xml" href="/
|
|
11
|
-
<link rel="alternate icon" type="image/x-icon" href="/
|
|
10
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
11
|
+
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
|
|
12
12
|
|
|
13
|
-
<link rel="sitemap" href="/
|
|
13
|
+
<link rel="sitemap" href="/sitemap.xml" />
|
|
14
14
|
|
|
15
15
|
<!-- Preload Fonts -->
|
|
16
16
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
17
17
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
18
|
-
<link
|
|
18
|
+
<link
|
|
19
|
+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap"
|
|
20
|
+
rel="stylesheet"
|
|
21
|
+
/>
|
|
19
22
|
|
|
20
23
|
<!-- Scrollable a11y code helper -->
|
|
21
|
-
<script src="/
|
|
24
|
+
<script src="/make-scrollable-code-focusable.js" is:inline></script>
|
|
22
25
|
|
|
23
26
|
<!-- This is intentionally inlined to avoid FOUC -->
|
|
24
27
|
<script is:inline>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
const root = document.documentElement
|
|
29
|
+
const theme = localStorage.getItem('theme')
|
|
30
|
+
if (
|
|
31
|
+
theme === 'dark' ||
|
|
32
|
+
(!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
33
|
+
) {
|
|
34
|
+
root.classList.add('theme-dark')
|
|
35
|
+
} else {
|
|
36
|
+
root.classList.remove('theme-dark')
|
|
37
|
+
}
|
|
32
38
|
</script>
|
|
@@ -16,7 +16,7 @@ const SearchForm: Component = () => {
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
onMount(async () => {
|
|
19
|
-
const content = await fetch('/
|
|
19
|
+
const content = await fetch('/search-index.json')
|
|
20
20
|
.then((res) => res.json())
|
|
21
21
|
const options = { keys: ['title', 'description', 'content'] }
|
|
22
22
|
fuse = new Fuse(content, options)
|
package/docs/src/config.ts
CHANGED
|
@@ -33,7 +33,7 @@ A local plain text editor is generally required for creating and editing your Ja
|
|
|
33
33
|
|
|
34
34
|
These are not the only available editors, so feel free to do your own research and pick what feels right to you!
|
|
35
35
|
|
|
36
|
-
## NodeJS Package Manager (optional)
|
|
36
|
+
## NodeJS & Package Manager (optional)
|
|
37
37
|
|
|
38
38
|
While [NodeJS](https://nodejs.org/en/) is not required for [Moddable XS](https://github.com/Moddable-OpenSource/moddable) projects, it is a dependency for installing and using the [`xs-dev` CLI](https://hipsterbrown.github.io/xs-dev/en/introduction/).
|
|
39
39
|
|
|
@@ -42,6 +42,7 @@ Node can be [downloaded directly from the website](https://nodejs.org/en/downloa
|
|
|
42
42
|
- [Volta](https://volta.sh/)
|
|
43
43
|
- [fnm](https://github.com/Schniz/fnm)
|
|
44
44
|
- [asdf](https://asdf-vm.com/guide/getting-started.html#_4-install-a-plugin)
|
|
45
|
+
- [rtx](https://github.com/jdxcode/rtx#installation)
|
|
45
46
|
- [`pnpm env`](https://pnpm.io/cli/env)
|
|
46
47
|
|
|
47
48
|
Node comes with [npm](https://docs.npmjs.com/cli/v8/commands/npm) as the included package manager, but there are other options available if needed:
|
|
@@ -62,3 +63,19 @@ Check out the [npm docs](https://docs.npmjs.com/resolving-eacces-permissions-err
|
|
|
62
63
|
## Linux Permissions
|
|
63
64
|
|
|
64
65
|
Setup commands rely on [`ssh-askpass`](https://packages.ubuntu.com/bionic/ssh-askpass) to prompt for permission when installing other tools and dependencies.
|
|
66
|
+
|
|
67
|
+
## Choose your hardware adventure
|
|
68
|
+
|
|
69
|
+
Hardware is not required to get started with xs-dev, or even to run some code, since there are [simulated devices available with the Moddable SDK](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/tools/tools.md#simulator).
|
|
70
|
+
|
|
71
|
+
Simulators are fun and everything, but controlling hardware with JavaScript is even better! `xs-dev` supports a few popular hardware platforms through [Moddable](https://github.com/Moddable-OpenSource/moddable):
|
|
72
|
+
|
|
73
|
+
- [ESP8266](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/devices/esp8266.md)
|
|
74
|
+
- [ESP32](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/devices/esp32.md)
|
|
75
|
+
- [Raspberry Pi Pico](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/devices/pico.md)
|
|
76
|
+
|
|
77
|
+
Each platform has a variety of features and form factors to support whatever you might dream up. This guide will do its best to provide code and diagrams that match the expectations of your chosen device(s) but cannot promise comprehensive coverage of every piece of hardware in existence.
|
|
78
|
+
|
|
79
|
+
If you run into issues or have a question, please [start a discussion in the GitHub repo](https://github.com/HipsterBrown/xs-dev/discussions).
|
|
80
|
+
|
|
81
|
+
Once you feel ready, [move on the first step of installing the CLI and the Moddable SDK](/en/guide/01-hello-console).
|
|
@@ -32,7 +32,7 @@ xs-dev setup
|
|
|
32
32
|
|
|
33
33
|
This will determine the correct tooling to install based on your operating system.
|
|
34
34
|
|
|
35
|
-
**[Windows support
|
|
35
|
+
**[Windows support is currently in beta](https://github.com/HipsterBrown/xs-dev/pull/63)**
|
|
36
36
|
|
|
37
37
|
Once this process is done, you should see a success message:
|
|
38
38
|
|
|
@@ -40,9 +40,19 @@ Once this process is done, you should see a success message:
|
|
|
40
40
|
Moddable SDK successfully set up! Start a new terminal session and run the "helloworld example": xs-dev run --example helloworld
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
or on Windows, you should see the following:
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
Moddable SDK successfully set up!
|
|
47
|
+
A shortcut to the Moddable Command Prompt has been created at \xs-dev\Moddable Command Prompt.lnk.
|
|
48
|
+
You should always use the Moddable Command Prompt when working with the Moddable SDK.
|
|
49
|
+
The Moddable Command Prompt will now open for you in a new Window. Please close this Command Prompt and use the Moddable Command Prompt instead.
|
|
50
|
+
As a next step, try running the "helloworld example" in the Moddable Command Prompt: xs-dev run --example helloworld'
|
|
51
|
+
```
|
|
52
|
+
|
|
43
53
|
## Run the Hello World example
|
|
44
54
|
|
|
45
|
-
To start a new terminal session, you can either execute your shell of choice (`bash`/`zsh`/`fish`)
|
|
55
|
+
To start a new terminal session, you can either execute your shell of choice (`bash`/`zsh`/`fish`), create a new terminal window / tab, or start the Moddable Command Prompt on Windows. This will ensure the expected tooling is available in your session [PATH](https://en.wikipedia.org/wiki/PATH_(variable)).
|
|
46
56
|
|
|
47
57
|
You can [run any Moddable example included in the SDK](../features/run#moddable-examples). The "Hello World" example provides the simplest program to get started and can be run in the [simulator](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/tools/tools.md#simulator):
|
|
48
58
|
|
|
@@ -52,14 +62,16 @@ xs-dev run --example helloworld
|
|
|
52
62
|
|
|
53
63
|
This will start up the debugger and simulator:
|
|
54
64
|
|
|
55
|
-

|
|
56
66
|
|
|
57
|
-
This will keep running until the `Ctrl+C` keys
|
|
67
|
+
This will keep running until interrupted using the `Ctrl+C` keys in the terminal session or both apps are quit.
|
|
58
68
|
|
|
59
69
|
## Keep exploring!
|
|
60
70
|
|
|
61
71
|
Use the `--list-examples` flag with the `run` command to search the extensive list of available examples to run in the simulator: `xs-dev run --list-examples`
|
|
62
72
|
|
|
73
|
+
When you're ready to move on, it's time to [create your first project and control some hardware](/en/guide/02-blinky).
|
|
74
|
+
|
|
63
75
|
## Troubleshooting
|
|
64
76
|
|
|
65
77
|
When attempting to run the Hello World example, if you continually see the following error (even after starting a new terminal session):
|
|
@@ -80,3 +92,18 @@ On "Unix-like" environments (MacOS, Linux), the `env` command should contain a r
|
|
|
80
92
|
env | grep MODDABLE
|
|
81
93
|
```
|
|
82
94
|
The above command should return something like `MODDABLE=/Users/<username>/.local/share/moddable` to indicate where the Moddable SDK has been installed in the filesystem.
|
|
95
|
+
|
|
96
|
+
Running [`xs-dev doctor` command](/en/features/doctor) will display relevant info about the development environment, which can be helpful for debugging and sharing in support issues:
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
xs-dev environment info:
|
|
100
|
+
CLI Version 0.19.3
|
|
101
|
+
OS Darwin
|
|
102
|
+
Arch arm64
|
|
103
|
+
NodeJS Version v16.14.0 (/path/to/node)
|
|
104
|
+
Python Version 3.10.9 (/path/to/python)
|
|
105
|
+
Moddable SDK Version 3.5.0 (/path/to/moddable)
|
|
106
|
+
Supported target devices mac
|
|
107
|
+
|
|
108
|
+
If this is related to an error when using the CLI, please create an issue at "https://github.com/hipsterbrown/xs-dev/issues/new" with the above info.
|
|
109
|
+
```
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Guiding Light
|
|
3
|
+
description: Initialize a new project and start to interact with some hardware!
|
|
4
|
+
layout: ../../../layouts/MainLayout.astro
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
**Initialize a new project and start to interact with some hardware!**
|
|
8
|
+
|
|
9
|
+
## Project creation
|
|
10
|
+
|
|
11
|
+
The [`init` command](/en/features/init) will create a new directory with the name provided and saffold the starting files based on a template or example:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
xs-dev init guiding-light
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The above command should result in the following output:
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
Generating Moddable project: guiding-light
|
|
21
|
+
Run the project using: cd guiding-light && xs-dev run
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The `guiding-light` directory should contain `main.js` and `manifest.json` files. `main.js` contains that was run from the [Hello Console example](/en/guide/02-hello-console):
|
|
25
|
+
|
|
26
|
+
```javascript
|
|
27
|
+
debugger;
|
|
28
|
+
|
|
29
|
+
let message = "Hello, world - sample";
|
|
30
|
+
trace(message);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
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).
|
|
34
|
+
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).
|
|
35
|
+
|
|
36
|
+
The [Moddable docs](https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/tools/manifest.md) describe the `manifest.json` as follows:
|
|
37
|
+
|
|
38
|
+
> A manifest is a JSON file that describes the modules and resources necessary to build a Moddable app.
|
|
39
|
+
|
|
40
|
+
The initialized `manifest.json` in the `guiding-light` project should look like this:
|
|
41
|
+
|
|
42
|
+
```json
|
|
43
|
+
{
|
|
44
|
+
"include": [
|
|
45
|
+
"$(MODDABLE)/examples/manifest_base.json"
|
|
46
|
+
],
|
|
47
|
+
"modules": {
|
|
48
|
+
"*": "./main"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
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.
|
|
54
|
+
|
|
55
|
+
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.
|
|
56
|
+
|
|
57
|
+
Executing `xs-dev run` should provide the same experience as the [Hello Console guide](/en/guide/01-hello-console).
|
|
58
|
+
|
|
59
|
+
_Quick tip: check out all the available simulators by using the [`--list-devices` flag](/en/features/run#select-a-device-target) with the `run` command and typing "simulator" to filter the list._
|
|
60
|
+
|
|
61
|
+
## Down to the metal
|
|
62
|
+
|
|
63
|
+
At this point, we have our [chosen hardware in hand](/en/guide/00-prepare#choose-your-hardware-adventure) and need to set up the dev environment to start running code on the device.
|
|
64
|
+
|
|
65
|
+
Just like the [previous step](/en/guide/01-hello-console#setup-system-tooling), the `setup` command will automate the installation and building of tooling required for the target device. The `--list-devices` flag will provide an interactive list of supported device platforms:
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
❯ xs-dev setup --list-devices
|
|
69
|
+
? Here are the available target devices: …
|
|
70
|
+
esp8266
|
|
71
|
+
esp32
|
|
72
|
+
pico
|
|
73
|
+
wasm
|
|
74
|
+
mac
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
_You may see different options depending on what operating system or version of xs-dev you are using._
|
|
78
|
+
|
|
79
|
+
Once this process is done, you should see a success message (where `<device>` is the selected target device):
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
Successfully set up <device> platform support for Moddable!
|
|
83
|
+
Test out the setup by starting a new terminal session, plugging in your device, and running: xs-dev run --example helloworld --device=<device>
|
|
84
|
+
If there is trouble finding the correct port, pass the "--port" flag to the above command with the path to the /dev.cu.* that matches your device.
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Running our project on the selected device (which should be connected to the computer somehow, presumable over USB) is the same command as before with the additional `--device` flag to pass in the target device platform:
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
xs-dev run --device <device>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
This will take some time to compile and send the code over to the device. When it has succeeded, the debugger will open like before but now it is tracing the logs coming from the hardware!
|
|
94
|
+
|
|
95
|
+
👏 Give yourself a round of applause! You have now run JavaScript on an embedded device! 🎉
|
|
96
|
+
|
|
97
|
+
## Hello blinky
|
|
98
|
+
|
|
99
|
+
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:
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
xs-dev include io
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
The [`include` command](/en/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:
|
|
106
|
+
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
"include": [
|
|
110
|
+
"$(MODDABLE)/examples/manifest_base.json",
|
|
111
|
+
"$(MODDABLE)/modules/io/manifest.json"
|
|
112
|
+
],
|
|
113
|
+
"modules": {
|
|
114
|
+
"*": "./main"
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
With that configured, the `main.js` file can be updated with the following code:
|
|
120
|
+
|
|
121
|
+
```javascript
|
|
122
|
+
const Digital = device.io.Digital;
|
|
123
|
+
const led = new Digital({
|
|
124
|
+
pin: device.pin.led,
|
|
125
|
+
mode: Digital.Output,
|
|
126
|
+
});
|
|
127
|
+
led.write(1);
|
|
128
|
+
|
|
129
|
+
let state = 0;
|
|
130
|
+
System.setInterval(() => {
|
|
131
|
+
led.write(state);
|
|
132
|
+
if (state === 0) {
|
|
133
|
+
state = 1;
|
|
134
|
+
} else {
|
|
135
|
+
state = 0;
|
|
136
|
+
}
|
|
137
|
+
}, 200);
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Using the [global `device` variable](https://419.ecma-international.org/#-16-host-provider-instance-global-variable) provided by the `io` module, we can access the [`Digital` IO class](https://419.ecma-international.org/#-10-io-classes-digital) for controlling the digital output to an LED. In this example, the `Digital` class is instantiated with the `pin` property set to the built-in led as [defined on the global `device`](https://419.ecma-international.org/#-16-host-provider-instance-pin-name-property) and the `mode` set to the [`Digital.Output`](https://419.ecma-international.org/#-10-io-classes-digital) static property found on the class. With that Digital instance variable called `led`, the [`write` method](https://419.ecma-international.org/#-9-io-class-pattern-write-method) is called with a value of `1` to send power to the LED.
|
|
141
|
+
|
|
142
|
+
```javascript
|
|
143
|
+
const Digital = device.io.Digital;
|
|
144
|
+
const led = new Digital({
|
|
145
|
+
pin: device.pin.led,
|
|
146
|
+
mode: Digital.Output,
|
|
147
|
+
});
|
|
148
|
+
led.write(1);
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
To make the light blink, the next value to be written is stored as the `state` variable. The global [`System` class](https://github.com/Moddable-OpenSource/moddable/blob/public/modules/io/system/system.js) provides the well-known [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) function that is found in other JavaScript runtimes like the Web and Node.js. Every 200 milliseconds, the `state` is written to the LED before being updated to the opposite value.
|
|
152
|
+
|
|
153
|
+
```javascript
|
|
154
|
+
let state = 0;
|
|
155
|
+
System.setInterval(() => {
|
|
156
|
+
led.write(state);
|
|
157
|
+
if (state === 0) {
|
|
158
|
+
state = 1;
|
|
159
|
+
} else {
|
|
160
|
+
state = 0;
|
|
161
|
+
}
|
|
162
|
+
}, 200);
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
The project can be run using the same command as before: `xs-dev run --device <device>`. If it succeeds, you should see a blinking LED somewhere on your device! ✨
|
|
166
|
+
|
|
167
|
+
## Keep exploring!
|
|
168
|
+
|
|
169
|
+
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/).
|
|
170
|
+
|
|
171
|
+
_Coming soon: react to digital input by pressing some buttons_
|
|
172
|
+
|
|
173
|
+
## Troubleshooting
|
|
174
|
+
|
|
175
|
+
If you're working with a device that doesn't have an on-board LED or encounter an error while trying to use the `device.pin.led` value, the [pin specifier](https://419.ecma-international.org/#-9-io-class-pattern-pin-specifier) can be set to a custom value based on the device datasheet or pinout diagram, like [this one for the Pico](https://pico.pinout.xyz/). The pin value can match the on-board LED or [an external LED](https://www.sparkfun.com/products/12062) connected to a GPIO, most likely by using a [breadboard](https://learn.sparkfun.com/tutorials/how-to-use-a-breadboard#building-your-first-breadboard-circuit).
|
|
@@ -14,14 +14,14 @@ The Moddable SDK and associated dev board tooling is incredibly empowering for e
|
|
|
14
14
|
|
|
15
15
|
**Features:**
|
|
16
16
|
|
|
17
|
-
- [X] [Moddable SDK setup](/
|
|
18
|
-
- [X] [SDK updates](/
|
|
19
|
-
- [X] [Teardown](/
|
|
20
|
-
- [X] [Device discovery](/
|
|
21
|
-
- [X] [Project creation](/
|
|
22
|
-
- [X] [Run a project or example](/
|
|
23
|
-
- [X] [SDK module management](/
|
|
24
|
-
- [X] [Get dev environment info](/
|
|
17
|
+
- [X] [Moddable SDK setup](/en/features/setup)
|
|
18
|
+
- [X] [SDK updates](/en/features/update)
|
|
19
|
+
- [X] [Teardown](/en/features/teardown)
|
|
20
|
+
- [X] [Device discovery](/en/features/scan)
|
|
21
|
+
- [X] [Project creation](/en/features/init)
|
|
22
|
+
- [X] [Run a project or example](/en/features/run)
|
|
23
|
+
- [X] [SDK module management](/en/features/include)
|
|
24
|
+
- [X] [Get dev environment info](/en/features/doctor)
|
|
25
25
|
- [ ] Third-party dependency management ([coming soon](https://github.com/HipsterBrown/xs-dev/issues/49))
|
|
26
26
|
|
|
27
27
|
**Platform support:**
|
|
@@ -34,9 +34,15 @@ The Moddable SDK and associated dev board tooling is incredibly empowering for e
|
|
|
34
34
|
|
|
35
35
|
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1gxFWBnDl18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
36
36
|
|
|
37
|
+
**Read through the starter guide for a detailed walkthrough**
|
|
38
|
+
|
|
39
|
+
0. [Prepare for embedded JS development](/en/guide/00-prepare)
|
|
40
|
+
1. [Hello Console](/en/guide/01-hello-console)
|
|
41
|
+
2. [Guiding light](/en/guide/02-blinky)
|
|
42
|
+
|
|
37
43
|
## Requirements
|
|
38
44
|
|
|
39
|
-
[Node.js >=
|
|
45
|
+
[Node.js >= v16](https://nodejs.org/en/)
|
|
40
46
|
|
|
41
47
|
_If you've never installed Node.js before, check out the [getting started guide for xs-dev](/xs-dev/en/guide/00-prepare#nodejs-package-manager-optional)._
|
|
42
48
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "xs-dev",
|
|
3
|
-
"version": "0.25.
|
|
3
|
+
"version": "0.25.3",
|
|
4
4
|
"description": "CLI for automating the setup and usage of Moddable XS tools",
|
|
5
5
|
"types": "build/types/types.d.ts",
|
|
6
6
|
"bin": {
|
|
@@ -54,9 +54,9 @@
|
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@astrojs/mdx": "^0.16.2",
|
|
57
|
-
"@astrojs/sitemap": "^1.
|
|
58
|
-
"@astrojs/solid-js": "^2.
|
|
59
|
-
"@astrojs/tailwind": "^3.1.
|
|
57
|
+
"@astrojs/sitemap": "^1.3.1",
|
|
58
|
+
"@astrojs/solid-js": "^2.2.0",
|
|
59
|
+
"@astrojs/tailwind": "^3.1.3",
|
|
60
60
|
"@babel/core": ">=7.20.12 <8.0.0",
|
|
61
61
|
"@changesets/cli": "^2.19.0",
|
|
62
62
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
|
69
69
|
"@typescript-eslint/parser": "^4.33.0",
|
|
70
70
|
"@webcomponents/template-shadowroot": "^0.1.0",
|
|
71
|
-
"astro": "^2.
|
|
71
|
+
"astro": "^2.5.0",
|
|
72
72
|
"eslint": "^7.32.0",
|
|
73
73
|
"eslint-config-prettier": "^8.3.0",
|
|
74
74
|
"eslint-config-standard-with-typescript": "^21.0.1",
|