Skip to content

Commit 3d269c1

Browse files
mistlogmistlog
committed
Merge branch 'release/0.1.4'
2 parents 4811839 + d807209 commit 3d269c1

11 files changed

+137
-22
lines changed

‎cli/literator.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -89,15 +89,15 @@ export function CrossoutDirectory(path: string)
8989

9090
export function ComposeFile(source: string)
9191
{
92-
if (source.endsWith(".svelte.tsx"))
92+
if (source.endsWith(".js.tsx") || source.endsWith(".ts"))
9393
{
94-
const component = TranscribeSvelteDraftSync(source);
95-
outputFileSync(source.replace(".tsx", ""), component, "utf8");
94+
const code = TranscribeTypeDraftSync(source);
95+
outputFileSync(source.replace(source.endsWith(".js.tsx") ? ".js.tsx" : ".ts", ".js"), code, "utf8");
9696
}
97-
else if (source.endsWith(".js.tsx"))
97+
else if (source.endsWith(".tsx"))
9898
{
99-
const code = TranscribeTypeDraftSync(source);
100-
outputFileSync(source.replace(".tsx", ""), code, "utf8");
99+
const component = TranscribeSvelteDraftSync(source);
100+
outputFileSync(source.replace(".tsx", ".svelte"), component, "utf8");
101101
}
102102
}
103103

@@ -142,8 +142,8 @@ export async function TranscribeSvelteDraftAsync(source: string)
142142
const { import_section, script_section, template_section, module_context } = Transcribe(code);
143143

144144
//
145-
const style = source.replace(".svelte.tsx", ".css");
146-
const style_section = await pathExists(style) ? await readFile(style, "utf8") : "";
145+
const style_path = source.replace(".tsx", ".css");
146+
const style_section = await pathExists(style_path) ? await readFile(style_path, "utf8") : "";
147147

148148
//
149149
const component = AssembleComponent(import_section, script_section, template_section, style_section, module_context);
@@ -157,7 +157,7 @@ export function TranscribeSvelteDraftSync(source: string)
157157
const { import_section, script_section, template_section, module_context } = Transcribe(code);
158158

159159
//
160-
const style = source.replace(".svelte.tsx", ".css");
160+
const style = source.replace(".tsx", ".css");
161161
const style_section = existsSync(style) ? readFileSync(style, "utf8") : "";
162162

