@monimesl/dot-cli 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/templates/showcase/pages/navigation/view.dml

@@ -0,0 +1,34 @@
+<View>
+  <Text variant="caption" tone="muted">{{ trail }}</Text>
+  <Text variant="title">Navigation and hooks</Text>
+  <Text>Each page opens on top of the one before it; back returns to the one below. A dot has room for {{ maxDepth }} pages at once.</Text>
+
+  <View variant="card" gap="small">
+    <Text>This is page {{ depth }} of {{ maxDepth }}</Text>
+    <View direction="row" wrap gap="small">
+      <Button onClick="openAnother" disabled="{{ depth >= maxDepth }}">Open another</Button>
+      <Button variant="secondary" onClick="replaceThis">Replace this one</Button>
+      <Button variant="secondary" onClick="back">Back</Button>
+      <Button variant="secondary" onClick="backTwo" disabled="{{ depth < 3 }}">Back two</Button>
+      <Button variant="secondary" onClick="home">Start over</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">Dash's bars, which each page sets: this one's title is its number</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="toggleColors">{{ colored ? 'Plain bar' : 'Blue bar' }}</Button>
+      <Button variant="secondary" onClick="toggleNavigationBar">{{ navigationBarHidden ? 'Show the navigation bar' : 'Hide the navigation bar' }}</Button>
+      <Button variant="secondary" onClick="toggleTabBar">{{ tabBarHidden ? 'Show the tab bar' : 'Hide the tab bar' }}</Button>
+    </View>
+    <Text variant="caption" tone="muted">Going back to a page shows its bars again, and leaving the dot puts Dash's own back.</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">The hooks this page ran, in order</Text>
+  <View variant="card" gap="small">
+    <For each="{{ hooks }}" item="run" key="id">
+      <Text>{{ run.id }}. {{ run.hook }}</Text>
+    </For>
+    <Text variant="caption" tone="muted">Open another page and come back: this one runs onHide, then onShow.</Text>
+  </View>
+</View>

package/dist/templates/showcase/pages/network/controller.ts

