Merge branch 'release/0.1.4'

mistlog · Feb 28, 2020 · 3d269c1 · 3d269c1
2 parents 4811839 + d807209
commit 3d269c1
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 22 deletions.
diff --git a/cli/literator.ts b/cli/literator.ts
@@ -89,15 +89,15 @@ export function CrossoutDirectory(path: string)
 
 export function ComposeFile(source: string)
 {
-    if (source.endsWith(".svelte.tsx"))
+    if (source.endsWith(".js.tsx") || source.endsWith(".ts"))
     {
-        const component = TranscribeSvelteDraftSync(source);
-        outputFileSync(source.replace(".tsx", ""), component, "utf8");
+        const code = TranscribeTypeDraftSync(source);
+        outputFileSync(source.replace(source.endsWith(".js.tsx") ? ".js.tsx" : ".ts", ".js"), code, "utf8");
     }
-    else if (source.endsWith(".js.tsx"))
+    else if (source.endsWith(".tsx"))
     {
-        const code = TranscribeTypeDraftSync(source);
-        outputFileSync(source.replace(".tsx", ""), code, "utf8");
+        const component = TranscribeSvelteDraftSync(source);
+        outputFileSync(source.replace(".tsx", ".svelte"), component, "utf8");
     }
 }
 
@@ -142,8 +142,8 @@ export async function TranscribeSvelteDraftAsync(source: string)
     const { import_section, script_section, template_section, module_context } = Transcribe(code);
 
     //
-    const style = source.replace(".svelte.tsx", ".css");
-    const style_section = await pathExists(style) ? await readFile(style, "utf8") : "";
+    const style_path = source.replace(".tsx", ".css");
+    const style_section = await pathExists(style_path) ? await readFile(style_path, "utf8") : "";
 
     //
     const component = AssembleComponent(import_section, script_section, template_section, style_section, module_context);
@@ -157,7 +157,7 @@ export function TranscribeSvelteDraftSync(source: string)
     const { import_section, script_section, template_section, module_context } = Transcribe(code);
 
     //
-    const style = source.replace(".svelte.tsx", ".css");
+    const style = source.replace(".tsx", ".css");
     const style_section = existsSync(style) ? readFileSync(style, "utf8") : "";
 
     //

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "svelte-draft",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "Develop svelte app in typedraft",
     "author": "mistlog",
     "license": "MIT",
@@ -51,7 +51,7 @@
         "filewalker": "^0.1.3",
         "fs-extra": "^8.1.0",
         "node-watch": "^0.6.3",
