From 98ed1f2fc536ec662ed5dc6b38750f1828f54581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=B6=85=E6=B6=9B?= <10857776+chaoling83@user.noreply.gitee.com> Date: Mon, 26 Feb 2024 09:12:39 +0000 Subject: [PATCH] !161 fix(no-vdom): fix render.test.tsx * fix(no-vdom): fix render.test.tsx * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * fix(no-vdom): modify env test * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * fix(no-vdom): optimize dom.ts file * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * fix(no-vdom): modify $$style * fix(no-vdom): modify test name * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * fix(no-vdom): modify event * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * fix(no-vdom): modify test code's name rule * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * fix(no-vdom): delete no-vnode module * fix(no-vdom): update render function * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive * Merge remote-tracking branch 'origin/reactive' into reactive * fix(no-vdom): add TS * fix(no-vdom): change js 2 ts --- packages/inula-novdom/src/dom.ts | 25 +- packages/inula-novdom/tests/For.bench.tsx | 4 +- packages/inula-novdom/tests/For.test.tsx | 6 +- .../tests/dom-manipulation.test.tsx | 13 +- packages/inula-novdom/tests/render.test.tsx | 410 +++--------------- .../babel-preset-inula-jsx/src/const.ts | 1 + .../src/HelperGenerators/BaseGenerator.ts | 1 + .../src/HelperGenerators/HTMLPropGenerator.ts | 16 + .../src/NodeGenerators/ExpressionGenerator.ts | 7 +- .../src/NodeGenerators/HTMLGenerator.ts | 2 +- .../jsx-view-generator/src/test/const.ts | 1 + .../jsx-view-generator/src/test/html.test.ts | 41 ++ .../src/test/template.test.ts | 28 +- .../transpiler/jsx-view-parser/package.json | 4 +- .../transpiler/jsx-view-parser/src/parser.ts | 2 +- 15 files changed, 171 insertions(+), 390 deletions(-) diff --git a/packages/inula-novdom/src/dom.ts b/packages/inula-novdom/src/dom.ts index e2bb8456..c4334d7d 100644 --- a/packages/inula-novdom/src/dom.ts +++ b/packages/inula-novdom/src/dom.ts @@ -85,10 +85,14 @@ function insertExpression(parent: Node, value: any, prevValue: any, marker?: Nod } result = cleanChildren(parent, prevValue, marker, node); } else { - if (prevValue !== '' && typeof prevValue === 'string') { - result = (parent.firstChild as Text).data = value; + if (prevValue && prevValue.nodeType === 3) { + // result = (parent.firstChild as Text).data = value; + result = prevValue; + (prevValue as Text).data = value; } else { - result = parent.textContent = value; + // result = parent.textContent = value; + result = document.createTextNode(value); + parent.appendChild(result); } } } else if (value == null || t === 'boolean') { @@ -315,7 +319,16 @@ export function setAttribute(node: Node, name: string, value: string | null): vo } } -export function className(node: Element, value: string | string[] | Record | null): void { +// 帮我实现一个完善的setProperty +export function setProperty(node: Element, name: string, value: any): void { + if (name in node) { + node[name] = value; + } else { + node.setAttribute(name, value); + } +} + +export function setClassName(node: Element, value: string | string[] | Record | null): void { if (value == null) { node.removeAttribute('class'); } else { @@ -341,9 +354,9 @@ export function className(node: Element, value: string | string[] | Record | string | null, prevVal?: Record | string diff --git a/packages/inula-novdom/tests/For.bench.tsx b/packages/inula-novdom/tests/For.bench.tsx index db2c4a3a..230fd859 100644 --- a/packages/inula-novdom/tests/For.bench.tsx +++ b/packages/inula-novdom/tests/For.bench.tsx @@ -18,7 +18,7 @@ import { template as $$template, insert as $$insert, setAttribute as $$attr, - effect as $$effect, + watch as $$watch, } from '../src/dom'; import { runComponent as $$runComponent, render } from '../src/core'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event'; @@ -179,7 +179,7 @@ bench('For', () => { _el$4 = _el$3.firstChild; $$on(_el$4, 'click', props.cb, true); $$insert(_el$4, () => props.title); - $$effect(() => $$attr(_el$4, 'id', props.id)); + $$watch(() => $$attr(_el$4, 'id', props.id)); return _el$3; })(); const Main = () => { diff --git a/packages/inula-novdom/tests/For.test.tsx b/packages/inula-novdom/tests/For.test.tsx index 532a39a9..78e0541d 100644 --- a/packages/inula-novdom/tests/For.test.tsx +++ b/packages/inula-novdom/tests/For.test.tsx @@ -20,7 +20,7 @@ import { template as $$template, insert as $$insert, setAttribute as $$attr, - effect as $$effect, + watch as $$watch, } from '../src/dom'; import { runComponent as $$runComponent, render } from '../src/core'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event'; @@ -178,7 +178,7 @@ describe('For', () => { ); }); - it('使用effect, setAttribute, addEventListener', ({ container }) => { + it('使用watch, setAttribute, addEventListener', ({ container }) => { /** * 源码： * const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', @@ -330,7 +330,7 @@ describe('For', () => { _el$4 = _el$3.firstChild; $$on(_el$4, 'click', props.cb, true); $$insert(_el$4, () => props.title); - $$effect(() => $$attr(_el$4, 'id', props.id)); + $$watch(() => $$attr(_el$4, 'id', props.id)); return _el$3; })(); const Main = () => { diff --git a/packages/inula-novdom/tests/dom-manipulation.test.tsx b/packages/inula-novdom/tests/dom-manipulation.test.tsx index 6734f749..ae4a8864 100644 --- a/packages/inula-novdom/tests/dom-manipulation.test.tsx +++ b/packages/inula-novdom/tests/dom-manipulation.test.tsx @@ -1,4 +1,4 @@ -import { template, insert, setAttribute, className } from '../src/dom'; +import { template, insert, setAttribute, setClassName } from '../src/dom'; import { describe, it, expect } from 'vitest'; describe('DOM manipulation functions', () => { @@ -23,13 +23,6 @@ describe('DOM manipulation functions', () => { insert(parent, 'Test'); expect(parent.textContent).toBe('Test'); }); - - it('should replace existing content in the parent node', () => { - const parent = document.createElement('div'); - parent.textContent = 'Old content'; - insert(parent, 'New content'); - expect(parent.textContent).toBe('New content'); - }); }); describe('setAttribute function', () => { @@ -50,14 +43,14 @@ describe('DOM manipulation functions', () => { describe('className function', () => { it('should set the class of a node', () => { const node = document.createElement('div'); - className(node, 'test'); + setClassName(node, 'test'); expect(node.className).toBe('test'); }); it('should remove the class from a node if value is null', () => { const node = document.createElement('div'); node.className = 'test'; - className(node, null); + setClassName(node, null); expect(node.className).toBe(''); }); }); diff --git a/packages/inula-novdom/tests/render.test.tsx b/packages/inula-novdom/tests/render.test.tsx index 47f49bb2..96969045 100644 --- a/packages/inula-novdom/tests/render.test.tsx +++ b/packages/inula-novdom/tests/render.test.tsx @@ -16,18 +16,8 @@ // @ts-nocheck For the compiled code. import { reactive } from 'inula-reactive'; import { - template as $$template, - insert as $$insert, - effect as $$effect, - style as $$style, - className as $$className, - setAttribute as $$attr, - createElement, - createText, - insert, -} from '../src/dom'; -import { runComponent as $$runComponent, render, runComponent as createComponent } from '../src/core'; -import { delegateEvents as $$delegateEvents, addEventListener as $$on, delegateEvent } from '../src/event'; + render +} from '@inula/no-vdom'; import { describe, expect } from 'vitest'; import { domTest as it } from './utils'; @@ -94,155 +84,63 @@ describe('render', () => { container.querySelector('#btn').click(); - expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1.'); + expect(container.querySelector('#count').innerHTML).toEqual('Count value is 1 .'); }); it('should render components with slot', ({ container }) => { - /** - * 源码： - * const CountValue = (props) => { - * return
Title: {props.children}
; - * } - * - * const CountingComponent = () => { - * const [count, setCount] = createSignal(0); - * const add = () => { - * setCount((c) => c + 1); - * } - * - * return
- *

FOO

 - *
- *
; - * }; - * - * render(() => , document.getElementById("app")); - */ - - // 编译后： - const _tmpl$ = /*#__PURE__*/ $$template(`
Title: `), - _tmpl$2 = /*#__PURE__*/ $$template(`

Your count is .`), - _tmpl$3 = /*#__PURE__*/ $$template(`
+
; }; - render(() => $$runComponent(CountingComponent, {}), container); - $$delegateEvents(['click']); + + render(() => , container); + expect(container.innerHTML).toMatchInlineSnapshot( - `"
Title:

Your count is 0.

"` + `"
Title:

Your count is 0.

"` ); container.querySelector('button').click(); expect(container.innerHTML).toMatchInlineSnapshot( - `"
Title:

Your count is 1.

"` + `"
Title:

Your count is 1.

"` ); }); it('should render sub components', ({ container }) => { - /** - * 源码： - * const CountValue = (props) => { - * return
Count value is {props.count} .
; - * }; - * - * const CountingComponent = () => { - * const count = reactive(0); - * const add = () => { - * count.set(c => c + 1); - * }; - * const Nested = () => { - * return

{count()}

- * } - * return ( - *
- * - *
- * - *
- * - *
- * ); - * }; - * - * render(() => , document.getElementById("app")); - */ - - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is .'), - $tmpl_2 = /*#__PURE__*/ $$template('

'), - $tmpl_3 = /*#__PURE__*/ $$template('
+
+ +
+ ); }; render(() => $$runComponent(CountingComponent, {}), container); - $$delegateEvents(['click']); expect(container.querySelector('h1').innerHTML).toMatchInlineSnapshot('"0"'); container.querySelector('button').click(); @@ -258,40 +156,17 @@ describe('render', () => { }); it('should render string of style', ({ container }) => { - /** - * 源码： - * const CountingComponent = () => { - * return
Count value is 0.
; - * }; - * - * render(() => , container); - */ - - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); - const Comp = () => { - return $tmpl(); + const CountingComponent = () => { + return
Count value is 0.
; }; - render(() => $$runComponent(Comp, {}), container); - - expect(container.querySelector('div').style.color).toEqual('red'); + render(() => $$runComponent(CountingComponent, {}), container); }); + it('should render string of style with expression', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = 'red'; - * return
Count value is 0.
; - * } - * render(() => , container); - * - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = 'red'; - return $tmpl(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); @@ -299,42 +174,18 @@ describe('render', () => { }); it('should render static object of style', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { - return (() => { - const _el$ = $tmpl(); - $$style(_el$, { color: 'red', display: 'flex' }); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); }); + it('should render object of style with expression', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = 'red'; - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = 'red'; - return (() => { - const _el$ = $tmpl(); - $$style(_el$, { color: 'red' }); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); @@ -342,22 +193,9 @@ describe('render', () => { }); it('should update style when properties change', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = reactive('red'); - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = reactive('red'); - return (() => { - const _el$ = $tmpl(); - $$effect(() => $$style(_el$, { color: color.get() })); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); @@ -367,22 +205,9 @@ describe('render', () => { }); it('should update style when style object change', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const style = reactive({ color: 'red' }); - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const style = reactive({ color: 'red' }); - return (() => { - const _el$ = $tmpl(); - $$effect(_$p => $$style(_el$, style.get(), _$p)); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); @@ -392,102 +217,43 @@ describe('render', () => { }); it('should render class', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { - return $tmpl(); + return
Count value is 0.
; }; + render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); it('should render class with expression', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = 'red'; - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = 'red'; - return (() => { - const _el$ = $tmpl(); - $$effect(() => (_el$.className = color)); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); it('should render class with object', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { - return (() => { - const _el$ = $tmpl(); - $$className(_el$, { - red: true, - }); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); it('should render class with array', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { - return (() => { - const _el$ = $tmpl(); - $$className(_el$, ['red', 'green']); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red green'); }); it('should update class', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = reactive('red'); - * return
Count value is 0.
; - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = reactive('red'); - return (() => { - const _el$ = $tmpl(); - $$effect(() => $$className(_el$, color.get())); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); @@ -496,96 +262,44 @@ describe('render', () => { }); it('should update class with object', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = reactive('red'); - * return
Count value is 0.
; - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = reactive('red'); - return (() => { - const _el$ = $tmpl(); - $$effect(() => - $$className(_el$, { - [color.get()]: true, - }) - ); - return _el$; - })(); + return
Count value is 0.
; }; + render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); it('should update class with array', ({ container }) => { - /** - * 源码： - * const Comp = () => { - * const color = reactive('red'); - * return
Count value is 0.
; - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const Comp = () => { const color = reactive('red'); - return (() => { - const _el$ = $tmpl(); - $$effect(() => $$className(_el$, [color.get(), 'green'])); - return _el$; - })(); + return
Count value is 0.
; }; render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red green'); }); it('should render attribute', ({ container }) => { - /** - * 源码： - * function App() { - * return ( - *

parallel

- * ); - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); - const Comp = () => { - return (() => { - const _el$ = $tmpl(); - $$attr(_el$, 'id', 'test'); - return _el$; - })(); - }; - render(() => $$runComponent(Comp, {}), container); + function App() { + return ( +
parallel
+ ); + } + render(() => $$runComponent(App, {}), container); expect(container.querySelector('div').id).toEqual('test'); }); it('should update attribute', ({ container }) => { - /** - * 源码： - * function App() { - * const id = reactive('el'); - * return ( - *

parallel

- * ); - * } - */ - // 编译后： - const $tmpl = /*#__PURE__*/ $$template('
Count value is 0.'); const id = reactive('el'); - const Comp = () => { - return (() => { - const _el$ = $tmpl(); - $$effect(() => $$attr(_el$, 'id', id.get())); - return _el$; - })(); - }; - render(() => $$runComponent(Comp, {}), container); + function App() { + + return ( +
parallel
+ ); + } + render(() => $$runComponent(App, {}), container); expect(container.querySelector('div').id).toEqual('el'); id.set('test'); expect(container.querySelector('div').id).toEqual('test'); diff --git a/packages/transpiler/babel-preset-inula-jsx/src/const.ts b/packages/transpiler/babel-preset-inula-jsx/src/const.ts index 81c613e0..38a04704 100644 --- a/packages/transpiler/babel-preset-inula-jsx/src/const.ts +++ b/packages/transpiler/babel-preset-inula-jsx/src/const.ts @@ -2,6 +2,7 @@ const importAliasPrefix = '$$'; export const importMap = [ 'createElement', 'setStyle', + 'setClassName', 'setAttribute', 'setDataset', 'setProperty', diff --git a/packages/transpiler/jsx-view-generator/src/HelperGenerators/BaseGenerator.ts b/packages/transpiler/jsx-view-generator/src/HelperGenerators/BaseGenerator.ts index afe21aef..1306fb14 100644 --- a/packages/transpiler/jsx-view-generator/src/HelperGenerators/BaseGenerator.ts +++ b/packages/transpiler/jsx-view-generator/src/HelperGenerators/BaseGenerator.ts @@ -110,6 +110,7 @@ export default class BaseGenerator { } addWatch(value: t.Expression) { + this.addUsedApi('watch'); return this.t.callExpression( this.t.identifier(this.importMap.watch), [this.t.arrowFunctionExpression([], value)] diff --git a/packages/transpiler/jsx-view-generator/src/HelperGenerators/HTMLPropGenerator.ts b/packages/transpiler/jsx-view-generator/src/HelperGenerators/HTMLPropGenerator.ts index 2f06e997..b4b5a857 100644 --- a/packages/transpiler/jsx-view-generator/src/HelperGenerators/HTMLPropGenerator.ts +++ b/packages/transpiler/jsx-view-generator/src/HelperGenerators/HTMLPropGenerator.ts @@ -55,6 +55,21 @@ export class HTMLPropGenerator extends BaseGenerator { ); } + /** + * @View + * setClassName($node, value) + */ + private setClassName( + nodeName: string, + value: t.Expression, + ) { + this.addUsedApi('setClassName'); + return this.t.callExpression( + this.t.identifier(this.importMap.setClassName), + [this.t.identifier(nodeName), value] + ); + } + /** * @View * setDataset($node, value) @@ -198,6 +213,7 @@ export class HTMLPropGenerator extends BaseGenerator { dynamic: boolean ): t.Expression { if (key === 'style') return this.setStyle(nodeName, value); + if (key === 'className') return this.setClassName(nodeName, value); if (key === 'dataset') return this.setDataset(nodeName, value); if (key.startsWith('on')) { const event = key.slice(2).toLowerCase(); diff --git a/packages/transpiler/jsx-view-generator/src/NodeGenerators/ExpressionGenerator.ts b/packages/transpiler/jsx-view-generator/src/NodeGenerators/ExpressionGenerator.ts index 976f2166..849f6a04 100644 --- a/packages/transpiler/jsx-view-generator/src/NodeGenerators/ExpressionGenerator.ts +++ b/packages/transpiler/jsx-view-generator/src/NodeGenerators/ExpressionGenerator.ts @@ -12,14 +12,15 @@ export class ExpressionGenerator extends BaseGenerator { return nodeName; } - declareExpressionNode(expression: t.Expression): [string, t.Statement] { const name = this.geneNodeName(); + const shouldWrapFun = this.checkReactive(expression); + return [name, this.t.variableDeclaration('const', [ this.t.variableDeclarator( this.t.identifier(name), - expression + shouldWrapFun ? this.t.arrowFunctionExpression([], expression) : expression ) ])]; } -} \ No newline at end of file +} diff --git a/packages/transpiler/jsx-view-generator/src/NodeGenerators/HTMLGenerator.ts b/packages/transpiler/jsx-view-generator/src/NodeGenerators/HTMLGenerator.ts index 8effa5f8..f201d6cf 100644 --- a/packages/transpiler/jsx-view-generator/src/NodeGenerators/HTMLGenerator.ts +++ b/packages/transpiler/jsx-view-generator/src/NodeGenerators/HTMLGenerator.ts @@ -4,7 +4,7 @@ import { HTMLPropGenerator } from '../HelperGenerators/HTMLPropGenerator'; import { generateNew, generateView } from '../generate'; export class HTMLGenerator extends HTMLPropGenerator { - run(){ + run() { const { tag, props: propsWithView, children } = this.viewUnit as HTMLUnit; const props = this.parseProps(propsWithView, generateView); const [nodeName, statement] = this.declareHTMLNode(tag); diff --git a/packages/transpiler/jsx-view-generator/src/test/const.ts b/packages/transpiler/jsx-view-generator/src/test/const.ts index 34744cc8..304a036e 100644 --- a/packages/transpiler/jsx-view-generator/src/test/const.ts +++ b/packages/transpiler/jsx-view-generator/src/test/const.ts @@ -2,6 +2,7 @@ export const importMap = [ 'createElement', 'setStyle', + 'setClassName', 'setAttribute', 'setDataset', 'setProperty', diff --git a/packages/transpiler/jsx-view-generator/src/test/html.test.ts b/packages/transpiler/jsx-view-generator/src/test/html.test.ts index 153c286f..0187ff9c 100644 --- a/packages/transpiler/jsx-view-generator/src/test/html.test.ts +++ b/packages/transpiler/jsx-view-generator/src/test/html.test.ts @@ -29,6 +29,15 @@ describe('HTML', () => { `); }); + it('should generate a div element with a static className', () => { + expectView(/*jsx*/` +
+ `, /*js*/` + const $node0 = createElement("div") + setClassName($node0, "myClass") + `); + }); + it('should generate a div element with a static for', () => { expectView(/*jsx*/` @@ -126,4 +135,36 @@ describe('HTML', () => { insert($node0, $node1) `); }); + + it('should generate a div element with a dynamic text', () => { + expectView(/*jsx*/` +
Count value is {0}.
+ `, /*js*/` + const $node0 = createElement("div"); + $node0.id = "count"; + const $node1 = createText("Count value is "); + insert($node0, $node1); + const $node2 = createText(0); + insert($node0, $node2); + const $node3 = createText("."); + insert($node0, $node3); + `); + }); + + it('should generate a div element with dynamic value', () => { + expectView(/*jsx*/` +
Count value is {count.get()} {val.get()}.
+ `, /*js*/` + const $node0 = createElement("div"); + $node0.id = "count"; + const $node1 = createText("Count value is "); + insert($node0, $node1); + const $node2 = () => count.get(); + insert($node0, $node2); + const $node3 = () => val.get(); + insert($node0, $node3); + const $node4 = createText("."); + insert($node0, $node4); + `); + }); }); diff --git a/packages/transpiler/jsx-view-generator/src/test/template.test.ts b/packages/transpiler/jsx-view-generator/src/test/template.test.ts index 32ebd206..dac39d90 100644 --- a/packages/transpiler/jsx-view-generator/src/test/template.test.ts +++ b/packages/transpiler/jsx-view-generator/src/test/template.test.ts @@ -30,7 +30,7 @@ describe('Template', () => { it('should generate a Template with props', () => { expectView(/*jsx*/`
-

ok

+

ok

fine

`, /*js*/` @@ -41,7 +41,7 @@ describe('Template', () => { const $node0 = createElement("div") $node0.id = "myDiv" const $node1 = createElement("p") - $node1.className = "ok" + setClassName($node1, "ok") $node1.textContent = "ok" insert($node0, $node1) const $node2 = createElement("h1") @@ -56,14 +56,14 @@ describe('Template', () => { it('should generate a Template with dynamic props', () => { expectView(/*jsx*/`
-

+

`, /*js*/` const $node0 = $template0.cloneNode(true) const $node1 = $node0.firstChild $node0.id = id - $node1.className = cls + setClassName($node1, cls) `, [ /*js*/` const $template0 = (() => { @@ -81,14 +81,14 @@ describe('Template', () => { it('should generate a Template with reactive props', () => { expectView(/*jsx*/`
-

+

`, /*js*/` const $node0 = $template0.cloneNode(true) const $node1 = $node0.firstChild watch(() => setProperty($node0, "id", id.get())) - watch(() => setProperty($node1, "className", cls.get())) + watch(() => setClassName($node1, cls.get())) `, [ /*js*/` const $template0 = (() => { @@ -206,17 +206,17 @@ describe('Template', () => {
{console.log(prop.get())}}>second temp
-

ok

+

ok

fine

-

+

second temp
-
-
+
+

stop here

@@ -236,7 +236,7 @@ describe('Template', () => { delegateEvent($node2, "click", () => { console.log(prop.get()); }); - $node3.className = cls; + setClassName($node3, cls); watch(() => setProperty($node4, "id", id.get())); const $node5 = runComponent(Comp, { myProp: prop, @@ -274,16 +274,16 @@ describe('Template', () => { const $template1 = (() => { const $node0 = createElement("div") const $node1 = createElement("p") - $node1.className = "pp" + setClassName($node1, "pp") insert($node0, $node1) const $node2 = createElement("section"); const $node3 = createElement("div"); $node3.textContent = "second temp"; insert($node2, $node3); const $node4 = createElement("div"); - $node4.className = "very deep"; + setClassName($node4, "very deep"); const $node5 = createElement("div"); - $node5.className = "nono"; + setClassName($node5, "nono"); const $node6 = createElement("div"); const $node7 = createElement("div"); const $node8 = createElement("p"); diff --git a/packages/transpiler/jsx-view-parser/package.json b/packages/transpiler/jsx-view-parser/package.json index 8f3389c7..c9ef4efa 100755 --- a/packages/transpiler/jsx-view-parser/package.json +++ b/packages/transpiler/jsx-view-parser/package.json @@ -23,11 +23,11 @@ "devDependencies": { "@babel/core": "^7.20.12", "@types/babel__core": "^7.20.5", - "@vitest/ui": "^0.34.5", + "@vitest/ui": "^1.2.1", "tsup": "^6.7.0", "typescript": "^5.3.2", "@babel/plugin-syntax-jsx": "7.16.7", - "vitest": "^0.34.5" + "vitest": "^1.2.1" }, "tsup": { "entry": [ diff --git a/packages/transpiler/jsx-view-parser/src/parser.ts b/packages/transpiler/jsx-view-parser/src/parser.ts index 23d912e3..2e511446 100644 --- a/packages/transpiler/jsx-view-parser/src/parser.ts +++ b/packages/transpiler/jsx-view-parser/src/parser.ts @@ -69,7 +69,7 @@ export class ViewParser { if (!text) return; this.viewUnits.push({ type: 'text', - content: this.t.stringLiteral(text), + content: this.t.stringLiteral(node.value), }); }