@@ -0,0 +1,107 @@
+import state from './state';
+
+const PICTURE = 'pictures/octocat.png';
+
+interface GitHubUser {
+  login: string;
+  name: string | null;
+  followers: number;
+}
+
+interface Echo {
+  json: unknown;
+  files: Record<string, string>;
+}
+
+export default definePage({
+  initialState: state,
+  actions: {
+    async fetchZen() {
+      try {
+        const response = await this.dash.network.http.request({
+          url: 'https://api.github.com/zen',
+        });
+        this.setState({ zen: response.ok ? response.body : `GitHub answered ${response.status}` });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async fetchProfile() {
+      try {
+        const { body } = await this.dash.network.http.request<GitHubUser>(
+          { url: 'https://api.github.com/users/octocat', as: 'json' },
+          { timeout: 10_000 },
+        );
+        this.setState({
+          profile: { login: body.login, name: body.name ?? body.login, followers: body.followers },
+        });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async sendJson() {
+      try {
+        const { body } = await this.dash.network.http.request<Echo>({
+          url: 'https://httpbin.org/post',
+          method: 'POST',
+          body: { item: 'rice', count: 2 },
+          as: 'json',
+        });
+        this.setState({ echo: JSON.stringify(body.json) });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async download() {
+      try {
+        const response = await this.dash.network.http.download({
+          url: 'https://avatars.githubusercontent.com/u/583231?s=128',
+          name: 'octocat.png',
+        });
+        if (response.ok) {
+          const { id, url, size } = response.file;
+          this.setState({ picture: { id, url, size }, kept: false });
+        } else {
+          this.setState({ note: `GitHub answered ${response.status}` });
+        }
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async upload(state) {
+      try {
+        const { body } = await this.dash.network.http.upload<Echo>({
+          url: 'https://httpbin.org/post',
+          fields: { title: 'Octocat' },
+          files: [{ field: 'picture', file: state.picture.id }],
+          as: 'json',
+        });
+        this.setState({ uploaded: Object.keys(body.files).join(', ') });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async sharePicture(state) {
+      try {
+        await this.dash.system.share({ file: state.picture.id });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async keep(state) {
+      try {
+        await this.dash.file.save(state.picture.id, PICTURE, { overwrite: true });
+        this.setState({ kept: true });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+    async tryUnlistedHost() {
+      try {
+        await this.dash.network.http.request({ url: 'https://example.com' });
+      } catch (error) {
+        this.setState({ note: (error as Error).message });
+      }
+    },
+  },
+});

package/dist/templates/showcase/pages/network/state.ts

@@ -0,0 +1,15 @@
+export interface Profile {
+  login: string;
+  name: string;
+  followers: number;
+}
+
+export default {
+  zen: '',
+  profile: null as Profile | null,
+  echo: '',
+  picture: { id: '', url: '', size: 0 },
+  uploaded: '',
+  kept: false,
+  note: '',
+};

package/dist/templates/showcase/pages/network/view.dml

@@ -0,0 +1,56 @@
+<View>
+  <Text variant="title">Network</Text>
+  <Text>Dash sends a dot's requests, and only to the hosts its dot.json lists.</Text>
+
+  <Text variant="caption" tone="muted">A request, read as text</Text>
+  <View variant="card" gap="small">
+    <Button variant="secondary" onClick="fetchZen">Ask GitHub for wisdom</Button>
+    <If condition="{{ zen }}">
+      <Text>"{{ zen }}"</Text>
+    </If>
+  </View>
+
+  <Text variant="caption" tone="muted">JSON, parsed with as: 'json'</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="fetchProfile">Load a profile</Button>
+      <Button variant="secondary" onClick="sendJson">Send JSON</Button>
+    </View>
+    <If condition="{{ profile }}">
+      <Text>{{ profile.name }} (@{{ profile.login }}) has {{ profile.followers }} followers</Text>
+    </If>
+    <If condition="{{ echo }}">
+      <Text>httpbin got {{ echo }}</Text>
+    </If>
+  </View>
+
+  <Text variant="caption" tone="muted">Files: download, upload and keep</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="download">Download</Button>
+      <Button variant="secondary" onClick="upload" disabled="{{ !picture.id }}">Upload</Button>
+      <Button variant="secondary" onClick="sharePicture" disabled="{{ !picture.id }}">Share</Button>
+      <Button variant="secondary" onClick="keep" disabled="{{ !picture.id || kept }}">Keep</Button>
+    </View>
+    <If condition="{{ picture.url }}">
+      <View direction="row" align="center" gap="medium">
+        <Image src="{{ picture.url }}" alt="Octocat" width="64" height="64" />
+        <Text variant="caption" tone="muted">{{ picture.size }} bytes, in a temporary file until the dot closes</Text>
+      </View>
+    </If>
+    <If condition="{{ uploaded }}">
+      <Text>httpbin got the file field "{{ uploaded }}"</Text>
+    </If>
+    <If condition="{{ kept }}">
+      <Text>Kept in the dot's own files: see the Files page</Text>
+    </If>
+  </View>
+
+  <Text variant="caption" tone="muted">A host dot.json doesn't list</Text>
+  <View variant="card" gap="small">
+    <Button variant="secondary" onClick="tryUnlistedHost">Reach example.com</Button>
+    <If condition="{{ note }}">
+      <Text variant="caption" tone="muted">{{ note }}</Text>
+    </If>
+  </View>
+</View>

package/dist/templates/showcase/pages/payments/controller.ts

@@ -0,0 +1,42 @@
+import state from './state';
+
+type Typed = DotEvent<{ value: string }>;
+
+// The code this page accepts; a real dot checks it with its server.
+const RIGHT_CODE = '123456';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    setAmount: (_state, event: DotEvent<{ value: number | null }>) => {
+      const amount = event.detail.value;
+      if (!amount) {
+        return { amount, amountText: '', request: '' };
+      }
+      return {
+        amount,
+        amountText: groupThousands(amount),
+        request: `https://pay.example.com/request?amount=${amount}&currency=SLE`,
+      };
+    },
+    setCode: (_state, event: Typed) => ({ code: event.detail.value, codeError: '' }),
+    checkCode: (_state, event: Typed) => {
+      if (event.detail.value === RIGHT_CODE) {
+        return { verified: true };
+      }
+      return { code: '', codeError: 'That code is wrong. Try again.' };
+    },
+    startAgain: () => ({ verified: false, code: '' }),
+    setPin: (_state, event: Typed) => ({ pin: event.detail.value }),
+  },
+});
+
+// 1250000 -> "1,250,000"
+function groupThousands(amount: number): string {
+  const digits = String(Math.round(amount));
+  const groups: string[] = [];
+  for (let end = digits.length; end > 0; end -= 3) {
+    groups.unshift(digits.slice(Math.max(0, end - 3), end));
+  }
+  return groups.join(',');
+}

package/dist/templates/showcase/pages/payments/state.ts

@@ -0,0 +1,10 @@
+export default {
+  amount: null as number | null,
+  // The amount with its thousands grouped, and what the QR code asks for.
+  amountText: '',
+  request: '',
+  code: '',
+  codeError: '',
+  verified: false,
+  pin: '',
+};

package/dist/templates/showcase/pages/payments/view.dml

@@ -0,0 +1,35 @@
+<View>
+  <Text variant="title">Payments</Text>
+  <Text>Fields for money and codes, and a QR code to be paid with.</Text>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">An amount, grouped as it's typed and sent to the page as a number</Text>
+    <AmountInput label="Amount to request" currency="Le" value="{{ amount }}" onChange="setAmount" hint="The QR code below asks for it" />
+    <View variant="card" align="center" gap="medium">
+      <If condition="{{ request }}">
+        <QRCode value="{{ request }}" size="180" label="A QR code to pay Le {{ amountText }}" />
+        <Text tone="muted">Scan to pay Le {{ amountText }}</Text>
+      </If>
+      <Else>
+        <EmptyState icon="qr-code" title="No amount yet" text="Type an amount above to make a QR code for it." />
+      </Else>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A one-time code: type it, paste it, or let the phone fill it in from an SMS</Text>
+    <If condition="{{ verified }}">
+      <Notice tone="success" title="Code accepted">The payment is confirmed.</Notice>
+      <Button variant="secondary" onClick="startAgain">Start again</Button>
+    </If>
+    <Else>
+      <CodeInput label="The code we sent to 076 •••• 21" value="{{ code }}" onChange="setCode" onComplete="checkCode" error="{{ codeError }}" hint="For this page, it's 123456" />
+    </Else>
+  </View>
+
+  <View gap="small">
+    <Text variant="caption" tone="muted">A PIN, hidden as it's typed</Text>
+    <CodeInput label="PIN" length="4" secure value="{{ pin }}" onChange="setPin" />
+    <Text tone="muted">{{ pin.length }} of 4 digits</Text>
+  </View>
+</View>

package/dist/templates/showcase/pages/state/controller.ts

@@ -0,0 +1,22 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    increment: (state) => {
+      const count = state.count + 1;
+      return { count, taps: [{ id: count }, ...state.taps] };
+    },
+    reset: () => ({ count: 0, taps: [] }),
+  },
+  actions: {
+    fillUp() {
+      while (this.state.count < this.state.limit) {
+        this.mutations.increment();
+      }
+    },
+    undo() {
+      this.setState((current) => ({ count: current.count - 1, taps: current.taps.slice(1) }));
+    },
+  },
+});

package/dist/templates/showcase/pages/state/state.ts

@@ -0,0 +1,10 @@
+export interface Tap {
+  id: number;
+}
+
+export default {
+  title: 'taps',
+  count: 0,
+  limit: 5,
+  taps: [] as Tap[],
+};

package/dist/templates/showcase/pages/state/view.dml

@@ -0,0 +1,33 @@
+<View>
+  <Text variant="title">State, mutations and actions</Text>
+  <Text>The page's state lives in the controller. A mutation turns an event into new state; an action can run several, or wait for Dash.</Text>
+
+  <View variant="card" gap="small">
+    <Text variant="title">{{ count }} of {{ limit }} {{ title }}</Text>
+    <If condition="{{ count >= limit }}">
+      <Text>That's the limit</Text>
+    </If>
+    <ElseIf condition="{{ count > 0 }}">
+      <Text>{{ limit - count }} to go</Text>
+    </ElseIf>
+    <Else>
+      <Text>Tap Add one to start</Text>
+    </Else>
+    <View direction="row" wrap gap="small">
+      <Button onClick="increment" disabled="{{ count >= limit }}">Add one</Button>
+      <Button variant="secondary" onClick="fillUp" disabled="{{ count >= limit }}">Fill up</Button>
+      <Button variant="secondary" onClick="undo" disabled="{{ count === 0 }}">Undo</Button>
+      <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">Each tap, newest first</Text>
+  <View variant="card" gap="small">
+    <For each="{{ taps }}" index="position" item="tap" key="id">
+      <Text>{{ position + 1 }}. Tap #{{ tap.id }}</Text>
+    </For>
+    <If condition="{{ taps.length === 0 }}">
+      <Text variant="caption" tone="muted">No taps yet</Text>
+    </If>
+  </View>
+</View>

package/dist/templates/showcase/pages/text/controller.ts

@@ -0,0 +1,10 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    addOne: (state) => ({ quantity: state.quantity + 1 }),
+    removeOne: (state) => ({ quantity: Math.max(0, state.quantity - 1) }),
+    toggleNickname: (state) => ({ nickname: state.nickname === null ? 'Countess' : null }),
+  },
+});

package/dist/templates/showcase/pages/text/state.ts

@@ -0,0 +1,7 @@
+export default {
+  name: 'Ada',
+  nickname: null as string | null,
+  price: 2.5,
+  quantity: 4,
+  tags: ['fast', 'small', 'typed'],
+};

package/dist/templates/showcase/pages/text/view.dml

@@ -0,0 +1,49 @@
+<View>
+  <Text variant="title">Text and bindings</Text>
+
+  <View variant="card" gap="small">
+    <Text variant="title">A title</Text>
+    <Text>Body text, the default</Text>
+    <Text variant="caption" tone="muted">A caption</Text>
+    <Text>Text can hold{{ ' ' }}<Text variant="title">bigger</Text>{{ ' ' }}and{{ ' ' }}<Text variant="caption" tone="muted">smaller</Text>{{ ' ' }}words.</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">Tones, weights and alignment</Text>
+  <View variant="card" gap="small">
+    <View direction="row" wrap gap="medium">
+      <Text tone="muted">muted</Text>
+      <Text tone="info">info</Text>
+      <Text tone="success">success</Text>
+      <Text tone="warning">warning</Text>
+      <Text tone="danger">danger</Text>
+    </View>
+    <View direction="row" gap="medium">
+      <Text weight="regular">regular</Text>
+      <Text weight="medium">medium</Text>
+      <Text weight="bold">bold</Text>
+    </View>
+    <Text align="center">In the center</Text>
+    <Text align="end">At the end</Text>
+    <Text maxLines="2">A long description is cut off after the lines you allow, so a list of them stays tidy however much each one says about itself.</Text>
+  </View>
+
+  <Text variant="caption" tone="muted">Bindings put state into the view</Text>
+  <View variant="card" gap="small">
+    <Text>Hello, {{ name }}</Text>
+    <Text>{{ quantity }} {{ quantity === 1 ? 'item' : 'items' }} at {{ price }} each: {{ quantity * price }}</Text>
+    <Text>Nickname: {{ nickname ?? 'none yet' }}</Text>
+    <Text>{{ tags.length }} tags, the first is "{{ tags[0] }}"</Text>
+    <View direction="row" wrap gap="small">
+      <Button variant="secondary" onClick="addOne">Add one</Button>
+      <Button variant="secondary" onClick="removeOne" disabled="{{ quantity === 0 }}">Remove one</Button>
+      <Button variant="secondary" onClick="toggleNickname">{{ nickname === null ? 'Give a nickname' : 'Drop the nickname' }}</Button>
+    </View>
+  </View>
+
+  <Text variant="caption" tone="muted">A list, one line per item</Text>
+  <View variant="card" gap="small">
+    <For each="{{ tags }}" item="tag" index="position" key="*this">
+      <Text>{{ position + 1 }}. {{ tag }}</Text>
+    </For>
+  </View>
+</View>

package/dist/templates/starter/.env

@@ -0,0 +1,3 @@
+# Public configuration for the dot. Anyone with the dot can read these variables: never put a
+# secret here. Read them in the service as `env.GREETING`.
+GREETING=Hello from your dot

package/dist/templates/starter/dot.ts

@@ -0,0 +1,3 @@
+export default defineDot({
+  pages: ['index'],
+});

package/dist/templates/starter/pages/index/controller.ts

@@ -0,0 +1,9 @@
+import state from './state';
+
+export default definePage({
+  initialState: state,
+  mutations: {
+    increment: (state) => ({ count: state.count + 1 }),
+    reset: () => ({ count: 0 }),
+  },
+});

package/dist/templates/starter/pages/index/state.ts

@@ -0,0 +1,4 @@
+export default {
+  greeting: env.GREETING,
+  count: 0,
+};

package/dist/templates/starter/pages/index/view.dml

@@ -0,0 +1,16 @@
+<View>
+  <View direction="row" align="center" gap="medium">
+    <Image src="statics/logo.png" alt="Logo" width="40" height="40" />
+    <Text variant="title">{{ greeting }}</Text>
+  </View>
+  <Text>Change pages/index/view.dml and save: the simulator shows it at once.</Text>
+
+  <View variant="card" align="center" gap="medium">
+    <Text variant="title">{{ count }}</Text>
+    <Text tone="muted">{{ count === 1 ? 'tap' : 'taps' }} so far</Text>
+    <View direction="row" gap="small">
+      <Button variant="secondary" onClick="reset" disabled="{{ count === 0 }}">Reset</Button>
+      <Button onClick="increment">Tap me</Button>
+    </View>
+  </View>
+</View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "The dotctl command: build mini apps and run them in the simulator",
   "type": "module",
   "repository": {
@@ -22,18 +22,23 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@monimesl/dot-dml-parser": "0.1.0-alpha.2",
-    "@monimesl/dot-script-parser": "0.1.0-alpha.2",
-    "@monimesl/dot-compiler": "0.1.0-alpha.2",
-    "@monimesl/dot-simulator": "0.1.0-alpha.2"
+    "typescript": "^5.9.3",
+    "uqr": "^0.1.3",
+    "@monimesl/dot-compiler": "0.1.0-alpha.4",
+    "@monimesl/dot-core": "0.1.0-alpha.4",
+    "@monimesl/dot-dml-parser": "0.1.0-alpha.4",
+    "@monimesl/dot-script-parser": "0.1.0-alpha.4",
+    "@monimesl/dot-simulator": "0.1.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
     "tsdown": "^0.23.0",
-    "typescript": "^5.9.3",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.1",
+    "vscode-languageserver": "^9.0.1",
+    "vscode-languageserver-protocol": "^3.17.5",
+    "vscode-languageserver-textdocument": "^1.0.15"
   },
   "publishConfig": {
     "access": "public"

package/dist/template/.env

@@ -1,3 +0,0 @@
-# Public configuration for the dot. Only DOT_PUBLIC_ variables reach it, and anyone with the dot
-# can read them: never put a secret here. Read them in the service as `env.DOT_PUBLIC_…`.
-DOT_PUBLIC_GREETING=Dash draws this alert, not the dot.

package/dist/template/dot.ts

@@ -1,6 +0,0 @@
-import { logger } from '@monimesl/dot-runtime';
-
-export default defineDot({
-  pages: ['index', 'help/tips'],
-  plugins: [logger()],
-});

package/dist/template/pages/help/tips/controller.ts

@@ -1,30 +0,0 @@
-import state from './state';
-
-export default definePage({
-  initialState: state,
-  hooks: {
-    // The page that opens this one passes its own trail and depth.
-    onLoad(options) {
-      this.setState({
-        count: Number(options.count ?? 0),
-        trail: `${options.trail ?? 'Home'} › Tips`,
-        depth: Number(options.depth ?? 1) + 1,
-      });
-    },
-  },
-  actions: {
-    back() {
-      this.navigation.back();
-    },
-    openAnother(state) {
-      this.navigation.push('help/tips', {
-        count: String(state.count),
-        trail: state.trail,
-        depth: String(state.depth),
-      });
-    },
-    startOver() {
-      this.navigation.reset('index');
-    },
-  },
-});

package/dist/template/pages/help/tips/state.ts

@@ -1,11 +0,0 @@
-export default {
-  count: 0,
-  trail: '',
-  depth: 0,
-  maxPages: 8,
-  tips: [
-    'Every tap is handled by controller.ts in a Worker',
-    'The view only renders the state it receives',
-    'Pages open on top of each other; Back returns to the one below',
-  ],
-};

package/dist/template/pages/help/tips/view.dml

@@ -1,15 +0,0 @@
-<Text variant="caption">{{ trail }}</Text>
-<Text variant="title">Tips</Text>
-<Text>Page {{ depth }} of {{ maxPages }}, opened at {{ count }} taps.</Text>
-
-<View variant="card" gap="small">
-  <For each="{{ tips }}" item="tip" key="*this">
-    <Text>{{ tip }}</Text>
-  </For>
-</View>
-
-<View direction="row">
-  <Button onClick="back">Back</Button>
-  <Button variant="secondary" onClick="openAnother" disabled="{{ depth >= maxPages }}">Open another</Button>
-  <Button variant="secondary" onClick="startOver">Start over</Button>
-</View>