163163
//

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-draft",
3-
"version": "0.1.3",
3+
"version": "0.1.4",
44
"description": "Develop svelte app in typedraft",
55
"author": "mistlog",
66
"license": "MIT",
@@ -51,7 +51,7 @@
5151
"filewalker": "^0.1.3",
5252
"fs-extra": "^8.1.0",
5353
"node-watch": "^0.6.3",
54-
"typedraft": "^0.1.12"
54+
"typedraft": "0.1.12"
5555
},
5656
"devDependencies": {
5757
"@types/fs-extra": "^8.0.1",

‎source-view/generator/closing-element-visitor.md

+13-6
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,18 @@ export class ClosingElementVisitor {}
2020
```
2121

2222
```typescript
23-
function HandleClosingElement(tag_name: string, e: NodePath<JSXClosingElement>, Append: (value: string) => void) {
24-
"use match";
25-
(tag_name: "if" | "each" | "await") => Append(`{/${tag_name}}`);
26-
(tag_name: "else") => Append("");
27-
(tag_name: "debug") => Append("}");
28-
() => Append(ToString(e.node));
23+
function HandleClosingElement(tag_name: string, e: NodePath<JSXClosingElement>, Append: (value: string) => void) {
24+
"use match";
25+
(tag_name: "if" | "each" | "await") => Append(`{/${tag_name}}`);
26+
(tag_name: "else") => Append("");
27+
(tag_name: "debug" | "raw-html") => Append("}");
28+
() => {
29+
// handle special elements
30+
if (tag_name.startsWith("svelte")) {
31+
const name = e.get("name") as NodePath<JSXIdentifier>;
32+
name.node.name = tag_name.replace("-", ":");
33+
}
34+
Append(ToString(e.node));
35+
};
2936
}
3037
```

‎source-view/generator/jsx-expression-container-visitor.md

+11
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,23 @@ function HandleContainer(tag_name: string) {
3030
(tag_name: "debug") => {
3131
<HandleDebug />;
3232
};
33+
(tag_name: "raw-html") => {
34+
<HandleRawHTML />;
35+
};
3336
() => {
3437
<HandleDefault />;
3538
};
3639
}
3740
```
3841

42+
```typescript
43+
function HandleRawHTML(container: NodePath<JSXExpressionContainer>, generator: IGenerator) {
44+
// exclude "{" and "}" by using container.expression.node instead of container.node
45+
const node = container.get("expression").node;
46+
generator.Append(ToString(node));
47+
}
48+
```
49+
3950
```typescript
4051
function HandleDebug(container: NodePath<JSXExpressionContainer>, generator: IGenerator) {
4152
const to_debug = (container.get("expression") as NodePath<ArrayExpression>).get("elements");

‎source-view/generator/opening-element-visitor.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export class OpeningElementVisitor {}
2020
```
2121

2222
```typescript
23-
const TargetTable = { DoubleClick: "dblclick", InnerHTML: "innerHTML", contentEditable: "contenteditable", Ref: "this" };
23+
const TargetTable = { DoubleClick: "dblclick", InnerHTML: "innerHTML", contentEditable: "contenteditable", Ref: "this", ScrollY: "scrollY" };
2424
```
2525

2626
```typescript
@@ -115,6 +115,9 @@ function HandleOpeningElement(tag_name: string) {
115115
(tag_name: "debug") => {
116116
<HandleDebug />;
117117
};
118+
(tag_name: "raw-html") => {
119+
<HandleRawHTML />;
120+
};
118121
(tag_name: "if") => {
119122
<HandleIf />;
120123
};
@@ -135,6 +138,12 @@ function HandleOpeningElement(tag_name: string) {
135138

136139
```typescript
137140
function HandleDefault(e: NodePath<JSXOpeningElement>, Append: (value: string) => void) {
141+
// handle special elements
142+
const tag_name = e.get("name");
143+
if (tag_name.isJSXIdentifier() && tag_name.node.name.startsWith("svelte")) {
144+
tag_name.node.name = (tag_name.node.name as string).replace("-", ":");
145+
}
146+
138147
//
139148
let element = ToString(e.node);
140149

@@ -150,6 +159,12 @@ function HandleDebug(Append: (value: string) => void) {
150159
}
151160
```
152161

162+
```typescript
163+
function HandleRawHTML(Append: (value: string) => void) {
164+
Append(`{@html `);
165+
}
166+
```
167+
153168
```typescript
154169
function HandleIf(e: NodePath<JSXOpeningElement>, Append: (value: string) => void) {
155170
const raw_condition = FindAttribute("condition", e)?.node;

‎src/generator/closing-element-visitor.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,16 @@ function HandleClosingElement(tag_name: string, e: NodePath<JSXClosingElement>,
2828

2929
(tag_name: "if" | "each" | "await") => Append(`{/${tag_name}}`);
3030
(tag_name: "else") => Append("");
31-
(tag_name: "debug") => Append("}");
32-
() => Append(ToString(e.node));
31+
(tag_name: "debug" | "raw-html") => Append("}");
32+
() =>
33+
{
34+
// handle special elements
35+
if (tag_name.startsWith("svelte"))
36+
{
37+
const name = e.get("name") as NodePath<JSXIdentifier>;
38+
name.node.name = tag_name.replace("-", ":");
39+
}
40+
Append(ToString(e.node))
41+
};
3342
}
3443

‎src/generator/jsx-expression-container-visitor.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,20 @@ function HandleContainer(tag_name: string)
3333
//@ts-ignore
3434
(tag_name: "debug") => { <HandleDebug /> }
3535

36+
//@ts-ignore
37+
(tag_name: "raw-html") => { <HandleRawHTML /> }
38+
3639
//@ts-ignore
3740
() => { <HandleDefault /> }
3841
}
3942

43+
function HandleRawHTML(container: NodePath<JSXExpressionContainer>, generator: IGenerator)
44+
{
45+
// exclude "{" and "}" by using container.expression.node instead of container.node
46+
const node = container.get("expression").node;
47+
generator.Append(ToString(node));
48+
}
49+
4050
function HandleDebug(container: NodePath<JSXExpressionContainer>, generator: IGenerator)
4151
{
4252
const to_debug = (container.get("expression") as NodePath<ArrayExpression>).get("elements");

‎src/generator/opening-element-visitor.tsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ const TargetTable = {
2929
"DoubleClick": "dblclick",
3030
"InnerHTML": "innerHTML",
3131
"contentEditable": "contenteditable",
32-
"Ref": "this"
32+
"Ref": "this",
33+
"ScrollY": "scrollY"
3334
}
3435

3536
const NamespaceList = [
@@ -142,6 +143,9 @@ function HandleOpeningElement(tag_name: string)
142143
//@ts-ignore
143144
(tag_name: "debug") => { <HandleDebug /> }
144145

146+
//@ts-ignore
147+
(tag_name: "raw-html") => { <HandleRawHTML /> }
148+
145149
//@ts-ignore
146150
(tag_name: "if") => { <HandleIf /> }
147151

@@ -160,6 +164,13 @@ function HandleOpeningElement(tag_name: string)
160164

161165
function HandleDefault(e: NodePath<JSXOpeningElement>, Append: (value: string) => void)
162166
{
167+
// handle special elements
168+
const tag_name = e.get("name");
169+
if (tag_name.isJSXIdentifier() && tag_name.node.name.startsWith("svelte"))
170+
{
171+
tag_name.node.name = (tag_name.node.name as string).replace("-", ":");
172+
}
173+
163174
//
164175
let element = ToString(e.node);
165176

@@ -173,6 +184,11 @@ function HandleDebug(Append: (value: string) => void)
173184
Append(`{@debug `);
174185
}
175186

187+
function HandleRawHTML(Append: (value: string) => void)
188+
{
189+
Append(`{@html `);
190+
}
191+
176192
function HandleIf(e: NodePath<JSXOpeningElement>, Append: (value: string) => void)
177193
{
178194
const raw_condition = FindAttribute("condition", e)?.node;

‎test/section/__snapshots__/template-section.test.ts.snap

+16
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,22 @@ exports[`translate template section handle use directive 1`] = `
6363
"
6464
`;
6565
66+
exports[`translate template section support raw html 1`] = `
67+
"<p>{@html string}</p>
68+
"
69+
`;
70+
71+
exports[`translate template section support special elements 1`] = `
72+
"<svelte:self {...file} />
73+
<svelte:head>
74+
<link
75+
rel=\\"stylesheet\\"
76+
href=\\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\\"
77+
/>
78+
</svelte:head>
79+
"
80+
`;
81+
6682
exports[`translate template section translate await 1`] = `
6783
"{#await promise}
6884
<div>...waiting</div>

‎test/section/template-section.test.ts

+31
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,37 @@ describe("translate template section", () =>
377377
SnapshotTest(code);
378378
})
379379

380+
test("support raw html", () =>
381+
{
382+
const code = `
383+
export default function App()
384+
{
385+
let string = "this string contains some <strong>HTML!!!</strong>";
386+
387+
<p><raw-html>{string}</raw-html></p>
388+
}
389+
`;
390+
391+
SnapshotTest(code);
392+
})
393+
394+
test("support special elements", () =>
395+
{
396+
const code = `
397+
export default function App()
398+
{
399+
let file: string;
400+
<svelte-self {...file}/>;
401+
402+
<svelte-head>
403+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
404+
</svelte-head>
405+
}
406+
`;
407+
408+
SnapshotTest(code);
409+
})
410+
380411

381412
})
382413

0 commit comments

Comments
 (0)