-        "typedraft": "^0.1.12"
+        "typedraft": "0.1.12"
     },
     "devDependencies": {
         "@types/fs-extra": "^8.0.1",

diff --git a/source-view/generator/closing-element-visitor.md b/source-view/generator/closing-element-visitor.md
@@ -20,11 +20,18 @@ export class ClosingElementVisitor {}
 ```
 
 ```typescript
-function HandleClosingElement(tag_name: string, e: NodePath<JSXClosingElement>, Append: (value: string) => void) {
-    "use match";
-    (tag_name: "if" | "each" | "await") => Append(`{/${tag_name}}`);
-    (tag_name: "else") => Append("");
-    (tag_name: "debug") => Append("}");
-    () => Append(ToString(e.node));
+function HandleClosingElement(tag_name: string, e: NodePath<JSXClosingElement>, Append: (value: string) => void) {
+    "use match";
+    (tag_name: "if" | "each" | "await") => Append(`{/${tag_name}}`);
+    (tag_name: "else") => Append("");
+    (tag_name: "debug" | "raw-html") => Append("}");
+    () => {
+        // handle special elements
+        if (tag_name.startsWith("svelte")) {
+            const name = e.get("name") as NodePath<JSXIdentifier>;
+            name.node.name = tag_name.replace("-", ":");
+        }
+        Append(ToString(e.node));
+    };
 }
 ```
diff --git a/source-view/generator/jsx-expression-container-visitor.md b/source-view/generator/jsx-expression-container-visitor.md
@@ -30,12 +30,23 @@ function HandleContainer(tag_name: string) {
     (tag_name: "debug") => {
         <HandleDebug />;
     };
+    (tag_name: "raw-html") => {
+        <HandleRawHTML />;
+    };
     () => {
         <HandleDefault />;
     };
 }
 ```
 
+```typescript
+function HandleRawHTML(container: NodePath<JSXExpressionContainer>, generator: IGenerator) {
+    // exclude "{" and "}" by using container.expression.node instead of container.node
+    const node = container.get("expression").node;
+    generator.Append(ToString(node));
+}
+```
+
 ```typescript
 function HandleDebug(container: NodePath<JSXExpressionContainer>, generator: IGenerator) {
     const to_debug = (container.get("expression") as NodePath<ArrayExpression>).get("elements");

diff --git a/source-view/generator/opening-element-visitor.md b/source-view/generator/opening-element-visitor.md
@@ -20,7 +20,7 @@ export class OpeningElementVisitor {}
 ```
 
 ```typescript
-const TargetTable = { DoubleClick: "dblclick", InnerHTML: "innerHTML", contentEditable: "contenteditable", Ref: "this" };
+const TargetTable = { DoubleClick: "dblclick", InnerHTML: "innerHTML", contentEditable: "contenteditable", Ref: "this", ScrollY: "scrollY" };
 ```
 
 ```typescript
@@ -115,6 +115,9 @@ function HandleOpeningElement(tag_name: string) {
     (tag_name: "debug") => {
         <HandleDebug />;
     };
+    (tag_name: "raw-html") => {
+        <HandleRawHTML />;
+    };
     (tag_name: "if") => {
         <HandleIf />;
     };
@@ -135,6 +138,12 @@ function HandleOpeningElement(tag_name: string) {
 
 ```typescript
 function HandleDefault(e: NodePath<JSXOpeningElement>, Append: (value: string) => void) {
+    // handle special elements
+    const tag_name = e.get("name");
+    if (tag_name.isJSXIdentifier() && tag_name.node.name.startsWith("svelte")) {
+        tag_name.node.name = (tag_name.node.name as string).replace("-", ":");
+    }
+
     //
     let element = ToString(e.node);
 
@@ -150,6 +159,12 @@ function HandleDebug(Append: (value: string) => void) {
 }
 ```
 
+```typescript
+function HandleRawHTML(Append: (value: string) => void) {
+    Append(`{@html `);
+}
+```
+
 ```typescript
 function HandleIf(e: NodePath<JSXOpeningElement>, Append: (value: string) => void) {
     const raw_condition = FindAttribute("condition", e)?.node;

diff --git a/src/generator/closing-element-visitor.tsx b/src/generator/closing-element-visitor.tsx
@@ -28,7 +28,16 @@ function HandleClosingElement(tag_name: string, e: NodePath<JSXClosingElement>,
 
     (tag_name: "if" | "each" | "await") => Append(`{/${tag_name}}`);
     (tag_name: "else") => Append("");
-    (tag_name: "debug") => Append("}");
-    () => Append(ToString(e.node));
+    (tag_name: "debug" | "raw-html") => Append("}");
+    () =>
+    {
+        // handle special elements
+        if (tag_name.startsWith("svelte"))
+        {
+            const name = e.get("name") as NodePath<JSXIdentifier>;
+            name.node.name = tag_name.replace("-", ":");
+        }
+        Append(ToString(e.node))
+    };
 }
 
diff --git a/src/generator/jsx-expression-container-visitor.tsx b/src/generator/jsx-expression-container-visitor.tsx
@@ -33,10 +33,20 @@ function HandleContainer(tag_name: string)
     //@ts-ignore
     (tag_name: "debug") => { <HandleDebug /> }
 
+    //@ts-ignore
+    (tag_name: "raw-html") => { <HandleRawHTML /> }
+
     //@ts-ignore
     () => { <HandleDefault /> }
 }
 
+function HandleRawHTML(container: NodePath<JSXExpressionContainer>, generator: IGenerator)
+{
+    // exclude "{" and "}" by using container.expression.node instead of container.node
+    const node = container.get("expression").node;
+    generator.Append(ToString(node));
+}
+
 function HandleDebug(container: NodePath<JSXExpressionContainer>, generator: IGenerator)
 {
     const to_debug = (container.get("expression") as NodePath<ArrayExpression>).get("elements");

diff --git a/src/generator/opening-element-visitor.tsx b/src/generator/opening-element-visitor.tsx
@@ -29,7 +29,8 @@ const TargetTable = {
     "DoubleClick": "dblclick",
     "InnerHTML": "innerHTML",
     "contentEditable": "contenteditable",
-    "Ref": "this"
+    "Ref": "this",
+    "ScrollY": "scrollY"
 }
 
 const NamespaceList = [
@@ -142,6 +143,9 @@ function HandleOpeningElement(tag_name: string)
     //@ts-ignore
     (tag_name: "debug") => { <HandleDebug /> }
 
+    //@ts-ignore
+    (tag_name: "raw-html") => { <HandleRawHTML /> }
+
     //@ts-ignore
     (tag_name: "if") => { <HandleIf /> }
 
@@ -160,6 +164,13 @@ function HandleOpeningElement(tag_name: string)
 
 function HandleDefault(e: NodePath<JSXOpeningElement>, Append: (value: string) => void)
 {
+    // handle special elements
+    const tag_name = e.get("name");
+    if (tag_name.isJSXIdentifier() && tag_name.node.name.startsWith("svelte"))
+    {
+        tag_name.node.name = (tag_name.node.name as string).replace("-", ":");
+    }
+
     //
     let element = ToString(e.node);
 
@@ -173,6 +184,11 @@ function HandleDebug(Append: (value: string) => void)
     Append(`{@debug `);
 }
 
+function HandleRawHTML(Append: (value: string) => void)
+{
+    Append(`{@html `);
+}
+
 function HandleIf(e: NodePath<JSXOpeningElement>, Append: (value: string) => void)
 {
     const raw_condition = FindAttribute("condition", e)?.node;

diff --git a/test/section/__snapshots__/template-section.test.ts.snap b/test/section/__snapshots__/template-section.test.ts.snap
@@ -63,6 +63,22 @@ exports[`translate template section handle use directive 1`] = `
 "
 `;
 
+exports[`translate template section support raw html 1`] = `
+"<p>{@html string}</p>
+"
+`;
+
+exports[`translate template section support special elements 1`] = `
+"<svelte:self {...file} />
+<svelte:head>
+  <link
+    rel=\\"stylesheet\\"
+    href=\\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\\"
+  />
+</svelte:head>
+"
+`;
+
 exports[`translate template section translate await 1`] = `
 "{#await promise}
 <div>...waiting</div>

diff --git a/test/section/template-section.test.ts b/test/section/template-section.test.ts
@@ -377,6 +377,37 @@ describe("translate template section", () =>
         SnapshotTest(code);
     })
 
+    test("support raw html", () =>
+    {
+        const code = `
+            export default function App()
+            {
+                let string = "this string contains some <strong>HTML!!!</strong>";
+
+                <p><raw-html>{string}</raw-html></p>
+            }
+        `;
+
+        SnapshotTest(code);
+    })
+
+    test("support special elements", () =>
+    {
+        const code = `
+            export default function App()
+            {
+                let file: string;
+                <svelte-self {...file}/>;
+
+                <svelte-head>
+                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
+                </svelte-head>
+            }
+        `;
+
+        SnapshotTest(code);
+    })
+
 
 })