Merge pull request #12 from mistlog/feature/inline-watch

Feature/inline watch

Author: mistlog

package.json

@@ -19,7 +19,7 @@
         "dist"
     ],
     "bin": {
-        "sd": "cli/cli.js"
+        "sd": "dist/cli/cli.js"
     },
     "main": "src/index.js",
     "types": "src/index.d.ts",
@@ -32,7 +32,7 @@
         "pretest": "npm run clean:ts && npm run transcribe",
         "test": "jest --coverage",
         "test:watch": "jest --watch",
-        "prebuild": "npm run clean:dist",
+        "prebuild": "npm run clean:dist && npm run clean:ts",
         "build": "npm run transcribe && tsc",
         "postbuild": "npm run clean:ts",
         "dev": "npm run transcribe:watch",

src/dsl/draft-dsl-svelte-watch.tsx

@@ -1,8 +1,26 @@
 import { IDSL } from "typedraft";
-import { Statement, labeledStatement, blockStatement, identifier } from "@babel/types";
+import {
+    Statement,
+    labeledStatement,
+    blockStatement,
+    identifier,
+    isExpressionStatement,
+    isStringLiteral,
+} from "@babel/types";
 
 export class SvelteWatch implements IDSL {
+    m_Merge: boolean;
+    constructor() {
+        this.m_Merge = true;
+    }
+
     Transcribe(block: Array<Statement>): Array<Statement> {
-        return [labeledStatement(identifier("$"), blockStatement(block))];
+        const [use_watch, ...rest] = block;
+        let to_watch = block;
+        if (isExpressionStatement(use_watch) && isStringLiteral(use_watch.expression)) {
+            // we are in inline watch
+            to_watch = rest;
+        }
+        return [labeledStatement(identifier("$"), blockStatement(to_watch))];
     }
 }

test/section/__snapshots__/script-section.test.ts.snap

@@ -42,3 +42,11 @@ $: {
   doubled = count * 2;
 }"
 `;
+
+exports[`translate script section track change: inline 1`] = `
+"let count = 0;
+let doubled = 0;
+$: {
+  doubled = count * 2;
+}"
+`;

test/section/script-section.test.ts

@@ -41,6 +41,23 @@ describe("translate script section", () => {
         SnapshotTest(code);
     });
 
+    test("track change: inline", () => {
+        const code = `
+            export default function App()
+            {
+                let count = 0;
+                let doubled = 0;
+            
+                {
+                    "use watch";
+                    doubled = count * 2;
+                }
+            }
+        `;
+
+        SnapshotTest(code);
+    });
+
     test("ignore variable declaration starts with $", () => {
         const code = `
             export default function App()